@charset "UTF-8";


/* THEME VARIÁVEIS */
:root {

   /* BLACK AND WITHE  */
   --black-01: #070707;
   --black-02: #0b0c0c;
   --black-03: #03050a;

   --white-01: #f1f1f1;
   --white-02: #7e7e7e;
   --white-03: #dfdada;

   --gray-01: #b7b7b7;
   --gray-02: #7e7e7e;
   --gray-03: #dfdada;

   /* them color - layout */
   --gradiente-01: linear-gradient(90deg, #0f0b29, #421873);
   --gradiente_Color01: #0f0b29;
   --gradiente_Color02: #421873;
   --gradiente_Color03: #0f0b29;
   --gradiente_Color04: #229ae0;

   --theme_color_secundary_01: rgba(31, 17, 221, 0.096);
   --theme_color_secundary_02: #0f0b29;
   --theme_color_secundary: #0f0b29;

   /* theme color OPACITY - layout */
   --color_opacity_01: #000000b6;


   --themeColor-01: #B7FA39;
   --themeColor-01: #b3ff3c;
   --themeColor-01: #b8fe60;
   --themeColor-02: #291cb4;
   --themeColor-02: #2c28ff;
   /* --themeColor-02: #B7FA39; */
   --themeColor-03: #421873;
   --themeColor-04: #d90851;
   --themeColor-05: #dd2929;
   --themeColor-06: #ef7136;
   --themeColor-07: #f3c52d;

   /* THEME COLORS */
   --themeColor-01: #B7FA39;
   --themeColor-02: #b8fe60;
   /* --themeColor-02: #B7FA39; */
   --themeColor-03: #421873;
   --themeColor-04: #d90851;
   --themeColor-05: #dd2929;
   --themeColor-06: #ef7136;
   --themeColor-07: #f3c52d;

   /* THEME COLORS BORDERS */
   --colorBorder01: #23232530;

   /* colors cards */
   --cardCalor: hsla(0, 0%, 4%, 0.836);
   --cardCalor2: #080808f3;

   /* BLUR */
   --Blur: 10px;
   /* BLUR */
   --borderRadius: .46rem;

   --_hue: 210;
   --_lightness: 25%;
   --_color: hsl(var(--_hue) 100% var(--_lightness));

   /* Layout */
   --layoutSmall: 80%;
   --layoutMedium: 86%;
   --layoutLarge: 92%;
   --layoutSmall_vw: 92%;

   /* margin */
   --margin: 60px;
   --margin_containers: 280px;
   --layoutSmall_vw: 86%;

   /* padding */
   --padding_01: 100px;

   /* Fonts */
   /*========== Font and typography ==========*/
   /*.5rem = 8px | 1rem = 16px ...*/
   --fontText_01: 2.618em;
   --fontText_02: calc(var(--fontText_01) / 1.618em);
   --fontText_03: calc(var(--fontText_01) * 1.618em);


   --width: 100%;
   --full-width: 100%;

   /* ANimações */
   --Time300: 300ms;

   /* sticky */
   --medidas_sticky: 12%;
}

/* Reset - Thiago Ferreira 2025 */
*,
*::after,
*::before {
   box-sizing: border-box;
   outline: 0;

   margin: 0;
   padding: 0;
   border: 0;
   vertical-align: baseline;
   list-style: none;
   text-decoration: none;
}

::selection {
   background: var(--themeColor-02);
   color: var(--black-01);
}

a,
article,
aside,
canvas,
details,
div,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
ol,
ul {
   display: flex;
   list-style: none;
}


main {
   width: 100%;
   padding: 0;
   margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
   line-height: normal;
}

h1 {
   font-size: 3em;
   margin-bottom: 10px;
   font-weight: 600;
}

h2 {
   font-size: 2em;
   margin-bottom: 10px;
   font-weight: 600;
}

h3 {
   font-size: 1.618em;
   margin-bottom: 10px;
   font-weight: 600;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}

img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

svg {
   width: 100%;
   height: 100%;
   /* display: flexbox; */
   transform-box: fill-box;
}

.image_block {
   display: none;
}

body {
   width: 100%;
   max-width: 1920px;
   margin: 0 auto;
   height: 100vh;
   overflow-x: hidden;
   font-size: 16px;
   scroll-behavior: smooth;
   position: relative;
   /* line-height: 1.3em; */
   font-weight: 300;
   letter-spacing: 0.011em;
   font-family: 'Kanit', sans-serif;
   color: var(--gray-01);
   background: radial-gradient(circle, #010102, #050407);

   transition: background-color .2s;
   -webkit-transition: background-color .2s;
   -moz-transition: background-color .2s;
   -ms-transition: background-color .2s;
   -o-transition: background-color .2s;
}

/* Predefinições - Texto */
p {
   margin-bottom: 10px;
}

.destaque_01 {
   font-weight: 600;
   color: var(--themeColor-02);
}

.destaque_02 {
   font-weight: 600;
   color: var(--themeColor-06);
}


/* Animações */
/* Animações */

.anime {
   opacity: 0;
   /* Começa invisível */
   transform: translateY(20px);
   /* Move para baixo */
   transition: opacity 0.5s ease-out, transform 0.5s ease-out;
   /* Transições suaves */
}

.anime.visible {
   opacity: 1;
   transform: translateY(0);
}

.anime {
   opacity: 0;
   transform: translateY(50px);
   transition: opacity var(--duration, 0.6s) ease-out, transform var(--duration, 0.6s) ease-out;
   will-change: opacity, transform;
}

.anime-show {
   opacity: 1;
   transform: translateY(0);
}


/* Tela de Carregamento */

/* Animação de Carregamento */

/* animação svg */
:root {
   /* Cor do contorno */
   --stroke-width: 0.05;
   /* Espessura do contorno */
   --stroke-dasharray: 50;
   /* Tamanho do traço */
   --stroke-dashoffset: 50;
   /* Offset inicial do traço */
   --animation-duration: 2s;
   /* Duração da animação */
   --animation-timing: cubic-bezier(0.25, 0.1, 0.25, 1);
   /* Função de tempo da animação */
}

/* Define a aparência do caminho */
.animate-path path {
   fill: none;
   /* Nenhum preenchimento inicial */
   stroke: var(--themeColor-02);
   stroke-width: var(--stroke-width);
   stroke-dasharray: var(--stroke-dasharray);
   stroke-dashoffset: var(--stroke-dashoffset);
   -webkit-transition: fill 0.5s ease-in-out;
   -moz-transition: fill 0.5s ease-in-out;
   transition: fill 0.5s ease-in-out;
}

/* Classe para ativar a animação */
.animate path {
   -webkit-animation: draw var(--animation-duration) var(--animation-timing) forwards;
   -moz-animation: draw var(--animation-duration) var(--animation-timing) forwards;
   animation: draw var(--animation-duration) var(--animation-timing) forwards;
}

/* Animação de contorno com efeito elástico */
@-webkit-keyframes draw {
   0% {
      stroke-dashoffset: var(--stroke-dashoffset);
   }

   60% {
      stroke-dashoffset: 0;
   }

   100% {
      stroke-dashoffset: 0;
   }
}

@-moz-keyframes draw {
   0% {
      stroke-dashoffset: var(--stroke-dashoffset);
   }

   60% {
      stroke-dashoffset: 0;
   }

   100% {
      stroke-dashoffset: 0;
   }
}

@keyframes draw {
   0% {
      stroke-dashoffset: var(--stroke-dashoffset);
   }

   60% {
      stroke-dashoffset: 0;
   }

   100% {
      stroke-dashoffset: 0;
   }
}


.animate-path {
   width: 350px;
}

.animate-path-2 {
   width: 230px;
}

/* Classe para preenchimento final */
.animate-path path.fillAdd {
   fill: var(--black-01);
   stroke-width: var(--stroke-width);
}

/* animação svg */

/* animação texto */
.gradient_text {
   --bg-size: 400%;
   --color-one: var(--themeColor-02);
   --color-two: var(--theme_color_secundary_02);
   /* font-size: clamp(2rem, 99vmin, 3rem); */
   font-size: 3rem;
   background: linear-gradient(90deg,
         var(--color-one),
         var(--color-two),
         var(--color-one)) 0 0 / var(--bg-size) 100%;
   color: transparent;
   background-clip: text;
   line-height: .8em;
   padding-bottom: 10px;
   word-break: break-word;
   font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
   .gradient_text {
      animation: move-bg 8s linear infinite;
   }

   @keyframes move-bg {
      to {
         background-position: var(--bg-size) 0;
      }
   }
}

/* animação texto */
.counter {
   --timer_clound_number: 0.2s;
   transition: transform var(--timer_clound_number) ease-in-out;
   animation: transform var(--timer_clound_number) ease-in-out;
   -moz-animation: transform var(--timer_clound_number) ease-in-out;
   -webkit-animation: transform var(--timer_clound_number) ease-in-out;
}

.firework,
.fireworks_2 {
   filter: blur(1px);
   filter: contrast(150px);
   position: absolute;
   width: 1px;
   /* Tamanho padrão */
   height: 2px;
   /* Cor padrão, sobrescrito no JS */
   border-radius: 10%;
   /* Forma inicial como círculo */
   transform: translate(-80%, -80%);
   animation: firework-explode var(--duration) ease-out forwards;
   mix-blend-mode: screen;
   /* Efeito de mesclagem de cores */
   z-index: 10;
}

.firework {
   top: calc(50% - 3px);
}

.firework_2 {
   bottom: 0;
}

@keyframes firework-explode {
   0% {
      transform: translate(-50%, -50%);
      opacity: 1;
   }

   100% {
      transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
      opacity: 0;
   }
}


@keyframes colorShift {

   0%,
   100% {
      background-color: var(--themeColor-02);
   }

   25% {
      background-color: var(--themeColor-02);
   }

   50% {
      background-color: var(--themeColor-02);
   }

   75% {
      background-color: var(--themeColor-02);
   }
}

.firework.particle {
   animation: burst 1.5s ease-out forwards, colorShift 1.5s linear infinite;
}

/* parallax */
.xParallax {
   transition: transform 0.1s linear;
   will-change: transform;
   transform: translate3d(0, 0, 0);
}


/* EFECT MOUSE SCROLL */
.scroll-indicator {
   --width: 30px;
   width: var(--width);
   text-align: center;
   position: absolute;
   left: calc(50% - var(--width) / 2);
   bottom: 8%;
   /* cursor: pointer; */
   z-index: 6;
}

.mouse {
   width: 25px;
   height: 45px;
   border: 2px solid var(--colorBorder01);
   border-radius: 25px;
   position: relative;
   background-color: transparent;
   display: flex;
   justify-content: center;
   align-items: flex-start;
}

.wheel {
   width: 3px;
   height: 6px;
   background-color: var(--themeColor-02);
   opacity: 0.5;
   border-radius: 5px;
   margin-top: 5px;
   animation: scrollAnim 1s infinite ease-in-out;
}

@keyframes scrollAnim {
   0% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(10px);
   }

   100% {
      transform: translateY(0);
   }
}

/* Animações */
/* Animações */

/* MENU */
.container_header {
   top: 0;
   position: fixed;
   width: 100%;
   z-index: 99999;
   transition: all 300ms ease-in-out;
   -moz-transition: all 300ms ease-in-out;
   -webkit-transition: all 300ms ease-in-out;
}

.container_header .sticky {
   width: 100%;
   padding: 0 8%;
   background: rgba(0, 0, 0, 0.87);

   transition: all 300ms ease-in-out;
   -moz-transition: all 300ms ease-in-out;
   -webkit-transition: all 300ms ease-in-out;
}

.container_header::after {
   content: '';
   top: 0;
   left: 0;
   width: 100%;
   height: auto;
   padding: 40px 0;
   backdrop-filter: blur(var(--Blur));
   position: absolute;
   /* border-bottom: 1px solid var(--theme_color_secundary_02); */
   /* background: #000000a8; */
}

.container_header::after .sticky {
   background: #a82020a8;
}

.container_nav {
   width: 86%;
   position: relative;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0px 0px;
   z-index: 99999;
}

.container_nav h1 {
   display: none;
}


.container_nav .sticky {
   width: 84%;
}


.container_logo {
   width: auto;
   padding: 0px 0px;
   justify-content: space-around;
   align-items: center;
}

.logo_container {
   width: 180px;
   height: 80px;
}

.icon_eagle {
   transform-box: fill-box;
   fill: var(--themeColor-02);
}

.text_name {
   fill: var(--white-01);
}

.text_designer {
   fill: var(--gray-01);
}

.text_ux, .text_ui {
   transform-box: fill-box;
   fill: var(--themeColor-02);
}

/*  */
#logo_container {
   width: 220px;
   height: 80px;
}

#icon_logo {
   transform-box: fill-box;
   fill: var(--themeColor-02);
}

#text_logo {
   fill: var(--white-03);
}

#text_ux,
#text_ui {
   fill: var(--themeColor-02);
}

.aguia_icon {
   fill: var(--themeColor-02);
}

#designer,
#text_barra {
   fill: var(--gray-01);
}


.hamburger {
   width: 40px;
   height: 40px;
   padding: 10px 5px;
   display: flex;
   flex-direction: column;
   gap: 7px;
   justify-content: flex-end;
   align-items: center;
   cursor: pointer;
   position: relative;
   z-index: 9;
   /* border: 1px solid #15a; */
   transition: transform 400ms ease, background 300ms ease;
}

.hamburger span {
   display: block;
   height: 2px;
}

.hamburger span:nth-child(1) {
   width: 50%;
   padding: 0px;
   transition: transform 400ms ease, background 300ms ease;
   background: var(--themeColor-02);
}

.hamburger span:nth-child(2) {
   width: 100%;
   background: var(--themeColor-02);
   /* background: transparent; */
}

.hamburger span:nth-child(3) {
   width: 50%;
   padding: 0px;
   transition: transform 400ms ease, background 300ms ease;
   background: var(--themeColor-02);
}

.hamburger.active {
   padding: 14px 0;
   justify-content: center;
   /* Alinha as colunas à direita */
   align-items: center;
   transition: transform 400ms ease, background 300ms ease;
}

.hamburger.active span:nth-child(1) {
   width: 60%;
   transform: rotate(45deg) translate(5px, 5px);
   background: var(--themeColor-05);
}

.hamburger.active span:nth-child(2) {
   opacity: 0;
   display: none;
}

.hamburger.active span:nth-child(3) {
   transform: rotate(-45deg) translate(1px, -1px);
   width: 60%;
   background: var(--themeColor-05);
}

.menu {
   --time: 200ms;
   position: fixed;
   top: -100%;
   left: 0;
   width: 100%;
   height: 100vh;
   background: var(--color_opacity_01);
   backdrop-filter: blur(var(--Blur));
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1;
   transition: top var(--time) ease;
   -webkit-transition: top var(--time) ease;
   -moz-transition: top var(--time) ease;
   -ms-transition: top var(--time) ease;
   -o-transition: top var(--time) ease;
}

.menu ul {
   list-style: none;
   text-align: center;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.menu ul li {
   opacity: 0;
   text-align: center;
   animation: fadeIn 0.5s ease-in-out forwards;
   -webkit-animation: fadeIn 0.5s ease-in-out forwards;
}

#menu.active {
   transform: translateY(0);
   z-index: 1;
}

#menu ul li:nth-child(1) {
   animation-delay: 0.1s;
}

#menu ul li:nth-child(2) {
   animation-delay: 0.2s;
}

#menu ul li:nth-child(3) {
   animation-delay: 0.3s;
}

#menu ul li:nth-child(4) {
   animation-delay: 0.4s;
}

#menu ul li:nth-child(5) {
   animation-delay: .5s;
}

#menu ul li:nth-child(6) {
   animation-delay: .6s;
}

#menu ul li:nth-child(7) {
   animation-delay: .7s;
}

#menu ul li:nth-child(8) {
   animation-delay: .8s;
}

.menu ul li a {
   --value_transform: 10px;
   font-size: 1.700rem;
   text-decoration: none;
   padding: 3px 0;
   color: var(--gray-01);
   font-weight: 500;
   text-align: center;
   transition: color var(--Time300) ease;
   transform: translateY(var(--value_transform));
   -webkit-transform: translateY(var(--value_transform));
   -moz-transform: translateY(var(--value_transform));
   -ms-transform: translateY(var(--value_transform));
   -o-transform: translateY(var(--value_transform));
}

.menu a.active {
   color: var(--themeColor-02);
}

.menu a:hover {
   color: var(--themeColor-02);
}

.menu.active {
   top: 0;
}

@keyframes fadeIn {
   0% {
      opacity: 0;
      transform: translateY(22px);
      -webkit-transform: translateY(22px);
      -moz-transform: translateY(22px);
      -ms-transform: translateY(22px);
      -o-transform: translateY(22px);
   }

   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

/* SLIDER */
.home__container_slider {
   width: 100%;
   min-height: 100vh;
   align-items: center;
   justify-content: center;
   position: relative;
   /* background-image: url('../images/bg_black.png'); */
   background-position: bottom;
   background-attachment: fixed;
   background-size: cover;
   backdrop-filter: opacity(.1);
   z-index: 3;
   /* 
   background: linear-gradient(135deg, #0a0a0ac9, #030307d3, #000000cb); */



   inset: 6px;
   box-shadow: -8px 0px 4px rgba(8, 7, 8, 0.39);

   /* background: radial-gradient(circle at top right,
         rgba(183, 250, 57, 0.8),
         rgba(41, 28, 180, 0.8),
         rgba(66, 24, 115, 0.8),
         rgba(217, 8, 81, 0.8),
         rgba(221, 41, 41, 0.8),
         rgba(239, 113, 54, 0.8),
         rgba(243, 197, 45, 0.8)); */

   background-attachment: fixed;
}

.slider_container {
   width: var(--layoutSmall);
   height: 100%;
   gap: 20px;
   justify-content: space-between;
   align-items: center;
   position: relative;
   z-index: 3;
   /* background-color: #f98; */
}

.slider_left {
   width: 35%;
   background: #42187300;
   padding: 0;
   flex-direction: column;
}

.slider_left h3 {
   font-size: 1.9em;
   margin-bottom: 16px;
}

.slider_left p {
   font-size: 1.2em;
   font-weight: 300;
}

.tag_descriptiom_slider {
   width: fit-content;
   border: 2px solid rgba(78, 78, 78, 0.63);
   padding: 6px 10px;
   inset: 5;
   inset-inline-start: 2px;
   flex-direction: column;
   font-size: .888em;
   font-weight: 300;
   margin-bottom: 10px;
   color: var(--gray-01);
   border-radius: var(--borderRadius);
   background: #22222277;
}


@keyframes blink-caret {

   from,
   to {
      border-color: transparent;
   }

   50% {
      border-color: #333;
   }
}

.cursor {
   display: inline-block;
   width: 2px;
   height: 22px;
   margin-left: 4px;
   margin-top: 0px;
   position: absolute;
   background-color: var(--themeColor-02);
   text-indent: -99999px;
   align-items: center;
   justify-content: center;
   animation: blink-caret 0.75s step-end infinite;
}

.tittle_slider {
   color: transparent;
   background: linear-gradient(140deg, var(--themeColor-02) 10%, #d66 100%);
   -webkit-background-clip: text;
   background-clip: text;
   line-height: 1em;
   margin-bottom: 20px;
}

.slider_left ul {
   width: 100%;
   flex-direction: row;
   gap: 20px;
   justify-content: flex-start;
   /* background: #421873; */
   margin-top: 40px;
}

.slider_left ul li a {
   font-size: .922em;
   font-weight: 300;
}

.btn_slider {
   padding: 12px 22px;
   border-radius: var(--borderRadius);
   width: 100%;
   font-size: 1.5em;
   flex-direction: row;
   /* background: #157da7; */
}

.btn_01 {
   background: #21241b;
   color: var(--white-03);
}

.btn_02 {
   border: 1px solid var(--themeColor-02);
   color: var(--white-03);
}

.slider_right {
   width: 36%;
   /* background: #33105c; */
}

.parent {
   width: 100%;
   min-height: 470px;
   display: grid;
   grid-template-rows: repeat(5, 1fr);
   gap: 18px;
}

.container_grid_slider {
   width: 100%;
   min-height: 470px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(4, 1fr);
   gap: 22px;
   grid-template-areas:
      "gs_01 gs_03"
      "gs_01 gs_04"
      "gs_01 gs_04"
      "gs_02 gs_04";
}

.grid-slider {
   /* height: 100%; */
   border-radius: 10px;
   padding: 10px;

   border: 1px solid #131313;

   background: linear-gradient(var(--cardCalor2) 100%, #030305 10%) padding-box, linear-gradient(140deg, #d4ec4cf1 9%, var(--cardCalor) 16%, #030305 100%) border-box;
}

.gs_01 {
   grid-area: gs_01;
   padding: 10px 5px 0 5px;
   background: linear-gradient(var(--cardCalor2) 100%, #000000 10%) padding-box, linear-gradient(140deg, #7aff5f93 9%, var(--cardCalor) 16%, #000000 100%) border-box;
   /* background-size: cover; */
   justify-content: center;
   align-items: start;
   justify-content: space-between;
   flex-direction: column;
   position: relative;
   border: 1px solid var(--colorBorder01);
}

.gs_01 figure {
   width: 100%;
   height: 300px;
   /* background-color: #007bff38; */
   overflow: hidden;
   position: absolute;
   bottom: 0;
}

.gs_01 img {
   width: 600px;
   height: 400px;
   position: absolute;
   left: -90px;
   bottom: -100px;
}

.gs_01 h2 {
   font-size: 2.258em;
   line-height: .988em;
   font-weight: 600;
   position: absolute;
   top: 20px;
   left: 20px;
   word-wrap: break-all;
}

.gs_02 {
   grid-area: gs_02;
   position: relative;
   padding: 1px;
   color: var(--white-03);
   font-weight: 300;

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

   gap: 20px;

   background: linear-gradient(var(--cardCalor2) 100%, #000000 20%) padding-box, linear-gradient(140deg, #e4ff4d71 10%, var(--cardCalor) 18%, #000000 100%) border-box;
}

.gs_tag02 {
   --square: 56px;
   width: var(--square);
   height: var(--square);
   border: 10px;

   border: 1px solid rgba(71, 71, 71, 0.486);
   border-radius: 8px;

   justify-content: center;
   align-items: center;
   padding: 0px;

   color: var(--themeColor-02);
}

.icon_brain {
   width: 28px;
   height: 28px;
}

.icon_brain_border {
   fill: #424244;
}

.icon_brain_raio {
   width: 20px;
   height: 20px;
   transform-box: fill-box;
   fill: var(--themeColor-02);
}

.icon_interface {
   width: 48px;
   height: 30px;
   fill: #424244;
}

.icon_interface_retangle {
   fill: var(--themeColor-02);
}

.icon_interface_mouse {
   fill: var(--themeColor-02);
}

/* .container_inf_nav {
   color: #535353;
   font-weight: 300;
   font-size: .92em;
   align-items: center;
   justify-content: space-between;
   border: 1px solid #484848;
   padding: 6px 16px 7px 7px;
   border-radius: 100px;
}

.container_inf_nav_img {
   width: 30px;
   height: 30px;
   margin-right: 20px;
   border-radius: 100px;
   border: 1.2px solid var(--themeColor-02);
   padding: 3px;
}

.container_inf_nav_img img {
   border: 1px solid #F15;
   border-radius: 100px;
} */

.icon_devices {
   width: 48px;
   height: 30px;
   fill: var(--themeColor-04);
   fill: #424244;
}


.icon_device_circle {
   fill: var(--themeColor-02);
   opacity: 0.8;
}


.gs_03 {
   grid-area: gs_03;
   position: relative;
   border: 1px solid var(--colorBorder01);
}

.gs_03 span:nth-child(2) {
   color: var(--themeColor-02);
}

.gs_03 h3 {
   position: absolute;
   top: 10px;
   left: 10px;
   font-size: 1.218em;
   font-weight: 300;
   position: relative;
}


.Stars_shine {
   position: absolute;
   bottom: 10px;
   right: 10px;
   width: 20px;
   height: 20px;
}

.Stars_shine {
   fill: var(--themeColor-02);
}

.gs_04 {
   grid-area: gs_04;

   flex-direction: column;
   align-items: center;
   justify-content: center;

   background: linear-gradient(var(--cardCalor2) 100%, #753636 10%) padding-box, linear-gradient(140deg, #97ee0b 9%, var(--cardCalor) 16%, #000000 100%) border-box;
}

.gs_04 span:nth-child(1) {
   font-size: 1.5em;
   font-weight: 300;
   padding: 0;
}

.gs_04 span:nth-child(2) {
   font-size: 6em;
   font-weight: 600;
   padding: 0;
   color: var(--themeColor-02);
   /* color: var(--themeColor-04); */
}

.gs_04 span:nth-child(3) {
   font-size: 1.5em;
   font-weight: 300;
   padding: 0;
}


.grid_slider_item {
   border-radius: var(--borderRadius);

   border: 2px solid var(--colorBorder01);
   padding: 20px;
}

.slider_item_01_starts {
   content: '';
   position: absolute;
   top: -52px;
   right: -20px;
   width: 80px;
   height: 30px;
   border-radius: 60px;
   background: #0b0c0c0e;
   backdrop-filter: blur(6px);
   border: 1px solid var(--colorBorder01);
   /* box-shadow: 1px 8px 10px rgba(0, 0, 0, 0.4); */
   gap: 4px;
   align-items: center;
   justify-content: center;
}

.Star {
   width: 8px;
   height: 8px;
   fill: rgb(51, 51, 51);
   fill: #b7fe608e;
}

.Star:hover {
   width: 8px;
   height: 8px;
   fill: rgb(219, 205, 11);
}


.carousel_slider {
   width: 80%;
   bottom: 10px;
   position: absolute;
}

.carousel_slider li {
   font-size: 1em;
   font-weight: 600;
   text-transform: uppercase;
   color: rgb(15, 15, 15);
   padding: 0 5px;
}

.home__redessociais_slider {
   position: absolute;
   right: 2%;
   z-index: 3;
}

.home__redessociais_slider ul {
   flex-direction: column;
   gap: 10px;
}

.home__redessociais_slider a {
   --square: 30px;
   width: var(--square);
   height: var(--square);
   background: #3a3a3a00;
   border-radius: 100%;
   padding: 0px;
   border: 1px solid var(--colorBorder01);
}

.whatsapp,
.instagram,
.behance {
   fill: var(--gray-02);
}

.image_box_slider {
   width: 100%;
   height: 100%;
   border-radius: var(--borderRadius);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   position: absolute;
   bottom: 0;
   z-index: 0;
   padding: 5%;
   background-attachment: fixed;

   /* background-attachment: fixed; */
   /* filter: blur(30px); */
   /* opacity: 0.09; */
}

.image_box_slider svg {
   fill: #00000000;
   stroke-width: 0.02;
   stroke: rgba(85, 102, 102, 0.048);
}

.grid_slider_last {
   padding: 8px;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--colorBorder01);
   background: var(--color_opacity_01);
}


/* Container uxui */
.ship_UxUI {
   width: var(--layoutSmall);
   margin: var(--margin_containers) auto;
   flex-direction: column;
   position: relative;
}

.ship_UxUI h2 {
   font-size: 1.618em;
   font-weight: 300;
   color: var(--gray-02);
   margin-bottom: 20px;
   text-align: center;
}

.brain_ux {
   width: 40px;
   height: 40px;
   fill: rgb(93, 55, 197);
   margin-bottom: 20px;
}

.design_ui {
   width: 40px;
   height: 40px;
   fill: #da6558;
   margin-bottom: 20px;
}

.rocket {
   width: 40px;
   height: 40px;
   fill: rgb(93, 55, 197);
   transform: rotate(56deg);
}

.home_container_uxui {
   width: 100%;
   min-height: 60vh;
   flex-direction: row;
   align-items: start;
   justify-content: space-between;
   /* align-items: center; */
   margin: 0 auto;
   /* background: var(--black-03); */
   /* border: 1px solid var(--colorBorder01); */
   gap: 30px;
   padding: 30px;
   border-radius: var(--borderRadius);
}

.boxes_uxui {
   width: 24%;
   flex-direction: column;
   position: sticky;
   top: 100px;
   /* background: rgb(17, 17, 62); */
   padding: 30px;
   border-radius: var(--borderRadius);
}

.title_ux {
   font-size: 2.618em;
   font-weight: 600;
   background: linear-gradient(90deg, #6c58da 25%, #c711ff 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   margin-bottom: 4px;
}

.title_ui {
   font-size: 2.618em;
   font-weight: 600;
   background: linear-gradient(90deg, rgb(218, 101, 88) 25%, #f15 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   margin-bottom: 4px;
}

.container_img_uxui {
   width: 40%;
   border-radius: var(--borderRadius);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   position: relative;
   overflow: hidden;
   align-items: center;
   flex-direction: column;
   justify-content: space-between;
}

.theme_site_02 .aguia_icon {
   fill: #6c58da;
}

.theme_site_03 .aguia_icon {
   fill: #da6558;
}

.theme_site_02 .destaque_01 {
   fill: #6c58da;
}

.theme_site_02 #text_ux {
   fill: #6c58da;
}

.theme_site_02 #text_ui {
   fill: #6c58da;
}

.theme_site_03 #text_ux {
   fill: #6c58da;
}

.theme_site_03 #text_ux {
   fill: #da6558;
}

.theme_site_03 #text_ui {
   fill: #da6558;
}

.theme_site_02 .hamburger span {
   background: #6c58da;
}

.theme_site_03 .hamburger span {
   background: #da6558;
}

.boxes_uxui_circle {
   width: 60%;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(3, 1fr);
   gap: 20px;
   align-items: center;
   justify-content: center;
   padding: 20px;
   /* background: var(--themeColor-01); */
   border-radius: var(--borderRadius);
}

.grid_box_uxui {
   /* min-height: 690px; */
   height: max-content;
   background: rgb(10, 8, 10);
   min-height: 520px;
   border-radius: var(--borderRadius);
   /* text-align: center; */
   align-items: start;
   justify-content: start;
   flex-direction: column;
   position: relative;
   border-radius: var(--borderRadius);
   padding: 40px;

   background: linear-gradient(135deg, #020202, #040307, #0a0b0e);
   border: 1px solid rgba(240, 240, 240, 0.041);
   border-radius: var(--borderRadius);
   inset: 6px;
   box-shadow: -8px 0px 4px rgba(8, 7, 8, 0.39);
}

/* .grid_box_uxui::before {
   content: '';
   width: 100px;
   height: 20px;
   background: url('../images/bar-02.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   border-radius: 2px;
   transform: rotate(-1deg);
   position: absolute;
   right: 10px;
   top: 0px;
   z-index: 3;
} */

.grid_box_uxui figure {
   width: 100%;
   height: 100px;
   padding: 50px;
   display: flex;
   /* position: absolute; */
   border-radius: var(--borderRadius);
   padding: 6px;
   margin-bottom: 30px;
   border: 2px solid var(--colorBorder01);
   box-shadow: 0 4px 50px rgba(0, 0, 10, 0.1);
   overflow: hidden;
   display: none;
}

.grid_box_uxui img {
   display: flex;
   border-radius: var(--borderRadius);
   border: 2px solid var(--colorBorder01);
   padding: 2px;
   margin-bottom: 20px;

   transition: all 300ms ease-in-out;
   -webkit-transition: all 300ms ease-in-out;
   -moz-transition: all 300ms ease-in-out;
   -o-transition: all 300ms ease-in-out;
}

.grid_box_uxui:hover img {
   scale: 1.3;
}

.grid_box_uxui h2 {
   font-size: 1.800em;
   line-height: 1.1em;
   font-weight: 600;
   text-align: left;
   margin-bottom: 18px;
}

.tittle_UX_card {
   background: linear-gradient(90deg, #6c58da 25%, #c711ff 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.tittle_UI_card {
   background: linear-gradient(90deg, #da6558 25%, #dd1b52 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.grid_box_uxui p {
   font-size: .980em;
   font-weight: 300;
   /* color: var(--gradiente_Color02); */
   margin-bottom: 30px;
}

.tag_cards {
   flex-direction: column;
   gap: 10px;
   margin-bottom: 50px;
   position: absolute;
   bottom: 60px;
   left: 40px;
}

.tag_cards h6 {
   font-size: .88em;
   font-weight: 300;
}

.box_aa {
   width: 80%;
   bottom: 30px;
   left: calc(50% - 40%);
   position: absolute;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
}

.box_aa div:nth-child(1) {
   width: 20px;
   height: 20px;
   font-weight: 900;
   color: #3f2558;
   padding-bottom: 28px;
}

.box_aa div:nth-child(2) {
   width: 54%;
   height: 1px;
   background: linear-gradient(to right, #474747, #191131);
}

.box_bb {
   width: 80%;
   bottom: 30px;
   left: calc(50% - 40%);
   position: absolute;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
}

.box_bb div:nth-child(1) {
   width: 20px;
   height: 20px;
   font-weight: 900;
   color: #da6558;
   padding-bottom: 28px;
}

.box_bb div:nth-child(2) {
   width: 54%;
   height: 1px;
   background: linear-gradient(to right, #474747, #da6558);
}

.infinity_svg {
   width: 22px;
   stroke-width: 0;
   stroke: #6c58da;
   border: none;
   fill: var(--themeColor-01);
}

/* #circle_ux {
   fill: var(--themeColor-04);
   stroke-width: 4;
   stroke-dasharray: none;
   stroke: #54a;
}

#circle_ui {
   fill: var(--themeColor-03);
}

#intercessao {
   fill: var(--themeColor-06);
   opacity: 0.1;
}

.boxes_uxui_circle h3 {
   position: absolute;
} */


/* .boxes_uxui_circle ul {
   width: 400px;
   height: 400px;
   border-radius: 100%;
   border: 1px solid var(--themeColor-02);
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   flex-direction: column;
}

.boxes_uxui_circle:nth-child(2) ul {
   width: 100px;
   height: 100px;
   border-radius: 100%;
   background: var(--themeColor-02);
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   flex-direction: column;
} */


/* servicos */
.servicos {
   width: 100%;
   margin: var(--margin_containers) auto;
   /* margin: 0 auto; */
   padding: 40px;
   flex-direction: column;
   text-align: center;
   justify-content: center;
   align-items: center;
   /* background: #d69; */
}

.servicos_container {
   width: 100%;
   margin: 0 auto;
   padding: 20px;
   display: grid;
   grid-template-rows: repeat(2, 1fr);
   grid-template-columns: repeat(3, 1fr);
   gap: 28px;
   border-radius: var(--borderRadius);
   /* background: #d16; */
}

.servicos_item {
   min-height: 420px;
   padding: 40px;
   flex-direction: column;
   justify-content: start;
   align-items: center;
   /* background-color: #000000; */
   border-radius: var(--borderRadius);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
   border: 1px solid var(--colorBorder01);

   background: linear-gradient(135deg, #020202, #040307, #0a0b0e);
   position: relative;
}

.servicos_item_img {
   width: 90px;
   height: 90px;
   /* display: none; */
   border: 1px solid var(--themeColor-02);
   padding: 10px;
   border-radius: 100px;
   align-items: center;
   justify-content: center;

}

.servicos_item:nth-child(1) img {
   width: 46px;
   height: 40px;
}

.servicos_item:nth-child(2) img {
   width: 64px;
   height: 46px;
}

.servicos_item:nth-child(3) img {
   width: 40px;
   height: 30px;
}

.servicos_item:nth-child(4) img {
   width: 40px;
   height: 48px;
}

.servicos_item:nth-child(5) img {
   width: 50px;
   height: 60px;
}

.servicos_item:nth-child(6) img {
   width: 52px;
   height: 64px;
}


.servicos_item_img img {
   width: 100%;
   height: auto;
}


.servicos_item_text {
   padding: 20px;
   flex-direction: column;
}

.servicos_item_text h3 {
   margin-top: 0px;
   color: var(--themeColor-02);
}

.btn_cta {
   --wbtn: 230px;
   width: var(--wbtn);
   font-size: .8em;
   border: 2px solid #97eb5f81;
   color: var(--white-02);
   padding: 12px 22px;
   text-align: center;
   position: absolute;
   left: calc(50% - var(--wbtn) / 2);
   bottom: 20px;
   font-weight: 400;
   border-radius: 100px;
   background: linear-gradient(#97eb5f00 0%, rgba(99, 170, 32, 0) 50%);
}

.btn_cta i {
   width: 30px;
   height: 30px;
   background: #97eb5f;
   margin-right: 10px;
   position: absolute;
   right: -2px;
   bottom: calc(50% - 14px);
   border-radius: 100px;
   align-items: center;
   justify-content: center;
   display: flex;
}

.external_link {
   width: 16px;
   height: 16px;
   stroke: var(--black-01);
}


.btn_cta:hover {
   border: 1px solid #97eb5f17;
   background: linear-gradient(#8ce252 0%, rgb(84, 156, 16) 50%);
   color: var(--black-01);
}



/* quotes */
/* slider quotes */
.container_quotes {
   width: 60%;
   min-height: 30vh;
   padding-top: 64px;
   margin: var(--margin_containers) auto;
   position: relative;
   border-radius: var(--borderRadius);
   /* background: #ff8; */
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.tiitle_quotes {
   font-size: 1.618em;
   font-weight: 300;
   color: var(--gray-02);
   margin-bottom: 20px;
}

.quote_svg_aspas {
   width: 40px;
   height: 40px;
   fill: #00000000;
   stroke-width: 1;
   /* inset: 5px; */
   stroke: var(--themeColor-02);
   /* background: #15d; */
   position: absolute;
   top: 0;
}

.slider {
   display: flex;
   position: relative;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin-bottom: 50px;
}

.slide {
   min-width: 100%;
   justify-content: center;
   align-items: center;
   text-align: center;
   flex-direction: column;
   font-size: 1.5rem;
   opacity: 0;
   transform: translateX(100%);
   transition: all 0.8s ease-in-out;
   display: none;
}

.slide span {
   width: 100%;
   text-align: center;
   font-size: .8em;
   font-weight: 300;
   color: var(--themeColor-02);
}

.slide.active {
   opacity: 1;
   transform: translateX(0);
   display: block;
}

.slide.prev {
   opacity: 0;
   transform: translateX(-100%);
}

.progress-bar {
   position: absolute;
   bottom: -10px;
   width: 40%;
   height: 3px;
   padding: 1px;
   border-radius: 100px;
   background: #1d1d1d;
   overflow: hidden;
}

.progressQuote {
   width: 0;
   height: 100%;
   background: linear-gradient(to right, var(--themeColor-02) 80%, var(--themeColor-04) 100%);
   transition: width 3s linear;
}

/* Portifólio */
/* Portfólio */
.portfolio {
   width: 100%;
   padding: 50px 0;
   margin: var(--margin_containers) auto;
   /* background-color: #f9f9f9; */
}

.portfolio_container {
   width: 100%;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   padding: 0 0;
   /* background-color: #9e0707; */
}

.portfolio_grid {
   width: 100%;
   min-height: 60vh;
   ;
   max-height: 80vh;

   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
   /* background: #f92; */
   gap: 20px;
}

.portfolio_item {
   position: relative;
   overflow: hidden;
   border-radius: var(--borderRadius);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.portfolio_item img {
   width: 100%;
   height: auto;
   display: block;
   transition: transform 0.3s ease;
}

.portfolio_item:hover img {
   transform: scale(1.1);
}

.portfolio_overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.portfolio_item:hover .portfolio_overlay {
   opacity: 1;
}

.portfolio_overlay h3 {
   margin: 0;
   font-size: 1.5rem;
   text-align: center;
}




/*  */
/* Slider */
#preloader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--black-01);
   display: flex;
   gap: 30px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   z-index: 9999;
}

.loader {
   text-align: center;
   flex-direction: column;
}

.progress-bar-loading {
   width: 100%;
   background: var(--gray-01);
   border-radius: 100px;
   overflow: hidden;
   margin-bottom: 10px;
   padding: 2px;

}

.progress-loading {
   width: 0;
   height: 10px;
   background: var(--themeColor-01);
   border-radius: 5px;
   animation: loading 3s linear forwards;
}

@keyframes loading {
   0% {
      width: 0;
   }

   100% {
      width: 100%;
   }
}









/* Skillis */
.container_skills {
   width: var(--layoutSmall);
   margin: var(--margin_containers) auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   position: relative;
   gap: 30px;
   padding-top: 150px;
}

.container_skills h5 {
   width: 100%;
   top: 0;
   color: var(--gray-02);
   font-weight: 500;
   font-size: 4em;
   position: absolute;
   text-transform: lowercase;
   text-align: center;
   display: block;
   padding: 50px;
}

.boxs_skills {
   height: 10vh;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.boxs_skills h3 {
   font-size: var(--fontText_03);
   font-weight: 500;
   margin: 10px 0;
}

.skill-bar {
   width: 80%;
   background: #1d1d1d;
   border-radius: 70px;
   overflow: hidden;
   height: 8px;
   padding: 3px;
   inset: 10px;
}

.progress {
   height: 100%;
   width: 0;
   background: linear-gradient(90deg, var(--themeColor-02) 60%, var(--gradiente_Color04) 100%);
   transition: width 1s ease-in-out;
   border-radius: 30px;
}

/* .progress {
   height: 100%;
   width: 0;
   background: linear-gradient(90deg, var(--themeColor-02) 40%, #0e56db);
   transition: width 999ms ease-in-out;
   border-radius: 30px;
   box-shadow: 0 0 10px var(--themeColor-02), 0 0 20px var(--themeColor-02), 0 0 30px #0e56db, 0 0 20px #7093d4;
} */



/* contato */
.home__container_Contact {
   width: var(--layoutSmall);
   padding: 20px;
   margin: var(--margin_containers) auto;
   padding-bottom: 0px;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   /* background: rgb(17, 38, 85); */
}

.home__container_Card_Infos {
   width: 100%;
   gap: 20px;
   padding-top: 30px;
   justify-content: space-between;
   align-items: center;

   /* background: rgb(20, 8, 73); */
}

.card_box {
   perspective: 1000px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.card {
   width: 322px;
   height: 588px;
   position: relative;
   transform-style: preserve-3d;
   transition: transform 1s;
}

.card-back,
.card-front {
   position: absolute;
   padding: 20px;
   width: 100%;
   height: 100%;
   align-items: center;
   justify-content: space-between;
   backface-visibility: hidden;
   border-radius: var(--borderRadius);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   border: 2px solid var(--colorBorder01);
}

.card-back {
   background-color: #080808;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   transform: rotateY(180deg);
   border: 1px solid var(--colorBorder01);
}

.card-front {
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   border: 1px solid var(--colorBorder01);
   background: linear-gradient(var(--cardCalor) 99%, var(--cardCalor2) 40%) padding-box, linear-gradient(140deg, #b7fe6044 10%, var(--cardCalor) 45%, rgba(7, 5, 3, 0.952) 100%) border-box;
   transition: all 600ms cubic-bezier(0.25, 1, 0.5, 1);
   -webkit-transition: all 600ms cubic-bezier(0.25, 1, 0.5, 1);
   -moz-transition: all 600ms cubic-bezier(0.25, 1, 0.5, 1);
   -o-transition: all 600ms cubic-bezier(0.25, 1, 0.5, 1);
}

.card-front:hover {
   background: linear-gradient(var(--cardCalor) 99%, var(--cardCalor2) 40%) padding-box, linear-gradient(140deg, #b7fe60ce 30%, var(--cardCalor) 45%, rgba(7, 5, 3, 0.952) 100%) border-box;
   transition: all 600ms cubic-bezier(0.25, 1, 0.5, 1);
   -webkit-transition: all 600ms cubic-bezier(0.25, 1, 0.5, 1);
   -moz-transition: all 600ms cubic-bezier(0.25, 1, 0.5, 1);
   -o-transition: all 600ms cubic-bezier(0.25, 1, 0.5, 1);
}

.card-front-text {
   flex-direction: column;
   align-items: center;
}

.card-front-text h6 {
   font-size: 1.6em;
   color: var(--themeColor-02);
}

.card img {
   width: 220px;
   height: 220px;
   border-radius: 100%;
   border: 2px solid var(--colorBorder01);
   padding: 3px;
}

.card ul {
   list-style: none;
   padding: 0;
   display: flex;
   gap: 20px;
}

.card-front-social .link_card {
   width: 50px;
   height: 50px;
   padding: 10px;
   background: #0e0e0e;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   border-radius: 100px;
   /* color: var(--themeColor-02); */
   border: 2px solid var(--gray-02);
   transition: all 300ms ease-in-out;
}

.link_card:hover {
   border: 2px solid var(--themeColor-02);
   background: var(--themeColor-02);
   transition: all 300ms ease-in-out;
}

.link_card:hover .behance_logo {
   fill: var(--black-01);
}

.link_card:hover .behance_logo_retangle {
   fill: var(--black-01);
}

.behance_logo {
   width: 200px;
   height: 200px;
   transform-box: fill-box;
   fill: var(--gray-02);
   /* stroke: #010102; */
}

.behance_logo_retangle {
   fill: var(--themeColor-02);
}

.whatsapp_border {
   fill: var(--gray-02);
}

.whatsapp_phone {
   fill: var(--themeColor-02);
}

.whatsapp_phone {
   fill: var(--themeColor-02);
}

.link_card:hover .whatsapp_border,
.link_card:hover .whatsapp_phone {
   fill: var(--black-01);
}

.card article {
   text-align: center;
}

.card .span_tag {
   margin-top: 10px;
   font-weight: bold;
}

.span_tag {
   padding: 10px 0;
   display: block;
}

.back-text {
   font-size: 1.5rem;
   color: #333;
   font-weight: 600;
   margin-top: 30px;
   color: var(--themeColor-02);
}

.home__box_ContactInfo {
   width: 100%;
   display: flex;
   margin: 0 auto;
   /* background: #d82; */
}

.tittle_first {
   font-size: 1.818em;
   font-weight: 600;
   color: var(--gray-02);
   margin-bottom: 20px;

}

.copy-tooltip {
   position: absolute;
   background-color: var(--themeColor-02);
   color: var(--black-01);
   padding: 10px 15px;
   border-radius: 5px;
   font-size: 12px;
   z-index: 1000;
   opacity: 0.9;
   z-index: 400;
}

/*  */
.contact-grid {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
   gap: 20px;
   padding: 20px;
   justify-content: flex-start;
   /* background: #080808; */
   border-radius: 10px;
   /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
   /* border: 1px solid var(--colorBorder01); */
}

.contact-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.459);
   transition: transform 0.3s ease;
   border: 1px solid var(--black-02);
   background: linear-gradient(135deg, #0a0a0a, #040305, #060607);
}

.contact-item:hover {
   transform: translateY(-10px);
}

.contact-item i {
   font-size: 2rem;
   color: #3498db;
   margin-bottom: 10px;
}

.contact-item h4 {
   font-size: 1.2rem;
   margin-bottom: 5px;
   color: #868686;
}

.contact-item p {
   font-size: 1rem;
   color: #aaaaaa;
}

.bahance_icon {
   transform-box: fill-box;
   fill: rgb(207, 169, 169);
}

/*  */
.controller {
   min-width: max-content;
   padding: 7px 8px;
   border-radius: 50px;
   position: fixed;
   bottom: 10px;
   left: 50%;
   transform: translateX(-50%);
   background: #11111194;
   backdrop-filter: blur(20px);
   border: 1px solid var(--colorBorder01);
   color: white;
   align-items: center;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
   z-index: 800;
}

.box_icon_logo_controller {
   width: 80px;
   height: 40px;
   border-radius: 30px;
   background: rgb(17, 17, 17);
   padding: 6px;
   margin-right: 20px;
}

.icon_logo_controller {
   fill: var(--gray-02);
   transform: all 300ms ease-in-out;
}

.box_icon_logo_controller:hover .icon_logo_controller {
   fill: var(--themeColor-02);
}

.box_controller {
   width: max-content;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 30px;
}

.controller button {
   --cirlce: 40px;
   width: var(--cirlce);
   height: var(--cirlce);
   background: var(--black-03);
   border: none;
   padding: 10px;
   cursor: pointer;
   border-radius: 50px;
   border: 1px solid var(--colorBorder01);

   box-shadow: rgba(0, 0, 0, 0.288) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0) 0px 2px 1px, rgba(0, 0, 0, 0) 0px 4px 2px, rgba(0, 0, 0, 0) 0px 8px 4px, rgba(0, 0, 0, 0) 0px 16px 8px, rgba(0, 0, 0, 0.24) 0px 32px 16px;
}

.controller button:hover {
   background: var(--themeColor-02);
}

.arrow_botton_Controller {
   transform-box: fill-box;
   stroke-width: 3;
   stroke: var(--white-03);
   fill: var(--white-03);
}

.IconLogoControler {
   fill: var(--gray-02);

}

.arrowControle02 {
   transform: rotate(180deg);
}

.currentSection {
   color: var(--gray-02);
   font-weight: 300;
}

/* Nuvem interactv */
.nuvem_interative {
   position: fixed;
   z-index: 99999;

   filter: blur(5px);
   background: rgb(81, 230, 44);
}

.ni_01 {
   width: 100%;
   height: 2px;
   top: 0;
}

.ni_02 {
   width: 100%;
   height: 2px;
   bottom: 0;
}

.ni_03 {
   width: 2px;
   height: 100%;
   left: 0;
}

.ni_04 {
   width: 2px;
   height: 100%;
   right: 0;
}

/* cookies politics */
.cookie-banner {
   --width: 46%;
   width: var(--width);
   position: fixed;
   bottom: 20px;
   left: calc(var(--width) - 50%);
   left: calc(50% - 25%);
   right: 0;
   background-color: #2c3e50;
   color: #ecf0f1;
   padding: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   transform: translateY(600%);
   animation: cookie-slide-in 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
   z-index: 10;
}

.cookie-text {
   text-align: center;
   font-size: 14px;
}

.cookie-link {
   color: #1abc9c;
   text-decoration: none;
}

.cookie-link:hover {
   text-decoration: underline;
}

.cookie-button {
   background-color: #1abc9c;
   border: none;
   padding: 10px 20px;
   color: #fff;
   cursor: pointer;
   border-radius: 5px;
   font-size: 14px;
   transition: background-color 0.3s ease-in-out;
}

.cookie-button:hover {
   background-color: #16a085;
}

.progress-bar-container {
   position: relative;
   width: 100%;
   height: 5px;
   background-color: rgba(255, 255, 255, 0.2);
   overflow: hidden;
   border-radius: 5px;
}

.progress-bar-cookies {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   background-color: #1abc9c;
   width: 0%;
   animation: cookie-progress-timer 10s linear forwards;
}

@keyframes cookie-slide-in {
   from {
      transform: translateY(100%);
   }

   to {
      transform: translateY(0%);
   }
}

@keyframes cookie-progress-timer {
   from {
      width: 0%;
   }

   to {
      width: 100%;
   }
}

@keyframes cookie-slide-out {
   from {
      transform: translateY(0%);
   }

   to {
      transform: translateY(600%);
   }
}

.carousel_container {
   width: 100%;
   padding: 20px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 20px;
   /* background: #f9f9f9; */
}

#carousel-text {
   font-size: 3em;
   padding-bottom: 200px;
}


/*  */
/*  */
/*  */

.scroller[data-animated="true"] {
   overflow: hidden;
   -webkit-mask: linear-gradient(90deg,
         transparent,
         white 20%,
         white 80%,
         transparent);
   mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
   width: max-content;
   flex-wrap: nowrap;
   animation: scroll var(--_animation-duration, 20s) var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
   --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
   --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
   --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
   --_animation-duration: 60s;
}

@keyframes scroll {
   to {
      transform: translate(calc(-50% - 0.5rem));
   }
}

.tag-list {
   margin: 0;
   padding-inline: 0;
   list-style: none;
}

.tag-list li {
   width: max-content;
   padding: 1rem;
   background: var(--clr-primary-400);
   border-radius: 0.5rem;
   box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-900);
}

/* for testing purposed to ensure the animation lined up correctly */
.test {
   background: red !important;
}


footer {
   position: relative;
}

.back-to-top {
   position: absolute;
   bottom: 100px;
   right: 50px;
   /* display: none; */
   z-index: 80;

}

.back-to-top a {
   display: block;
   width: 40px;
   height: 40px;
   padding: 10px;
   color: #fff;
   text-align: center;
   border-radius: 50%;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   background-color: #333;
}

.back-to-top a:hover {
   color: #000;
   background: var(--themeColor-02);
}

/* Responsivo */
/* responsive */

/* Small devices (>=480px) */
:root {
   --margin: 60px;
   --margin_containers: 180px;
   --layoutSmall_vw: 86%;
}

@media (max-width: 480px) {
   .slider_container {
      flex-direction: column;
   }

   .slider_left {
      width: 100%;
      margin: 120px auto;
   }

   .slider_right {
      width: 100%;
      margin: 0 auto;
      display: grid;
      flex-direction: column;
      padding: 0;
   }

   .container_grid_slider {
      width: 100%;
      min-height: 470px;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(6, 1fr);
      gap: 22px;
      grid-template-areas:
         "gs_01"
         "gs_01"
         "gs_02"
         "gs_04"
         "gs_04"
         "gs_03";
   }

   .gs_01 {
      min-height: 200px;
      margin-bottom: 30px;
   }

   .gs_02 {
      min-height: 100px;
      padding: 0;
      margin-bottom: 30px;
   }

   .gs_03 {
      margin-top: 0;
      height: fit-content;
      padding: 20px;
      margin-bottom: 30px;
   }

   .servicos_container {
      width: 100%;
      display: grid;
   }

   .servicos_item {
      width: 100%;
      min-height: 420px;
      padding: 20px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }

   .home_container_uxui {
      width: 100%;
      flex-direction: column;
   }

   .ship_UxUI {
      width: var(--layoutLarge);
   }

   .left_uxui {
      width: 100%;
   }

   .home_container_uxui {
      padding: 0 30px;
   }

   .boxes_uxui {
      width: 100%;
      padding: 0;
      padding-top: 0;
      position: relative;
      margin-bottom: 108px;
   }

   .boxes_uxui_circle {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(7, 1fr);
      gap: 20px;
      align-items: center;
      justify-content: center;
      padding: 0;
      background: #000000;
      border-radius: var(--borderRadius);
   }

   .grid_box_uxui {
      width: 100%;
      background: rgb(10, 8, 10);
      min-height: 520px;
      border-radius: var(--borderRadius);
      padding: 20px;
      background: linear-gradient(135deg, #020202, #040307, #0a0b0e);
      border: 1px solid rgba(240, 240, 240, 0.041);
      border-radius: var(--borderRadius);
      inset: 6px;
      box-shadow: -8px 0px 4px rgba(8, 7, 8, 0.39);
   }

   .servicos_container {
      padding: 0px;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(6, 1fr);
   }

   .portfolio_grid {
      width: 100%;
      min-height: 60vh;
      max-height: 80vh;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      /* background: #f92; */
      gap: 20px;
   }

   .container_skills {
      width: var(--layoutSmall);
      margin: var(--margin_containers) auto;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(7, 1fr);
      position: relative;
      gap: 30px;
      padding-top: 150px;
   }

   .home__container_Card_Infos {
      flex-direction: column;
   }

   .contact-grid {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(4, 1fr);
   }

   .controller {
      max-width: 90%;
      min-width: 80%;
      /* background: #1abc9c; */
      z-index: 789;
   }
}

/* Tablets (>=768px) */
@media (min-width: 768px) {}

/* Laptops pequenos (>=1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
   .slider_container {
      width: var(--layoutMedium);
      height: 100%;
   }

   .slider_left {
      width: 30%;
   }

   .slider_right {
      width: 50%;
   }

   .gs_02 {
      padding: 20px;
   }

   .gs_tag02 {
      --square: 40px;
      padding: 6px;
      width: var(--square);
      height: var(--square);
   }

   /* .slider_left ul {
      flex 
   } */

   .icon_brain,
   .icon_interface,
   .icon_devices {
      width: 100%;
      height: 100%;
   }

   .gs_04 img {
      width: 100%;
      height: auto;
   }

   .ship_UxUI {
      width: var(--layoutMedium);
      margin: var(--margin_containers) auto;
   }

   .boxes_uxui {
      width: 30%;
      flex-direction: column;
      padding: 0;
   }

   .servicos_container {
      grid-template-rows: repeat(3, 1fr);
      grid-template-columns: repeat(2, 1fr);
   }


}

/* Laptops padrão e desktops (>=1280px) */
@media (min-width: 1024px) and (max-width: 1280px) {


   .slider_right {
      width: 50%;
   }

   .ship_UxUI {
      width: var(--layoutLarge);
   }


}

/* Grandes desktops (>=1440px) */
@media (min-width: 1280px) and (max-width: 1624px) {
   .slider_right {
      width: 50%;
   }

   .ship_UxUI {
      width: var(--layoutLarge);
   }
}

/* Telas ultra-grandes (>=1920px) */
@media (min-width: 1920px) {}