@import url('https://fonts.googleapis.com/css?family=Manrope:700|Manrope:400');
:root {
  --pr-color: #fff;
  --second-color: #0a0a0a;
  --cubicbz: cubic-bezier(0.9, 0, 0.1, 1);
  --fz-big: 60px;
  --equilibrio: #26151d;
  --size-default: 22px;
  --size-sm: 16px;
  --color-btn-animate: #ff3cb4;
  --color-black: #000;
  --escuro01: #080808e1;
  --rosa-destaque: #ff3c5d;
  --rosa-escuro: #b91e67;
  --rosa-bg: #b91e67;
  --branco: #fff;
  --padding-btn-lg: 15px 30px;
  --padding-btn-mob: 10px 5px;
  --grey-light: #f2f7f9;
  --grey: #ecedf3;
  --black: #080808;
  --black-blue: #1f2029;
  --black-blue-light: #353746;
  --black-blue-light-2: #404255;
  --black-blue-light-3: #4b4d64;
  --black-light: #424455;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/*FONTES
================================================== */
@font-face {
  font-family: "Mona-UltraLight";
  src: url("../fonts/Mona/Mona-Sans-UltraLight.ttf");
}

@font-face {
  font-family: "Mona-Light";
  src: url("../fonts/Mona/Mona-Sans-Light.ttf");
}

@font-face {
  font-family: "Mona-Regular";
  src: url("../fonts/Mona/Mona-Sans-RegularWide.ttf");
}

@font-face {
  font-family: "Mona-Bold";
  src: url("../fonts/Mona/Mona-Sans-BoldWide.ttf");
}

@font-face {
  font-family: "Mona-Extra";
  src: url("../fonts/Mona/Mona-Sans-ExtraBold.ttf");
}

@font-face {
  font-family: "MavenPro-Regular";
  src: url("../fonts/MavenPro/MavenPro-Regular.ttf");
}

@font-face {
  font-family: "MavenPro-Medium";
  src: url("../fonts/MavenPro/MavenPro-Medium.ttf");
}

@font-face {
  font-family: "MavenPro-SemiBold";
  src: url("../fonts/MavenPro/MavenPro-SemiBold.ttf");
}

@font-face {
  font-family: "MavenPro-Bold";
  src: url("../fonts/MavenPro/MavenPro-Bold.ttf");
}

@font-face {
  font-family: "MavenPro-ExtraBold";
  src: url("../fonts/MavenPro/MavenPro-ExtraBold.ttf");
}

* {
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style-type: none;
  letter-spacing: 1.2px;
  -webkit-font-smoothing: antialiased;
}
 

body{
  overflow-x: hidden !important;
}
html {
  overflow-x: hidden !important;
  font-family: "Mona-Bold";
  font-size: 1em;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
}

/*SCROLL
================================================== */

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #1d1d1d;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(255, 38, 100, 0.2) 0%,
    rgba(185, 30, 103, 0.74) 52.43%,
    #b91e67 81.08%
  );
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  border: 3px solid #1d1d1d;
}

/*FIM SCROLL*/

::selection {
  background-color: #00000065;
  color: #fff !important;
}

::-moz-selection {
  background-color: #00000031;
  color: #fff !important;
}

.btn-box{
  display: flex;
  justify-content: flex-start !important;
  align-items: flex-start;
  width: 100%;
}
/* TÍTULOS DE CABEÇALHO
================================================== */
.frase h1 {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.28) 8.32%,
    var(--branco) 40.67%,
    rgba(255, 255, 255, 0) 96.06%
  ) !important;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 42px !important;
}
h1.frase{
  font-size: 1.8em !important;

}
h2.frase-bio {
  font-family: "Mona-UltraLight" !important;
  font-size: 1.4em;
  font-weight: 500 !important;
  line-height: 34px;
 
}
.up {
  text-transform: uppercase;
}

#txt-present {
  font-size: 2.6em !important;
  text-transform: uppercase;
}

#txt-bio {
  font-family: "Mona-Bold";
  font-size: 1.8em !important;
}

h1.txt-bio {
  font-family: "Mona-Bold" !important;
  line-height: 34px !important;
}

.bold {
  font-family: Mona-Extra;
}

h1 {
  font-size: 2.2em;
}

h2 {
  font-size: 1.6em;
}

p {
  font-size: 0.9em;
}

#citacao p {
  font-size: 0.8em;
  text-align: left;
  line-height: 26px !important;
}
 

.tit {
  text-align: center;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-style: normal;
  font-weight: 700;
  line-height: 42px;
  font-family: Mona-Light;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.28) 8.32%,
    var(--branco) 40.67%,
    rgba(255, 255, 255, 0) 96.06%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tit-bio {
  text-align: center;
  font-weight: 800;
  line-height: 27px;
  font-family: "Mona-Bold" !important;
}

h1.tit-bio {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.28) 8.32%,
    var(--branco) 40.67%,
    rgba(255, 255, 255, 0) 96.06%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

p.tit-bio {
  font-size: 0.7em;
  color: rgb(134, 134, 134) !important;
  font-family: "Mona-UltraLight";
}

.white-text {
  color: rgba(255, 255, 255, 0.274) !important;
}

.titleBurrowing-white {
  text-align: left;
  margin-bottom: 25px;
   letter-spacing: -40px;
  line-height: 42px;
  font-family: Mona-Regular !important;
  color: #fff;
}

.titleBurrowing {
  text-align: left;
   letter-spacing: -40px;
  line-height: 42px;
  font-family: Mona-Regular !important;
  background: linear-gradient(
    80deg,
    rgba(168, 8, 107, 0.952) 8.32%,
    rgba(168, 8, 107, 0.952) 40.67%,
    rgb(68, 3, 34) 96.06%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* FIM TÍTULOS DE CABEÇALHO
================================================== */

.img-pencil1 {
  z-index: 2;
  position: absolute;
  top: 0%;
  left: -8%;
  pointer-events: none;
  filter: blur(4px);
}

@keyframes flutuando01 {
  0% {
    transform: translateY(0px) rotate(10deg);
  }

  50% {
    transform: translateY(-30px) rotate(-10deg);
  }

  100% {
    transform: translateY(0px) rotate(10deg);
  }
}

.swiper {
  width: 80%;
  height: 100%;
  margin-bottom: 30px;
}

.swiper-scrollbar {
  --swiper-scrollbar-bottom: 0px;
  --swiper-scrollbar-drag-bg-color: #dda3b6;
  --swiper-scrollbar-size: 5px;
}

/* MEDIA QUERIES */

@media (max-width: 1200px) {
  .swiper {
    width: 80%;
  }
}

@media (max-width: 900px) {
  #recipes {
    padding: 60px 80px;
  }

  .swiper {
    width: 50%;
  }
}

@media (max-width: 765px) {
  .swiper {
    width: 70%;
  }
}

@media (max-width: 550px) {
  #recipes {
    padding: 40px 40px;
  }

  .swiper {
    width: 80%;
  }
}

header ul {
  position: relative;
}

 
.noise {
  display: block;
  width: 100vw;
  height: 100vh;
  opacity: 0.2;
  background-image: url('../img/ruido-animado.gif');
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
  }

  .prompt{
    width: 100% !important;
    background-color: #f081e159;
    padding: 10px;
  }

#header-index {background-repeat: no-repeat;
  background-attachment: fixed;
   background-size: contain;
  background-position: 90% 20%;
  background: url('../img/icones-svg/textura.svg') fixed;
  background-repeat: no-repeat;
  height: 100vh;
}


.header-projetos { 
  background: linear-gradient(
    -80deg,
    rgba(255, 38, 201, 0.2) 0%,
    rgba(19, 5, 11, 0.925) 52.43%,
    #0f0309 81.08%
  );
  height: 53vh;
}
 
.box-projetos{
  display: flex;
  align-items: center;
  text-align: center;
  padding-top: 140px;
}
.img-pj{
  position: relative;
  top: -130px;
}
.serv-projetos{
  flex-basis: 35% !important;
  flex-grow: 1 !important;
}

.serv-projetos-sobre{
  flex-basis: 55% !important;
  flex-grow: 2 !important;
}

.sobre-projetos{
  font-family: 'Manrope';
  color: #000;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
  gap: 20px;
}

.sobre-projetos h2, .sobre-projetos h5{
  margin-bottom: 15px;
  letter-spacing: normal;
  font-weight: bold;
}

.sobre-projetos p{
  font-family: 'Manrope';
  font-weight: 500;
  font-size: 0.8em;
  color: #41343acb;
}

.p-projeto{
  font-size: 0.7em;
  font-weight: 300 !important;
}

.title-sb-projetos {
  font-family: 'Manrope';
  font-size: 3rem !important;
  font-weight: 700;
  letter-spacing: -0.2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-self: center;
  height: 100%;
  z-index: 1000;
  text-shadow: 3px 3px 3px 2px #000000;
}

.title-sb-projetos > p {
  margin: 0;
  line-height: 3rem;
  width: auto;
}

.title-sb-projetos span {
  margin-top: 15px;
  font-size: 0.4em !important;
}

 

.title-sb-projetos > p:nth-child(3){
  color: hsl(298, 100%, 74%);
 }



#header-bio {
  padding: 30px 0 40px;
}

/* MENU MOBILE*/

.section-center {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  z-index: 6;
  text-align: center;
  transform: translateY(-50%);
}

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

.menu-icon:checked + label,
.menu-icon:not(:checked) + label {
  position: fixed;
  right: 75px;
  top: 20px;

  display: block;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 10;
}

.menu-icon:checked + label:before,
.menu-icon:not(:checked) + label:before {
  position: absolute;
  content: "";
  display: block;
  width: 30px;
  height: 20px;
  z-index: 20;
  top: 0;
  left: 0;
  border-radius: 2px;
  border-top: 2px solid #ff1979;
  border-bottom: 2px solid #ff1979;
  transition: border-width 100ms 1500ms ease,
    top 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1),
    height 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1),
    background-color 200ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-icon:checked + label:after,
.menu-icon:not(:checked) + label:after {
  position: absolute;
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  z-index: 20;
  top: 10px;
  right: 4px;
  border-radius: 2px;
  background-color: #ff1979;
  margin-top: -1px;
  transition: width 100ms 1750ms ease, right 100ms 1750ms ease,
    margin-top 100ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-icon:checked + label:before {
  top: 10px;
  transform: rotate(45deg);
  height: 2px;
  background-color: #ff1979;
  border-width: 0;
  transition: border-width 100ms 340ms ease,
    top 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    background-color 200ms 500ms ease,
    transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-icon:checked + label:after {
  width: 30px;
  margin-top: 0;
  right: 0;
  transform: rotate(-45deg);
  transition: width 100ms ease, right 100ms ease,
    transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1);
}

.nav-mob {
  position: fixed;
  right: 50px;
  display: block;
  width: 80px;
  height: 80px;
  padding: 0;
  margin: 0;
  z-index: 9;
  overflow: hidden;
  animation: border-transform 7s linear infinite;
  transition: top 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1),
    right 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 250ms 1100ms ease,
    width 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1),
    height 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-icon:checked ~ .nav-mob {
  position: absolute;
  animation-play-state: paused;
  right: 50%;
  transform: translate(50%, -50%);
  width: 600%;
  height: 400vh;
  transition: top 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1),
    right 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms 700ms ease,
    width 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1),
    height 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1);
  background-color: #0e0e0efb !important;
}

.nav-mob ul {
  position: absolute;
  top: 60%;
  left: 0;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  z-index: 99999;
  color: var(--branco);
  text-align: center;
  transform: translateY(-50%);
  list-style: none;
}

.nav-mob ul li {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 40px 0;
  text-align: center;
  list-style: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: all 100ms linear;
}

.nav-mob ul li:nth-child(1) {
  transition-delay: 100ms;
}

.nav-mob ul li:nth-child(2) {
  transition-delay: 60ms;
}

.nav-mob ul li:nth-child(3) {
  transition-delay: 40ms;
}

.nav-mob ul li:nth-child(4) {
  transition-delay: 20ms;
}

.nav-mob ul li a {
  font-size: 4vh;
  text-transform: uppercase;
  line-height: 1.2;
  font-weight: 800;
  display: inline-block;
  color: #ececee !important;
  transition: all 150ms linear;
}

.nav-mob ul li a:hover {
  text-decoration: none;
  color: #ffeba7;
}

.nav-mob ul li a:hover:after {
  width: 100%;
}

.menu-icon:checked ~ .nav-mob ul li {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 250ms ease, transform 150ms ease;
}

.menu-icon:checked ~ .nav-mob ul li:nth-child(1) {
  transition-delay: 1400ms;
}

.menu-icon:checked ~ .nav-mob ul li:nth-child(2) {
  transition-delay: 1480ms;
}

.menu-icon:checked ~ .nav-mob ul li:nth-child(3) {
  transition-delay: 1560ms;
}

.menu-icon:checked ~ .nav-mob ul li:nth-child(4) {
  transition-delay: 1640ms;
}

@media screen and (max-width: 991px) {
  .menu-icon:checked + label,
  .menu-icon:not(:checked) + label {
    right: 25px;
  }

  .logo {
    left: 30px;
  }

  .nav-mob {
    right: 30px;
  }
}
 
.nav-menu-jt {
  position: fixed;
  
  list-style-type: none;
 
  transition: 0.7s all ease-in-out;
  background: rgba(255, 255, 255, 0);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0);
  width: 100% !important;
  z-index: 9999999;
 display: flex;
 width: 100%;

}

.nv{
   height: 90px;
  transition: 0.7s all ease-in-out;
  display: flex !important;
  z-index: 9999999;
  justify-content: space-between !important;
  align-items: center !important;
  flex-direction: row;
  
}
.nav-menu-jt a {
  color: #ffffffd0 !important;
}


nav ul li:hover, .nav-menu-jt a:hover {
  color: #ff81f9 !important;
}

/*STICKY
================================================== */
.mob {
  display: flex;
  margin: 0;
}

.sticky .nav-menu-jt {
  z-index: 999;
  transition: 0.7s all ease-in-out;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s;
}

ul {
  display: flex;
  transition: 0.7s all ease-in-out;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s;
}

.sticky .nav-menu-jt {
  background-color: rgba(17, 16, 16, 0.404);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
   border: 1px solid rgba(255, 255, 255, 0.04) !important;
  transition: 0.7s all ease-in-out;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s;
}

.sticky .nv {
  height: 60px;
  transition: 0.7s all ease-in-out;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s;
}

nav ul li {
  font-family: "Mona-Regular";
  display: inline-block;
  list-style-type: none;
  padding: 10px 20px;
  text-align: center;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 146.5%;
  /* 23.44px */
  letter-spacing: 1.76px;
   color: #ffffff81 !important;
}


li.li-menu-jt {
  padding: 10px 22x;
  line-height: 1.1;
  text-decoration: none;
  font-size: 11px;
  font-weight: 300;
  color: white;
  display: flex;
  align-items: center;
}

.box-foto {
  z-index: 1;
  display: flex;
  flex-direction: row;

}

.foto-txt{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-left: 15px;
}

.foto-txt h2{
  font-size: 1.6em !important;
}

.foto-txt h3{
  line-height: 32px !important;
  font-size: 0.75em;
}

.txt-black{
  color: #000 !important;
}

figure.foto {
  z-index: 1;
}


.foto .img-jhenifer {
  padding: 5px;
  border: 2px solid var(--color-btn-animate);
}

.foto .img-jhenifer-bio {
  filter: saturate(90%);
  padding: 2px;
  border: 2px solid var(--color-btn-animate);
}

figure .img-jhenifer-bio {
  box-shadow: 0.7em 0.9em 1.1em -0.8em #ff3cb480;
  margin-bottom: 5px;
  border-radius: 50%;
  border: 1px solid var(--color-btn-animate);
}

figure .img-jhenifer {
  filter: saturate(90%);
  box-shadow: 0.7em 0.9em 1.1em -0.8em #ff3cb480;
  margin-bottom: 5px;
  border-radius: 50%;
  border: 1px solid var(--color-btn-animate);
}

section {
  width: 100%;
  align-items: center;
}

#container-projetos {
  position: relative;
  background-image: linear-gradient(
      to bottom,
      transparent 0%,
      var(--escuro01) 20%
    ),
    url("../img/");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.principal{
  position: relative;
  background: rgb(255, 255, 255);
  background-repeat: no-repeat;
  width: 100%;
  display: flex;
  flex-direction: row;
   background-position: center;
  background-size: cover;
}

.atuacao{
  background-image: linear-gradient(80deg, #0e0d0db9 20%, #2c2c2cb0 40%);
}

#jobs{
  position: relative;
  background: rgb(115, 12, 50);
  background: radial-gradient(
      circle,
      rgb(34, 32, 32) 50% 5%,
      rgba(20, 12, 15, 0.123),
      rgba(13, 12, 12, 1)
    ),
    url("../img/FUNDOBNN.webp");
  background-repeat: no-repeat;
  width: 100%;
  background-position: center;
  background-size: cover;
}

.box-sobre {
  width: 100%;
  display: flex;
  padding: 0px 0px 60px 0px;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  font-family: "Mona-Regular";
  font-weight: 400;
  color: #fff;
}

.box-hard-skills {
  width: 100%;
  padding: 0px 0px 60px 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.div-sobre {
  display: flex;
}

.div-sobre ul {
  display: inline-block;
  padding: 0px;
  margin: 0px;
}

.div-sobre ul li {
  border-bottom: #ff3cb457 1px solid;
  box-shadow: inset 0 0 10px 5px rgba(49, 14, 42, 0.5);
  text-transform: uppercase;
  font-size: 12px;
  transition: 0.5s ase-in-out !important;
  border-radius: 54px;
  background: linear-gradient(
    265deg,
    rgba(255, 99, 173, 0.14) 2.65%,
    rgba(217, 217, 217, 0) 109.24%
  );
  width: 280px;
  text-align: center;
  padding: 40px 28px !important;
  margin-bottom: 10px !important;
  padding: 10px;
}

.card-projetos {
  display: flex;
  justify-content: center;
}

.card-item {
  padding: 0 10px;
}

.card-item img {
  width: 200px;
  height: 200px;
  border-radius: 10px;
}

.sobre {
  position: relative;
  top: 32%;
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}


#bio {
  position: relative;
  top: -45px;
}

#cont-bio {
  margin: auto;
  width: 640px;
  padding: 0px 20px !important;
}

.sobre-bio {
  margin-bottom: 20px;
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.img-bio {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.menu-logo {
  display: flex;
}
p.txt-pequeno{
  width: 100%;
  text-align: center;
  font-weight: 300;
  font-family: "Mona-Regular";
  font-size: 0.75em !important;
  background: linear-gradient(
    180deg,
    rgb(252, 71, 177) 8.32%,
    rgba(255, 81, 183, 0.959) 40.67%,
    rgb(252, 71, 177) 96.06%
  );
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.box-texto {
  width: 100% !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
 }

.linhas {
  animation: op 2s ease;
  animation-iteration-count: infinite;
  position: absolute;
  top: 7%;
}

.linhas2 {
  animation: op 2s ease;
  animation-iteration-count: infinite;
  position: absolute;
  top: 40%;
}

@keyframes op {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/*BOTÕES
================================================== */

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --glowColor {
  syntax: "<color>";
  initial-value: #ff3c5d;
}

@keyframes rotate {
  0% {
    --angle: 0deg;
    --glowColor: var(--color-btn-animate);
  }

  100% {
    --angle: 360deg;
    --glowColor: var(--color-btn-animate);
  }
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  border: none;
  background: none;
  font-family: Mona-Light;
  position: relative;
  padding: 1px;
  text-decoration: none;
  transition: all 0.18s ease-in-out;
  transform: translate3d(0, 0, 0);
}

.btn:after,
.btn:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: calc(100px + 1.5px);
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-image: conic-gradient(
    from var(--angle) at 50% 50%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 33%,
    var(--glowColor) 50%,
    rgba(0, 0, 0, 0) 66%,
    rgba(0, 0, 0, 0) 100%
  );
  animation: rotate 2s infinite linear;
}

.btn:before {
  animation: rotate 2s infinite linear;
  filter: blur(20px);
}

.btnInner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--size-sm) var(--size-default);
  border-radius: 100px;
  color: var(--branco);
  letter-spacing: 2px;
  font-weight: 500;
  font-size: 13px;
  z-index: 1;
  transition: all 0.18s ease;
  background: rgba(0, 0, 0, 0.3); /* Cor de fundo corrigida */
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  backface-visibility: hidden; /* Mantém a visibilidade controlada durante a rotação */
  box-shadow: none; /* Remove qualquer sombra */
}

.btnInner:hover {
  transform: rotateY(-4deg);
  background: rgba(255, 60, 180, 0.2);
  color: var(--branco);
  transition: all 0.4s ease;
  box-shadow: none; /* Garante que nenhuma sombra seja aplicada durante a animação */
}

.btnInner:active {
  transform: scale(0.95);
  box-shadow: none; /* Remove sombra durante o clique */
}
a.btn-header {
  padding: var(--padding-btn-lg);
}

a .btn-detalhes{
  display: flex;
   text-align: center;
  align-items: flex-start;

}

.btn-detalhes{
  
  padding: 11px 30px !important;
  font-size: 0.65em;
}

.btn-detalhes {
  
  margin-left: auto;
 margin-right: auto;
 text-align: center;
 color: var(--branco);
 
 border-radius: 999px;
 border: 1px solid #ff3cf5;
 background: transparent;
 box-shadow: 0px 5px 15px 0px rgba(37, 44, 97, 0.15),
   0px 2px 4px 0px rgba(255, 15, 15, 0.2);
   transition: all 0.2s ease;
}


a.btn-header {
  font-size: 0.7em;
  text-align: center;
  width: 300px;
   color: var(--branco) !important;
   border-radius: 999px;
  border: 1px solid #ff3cf5;
  background: linear-gradient(
    180deg,
    #f93cb0 0%,
    #75094c 100%,
    rgba(38, 255, 255, 0) 100%
  );
  box-shadow: 0px 5px 15px 0px rgba(37, 44, 97, 0.15),
    0px 2px 4px 0px rgba(255, 15, 15, 0.2);
    transition: all 0.2s ease;
}

a.btn-header:hover, .btn-detalhes:hover {
  transform: translateY(-5px) !important;
   background: linear-gradient(
    180deg,
    #f93cb0 0%,
    #75094c 100%,
    rgba(38, 255, 255, 0) 100%
  );
  box-shadow: 0px 5px 15px 0px rgba(37, 44, 97, 0.15),
    5px 4px 27px 0px rgba(185, 30, 103, 0.29);
}

a.btn-cta {
  padding: var(--padding-btn-lg);
  color: var(--branco);
  border-radius: 999px;
  border: 1px solid var(--rosa-destaque);
  background: linear-gradient(
    180deg,
    #f93c42 0%,
    #b91e67 100%,
    rgba(38, 255, 255, 0) 100%
  );
  box-shadow: 0px 5px 15px 0px rgba(37, 44, 97, 0.15),
    5px 4px 27px 0px rgba(185, 30, 103, 0.29);
}

/*FIM BOTÕES*/

/*MODO ESCURO
================================================== */

.modo {
  display: flex;
  align-items: center;
}

.checkbox-modo {
  position: absolute;
  opacity: 0;
}

.label-modo {
  width: 38px;
  height: 17px;
  background-color: #f5f5f500;
  border: 1px solid #ff6ebb31;
  border-radius: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px;
  margin-right: 12px;
  transform: scale(1.5);
  position: relative;
  transition: 0.5s;
}

.label-modo:hover {
  cursor: pointer;
}

.circle-modo {
  width: 12px;
  height: 12px;
  background: linear-gradient(
    180deg,
    #f93c42 0%,
    #d12959 61.81%,
    #b91e67 100%,
    rgba(255, 25, 25, 0) 100%
  );
  box-shadow: 0px 5px 15px 0px rgba(37, 44, 97, 0.15),
    0px 2px 4px 0px rgba(255, 15, 15, 0.2);
  border-radius: 100%;
  position: absolute;
  top: 1px;
  transition: 0.5s;
}

.checkbox-modo:checked + .label-modo .circle-modo {
  transform: translate(20px);
  transition: 0.5s;
}

.checkbox-modo:checked + .label-modo {
  background-color: #f5f5f505;
  transition: 0.5s;
}

.checkbox-modo + .label-modo {
  transition: 0.5s;
}

.fa {
  font-size: 10px;
}

.fa-sun-o,
.fa-moon-o {
  color: #ff6ebc;
}

/*FIM MODO ESCURO
================================================== */

img.icone-whats {
  position: fixed;
  bottom: 20px;
  right: 2%;
  width: 70px;
}

.divisor {
  padding: 40px 0px;
}

footer {
  font-family: Mona-Light;
  font-weight: 400;
  display: flex;
  color: var(--branco);
  text-align: center;
  width: 100%;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--color-black);
}

footer img {
  margin-bottom: 30px;
}

footer p.copyright {
  color: #c7c7c7;
  font-size: 0.8em !important;
}

/*BOTÃO SCROLL*/
.animate-box {
  position: absolute;
  left: 50%;
  z-index: 9999;
  bottom: -80px;
  transform: translate(-50%, -50%);
}

.animate-box__object {
  width: 15px;
  height: 28px;
  border: 1px solid #ffffff63;
  border-radius: 50px;
}

.animate-box__object:hover {
  border: 1px solid #ffffffc9;
  cursor: pointer;
}

.animate-box__object:before,
.animate-box__object:after {
  content: "";
  width: 4px;
  height: 5px;
  background-color: #ffffff63;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
}

.animate-box__object:after {
  height: 8px;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
  border-radius: 50px;
}

.animate-box__object:before {
  animation: scroll-down 2s ease infinite;
}

@keyframes scroll-down {
  0% {
    top: 30px;
    opacity: 0;
  }

  80% {
    top: 50px;
    opacity: 1;
  }

  100% {
    top: 70px;
    opacity: 0;
  }
}

/* CURSOR PERSONALIZADO
================================================== */

.cursor,
.cursor2,
.cursor3 {
  position: fixed;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  pointer-events: none;
  left: -100px;
  top: 50%;
  mix-blend-mode: difference;
  -webkit-transition: all 100ms linear;
  transition: all 100ms linear;
}

.cursor {
  background-color: #fff;
  height: 0;
  width: 0;
  z-index: 99999;
}

.cursor2,
.cursor3 {
  height: 16px;
  width: 16px;
  z-index: 99998;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

.cursor2.hover,
.cursor3.hover {
  -webkit-transform: scale(2) translateX(-25%) translateY(-25%);
  transform: scale(2) translateX(-25%) translateY(-25%);
  border: none;
}

.cursor2 {
  border: 2px solid var(--color-btn-animate);
  box-shadow: 0 0 22px var(--color-btn-animate);
}

.cursor2.hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

@media screen and (max-width: 1200px) {
  .cursor,
  .cursor2,
  .cursor3 {
    display: none;
  }
}

/* #Progress
================================================== */

.progress-wrap {
  position: fixed;
  right: 25px;
  bottom: 25px;
  height: 34px;
  width: 34px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.progress-wrap::after {
  position: absolute;
  text-align: center;
  line-height: 34px;
  font-size: 12px;
  color: #bdaeb3cb;
  left: 0;
  top: 0;
  height: 34px;
  width: 34px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap:hover::after {
  opacity: 0;
}

.progress-wrap::before {
  position: absolute;
  content: "\f062"; /* Código unicode para o ícone de seta para cima */
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            margin-right: 5px; /* Espaçamento entre o ícone e o texto */
  text-align: center;
  line-height: 34px;
  font-size: 12px;
  color: #dda3b6;
  left: 0;
  top: 0;
  height: 34px;
  width: 34px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap:hover::before {
  opacity: 1;
}

.progress-wrap svg path {
  fill: none;
}

.progress-wrap svg.progress-circle path {
  stroke: #dda3b6;
  stroke-width: 4;
  box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.button {
  display: flex;
  background-color: rgba(8, 19, 38, 0.8);
  border-radius: 28px;
  position: fixed;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  transition: all 300ms linear;
  cursor: pointer;
}

.button a {
  color: var(--branco);
}

.button_expand {
  transition: all 300ms linear;
  right: 5px;
  bottom: 5px;
}

.button-normal {
  color: white;
  opacity: 0;
  will-change: auto;
  width: 48px;
  height: 48px;
  bottom: 20px;
  right: 40px;
  background: linear-gradient(180deg, var(--equilibrio), #492234);
  border-radius: 28px;
  box-sizing: border-box;
  transition: all 300ms linear;
}

.active .button-1 {
  opacity: 1;
  z-index: 999;
  bottom: 86px;
}

.active .button-2 {
  opacity: 1;
  z-index: 999;
  bottom: 139px;
}

.active .button-3 {
  opacity: 1;
  z-index: 999;
  bottom: 192px;
}

.active .button-4 {
  opacity: 1;
  z-index: 999;
  bottom: 245px;
}

.button-normal:hover {
  transition: all 300ms linear;
  background: linear-gradient(180deg, #5e243f, #5e243f);
}

/* GSAP
================================================== */

.main {
  padding: 60px;
  height: 80vh;
  position: relative;
  width: 100%;
}

.loop-holder {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
}

.loop-holder__text {
  -webkit-animation: loop 20s infinite linear;
  animation: loop 20s infinite linear;
  font-size: 4.5em;
  padding-right: 0.35em;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.28) 8.32%,
    var(--branco) 40.67%,
    rgba(255, 255, 255, 0) 96.06%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes loop {
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

.gsap h1 {
  text-align: center;
  font-size: 60px;
  padding: 80px;
}

.gsap .filled-text {
  position: absolute;
  top: 200px;
  left: 100px;
  z-index: 1;
  font-size: 100px;
  font-weight: 600;
}

.gsap .outline-text {
  position: absolute;
  top: 200px;
  left: 100px;
  z-index: 3;
  font-size: 100px;
  font-weight: 600;
  -webkit-text-stroke-width: 4px;
  -webkit-text-stroke-color: ghostwhite;
  color: transparent;
}

.gsap img {
  position: absolute;
  top: 50px;
  left: 600px;
  z-index: 2;
  height: 800px !important;
  width: auto;
}
 

.cd {

  border: 1px solid #767676;
  width: 100%;
  padding: 20px;
  border-radius: 20px;
}

.tecnologias{
  margin-right: 15px;
  padding: 5px 15px;
  background-color: #ff50ca1c;
  border: 2px solid #ff50cbaf;
  border-radius: 5px;
}

p.font-menor{
  font-size: 0.8em !important;
}

.tecnologias span, .tecnologias i{
  color: #ff50cb;
  font-size: 0.7em;
  position: relative;
  top: -2px;
}


.bloco-texto, .bloco-tecnologias {
  padding: 20px 0 0 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.bloco-texto h4, .bloco-tecnologias h4 {
  color: #fff;
  font-size: 0.9em;
}
.cd h2 {
  color: #fff;
}
.mt-1{
  margin-top: 10px !important;
}
.mb-1{
  margin-bottom: 10px !important;
}

.mb-2{
  margin-bottom: 20px !important;
}
.mb-3{
  margin-bottom: 30px !important;
}
.mt-3{
  margin-top: 30px !important;
}
.mt-5 {
  margin-top: 50px !important;
}

#projects {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  
}

#projects .card {
  display: block;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 1.618;
}


.cd #p1 {
  border-radius: 5px;
  background: url("../img/jobs/Patricia/PFI24/lp24-note.webp");
  background-size: cover;
  background-position: center 50%;
  background-repeat: no-repeat;
}

 

.cd #p2 {
  border-radius: 5px;
  background: url("../img/jobs/portfolio/lp-cel4.webp");
  background-size: cover;
  background-position: center 50%;
  background-repeat: no-repeat;
}

.cd #p3 {
  border-radius: 5px;
  background: url("../img/jobs/BRX/lp-brx.webp");
  background-size: cover;
  background-position: center 50%;
  background-repeat: no-repeat;
}
 
.cd #p4 {
  border-radius: 5px;
  background: url("../img/jobs/SU/lp-su.webp");
  background-size: cover;
  background-position: center 50%;
  background-repeat: no-repeat;
}


.cd #p5 {
  border-radius: 5px;
  background: url("../img/jobs/Patricia/48H/lp-48h.webp");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}

.cd #p6 {
  border-radius: 5px;
  background: url("../img/jobs/Patricia/VD/lpvd-note.webp");
  background-size: cover;
  background-position: center 100%;
  background-repeat: no-repeat;
}


.cd #p7 {
  border-radius: 5px;
  background: url("../img/jobs/JT/cel-jt.webp");
  background-size: cover;
  background-position: center 100%;
  background-repeat: no-repeat;
}



 

/* Animação */

[data-anime] {
  opacity: 0;
  transition: 2s;
}

[data-anime="down"] {
  transform: translate3d(0, -100%, 0);
}

[data-anime="up"] {
  transform: translate3d(0, 100%, 0);
}

[data-anime="left"] {
  transform: translate3d(-100%, 0, 0);
}

[data-anime="right"] {
  transform: translate3d(50px, 0, 0);
}

[data-anime].animate {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* about ********/
.about .section-title {
  text-align: left;
}

.about__wrapp {
  display: flex;
  justify-content: space-between;
}

.about__img,
.about__txt {
  width: calc(50% - 35px);
  height: auto;
}

.about__txt {
  padding-right: 70px;
}

.about__p {
  line-height: 1.4;
  font-size: 20px;
  color: #4b4b4b;
}

.about__img {
  height: 100vh;
  overflow: hidden;
}

.about__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-title {
  position: relative;
  margin: 0;
  margin-bottom: 60px;
  line-height: 0.8;
  font-size: 70px;
  text-align: center;
  color: var(--pr-color);
  text-transform: uppercase;
}

.section-title .stroke {
  color: transparent;
  -webkit-text-stroke: 1px var(--pr-color);
}

.section-title__square {
  position: absolute;
  display: inline-block;
  width: 130px;
  height: 130px;
  border: 1px solid #4b4b4b;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.title {
  position: relative;
  margin: 0;
  font-size: 85px;
  text-align: center;
  color: var(--pr-color);
  text-transform: uppercase;
  mix-blend-mode: difference;
  z-index: 2;
}

.title .stroke {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 1px var(--pr-color);
}

/* Paralax Effect On GSAP **********************************/
/* header ********/
.header {
  position: relative;
  display: flex;
  padding: 0 70px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.header__marq {
  width: 100%;
  position: relative;
 
}

.header__marq {
  height: auto;
  background: linear-gradient(
    120deg,
    #3b172cec 20%,
    rgba(73, 32, 64, 0.507) 50%,
    #310221c0 100%
  ) !important;
  box-shadow: inset 0 0 10px 5px rgba(182, 133, 166, 0.116);
}

.header__marq-wrapp {
  display: flex;
  width: 100%;
  height: auto;
  padding: 18px 70px;
}

.header__marq-txt {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  padding-right: 55px;
  margin-right: 15px;
  text-transform: uppercase;
  color: var(--pr-color);
  color: #9e9e9ec4;
  font-size: 16px;
}

.header__marq-star {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 0;
}

.header__marq-star img {
  display: block;
  width: 100%;
  height: 100%;
}

.title {
  position: relative;
  margin: 0;
  font-size: 85px;
  text-align: center;
  color: var(--pr-color);
  text-transform: uppercase;
  mix-blend-mode: difference;
  z-index: 2;
}

.title .stroke {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 1px var(--pr-color);
}

.header__img {
  position: absolute;
  width: 45%;
  height: 100%;
  top: 0;
  right: 100px;
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  overflow: hidden;
}

.header__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faq {
  background-image: linear-gradient(
      to bottom,
      transparent 0%,
      var(--escuro01) 50%
    ),
    url("../img/FAQ.webp");
  background-repeat: no-repeat;
  background-position: 50% 10%;
  background-size: cover;
  margin: 0 auto;
  padding: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.accordion {
  width: 48em;
}

.accordion .accordion-item {
  padding: 0.7em 0;
  border-bottom: 1px solid #24131e;
}

.accordion .accordion-item button[aria-expanded="true"] {
  padding: 30px !important;
  border-bottom: 1px solid var(--color-btn-animate);
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  font-family: Mona-Bold;
  font-size: 0.9em;
  line-height: 24px;
  padding: 1em 1em !important;
  color: #ffffff60;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}

.accordion button:hover,
.accordion button:focus {
  cursor: pointer;
  color: var(--color-btn-animate);
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.accordion button:hover::after,
.accordion button:focus::after {
  cursor: pointer;
  color: var(--color-btn-animate);
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
  border: 1px solid var(--color-btn-animate);
}

.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
}

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 17px;
  width: 22px;
  height: 22px;
  border: 1px solid #551c41;
  border-radius: 22px;
}

.accordion button .icon::before {
  display: block;
  position: absolute;
  content: "";
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}

.accordion button .icon::after {
  display: block;
  position: absolute;
  content: "";
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}

.accordion button[aria-expanded="true"] {
  color: #ffffff;
  background-color: #24131e;
}

.accordion button[aria-expanded="true"] .icon::after {
  width: 0;
}

.accordion button[aria-expanded="true"] + .accordion-content {
  opacity: 1;
  max-height: 26em;
  color: #fff;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}

.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}

.accordion .accordion-content p {
  font-family: Mona-Light;
  font-size: 14px;
  line-height: 24px;
  font-weight: 300;
  margin: 2em 0;
}

#net_socials--list {
  display: flex;
  column-gap: 0.5em;
  margin: 0.1em 0;
  flex-wrap: wrap;
}

#net_socials--list a {
  font-size: 0.8em;
  font-family: Mona-UltraLight;
  padding: 0.5em 0.7em;
  border-radius: 6px;
  border: 1px solid #ff3cb475;
  background: #ff3cb428;
  box-shadow: 0px 5px 15px 0px rgba(37, 44, 97, 0.15),
    0px 2px 4px 0px rgba(255, 15, 15, 0.2);
  font-weight: 400 !important;
  transition: 0.3s;
}

#net_socials--list a:hover {
  color: var(--color-btn-animate);
  background-color: #ff3cb4;
  transition: 0.3s;
}

#net_socials--list2 {
  display: flex;
  column-gap: 0.5em;
  margin: 0.1em 0;
  flex-wrap: wrap;
}

#net_socials--list2 a {
  font-size: 0.8em;
  font-family: Mona-UltraLight;
  padding: 0.5em 0.7em;
  border-radius: 6px;
  border: 1px solid #ff3cb475;
  background: #ff3cb4;
  box-shadow: 0px 5px 15px 0px rgba(37, 44, 97, 0.15),
    0px 2px 4px 0px rgba(255, 15, 15, 0.2);
  font-weight: 400 !important;
  transition: 0.3s;
}

#net_socials--list2 a:hover {
  color: var(--color-btn-animate);
  background-color: #da2896;
  transition: 0.3s;
}

#net_socials--list2 i{
  font-size: 0.8em;
}
#qualifications__list {
  list-style: none;
}

#net_socials--list i {
  font-size: 0.9em;
  color: var(--branco) !important;
}

.i {
  display: flex;
  align-items: center;
}

.i img {
  margin-right: 7px;
}

#wrapper--tech__items {
  width: 720px;
  font-family: Mona-UltraLight;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  column-gap: 0.6em;
  margin-bottom: 0.6em;
  font-size: 0.9em;
}

.icon-sk {
  height: auto;
}

.card--tech-stack {
  margin: auto;
  width: 100%;
  color: rgba(255, 189, 255, 0.658);
  border: 1px solid rgba(238, 130, 238, 0.123);
  padding: 0.5em 1em;
  border-radius: 5px;
  font-weight: 400 !important;
}

.card--work-history {
  border-left: 1px solid rgba(238, 130, 238, 0.349);
  margin-top: 3em;
  margin-bottom: 3em;
  padding-left: 2em;
}

.line-break {
  background-color: rgba(238, 130, 238, 0.349);
  height: 1px;
}

@-webkit-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}

@-moz-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -moz-transform: translateX(100%);
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}

@keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@-webkit-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}

@-moz-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}

@keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}

/* services section styling */
.services,
.dbz {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(
    90deg,
    transparent,
    rgb(0, 0, 0) 20%,
    white 80%,
    transparent
  );
  color: #fff;
  background: #0e0d0d;
}

.dbz .carousel .card {
  border: 2px solid hsla(0, 0%, 100%, 0.055);
  overflow: hidden;
  background: #111111;
  color: #ffffff52;
  box-shadow: 0 10px 20px 10px hsla(0, 4%, 11%, 0.25) inset,
    0 1px hsla(0, 0%, 2%, 0.562);
  border-radius: 30px;
  padding: 55px 35px;
  height: 470px;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dbz .carousel .card:hover {
  border: 2px solid hsla(0, 0%, 100%, 0.158);
  overflow: hidden;
  background: #29272752;
  color: #fff;
  box-shadow: 0 10px 20px 10px hsla(0, 4%, 11%, 0.25) inset,
    0 1px hsla(0, 0%, 11%, 0.562);
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dbz .carousel .card .box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.dbz .carousel .card .box p {
  font-size: 0.9em;
  font-weight: 300;
  line-height: 28px;
  font-family: "Mona-Regular" !important;
}

.dbz .carousel .card:hover .box {
  transform: scale(1.01);
}

.dbz .carousel .card .text {
  font-size: 0.7em;
  font-weight: 700;
  margin: 10px 0 7px 0;
  font-family: "Mona-Bold" !important;
}

.dbz .carousel .card img {
  height: 60px;
  width: 60px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-btn-animate);
  padding: 5px;
  transition: all 0.3s ease;
}

.dbz .carousel .card:hover img {
  border-color: #fff;
}

.owl-dots {
  text-align: center;
  margin-top: 20px;
}

.owl-dot {
  height: 7px;
  width: 7px;
  margin: 0 5px;
  outline: none !important;
  border-radius: 50%;
  border: 1px solid var(--color-btn-animate) !important;
  transition: all 0.3s ease;
}


.grid {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  z-index: -1;
}

.grid-svg {
  height: 80%;
  width: 80%;
  position: relative;
  z-index: 1;
}

.blur {
  height: 12rem;
  width: 18rem;
  background-color: hsla(298, 100%, 66%, 0.377);
  filter: blur(100px);
  border-radius: 100px;
  z-index: 0;
  position: absolute;
}


.title-sb {
  font-family: 'Manrope';
  font-size: 4rem !important;
  font-weight: 700;
  letter-spacing: -0.2rem;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-self: center;
  height: 100%;
  z-index: 1000;
  text-shadow: 3px 3px 3px 2px #000000;
}

.title-sb > p {
  margin: 0;
  line-height: 4rem;
  width: auto;
 
}
 

.title-sb > p:nth-child(3){
  color: hsl(298, 100%, 74%);
 }


.owl-dot.active {
  width: 35px;
  border-radius: 14px;
}

.owl-dot.active,
.owl-dot:hover {
  background: var(--color-btn-animate) !important;
}

/* Responsive mobile */
@media (max-width: 991px) {
  .card-work {
    flex-basis: 100%;
  }

  :root {
    --padding-lg: 50px 20px;
  }
  #citacao {
 
    padding: 20px 0px 20px 0px;
  }

  .card-image-bio {
    padding: 20px 6px !important;
  }

  h2.frase-bio {
    font-size: 1.04em !important;
    line-height: 26px;
  }

  h2 {
    font-size: 1em !important;
  }

  #header-bio {
    height: 100vh;
  }

  #cont-bio {
    width: 600px;
  }
}

@media (max-width: 947px) {
 
  #cont-bio {
    width: 600px;
  }
}

@media (max-width: 690px) {
  #cont-bio {
    width: 100%;
  }

  #header-bio {
    height: auto;
    background-position: 20% 60% !important;
  }
}

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

:root {
  --bg-color: rgba(20, 20, 20, 0.911);
  --card-color: rgba(17, 11, 15, 0.603);
}

#cards-work h1,
#cards-work h2,
#cards-work h3,
#cards-work h4,
#cards-work span {
  color: rgb(240, 240, 240);
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  margin: 0px;
}

i {
  color: rgb(240, 240, 240);
}


.card-work {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  height: 200px;
  flex-direction: column;
  position: relative;
  flex-basis: 100%;

}

.card-work:hover::before {
  opacity: 1;
}

.card-work::before,
.card-work::after {
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: opacity 500ms;
  width: 100%;
}

.card-work::before {
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0.08),
    transparent 40%
  );
  z-index: 3;
}

.card-work::after {
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y),
    rgba(117, 36, 86, 0.822),
    transparent 40%
  );
  z-index: 1;
}

.card-work > .card-content {
   background-color: var(--card-color);
  border-radius: inherit;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: flex-start;
  inset: 1px;
  position: absolute;
  z-index: 2;
  padding: 60px 25px 20px;

}

.card-work-bio {
  background: linear-gradient(
    20deg,
    #412032c7 20%,
    rgba(100, 53, 88, 0.712) 50%,
    #9e657dc7 100%
  );
  /*background-color: rgba(242, 192, 255, 0.959);*/
  border-radius: 10px;
  display: flex;
  height: 100px;
  flex-direction: row;
  position: relative;
  flex-basis: 100%;
  align-items: center;
  justify-content: center;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.card-work-bio a:hover {
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
  background-color: rgba(242, 192, 255, 0.096);
}

.card-work-bio a:hover::before {
  opacity: 1;
}

.card-work-bio ::before,
.card-work-bio ::after {
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: opacity 500ms;
  width: 100%;
  cursor: pointer;
}

.card-work-bio a::before {
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0.315),
    transparent 40%
  ) !important;
  z-index: 3;
}

.card-work-bio a::after {
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y),
    rgba(117, 36, 86, 0.822),
    transparent 40%
  ) !important;
  z-index: 1;
}

.card-work-bio a > .card-content {
  box-shadow: inset 0 0 10px 5px rgba(12, 11, 11, 0.616);
  border-radius: inherit;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: center;
  inset: 2px;
  justify-content: center;
  position: absolute;
  z-index: 2;
}

.card-image-bio {
  position: relative;
  padding: 50px 30px;
}

.card-image-bio img {
  border-radius: 5px;
}

.card-image {
  align-items: center;
  display: flex;
  height: auto;
  justify-content: flex-start !important;
  overflow: hidden;
}

.card-image > i {
  font-size: 6em;
  opacity: 0.25;
}

.card-info-wrapper {
  align-items: center;
  display: flex;
  flex-grow: 1;
  justify-content: flex-start !important;
 }

.card-info {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.card-info > i {
  font-size: 1em;
  height: 20px;
  line-height: 20px;
}

.card-info-title > h3 {
  color: rgba(255, 255, 255, 0.699) !important;
  font-size: 0.7em;
  line-height: 17px;
  padding-bottom: 10px;
  font-family: "Mona-Bold" !important;
}

.card-info-title > h4 {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85em;
  font-family: "Mona-UltraLight" !important;
  margin-top: 8px;
}

/* -- ↓ ↓ ↓ some responsiveness ↓ ↓ ↓ -- */

@media (max-width: 1000px) {
  body {
    align-items: flex-start;
    overflow: auto;
  }

  #cards-work {
    max-width: 1000px;
    padding: 10px 0px;
  }

  .card-work {
    flex-shrink: 1;
    width: calc(50% - 4px);
  }

  .card-work-bio a {
    flex-shrink: 1;
    width: calc(50% - 4px);
  }
}

.linha{
  margin: 50px 0;
  color: #492234 !important;
  background-color: #492234 !important;
}

.box-btn-bio {
  position: relative;
  top: -30px !important;
}
.logo-bio img {
  width: 90px !important;
}
.mob {
  display: none;
}

@media (max-width: 500px) {

  a.btn-header{
    font-size: 0.8em !important;
    text-align: center;
    padding: var(--padding-btn-mob) !important;
  }

  .foto .img-jhenifer{
    width: 70px !important;
  }

  .title-sb {
    padding: 0px 30px;
    font-family: 'Manrope';
    font-size: 3.0em !important;
    text-align: center;
  }

  .title-sb p{
    line-height: 1.1em !important;
  }

  .foto-txt h2 {
    font-size: 1.2em !important;
}


.box-foto{
  align-items: center !important;
}
.foto-txt h3{
  font-size: 12px !important;
  line-height: 23px !important;
}

  #citacao p{
    margin-top: 10px;
    font-size: 14px !important;
    line-height: 22px !important;
  }

  h1.frase {
    line-height: 30px !important;
  }
  .menu-logo {
    margin-right: 15px;
  }

  #header-bio {
    padding: 15px 0 40px;
  }
  .box-btn-bio {
    position: relative;
    top: -20px !important;
  }

  .card-work-bio .card-info-title > h3 {
    color: rgba(255, 255, 255, 0.699) !important;
    font-size: 0.7em !important;
    line-height: 20px;
    padding-bottom: 10px;
    font-family: "Mona-Bold" !important;
  }

  .card-work-bio .card-info-title > h4 {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65em !important;
    font-family: "Mona-UltraLight" !important;
    margin-top: 8px;
  }

  .card-work img {
    width: 25px !important;
  }
   
  .gradient-border-card p{
    line-height: 23px !important;
  }

  .gradient-border-card{
    padding: 35px 20px !important;
  }
  .div-sobre ul li {
    padding: 20px 28px !important;
  }

  .header__marq-star img {
    width: 15px;
    height: 15px;
    margin-right: 15px;
  }

  .header__marq-txt {
    font-size: 13px;
    padding-right: 30px;
  }

  .mob {
    display: flex;
  }
  
  .logo-bio img {
    width: 130px !important;
  }

  header .ul-menu-jt {
    display: none;
  }

  #header-index {
    background-position: 35% 35% !important;
  }

  #txt-present {
    font-size: 1.7em !important;
    line-height: 30px;
  }

  .faq {
    padding: 1em;
  }

  .accordion button {
    font-size: 0.7em;
    padding-right: 20px !important;
  }

  img.icone-whats {
    right: 2px !important;
  }

  
  .box-sobre {
    flex-wrap: wrap !important;
  }

  h1 {
    font-size: 1.6em;
  }

  footer p.copyright {
    font-size: 0.7em !important;
  }

  footer {
    padding: 50px 20px !important;
  }

  .accordion button .icon {
    right: 0px !important;
  }
  .contato {
    padding: 60px 10px !important;
  }

  .cd {
    column-gap: 20px;
    width: 100%;
  }

  .dbz .carousel .card {
    padding: 20px;
  }


  .card-work {
    height: 250px;
    flex-basis: 48% !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  .card-work > .card-content {
    padding-top: 30px !important;
  }

  .tabs {
    margin-top: 20px !important;
  }

  #bio {
    position: relative;
    top: -20px;
  }

  #wrapper--tech__items {
    flex-basis: 48% !important;
    flex-wrap: wrap;
    gap: 12px;
    margin-left: 4px;
  }

  .card-work-bio a {
    height: 110px;
  }

  #wrapper--tech__items {
    font-size: 0.7em;
  }
  .card--tech-stack {
    padding: 1.1em 1em;
  }
  #cards-work {
    gap: 12px;
    padding-bottom: 50px;
  }

  .card-image {
    height: 280px;
  }

  .card-image img {
    width: 45px;
  }

  .card-image > i {
    font-size: 3em;
  }


  .card-info > i {
    font-size: 0.8em;
  }

  .card-info-title > h3 {
    font-size: 0.9em;
  }

  .card-info-title > h4 {
    font-size: 0.8em;
    margin-top: 4px;
  }
}
.gradient-border-card .icon{
  margin-bottom: 10px;
}

@media (max-width: 320px) {
  .card-work {
    width: 100%;
  }

  .card-work-bio a {
    width: 100%;
  }
}

.link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.link > i,
.link > span {
  height: 20px;
  line-height: 20px;
}

.link > span {
  color: white;
}

#contact {
  padding-top: 40px !important;
  background: #0e0d0d;
}

.contato {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  background-color: #161616;
  padding: 50px 60px;
  border-radius: 20px;
}

.contato input,
.contato textarea {
  width: 100%;
  margin-bottom: 16px;
  border-radius: 4px;
  font-size: 16px;
  color: #8a8a8ae1;
}

.contato input,
.contato textarea {
  border: 0;
  margin-bottom: 24px;
  outline: 0;
  font-size: 16px;
  font-family: Mona-UltraLight !important;
  border-radius: 10px;
  padding: 16px;
  background-color: #070507b6;
  /*text-shadow: 1px 1px 0 #fff;*/
}

.contato input {
  height: 40px;
}

.contato button {
  font-family: Mona-Bold;
  position: relative;
  font-weight: 700;
  width: 100%;
  padding: 15px 30px;
  color: var(--branco);
  border-radius: 999px;
  border: 1px solid var(--rosa-destaque);
  background: linear-gradient(
    180deg,
    #f93c42 0%,
    #b91e67 100%,
    rgba(38, 255, 255, 0) 100%
  );
  box-shadow: 0px 5px 15px 0px rgba(37, 44, 97, 0.15),
    5px 4px 27px 0px rgba(185, 30, 103, 0.29);
}

.contato button:hover {
  position: relative;
  top: -4px;
  cursor: pointer;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.contato button img {
  margin-right: 8px;
}

.made-with {
  background: var(--color-btn-animate);
  color: #fff;
  display: block;
  font-size: 12px;
  line-height: 1em;
  margin: 0;
  padding: 5px 110px;
  position: fixed;
  top: 20px;
  right: -100px;
  text-align: center;
  text-decoration: none;
  transform: rotate(45deg);
}

.documentation {
  color: var(--color-btn-animate);
}

button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
}

.tabs {
  display: block;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0;
  overflow: hidden;
  color: #efedef !important;
}

.tabs [class^="tab"] label,
.tabs [class*=" tab"] label {
  color: #efedef5e !important;
  cursor: pointer;
  display: block;
  font-size: 0.7em;
  font-weight: 300;
  line-height: 1em;
  padding: 1rem 0;
  text-align: center;
}

.tabs [class^="tab"] [type="radio"],
.tabs [class*=" tab"] [type="radio"] {
  border-bottom: 1px solid rgba(239, 237, 239, 0.5);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.tabs [class^="tab"] [type="radio"]:hover,
.tabs [class^="tab"] [type="radio"]:focus,
.tabs [class*=" tab"] [type="radio"]:hover,
.tabs [class*=" tab"] [type="radio"]:focus {
  border-bottom: 1px solid var(--color-btn-animate);
}

.tabs [class^="tab"] [type="radio"]:checked,
.tabs [class*=" tab"] [type="radio"]:checked {
  border-bottom: 2px solid var(--color-btn-animate);
}

.tabs [class^="tab"] [type="radio"]:checked + div,
.tabs [class*=" tab"] [type="radio"]:checked + div {
  opacity: 1;
}

.tabs [class^="tab"] [type="radio"] + div,
.tabs [class*=" tab"] [type="radio"] + div {
  display: block;
  opacity: 0;
  padding: 2rem 0;
  width: 90%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.tabs .tab-2 {
  width: 50%;
}

.tabs .tab-2 [type="radio"] + div {
  width: 200%;
  margin-left: 200%;
}

.tabs .tab-2 [type="radio"]:checked + div {
  margin-left: 0;
}

.tabs .tab-2:last-child [type="radio"] + div {
  margin-left: 100%;
}

.tabs .tab-2:last-child [type="radio"]:checked + div {
  margin-left: -100%;
}



.gradient-text-animation {
  font-family: Mona-Regular;
  font-weight: 700 !important;
  --colorA: #D6009A;
  --colorB: #9750dd;
  cursor: default;
  position: relative;
  background-image: linear-gradient(120deg, var(--colorA) 0%, var(--colorB) 50%, var(--colorA) 100%);
  background-origin: padding-box;
  background-size: 200%;
  -webkit-box-decoration-break: clone;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: unset;
  animation-timeline: auto;
  animation-range-start: normal;
  animation-range-end: normal;
  overflow: visible;
  animation: 3s linear 0s infinite normal forwards running effect-text1;
}

@keyframes effect-text1 {
  100% {
    background-position: -200% center;
  }
}






body {
  background: #121212;
  color: #fff;
  font-family: "Inter", sans-serif;
  position: relative;
}

h2 {
  font-size: 1.8rem !important;
}

@font-face {
  font-family: "Inter";
  src: url("https://res.cloudinary.com/du6mfjbbd/raw/upload/v1696975586/wegxkv6mdriebvpvokwf.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
:root {
  --text-color: #a1a1a1;
  --accent-color: #111;
  --geist-foreground-rgb: 255, 255, 255;
  --border-radius: 12px;
}

.logo {
  max-width: 5rem;
}

/******************************/
.gradient-text-animation {
  --colorA: #D6009A;
  --colorB: #9750dd;
  cursor: default;
  position: relative;
  background-image: linear-gradient(120deg, var(--colorA) 0%, var(--colorB) 50%, var(--colorA) 100%);
  background-origin: padding-box;
  background-size: 200%;
  -webkit-box-decoration-break: clone;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: unset;
  animation-timeline: auto;
  animation-range-start: normal;
  animation-range-end: normal;
  overflow: visible;
  animation: 3s linear 0s infinite normal forwards running nextui-k-dAFEPd;
}

@keyframes nextui-k-dAFEPd {
  100% {
    background-position: -200% center;
  }
}
/******************************/
.gradient-border-card {
  position: relative;
  padding: 40px;
  border-radius: var(--border-radius);
  flex: 1 1;
  transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  box-shadow: 0 0 0 1px transparent, 0 2px 4px transparent, 0 12px 24px transparent;
  cursor: pointer;
  height: 100%;
  z-index: 1;
  font-family: Mona-Regular;
  background-image: linear-gradient(80deg, #0e0d0db9 20%, #2c2c2cb0 40%);
}
@keyframes shimmer {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    background-position: -50%;
  }
  10% {
    opacity: 0.7;
  }
  15% {
    opacity: 0;
    background-position: 150%;
  }
  20% {
    opacity: 0;
  }
  to {
    opacity: 0;
  }
}

.gradient-line:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -75px;
  height: 75px;
  filter: blur(30px);
  -webkit-filter: blur(30px);
  background-image: conic-gradient(from 180deg at 50% 100%, transparent 0, transparent 27%, #ff3998 27%, #d764ff 36.04%, #00b5ff 58.23%, #0fd 63%, #54fa43 73%, transparent 73%, transparent 100%);
  animation: hueRotate 2.5s linear infinite;
}



.btn-wt{
  text-align: center; /* Centraliza o texto horizontalmente */
    display: flex; /* Aplica um layout flexível */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    align-items: center; /* Centraliza o conteúdo verticalmente */
  background: linear-gradient(
    180deg,
    rgba(255, 38, 100, 0.2) 0%,
    rgba(185, 30, 103, 0.74) 52.43%,
    #b91e67 81.08%
  );
  cursor: pointer;
  border: 2px solid #b91e67;
  padding: 8px 25px;
  color: #fff;
  border-radius: 15px;
  text-align: center;
}

.svg-dp{
  position: absolute !important;
  z-index: 1;
  top: -2%;
  left: 25%;
}

.gradient-border-card .shimmer {
  
  background: linear-gradient(112deg, transparent 30%, rgba(var(--geist-foreground-rgb), 0.1) 40%, rgba(var(--geist-foreground-rgb), 0.3) 50%, rgba(var(--geist-foreground-rgb), 0.1) 60%, transparent 80%);
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  border-radius: inherit;
  background-size: 200% auto;
  background-position: 0;
  animation: shimmer 18s cubic-bezier(0.8, 0, 0.05, 1) infinite;
  animation-delay: var(--delay);
}
.gradient-border-card i {
  content: "";
  position: absolute;
  inset: -1px;
  padding: var(--border-size);
  --border-size: 1px;
  --padding: 1px;
  --border-bg: conic-gradient(from 180deg at 50% 50%,#e92a67 0deg,#a853ba 112.5deg,#2a8af6 228.75deg,rgba(42,138,246,0) 360deg);
  overflow: hidden;
  padding: calc(var(--padding) + var(--border-size));
  border-radius: var(--border-radius);
  display: inline-block;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 1000;
  transform: translateZ(0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  border-radius: calc(var(--border-radius) + var(--border-size));
}
.gradient-border-card i:before {
  content: "";
  display: block;
  background: var(--border-bg);
  box-shadow: 0 0 40px 20px --var(--border-bg);
  width: calc(100% * 1.41421356237);
  padding-bottom: calc(100% * 1.41421356237);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  z-index: -2;
  animation: landing_spin__XlUIM 5s linear infinite;
}
@keyframes landing_spin__XlUIM {
  0% {
    transform: translate(-50%, -50%) rotate(1turn);
  }
  to {
    transform: translate(-50%, -50%) rotate(0);
  }
}

.foto-projeto{
  display: flex;
  justify-content: center;
  width: 100%;
}

.vd-projeto{
  display: flex;
  flex-direction: row;
  column-gap: 20px;
  justify-content: center;
  width: 100%;
}

.foto-projeto img{
  width: 100%;
  border-radius: 10px;
}

.foto-projeto2{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  column-gap: 10px;
}

.foto-projeto2 img{
  width: 49%;
  height: auto !important;
  border-radius: 10px;
}

.gradient-border-card h2{
  margin-top: 10px;
  font-size: 1.2em !important;
}

.gradient-border-card .icon {
  position: relative;
  display: inline-flex;
  padding: 0.75rem;
  border-radius: inherit;
}
.gradient-border-card p {
  margin-top: 10px;
  font-size: 0.7em;
  line-height: 28px;
  color: var(--text-color);
}
.gradient-border-card:before, .gradient-border-card .icon:before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(75% 75% at 25% 15%, #fff 0, rgba(255, 255, 255, 0.3) 100%);
  -webkit-mask: linear-gradient(#000, #0e0d0d) content-box, linear-gradient(#000, #0e0d0d);
  mask: linear-gradient(#000, #0e0d0d) content-box, linear-gradient(#000, #0e0d0d);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  pointer-events: none;
}
.gradient-border-card:hover {
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.411), 0 10px 14px rgba(0, 0, 0, 0.247), 0 12px 24px rgba(0, 0, 0, 0.05);
}

.button-ctt {
  border: 0;
  position: relative;
  border-radius: 12px;
  color: #fff;
  background: #000;
  padding: 0 16px;
  box-shadow: 0 0 0 1px 0 0 0 1px rgba(255, 255, 255, 0.14);
  max-width: 100%;
  justify-content: center;
  align-items: center;
  transition-property: border-color, background, color, transform, box-shadow;
  transition-duration: 0.15s;
  transition-timing-function: ease;
  font-size: 16px;
  line-height: 50px;
  height: 50px;
  width: 100%;
  max-width: 250px;
  transition: 0.25s;
}
 
.highlight-bg {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  background: inherit;
  border-radius: 12px;
  background: linear-gradient(-90deg, #007cf0, #00dfd8, #ff0080, #007cf0);
  background-size: 400% 100%;
  border: none;
  padding: 0;
  margin: 0;
  animation: background-anim 8s ease-in-out infinite;
}

.button-text {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.highlight-bg:after {
  content: "";
  position: absolute;
  background-size: inherit;
  background-image: inherit;
  animation: inherit;
  left: 0;
  right: 0;
  top: 2px;
  height: 100%;
  filter: blur(0.5rem);
  transition: 0.25s;
}

@keyframes background-anim {
  50% {
    background-position: 140% 50%;
    transform: skew(-2deg);
  }
}
/*****************/
.gradient-background__wrapper {
  background: #141414;
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: -1;
}

@media (max-width: 568px) {
  .gradient-background__wrapper {
    background: #FFFFFF;
  }
}
.gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-filter: blur(250px);
  filter: blur(250px);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@media (max-width: 568px) {
  .gradient-background {
    display: none;
  }
}
.gradient-background__shape {
  mix-blend-mode: lighten;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
  position: absolute;
  border-radius: 100%;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1);
  animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1);
}

.gradient-background__shape--1 {
  bottom: 0;
  left: 0;
  width: 700px;
  height: 700px;
  background: #4f4f4f;
  mix-blend-mode: lighten;
  -webkit-transform: translate(-30%, 40%);
  transform: translate(-30%, 40%);
  -webkit-animation-name: gradientShapeAnimation1;
  animation-name: gradientShapeAnimation1;
}

.gradient-background__shape--2 {
  top: 0;
  right: 0;
  width: 600px;
  height: 600px;
  background: #010030;
  -webkit-transform: translate(20%, -40%);
  transform: translate(20%, -40%);
  -webkit-animation-name: gradientShapeAnimation2;
  animation-name: gradientShapeAnimation2;
}

@keyframes gradientShapeAnimation1 {
  0% {
    -webkit-transform: translate(-30%, 40%) rotate(-20deg);
    transform: translate(-30%, 40%) rotate(-20deg);
  }
  25% {
    -webkit-transform: translate(0%, 20%) skew(-15deg, -15deg) rotate(80deg);
    transform: translate(0%, 20%) skew(-15deg, -15deg) rotate(80deg);
  }
  50% {
    -webkit-transform: translate(30%, -10%) rotate(180deg);
    transform: translate(30%, -10%) rotate(180deg);
  }
  75% {
    -webkit-transform: translate(-30%, 40%) skew(15deg, 15deg) rotate(240deg);
    transform: translate(-30%, 40%) skew(15deg, 15deg) rotate(240deg);
  }
  100% {
    -webkit-transform: translate(-30%, 40%) rotate(-20deg);
    transform: translate(-30%, 40%) rotate(-20deg);
  }
}
@keyframes gradientShapeAnimation2 {
  0% {
    -webkit-transform: translate(20%, -40%) rotate(-20deg);
    transform: translate(20%, -40%) rotate(-20deg);
  }
  20% {
    -webkit-transform: translate(0%, 0%) skew(-15deg, -15deg) rotate(80deg);
    transform: translate(0%, 0%) skew(-15deg, -15deg) rotate(80deg);
  }
  40% {
    -webkit-transform: translate(-40%, 50%) rotate(180deg);
    transform: translate(-40%, 50%) rotate(180deg);
  }
  60% {
    -webkit-transform: translate(-20%, -20%) skew(15deg, 15deg) rotate(80deg);
    transform: translate(-20%, -20%) skew(15deg, 15deg) rotate(80deg);
  }
  80% {
    -webkit-transform: translate(10%, -30%) rotate(180deg);
    transform: translate(10%, -30%) rotate(180deg);
  }
  100% {
    -webkit-transform: translate(20%, -40%) rotate(340deg);
    transform: translate(20%, -40%) rotate(340deg);
  }
}
.gradient-background__noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://res.cloudinary.com/du6mfjbbd/image/upload/v1701127786/qzt2rn0jkkdln3y1e3mp.png");
  background-size: 100px;
}

@media (max-width: 568px) {
  .gradient-background__noise {
    display: none;
  }
}
@media (prefers-reduced-motion) {
  .gradient-background__shape--1 {
    -webkit-animation-name: none;
    animation-name: none;
  }

  .gradient-background__shape--2 {
    -webkit-animation-name: none;
    animation-name: none;
  }
}
@-moz-document url-prefix() {
  .gradient-background__wrapper {
    background-image: url("https://res.cloudinary.com/du6mfjbbd/image/upload/v1701127843/gradient-background-c1d8cb3f0925910cfff2493c4442d4e2c1cb6b8a267903342574faee6f70c26c_zuhomc.png");
    background-size: cover;
  }

  @media (max-width: 568px) {
    .gradient-background__wrapper {
      background: #FFFFFF;
    }
  }
  .gradient-background,
.gradient-background__noise {
    display: none;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .gradient-background__wrapper {
    background-image: url("https://res.cloudinary.com/du6mfjbbd/image/upload/v1701127843/gradient-background-c1d8cb3f0925910cfff2493c4442d4e2c1cb6b8a267903342574faee6f70c26c_zuhomc.png");
    background-size: cover;
  }
}
@media all and (-ms-high-contrast: none) and (max-width: 568px), (-ms-high-contrast: active) and (max-width: 568px) {
  .gradient-background__wrapper {
    background: #FFFFFF;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .gradient-background,
.gradient-background__noise {
    display: none;
  }
}
/*****************************/
.glowing-wrapper-button {
  z-index: 1;
  color: #fff;
  letter-spacing: -0.01em;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 62.5rem;
  padding: 0.7rem 1.5rem;
  font-size: 0.88rem;
  line-height: 1.42;
  text-decoration: none;
  position: relative;
  max-width: 100%;
  display: inline-block;
}

.glowing-wrapper {
  border-radius: 62.5rem;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.glowing-wrapper.glowing-wrapper-active {
  background-color: #000;
}

.glowing-wrapper-borders-masker {
  width: 100%;
  opacity: 0;
  border-radius: 62.5rem;
  padding: 0.11rem;
  line-height: 100%;
  transition: opacity 1s;
  position: absolute;
  top: 0;
  left: 0;
}

.glowing-wrapper .button-text {
  z-index: 2;
  color: #fff;
  position: relative;
}

.glowing-wrapper-animations {
  width: 100%;
  opacity: 0;
  transition: opacity 1s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.glowing-wrapper-mask {
  opacity: 1;
}

.glowing-wrapper-glow {
  opacity: 0.12;
  filter: blur(8px);
}

.glowing-wrapper-borders {
  width: 100%;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.glowing-wrapper-mask-wrapper {
  opacity: 1;
}

.glowing-wrapper-button:after {
  background: radial-gradient(85% 120% at 50% 120%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 999px;
  content: "";
  height: calc(100% + 4px);
  left: -2px;
  opacity: 0;
  position: absolute;
  top: -2px;
  transition: 1s all;
  width: calc(100% + 4px);
}

.glowing-wrapper-button:hover:after {
  opacity: 0.7;
}

.glowing-wrapper-active .glowing-wrapper-animations,
.glowing-wrapper-active .glowing-wrapper-borders-masker {
  opacity: 1;
}

.glowing-wrapper-animations:before,
.glowing-wrapper-borders:before {
  content: "";
  float: left;
  padding-top: 100%;
}

.glowing-wrapper-animations:after,
.glowing-wrapper-borders:after {
  clear: both;
  content: "";
  display: block;
}

.glowing-wrapper-animations {
  pointer-events: none;
}

.glowing-wrapper-animations * {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.glowing-wrapper-borders,
.glowing-wrapper-glow,
.glowing-wrapper-mask {
  animation: borderTurn 2.5s infinite linear;
  background-image: conic-gradient(from 0 at 50% 50%, rgba(255, 255, 255, 0.5) 0deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0) 310deg, rgba(255, 255, 255, 0.5) 360deg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.glowing-wrapper-mask-wrapper {
  -webkit-mask: url("data:image/svg+xml,url('data:image/svg+xml,%253Csvg width='28' height='24' viewBox='0 0 28 24' fill='none' xmlns='http://www.w3.org/2000/svg'%253E%253Crect width='28' height='24' fill='black'/%253E%253C/svg%253E%250A');");
  mask: url("data:image/svg+xml,url('data:image/svg+xml,%253Csvg width='28' height='24' viewBox='0 0 28 24' fill='none' xmlns='http://www.w3.org/2000/svg'%253E%253Crect width='28' height='24' fill='black'/%253E%253C/svg%253E%250A');");
  mask-repeat: repeat;
  -webkit-mask-size: auto;
  mask-size: auto;
}

.glowing-wrapper-borders {
  animation-name: borderTurnWithTranslate;
}

.glowing-wrapper-borders-masker {
  content: "";
  inset: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@keyframes borderTurn {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes borderTurnWithTranslate {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.close-button {
  background: transparent;
  border-radius: 50%;
  animation: animate 3s linear infinite;
}

@keyframes animate {
  0% {
    box-shadow: 0 0 0 0 rgba(48, 0, 117, 0.7), 0 0 0 0 rgba(48, 0, 117, 0.7);
  }
  40% {
    box-shadow: 0 0 0 20px rgba(48, 0, 117, 0), 0 0 0 0 rgba(48, 0, 117, 0.7);
  }
  80% {
    box-shadow: 0 0 0 20px rgba(48, 0, 117, 0), 0 0 0 30px rgba(48, 0, 117, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(48, 0, 117, 0), 0 0 0 30px rgba(48, 0, 117, 0);
  }
}
/****************/
@keyframes hueRotate {
  0% {
    filter: hue-rotate(0) blur(30px);
  }
  100% {
    filter: hue-rotate(360deg) blur(30px);
  }
}
.gradient-line:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -75px;
  height: 75px;
  filter: blur(30px);
  -webkit-filter: blur(30px);
  background-image: conic-gradient(from 180deg at 50% 100%, transparent 0, transparent 27%, #ff3998 27%, #d764ff 36.04%, #00b5ff 58.23%, #0fd 63%, #54fa43 73%, transparent 73%, transparent 100%);
  animation: hueRotate 2.5s linear infinite;
}

/**************************/
.sf__mask {
  on: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.sf-social-item:before {
  background-color: rgba(255, 255, 255, 0.075);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  width: 100%;
}

.sf-social-item:hover:before {
  transform: scaleY(1);
}

.sf-social-item:hover .sf-social-item__icon {
  animation: socialicon 0.75s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.sf-purple-mark {
  animation: shape 20s linear infinite;
  height: 5.3rem;
  width: 5.3rem;
}

.sf-purple-mark.--2 {
  animation-direction: reverse;
}

.sf-ring {
  border: 0;
  outline: 0;
}

.sf-ring.--1, .sf-ring.--2 {
  animation: shape 100s linear infinite;
}

.sf-ring.--2 {
  animation-direction: reverse;
}

.sf-ring.--3, .sf-ring.--4 {
  animation: shape 100s linear infinite;
}

.sf-ring.--4 {
  animation-direction: reverse;
}

@keyframes socialicon {
  0% {
    opacity: 1;
    transform: translate(0);
  }
  25% {
    opacity: 0;
    transform: translate(0);
  }
  50% {
    opacity: 0;
    transform: translate(-100%, 100%);
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.nl input[data-v-5a04fd2e] {
  border: 1px solid #ff00fe;
}

@media (min-width: 650px) {
  .nl input[data-v-5a04fd2e] {
    border-right: 0;
  }
}
@keyframes shape {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
/****************/
.spacer {
  padding-top: 300px;
}

.tds-layout.dx-fixed-background__layout {
  -webkit-padding-end: 10px;
  -webkit-padding-start: 10px;
  grid-template-areas: "main main";
  grid-template-columns: repeat(2, 1fr);
  padding-inline-end: 10px;
  padding-inline-start: 10px;
}

.dx-fixed-background {
  --dx-fixed-bg-section-height: 200vh;
}

.dx-fixed-background__container {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: var(--dx-fixed-bg-section-height);
  justify-content: center;
  overflow: clip;
  position: relative;
}

.dx-fixed-background__media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  margin-top: -100vh;
  overflow: hidden;
  position: sticky;
  top: 0;
}

.dx-fixed-background__media-asset {
  height: 100vh;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.tds-theme--replicant-v2 [class*=tds-clip-] {
  --clip-size: 20px;
  --top-left-normal: 0 0;
  --top-left-clip: 0 var(--clip-size),var(--clip-size) 0;
  --top-right-normal: 100% 0;
  --top-right-clip: calc(100% - var(--clip-size)) 0,100% var(--clip-size);
  --bottom-right-normal: 100% 100%;
  --bottom-right-clip: 100% calc(100% - var(--clip-size)),calc(100% - var(--clip-size)) 100%;
  --bottom-left-normal: 0 100%;
  --bottom-left-clip: var(--clip-size) 100%,0 calc(100% - var(--clip-size));
  --clip: polygon(var(--top-left,var(--top-left-normal)),var(--top-right,var(--top-right-normal)),var(--bottom-right,var(--bottom-right-normal)),var(--bottom-left,var(--bottom-left-normal)));
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
}

.tds-theme--replicant-opaque-bg {
  -webkit-backdrop-filter: blur(var(--tds-blur--small));
  backdrop-filter: blur(var(--tds-blur--small));
  background: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.dx-fixed-background {
  --dx-fixed-bg-section-height: 200vh;
}

.dx-fixed-background__media-wrapper {
  height: var(--dx-fixed-bg-section-height);
  inset-inline-start: 0;
  position: absolute;
  top: 0;
  width: 100%;
  transform: scale(1);
  border-radius: 0;
}

.dx-fixed-background .dx-fixed-wrapper {
  padding: 24px;
  background: #fff;
  position: relative;
}

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





.gallery {
  display: flex;
  transition: 0.3s;
}
.gallery:hover .gallery__image {
  filter: grayscale(1);
}
.gallery__column {
  display: flex;
  flex-direction: column;
  width: 25%;
}
.gallery__link {
  margin: 2px;
  overflow: hidden;
}
.gallery__link:hover .gallery__image {
  filter: grayscale(0);
}
.gallery__link:hover .gallery__caption {
  opacity: 1;
}
.gallery__thumb {
  position: relative;
}
.gallery__image {
  display: block;
  width: 100%;
  transition: 0.3s;
}
.gallery__image:hover {
  transform: scale(1.27);
}
.gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 25px 15px 15px;
  width: 100%;
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  color: white;
  opacity: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  transition: 0.3s;
}

.timeline a, .timeline span {
	color: #000 !important;
	transition: color var(--trans-dur);
}
.timeline button {
	color: var(--fg);
	font: 1em/1.5 "IBM Plex Sans", sans-serif;
}

.timeline h1 {
	font-size: 2em;
	margin: 0 0 3rem;
	padding-top: 1.5rem;
	text-align: center;
}
.timeline.btn {
	background-color: var(--fg);
	border-radius: 0.25em;
	color: var(--bg);
	cursor: pointer;
	padding: 0.375em 0.75em;
	transition:
		background-color calc(var(--trans-dur) / 2) linear,
		color var(--trans-dur);
	-webkit-tap-highlight-color: transparent;
}
.timeline.btn:hover {
	background-color: hsl(var(--hue),10%,50%);
}


:root {
  --text: hsl(0, 0%, 99%);
  --textDim: hsl(0, 0%, 60%);
  --background: hsl(0, 0%, 0%);
  --primary: hsl(298, 100%, 66%);
  --primaryBg: hsla(155, 100%, 65%, 1%);
  --primaryHi: hsla(305, 100%, 75%, 0.25);
  --primaryFg: hsl(323, 100%, 85%);
  --secondary: hsl(305, 52%, 14%);
  --secondaryFg: hsl(315, 51%, 75%);
  --secondaryBg: hsla(156, 51%, 14%, 5%);
  --secondaryHi: hsla(313, 52%, 30%, 0.5);
  --accent: hsl(155, 100%, 94%);
  --accentBg: hsla(155, 100%, 94%, 1%);
  --accentHi: hsla(155, 100%, 100%, 25%);
	--hue: 223;
	--bg: hsl(var(--hue),10%,90%);
	--fg: hsl(var(--hue),10%,10%);
	--primary: hsl(var(--hue),90%,50%);
	--trans-dur: 0.3s;
	--trans-timing: cubic-bezier(0.65,0,0.35,1);
	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}
.timeline {
	margin: auto;
	width: 100%;
  color: #000;
}
.timeline__arrow {
	background-color: rgba(255, 180, 243, 0.411);
	border-radius: 0.25em;
	cursor: pointer;
	flex-shrink: 0;
	margin-inline-end: 0.25em;
	outline: transparent;
	width: 2em;
	height: 2em;
	transition:
		background-color calc(var(--trans-dur) / 2) linear,
		color var(--trans-dur);
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}
.timeline__arrow i{
  color: #000;
}
.timeline__arrow:focus-visible,
.timeline__arrow:hover {
	background-color: rgba(250, 149, 233, 0.829);
}
.timeline__arrow-icon {
	display: block;
	pointer-events: none;
  color: #000;
	transform: rotate(-90deg);
	transition: transform var(--trans-dur) var(--trans-timing);
	width: 100%;
	height: auto;
}
.timeline__date {
	font-size: 0.7em;
	line-height: 2.4;
}
.timeline__dot {
	background-color: currentColor;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
	margin: 0.625em 0;
	margin-inline-end: 1em;
	position: relative;
	width: 0.75em;
	height: 0.75em;
}
.timeline__item {
	position: relative;
	padding-bottom: 2.25em;
  color: #000;
}
.timeline__item:not(:last-child):before {
	background-color: currentColor;
	content: "";
	display: block;
	position: absolute;
	top: 1em;
	left: 2.625em;
	width: 0.125em;
	height: 100%;
	transform: translateX(-50%);
}
[dir="rtl"] .timeline__arrow-icon {
	transform: rotate(90deg);
}
[dir="rtl"] .timeline__item:not(:last-child):before {
	right: 2.625em;
	left: auto;
	transform: translateX(50%);
}
.timeline__item-header {
	display: flex;
}
.timeline__item-body {
	border-radius: 0.375em;
	overflow: hidden;
	margin-top: 0.5em;
	margin-inline-start: 4em;
	height: 0;
}
.timeline__item-body-content {
	background-color: #d682c431;
	opacity: 0;
	padding: 1.5em 1.0em;
	visibility: hidden;
	transition:
		opacity var(--trans-dur) var(--trans-timing),
		visibility var(--trans-dur) steps(1,end);
}
.timeline__item-p{
  font-size: 0.8em;
}
.timeline__meta {
  color: #000 !important;
	width: 100%;
}
.timeline__title {
	font-size: 1.0em;
	line-height: 1.333;
}
/* Expanded state */
.timeline__item-body--expanded {
	height: auto;
}
.timeline__item-body--expanded .timeline__item-body-content {
	opacity: 1;
	visibility: visible;
	transition-delay: var(--trans-dur), 0s;
}
.timeline__arrow[aria-expanded="true"] .timeline__arrow-icon {
	transform: rotate(0);
}
 
.container-depoimento{
 margin: 0 auto !important; 
   text-align: center !important;
 
}

.video-container {
  position: relative;
 
}

.video-container iframe {
  border-radius: 15px;
  width: 340px;
  height: 660px;
}

.card-ctt {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10px;
	background: linear-gradient(rgba(25, 31, 50, 0.2), rgb(4 8 20 / 0.01)),
		rgb(4 8 20 / 0.8);
	box-shadow: inset 0 0 0 1px rgb(200 200 220 / 0.16),
		inset 0 0 5px -3px var(--color), inset 0 12px 48px 0 rgb(160 220 240 / 0.08),
		inset 0 0 120px -100px var(--color);
	border-radius: 16px;
	color: var(--color);
	overflow: hidden;
}
.card-ctt::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--color) 8%, transparent 8%),
		radial-gradient(var(--color) 8%, transparent 8%),
		radial-gradient(var(--color) 8%, transparent 8%),
		radial-gradient(var(--color) 8%, transparent 8%);
	background-position: 0% 0%, 0% 100%, 100% 0%, 100% 100%;
	background-size: 40px 40px;
	background-repeat: no-repeat;
	filter: drop-shadow(0 0 6px var(--color));
}
.card-ctt::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--color);
	opacity: 0.2;
	-webkit-mask-image: radial-gradient(90% 90% at 50% 50%, transparent, black);
	mask-image: radial-gradient(90% 90% at 50% 50%, transparent, black);
	filter: url(#noiseFilter);
	z-index: 1;
}

.button-ctt {
	--w: 180px;
	--h: 60px;
	--icon-size: 25px;
	--text-color: rgb(210 210 240);
	--box-glow-color: transparent;
	--box-glow-blur: 20px;
	position: relative;
	min-width: var(--w);
	min-height: var(--h);
	border-radius: var(--h);
	display: flex;
	justify-content: center;
	align-items: center;
	border: none;
	font-family: "Montserrat";
	color: var(--text-color);
	background: rgb(4 8 20 / 0.8);
	box-shadow: 0 0 0 1px rgb(200 200 220 / 0.22),
		0 0 var(--box-glow-blur) var(--box-glow-color),
		inset 0 0 26px -10px var(--box-glow-color);
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow 500ms ease;
	z-index: 2;
}
.button-ctt::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(200 200 220 / 0.1);
	box-shadow: inset 0 0px 24px 0 rgb(170 230 250 / 0.12);
	border-radius: var(--h);
	z-index: 1;
	transition: transform 500ms ease, box-shadow 500ms ease;
}
.text-ctt,
.icon-ctt {
	z-index: 2;
}

.text-ctt {
	transform: translateX(-50%);
	font-family: "Montserrat";
	transition: transform 500ms ease;
}

.icon-ctt {
	position: absolute;
	width: var(--icon-size);
	height: var(--icon-size);
	left: 0;
	transform: translateX(calc((var(--w)) / 2 + 8px));
	transition: transform 500ms ease, color 500ms ease;
}
svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.button-ctt:active {
	--box-glow-blur: 36px;
}
.button-ctt:hover,
.button-ctt:active {
	--box-glow-color: var(--color);
}
.button-ctt:hover::before,
.button-ctt:active::before {
	transform: translateX(65%);
	box-shadow: inset 0 0px 0px 0 transparent;
}
.button-ctt:hover .text,
.button-ctt:active .text {
	transform: translateX(0%);
	animation-play-state: running;
}
.button-ctt:hover .icon,
.button-ctt:active .icon {
	transform: translateX(calc(var(--w) - var(--icon-size) - 19px));
	color: var(--color);
}

.button-ctt:focus-visible {
	outline: none;
}
.button-ctt:focus-visible:not(:hover, :active) {
	--box-glow-color: rgb(114 114 114 / 0.5);
}













/***WHATSAPP***/
/************************************** BOTÃO WHATSAPP *************************************/
#wpp-fix .wpp-link {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	background: #25D366;
	display: flex;
	z-index: 2;
	position: relative;
	padding: 10px;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	box-shadow: 0px 3px 10px rgba(37, 211, 102, 0.56);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
  }
  #wpp-fix .wpp-link > span {
	display: none;
  }
  #wpp-fix .wpp-link:hover {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
	background: #1da851;
  }
  #wpp-fix .wpp-link.hide-this {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	-o-transform: scale(0.5);
	transform: scale(0.5);
  }
  #wpp-fix .wpp-link.hide-this + .form-wpp {
	visibility: visible;
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	border-radius: 1%;
  }
  #wpp-fix .wpp-link.hide-this + .form-wpp + .mask {
	opacity: 1;
	visibility: visible;
  }
  #wpp-fix .wpp-link + .form-wpp {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	position: absolute;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
	border-radius: 3px;
	bottom: 0;
	right: 0px;
	opacity: 0;
	overflow: hidden;
	-webkit-transform: scale(0.2);
	-moz-transform: scale(0.2);
	-ms-transform: scale(0.2);
	-o-transform: scale(0.2);
	transform: scale(0.2);
	border-radius: 50%;
	z-index: 1;
	visibility: hidden;
	transform-origin: bottom right;
	width: 100%;
	max-width: 300px;
	min-width: 350px;
  }
  #wpp-fix .wpp-link + .form-wpp + .mask {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.8);
	opacity: 0;
	visibility: hidden;
  }
  #wpp-fix .wpp-link + .form-wpp .form-content {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	padding: 15px;
	float: left;
	position: relative;
	width: 100%;
	background-color: #e9e0d7 !important;
	background-position: 50%;
	background-size: cover;
  }
  #wpp-fix .wpp-link + .form-wpp .buss-msg {
    background: 
    rgba(168, 8, 107, 0.534) !important;
	padding: 10px;
	border-radius: 0 4px 4px 4px;
	line-height: 1.3;
	font-size: 14px;
	margin: 0 0 10px;
	position: relative;
  }
  #wpp-fix .wpp-link + .form-wpp .buss-msg::before {
	content: "";
	position: absolute;
	border-top: 5px solid rgba(168, 8, 107, 0.534);
	border-right: 5px solid rgba(168, 8, 107, 0.534);
	border-bottom: 5px solid transparent;
	border-left: 5px solid transparent;
	left: -10px;
	top: 0;
  }
  #wpp-fix .wpp-link + .form-wpp form {
	width: calc(300px - 30px);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	float: right;
	position: initial;
  }
  #wpp-fix .wpp-link + .form-wpp form label {
	line-height: 1;
	margin-bottom: 0px;
  }
  #wpp-fix .wpp-link + .form-wpp form label.error {
	font-size: 10px;
	padding: 0 5px;
	position: absolute;
	right: 0;
	bottom: 3px;
  }
  #wpp-fix .wpp-link + .form-wpp form .campo {
	position: relative;
	float: left;
	width: 100%;
	margin-bottom: 5px;
  }
  #wpp-fix .wpp-link + .form-wpp form .form-control-wrap {
	float: left;
	width: 100%;
	position: relative;
  }
  #wpp-fix .wpp-link + .form-wpp form .form-control-wrap::after {
	content: "";
	position: absolute;
	border-top: 5px solid #e7ffe7;
	border-right: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid #e7ffe7;
	right: -10px;
	top: 0;
  }
  #wpp-fix .wpp-link + .form-wpp form input[type=text], #wpp-fix .wpp-link + .form-wpp form input[type=tel], #wpp-fix .wpp-link + .form-wpp form input[type=email] {
	border-radius: 4px 0 4px 4px;
	width: 100%;
	padding: 10px;
	background: #e7ffe7;
	border: 1px solid #e7ffe7;
  }
  #wpp-fix .wpp-link + .form-wpp form input.error, #wpp-fix .wpp-link + .form-wpp form input.not-valid {
	border-color: #F44336 !important;
  }
  #wpp-fix .wpp-link + .form-wpp form input + .not-valid-tip {
	font-size: 10px;
	padding: 0 5px;
	position: absolute;
	right: 0;
	bottom: 0;
  }
  #wpp-fix .wpp-link + .form-wpp form .btn {
	float: right;
	margin-top: 5px;
  }
  #wpp-fix .wpp-link + .form-wpp form .btn button {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	background-color: #0c6156;
	border: 1px solid #0c6156;
	text-transform: initial;
	cursor: pointer;
	padding: 8px 12px;
	color: #fff;
	border-radius: 4px;
	font-size: 1rem;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
  }
  #wpp-fix .wpp-link + .form-wpp form .btn button:hover {
	border-color: #06342e;
	background-color: #06342e;
	box-shadow: 0 1px 4px 0 rgba(12, 97, 86, 0.52);
  }
  #wpp-fix .wpp-link + .form-wpp form .response-output {
	font-size: 0.9rem;
	line-height: 1.2;
	float: left;
	margin: 0;
	width: 100%;
  }
  #wpp-fix .wpp-link + .form-wpp form .ajax-loader {
	display: none !important;
  }
  #wpp-fix .wpp-link + .form-wpp form::after {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	content: "";
	position: absolute;
	width: calc(100% + 4px);
	 background: rgba(255, 255, 255, 0.93);
	left: -2px;
	top: -9px;
	z-index: 5;
	background-image: url(https://www.davidsonsilva.com.br/wp-content/uploads/2023/04/load.gif);
	background-size: 70px;
	background-repeat: no-repeat;
	background-position: 50%;
	opacity: 0;
	visibility: hidden;
  }
  #wpp-fix .wpp-link + .form-wpp form.submitting::after {
	opacity: 1;
	visibility: visible;
  }
  #wpp-fix .wpp-link + .form-wpp form .response-output {
	display: none;
	opacity: 0;
	@inclue transition();
  }
  #wpp-fix .wpp-link + .form-wpp form.sent {
	height: 50px;
  }
  #wpp-fix .wpp-link + .form-wpp form.sent .response-output {
	position: absolute;
	width: 100%;
	height: calc(100% + 15px);
	background: #fff;
	opacity: 1;
	left: 0;
	font-size: 1.4rem;
	text-align: center;
	top: 0;
	align-items: center;
	display: flex;
  }
  #wpp-fix .wpp-link + .form-wpp .head-wpp {
	width: 100%;
	padding: 12px 8px;
	background: linear-gradient(
    -80deg,
    rgba(255, 38, 100, 0.2) 0%,
    rgba(185, 30, 103, 0.74) 52.43%,
    #b91e67 81.08%
  );
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	z-index: 6;
  }
  #wpp-fix .wpp-link + .form-wpp .head-wpp img {
	margin-right: 8px;
	width: 50px;
	border-radius: 50%;
  }
  #wpp-fix .wpp-link + .form-wpp .head-wpp h3 {
	word-break: keep-all;
	padding-right: 30px;
	font-size: 1.1rem;
	font-weight: 500;
	color: #fff;
	margin: 0 0 0 10px;
  }
  #wpp-fix .wpp-link + .form-wpp .close {
	color: #fff;
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	padding: 7px 8px;
	font-size: 1.375rem;
  }
  #wpp-fix svg {
	width: initial;
	display: block;
	height: 30px;
  width: 30px;
  }
  #wpp-fix svg path {
	fill: #fff;
  }
  #wpp-fix.shake .wpp-link::before {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	background: rgba(37, 211, 102, 0.6);
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 50%;
	z-index: -1;
	top: 0px;
	right: 0;
	-webkit-animation: pulse 2s infinite;
	-moz-animation: pulse 2s infinite;
	-o-animation: pulse 2s infinite;
	animation: pulse 2s infinite;
  }
  #wpp-fix.shake svg {
	-webkit-animation: 1s wiggle ease infinite;
	-moz-animation: 1s wiggle ease infinite;
	-o-animation: 1s wiggle ease infinite;
	animation: 1s wiggle ease infinite;
  }
  @media (max-width: 767px) {
	#wpp-fix {
	  bottom: 15px;
	}
	#wpp-fix svg {
	  height: 30px;
	}
	#wpp-fix .wpp-link {
	  padding: 10px;
	}
	#wpp-fix .wpp-link + .form-wpp form {
	  width: calc(300px - 40px);
	}
	#wpp-fix .wpp-link + .form-wpp form input[type=text],
  #wpp-fix .wpp-link + .form-wpp form input[type=email] {
	  font-size: 0.875rem;
	}
	#wpp-fix .wpp-link + .form-wpp form .btn button {
	  font-size: 0.875rem;
	}
  }
  @media (max-width: 395px) {
	#wpp-fix .wpp-link + .form-wpp {
	  min-width: 290px;
	}
	#wpp-fix .wpp-link + .form-wpp .head-wpp img {
	  width: 40px;
	}
  }
  @-webkit-keyframes wiggle {
	0% {
	  -webkit-transform: rotate(-3deg);
	  -moz-transform: rotate(-3deg);
	  -ms-transform: rotate(-3deg);
	  -o-transform: rotate(-3deg);
	  transform: rotate(-3deg);
	}
	20% {
	  -webkit-transform: rotate(20deg);
	  -moz-transform: rotate(20deg);
	  -ms-transform: rotate(20deg);
	  -o-transform: rotate(20deg);
	  transform: rotate(20deg);
	}
	40% {
	  -webkit-transform: rotate(-15deg);
	  -moz-transform: rotate(-15deg);
	  -ms-transform: rotate(-15deg);
	  -o-transform: rotate(-15deg);
	  transform: rotate(-15deg);
	}
	60% {
	  -webkit-transform: rotate(5deg);
	  -moz-transform: rotate(5deg);
	  -ms-transform: rotate(5deg);
	  -o-transform: rotate(5deg);
	  transform: rotate(5deg);
	}
	90% {
	  -webkit-transform: rotate(-1deg);
	  -moz-transform: rotate(-1deg);
	  -ms-transform: rotate(-1deg);
	  -o-transform: rotate(-1deg);
	  transform: rotate(-1deg);
	}
	100% {
	  -webkit-transform: rotate(0);
	  -moz-transform: rotate(0);
	  -ms-transform: rotate(0);
	  -o-transform: rotate(0);
	  transform: rotate(0);
	}
  }
  @-moz-keyframes wiggle {
	0% {
	  -webkit-transform: rotate(-3deg);
	  -moz-transform: rotate(-3deg);
	  -ms-transform: rotate(-3deg);
	  -o-transform: rotate(-3deg);
	  transform: rotate(-3deg);
	}
	20% {
	  -webkit-transform: rotate(20deg);
	  -moz-transform: rotate(20deg);
	  -ms-transform: rotate(20deg);
	  -o-transform: rotate(20deg);
	  transform: rotate(20deg);
	}
	40% {
	  -webkit-transform: rotate(-15deg);
	  -moz-transform: rotate(-15deg);
	  -ms-transform: rotate(-15deg);
	  -o-transform: rotate(-15deg);
	  transform: rotate(-15deg);
	}
	60% {
	  -webkit-transform: rotate(5deg);
	  -moz-transform: rotate(5deg);
	  -ms-transform: rotate(5deg);
	  -o-transform: rotate(5deg);
	  transform: rotate(5deg);
	}
	90% {
	  -webkit-transform: rotate(-1deg);
	  -moz-transform: rotate(-1deg);
	  -ms-transform: rotate(-1deg);
	  -o-transform: rotate(-1deg);
	  transform: rotate(-1deg);
	}
	100% {
	  -webkit-transform: rotate(0);
	  -moz-transform: rotate(0);
	  -ms-transform: rotate(0);
	  -o-transform: rotate(0);
	  transform: rotate(0);
	}
  }
  @-o-keyframes wiggle {
	0% {
	  -webkit-transform: rotate(-3deg);
	  -moz-transform: rotate(-3deg);
	  -ms-transform: rotate(-3deg);
	  -o-transform: rotate(-3deg);
	  transform: rotate(-3deg);
	}
	20% {
	  -webkit-transform: rotate(20deg);
	  -moz-transform: rotate(20deg);
	  -ms-transform: rotate(20deg);
	  -o-transform: rotate(20deg);
	  transform: rotate(20deg);
	}
	40% {
	  -webkit-transform: rotate(-15deg);
	  -moz-transform: rotate(-15deg);
	  -ms-transform: rotate(-15deg);
	  -o-transform: rotate(-15deg);
	  transform: rotate(-15deg);
	}
	60% {
	  -webkit-transform: rotate(5deg);
	  -moz-transform: rotate(5deg);
	  -ms-transform: rotate(5deg);
	  -o-transform: rotate(5deg);
	  transform: rotate(5deg);
	}
	90% {
	  -webkit-transform: rotate(-1deg);
	  -moz-transform: rotate(-1deg);
	  -ms-transform: rotate(-1deg);
	  -o-transform: rotate(-1deg);
	  transform: rotate(-1deg);
	}
	100% {
	  -webkit-transform: rotate(0);
	  -moz-transform: rotate(0);
	  -ms-transform: rotate(0);
	  -o-transform: rotate(0);
	  transform: rotate(0);
	}
  }
  @keyframes wiggle {
	0% {
	  -webkit-transform: rotate(-3deg);
	  -moz-transform: rotate(-3deg);
	  -ms-transform: rotate(-3deg);
	  -o-transform: rotate(-3deg);
	  transform: rotate(-3deg);
	}
	20% {
	  -webkit-transform: rotate(20deg);
	  -moz-transform: rotate(20deg);
	  -ms-transform: rotate(20deg);
	  -o-transform: rotate(20deg);
	  transform: rotate(20deg);
	}
	40% {
	  -webkit-transform: rotate(-15deg);
	  -moz-transform: rotate(-15deg);
	  -ms-transform: rotate(-15deg);
	  -o-transform: rotate(-15deg);
	  transform: rotate(-15deg);
	}
	60% {
	  -webkit-transform: rotate(5deg);
	  -moz-transform: rotate(5deg);
	  -ms-transform: rotate(5deg);
	  -o-transform: rotate(5deg);
	  transform: rotate(5deg);
	}
	90% {
	  -webkit-transform: rotate(-1deg);
	  -moz-transform: rotate(-1deg);
	  -ms-transform: rotate(-1deg);
	  -o-transform: rotate(-1deg);
	  transform: rotate(-1deg);
	}
	100% {
	  -webkit-transform: rotate(0);
	  -moz-transform: rotate(0);
	  -ms-transform: rotate(0);
	  -o-transform: rotate(0);
	  transform: rotate(0);
	}
  }
  @-webkit-keyframes pulse {
	0% {
	  -webkit-transform: scale(1);
	  -moz-transform: scale(1);
	  -ms-transform: scale(1);
	  -o-transform: scale(1);
	  transform: scale(1);
	}
	50% {
	  -webkit-transform: scale(1.6);
	  -moz-transform: scale(1.6);
	  -ms-transform: scale(1.6);
	  -o-transform: scale(1.6);
	  transform: scale(1.6);
	}
	100% {
	  -webkit-transform: scale(1.7);
	  -moz-transform: scale(1.7);
	  -ms-transform: scale(1.7);
	  -o-transform: scale(1.7);
	  transform: scale(1.7);
	  opacity: 0;
	}
  }
  @-moz-keyframes pulse {
	0% {
	  -webkit-transform: scale(1);
	  -moz-transform: scale(1);
	  -ms-transform: scale(1);
	  -o-transform: scale(1);
	  transform: scale(1);
	}
	50% {
	  -webkit-transform: scale(1.6);
	  -moz-transform: scale(1.6);
	  -ms-transform: scale(1.6);
	  -o-transform: scale(1.6);
	  transform: scale(1.6);
	}
	100% {
	  -webkit-transform: scale(1.7);
	  -moz-transform: scale(1.7);
	  -ms-transform: scale(1.7);
	  -o-transform: scale(1.7);
	  transform: scale(1.7);
	  opacity: 0;
	}
  }
  @-o-keyframes pulse {
	0% {
	  -webkit-transform: scale(1);
	  -moz-transform: scale(1);
	  -ms-transform: scale(1);
	  -o-transform: scale(1);
	  transform: scale(1);
	}
	50% {
	  -webkit-transform: scale(1.6);
	  -moz-transform: scale(1.6);
	  -ms-transform: scale(1.6);
	  -o-transform: scale(1.6);
	  transform: scale(1.6);
	}
	100% {
	  -webkit-transform: scale(1.7);
	  -moz-transform: scale(1.7);
	  -ms-transform: scale(1.7);
	  -o-transform: scale(1.7);
	  transform: scale(1.7);
	  opacity: 0;
	}
  }
  @keyframes pulse {
	0% {
	  -webkit-transform: scale(1);
	  -moz-transform: scale(1);
	  -ms-transform: scale(1);
	  -o-transform: scale(1);
	  transform: scale(1);
	}
	50% {
	  -webkit-transform: scale(1.6);
	  -moz-transform: scale(1.6);
	  -ms-transform: scale(1.6);
	  -o-transform: scale(1.6);
	  transform: scale(1.6);
	}
	100% {
	  -webkit-transform: scale(1.7);
	  -moz-transform: scale(1.7);
	  -ms-transform: scale(1.7);
	  -o-transform: scale(1.7);
	  transform: scale(1.7);
	  opacity: 0;
	}
  }
  
  .author {
	position: fixed;
	bottom: 0;
	z-index: 2;
	width: 100%;
	padding: 30px 15px 15px;
	background: rgba(0, 0, 0, 0);
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.54) 54%, black 100%);
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.54) 54%, black 100%);
	background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.54) 54%, black 100%);
	background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.54) 54%, black 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.54) 54%, black 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#000000", endColorstr="#000000", GradientType=0 );
  }
  .author a {
	font-size: 16px;
	display: table;
	margin: 0 auto;
	text-decoration: none;
	color: #fff;
	font-weight: 700;
  }
  .author a span {
	color: #F44336;
  }

  
  .message {
    text-align: center;
    color: #f7f7f8;
    font-size: 2rem;
    }
    
    #wpp-fix {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 99;
    /* Animations */
    }

    
.container, .container-projetos {
     margin: 0 auto !important; /* Centraliza o contêiner na página */
}

 .sobre-projetos h5{
font-size: 20px !important;
}
    /*BREAK POINTS*/

  @media (max-width: 480px) {
    .serv-projetos-sobre{
      margin-bottom: 20px !important;
    }

    .sobre-projetos h2, .sobre-projetos h5{
      margin-bottom: 4px !important;
    }

    .img-pj{
      top: 0px  !important;
      margin-bottom: 30px !important;
    }
    .vd-projeto{
       flex-direction: column;
       align-items: center;
       justify-content: center;
    }

    .foto-projeto2{
      flex-direction: column !important;
    }

    .foto-projeto2 img{
      width: 100% !important;
    }

    .svg-dp {
      top: -5%;
      left: 4%;
    }
  
    .sobre-projetos{
       flex-direction: column !important;
       gap: 0px !important;
    }
 
      /* Estilos para smartphones em modo retrato */
      .gallery{
        padding: 60px 0px !important;
      }
      .img-pj{
        top: -130px;
      }
      .sobre {
        top: 34%;
      }
      .header-projetos {
         height: 36vh;
        
    }
      .nv{
        padding: 0 30px;
      }
      .title-sb-projetos p{
        font-size: 30px !important;
        margin-top: 15px;
        line-height:30px;
      }

      .title-sb-projetos span{
        font-size: 16px !important;
      }

      .container, .container-projetos {
        padding: 60px 20px;
      }
    
      .tecnologias {
        margin-right: 5px;
        padding: 5px 4px;
    }
    
      .container-footer{
        width: 370px !important;
        padding: 30px 20px;
      }
  }
  .tec{
    padding:20px 0;
    display: flex;
    flex-wrap: nowrap;
  }

  @media (min-width: 481px) and (max-width: 767px) {
    .vd-projeto{
      flex-direction: column;
      align-items: center;
      justify-content: center;
   }
    #header-index{
      padding: 0 30px !important;
    }

    .tecnologias{
      margin-right: 10px;
      padding: 5px 10px;
    }
 

    .bloco-tecnologias h4 {
      margin-top: 15px !important;
    }

    .svg-dp{
      position: absolute !important;
      z-index: 1;
      top: -2%;
      left: 10%;
    }

    .title-sb{
      font-size: 3.4rem !important;
      font-weight: 28px !important;
    }
    
    .title-sb-projetos p{
      font-size: 33px !important;
      margin-top: 15px;
      line-height:30px;
    }
    /* Estilos para smartphones em modo paisagem */
    .sobre-projetos{
      flex-direction: column !important;
    }
    
    .gallery{
      padding: 30px 0px !important;
    }

    .container{
      width: 520px !important;
      padding: 60px 0;
    }

    .img-pj{
      top: -80px;
    }

    .container, .container-projetos {
      width: 520px !important;
      padding: 30px 0;
    }
   
    .nv {
      width: 520px !important;
    }

    .container-footer{
      width: 520px !important;
      padding: 30px 0;
    }
}

.gallery{
  padding: 80px 20px;
}


@media (min-width: 768px) and (max-width: 1024px) {
  .bloco-tecnologias h4 {
    margin-top: 15px !important;
  }
  #header-index{
    padding: 0 30px !important;
  }
  /* Estilos para tablets */
  .container {
    width: 620px !important;
    padding: 60px 0;
  }

  .container-projetos{
    width: 1224px !important;
    padding: 60px 0;
  }

  .nv {
    width: 620px !important;
  }

  .container-footer{
    width: 620px !important;
    padding: 60px 0;
  }
}

@media (min-width: 1025px) and (max-width: 1366px) {
  
  /* Estilos para laptops e desktops pequenos */
  .container {
    width: 820px !important;
    padding: 80px 0;
  }

  .container-projetos{
    width: 1224px !important;
    padding: 80px 0;
  }

  .nv {
    width: 820px !important;
  }

  .container-footer{
    width: 820px !important;
    padding: 80px 0;
  }
}

@media (min-width: 1367px) and (max-width: 1680px) {
  /* Estilos para laptops e desktops grandes */
  .container {
    width: 1024px !important;
    padding: 80px 0;
  }

  .container-projetos{
    width: 1224px !important;
    padding: 60px 0;
  }

  .nv {
    width: 1024px !important;
  }

  .container-footer{
    width: 1024px !important;
    padding: 80px 0;
  }

}

@media only screen and (min-width: 1681px) {
  /* Estilos para monitores maiores */
  .container, .nv, .container-projetos {
    width: 1200px !important;
  }
}

@media (min-width: 768px) {
  .nv{
    margin: 0 auto !important;
  }
}