@font-face {
  font-family: MATERIAL-ICONS;
  src: url('../fonts/MaterialIcons-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: #ffffffad;
  --black: black;
  --neutral-1: #1a1a1a;
  --yellow-bonive: #fffb99;
  --neutral-700: #101010;
  --font-family: Lexend, sans-serif;
  --size-1: 30vw;
  --neutral-300: #1a1a1a;
  --neutral-color-yellow: #494635;
  --soft-dark-brand-color: #63581a;
  --color: white;
  --pr: Lexend, sans-serif;
  --background-soft-color: #fffbef;
  --borde-yellow: #fff4a305;
  --color-2: #2f3d46;
  --standar-size-h-sho-project: 100px;
  --standar-size-w-show-project: 30%;
  --plus-size-w-show-project: 50%;
  --red-branding: #e03b3b;
  --black-blue: #05141f;
  --size-2: 60vw;
}

.w-layout-vflex {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.w-layout-hflex {
  flex-direction: row;
  align-items: flex-start;
  display: flex;
}

.w-embed-youtubevideo {
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/youtube-placeholder.2b05e7d68d.svg');
  background-position: 50%;
  background-size: cover;
  width: 100%;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.w-embed-youtubevideo:empty {
  min-height: 75px;
  padding-bottom: 56.25%;
}

body {
  color: #333;
  cursor: none;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.body {
  background-color: #050021;
  overflow: visible;
}

.body.hide-elements {
  cursor: auto;
  background-color: #fff;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  display: block;
  overflow: visible;
}

.body.hide-elements.black {
  background-color: #060606;
}

.m-background {
  z-index: 0;
  opacity: 1;
  background-image: linear-gradient(74deg, #030110, #050021 51%, #030110 89%);
  flex-flow: column;
  flex: none;
  place-content: space-between center;
  align-self: center;
  align-items: center;
  width: 100vw;
  height: auto;
  display: flex;
  position: absolute;
  inset: 0%;
}

.m-background._2 {
  background-image: linear-gradient(90deg, #04050c 10%, #11161f 51%, #04050c 89%);
  height: 100%;
  inset: 0%;
}

.m-background._2.contact-form {
  height: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  position: absolute;
}

.bluedark-bg {
  background-image: radial-gradient(circle, #0d161f, #0b0f16 66%);
  border-radius: 12px;
  flex: 0 auto;
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.m-gold-line {
  z-index: 5;
  border: 2px dotted #ffaf4d24;
  border-radius: 11px;
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 94.5%;
  height: 99%;
  display: flex;
  position: relative;
}

.m-gold-line._2 {
  border-style: solid;
  border-color: #fff4a305;
  order: 1;
  align-items: center;
  margin-top: 3%;
  padding: 2vh 3vw 5vh;
}

.m-black-blue {
  opacity: 1;
  background-color: #050020;
  background-image: linear-gradient(#040115, #050020);
  border-top: 2px solid #66ffff3d;
  border-bottom: 2px solid #66ffff30;
  border-radius: 14px;
  flex: none;
  order: -1;
  justify-content: center;
  align-items: center;
  width: 88%;
  height: 78%;
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  position: absolute;
  box-shadow: -26px 31px 12px -8px #000000d1;
}

.m-black-blue._2 {
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  inset: 0%;
}

.m-black-blue.terms {
  height: 97%;
}

.paragraph-information {
  opacity: .74;
  width: 50%;
  color: var(--white);
  text-align: right;
  flex: none;
  order: 1;
  margin-top: 3%;
  margin-right: auto;
  padding-left: 17%;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  font-size: 3vh;
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  display: flex;
  position: relative;
}

.paragraph-information.privacy {
  text-align: left;
  justify-content: flex-start;
  width: 100%;
  padding-left: 0%;
}

.navbar-principal {
  z-index: 20;
  width: 100vw;
  height: 70px;
  box-shadow: none;
  background-color: #0000;
  background-image: linear-gradient(to right, #050021, #050021 51%, #090039);
  border-bottom: 1.5px solid #ffbc005e;
  justify-content: flex-end;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
  overflow: visible;
  transform: translate(0%);
}

.nav-menu {
  flex: none;
  order: 1;
  margin-left: auto;
  display: flex;
}

.container {
  z-index: 2;
  flex-wrap: nowrap;
  flex: none;
  order: 1;
  justify-content: space-around;
  align-self: auto;
  align-items: center;
  width: 90%;
  height: 100%;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.container.retunre {
  background-color: #063535;
  border-top: 3px solid #f5d169;
  border-bottom: 3px solid #f6d46f;
  flex-direction: column;
  height: auto;
  margin-top: 40px;
  margin-bottom: 40px;
  padding-top: 5vh;
  padding-bottom: 5vh;
}

.icon-nav-bar {
  background-color: #e56a26;
  background-image: url('../images/Essendis-pet.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 40px;
  border: 1px #000;
  width: 50px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.icon-nav-bar.true {
  background-color: #b9b9b9;
  background-image: url('../images/Animation-true-loading-css.svg');
  background-size: 85%;
  border-style: none;
  border-radius: 4px;
  margin-left: 5px;
  margin-right: 5px;
  padding-top: 0;
  padding-bottom: 0;
  box-shadow: 0 4px 6px -13px #000;
}

.icon-nav-bar.compli {
  background-color: #1a7955;
  background-image: url('../images/detail-4-M.svg');
  background-size: 70%;
  border-radius: 4px;
  margin-left: 5px;
  margin-right: 5px;
  box-shadow: 0 8px 8px -11px #000;
}

.icon-nav-bar.special {
  color: #fff4a3;
  background-color: #01243b;
  background-image: none;
  border: 1px #000;
  width: 70px;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 25px;
}

.icon-nav-bar.web {
  color: #2c323b;
  text-transform: uppercase;
  background-color: #01243b00;
  background-image: none;
  border-style: none;
  border-color: #000;
  border-radius: 0;
  flex: none;
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 170px;
  margin-left: 5px;
  margin-right: 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  box-shadow: 0 5px 10px -12px #000;
}

.icon-nav-bar.essendis {
  background-color: #ac6036;
  border-style: none;
  border-radius: 4px;
  margin-left: 5px;
  margin-right: 5px;
  box-shadow: 0 6px 6px -5px #000;
}

.icon-nav-bar.personal {
  background-color: #1a7955;
  background-image: url('../images/1-Base-mucha-click-M.svg');
  background-size: 100%;
  border-radius: 4px;
  margin-left: 5px;
  margin-right: 5px;
  box-shadow: 0 8px 8px -11px #000;
}

.paragraph {
  opacity: 1;
  width: auto;
  color: var(--white);
  text-align: left;
  letter-spacing: 1px;
  white-space: normal;
  align-self: auto;
  margin-top: 1%;
  margin-bottom: 0;
  padding-left: 10px;
  padding-right: 10px;
  font-family: Poppins;
  font-size: 2.5vh;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  position: relative;
}

.paragraph.central {
  text-align: center;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.heading {
  color: #f4ad14;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: #051f31;
  border-bottom: 1px #f4ad147d;
  border-radius: 6px;
  justify-content: center;
  width: auto;
  margin-top: 40px;
  margin-bottom: 10px;
  padding: 1vh 3vh;
  font-family: Oswald, sans-serif;
  font-size: 9vh;
  font-style: normal;
  font-weight: 400;
  display: flex;
  position: relative;
}

.heading.over {
  color: #ffe2a3;
  align-items: center;
  max-width: 50vw;
  height: 100px;
  margin: 19px auto 10px;
  padding-top: 1vh;
  font-size: 6vh;
}

.heading.portfolio {
  color: #fff4a3;
  flex: none;
  width: 200px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2vh;
  padding-bottom: 2vh;
  font-family: Oswald, sans-serif;
  font-size: 4vh;
  left: auto;
}

.utility-page-wrap {
  background-color: #08223f;
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  background-color: #ffe5c8;
  flex-direction: column;
  width: 260px;
  padding: 20px;
  display: flex;
  box-shadow: 0 8px 50px #000000b3;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.div-protfolio {
  background-color: #ffaf4d;
  border-radius: 5px;
  order: -1;
  align-self: center;
  margin-bottom: 5px;
  margin-right: 10px;
  position: relative;
}

.section {
  background-color: #000;
  flex-direction: row;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  padding-top: 10vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.section.header-true {
  background-color: #fffdfd;
}

.section.header-true.true {
  flex-direction: column;
}

.section.privacy {
  height: 100vh;
}

.section.privacy.long {
  flex-direction: column;
  justify-content: flex-start;
  height: auto;
  padding-top: 20vh;
  padding-bottom: 20vh;
}

.div-true-presentation {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.intro-true-ani {
  background-image: url('../images/Animation-true-loading-css.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 50%;
  height: 50%;
  margin-top: 0;
  display: flex;
}

.heading-true {
  text-align: center;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
}

.line-orange {
  color: #828282;
  margin-top: 12px;
  font-family: Open Sans, sans-serif;
  font-size: 20px;
}

.color-line {
  background-color: #e06020;
  width: 30%;
  height: 8px;
  margin: 5px 10px;
}

.color-line.green {
  background-color: #509236;
  margin-top: 5px;
  margin-bottom: 5px;
}

.color-line.blue {
  background-color: #005991;
}

.color-line.yellow {
  background-color: #fcb034;
  width: 30%;
  height: 8px;
}

.info-intro {
  flex-direction: column;
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 50%;
  margin-bottom: 51px;
  display: flex;
}

.section-sample-true {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: relative;
}

.sample-true {
  background-image: url('../images/9-Prefer-first-leads-second-version-M.svg');
  background-position: 50% 80%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: relative;
}

.tex-true {
  color: #aeaeae;
  margin-top: 19px;
  font-family: Lato, sans-serif;
}

.sample-true-copy {
  background-image: url('../images/8-Practiced-smart-M.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 80% 80%;
  width: 100%;
  height: 100%;
  position: relative;
}

.sample-true-copy._2 {
  background-image: url('../images/7-have-haha-moment-MIx-M.svg');
}

.sample-true-copy._2-copy {
  background-image: url('../images/3-Lets-talk-about-your-content-M.svg');
  background-size: 70% 70%;
}

.sample-true-copy._2-copy-copy {
  background-image: url('../images/4-Lets-talk-digital-digital-M.svg');
  background-size: 70% 70%;
}

.sample-true-copy._2-copy-copy-copy {
  background-image: url('../images/10-what-we-do-M.svg');
  background-size: 70% 70%;
}

.sample-true-copy._2-copy-copy-copy-copy {
  background-image: url('../images/5-Lets-start-your-succes-story-M.svg');
  background-size: 80% 80%;
}

.sample-true-copy._5 {
  background-image: url('../images/1-Get-your-digital-tips-delivered-M.svg');
  background-size: 80% 80%;
}

.sample-true-copy._6 {
  background-image: url('../images/12-lets-start-this-one-out-M.svg');
  background-size: 80% 80%;
}

.sample-true-copy._7 {
  background-image: url('../images/11-What-its-Your-ditgital-M.svg');
  background-size: 80% 80%;
}

.sample-true-copy._8 {
  background-image: url('../images/6-what-to-join-the-true-team-M.svg');
  background-size: 80% 80%;
}

.special {
  color: #fff;
  background-color: #548ac0;
  border-right: 1px #f1eeee8c;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  height: 50px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 8px 22px 0 20px;
  font-family: Great Vibes, cursive;
  font-size: 30px;
  display: flex;
  box-shadow: 0 4px 11px -5px #000000b8;
}

.div-color-true {
  justify-content: center;
  width: 60%;
  height: 50%;
  display: flex;
}

.intro-compli-ai {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.info-intro-compli-ai {
  flex: none;
  width: 60vw;
  height: 70vh;
  margin-top: 0;
}

.principal-animation-compli-ai {
  background-image: url('../images/detail-4-M.svg');
  background-position: 50%;
  background-size: 100% 100%;
  width: 100%;
  height: 60%;
}

.heading-compli-ai {
  text-align: center;
  font-family: Montserrat, sans-serif;
}

.text-intro-compli-ai {
  text-align: center;
  font-family: PT Sans, sans-serif;
  font-size: 20px;
  line-height: 1;
}

.bold-text {
  color: #097877;
  text-transform: none;
  font-family: Montserrat, sans-serif;
  font-style: normal;
  font-weight: 700;
}

.sample-compli {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.info-image-sample-compli {
  flex-direction: column;
  align-items: center;
  width: 90vw;
  height: 80vh;
  display: flex;
}

.image-sample-compli-ai {
  background-image: url('../images/1-Principal-panel-arm-M.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 80%;
}

.image-sample-compli-ai._2 {
  background-image: url('../images/2-You-dont-need-M.svg');
  background-position: 60%;
  background-size: contain;
}

.image-sample-compli-ai._3 {
  background-image: url('../images/Hand-phone-M.svg');
  background-position: 40%;
  background-size: contain;
}

.image-sample-compli-ai._4 {
  background-image: url('../images/assembly-computers-M.svg');
  background-position: 40%;
  background-size: contain;
}

.paragraph-2 {
  text-align: right;
  border-top: 1px solid #00dbd9;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 50px;
  margin-right: 0;
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  font-weight: 700;
  display: flex;
}

.intro-special-animation {
  background-color: #000e17;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding-top: 10vh;
  display: flex;
  position: relative;
}

.info-intro-special-animation {
  background-color: var(--black);
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
}

.special-animation {
  background-color: var(--black);
  background-image: url('../images/Hand-Final-M.svg');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: static;
}

.headin-special-aniamtion {
  color: #ffe195;
  text-align: left;
  border-top: 1px #afafaf30;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 150px;
  margin-top: 50px;
  margin-bottom: 0;
  margin-right: 0;
  padding-left: 20px;
  padding-right: 40px;
  font-family: Oswald, sans-serif;
  font-size: 4vw;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  display: flex;
}

.paragraph-3 {
  color: #cbcbcb;
  text-align: left;
  width: 60%;
  margin-right: 0;
  padding-left: 40px;
  padding-right: 0;
  font-family: Poppins;
  font-size: 3vh;
  font-style: normal;
  line-height: 1;
}

.sample-special-animation {
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100vw;
  height: 120vh;
  display: flex;
  position: relative;
}

.sample-special-animation.f {
  display: flex;
}

.special-animation-sample {
  background-image: url('../images/LAI-base-1500.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.special-animation-sample._3 {
  background-image: url('../images/TLS-bank-animation.svg');
  background-position: 50%;
  background-size: 100%;
  position: relative;
}

.special-animation-sample._4 {
  background-color: var(--black);
  background-image: url('../images/Final-eagle-for-webflow.svg');
  background-size: 100% 100%;
}

.special-animation-sample._5 {
  background-color: var(--white);
  background-image: url('../images/Franchimp-M.svg');
  background-size: 100% 100%;
  position: relative;
}

.special-animation-sample._6 {
  background-color: var(--white);
  background-image: url('../images/The-house-ready-animation-M.svg');
  background-size: 100% 100%;
}

.special-animation-sample._7 {
  background-color: var(--white);
  background-image: url('../images/Music-animation-base-R.svg');
  background-size: contain;
}

.special-animation-sample._8 {
  background-color: #08080800;
  background-image: url('../images/Community-solar-Final-animation-C1.svg');
  background-size: contain;
  height: auto;
}

.information-special-animation {
  z-index: 2;
  text-align: center;
  justify-content: center;
  width: 50%;
  height: 15%;
  display: flex;
  position: relative;
  inset: auto 0% 0%;
}

.info-text-intro-speciala-nimation {
  flex-direction: column;
  justify-content: flex-end;
  width: 60%;
  margin-top: 118px;
  padding-left: 60px;
  padding-right: 0;
  display: flex;
  position: absolute;
  inset: 0% auto auto 0%;
}

.tittle-special-animation {
  color: #fff;
  text-align: center;
  height: 50px;
  margin-top: 0;
  font-family: Oswald, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  position: relative;
}

.tittle-special-animation._2 {
  color: #541515;
  text-transform: uppercase;
  border-top: 1px #0000001c;
  width: 70%;
  padding-top: 10px;
  font-family: Oswald, sans-serif;
  font-style: normal;
}

.tittle-special-animation._3 {
  color: #757575;
  align-items: center;
  font-family: Oswald, sans-serif;
  font-style: normal;
  font-weight: 700;
  display: flex;
}

.tittle-special-animation._4 {
  color: #757575;
  align-items: center;
  font-family: Oswald, sans-serif;
  font-style: normal;
  font-weight: 400;
  display: flex;
  position: relative;
  overflow: visible;
}

.body-3 {
  background-color: #fff;
}

.paragraph-cta-free-brand {
  color: #ffdc75;
  text-align: center;
  letter-spacing: 2px;
  background-color: #691414;
  flex: none;
  order: -1;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  padding: 10px 10px 5px;
  font-family: Cinzel Decorative;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

.paragraph-cta-free-brand.b {
  color: #741d1d;
  background-color: #69141400;
  margin-bottom: 17px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 30px;
}

.paragraph-cta-free-brand.b2 {
  text-align: center;
  background-color: #741d1d;
  flex: none;
  width: 100%;
  height: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 25px;
  font-weight: 700;
  position: relative;
  inset: 0%;
}

.div-cta-free-sketch {
  z-index: 3;
  perspective: 314px;
  transform-origin: 50% 0;
  background-color: #77c1d8;
  background-image: linear-gradient(#fff49f, #fff 44%);
  border: 1px #ffdc754d;
  border-top: 7px solid #741d1d;
  border-bottom-style: solid;
  flex-direction: column;
  flex: none;
  order: 1;
  justify-content: flex-start;
  align-items: center;
  width: 600px;
  height: auto;
  margin-top: -5px;
  padding: 15px 0;
  display: flex;
  position: relative;
  transform: translate(0)perspective(431px)perspective(882px);
  box-shadow: 0 0 200px 6px #ffffffb3;
}

.div-cta-free-sketch.middle {
  z-index: 15;
  height: 200px;
  margin-top: -39px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 15px;
  padding-left: 0;
  padding-right: 0;
  box-shadow: 0 0 100px -12px #ffffffb3;
}

.button-cta-free-sketch {
  color: #500d0d;
  text-align: center;
  letter-spacing: 1px;
  text-transform: none;
  width: 300px;
  height: 60px;
  transform-style: preserve-3d;
  background-color: #ffdc75;
  background-image: linear-gradient(to top, #b46b1d, #ffdc75 64%);
  flex: none;
  order: 1;
  align-self: auto;
  margin-top: 22px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  font-family: Fondamento;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  display: block;
  position: static;
  top: -2px;
  left: 15%;
  right: 0%;
  transform: none;
  box-shadow: 0 20px 20px -3px #0000006b;
}

.div-cta-free-limite-calendar {
  z-index: 3;
  perspective: 314px;
  transform-origin: 50% 0;
  background-color: #77c1d8;
  background-image: linear-gradient(355deg, #fff49f, #fff);
  border: 1px #ffdc754d;
  border-top: 7px solid #741d1d;
  border-bottom-style: solid;
  flex-direction: column;
  flex: none;
  order: 1;
  justify-content: flex-start;
  align-items: center;
  width: 600px;
  height: auto;
  margin-top: 662px;
  margin-bottom: 0;
  padding: 15px 0;
  display: flex;
  position: relative;
  transform: translate(0)perspective(431px)perspective(882px);
  box-shadow: 9px 49px 20px -20px #00000021, 0 0 200px 40px #ffffff82;
}

.div-cta-free-limite-calendar._2 {
  height: 300px;
  margin-top: -41px;
}

.paragraph-cta-limited-calendar {
  color: #ffdc75;
  text-align: center;
  letter-spacing: 2px;
  background-color: #691414;
  flex: none;
  order: -1;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  padding: 10px 10px 2px;
  font-family: Cinzel Decorative;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
}

.paragraph-cta-limited-calendar.b {
  color: #741d1d;
  background-color: #69141400;
  margin-bottom: 17px;
  padding-left: 20px;
  padding-right: 20px;
  font-family: Playfair Display SC;
  font-size: 30px;
  font-weight: 400;
}

.paragraph-cta-limited-calendar-copy {
  color: #ffdc75;
  text-align: center;
  letter-spacing: 2px;
  background-color: #691414;
  flex: none;
  order: -1;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  padding: 10px 10px 2px;
  font-family: Cinzel Decorative;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
}

.paragraph-cta-limited-calendar-copy.b2 {
  color: #741d1d;
  text-align: center;
  background-color: #ffdc75;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 25px;
  font-weight: 700;
  display: flex;
  position: relative;
  inset: 0% 0% 0% 0;
  box-shadow: 0 7px 8px #741d1d4d;
}

.button-cta-limited-calendar {
  color: #500d0d;
  text-align: center;
  letter-spacing: 1px;
  text-transform: none;
  transform-style: preserve-3d;
  background-color: #ffdc75;
  background-image: linear-gradient(to top, #b46b1d, #ffdc75 64%);
  flex: none;
  order: 1;
  padding: 20px;
  font-family: Cinzel Decorative;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  position: relative;
  top: 43px;
  left: auto;
  transform: none;
  box-shadow: 0 20px 20px -3px #0000006b;
}

.info-buttom-web-page {
  z-index: 3;
  background-color: #f1aa5800;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 50px;
  display: none;
  position: relative;
}

.diamon-navbar {
  background-image: url('../images/rustic-diamond-M.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  flex: none;
  width: 50px;
  height: 50px;
}

.div-block {
  margin-top: 10px;
  position: relative;
}

.buttom-webdesigner {
  z-index: 5;
  background-color: #3898ec00;
  position: absolute;
  inset: 0%;
}

.section-header-personal {
  background-color: #f8ccb3;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding-top: 0;
  display: flex;
}

.info-header-personal-animations {
  flex: none;
  justify-content: space-around;
  align-items: center;
  width: 90%;
  height: 60%;
  display: flex;
}

.text-header-personal-animation {
  background-color: #23403b;
  border-bottom: 1px solid #ffbc005e;
  border-radius: 7px;
  flex: none;
  width: 50%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 10px;
  box-shadow: 0 18px 20px -9px #000000a1;
}

.headign-personal-animations {
  color: #fff4a3;
  border-bottom: 1px solid #fff4a33d;
  margin-bottom: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  font-family: Merienda;
  font-size: 45px;
  font-weight: 400;
  line-height: 1;
}

.text-heading-personal-animation {
  color: #fff4a3;
  letter-spacing: 1px;
  width: 60%;
  margin-left: 20px;
  font-family: Montserrat, sans-serif;
  font-size: 3vh;
  font-weight: 500;
  line-height: 1;
}

.base-personal-animation {
  background-image: url('../images/1-Base-mucha-click-M.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 14px;
  flex: none;
  width: 400px;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 11px 13px -8px #000;
}

.base-personal-animation._2 {
  background-color: #050021;
  background-image: url('../images/the-face-M.svg');
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 100px;
  display: flex;
}

.base-personal-animation._3 {
  background-color: #050021;
  background-image: url('../images/big-diamond-M.svg');
  background-size: 1200px;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 100px;
  display: flex;
}

.base-personal-animation._4 {
  background-color: #050021;
  background-image: url('../images/Day-10-doom-M.svg');
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 100px;
  display: flex;
}

.base-personal-animation._5 {
  background-color: #050021;
  background-image: url('../images/DAy-11-Monarchy-M.svg');
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 100px;
  display: flex;
}

.base-personal-animation._6 {
  background-color: #050021;
  background-image: url('../images/Sample-archi-M.svg');
  background-position: 40%;
  background-size: cover;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 100px;
  display: flex;
}

.base-personal-animation._7 {
  background-color: #050021;
  background-image: url('../images/DIa-2-Klimt-M.svg');
  background-position: 40%;
  background-size: contain;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 100px;
  display: flex;
}

.base-personal-animation._8 {
  background-color: #050021;
  background-image: url('../images/Dia-5-cinetismo-M.svg');
  background-position: 40%;
  background-size: contain;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 100px;
  display: flex;
}

.base-personal-animation._9 {
  background-color: #050021;
  background-image: url('../images/Dia-8-Bauhaus-M.svg');
  background-position: 40%;
  background-size: contain;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 100px;
  display: flex;
}

.section-personal-animations {
  width: 100vw;
  height: auto;
  padding-top: 100px;
  padding-bottom: 100px;
}

.description-personal-animation {
  color: #050021;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
  margin-left: auto;
  margin-right: auto;
  font-family: Oswald, sans-serif;
  font-size: 4vh;
  font-weight: 400;
  position: relative;
  bottom: -61px;
}

.animation-portfolio {
  background-image: url('../images/header-ready-simple-M.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 800px;
  height: 500px;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: 0%;
}

.animation-portfolio._2 {
  background-image: url('../images/Header-Moretahn-animation-M.svg');
  flex: none;
  margin-top: 0;
  position: relative;
}

.animation-portfolio._3 {
  background-image: url('../images/help-user-make-desicion-F-w.svg');
  flex: none;
  margin-top: 0;
  position: relative;
}

.animation-portfolio._4 {
  background-image: url('../images/requests-a-quote-F.svg');
  flex: none;
  margin-top: 0;
  position: relative;
}

.animation-portfolio._5 {
  background-image: url('../images/Blog-header-animation-F.svg');
  flex: none;
  margin-top: 0;
  position: relative;
}

.animation-portfolio._6 {
  background-image: url('../images/converted_sending-payslips-2-F-W.svg');
  flex: none;
  margin-top: 0;
  position: relative;
}

.animation-portfolio._7 {
  background-image: url('../images/submitting-presonal-tax-F-W.svg');
  flex: none;
  margin-top: 0;
  position: relative;
}

.animation-portfolio._8 {
  background-image: url('../images/Help-employees-F-W.svg');
  flex: none;
  margin-top: 0;
  position: relative;
}

.animation-portfolio.luasis {
  background-image: url('../images/Luasis-header-animation-F.svg');
  background-position: 50% 100%;
  background-size: cover;
  flex: none;
  width: 100vw;
  margin-top: auto;
}

.animation-portfolio.luasis-animation {
  background-image: url('../images/Header-Moretahn-animation-M.svg');
  flex: none;
  margin-top: 0;
  position: relative;
}

.animation-portfolio.luasis-animation._1 {
  background-image: url('../images/Luasis-book-F.svg');
  background-size: 70% 70%;
}

.animation-portfolio.luasis-animation._2 {
  background-image: url('../images/Luasis-shoping-F.svg');
  background-size: 60% 60%;
}

.animation-portfolio.luasis-animation._3 {
  background-image: url('../images/LUASIS-listen-music-F.svg');
  background-size: 60% 60%;
}

.animation-portfolio.luasis-animation._4 {
  background-image: url('../images/Luasis-playng-F.svg');
  background-size: 60% 60%;
}

.animation-portfolio.luasis-animation._5 {
  background-image: url('../images/Lulu-Merch-F.svg');
  background-size: 60% 60%;
}

.animation-portfolio.luasis-animation._6 {
  background-image: url('../images/Road-map-LULU-F-3.svg');
  background-size: 80% 80%;
}

.animation-portfolio.luasis-animation._7 {
  background-image: url('../images/Tv-animation-F.svg');
  background-size: 80% 80%;
}

.animation-portfolio.luasis-animation._8 {
  background-image: url('../images/logo-for-animation-Luasis-F.svg');
  background-size: 80% 80%;
}

.animation-portfolio.luasis-animation._9 {
  background-image: url('../images/Icon-talking-people-F.svg');
  background-size: 80% 80%;
  width: 100px;
  height: 100px;
}

.animation-portfolio.luasis-animation._10 {
  background-image: url('../images/5-tools-F.svg');
  background-size: 80% 80%;
  width: 100px;
  height: 100px;
}

.animation-portfolio.luasis-animation._11 {
  background-image: url('../images/Icon-4--graduate-F.svg');
  background-size: 80% 80%;
  width: 100px;
  height: 100px;
}

.animation-portfolio.luasis-animation._12 {
  background-image: url('../images/Paper-luasis-F2.svg');
  background-size: 80% 80%;
  width: 100px;
  height: 100px;
}

.animation-portfolio.luasis-animation._13 {
  background-image: url('../images/planet-1-left.svg');
  background-size: 80% 80%;
  width: 100px;
  height: 100px;
}

.image-2 {
  flex: none;
  align-self: center;
}

.heading-2 {
  font-family: Cinzel Decorative;
}

.body-4 {
  object-fit: fill;
  background-color: #0d323f;
  overflow: auto;
}

.layout {
  flex-direction: column;
  flex: none;
  order: 1;
  justify-content: center;
  align-items: center;
  width: 45%;
  height: 40%;
  margin-top: 99px;
  margin-left: 0;
  margin-right: 0;
  padding: 10px;
  display: flex;
  position: relative;
  top: 26px;
}

.layout.heading {
  z-index: 2;
  background-color: #051f3100;
  order: -1;
  align-self: center;
  align-items: flex-start;
  width: 40%;
  height: 40%;
  margin-top: 0;
  top: 0;
}

.layout.heading.image {
  height: 70%;
}

.house-buttom {
  z-index: 15;
  color: #fff7b6;
  letter-spacing: 3px;
  text-transform: uppercase;
  background-color: #ffaf4d;
  background-image: url('../images/Home_free_icon.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px #000;
  border-radius: 5px;
  flex: none;
  order: 1;
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 60px;
  height: 30px;
  margin: auto auto auto 20px;
  padding: 10px 15px 12px;
  font-family: Varela, sans-serif;
  font-weight: 400;
  display: flex;
  position: relative;
  inset: 0 0 0% 0%;
  box-shadow: -3px 6px 6px -4px #000;
}

.panel-returne {
  flex-direction: column;
  flex: none;
  justify-content: center;
  width: 80%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.heading-go-back {
  color: #02000ab3;
  text-align: center;
  letter-spacing: 2px;
  text-transform: none;
  background-color: #fce4b7;
  border: 5px solid #ffce53;
  border-radius: 6px;
  justify-content: center;
  width: auto;
  margin: 13px auto 23px;
  padding: 2vh;
  font-family: Poppins;
  font-size: 5vh;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  display: flex;
  position: relative;
}

.returne-buttom {
  color: #fff;
  text-transform: uppercase;
  background-image: none;
  border-radius: 4px;
  margin-left: auto;
  margin-right: auto;
  font-family: Oswald, sans-serif;
  font-size: 3vh;
  box-shadow: 0 7px 20px #00000087;
}

.animation-end-panel {
  filter: sepia();
  background-image: url('../images/assembly-computers-M.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  flex: none;
  width: 300px;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
}

.contact-form {
  width: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
  overflow: hidden;
}

.contact-form-grid {
  flex-direction: column;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  margin-top: 40px;
  display: flex;
}

.container-7 {
  z-index: 2;
  position: relative;
}

.form-block {
  clear: right;
  width: 50%;
  margin-left: 0;
  margin-right: auto;
}

.info-contact-form {
  clear: left;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.material-contact-form {
  flex-direction: row;
  justify-content: center;
  display: flex;
}

.animation-to-form {
  filter: sepia(51%);
  background-image: url('../images/brushes-gold-M.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  flex: none;
  width: 50vh;
  height: 50vh;
  margin-left: auto;
}

.heading-form {
  color: #fff4a3;
  text-align: center;
  font-family: Oswald, sans-serif;
  font-size: 5vh;
  font-weight: 400;
  line-height: 1.2;
}

.field-label-3 {
  opacity: .86;
  color: #fff;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
}

.field-label-4 {
  opacity: .91;
  color: #fff;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
}

.field-label-5 {
  opacity: 1;
  color: #fffcfc;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
}

.fiel-text {
  opacity: 1;
  color: #303030;
  background-color: #fff4a3;
  border-radius: 7px;
}

.fiel-text::placeholder {
  color: #383737;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  font-weight: 700;
}

.submit-button {
  text-transform: uppercase;
  background-color: #1d8f8f00;
  border-radius: 6px;
  font-family: Oswald, sans-serif;
  font-size: 20px;
  position: absolute;
  box-shadow: 4px 4px 5px #000;
}

.animation-email {
  background-image: url('../images/well-done-animation.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100vh;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  left: -20vh;
}

.success-message {
  background-color: #ddd0;
  position: relative;
}

.thank-you-men {
  color: #fff4a3;
  text-align: center;
  text-transform: none;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  font-family: Limelight;
  font-size: 3vh;
  position: static;
}

.error-message-2 {
  background-color: #f13d3d;
}

.div-block-3 {
  color: var(--white);
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
}

.text-fiel-email {
  opacity: 1;
  color: #303030;
  background-color: #fff4a3;
  border-radius: 7px;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
}

.text-fiel-email::placeholder {
  color: #303030;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  font-weight: 700;
}

.textarea-info {
  opacity: 1;
  background-color: #fff4a3;
  border-radius: 7px;
}

.textarea-info::placeholder {
  color: #303030;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  font-weight: 700;
}

.footer {
  background-color: var(--neutral-1);
  text-align: center;
  align-items: flex-start;
  width: 100%;
  padding-top: 12vh;
  padding-bottom: 15vh;
  position: relative;
  overflow: hidden;
}

.footer-flex-container {
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 70%;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.footer-heading {
  color: #fff4a3;
  margin-top: 0;
  margin-bottom: 20px;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.footer-link {
  color: #fff4a352;
  margin-bottom: 10px;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  text-decoration: none;
  display: block;
}

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

.container-8 {
  z-index: 2;
  position: relative;
}

.heading-tittle-terms {
  color: #b6fffd;
  text-align: center;
  text-transform: none;
  flex: none;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 3vh;
  margin-left: 0%;
  font-family: Limelight;
  font-size: 35px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  display: flex;
}

.bold-text-2 {
  color: #fff4b6;
  font-weight: 400;
}

.bold-text-3 {
  flex: none;
}

.bold-text-3.privacy {
  text-align: left;
}

.image-man-desk {
  filter: sepia(62%);
  transform-style: preserve-3d;
  background-image: url('../images/image-6-painter-pc-M-no-info.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  flex: none;
  display: flex;
  position: absolute;
  inset: 0%;
  transform: rotateX(0)rotateY(180deg)rotateZ(0);
}

.paragraph-privacy {
  z-index: 4;
  color: #a0a0a0;
  text-align: center;
  flex: none;
  width: auto;
  height: auto;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  font-size: 2.5vh;
  font-weight: 400;
  position: relative;
}

.info-terms-m {
  width: 70%;
  margin-top: 5vh;
  margin-bottom: 5vh;
}

.paragraphc-term {
  z-index: 2;
  display: flex;
  position: relative;
}

.bold-text-4 {
  color: #dddcdc;
  margin-left: auto;
  margin-right: auto;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  font-size: 3vh;
  position: relative;
}

.heading-terms {
  z-index: 2;
  position: relative;
}

.bold-text-5 {
  color: #fff4a3;
  text-align: center;
  justify-content: center;
  font-family: Limelight;
  font-size: 5vh;
  font-weight: 400;
  line-height: 1;
  display: flex;
}

.bold-text-6 {
  color: #ebe7e7;
}

.italic-text {
  color: #cecece;
}

.italic-text-2 {
  color: #ddd;
  font-weight: 700;
}

.italic-text-3 {
  color: #dadada;
}

.italic-text-4 {
  text-align: center;
  justify-content: center;
  font-size: 2.5vh;
  display: flex;
}

.logo-bonive {
  background-image: url('../images/Logo-B-trival-Bonive.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  width: 80px;
  height: 15%;
  margin-left: 0;
  margin-right: auto;
}

.bonive-text {
  color: #fffdd4;
  text-align: left;
  letter-spacing: 2px;
  flex: none;
  margin-left: 0;
  margin-right: 0;
  font-family: Marcellus SC, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  position: relative;
  inset: auto 0% 0% auto;
}

.bonive-text.little-tittle {
  font-size: 16px;
}

.second-tex-bonive-portfolio {
  color: #a8a6a6;
  text-align: left;
  letter-spacing: 2px;
  flex: none;
  margin-left: 35px;
  margin-right: auto;
  font-family: Montserrat, sans-serif;
  font-size: 10px;
  font-weight: 200;
  line-height: 1;
  position: relative;
  inset: auto 0% 0% auto;
}

.second-tex-bonive-portfolio.bigger {
  margin-left: 0;
  font-size: 14px;
  font-weight: 400;
}

.header-portafolio {
  text-align: center;
  border-radius: 0;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.div-box-portfolio {
  width: 80%;
  height: 90%;
  margin-left: auto;
  margin-right: auto;
}

.div-box-portfolio.header {
  flex-direction: column;
  flex: none;
  align-items: center;
  width: 100%;
  height: 80%;
  margin-top: 50px;
  display: flex;
}

.section-portfolio {
  text-align: center;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.link-3 {
  color: #ffaf4d;
  text-transform: none;
  font-family: Montserrat, sans-serif;
  font-size: 25px;
  text-decoration: none;
}

.body-6 {
  background-color: #000;
}

.grain-overlay {
  z-index: 20;
  opacity: .13;
  filter: blur(4px);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
  mix-blend-mode: color-dodge;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  background-color: #00f2ff;
  background-image: url('../images/Grain.gif');
  background-position: 50%;
  background-repeat: repeat;
  background-size: auto;
  display: block;
  position: fixed;
  inset: 0%;
  transform: none;
}

.section-2 {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.section-2.view-elements {
  z-index: 1;
  justify-content: center;
  position: static;
  overflow: hidden;
}

.section-2.view-elements.black {
  background-color: #041921;
  border-top: 2px solid #fffdd645;
}

.section-2.view-elements.specific-vh-size {
  z-index: 4;
  background-image: linear-gradient(#02050675, #0d323f00 7% 30%);
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 300vh;
  display: block;
  position: relative;
  overflow: visible;
}

.section-2.black {
  background-color: #092631;
  padding-top: 2vh;
}

.section-2.top-separation {
  margin-top: 13vh;
  margin-bottom: 0;
  padding-bottom: 10vh;
}

.section-2.top-separation.black {
  z-index: 2;
  margin-top: 0;
  padding-top: 10vh;
}

.section-2.top-separation.black.shadow {
  box-shadow: 0 2px 14px 20px #0003;
}

.section-2.top-separation.black.shadow.top-line {
  z-index: 2;
  border-top: 4px solid #fffb990d;
}

.section-2.dark {
  background-color: #131e2b;
}

.section-2.dark.bottom-line {
  z-index: 1;
  background-color: #131e2b;
  border-bottom: 1px #feebbe30;
  padding-bottom: 10vh;
  box-shadow: 0 -11px 0 18px #0b1724, 0 0 20px 20px #0000002e;
}

.section-2.dark.bottom-line.over {
  z-index: auto;
  position: relative;
}

.section-2.topseparation {
  padding-top: 10vh;
  padding-bottom: 10vh;
}

.section-2.white {
  background-color: #feebbe;
  border: 5px solid #fccd57;
  border-style: solid none;
  padding-top: 5vh;
  padding-bottom: 5vh;
  overflow: visible;
}

.section-2.white.shadow {
  z-index: 1;
  display: flex;
  position: static;
  box-shadow: 0 4px 20px 5px #0003;
}

.section-2.no-separation.no-appear {
  display: none;
}

.section-2.bottum-separation {
  padding-bottom: 12vh;
}

.section-2.full-wigh {
  padding-top: 5vh;
  padding-bottom: 5vh;
  overflow: visible;
}

.text-button {
  color: #0e3442;
  text-align: center;
  letter-spacing: -.1rem;
  text-transform: none;
  overflow-wrap: normal;
  font-family: Saira;
  font-size: 4vh;
  font-weight: 400;
  line-height: 1.2;
}

.h1 {
  color: #fffb99;
  text-align: left;
  letter-spacing: -5px;
  flex: none;
  width: 100%;
  margin-top: 10px;
  font-family: Krona One, sans-serif;
  font-size: 9vh;
  font-weight: 400;
  line-height: 90%;
}

.h1.left {
  text-align: left;
}

.h1.left.white {
  color: #fff;
  letter-spacing: -2px;
  font-family: Saira;
  font-size: 6vh;
}

.h1.left.white.shadow {
  color: var(--yellow-bonive);
}

.h1.white {
  color: #fff;
  font-family: Saira;
}

.h1.white.bottom-space {
  margin-bottom: 15vh;
}

.h1.white.shoadow {
  text-shadow: 0 6px 12px #0000005c;
}

.h1.white.shadow {
  text-shadow: 0 5px 6px #0000005c;
}

.h1.black {
  color: #0d323f;
}

.h1.center.white {
  font-size: 6vh;
}

.pr {
  color: #feebbe;
  text-align: center;
  letter-spacing: .04em;
  flex: none;
  font-family: Merienda;
  font-size: 3vh;
  font-weight: 400;
  line-height: 140%;
}

.pr.yellow {
  color: #edeb8f;
  letter-spacing: .05em;
  flex: none;
  margin-top: 10px;
  font-family: Arima;
  font-weight: 400;
  line-height: 1;
}

.pr.left-full {
  text-align: left;
  letter-spacing: .05em;
  flex: none;
  width: 80%;
  height: auto;
  font-family: Saira;
  font-size: 3vh;
  line-height: 130%;
}

.pr.left-full.tiny-text.bold.yellow {
  color: #fde29e;
}

.pr.left {
  text-align: left;
  letter-spacing: .05em;
  flex: 1;
  width: 80%;
  font-family: Saira;
  font-size: 3vh;
  line-height: 130%;
}

.pr.left.bold {
  letter-spacing: .05em;
  width: 100%;
  margin-bottom: 10px;
  font-family: Arima;
}

.pr.left.bold.white {
  font-family: Saira;
}

.pr.tiny-text {
  color: #fff;
  text-align: left;
  height: 15vh;
  font-family: Arima;
  font-size: 3vh;
}

.pr.tiny-text.space-around.gold {
  color: #fde29e;
  text-decoration: underline;
}

.pr.tiny-text.space-around.gold.right-auto {
  height: 5vh;
  color: var(--yellow-bonive);
  flex: none;
  margin-top: 5vh;
  margin-left: 0;
  font-family: Saira;
}

.pr.tiny-text.space-around.gold.right-auto.no-space.shadow {
  z-index: 6;
  display: none;
  position: relative;
}

.pr.tiny-text.bold.center {
  text-align: center;
  width: 100%;
  height: 8vh;
  font-family: Saira;
  font-weight: 800;
}

.pr.tiny-text.yellow {
  color: #feebbe;
  line-height: 1.4;
}

.pr.tiny-text.yellow.center {
  letter-spacing: .05em;
  width: 100%;
  height: auto;
  font-family: Saira;
  font-weight: 400;
  line-height: 1.2;
}

.pr.tiny-text.center {
  text-align: center;
}

.pr.italy {
  flex: none;
  font-family: Saira;
  font-style: italic;
  font-weight: 800;
  position: static;
}

.pr.bold {
  flex: none;
  align-self: center;
  font-weight: 700;
}

.pr.miny {
  opacity: 1;
  color: #fff;
  text-align: left;
  flex: none;
  height: auto;
  font-size: 2vh;
  line-height: 1.5;
}

.pr.miny.bold {
  text-align: left;
  margin-right: auto;
  font-weight: 700;
}

.pr.tiny-questions {
  text-align: left;
  font-family: Saira;
  font-size: 3vh;
}

.pr.tiny {
  text-align: center;
  flex: none;
  width: 100%;
  font-size: 3vh;
}

.pr.tiny.bold.white {
  color: #fff;
  font-family: Saira;
}

.pr.tiny.bold.white.left {
  text-align: left;
  font-family: Saira;
}

.pr.minute {
  text-align: center;
  flex: none;
  width: 100%;
  font-size: 2.4vh;
}

.pr.minute.left {
  text-align: left;
  letter-spacing: .01em;
  font-family: Saira;
}

.pr.minute.center {
  width: 70%;
  font-family: Saira;
}

.pr.center {
  width: 50%;
  font-family: Arima;
}

.pr.center.full {
  flex: none;
  font-family: Saira;
}

.pr.personal-presentation {
  text-align: left;
  letter-spacing: .05em;
  flex: none;
  width: 60%;
  font-family: Saira;
  font-style: normal;
  line-height: 120%;
}

.pr.auto-center {
  width: 100%;
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
  font-family: Saira;
}

.bonive-logo-name {
  z-index: 10;
  flex-direction: row;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: auto;
  margin-top: 1vh;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.button-2 {
  z-index: 6;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-image: linear-gradient(to bottom, #fff6de, var(--yellow-bonive));
  border: 3px solid #163a46;
  border-radius: 6px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 300px;
  padding: 10px;
  text-decoration: none;
  display: flex;
  position: relative;
  box-shadow: 0 16px 4px #00000040, 0 50px 33px #00000040, 0 6px 1px #a8925a;
}

.button-2.tiny {
  color: #0e3343;
  font-family: Saira;
  font-size: 4vh;
}

.text-header {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-direction: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: auto;
  margin-top: 0;
  display: flex;
  position: static;
}

.container-11 {
  z-index: 2;
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 78.16%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.container-11.big {
  flex: none;
  justify-content: center;
  width: 100%;
}

.container-11.big.over {
  z-index: 5;
}

.h3 {
  color: #fffb99;
  text-align: left;
  flex: none;
  margin-top: 10px;
  font-family: Marcellus SC, sans-serif;
  font-size: 6vh;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.image {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 50%;
  height: 40vh;
  display: flex;
}

.text_left {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 60%;
  height: 406px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.text_left.header-animation {
  flex: none;
  justify-content: center;
  width: 30%;
  height: 300px;
  margin-right: 60%;
}

.animation {
  flex: none;
  width: 300px;
  height: auto;
}

.animation.out-right {
  z-index: 0;
  flex: none;
  width: 100%;
  height: 150%;
  margin-right: 0;
  position: relative;
}

.animation.icon-doc {
  width: 200px;
}

.feature-aniamtion {
  flex: none;
  width: 100%;
  height: 40vh;
}

.container-13 {
  z-index: 2;
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 78.16%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.feature-div {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-direction: column;
  flex: none;
  order: -1;
  justify-content: flex-start;
  align-items: center;
  width: 30%;
  height: auto;
  display: flex;
}

.vectors-wrapper-2 {
  z-index: 0;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: none;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: none;
  display: none;
  position: absolute;
  top: 45vh;
  left: auto;
}

.featuers-web-art {
  z-index: 1;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-direction: row;
  flex: none;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  height: auto;
  padding-top: 2vh;
  display: flex;
  position: relative;
}

.container-14 {
  z-index: 2;
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 78.16%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.container-14.lateral {
  border-top: 1px #131e2b;
  flex-direction: row;
  flex: none;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-top: 10vh;
  padding-bottom: 10vh;
}

.container-14.lateral.left-fit {
  justify-content: flex-start;
}

.container-14.lateral.left-fit.over {
  z-index: auto;
  position: relative;
}

.vector-brand {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: cover;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 90%;
  max-width: none;
  height: auto;
  display: flex;
}

.vector-brand.tiny {
  width: 70%;
}

.vector-brand.big {
  width: 100%;
}

.brands {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex: none;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  display: flex;
  position: relative;
}

.logo-brand {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: #141414;
  border-radius: 5px;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 20%;
  height: 14vh;
  padding-left: 1vw;
  padding-right: 1vw;
  display: flex;
  position: relative;
  box-shadow: 0 9px 5px #0003, 0 4px #0f0c0c;
}

.div-brands {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.container-process {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: none;
  flex-direction: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 80%;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.container-process.tiny {
  width: 50%;
  height: auto;
  margin-top: 0;
}

.process-animation {
  flex: none;
  width: auto;
  height: 40%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.process-animation.tiny {
  width: auto;
  height: 30vh;
}

.container-15 {
  z-index: 2;
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 78.16%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.container-15.full {
  flex: none;
  width: 100%;
}

.container-15.full.over {
  z-index: 5;
  position: static;
}

.recomendation-div {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: #fffb99;
  border-radius: 8px;
  flex-direction: row;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 50vw;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  display: flex;
  box-shadow: 0 10px 18px #0003;
}

.picture-recomendation {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: fill;
  border: 3px solid #3a657473;
  border-radius: 500px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  display: flex;
}

.container-faq {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 78.16%;
  display: flex;
}

.container-17 {
  z-index: 2;
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 78.16%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.container-17.vertical {
  border-top: 1px #131e2b;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-top: 10vh;
  padding-bottom: 10vh;
}

.container-17.vertical.over {
  z-index: 3;
  align-items: center;
}

.h4 {
  font-family: var(--font-family);
  color: #fffb99;
  text-align: left;
  letter-spacing: -5px;
  flex: none;
  margin-top: 10px;
  font-size: 5vh;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.h4.right-auto {
  margin-bottom: 20px;
  margin-right: auto;
  font-family: Saira;
  font-weight: 400;
  text-decoration: none;
}

.h4.pricing {
  flex: none;
  height: 15vh;
  min-height: auto;
  font-family: Saira;
  font-weight: 400;
}

.total-div-pricing {
  z-index: 10;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border: 1px solid #feebbe40;
  border-radius: 4px;
  flex: none;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  height: auto;
  display: flex;
  position: relative;
  box-shadow: 0 20px 18px 4px #0003;
}

.bold-text-7 {
  height: auto;
  font-family: Saira;
  font-weight: 400;
  line-height: 1.8;
}

.bold-text-7.bold {
  margin-right: auto;
  font-family: Saira;
  font-weight: 700;
}

.div-pricing {
  border: 1px solid #fde29e26;
  border-bottom-style: none;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
  width: 100%;
  height: auto;
  padding: 3vw 3vw 2vw;
  display: flex;
  position: relative;
}

.div-pricing.no-spacing {
  border-style: none;
  flex: 1;
  height: auto;
  padding: 0;
}

.div-pricing.no-spacing.buttom-line {
  border-bottom-style: solid;
  border-bottom-color: #feebbe36;
  flex: none;
  margin-bottom: 2vw;
  padding-bottom: 2vw;
  position: relative;
}

.tabs-menu {
  border-right: 3px solid #fde29e08;
  flex-direction: column;
  flex: none;
  width: 50%;
  margin-right: 3vw;
  display: flex;
}

.questions-div {
  flex: none;
  width: 61.2%;
  height: auto;
}

.tab-link-tab-1 {
  opacity: .4;
  background-color: #fde29e00;
  padding-left: 3vw;
}

.tab-link-tab-1.w--current {
  opacity: 1;
  background-color: #131e2b;
  border-right: 2px solid #fde29e;
  flex: none;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 2vw;
  box-shadow: 0 10px 13px -2px #0003, 0 4px #0f1926;
}

.line {
  background-color: #fde29e0d;
  width: 100%;
  height: 2px;
  margin-left: auto;
  margin-right: auto;
}

.tabs-content {
  flex: 1;
  height: 100%;
  padding-top: 2vh;
  padding-bottom: 2vh;
}

.tiny {
  width: 30%;
}

.div-questions {
  width: 100%;
  height: auto;
  margin: 2vh auto 8vh;
}

.div-faq {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 0;
  padding-bottom: 50px;
  display: flex;
}

.tap-form {
  opacity: .4;
  background-color: #ddd0;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 3vw;
}

.tap-form.w--current {
  opacity: 1;
  background-color: #131e2b;
  border-right: 2px solid #fde29e;
  padding-left: 2vw;
  box-shadow: 0 9px 11px #0003, 0 5px #0f1823;
}

.tabs {
  border-top: 2px solid #fde29e14;
  border-bottom: 2px solid #fde29e24;
  flex: 1;
  width: 100%;
  display: none;
}

.container-18 {
  z-index: 2;
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 78.16%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.container-18.tiny-porcent {
  width: 38.28%;
}

.container-18.tiny-porcent.over {
  z-index: 5;
  width: 60%;
}

.vectors-wrapper-8 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: cover;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 50px;
  max-width: none;
  height: auto;
  display: flex;
}

.container-19 {
  z-index: 2;
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 78.16%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.container-19.lateral {
  border-top: 1px #131e2b;
  flex-direction: row;
  flex: none;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-top: 10vh;
  padding-bottom: 10vh;
}

.container-19.lateral.over {
  z-index: 5;
  align-items: flex-end;
}

.frame-52 {
  z-index: 10;
  grid-column-gap: 23px;
  grid-row-gap: 23px;
  border: 2px solid #feebbe82;
  border-radius: 3px;
  flex: none;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 2vh 2vw;
  text-decoration: none;
  display: none;
  position: relative;
  box-shadow: 0 8px 5px #0003;
}

.text-div {
  grid-column-gap: 23px;
  grid-row-gap: 23px;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: flex-end;
  width: 50%;
  margin-top: auto;
  margin-bottom: -11px;
  display: flex;
}

.div {
  flex-direction: column;
  flex: none;
  align-items: center;
  width: 50%;
  margin-top: auto;
  display: flex;
}

.send-a-email {
  color: #fde29e;
  text-align: left;
  letter-spacing: 0;
  text-shadow: 0 2px 2px #00000080;
  flex: none;
  font-family: Saira;
  font-size: 5vh;
  font-weight: 400;
  line-height: 1;
}

.vectors-wrapper-11 {
  z-index: 3;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: cover;
  flex: none;
  justify-content: center;
  align-items: center;
  height: 22.6826px;
  display: none;
  position: absolute;
  top: 3vh;
  left: auto;
  right: 0;
}

.text-6 {
  color: #fffee3;
  letter-spacing: .04em;
  font-family: Saira;
  font-size: 18px;
  font-weight: 100;
  line-height: 140%;
}

.text-6.tiny {
  text-align: center;
  font-size: 12px;
}

.vectors-wrapper-9 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: none;
  flex: none;
  justify-content: center;
  align-items: center;
  display: none;
  position: absolute;
  top: auto;
  bottom: -30vh;
  left: auto;
}

.container-20 {
  z-index: 2;
  grid-column-gap: 26px;
  grid-row-gap: 26px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 78.16%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.container-20.lateral {
  border-top: 1px #131e2b;
  flex-direction: row;
  flex: none;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-top: 10vh;
  padding-bottom: 10vh;
}

.container-20.lateral.space-top {
  z-index: 5;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 0;
}

.text-7 {
  color: #fffee3;
  font-family: Saira;
  font-size: 18px;
  font-weight: 100;
  line-height: 140%;
}

.vectors-wrapper-10 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 132.088px;
  height: 106px;
  display: flex;
}

.footer-text {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-end;
  text-decoration: none;
  display: flex;
}

.footer-text._5 {
  display: none;
}

.footer-text._3 {
  z-index: 10;
  position: relative;
}

.footer-text._1 {
  z-index: 10;
  flex: none;
  display: flex;
  position: relative;
}

.footer-text._2 {
  position: relative;
}

.footer-text._4 {
  display: none;
}

.logo-and-info {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 381px;
  display: flex;
}

.bonive-2023 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: #041921;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 6vh;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  position: relative;
}

.text-footer {
  grid-column-gap: 9px;
  grid-row-gap: 9px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}

.logo-bonive-gold-landing {
  background-image: url('../images/Logo-B-trival-Bonive.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  flex: none;
  width: 50px;
  height: 70px;
}

.div-text-info {
  flex: none;
  width: 50%;
  margin: auto;
}

.div-lateral-process {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex: none;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  width: 100%;
  height: auto;
  display: grid;
}

.background-dark-blue {
  background-color: #131e2b;
  flex: none;
  width: 100%;
  height: 65vh;
  margin-top: auto;
  position: absolute;
  bottom: 0;
}

.h1-header {
  color: #fffb99;
  text-align: center;
  text-shadow: 0 2px 1px #797640, 0 5px 2px #000000a1, 0 7px 15px #00000078;
  flex: none;
  margin-top: 10px;
  font-family: Marcellus SC, sans-serif;
  font-size: 10vh;
  font-weight: 400;
  line-height: 90%;
}

.h1-header.header {
  letter-spacing: -.05rem;
  text-shadow: 0 5px 2px #0000004a, 0 7px 15px #00000045;
  width: 70%;
  font-family: Saira;
  font-size: 9vh;
  font-weight: 400;
  line-height: 1;
}

.div-the-last-projects {
  z-index: 6;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  perspective: 466px;
  flex: none;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
  transform: perspective(369px);
}

.last-project {
  z-index: 10;
  perspective: 718px;
  background-image: url('../images/Zeniverse_1Zeniverse.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 5px;
  width: 40vw;
  height: 30vh;
  position: relative;
  transform: perspective(699px);
  box-shadow: 0 7px 10px #0003;
}

.last-project._2 {
  background-image: url('../images/Titano-host-sample_1Titano host sample.webp');
  box-shadow: -5px 17px 10px #0003;
}

.last-project._3 {
  background-image: url('../images/accountat_1accountat.webp');
  box-shadow: 13px 13px 10px #0003;
}

.last-project._4 {
  background-image: url('../images/curious-sample_1curious sample.webp');
  box-shadow: 15px 12px 10px #0003;
}

.nav-bard-landing-page {
  z-index: 15;
  width: 600px;
  height: 40px;
  transform-style: preserve-3d;
  background-color: #04181f;
  border: 1px solid #fffb9936;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: fixed;
  inset: auto 0% 13px;
  overflow: hidden;
  transform: translate3d(0, 0, 200px);
  box-shadow: 0 10px 12px #0003;
}

.text-link-nav-bard {
  color: #fffb99;
  letter-spacing: 0;
  border: 1px #fffb9947;
  border-style: none solid;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  font-family: Saira;
  font-size: 1.5vh;
  font-weight: 100;
  text-decoration: none;
  display: flex;
}

.text-link-nav-bard._2 {
  background-image: url('../images/Arrow-9.svg');
  background-position: 50% 55%;
  background-repeat: no-repeat;
  background-size: auto 60%;
}

.text-link-nav-bard._2.w--current {
  border-style: none;
  flex: none;
  width: 100px;
  position: relative;
}

.text-link-nav-bard.no-appear {
  display: none;
}

.h3-l {
  color: #fffb99;
  text-align: left;
  flex: none;
  margin-top: 10px;
  font-family: Marcellus SC, sans-serif;
  font-size: 2vh;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.heading-2-landing {
  color: var(--yellow-bonive);
  text-align: center;
  text-shadow: 0 4px 12px #0000008a;
  flex: none;
  margin-top: 10px;
  font-family: Saira;
  font-size: 3vh;
  font-weight: 400;
}

.lateral-shadow {
  z-index: 5;
  opacity: .27;
  mix-blend-mode: multiply;
  background-color: #07030300;
  background-image: linear-gradient(to right, #000 57%, #11111170);
  width: 5%;
  height: 100vh;
  position: fixed;
}

.lateral-shadow.left {
  z-index: 3;
  background-image: linear-gradient(to right, #000, #1110 54%);
}

.lateral-shadow.right {
  z-index: 3;
  background-image: linear-gradient(269deg, #000, #1110 66%);
  inset: 0% 0% 0% auto;
}

.sticky {
  z-index: auto;
  background-image: none;
  flex-direction: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 300vh;
  margin: -20px auto auto;
  display: flex;
  position: fixed;
  top: 0;
}

.close-live-chat-container {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 10%;
  height: 100%;
  display: flex;
}

.whatsapp-block {
  z-index: 30;
  flex-direction: column;
  align-items: flex-end;
  display: flex;
  position: fixed;
  inset: auto 30px 30px auto;
}

.live-chat-link {
  border-radius: 0;
  justify-content: center;
  align-items: center;
  height: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  text-decoration: none;
  display: flex;
}

.live-chat-bottom-text {
  font-size: 10px;
}

.live-chat-bottom-text.block {
  margin-bottom: 5px;
  font-size: 12px;
}

.chat-section {
  background-color: #e6ddd4;
  flex: none;
  height: auto;
  padding: 16px 20px;
}

.live-chat-top-text {
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 500;
  position: static;
}

.live-chat-top-text.block {
  color: #b0b0b0;
  margin-bottom: 10px;
  font-size: 12px;
}

.live-icon-chat {
  border: 2px solid #fde29e;
  border-radius: 20px;
  margin-right: 0;
  box-shadow: 0 4px #cdcdcd, 0 5px 12px #0003;
}

.whatsapp-chat {
  background-color: #fff9ea;
  border: 1px solid #00000029;
  border-radius: 20px;
  flex-direction: column;
  flex: none;
  width: 300px;
  height: auto;
  margin-bottom: 16px;
  display: none;
  overflow: hidden;
  box-shadow: 0 13px 12px #0003;
}

.live-icon {
  background-color: #00b94a;
  border-radius: 100%;
  width: 15px;
  height: 15px;
  position: absolute;
  inset: 5px auto auto 5px;
}

.top-section {
  justify-content: space-between;
  align-items: center;
  height: 25%;
  padding: 20px;
  display: flex;
}

.small-whatsapp-icon {
  margin-right: 10px;
}

.whatsapp-container {
  z-index: 30;
  cursor: pointer;
  background-color: #04181f;
  border: 1px solid #fffb9952;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  transition: all .3s cubic-bezier(.45, .182, .111, .989);
  display: flex;
  position: relative;
  inset: auto 0% 0% auto;
}

.whatsapp-container:hover {
  background-color: #383838;
  transform: scale(1.05);
}

.live-chat-text {
  color: #fff;
  text-decoration: none;
}

.chat-block {
  background-color: #fff;
  border-radius: 8px;
  width: 80%;
  padding: 15px;
}

.livechat-button {
  background-color: #5bbf33;
  border: 2px solid #fcd5724a;
  border-radius: 200px;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 42px;
  text-decoration: none;
  display: flex;
  box-shadow: 0 4px #4eab29, 0 6px 13px #0003;
}

.div-self-description {
  z-index: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-direction: column;
  flex: none;
  align-items: center;
  width: 50%;
  height: auto;
  display: flex;
  position: relative;
}

.link-sefl-propmotion {
  background-color: var(--yellow-bonive);
  background-image: url('../images/Dribbble_logo.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  border-radius: 4px;
  width: 40%;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
}

.link-sefl-propmotion.linkedin {
  z-index: 5;
  background-color: #fffdcb;
  background-image: url('../images/LinkedIn_Logo.svg');
  background-size: 60%;
  border: 2px solid #427c91;
  width: 100%;
  margin-left: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  box-shadow: 0 8px 3px #0000002b, 0 3px #7c7931, 0 16px 13px #0003;
}

.link-sefl-propmotion.linkedin.testimonial {
  color: #069;
  background-image: none;
  background-repeat: repeat;
  background-size: auto;
  width: 100%;
  font-family: Saira;
  font-size: 2vh;
  font-weight: 800;
}

.tittle-adn-picture {
  flex-direction: column;
  flex: none;
  align-self: center;
  align-items: flex-start;
  width: 50%;
  height: 100%;
  padding-left: 20px;
  display: flex;
}

.tittle-adn-picture.tiny {
  width: 30%;
}

.tittle-review {
  color: #0d323f;
  text-align: center;
  letter-spacing: .04em;
  flex: none;
  height: 60px;
  font-family: Saira;
  font-size: 3vh;
  font-weight: 800;
  line-height: 140%;
}

.tittle-review.left {
  text-align: left;
  letter-spacing: .05em;
  border-bottom: 2px solid #0d323f47;
  flex: none;
  width: 100%;
  height: auto;
  font-family: Saira;
  font-size: 2.3vh;
  line-height: 130%;
}

.tittle-review.bold {
  flex: none;
  align-self: center;
  font-weight: 700;
}

.tittle-review.tiny {
  text-align: left;
  flex: none;
  width: auto;
  height: auto;
  font-size: 2.5vh;
  font-weight: 400;
}

.tittle-review.tiny.bold {
  height: auto;
  margin-right: auto;
  font-size: 1.5vh;
  font-weight: 800;
}

.offer-logo {
  border: 2px solid var(--yellow-bonive);
  background-color: #f9f13a;
  border-radius: 100px;
  flex: none;
  width: auto;
  height: auto;
  padding: 20px;
  position: absolute;
  top: -70.25px;
  left: -70.25px;
  transform: rotate(-12deg);
  box-shadow: 0 8px 10px #0003;
}

.offer-logo._1 {
  top: -80px;
  left: -12px;
}

.text-offer {
  color: #0d323f;
  text-align: center;
  background-color: #61382400;
  font-family: Saira;
  font-weight: 800;
}

.bold-text-8 {
  border-bottom: 2px #0d323f73;
  width: 100%;
  height: 160px;
}

.div-block-5 {
  flex: none;
  width: 70%;
}

.div-block-6 {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100%;
  display: flex;
}

.slider-testimonial {
  z-index: 5;
  background-color: #ddd0;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 65vw;
  height: auto;
  margin-top: 5vh;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 10vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.mask {
  flex: none;
  overflow: visible;
}

.slide {
  margin-left: auto;
  margin-right: auto;
}

.slide-nav {
  flex: none;
  display: none;
}

.right-arrow {
  z-index: 10;
  margin-bottom: 12vh;
  margin-right: auto;
}

.left-arrow {
  flex: none;
  margin-bottom: 12vh;
}

.icon, .icon-2 {
  color: #0d323f;
  margin-top: auto;
  margin-bottom: 0;
}

.div-fix-information {
  z-index: 4;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: absolute;
  top: 0;
}

.header-info-1 {
  z-index: 5;
  flex-direction: column;
  flex: none;
  align-self: center;
  align-items: center;
  width: 100%;
  margin: auto auto 5vh;
  display: block;
  position: absolute;
  inset: auto auto 0%;
}

.header-info-2 {
  z-index: 4;
  opacity: 0;
  flex: none;
  align-items: center;
  height: 100vh;
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.header-info-3 {
  z-index: 2;
  opacity: 0;
  flex: none;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin-top: auto;
  margin-bottom: 0;
  padding-bottom: 400px;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.header-section-total-info {
  z-index: 4;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 1000%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: fixed;
}

.diamond-lottie {
  width: 20%;
  margin-top: 8vh;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: 0% 0% auto;
}

.character-aniamtion {
  width: 10%;
  margin-top: 12vh;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: 0% 0% auto 30%;
}

.character-aniamtion.woman {
  width: 8%;
  margin-top: 15vh;
  left: 55%;
}

.character-aniamtion.woman.left {
  right: 55%;
}

.character-aniamtion.left {
  transform-style: preserve-3d;
  left: 0%;
  right: 30%;
  transform: rotateX(0)rotateY(180deg)rotateZ(0);
}

.dimond_faces {
  z-index: 2;
  position: absolute;
  inset: -.5% 0% 0% .5%;
}

.lottie-animation-2 {
  z-index: 0;
  flex: none;
  align-self: center;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  inset: 0%;
}

.header-short-div {
  z-index: 4;
  width: 800px;
  height: 80px;
  transform-style: preserve-3d;
  margin-bottom: 29px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: static;
  transform: none;
}

.html-embed {
  z-index: 0;
  position: relative;
}

.background-arm {
  z-index: 2;
  perspective: 200px;
  transform-origin: 100% 100%;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: perspective(200px);
}

.ai-arm-full-arm_door {
  z-index: 2;
  transform-origin: 90% 90%;
  background-color: #f1f1f100;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 900px;
  height: 380px;
  margin-bottom: 23px;
  margin-left: 88px;
  display: flex;
  position: relative;
  transform: rotate(0)scale(.8);
}

.ai-arm-reference {
  z-index: 5;
  opacity: 0;
  mix-blend-mode: normal;
  background-color: #050202;
  border-radius: 0;
  width: 100%;
  height: 100vh;
  display: block;
  position: absolute;
}

.ai-arm_total-door {
  z-index: 3;
  width: 250px;
  height: 250px;
  transform-style: preserve-3d;
  background-image: url('../images/door.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  flex: none;
  margin-top: auto;
  margin-left: auto;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate3d(0, 0, 2px);
}

.ai-arm_door-light-total {
  background-color: #051d19;
  border-radius: 1px;
  width: 10px;
  height: 10px;
  margin-top: 14px;
  margin-left: 21px;
  display: flex;
  position: absolute;
}

.ai-arm_door-light-total._2 {
  margin: 90px 0 0 18px;
  inset: 0% auto auto 0%;
}

.ai-arm_door-light-total._1 {
  width: 15px;
  height: 15px;
  margin-top: 25px;
}

.ai-arm_door-light-total._3 {
  margin: 0 15px 17px 0;
  inset: auto 0% 0% auto;
}

.ai-arm_door-light-on {
  opacity: 1;
  background-color: #75f7ea;
  border-radius: 1px;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 13px 4px #46efdaa8;
}

.ai-arm_smoke {
  opacity: 1;
  mix-blend-mode: multiply;
  background-image: url('../images/smoke.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  flex: none;
  width: 500px;
  height: 500px;
  margin-top: 0;
  margin-left: 0;
  display: block;
  position: absolute;
  inset: auto -78px -144px auto;
}

.ai-arm_full-arm {
  z-index: 1;
  perspective-origin: 50%;
  transform-origin: 95% 90%;
  flex: none;
  width: 700px;
  height: 400px;
  margin-top: auto;
  margin-left: auto;
  display: block;
  position: absolute;
  inset: 0% 0% 0% auto;
  transform: translate(0)rotate(4deg);
}

.ai-arm_base {
  z-index: 0;
  background-image: url('../images/base-arm.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  flex: none;
  align-items: flex-end;
  width: 250px;
  height: 100px;
  display: flex;
  position: absolute;
  inset: auto 115px 20px auto;
}

.ai-arm_part-2-master {
  transform-origin: 90% 100%;
  width: 180px;
  height: 300px;
  margin-left: 0;
  position: absolute;
  bottom: 26px;
  right: 250px;
}

.ai-arm_part-2-1 {
  background-image: url('../images/base-arm-2.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 160px;
  height: 250px;
  position: absolute;
  bottom: 0;
}

.ai-arm_part-piston-1m {
  z-index: 3;
  transform-origin: 50% 92%;
  width: 80px;
  height: 300px;
  position: absolute;
  bottom: 14px;
  left: 137px;
  transform: rotate(-23deg);
}

.ai-arm_part-pisto-a {
  z-index: 4;
  background-image: url('../images/base-piston-.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 80px;
  height: 130px;
  position: absolute;
  bottom: 0;
}

.ai-arm_part-pisto-b {
  z-index: 3;
  background-image: url('../images/piston-top.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 80px;
  height: 180px;
  position: absolute;
  top: 0;
  bottom: auto;
}

.ai-arm_part3 {
  transform-origin: 58% 40%;
  background-image: url('../images/metal-2.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 300px;
  height: 90px;
  position: absolute;
  right: 36px;
}

.ai-arm_part-piston-rotor {
  background-image: url('../images/rotor-piston-1.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 20px;
}

.ai-arm_part-rotor {
  background-image: url('../images/Layer-11-copy.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 50px;
  height: 50px;
  position: absolute;
  inset: 12px 96px 0 auto;
}

.ai-arm_part-4 {
  transform-origin: 80%;
  background-color: #91919100;
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: -82px;
  right: 191px;
}

.ai-arm_part-rotor-hand {
  z-index: 2;
  background-image: url('../images/rotor.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 50px;
  height: 50px;
  position: absolute;
  inset: 75px 21px auto auto;
}

.ai-arm_finger-m {
  z-index: 1;
  transform-origin: 100% 0;
  width: 100%;
  height: 120px;
  position: absolute;
  bottom: 10px;
  left: 0;
  transform: rotate(1deg);
}

.ai-arm_finger-m.v2 {
  transform-style: preserve-3d;
  bottom: -50px;
  transform: rotateX(180deg)rotateY(0)rotateZ(1deg);
}

.ai-arm_fingerpart-1 {
  transform-origin: 40% 20%;
  background-image: url('../images/part-little-1.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 70px;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(0);
}

.ai-arm_little-firger-rotor {
  z-index: 1;
  background-image: url('../images/Layer-11-copy.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 76px;
  left: 26px;
}

.ai-arm_little-firger-2 {
  z-index: 0;
  transform-origin: 90% 70%;
  background-image: url('../images/little-2.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 130px;
  height: 60px;
  position: absolute;
  inset: auto 0% 0% auto;
}

.ai-arm_little-finger-point {
  transform-origin: 60% 30%;
  background-image: url('../images/liitle-1.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  border: 0 solid #000;
  width: 100px;
  height: 60px;
  position: absolute;
  bottom: 3px;
  right: 85px;
  transform: rotate(-18deg);
}

.ai-arm_line {
  background-image: linear-gradient(to right, #fff0, #75f7ea 46% 78%, #fff0 103%);
  border-radius: 5px;
  flex: none;
  width: 900px;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 29px;
  box-shadow: 0 0 5px #8debf0b3;
}

.ai-arm_line.line-big1 {
  z-index: 0;
}

.ai-arm_line.line-big2 {
  z-index: 0;
  width: 700px;
  inset: auto -28px 250px auto;
}

.ai-arm_line.line-big3 {
  z-index: 0;
  transform-origin: 100%;
  width: 500px;
  inset: auto 0 -49px auto;
  overflow: visible;
  transform: rotate(90deg);
}

.ai-arm_line.line-big4 {
  z-index: 1;
  transform-origin: 100%;
  width: 500px;
  inset: auto 250px -49px auto;
  transform: rotate(90deg);
}

.ai-arm_info {
  z-index: 0;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100vh;
  padding-left: 20vw;
  padding-right: 20%;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.ai-arm_text {
  z-index: 0;
  margin-top: auto;
  margin-bottom: 30vh;
  position: relative;
  inset: auto 0% 0%;
}

.heading-3 {
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 1px 14px var(--white);
  font-family: Marcellus SC, sans-serif;
  font-size: 48px;
}

.ai-arm_paragraph {
  color: #fff;
  margin-top: 27px;
  font-family: Droid Serif, serif;
  font-size: 28px;
}

.ai-arm_detail {
  background-image: url('../images/left-panel.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 200px;
  height: 100vh;
  margin-right: auto;
  position: absolute;
  inset: 0% auto 0% 34px;
}

.ai-arm_detail.v2 {
  background-image: url('../images/right-panel.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  width: 100px;
  height: 100vh;
  margin-left: auto;
  margin-right: 0;
  inset: 0% 0% 0% auto;
}

.ai-arm_total-door-black {
  z-index: 0;
  background-image: radial-gradient(circle, #0000 73%, #000), linear-gradient(#01080a, #03080bed);
  background-position: 0 0, 0 0;
  background-size: auto, auto;
  border-radius: 2px;
  flex: none;
  width: 250px;
  height: 250px;
  margin-top: auto;
  margin-left: auto;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(0);
  box-shadow: inset 0 9px 1px 8px #000;
}

.body-7 {
  perspective: 200px;
  background-color: #fff0;
  background-image: url('../images/background-1172581_1920.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: perspective(200px);
}

.ai-arm-alone {
  z-index: 2;
  filter: brightness(200%);
  transform-origin: 95% 90%;
  width: 700px;
  height: 400px;
  transform-style: preserve-3d;
  flex: none;
  position: absolute;
  inset: auto 0 0% auto;
  transform: none;
}

.ai-arm_total-door-m {
  z-index: 3;
  width: 250px;
  height: 250px;
  transform-style: preserve-3d;
  flex: none;
  margin-top: auto;
  margin-left: auto;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate3d(0, 0, 2px);
}

.form-2 {
  width: 100%;
  position: relative;
}

.form-block-3 {
  width: 100%;
}

.success-message-3 {
  background-color: #409b61;
}

.text-block-5 {
  font-family: Saira;
}

.field-label-9 {
  font-family: Saira;
  font-weight: 400;
}

.text-field-3 {
  color: #19180f;
  min-height: 7vh;
  font-family: Saira;
}

.div-block-8 {
  min-width: 150px;
}

.black {
  color: #000;
}

.container-image-and-text {
  z-index: 4;
  width: var(--size-1);
  grid-column-gap: 4%;
  grid-row-gap: 4%;
  background-color: var(--neutral-300);
  border: 1px solid #fffb990f;
  border-radius: 8px;
  flex-flow: column;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  height: 50vh;
  margin-top: 0%;
  margin-bottom: 0%;
  display: flex;
  position: relative;
  overflow: visible;
  box-shadow: 0 9px #0a0a0a, 0 20px 5px #0003, 0 50px 50px #0003;
}

.container-image-and-text._2 {
  grid-column-gap: 0%;
  grid-row-gap: 0%;
  height: 60vh;
  margin-top: 0%;
}

.back-button {
  background-color: var(--neutral-1);
  color: var(--yellow-bonive);
  text-align: center;
  border-radius: 8px;
  flex: none;
  margin-right: 0;
  padding: 8px 16px;
  font-family: Krona One, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  transition: background-color .5s cubic-bezier(.789, .159, .25, 1), color .2s cubic-bezier(.789, .159, .25, 1);
  display: inline-block;
  position: fixed;
  top: 1%;
  left: 1%;
}

.back-button:hover {
  color: #6b6b6b;
  background-color: #fff;
}

.inner-card-info-animation {
  height: auto;
  padding: 20px 20px 20px 8px;
}

.h3-2 {
  color: #fffb99;
  text-align: center;
  letter-spacing: -.05em;
  text-shadow: 0 11px 19px #00000094;
  max-width: 50vw;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Krona One, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.h3-2.left {
  text-align: left;
}

.lottie-animation-3 {
  width: 100px;
  margin-top: 20px;
}

.litte-arrow {
  color: #fffb99;
  text-align: center;
  letter-spacing: -.05em;
  text-shadow: 0 11px 19px #00000094;
  width: 30px;
  max-width: none;
  margin: 0 auto;
  font-family: Krona One, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
}

.link-card-services {
  flex-flow: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.body-2-boni {
  color: #fffdd0;
  text-align: center;
  letter-spacing: 0;
  max-width: none;
  margin-top: 1%;
  margin-bottom: 1%;
  font-family: Varela, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 120%;
  text-decoration: none;
  display: flex;
}

.body-2-boni.left {
  color: #fffdd0;
  text-align: left;
  letter-spacing: 0;
  width: 150px;
  margin-top: 2%;
  font-weight: 400;
}

.h1-end {
  color: #fff;
  text-align: left;
  letter-spacing: -2px;
  margin-top: 10px;
  font-family: Saira;
  font-size: 7vh;
  font-weight: 400;
  line-height: 100%;
}

.right-buttom-scare-copy {
  background-color: #fffb9929;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  flex-flow: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 100%;
  display: flex;
  position: relative;
}

.book-a-call-panel-copy {
  z-index: 10;
  background-color: #16140c;
  border: 1px solid #fffb990f;
  border-radius: 0 10px 10px 0;
  justify-content: space-between;
  width: auto;
  height: 200px;
  padding: 0;
  display: flex;
  position: fixed;
  inset: auto auto 0% 0%;
}

.section-header-3d {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  cursor: auto;
  background-color: #fff;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 100vw;
  height: auto;
  margin-bottom: 0;
  padding: 13vh 0 12vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.section-header-3d.work {
  height: 90vh;
  display: flex;
}

.face_front {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  background-color: #b9b9b9;
  display: block;
  position: absolute;
  transform: translate3d(0, 0, 60px);
}

.face_front.screen {
  transform-style: preserve-3d;
  background-image: radial-gradient(circle, #535353, #272727);
  justify-content: center;
  align-items: center;
  display: flex;
  transform: translate3d(0, 0, 10px);
}

.face_front.screen.gold {
  background-image: radial-gradient(circle, #77754b, #272727);
}

.face_front.content-info {
  width: 95%;
  height: 90%;
  transform-style: preserve-3d;
  background-color: #ffffff6b;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 16px;
  display: flex;
  position: relative;
  inset: 0%;
  transform: none;
  box-shadow: 0 0 120px #fff6;
}

.face_back {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  background-color: #444;
  position: absolute;
  transform: translate3d(0, 0, -60px);
}

.face_back.screen {
  transform-style: preserve-3d;
  background-image: radial-gradient(circle, #575757, #313131);
  justify-content: center;
  align-items: center;
  display: flex;
  transform: translate3d(0, 0, -10px);
}

.face_back.screen.gold {
  background-image: radial-gradient(circle, #77754b, #313131);
}

.face_back.keyboard {
  opacity: .49;
  width: 90%;
  height: 60%;
  transform-style: preserve-3d;
  background-color: #6e6e6e;
  background-image: url('../images/key-word.svg');
  background-position: 50%;
  background-size: auto;
  border-radius: 20px;
  margin-left: auto;
  margin-right: auto;
  bottom: 22px;
  transform: translate3d(0, 0, -1px);
}

.face_back.touch-pad {
  opacity: .49;
  background-color: #6e6e6e;
  border-radius: 20px;
  width: 30%;
  height: 20%;
  margin-left: auto;
  margin-right: auto;
  top: 35px;
  bottom: auto;
  transform: none;
}

.face_top_lateral {
  width: 120px;
  height: 100%;
  transform-style: preserve-3d;
  background-color: #838383;
  margin-left: -59px;
  margin-right: auto;
  position: absolute;
  inset: 0% auto 0% 0%;
  transform: rotateX(0)rotateY(-90deg)rotateZ(0);
}

.face_top_lateral.left {
  background-image: linear-gradient(#000, #383838 48%, #242424);
  width: 20px;
  margin-left: -10px;
}

.face_top_lateral.left.gold {
  background-image: linear-gradient(#000, #77754b 48%, #242424);
}

.face_top_lateral.right {
  background-image: linear-gradient(#242424, #383838 50%, #242424);
  width: 20px;
  margin-left: auto;
  margin-right: -10px;
  left: auto;
  right: 0;
}

.face_top_lateral.right.gold {
  background-image: linear-gradient(#242424, #77754b 50%, #242424);
}

.face_top_bottom {
  perspective-origin: 50%;
  transform-origin: 50% 100%;
  width: 20px;
  height: 144%;
  transform-style: preserve-3d;
  background-color: #3f3e3e;
  margin-left: 0;
  margin-right: auto;
  position: absolute;
  inset: auto auto 0% -10px;
  transform: rotateX(90deg)rotateY(0)rotateZ(90deg);
}

.face_top_bottom.gold {
  background-color: #77754b;
}

.face_top_top {
  perspective-origin: 50%;
  transform-origin: 50% 0;
  width: 20px;
  height: 160%;
  transform-style: preserve-3d;
  background-color: #977070;
  background-image: linear-gradient(#535353, #565656 49%, #535353);
  margin-left: 0;
  margin-right: 0;
  position: absolute;
  inset: 0% -10px auto auto;
  transform: rotateX(90deg)rotateY(0)rotateZ(90deg);
}

.face_top_top.gold {
  background-image: linear-gradient(#535353, #77754b 49%, #535353);
  height: 144%;
}

._3d-basic-box {
  perspective: 1908px;
  width: 500px;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  display: none;
  position: relative;
  inset: 0%;
  transform: perspective(954px)rotate(0);
}

.screen-3d {
  perspective: 1908px;
  width: 800px;
  height: 500px;
  transform-style: preserve-3d;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  inset: 0%;
  transform: scale(.6)perspective(954px)rotateX(-12deg)rotateY(-28deg)rotateZ(0);
}

.screen-3d.top {
  perspective: none;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  margin-top: -5px;
  margin-bottom: auto;
  position: absolute;
  transform: rotateX(-110deg)rotateY(0)rotateZ(0);
}

.screen-3d.base-computer {
  perspective: none;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  margin-top: -5px;
  position: absolute;
  transform: rotateX(39deg)rotateY(0)rotateZ(0);
}

.laptop-3d {
  z-index: 4;
  flex-flow: row;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 800px;
  margin-top: 91px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  inset: 0%;
  overflow: visible;
}

.fonr-sample {
  text-align: center;
  font-family: Montserrat, sans-serif;
  font-size: 4rem;
  line-height: 1;
}

.section-sample {
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: auto;
  min-height: 100vh;
  display: flex;
}

.phone-3d {
  perspective: 1908px;
  width: 450px;
  height: 800px;
  transform-style: preserve-3d;
  margin-left: auto;
  margin-right: auto;
  display: none;
  position: absolute;
  inset: 0%;
  transform: scale(.8)perspective(954px)rotateX(9deg)rotateY(-47deg)rotateZ(0);
}

.phone_face_from {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  background-color: #b9b9b9;
  background-image: radial-gradient(circle, #646060, #323232);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  transform: translate3d(0, 0, 20px);
}

.phone_face_back {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  background-color: #444;
  position: absolute;
  transform: translate3d(0, 0, -20px);
}

.phone_lateral {
  width: 40px;
  height: 100%;
  transform-style: preserve-3d;
  background-color: #838383;
  margin-left: -20px;
  margin-right: auto;
  position: absolute;
  inset: 0% auto 0% 0%;
  transform: rotateX(0)rotateY(-90deg)rotateZ(0);
}

.phone_lateral.left-phone {
  margin-left: 0;
  left: -20px;
}

.phone_lateral.right-phone {
  margin-left: 0;
  left: auto;
  right: -20px;
}

.phone_bottom {
  perspective-origin: 50%;
  transform-origin: 50% 100%;
  width: 40px;
  height: 56.2%;
  transform-style: preserve-3d;
  background-color: #3f3e3e;
  margin-left: 0;
  margin-right: auto;
  position: absolute;
  inset: auto auto 0% -20px;
  transform: rotateX(90deg)rotateY(0)rotateZ(90deg);
}

.phone_top {
  perspective-origin: 50%;
  transform-origin: 50% 0;
  width: 40px;
  height: 56.2%;
  transform-style: preserve-3d;
  background-color: #3f3e3e;
  margin-left: 0;
  margin-right: auto;
  display: block;
  position: absolute;
  inset: 0 auto auto -20px;
  transform: rotateX(90deg)rotateY(0)rotateZ(-90deg);
}

.phone-screen {
  background-color: #b9b9b9;
  background-image: radial-gradient(circle, #ededed, #d0d0d0);
  border-radius: 20px;
  width: 96%;
  height: 97%;
  display: block;
  position: relative;
}

.phone-camara {
  z-index: 2;
  opacity: 1;
  width: 30%;
  height: 3%;
  transform-style: preserve-3d;
  background-color: #414141;
  border-radius: 20px;
  display: block;
  position: absolute;
  top: 24px;
  bottom: auto;
  transform: translate3d(0, 0, 2px);
  box-shadow: 0 0 5px #0000007d;
}

.phone-3d-ver-2 {
  z-index: 4;
  perspective: 400px;
  width: 200px;
  height: 360px;
  transform-style: preserve-3d;
  margin: auto -203px 198px auto;
  display: block;
  position: absolute;
  inset: 0 0%;
  transform: perspective(400px)perspective(954px);
}

.phone-3d-ver-2.no-separation {
  z-index: 5;
  transform-style: preserve-3d;
  flex: none;
  margin-left: 0;
  position: absolute;
  top: -257px;
  left: -394px;
  right: auto;
  transform: scale(.5)perspective(954px);
}

.phone-3d-ver-2.sample-portfolio {
  transform-style: preserve-3d;
  transform: scale(.5)perspective(954px)rotateX(26deg)rotateY(-34deg)rotateZ(23deg);
}

.phone_face_from-ver-2 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: #b9b9b9;
  background-image: linear-gradient(180deg, var(--yellow-bonive), #050c10);
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  border-radius: 20px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  transform: translate3d(0, 0, 20px);
}

.phone_face_from-ver-2.wicth-3d, .phone_face_from-ver-2.wicth-3d._1 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 18px);
}

.phone_face_from-ver-2.wicth-3d._2 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 16px);
}

.phone_face_from-ver-2.wicth-3d._3 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 14px);
}

.phone_face_from-ver-2.wicth-3d._4 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 12px);
}

.phone_face_from-ver-2.wicth-3d._5 {
  transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 10px);
}

.phone_face_from-ver-2.wicth-3d._6 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 8px);
}

.phone_face_from-ver-2.wicth-3d._7 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 6px);
}

.phone_face_from-ver-2.wicth-3d._8 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 4px);
}

.phone_face_from-ver-2.wicth-3d._9 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 2px);
}

.phone_face_from-ver-2.wicth-3d._10 {
  transform: translate(0);
}

.phone-screen-ver-2 {
  width: 94%;
  height: 97%;
  transform-style: preserve-3d;
  background-color: #b9b9b900;
  background-image: linear-gradient(204deg, #252510, #696734 19%, #a19f5c 25%, #fffb99 84%, #fffdd2);
  border-radius: 20px;
  display: block;
  position: relative;
  overflow: visible;
  transform: none;
  box-shadow: inset 0 2px 17px 2px #fffcdbe8;
}

.phone-screen-ver-2.black-version {
  background-color: #d0d0d0;
  background-image: none;
  border-radius: 32px;
}

.container-header {
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: auto;
  min-height: 70vh;
  position: relative;
  overflow: hidden;
}

.container-header.work {
  justify-content: center;
  align-items: center;
  max-width: 80vw;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}

.text-header-animatior {
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: normal;
  flex: 1;
  margin-left: auto;
  margin-right: 0;
  position: relative;
}

.text-header-animatior.work {
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: auto;
}

.text-header-animatior.work.holf {
  width: 50%;
}

.h1-animator {
  z-index: 2;
  width: auto;
  max-width: 500px;
  font-family: var(--font-family);
  color: var(--neutral-color-yellow);
  text-align: left;
  letter-spacing: -4px;
  flex: 0 auto;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0%;
  font-size: 70px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  position: relative;
}

.h1-animator.black {
  color: var(--neutral-300);
}

.h1-animator.full-width {
  width: 100%;
  max-width: none;
}

.h1-animator.full-width.black.bottom-space {
  margin-bottom: 32px;
}

.h1-animator.footer {
  background-color: #1a1a1a00;
  border-radius: 16px;
  max-width: none;
  padding: 36px 20px 36px 43px;
  font-family: Lexend, sans-serif;
}

.h1-animator.header {
  z-index: 1;
  clear: both;
  color: #b3b178;
  letter-spacing: -6px;
  text-shadow: 7px 9px 1px #00000029;
  max-width: 600px;
  font-size: 70px;
  position: relative;
}

.h1-animator.header.work {
  max-width: 700px;
}

.h1-animator.padding-bottom {
  padding-bottom: 0;
}

.h1-animator.header {
  max-width: 600px;
  color: var(--soft-dark-brand-color);
  letter-spacing: 0;
  text-shadow: none;
  border-bottom: 2px solid #fffb9926;
  border-radius: 0;
  margin-bottom: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  font-family: Lexend, sans-serif;
  font-size: 2rem;
}

.h5-animator {
  font-family: var(--font-family);
  color: var(--yellow-bonive);
  text-align: left;
  border: 1px #000;
  flex: none;
  margin-top: 10px;
  font-size: .8rem;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
  position: relative;
}

.h5-animator.black {
  color: var(--neutral-700);
}

.nav-bard-animator {
  z-index: 5;
  background-color: #fff;
  border-bottom: 1px solid #fffb991f;
  flex-flow: row;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 5vw;
  position: fixed;
  inset: 0 0% auto;
}

.flex-block {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  overflow: visible;
}

.caption {
  font-family: var(--font-family);
  color: var(--yellow-bonive);
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  top: 0;
  bottom: 0;
}

.caption.black {
  color: #dbdab5;
  text-align: left;
  mix-blend-mode: normal;
  font-weight: 400;
}

.caption.black.outside {
  flex: none;
  height: 180px;
  font-size: 90px;
  line-height: 1;
  position: absolute;
  top: -236px;
  left: 0;
}

.caption.black.outside-3d {
  z-index: 2;
  pointer-events: none;
  width: auto;
  transform-style: preserve-3d;
  flex: none;
  line-height: 1;
  position: absolute;
  top: 14px;
  transform: translate3d(0, 0, 129px);
}

.click-here {
  justify-content: center;
  align-items: center;
  height: auto;
  display: none;
  position: absolute;
  bottom: 483.008px;
}

.caption-copy {
  font-family: var(--font-family);
  color: var(--yellow-bonive);
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  top: 0;
  bottom: 0;
  transform: rotate(90deg);
}

.box-3d-sample-animation {
  box-sizing: content-box;
  cursor: pointer;
  mix-blend-mode: normal;
  background-image: url('../images/Set-image-3-M.svg');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 8px;
  width: 50%;
  height: 100%;
  padding-top: 16px;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
}

.box-3d-sample-animation.profile {
  background-image: none;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.box-3d-sample-animation.phone {
  transform-origin: 0 100%;
  background-color: #fffffffa;
  background-image: none;
  border-radius: 32px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  overflow: visible;
}

.box-3d-sample-animation.sample-project {
  transform-origin: 0 100%;
  cursor: auto;
  background-color: #fffffffa;
  background-image: none;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  overflow: visible;
}

.flex-block-3 {
  z-index: 5;
  perspective: 1688px;
  perspective-origin: 50%;
  transform-origin: 50%;
  flex-flow: column;
  width: 50%;
  margin-left: -100px;
  margin-right: auto;
  position: relative;
  left: 0;
  transform: scale(.4);
}

.flex-block-3.work {
  perspective: none;
  margin-left: 0;
}

.bonive-animaiton-profile {
  background-image: url('../images/Bonive-artist-web-scure.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  flex: 1;
  width: 100%;
  display: block;
  position: relative;
}

.phone-aniamtion {
  opacity: .73;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  mix-blend-mode: normal;
  background-image: url('../images/Sample-APP.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 32px;
  flex: 1;
  width: 100%;
}

.phone-aniamtion.sample-work {
  background-image: none;
}

.phone-aniamtion-2 {
  z-index: 2;
  opacity: .73;
  mix-blend-mode: normal;
  background-image: url('../images/Alert-screen-_-danger-A.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 32px;
  flex: none;
  width: 90%;
  height: 90%;
  position: absolute;
  inset: auto 0%;
}

.phone-box-aniamiton-3 {
  z-index: 2;
  opacity: .73;
  mix-blend-mode: normal;
  background-image: url('../images/Alert-screen-_-Info-A.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 32px;
  flex: none;
  width: 90%;
  height: 90%;
  position: absolute;
  inset: auto 0% auto auto;
}

.animation-box-sample-1 {
  z-index: 2;
  opacity: .73;
  pointer-events: none;
  mix-blend-mode: normal;
  background-image: url('../images/Image-5-painter-phone-M.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 32px;
  flex: none;
  width: 90%;
  height: 90%;
  position: absolute;
  inset: auto 0%;
}

.sample-web-animaiton-2 {
  z-index: 2;
  opacity: .73;
  pointer-events: none;
  mix-blend-mode: normal;
  background-image: url('../images/Owl-animate-Responsive2.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 32px;
  flex: none;
  width: 90%;
  height: 90%;
  position: absolute;
  inset: auto 0%;
}

.sample-laptop-aniamton-3 {
  z-index: 2;
  opacity: .73;
  pointer-events: none;
  mix-blend-mode: normal;
  background-image: url('../images/rustic-diamond-M.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 32px;
  flex: none;
  width: 90%;
  height: 90%;
  position: absolute;
  inset: auto 0%;
}

.aniamiton-laptop-total-4 {
  z-index: 2;
  opacity: .73;
  pointer-events: none;
  mix-blend-mode: normal;
  background-image: url('../images/2-You-dont-need-M.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 32px;
  flex: none;
  width: 90%;
  height: 90%;
  position: absolute;
  inset: auto 0%;
}

.full-link {
  width: 100%;
  height: 100%;
}

.full-link.absolute {
  position: absolute;
}

.bonive-head-face {
  background-image: linear-gradient(201deg, #fffb9987, #c8f8c800 49%, #9cf6ed00 64%, #87f5ff8f), url('../images/boni-image--3_1.avif');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, 150%;
  border: 3px solid #fffb998c;
  border-radius: 16px;
  width: 100%;
  height: 200px;
  position: absolute;
  box-shadow: 0 2px 60px #00000075, inset 0 2px 600px #fff3;
}

.bonive-head-face.no-backgroun {
  height: 200px;
  box-shadow: none;
  object-fit: cover;
  background-image: url('../images/Photo-bonive.png');
  background-repeat: no-repeat;
  background-size: cover;
  border: 0 #fffb9900;
  border-radius: 4px;
  flex: none;
  position: relative;
}

.bonive-head-face.no-backgroun.large {
  border-radius: 2px;
  height: 300px;
}

.bonive-picture-pa {
  z-index: 0;
  background-image: url('../images/Boni_high-quality_logo.png');
  background-position: 50%;
  background-size: cover;
  flex: none;
  width: 50%;
  height: 200px;
  position: relative;
}

.bonive-picture-pa.shorter {
  border: 2px solid #929292ad;
  border-radius: 8px;
  flex: none;
  width: 40px;
  height: 200px;
  overflow: hidden;
}

.bonive-picture-pa.shorter.large {
  border-radius: 4px;
  height: 300px;
}

.bonive-picture-pa.header {
  filter: brightness(131%);
  object-fit: cover;
  border: 1px solid #fffb99;
  border-radius: 3px;
  flex-flow: row;
  flex: none;
  width: 25px;
  min-height: 100px;
  margin-bottom: 0;
  overflow: hidden;
  box-shadow: 0 8px 20px 3px #0003, 0 5px 4px #0000003d;
}

.text-hover-bonive {
  width: 100%;
  height: 50px;
  display: flex;
  position: absolute;
  top: auto;
  bottom: 10px;
  overflow: hidden;
}

.h5 {
  color: #fffb999e;
  letter-spacing: .5px;
  flex: none;
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Bona Nova SC, sans-serif;
  font-size: 2rem;
  font-weight: 400;
}

.box-leeter-aniamtion {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  mix-blend-mode: overlay;
  flex: none;
  justify-content: space-around;
  width: 1050px;
  display: flex;
}

.background {
  z-index: 0;
  background-color: #fff;
  border: 2px solid #fffb990d;
  border-radius: 20px;
  flex: none;
  width: 98%;
  height: 99%;
  margin: auto;
  position: absolute;
  inset: 0%;
}

.in-part-background {
  z-index: 0;
  opacity: .19;
  background-color: #0000;
  border-radius: 20px;
  flex: none;
  width: 80%;
  height: 80%;
  margin: auto;
  position: absolute;
  inset: 0%;
}

.in-part-background.bigger {
  width: 90%;
}

.section-web-animator {
  z-index: 0;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: #fff;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: auto;
  margin-top: -122px;
  padding: 0 10vw 64px;
  display: flex;
  position: relative;
  overflow: visible;
}

.section-web-animator.yellow {
  background-color: var(--yellow-bonive);
  margin-bottom: 0;
}

.section-web-animator.yellow.separation-content {
  z-index: 4;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  background-color: var(--color);
}

.section-web-animator.full-height {
  background-color: #fff0;
  min-height: 50vh;
  overflow: hidden;
}

.section-web-animator.no-bottom-space {
  grid-column-gap: 64px;
  grid-row-gap: 64px;
  margin-top: 109px;
  margin-bottom: -20px;
  overflow: hidden;
}

.section-web-animator.no-bottom-space.grey_background {
  background-color: #fff;
}

.section-web-animator.hover {
  z-index: 3;
}

.section-web-animator.hover.half-page {
  height: 50vh;
}

.section-web-animator.hover.half-page.yellow {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: center;
  align-items: center;
  height: auto;
  min-height: 80vh;
  margin-top: 0;
}

.container-pa {
  z-index: 1;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: flex-start center;
  width: 100%;
  display: flex;
  position: relative;
}

.container-pa.black {
  background-color: var(--neutral-1);
  background-image: radial-gradient(circle, #323232, #000);
  border-radius: 16px;
  flex: none;
  padding: 16px;
}

.container-pa.black._3d-shadow {
  background-color: #faf6e700;
  background-image: none;
  border: 2px solid #fffb9917;
  border-radius: 8px;
  justify-content: center;
  align-items: flex-end;
  padding-top: 32px;
  padding-left: 32px;
  padding-right: 32px;
  display: flex;
  box-shadow: 0 20px 60px #0003, 0 12px 7px #0000001f, 0 5px #ccc7b4;
}

.container-pa.left {
  justify-content: flex-start;
  align-items: flex-end;
  margin-top: 128px;
}

.container-pa.center {
  justify-content: space-between;
  align-items: center;
}

.container-pa.center.bottom_aling {
  justify-content: space-between;
  align-items: flex-end;
}

.container-pa.vertical {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
}

.container-pa.center-content {
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
}

.container-pa.alling-center {
  justify-content: center;
  align-items: center;
}

.pr-pa {
  z-index: 5;
  max-width: 600px;
  font-family: var(--font-family);
  color: var(--neutral-color-yellow);
  letter-spacing: -2px;
  flex: none;
  margin-top: 8px;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  position: relative;
}

.pr-pa.center {
  margin-left: auto;
  margin-right: auto;
}

.pr-pa.left {
  margin-right: auto;
}

.content-pa {
  flex: none;
  width: 60%;
}

.content-pa.b {
  z-index: 3;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: center;
  align-items: flex-start;
  width: 60%;
  margin-top: 0;
  position: relative;
}

.content-pa.b.lateral {
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.content-pa.b.left-content {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
}

.content-pa.b.left-content.compress {
  flex-flow: row;
  margin-left: 0;
  margin-right: auto;
}

.content-pa.b.header {
  flex-flow: row;
  order: -1;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-left: 8%;
}

.content-pa.b._70 {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  width: 70%;
}

.content-pa.s {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  width: 50%;
  height: 100%;
  position: relative;
}

.content-pa.s.left {
  justify-content: flex-end;
  align-items: flex-start;
  margin-right: auto;
}

.content-pa.s.left.top_spacing {
  max-width: 300px;
  margin-top: 121px;
}

.content-pa.show-sample {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  width: 30%;
  height: 100%;
}

.content-pa.glass-version {
  z-index: 3;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  -webkit-backdrop-filter: hue-rotate(180deg) blur(6px);
  backdrop-filter: hue-rotate(180deg) blur(6px);
  width: 35%;
  height: auto;
  transform-style: preserve-3d;
  border: 1px solid #fffb9912;
  border-radius: 16px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 150px;
  margin-bottom: -109px;
  padding: 200px 16px;
  position: relative;
  transform: translate3d(0, 0, 88px);
}

.pr-pa-2 {
  max-width: 500px;
  font-family: var(--pr);
  color: var(--neutral-color-yellow);
  text-align: left;
  letter-spacing: -.5px;
  flex: none;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4;
  position: relative;
}

.pr-pa-2.normal {
  font-family: var(--pr);
  color: var(--soft-dark-brand-color);
  font-weight: 500;
}

.pr-pa-2.center {
  max-width: 70%;
  min-height: 160px;
  font-family: var(--pr);
  color: var(--neutral-color-yellow);
  text-align: center;
  letter-spacing: -.5px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
  line-height: 1.3;
}

.pr-pa-2.center.full-width {
  max-width: 100%;
  color: var(--soft-dark-brand-color);
}

.pr-pa-2.black {
  color: #423b3b;
  font-weight: 400;
}

.pr-pa-2.black.caption {
  color: #171717;
  letter-spacing: 0;
  font-size: .8rem;
  font-weight: 700;
}

.pr-pa-2.black.caption.normal {
  color: var(--yellow-bonive);
  font-weight: 500;
}

.pr-pa-2.black.caption.black-font {
  color: #423b3b;
}

.pr-pa-2.left {
  margin-right: auto;
}

.button-pa {
  z-index: 2;
  width: 100%;
  height: 100%;
  color: var(--yellow-bonive);
  text-align: left;
  text-shadow: 0 1px #b1adada3;
  mix-blend-mode: normal;
  background-color: #3898ec00;
  flex: none;
  justify-content: center;
  align-items: center;
  font-family: Lexend, sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1;
  display: flex;
  position: absolute;
  inset: 0%;
}

.button-pa.t {
  letter-spacing: 0;
  font-size: 1rem;
}

.button-pa.t.white {
  color: var(--neutral-color-yellow);
  letter-spacing: 0;
  font-size: 1.2rem;
}

.button-pa.white {
  font-family: var(--font-family);
  color: var(--neutral-color-yellow);
  font-size: 1.6rem;
  font-weight: 400;
}

.button-pa-f {
  border: 2px solid #89874e;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 100px;
  margin: 16px auto;
  position: relative;
  overflow: hidden;
  transform: perspective(1284px);
  box-shadow: inset 0 2px 20px #fff3, 0 5px #969463, 0 18px 5px #00000014;
}

.button-pa-f.left {
  flex: none;
  margin-left: 0;
}

.button-pa-f.left.m {
  flex: none;
  width: 300px;
  height: 70px;
}

.button-pa-f.left.m.scale {
  margin-left: auto;
  margin-right: auto;
  transform: scale(.8)perspective(1284px);
}

.button-pa-f.left.m.scale.test {
  width: 150px;
  margin-top: 0;
  margin-left: -17px;
}

.button-pa-f.left.m.scale.left-order {
  margin-left: 0;
  margin-right: auto;
  position: relative;
  transform: perspective(1284px);
  box-shadow: 0 20px 20px #0000001f, inset 0 2px 20px #fff3, 0 5px #969463, 0 20px 5px -6px #00000017;
}

.button-pa-f.left.center {
  flex: none;
  width: 300px;
  height: 50px;
}

.button-pa-f.l {
  z-index: auto;
  perspective: 1321px;
  flex: none;
  height: 250px;
  margin-top: 0;
  margin-bottom: 52px;
  overflow: hidden;
}

.button-pa-f.absolute {
  background-image: linear-gradient(0deg, #fff3, #f0ead8 12%, #fff9e8 60%, #fff);
  border-width: 1px;
  border-color: #fffcbb;
  border-radius: 4px;
  flex-flow: row;
  flex: none;
  width: 300px;
  height: 80px;
  box-shadow: inset 0 2px 20px #ffffffd9, 0 40px 20px -30px #0003, 0 18px 30px #0000001c, 0 12px 7px 1px #00000014, 0 2px #646340;
}

.button-pa-f.absolute.left {
  width: 200px;
  box-shadow: none;
  background-color: #fff;
  border-radius: 4px;
  margin-top: 0;
  margin-bottom: 0;
  transform: perspective(1284px);
}

.button-pa-f.absolute.left.reduce {
  z-index: 15;
  background-image: linear-gradient(0deg, #fff3, var(--soft-dark-brand-color) 12%, var(--soft-dark-brand-color) 60%, var(--yellow-bonive));
  cursor: auto;
  height: 50px;
}

.button-pa-f.large {
  background-color: #fff;
  flex: none;
  width: 600px;
  height: 80px;
  box-shadow: 0 50px 14px #fff7a414, inset 0 2px 20px #fff3, 0 5px #969463, 0 18px 5px #00000017;
}

.button-pa-f.phone {
  margin-left: 0;
}

.background-box-button {
  background-color: var(--yellow-bonive);
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translate(-100%);
}

.divider {
  z-index: 2;
  background-color: var(--background-soft-color);
  opacity: .02;
  width: 100%;
  height: 2px;
  margin-top: 9px;
  position: relative;
}

.divider.apsolute {
  z-index: 1;
  background-color: var(--soft-dark-brand-color);
  opacity: .02;
  flex: none;
  max-width: 70vw;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 50px;
}

.divider.black {
  background-color: #505050;
}

.divider.none {
  display: none;
}

.container-portfolio-pa {
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
  width: 100%;
  height: 200px;
  transform-style: preserve-3d;
  background-color: #faf6e7;
  border-radius: 13px;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  position: relative;
  transform: translate3d(0, 0, 10px);
  box-shadow: 0 20px 18px 6px #0000000f, 0 10px 6px #0000000a;
}

.container-portfolio-pa.none {
  display: none;
}

.image-3 {
  object-fit: contain;
  background-color: #25252500;
  border-radius: 14px;
  width: 100%;
  height: 100%;
}

.button-portfolio-open-pa {
  background-color: #141414;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.sample-conent-portfoiol-pa {
  z-index: 3;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background-color: #fffb992b;
  border: 1px solid #ffe9a81c;
  border-radius: 16px;
  flex: none;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 800px;
  height: 100%;
  padding: 16px;
  display: flex;
  position: absolute;
  inset: -124px -8% 0 auto;
  box-shadow: inset 0 2px 120px #ffffff12, 0 2px 60px #fffb9930;
}

.sample-animaiton-up-panel-pa {
  border-radius: 19px;
}

.sample-animaiton-up-panel-pa.white {
  object-fit: contain;
  object-position: 50% 30%;
  background-color: #fff;
  flex: 1;
  max-width: 300px;
}

.sample-animaiton-up-panel-pa.white.center {
  object-fit: cover;
  object-position: 50% 20%;
}

.sample-animaiton-up-panel-pa.black-background {
  background-color: #252525;
}

.h6 {
  opacity: 1;
  height: 100%;
  font-family: var(--font-family);
  color: var(--neutral-color-yellow);
  letter-spacing: .5px;
  flex: none;
  margin-top: 0;
  margin-bottom: 0;
  font-size: .8rem;
}

.h6.bold {
  opacity: 1;
  font-weight: 400;
}

.h6.bold.top_margin {
  color: var(--neutral-300);
  margin-top: 50px;
}

.full-link-box {
  z-index: 5;
  position: absolute;
  inset: 0%;
}

.over-mirro-bonive {
  z-index: 5;
  -webkit-backdrop-filter: brightness(200%);
  backdrop-filter: brightness(200%);
  background-image: radial-gradient(circle, #fff0 73%, #ffffff42);
  border: 1px solid #fffb9917;
  border-radius: 16px;
  flex: none;
  width: 500px;
  height: 30px;
  display: block;
  position: absolute;
  bottom: 310px;
  left: -408px;
  right: auto;
  box-shadow: 0 2px 60px #ffffff9c;
}

.flex-block-6 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  max-width: 60%;
  height: 450px;
}

.flex-block-7 {
  background-color: #0000;
  border-radius: 8px;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 450px;
  margin: auto;
  position: relative;
}

.link-menu {
  opacity: .48;
  color: var(--yellow-bonive);
  cursor: pointer;
  border: 1px #000;
  flex: none;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
  position: relative;
}

.link-menu:hover {
  opacity: 1;
  box-shadow: 0 2px 600px #fffec933;
}

.vertical-line {
  pointer-events: none;
  perspective-origin: 50% 0;
  transform-origin: 50% 0;
  background-image: linear-gradient(#fffb9945, #fffb9900 83%);
  width: 70%;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: -161% 0% 0%;
}

.little-animation-bo {
  background-image: url('../images/Logo-B-trival-Bonive.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  flex: none;
  width: 60px;
  height: 60px;
  position: absolute;
  left: -49px;
}

.body-11 {
  background-color: #2e2e1b;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.section-pa-show-project {
  flex-flow: column;
}

.section-pa-show-project.black {
  background-color: #fff;
}

.section-3 {
  z-index: 3;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 90vh;
  padding-left: 10vw;
  padding-right: 10vw;
  display: flex;
  position: relative;
  overflow: hidden;
}

.section-3.bottom_alling {
  justify-content: center;
  align-items: flex-end;
}

.section-3.bottom_alling.vertical-flex {
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  height: auto;
  min-height: 90vh;
  padding-top: 140px;
}

.animation-header-pa {
  background-color: #fff;
  border-radius: 8px;
  flex: none;
  max-width: 60%;
  max-height: 800px;
  position: relative;
}

.animation-header-pa.center {
  z-index: 2;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  max-width: 100vw;
  margin-top: 24px;
  margin-left: 0;
  margin-right: 0;
  position: relative;
}

.nav-bar-pa-copy {
  background-color: var(--yellow-bonive);
  flex-flow: row;
  flex: none;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: 50px;
  padding-left: 5vw;
  padding-right: 5vw;
  display: flex;
  position: relative;
}

.nav-bar-pa-copy.futter {
  z-index: 5;
}

.show-portfolio {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: #fff;
  border-radius: 16px;
  flex: none;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  height: auto;
  padding: 8px 8px 16px;
  display: grid;
}

.show-portfolio._4-colums {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  place-items: center;
}

.show-portfolio.flex {
  display: flex;
  overflow: hidden;
}

.sample-portfolio {
  object-fit: contain;
  border-radius: 14px;
  margin: auto;
}

.sample-portfolio.black {
  background-color: #161616;
}

.sample-portfolio.full {
  width: 100%;
}

.round-bordes {
  border-radius: 20px;
  flex: none;
  min-width: 60px;
  margin: auto;
}

.round-bordes.short {
  aspect-ratio: 2 / 3;
  object-fit: cover;
  max-width: 200px;
  height: 100%;
}

.block-references {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: row;
  flex: none;
}

.youtube {
  border-radius: 16px;
}

.button-contact-allways {
  z-index: 3;
  background-color: #161616;
  border: 2px solid #89874e;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 50px;
  margin: 16px auto;
  position: fixed;
  bottom: 0;
  left: -50px;
  right: auto;
  overflow: hidden;
  transform: perspective(1284px);
  box-shadow: inset 0 2px 20px #fff3, 0 5px #969463, 0 9px 5px #00000029;
}

.icon-show-project {
  width: 50px;
}

.icon-show-project.short {
  width: 40px;
  margin-left: auto;
  margin-right: auto;
}

.content-icon-protfolio {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  opacity: 1;
  filter: saturate(0%);
  mix-blend-mode: multiply;
  justify-content: flex-start;
  align-items: center;
}

.content-icon-protfolio.left {
  margin-right: auto;
}

.sample-style {
  border-radius: 10px;
  flex: none;
  margin-left: auto;
  margin-right: auto;
}

.body-12 {
  background-color: #fff;
}

.flex-block-8 {
  background-image: linear-gradient(212deg, #223a7880, #646b7d00 23%, var(--borde-yellow) 73%, #ffde89a3), url('../images/bonive-forest-F_1.webp');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  border: 2px solid #fffb9975;
  border-radius: 16px;
  flex: none;
  justify-content: flex-start;
  align-items: flex-end;
  width: 600px;
  height: 800px;
  box-shadow: 0 13px 18px #00000024;
}

.image-services {
  border-radius: 10px;
  flex: none;
  height: 150px;
  margin: 50px auto 16px;
  position: relative;
}

.content-services {
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 350px;
  margin-bottom: 89px;
  padding-left: 8px;
  padding-right: 8px;
}

.h2-animator {
  font-family: var(--font-family);
  color: var(--soft-dark-brand-color);
  text-align: center;
  letter-spacing: -2px;
  font-weight: 400;
  line-height: 1;
}

.head-aniamtion {
  object-fit: cover;
  flex: none;
  max-width: 1000px;
  height: 500px;
  position: absolute;
  right: -200px;
}

.glass-over-2 {
  z-index: 5;
  opacity: .21;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  mix-blend-mode: color-dodge;
  background-color: #d4faffe0;
  border: 1px solid #fffb9930;
  border-radius: 2px;
  flex: none;
  width: 150vw;
  height: 15px;
  position: absolute;
  bottom: 460px;
  left: -664px;
  box-shadow: 0 0 20px #b6f4ff80, 0 5px 5px #00000078;
}

.image-sample-phone-protfolio {
  width: 100%;
  height: 100%;
}

.full-picture-sample {
  border-radius: 20px;
  flex: none;
  width: 100%;
  min-width: 70vw;
  margin: auto;
}

.flex-block-9 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}

.flex-block-9.full {
  flex: none;
}

.detail-aniamiton-image {
  opacity: .05;
  flex: none;
  position: absolute;
}

.container-contact {
  z-index: 2;
  pointer-events: auto;
  perspective: 1394px;
  cursor: pointer;
  width: 100%;
  height: auto;
  transform-style: preserve-3d;
  background-color: #fff;
  border-radius: 13px;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  padding: 140px 32px;
  position: relative;
  transform: translate3d(0, 0, 10px);
}

.name {
  font-family: var(--font-family);
  color: #fff;
  background-color: #f3f3f3;
  border: 1px #000;
  border-radius: 4px;
  padding-left: 15px;
}

.container-form {
  border-style: solid none none;
  border-width: 4px 1px 2px;
  border-color: #fffb991f var(--yellow-bonive) #fffb9924;
  margin-top: 16px;
  margin-bottom: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.submit-button-pa {
  font-family: var(--font-family);
  color: #4f4f4f;
  text-transform: uppercase;
  background-color: #1d8f8f00;
  border-radius: 6px;
  font-size: 20px;
  position: absolute;
  inset: 0%;
}

.text-block-6 {
  font-family: var(--font-family);
  color: var(--yellow-bonive);
  text-align: left;
  letter-spacing: -2px;
  font-size: 40px;
  line-height: 1;
}

.success-message-4 {
  background-color: #263126;
  border-radius: 20px;
}

.div-block-9 {
  z-index: 2;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: #0c0b0b00;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  place-items: center stretch;
  width: 70%;
  height: auto;
  margin-left: auto;
  margin-right: 5vw;
  padding-top: 3rem;
  padding-bottom: 3rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.div-block-9.issomart {
  background-color: #6492cc00;
  width: 60%;
}

.div-block-9.short-height {
  height: auto;
  margin-top: 32px;
  margin-bottom: 32px;
  position: relative;
}

.div-block-9.short-height.body-12 {
  border: 1px #000;
  justify-content: center;
  align-items: center;
  width: 1334px;
  height: 350px;
  margin-bottom: 32px;
  overflow: hidden;
}

.div-block-9.grid {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  background-color: #5499f5;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.div-block-9.sphere-rotation {
  width: auto;
  height: auto;
  min-height: 100vh;
  margin: 32px auto;
  position: relative;
}

.div-block-9.footer-size-flow {
  width: auto;
  height: 368px;
  margin: 32px auto;
  position: relative;
}

.div-block-9.background {
  z-index: 5;
  background-image: none;
  width: 100%;
  position: relative;
}

.body-13 {
  background-color: #212424;
}

.body-13.issomark {
  background-color: #5499f5;
}

.body-13.black-flow {
  background-color: #0d0e0e;
}

.body-13.white {
  cursor: auto;
  background-color: #fff;
  overflow: visible;
}

.body-13.color-legacy-academy {
  background-color: #262626;
}

.body-13.special-black {
  background-color: #0a1013;
}

.full-test-aniamtion {
  z-index: 10;
  filter: none;
  background-color: #0000;
  width: 100%;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  inset: 0%;
}

.just-part-aniamtion {
  z-index: 10;
  filter: none;
  background-color: #0000;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  inset: 0%;
}

.texture-over-flow {
  z-index: 10;
  filter: blur(60px);
  mix-blend-mode: lighten;
  flex: none;
  width: 100%;
  height: 350px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  inset: 40px 0% 0%;
}

.end-aniamtion-flow {
  z-index: 5;
  filter: none;
  background-color: #0d0e0e;
  border: 1px #424242;
  border-radius: 12px;
  flex: none;
  width: 878px;
  height: 368px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: 0%;
}

.header-flow {
  z-index: 5;
  filter: none;
  background-color: #0d0e0e;
  border: 1px #424242;
  border-radius: 12px;
  flex: none;
  width: 1334px;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: 0%;
}

.flow-header-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  min-height: 100vh;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.circle-aniamtion-flow {
  z-index: 5;
  filter: none;
  background-color: #0d0e0e;
  border: 1px #424242;
  border-radius: 12px;
  flex: none;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: 0%;
}

.lottie-animation-4 {
  filter: saturate(200%);
  mix-blend-mode: normal;
}

.animaiton-3-box {
  z-index: 5;
  filter: none;
  background-color: #0d0e0e;
  border: 1px #424242;
  border-radius: 12px;
  flex: none;
  width: 1334px;
  height: 368px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: 0%;
}

.background-video {
  width: 100%;
  height: 100%;
}

.div-block-4x4 {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  background-color: #0c0b0b00;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 80%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.div-block-10 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: center;
  width: 60vw;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.short-mascot {
  width: 200px;
}

.sample-container.gridd {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: center;
  max-width: 700px;
  min-height: 100vh;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

._40-size-container {
  width: 200px;
}

.banner-animation {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.full-banner {
  width: 60vw;
}

.full-banner.absolute {
  position: absolute;
}

.full-banner.absolute.full-width {
  width: 100%;
}

.container-header-portfolio {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex: none;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: stretch stretch;
  width: 100%;
  height: 400px;
  display: flex;
  transform: translate(0%);
}

.animation-header-sample {
  background-image: url('../images/Road-map-3.webp');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: contain;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 80%;
  min-height: auto;
  padding: 2rem;
  display: flex;
}

.animation-header-sample.titano {
  background-position: 50%;
  flex: none;
  width: 80%;
  height: 80%;
  min-height: 0;
}

.animation-header-sample.mta {
  background-image: url('../images/Set-image-3-M.svg');
  background-position: 50%;
}

.animation-header-sample.walliot {
  background-image: none;
  padding: 0;
}

.animation-header-sample.cat-animation {
  background-color: #11101000;
  background-image: none;
  width: 100%;
  height: auto;
  min-height: auto;
  max-height: 150px;
  padding: 0;
}

.animation-header-sample.issomart {
  background-color: #5ca3fd;
  background-image: none;
  border-radius: 50px;
  flex: 1;
  padding: 0;
}

.animation-header-sample.esport {
  background-image: none;
  border-radius: 50px;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.animation-header-sample.earth-chain {
  background-image: url('../images/Image-2-boy-playing.svg');
  background-position: 50%;
  background-size: auto;
  border-radius: 50px;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.animation-header-sample.mta-animation {
  background-image: url('../images/Working-at-home-animation-F-.svg');
  background-position: 0 0;
  background-size: auto;
  border-radius: 50px;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.animation-header-sample.bruash {
  background-image: url('../images/Image-5-painter-phone-M.svg');
  background-position: 50%;
  background-size: cover;
  border-radius: 50px;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.container-header-sample {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  background-color: #11101000;
  border: 1px #e9e5871f;
  border-radius: 15px;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  width: auto;
  max-width: 300px;
  height: auto;
  max-height: 200px;
  padding: 0;
  display: flex;
}

.caption-header-aniamtions {
  font-family: var(--pr);
  color: #fffdc9;
  text-align: center;
  letter-spacing: 2px;
  flex: none;
  font-size: 1.5vh;
  font-weight: 500;
  line-height: 1.4;
  position: relative;
}

.lottie-header {
  aspect-ratio: auto;
  object-fit: contain;
  flex: none;
  justify-content: center;
  align-items: center;
  max-width: 400px;
  display: flex;
  position: relative;
}

.lottie-header.max-height {
  object-fit: fill;
  max-height: 300px;
}

.div-block-11 {
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.div-block-11.auto-bottom {
  margin-top: auto;
  margin-bottom: 15px;
}

.left-panel-portfolio-test {
  z-index: 5;
  width: 200px;
  height: 100vh;
  color: var(--neutral-1);
  background-color: #1a1a1a;
  border-right: 1px solid #c9b67d36;
  flex-flow: column;
  flex: none;
  align-items: flex-start;
  padding-top: 31px;
  padding-left: 12px;
  padding-right: 16px;
  display: flex;
  position: fixed;
  inset: 0% auto 0% 0%;
  box-shadow: inset -6px 2px 18px #fff4a205, 0 2px 200px 8px #0003;
}

.div-block-13 {
  background-image: url('../images/Polygraph-step-1-A-R.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
}

.div-block-13._1 {
  flex: none;
  width: 300px;
  height: 300px;
}

.div-block-13._2 {
  background-image: url('../images/Polygraph-step-2-A-R.svg');
  flex: none;
  width: 300px;
  height: 300px;
}

.div-block-13._3 {
  background-image: url('../images/Polygraph-step-3-AR.svg');
  flex: none;
  width: 300px;
  height: 300px;
}

.div-block-13._4 {
  background-image: url('../images/Polygraph-step-4-A-R-2.svg');
  flex: none;
  width: 300px;
  height: 300px;
}

.div-block-13._5 {
  background-image: url('../images/Polygraph-step-5-A-R.svg');
  flex: none;
  width: 300px;
  height: 300px;
}

.full-container-portfolio {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  background-color: #0c0b0b00;
  grid-template-rows: auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 70%;
  height: 100vh;
  margin-left: auto;
  margin-right: 10vw;
  padding-top: 3rem;
  padding-bottom: 3rem;
  display: grid;
}

.container-portfolio-standar._2-2 {
  background-image: url('../images/PP---1-Branded.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
}

.container-portfolio-standar._2-2._2 {
  background-image: url('../images/PG-4-Share-it-confidentially-M.svg');
}

.container-portfolio-standar._2-2._3 {
  background-image: url('../images/PG-3-DO-your-job-M-.svg');
}

.container-portfolio-standar._2-2._4 {
  background-image: url('../images/PG-name-your-own-price-M.svg');
}

.div-block-14 {
  background-image: url('../images/TLS-bank-animation.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  min-height: 400px;
}

.div-block-14._3 {
  background-image: none;
}

.div-block-14._4 {
  background-image: url('../images/The-house-ready-animation.svg');
}

.container-bonive-logos {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  opacity: 1;
  flex-flow: row;
  flex: none;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  place-content: center start;
  align-items: center;
  width: auto;
  height: auto;
  margin-left: 0;
  margin-right: auto;
  display: flex;
  position: relative;
  overflow: hidden;
}

.logo-ai-enterprise {
  opacity: 1;
  filter: brightness(0%);
  object-fit: contain;
  flex: none;
  width: 80px;
  height: 30px;
  max-height: 80px;
  margin-left: 0;
}

.logo-ai-enterprise.light {
  opacity: .95;
  object-fit: scale-down;
}

.div-block-15 {
  z-index: 0;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  filter: contrast(0%) invert();
  mix-blend-mode: normal;
  flex-flow: row;
  flex: none;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: stretch;
  width: auto;
  padding-left: 128px;
  display: flex;
  position: relative;
}

.div-block-15.vertical {
  flex-flow: column;
}

._3d-portfolio-ai-sample {
  opacity: .22;
  background-color: #fff;
  border-radius: 2rem;
  width: 400px;
  height: 300px;
  position: absolute;
  transform: perspective(1431px);
}

.div-block-20 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  flex: none;
  align-items: flex-start;
  width: 100%;
  height: auto;
  display: flex;
}

.h4-visual-designer {
  width: 100%;
  font-family: var(--font-family);
  color: #fffb99;
  text-align: left;
  flex: none;
  margin-top: 10px;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 90%;
  text-decoration: none;
}

.h4-visual-designer.header {
  z-index: 1;
  width: 300px;
  color: var(--soft-dark-brand-color);
  letter-spacing: 0;
  -webkit-text-stroke-color: var(--soft-dark-brand-color);
  margin-bottom: 9px;
  font-family: Lexend, sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
  position: relative;
}

.h4-visual-designer.half {
  letter-spacing: 0;
  width: 50%;
  font-family: Inconsolata, monospace;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
}

.div-block-21 {
  grid-column-gap: 67px;
  grid-row-gap: 67px;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.pr-explain-illustration {
  max-width: 500px;
  font-family: var(--pr);
  color: #2e2e2e;
  text-align: left;
  letter-spacing: -.5px;
  flex: none;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4;
  position: relative;
}

.div-block-22 {
  flex: 1;
}

.card-resume-porfolio {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: #faf6e7;
  border: 1.5px solid #fffb9912;
  border-radius: 12px;
  flex-flow: column;
  flex: none;
  width: 250px;
  height: 370px;
  padding: 1rem;
  display: flex;
  box-shadow: 0 10px 12px #00000012;
}

.card-resume-porfolio.bigger {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  width: 500px;
}

.div-block-23 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  flex: none;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.div-block-23.horizontal {
  flex-flow: row;
  justify-content: center;
  align-items: center;
}

.image-4 {
  filter: brightness(0%);
  flex: none;
  width: 10px;
  margin-left: 0;
}

.image-4.half {
  opacity: .51;
  object-fit: cover;
}

.div-block-24 {
  background-color: #fff0;
  border-radius: 6px;
  padding: .2rem 1rem;
}

.base-auto-carrucell {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  perspective-origin: 0%;
  transform-origin: 0%;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  transform: scale(.8);
}

.over-lateral-shadow {
  z-index: 20;
  pointer-events: none;
  background-image: radial-gradient(circle, #18181800 59%, #181818);
  width: 100%;
  position: absolute;
  inset: 0%;
}

.over-lateral-shadow.none {
  background-image: none;
}

.lottie-lighter {
  filter: brightness(122%);
}

.image-5 {
  height: 220px;
}

.div-block-27 {
  margin-bottom: 0;
  display: flex;
}

.div-block-27.black {
  opacity: .63;
  filter: invert();
  mix-blend-mode: multiply;
  border-radius: 8px;
  justify-content: space-between;
  width: 150px;
  margin-bottom: 0;
  padding: .5rem 1rem .5rem 0;
}

.c_img_portfo {
  height: 240px;
  transform-style: preserve-3d;
  background-image: linear-gradient(#fff, #fff);
  border-radius: 16px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
  transform: translate3d(0, 0, 40px);
}

.logo-header {
  background-color: var(--yellow-bonive);
  opacity: .46;
  width: 80px;
  height: 60px;
  color: var(--yellow-bonive);
  -webkit-text-fill-color: transparent;
  object-fit: contain;
  -webkit-background-clip: text;
  background-clip: text;
  flex: none;
  margin-left: 0;
}

.logo-header.shorter {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  width: 60px;
}

.social-proof-brand-illustrator {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: fill;
  border: 2px solid #00000030;
  border-radius: 500px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  display: flex;
  box-shadow: 0 2px 20px #0003;
}

.recomendation-brand-illustrator {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: var(--yellow-bonive);
  border: 1px #fffb9929;
  border-radius: 8px;
  flex-direction: row;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 50vw;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  display: flex;
  box-shadow: inset 0 0 20px #ffffff30, 0 10px 14px #00000014;
}

.recomendation-brand-illustrator.green {
  background-color: #9bf88e;
  background-image: none;
  justify-content: space-between;
  align-items: flex-start;
}

.recomendation-brand-illustrator.none {
  background-image: none;
  justify-content: space-between;
}

.container-feedback {
  z-index: 1;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: flex-start center;
  width: 120vw;
  display: flex;
  position: relative;
}

.total-feedbacks {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex: none;
  display: flex;
}

.up-work-logo {
  width: 50px;
}

.cursor-wrap {
  z-index: 999;
  pointer-events: none;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0%;
}

.cursor {
  mix-blend-mode: normal;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 50rem;
  height: 50rem;
  transition: opacity .3s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.cursor-aniamtion {
  opacity: 1;
  filter: brightness(105%);
  mix-blend-mode: multiply;
  flex: none;
  width: 6rem;
  height: 6rem;
  display: block;
  position: absolute;
}

.yellow-backgroun-cursor {
  opacity: .24;
  mix-blend-mode: normal;
  background-image: none;
  border-radius: 999px;
  flex: none;
  display: none;
  position: absolute;
  inset: 0%;
}

.circle-cursor {
  border: 2px solid var(--neutral-300);
  opacity: .16;
  mix-blend-mode: normal;
  border-radius: 999px;
  width: 50px;
  height: 50px;
  position: relative;
  inset: 0%;
}

.foother-container {
  flex-flow: row;
  flex: none;
  width: auto;
}

.over-texture {
  z-index: 9999;
  opacity: .2;
  filter: blur(1px) sepia();
  pointer-events: none;
  mix-blend-mode: color-dodge;
  display: none;
  position: fixed;
  inset: 0%;
}

.grid-sample {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  background-color: #0c0b0b00;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-items: stretch;
  width: 70%;
  height: auto;
  margin-left: auto;
  margin-right: 5vw;
  padding-top: 3rem;
  padding-bottom: 3rem;
  display: grid;
}

.lottie-animation-6 {
  object-fit: fill;
  background-color: #134366;
  border-radius: 16px;
}

.lottie-animation-7 {
  width: 500px;
}

.rive-test {
  height: 300px;
}

.rive-test.auto-height {
  margin-top: auto;
  margin-bottom: auto;
  position: relative;
}

.rive {
  aspect-ratio: auto;
  object-fit: fill;
  border-radius: 16px;
  width: 400px;
  height: 400px;
  margin: auto;
  position: absolute;
  inset: 0%;
}

.rive.hide-special-funtion {
  margin-top: 0;
  margin-bottom: 0;
  display: block;
  position: relative;
}

.slider-show-animaitons {
  background-color: #ddd0;
  align-self: center;
  width: 700px;
  height: 80vh;
  padding-bottom: 69px;
}

.mask-2 {
  height: 100%;
}

.slide-nav-2 {
  font-family: Orbitron;
  display: none;
}

.slide-2 {
  vertical-align: baseline;
}

.icon-3, .icon-4 {
  color: #fffb99;
}

.central-tittle {
  color: #fffdd4;
  text-align: center;
  letter-spacing: 2px;
  flex: none;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  font-family: Marcellus SC, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  position: relative;
  inset: auto 0% 0% auto;
}

.container-slide-rive {
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  padding-bottom: 76px;
  display: flex;
}

.rive-central-animation {
  z-index: 3;
  flex: none;
  width: 300px;
  height: 250px;
  margin-top: auto;
  margin-left: auto;
  margin-right: -100px;
  position: relative;
  bottom: 0;
}

.div-app-header-m {
  z-index: 5;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  background-image: linear-gradient(#142f43, #000);
  flex-flow: row;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100svh;
  margin-left: 0;
  padding-top: 0;
  position: relative;
  overflow: hidden;
}

.phone-and-animation {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  flex: none;
  justify-content: flex-end;
  align-items: center;
  width: 400px;
  height: 300px;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: absolute;
  inset: 0%;
}

.floor-blue {
  z-index: 1;
  background-image: linear-gradient(270deg, #0009, #0000 33%, #0000009e), linear-gradient(#142f43, #000);
  width: 100vw;
  height: 120px;
  margin-top: auto;
  position: absolute;
  bottom: 0;
}

.div-mobile-header {
  z-index: 10;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: row;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 100%;
  margin-top: 0;
  margin-left: -240px;
  display: flex;
  position: relative;
}

.div-block-29 {
  z-index: 2;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex: none;
  align-items: flex-end;
  width: 500px;
  height: 200px;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  display: flex;
  position: absolute;
  inset: auto 0 50vh 0%;
}

.div-block-30 {
  height: 200px;
}

.card-portfolio-phone {
  perspective: 422px;
  width: 190px;
  height: 100%;
  transform-style: preserve-3d;
  background-color: #181818;
  border: 1.5px solid #fffb9912;
  border-radius: 15px;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
  display: flex;
  position: relative;
  transform: perspective(881px)translate3d(0, 0, 20px);
  box-shadow: inset 0 0 100px #000000d1;
}

.flex-block-10 {
  justify-content: center;
  align-items: center;
}

.content-phone {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  aspect-ratio: auto;
  width: 250px;
  transform-style: preserve-3d;
  background-color: #181818;
  border-radius: 10px;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: flex-end;
  padding: 16px 16px 8px 8px;
  display: flex;
  position: absolute;
  inset: auto 0% 0% 133px;
  transform: translate3d(0, 0, 20px);
  box-shadow: 0 2px 20px #0003;
}

.arm-animation {
  flex: none;
  width: 400px;
  height: 600px;
}

.pr-focus {
  z-index: 5;
  max-width: 600px;
  font-family: var(--font-family);
  color: var(--yellow-bonive);
  letter-spacing: 0;
  flex: none;
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  position: relative;
}

.mask-3 {
  flex: none;
  width: 250%;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}

.slider {
  background-color: #ddd0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.right-arrow-2 {
  color: var(--yellow-bonive);
  transform-style: preserve-3d;
  flex: none;
  display: block;
  bottom: -69px;
  right: auto;
  transform: translate3d(0, 0, 10px);
}

.left-arrow-2, .slide-nav-3 {
  display: none;
}

.slide-3 {
  width: 100%;
}

.icon-5 {
  margin-bottom: 0;
  font-size: 60px;
}

.paragraph-phone-top-portfolio {
  width: 200px;
  font-family: var(--pr);
  color: var(--yellow-bonive);
  font-size: 22px;
  line-height: 1;
}

.rive-2 {
  width: 100px;
  height: 100px;
}

.rive-2.bigger {
  width: 200px;
  height: 200px;
}

.rive-2.principal {
  width: 300px;
  height: 500px;
  transform-style: preserve-3d;
  margin-top: -93px;
  margin-bottom: 0;
  margin-left: -30px;
  transform: translate3d(0, 0, 40px);
}

.central-animation {
  height: 240px;
  transform-style: preserve-3d;
  flex: none;
  justify-content: center;
  align-items: center;
  margin-right: 120px;
  display: flex;
  transform: translate3d(0, 0, 40px);
}

.central-animation.top-reduction {
  margin-top: -24px;
}

.rive-3 {
  width: 150px;
  height: 250px;
  transform-style: preserve-3d;
  border-radius: 20px;
  margin-right: 50px;
  transform: translate3d(0, 0, 30px);
}

.over-black-intro {
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  background-color: #000;
  width: 100%;
  height: 100vh;
  display: block;
  position: absolute;
  inset: 0%;
}

.top-mobile-aniamiton {
  flex: none;
}

.lateral-pillar {
  background-image: linear-gradient(#23435a, #000 88%);
  flex: none;
  width: 100px;
  height: 100%;
  margin-left: 0;
  position: relative;
}

.lateral-pillar.litter {
  background-image: linear-gradient(#23435a, #000);
}

.lateral-pillar.big {
  width: 150px;
}

.div-backgroun-elements {
  z-index: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  flex: none;
  position: absolute;
  transform: translate3d(0, 0, -1px);
}

.pillar {
  z-index: 0;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 100%;
  margin-left: 62px;
  display: flex;
  position: absolute;
}

.pillar.left {
  width: 200px;
  margin-right: auto;
  left: 0;
}

.pillar.right {
  perspective-origin: 50%;
  width: 200px;
  margin-left: auto;
  margin-right: 62px;
  right: 0;
  transform: scale(1);
}

.rive-4 {
  min-width: 100%;
  height: 240px;
}

.lottie-animation-9 {
  z-index: 5;
  border-radius: 8px;
  flex: none;
  max-width: 50vw;
  position: relative;
  overflow: hidden;
}

.rive-5 {
  display: none;
}

.header-branding-presentation {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 100vw;
  height: auto;
  margin-bottom: 0;
  padding: 0 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.header-branding-1 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: #fff;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: auto;
  min-height: 80vh;
  padding: 120px 12%;
  display: flex;
  position: relative;
}

.header-branding-1.no-lateral-margin {
  z-index: 2;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-image: linear-gradient(#0000, #000 77%);
  flex: 1;
  padding-top: 64px;
  padding-bottom: 0;
  padding-right: 0%;
}

.header-branding-1.lateral-black {
  z-index: 0;
  background-image: linear-gradient(270deg, #000, #0000 54%, #000), linear-gradient(#0000, #000);
}

.header-branding-1.lateral-black.large {
  height: 100vh;
}

.header-branding-1.lateral-black.large.more-margen {
  grid-column-gap: 44px;
  grid-row-gap: 44px;
  background-color: #fff0;
  background-image: none;
  justify-content: flex-start;
  align-items: center;
  height: auto;
  padding-left: 8%;
  padding-right: 8%;
}

.intro-3d-animation {
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100vh;
  display: block;
  position: fixed;
}

.image-6 {
  flex: none;
}

.header---branding {
  z-index: 2;
  background-color: var(--color-2);
  width: auto;
  height: 140px;
  color: var(--yellow-bonive);
  text-align: left;
  letter-spacing: -5px;
  text-shadow: none;
  -webkit-text-fill-color: transparent;
  background-image: none;
  -webkit-background-clip: text;
  background-clip: text;
  flex: 0 auto;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Krona One, sans-serif;
  font-size: 62px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  position: relative;
}

.content-header-_-branding {
  z-index: 4;
  flex: none;
  width: 100%;
  height: auto;
  display: flex;
  position: relative;
}

.h5-acent {
  color: var(--yellow-bonive);
  letter-spacing: 0;
  flex: none;
  font-family: Krona One, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.h5-acent.huge {
  font-size: 32px;
}

.animation-b {
  background-image: url('../images/Logo-B-trival-Bonive.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  flex: none;
  width: 80px;
  height: 120px;
  position: relative;
  left: auto;
}

.div-block-32 {
  perspective-origin: 0%;
  transform-origin: 0%;
  align-items: center;
  height: auto;
  margin-left: -6px;
  display: flex;
  transform: scale(.7);
}

.black-table {
  perspective: 1413px;
  width: 200%;
  height: 340px;
  transform-style: preserve-3d;
  background-color: #0c0b0b;
  background-image: linear-gradient(270deg, #000, #0000 51%, #000), linear-gradient(#161414, #0000 92%);
  flex: none;
  margin-bottom: -16vh;
  margin-left: auto;
  margin-right: auto;
  display: none;
  position: absolute;
  inset: auto 0% 0;
  transform: perspective(1376px)rotateX(66deg)rotateY(0)rotateZ(0);
}

.flex-block-12 {
  z-index: 0;
  justify-content: flex-start;
  align-items: center;
  width: 80%;
  height: 100px;
  margin-top: -66px;
  margin-left: auto;
  position: relative;
}

.over-logo-shadow {
  z-index: 2;
  background-image: linear-gradient(90deg, #fff 25%, #06060600);
  width: 300px;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.flex-block-13 {
  object-fit: fill;
  width: 150%;
  position: relative;
  overflow: hidden;
}

.flex-block-14 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  opacity: 0;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: none;
}

.line-web {
  background-image: linear-gradient(270deg, #fff0, var(--yellow-bonive) 47%, #fff0);
  opacity: .21;
  width: 100%;
  height: 2px;
  position: absolute;
  inset: auto 0% 0%;
}

.button-base-design {
  z-index: 20;
  perspective-origin: 0%;
  transform-origin: 0%;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 300px;
  height: 100px;
  position: relative;
  transform: scale(.7);
}

.cards-how-we-works {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex: none;
  grid-template-rows: auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  height: 450px;
  display: grid;
}

.base-card-how-we-works {
  background-image: radial-gradient(circle, #fffb9900 68%, #fffb9914), linear-gradient(225deg, #fffb9900 29%, #fffb992b);
  border: 1px solid #fffb9929;
  border-radius: 11px;
  justify-content: flex-start;
  align-items: flex-end;
  width: auto;
  height: 100%;
  padding: 16px 32px;
  position: relative;
}

.base-card-how-we-works.aling-top {
  perspective: 200px;
  background-color: #181818;
  background-image: none;
  border-radius: 8px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
  overflow: hidden;
  transform: perspective(200px);
  box-shadow: inset 0 2px 20px #fff3744d, 0 6px 8px #0000002b;
}

.text-block-7 {
  font-family: var(--font-family);
  color: var(--yellow-bonive);
  font-size: 24px;
}

.flex-block-15 {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
}

.top-over-shadow {
  z-index: 3;
  pointer-events: none;
  background-image: linear-gradient(#fff, #fff0);
  width: 100%;
  height: 200px;
  position: fixed;
  inset: 0% 0% auto;
}

.bottom-shadow {
  z-index: 3;
  background-image: linear-gradient(0deg, var(--color), #fff0 82%);
  pointer-events: none;
  width: 100%;
  height: 150px;
  position: fixed;
  inset: auto 0% 0;
}

.h5-brading-designer {
  color: #fffb99;
  text-align: left;
  letter-spacing: 0;
  flex: none;
  width: 70%;
  margin-top: 10px;
  margin-left: 20px;
  font-family: Marcellus, sans-serif;
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
  text-decoration: none;
}

.h5-brading-designer.half-size {
  letter-spacing: 1px;
  width: 70%;
  font-size: 1.4rem;
  line-height: 1.1;
}

.h5-brading-designer.half-size.left_margin {
  z-index: 2;
  font-family: var(--font-family);
  letter-spacing: 0;
  margin-left: 16px;
  font-size: 1rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.4;
  position: relative;
}

.rive-6 {
  width: 100%;
  height: 100%;
}

.rive-7 {
  width: 100vw;
  height: 100%;
}

.rive-7.short {
  width: 60vw;
}

.tab-pane-tab-2 {
  width: 100%;
  height: 100%;
}

.heading-principal {
  color: #dcd4d4;
  letter-spacing: .5vh;
  text-transform: uppercase;
  font-family: Lato, sans-serif;
  font-size: 3.5vh;
  font-weight: 900;
  line-height: 1.2;
}

.text-block-3 {
  text-transform: uppercase;
  font-size: 12px;
}

.tabs-2 {
  flex-direction: column;
  flex: none;
  justify-content: space-around;
  align-items: center;
  width: 80%;
  height: 100%;
  display: flex;
}

.navbar {
  z-index: 8;
  background-color: #0000;
  flex: none;
  align-items: flex-start;
  width: 80vw;
  height: 17vh;
  margin: 0 auto auto;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
}

.background-lore {
  z-index: 3;
  background-color: #0000;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 50vh;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.mountains {
  z-index: 2;
  flex-direction: row;
  flex: none;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100vh;
  margin-top: auto;
  display: flex;
  position: absolute;
  bottom: 0;
}

.corner-elements {
  z-index: 4;
  flex: none;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 50vh;
  margin-top: -10px;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.paralax {
  background-image: url('../images/L6-Islands-B.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  flex: none;
  width: 100%;
  height: 100%;
  display: block;
}

.paralax.l2-backclouds {
  z-index: 4;
  background-image: url('../images/L7clouds-over.svg');
  background-size: contain;
  width: 120%;
  height: 100vh;
  margin: auto auto 143px;
  display: block;
  position: absolute;
  inset: -4% 0% 0;
}

.paralax.l2-backclouds._2 {
  opacity: .12;
  width: 100%;
  transform-style: preserve-3d;
  background-size: contain;
  margin-top: 0;
  margin-bottom: 0;
  display: block;
  position: absolute;
  transform: rotateX(0)rotateY(180deg)rotateZ(0);
}

.paralax.l3-starts {
  opacity: .65;
  background-image: url('../images/L3-Starts-moon.svg');
  background-position: 50% 0;
  width: 100vw;
  height: 100vh;
  margin-bottom: auto;
  display: block;
  position: absolute;
  inset: 0% 0% auto;
}

.paralax.l4-island {
  opacity: .51;
  background-image: url('../images/L5-Islands.png');
  background-size: contain;
  width: 80%;
  margin-top: 0;
  display: block;
  position: absolute;
}

.paralax.l5-island {
  opacity: .82;
  width: 120%;
  margin-top: -49vh;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: absolute;
}

.buttons-header {
  flex: none;
  justify-content: space-around;
  width: auto;
  height: 7vh;
  margin-top: 1vh;
  display: none;
}

.layouttemple {
  z-index: 2;
  background-image: url('../images/Temple-with-zeni-animation-M3.svg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: contain;
  width: 60%;
  height: 100%;
  margin-top: 10vh;
  position: absolute;
}

.logos-sources {
  background-image: url('../images/Binance_logo.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  flex: none;
  width: 6vh;
  height: 6vh;
  margin: 2vh;
}

.logos-sources.binance {
  filter: saturate(0%);
  background-image: url('../images/bnb.svg');
  background-size: contain;
  flex: none;
  width: 6vh;
  margin-left: 2vh;
  margin-right: 2vh;
}

.logos-sources.eth {
  filter: saturate(0%);
  background-image: url('../images/eth.svg');
  flex: none;
  width: 6vh;
  margin-left: 2vh;
  margin-right: 2vh;
}

.logos-sources.polygon {
  background-image: url('../images/matic.svg');
  flex: none;
  width: 6vh;
  margin-left: 2vh;
  margin-right: 2vh;
}

.back-cloud {
  background-image: url('../images/L4-clouds.svg');
  background-position: 0%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 30%;
  height: 100%;
}

.back-cloud.left {
  flex: none;
}

.back-cloud.right {
  transform-style: preserve-3d;
  background-position: 50%;
  flex: none;
  transform: rotateX(0)rotateY(180deg)rotateZ(0);
}

.layout-central-one {
  z-index: 5;
  background-image: url('../images/stone-box-text.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  flex: none;
  width: 70%;
  height: 60%;
  position: absolute;
}

.layout-central-one.normal-size {
  background-image: url('../images/base-stone-text.svg');
  background-size: contain;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 900px;
  height: 450px;
  margin-top: -40vh;
  padding: 5vh 5vw 0;
  display: flex;
}

.layout-central-one.principal {
  background-image: url('../images/base-stone-text.svg');
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 55%;
  padding: 5vh;
  display: flex;
}

.layout-central-one.principal.space-above {
  background-size: 100% 100%;
  width: 600px;
  height: 350px;
  padding-bottom: 10vh;
}

.div-logo-info {
  flex-direction: column;
  flex: none;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: auto;
  display: flex;
}

.div-logo-info.left {
  align-items: flex-start;
}

.logos-header {
  flex: none;
  justify-content: space-around;
  width: auto;
  height: auto;
  margin-top: 1vh;
  display: flex;
}

.logos-header.left {
  flex-direction: row;
  justify-content: space-between;
  margin-left: 20px;
}

.logo-header-2 {
  background-image: url('../images/Logo-round-line.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  flex: none;
  width: 100%;
  min-width: 200px;
  height: 15vh;
  min-height: 40px;
  margin-left: auto;
  margin-right: auto;
}

.layout-2 {
  width: 30%;
  height: 100%;
}

.layout-2.header {
  flex: none;
  justify-content: center;
  align-items: flex-start;
  width: 30%;
  margin-top: 59px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.layout-2.header.short {
  width: 25%;
  display: none;
}

.tab-pane-tab-1-2 {
  width: 100%;
  height: 100%;
}

.central-base {
  z-index: 1;
  perspective-origin: 50% 100%;
  transform-origin: 50% 100%;
  background-color: #0f1822;
  border: .8vh solid #030b14;
  flex: none;
  width: 28vw;
  height: 87%;
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  bottom: 0;
}

.container-absolute {
  flex: none;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
}

.button-discord {
  background-color: #0000;
  background-image: url('../images/Discord_software-Logo.wine.svg');
  background-position: 8%;
  background-repeat: no-repeat;
  background-size: 350% 350%;
  border-radius: 6px;
  flex: none;
  width: 10vh;
  height: 10vh;
  display: none;
  position: absolute;
  inset: auto 1vw 23% auto;
}

.mountain {
  background-image: url('../images/Left-montains.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex: none;
}

.mountain.right {
  background-image: url('../images/right-montaing.png');
  background-position: 100% 100%;
  background-size: 100% 100%;
  width: 60%;
  height: 100%;
  margin-left: auto;
  position: absolute;
  right: 0;
}

.mountain.left {
  background-position: 0 100%;
  background-size: contain;
  width: 50%;
  height: 100%;
  margin-right: auto;
  position: absolute;
  left: 0;
}

.tabs-content-2 {
  flex: none;
  width: 100%;
  height: 70%;
  display: block;
}

.link-nav {
  color: #e7bb4b;
  text-align: center;
  letter-spacing: .2vh;
  text-transform: uppercase;
  background-color: #0000;
  flex: none;
  height: 100%;
  margin-left: 1%;
  margin-right: 1%;
  padding: 0 1%;
  font-family: Lato, sans-serif;
  font-size: 1vh;
  font-weight: 900;
}

.heading-central-block {
  color: #f6cc63;
  text-align: center;
  letter-spacing: .5vh;
  text-transform: uppercase;
  flex: none;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  font-size: 3vh;
  font-weight: 400;
}

.button-3 {
  z-index: 2;
  color: #4a3515;
  text-align: center;
  letter-spacing: .2vh;
  background-image: linear-gradient(#fceeac6e, #fff0 31%), linear-gradient(98deg, #e9bd62, #f9ce69);
  border-radius: 7px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  font-family: Lato, sans-serif;
  font-size: 2vh;
  font-weight: 900;
  display: flex;
  position: relative;
  box-shadow: 0 7px #c7673e, 0 13px 12px -1px #000;
}

.button-3.w--current {
  width: auto;
  height: auto;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}

.button-3.energy {
  width: auto;
  height: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-shadow: 0 6px #c7673e, 0 11px 14px -1px #000;
}

.button-3.world {
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.button-3.world.w--current {
  width: 20vh;
  box-shadow: 0 7px #c7673e, 0 18px 14px -4px #000;
}

.rock {
  background-image: url('../images/rock-boder-F.svg');
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: contain;
  width: 40%;
  height: 100%;
  margin-left: auto;
}

.rock.right {
  float: right;
  clear: none;
  background-position: 100% 0;
  background-size: contain;
  flex: none;
  margin-right: -10px;
}

.rock.left {
  transform-style: preserve-3d;
  background-position: 102% 0;
  flex: none;
  margin-left: -2px;
  transform: rotateX(0)rotateY(180deg)rotateZ(0);
}

.lore-back {
  background-image: url('../images/Lore-1-creation-M-lines.svg');
  background-position: 50% 100%;
  background-repeat: repeat-x;
  background-size: 80%;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
}

.lore-back._3 {
  opacity: 0;
  background-image: url('../images/lore-3-destruction-and-the-red-crystal-F.svg');
  flex: none;
  width: 120%;
  margin-left: auto;
  margin-right: auto;
  display: none;
}

.lore-back._2 {
  z-index: 4;
  opacity: 0;
  background-image: url('../images/Lore-section-2-creation-F.svg');
  flex: none;
  width: 120%;
  margin-left: auto;
  margin-right: auto;
  display: none;
}

.lore-back._1 {
  background-image: url('../images/Lore-1-creation-Mversion-3.svg');
  justify-content: center;
  width: 120%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.section-3-one {
  flex-direction: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  overflow: hidden;
}

.text-block-2 {
  font-size: 12px;
}

.buttonbase {
  flex: none;
  align-items: flex-start;
  width: 20vh;
  height: auto;
  margin-left: 5px;
  margin-right: 5px;
  display: flex;
}

.paragraph-4 {
  color: #c3b9b9;
  text-align: center;
  letter-spacing: .3vh;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  font-family: Lato, sans-serif;
  font-size: 3vh;
  font-weight: 400;
}

.paragraph-4.central {
  flex: none;
  width: 80%;
  max-width: 80%;
  margin-bottom: 20px;
  font-size: 20px;
}

.paragraph-4.central.lore {
  width: 90%;
  line-height: 1.1;
}

.paragraph-4.central.lore._3-the-dark {
  max-width: 90%;
  font-size: 20px;
  display: flex;
}

.paragraph-4.central.lore._2-energy {
  max-width: 90%;
}

.paragraph-4.central.lore._1-world {
  width: 90%;
  max-width: 90%;
}

.section-4 {
  width: 100vw;
  height: 100vh;
}

.section-4.header {
  background-color: #ddb2b2;
  flex: none;
  position: relative;
}

.section-4.header._1 {
  background-color: #0000;
  justify-content: center;
  display: flex;
}

.section-4.header._2 {
  background-color: #0000;
}

.section-4.header._3 {
  -webkit-text-fill-color: inherit;
  background-color: #0000;
  background-clip: border-box;
}

.container-nav {
  z-index: 5;
  flex: none;
  justify-content: space-between;
  align-items: flex-start;
  width: 75%;
  height: 15%;
  margin-bottom: 0%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  top: -18px;
}

.tabs-menu-2 {
  flex: none;
  justify-content: space-between;
  width: 80%;
  margin-bottom: 3vh;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.container-21 {
  z-index: 5;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 80vw;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  top: 0;
  bottom: 0;
}

.container-21.header {
  z-index: 5;
  flex-direction: row;
  flex: none;
  justify-content: space-between;
  width: 90%;
}

.background-2 {
  z-index: 0;
  background-image: linear-gradient(#0e0615, #311746 31%, #ffbf7d 67%, #ffdf6f);
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: absolute;
  inset: 0%;
}

.group-nav {
  flex: none;
  justify-content: space-around;
  align-items: flex-start;
  width: 40%;
  height: 100%;
  display: flex;
  position: relative;
}

.image-nav-bard {
  z-index: 2;
  background-image: url('../images/Navbar-circle-lines.svg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  position: relative;
}

.image-nav-bard.shadow {
  z-index: 1;
  opacity: 1;
  filter: blur(20px) brightness(0%);
  background-image: url('../images/Navbar-circle-lines.svg');
  background-size: 100% 100%;
  border-radius: 0;
  flex: none;
  margin-top: -10px;
  position: absolute;
  inset: 12% 0% auto;
}

.image-nav-bard.image {
  background-position: 50% 0;
  background-size: contain;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 80vw;
  margin: 0 auto auto;
  display: flex;
  position: relative;
  inset: 0% 0% auto;
}

.text-block {
  flex: none;
  font-size: 12px;
}

.back-lateral-cluds {
  z-index: 1;
  justify-content: space-between;
  width: 100%;
  height: 70%;
  display: flex;
  position: relative;
}

.the-face {
  mix-blend-mode: lighten;
  flex: none;
  width: 100%;
  height: 300px;
  margin-top: auto;
  position: absolute;
  bottom: 0;
}

.the-face.two-face {
  height: 200px;
  margin-bottom: -51px;
}

.the-face.principal {
  mix-blend-mode: color-dodge;
}

.the-face.the-arm, .the-face.hand-energy {
  height: 120px;
}

.div-block-33 {
  z-index: 0;
  mix-blend-mode: lighten;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  display: flex;
  position: relative;
}

.yellow-background {
  z-index: 1;
  opacity: .52;
  pointer-events: none;
  background-image: linear-gradient(153deg, #fffb9900 30%, #faf57c5e);
  border-radius: 8px;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0%;
}

.simple-over-yellow {
  z-index: 1;
  opacity: .52;
  background-image: linear-gradient(227deg, #fffa741f, #fff73a2e);
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
}

.corner {
  z-index: 0;
  flex: 1;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  display: flex;
  position: relative;
}

.previus-projects {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex: none;
  grid-template-rows: auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.previus-projects.right_aling {
  justify-content: flex-start;
  align-items: flex-end;
}

.card-previus-projects {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  perspective: 734px;
  perspective-origin: 50% 100%;
  transform-origin: 50% 100%;
  background-color: #faf6e7;
  border: 1px solid #fffb9929;
  border-radius: 11px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 16px;
  position: relative;
  overflow: visible;
  transform: perspective(771px);
  box-shadow: 0 30px 19px #00000012, 0 17px 10px -7px #0000000d;
}

.uellow-reflect {
  z-index: 1;
  opacity: .13;
  perspective-origin: 50% 100%;
  transform-origin: 50% 100%;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  background-image: linear-gradient(153deg, #fffb9900 30%, #faf57c5e);
  border-radius: 16px;
  margin-top: 21px;
  display: block;
  position: absolute;
  inset: 0%;
  transform: rotateX(180deg)rotateY(0)rotateZ(0);
}

.presentation-project-assets {
  background-color: #fff;
  border-radius: 16px;
  flex: none;
  width: 100%;
  height: 350px;
  margin-top: 0;
  display: block;
  position: relative;
  overflow: hidden;
}

.h5-tittle {
  z-index: 5;
  width: 100%;
  font-family: var(--font-family);
  color: var(--soft-dark-brand-color);
  text-align: left;
  letter-spacing: 0;
  -webkit-text-stroke-color: var(--soft-dark-brand-color);
  flex: none;
  margin-top: 10px;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.1;
  text-decoration: none;
  position: relative;
}

.h5-info {
  z-index: 5;
  width: 100%;
  font-family: var(--pr);
  color: var(--soft-dark-brand-color);
  text-align: left;
  letter-spacing: 0;
  flex: none;
  margin-top: 10px;
  font-size: .8rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.1;
  text-decoration: none;
  position: relative;
}

.box-cooperation {
  background-image: linear-gradient(251deg, #ff999947, #ffb1b108);
  border-radius: 4px;
  padding-left: 16px;
  padding-right: 16px;
}

.div-block-35 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  display: flex;
}

.box-type-project {
  background-image: linear-gradient(251deg, #fffb9947, #fff6b108);
  border-radius: 4px;
  padding-left: 16px;
  padding-right: 16px;
}

.total-3d-door {
  opacity: 1;
  width: 100%;
  height: 100%;
  position: relative;
}

.door-principal {
  z-index: 0;
  background-color: #ff4c4c;
  background-image: url('../images/Left-door_1.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 50%;
  height: 100%;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.door-principal-right {
  z-index: 10;
  background-color: #ff4c4c;
  width: 50%;
  height: 100%;
  margin-left: auto;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.image-7 {
  -webkit-text-fill-color: inherit;
  object-fit: cover;
  background-clip: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.central-open {
  aspect-ratio: auto;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: -147px;
  position: absolute;
  inset: 0% 0 0% 0%;
  transform: scale3d(1, 1.1, 1);
}

.central-logo-top {
  z-index: 4;
  width: 100px;
  height: 100px;
  margin: auto;
  position: absolute;
  inset: 0%;
}

.central-border {
  z-index: 3;
  width: 100px;
  height: 100px;
  margin: auto;
  position: absolute;
  inset: 6% 0% 0%;
}

.central-shadow {
  z-index: 2;
  width: 100px;
  height: 100px;
  margin: auto;
  position: absolute;
  inset: 14% 0% 0%;
}

.central-piston-f {
  z-index: 2;
  width: 150px;
  height: 150px;
  margin: auto;
  position: absolute;
  inset: 3% 0% 0%;
}

.central-piston-shadow {
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: auto;
  position: absolute;
  inset: 12% 0% 0%;
}

.left-shadow {
  z-index: 3;
  background-image: linear-gradient(90deg, var(--color), #fff0);
  opacity: .5;
  pointer-events: none;
  width: 20%;
  height: 100%;
  position: fixed;
  inset: 0% 0% auto;
}

.right-shadow {
  z-index: 3;
  background-image: linear-gradient(90deg, #fff0, var(--color));
  opacity: .5;
  pointer-events: none;
  width: 20%;
  height: 100%;
  position: fixed;
  inset: 0% 0% 0% auto;
}

.rive-8 {
  height: 100%;
}

.div-block-36 {
  grid-column-gap: 64px;
  grid-row-gap: 64px;
  flex-flow: column;
  width: 100%;
  height: 100%;
  display: flex;
}

.section-minila {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: auto;
  padding-top: 139px;
  padding-left: 8%;
  padding-right: 8%;
  display: flex;
  position: relative;
  overflow: visible;
}

.flex-block-18 {
  z-index: 2;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  position: relative;
}

.h2-minimal {
  color: #494635;
  letter-spacing: 0;
  flex: none;
  width: 250px;
  height: auto;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lexend, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}

.h2-minimal.light {
  color: #5e5e5e;
  font-size: 1.2rem;
  position: relative;
}

.h2-minimal.light-copy {
  color: #636363;
  font-size: 1.2rem;
  position: relative;
}

.flex-block-19 {
  z-index: 2;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  perspective-origin: 0 0;
  transform-origin: 0 0;
  flex-flow: row;
  flex: none;
  position: relative;
  transform: scale(.7);
}

.flex-block-19.center {
  margin-left: auto;
  margin-right: auto;
  transform: none;
}

.contanier-minial-2 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border: 1px solid #fff8c60f;
  border-radius: 8px;
  flex-flow: column;
  width: 30%;
  height: auto;
  padding-top: 16px;
  padding-left: 16px;
  padding-right: 16px;
  position: sticky;
  top: 140px;
}

.contanier-minial-2.short {
  flex: none;
  width: 40vw;
  margin-left: auto;
  margin-right: 0;
  padding-bottom: 16px;
}

.contanier-minial-2.short.white {
  background-color: #fffae7;
  background-image: none;
  top: 22px;
}

.contanier-minial-2.short.white.stick {
  background-color: #f9f7ef00;
  flex: 1;
  width: 50vw;
  margin-top: 0;
  margin-bottom: 80px;
  position: relative;
  top: auto;
  bottom: 0;
  overflow: hidden;
}

.container-project {
  z-index: 2;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border: 1px solid #deddd73b;
  border-radius: 8px;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: auto;
  position: relative;
}

.card-project {
  border: 1px #000;
  border-radius: 4px;
  flex-flow: column;
  width: 100%;
  margin-bottom: 0;
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
}

.card-project.black {
  background-color: #0f0f0f;
  border-radius: 4px;
  box-shadow: 0 5px 12px -1px #0003;
}

.h5-minimal {
  font-family: var(--font-family);
  color: var(--neutral-300);
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}

.h5-minimal.bold {
  color: var(--soft-dark-brand-color);
  font-family: Lexend, sans-serif;
  font-weight: 400;
}

.h5-minimal.bold.white {
  color: var(--background-soft-color);
}

.flex-block-21 {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex: 1;
  height: auto;
  margin-top: 16px;
  position: relative;
  overflow: visible;
}

.flex-block-24 {
  z-index: 10;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  position: relative;
}

.content-protfolio {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex-flow: row;
  flex: none;
  width: 100%;
  overflow: hidden;
}

.yellow-line {
  z-index: 2;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  background-color: #f3f1e3;
  flex: none;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  height: 1px;
  position: relative;
}

.background-video-2 {
  flex: none;
  width: 100%;
  height: 100%;
  min-height: 200px;
  margin-top: auto;
  margin-bottom: auto;
  display: block;
}

.video-sample {
  border: 1px solid #89874e1a;
  border-radius: 0 0 8px 8px;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
}

.content-and-tittle-port-folion {
  z-index: 10;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: row;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
}

.flex-block-29 {
  cursor: pointer;
  flex-flow: column;
  width: 100%;
  margin-top: 0;
}

.infor-project-open {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row;
  flex: none;
  position: relative;
}

.flex-block-31 {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

.flex-block-31-copy {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  flex: none;
  padding-bottom: 0;
  padding-left: 20px;
}

.flex-block-32 {
  background-color: #c9c9c92b;
  width: 100%;
  height: 2px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.flex-block-32.white {
  background-color: #3636362b;
}

.flex-block-34 {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex: none;
}

.pr-minimal-2 {
  height: auto;
  color: var(--neutral-color-yellow);
  letter-spacing: .4px;
  flex: none;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Varela, sans-serif;
  font-size: .7rem;
  font-weight: 400;
  line-height: 1.4;
}

.image-10 {
  object-fit: cover;
  border-radius: 4px;
  flex: none;
  height: 100%;
}

.image-11 {
  flex: none;
  height: 70px;
}

.image-11.black {
  filter: none;
}

.div-block-38 {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  flex: 1;
  display: flex;
}

.image-12 {
  width: 20px;
}

.div-block-40 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  opacity: .66;
  filter: saturate(0%);
  flex: none;
  align-items: center;
  margin-left: -5px;
  display: flex;
}

.files-open-portfolio {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex: none;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: stretch;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  display: grid;
}

.image-13 {
  aspect-ratio: auto;
  vertical-align: baseline;
  object-fit: cover;
  border-radius: 4px;
  height: 200px;
  box-shadow: 0 6px 6px #00000014;
}

.image-13.white {
  object-fit: contain;
  background-color: #fff;
}

.container-tittle {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: row;
  flex: none;
  justify-content: flex-start;
  align-items: center;
}

.h2-tittle-portfolio {
  height: auto;
  color: var(--neutral-color-yellow);
  letter-spacing: 0;
  flex: none;
  order: -9999;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lexend Exa, sans-serif;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
}

.h2-tittle-portfolio.white {
  color: var(--color);
}

.text-span-10 {
  color: var(--soft-dark-brand-color);
  font-family: Libre Baskerville, sans-serif;
  font-style: italic;
  font-weight: 700;
}

.text-span-11, .text-span-12 {
  color: var(--soft-dark-brand-color);
}

.text-span-13 {
  color: var(--soft-dark-brand-color);
  font-family: Libre Baskerville, sans-serif;
  font-style: italic;
  font-weight: 700;
}

.text-span-14 {
  color: var(--soft-dark-brand-color);
}

.text-span-15 {
  color: var(--soft-dark-brand-color);
  font-family: Libre Baskerville, sans-serif;
  font-style: italic;
  font-weight: 700;
}

.text-span-16 {
  color: var(--soft-dark-brand-color);
}

.text-span-17 {
  color: var(--soft-dark-brand-color);
  font-family: Libre Baskerville, sans-serif;
  font-style: italic;
  font-weight: 700;
}

.text-span-18 {
  color: var(--soft-dark-brand-color);
}

.text-span-19 {
  font-family: Libre Baskerville, sans-serif;
  font-style: italic;
  font-weight: 500;
}

.text-span-21 {
  color: var(--neutral-color-yellow);
  font-family: Libre Baskerville, sans-serif;
  font-style: italic;
  font-weight: 700;
}

.description-text {
  width: 50%;
  height: auto;
  color: var(--neutral-color-yellow);
  letter-spacing: .4px;
  flex: none;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Varela, sans-serif;
  font-size: .7rem;
  font-weight: 400;
  line-height: 1.4;
}

.description-text.white {
  color: var(--background-soft-color);
}

.image-14 {
  opacity: .64;
  flex: none;
  width: 30px;
  margin-top: auto;
  margin-bottom: auto;
  position: absolute;
  inset: 0% 5% 0% auto;
}

.tittle-portfolio {
  opacity: 1;
  color: #b1ad96;
  letter-spacing: 0;
  flex: none;
  width: 90%;
  height: auto;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lexend, sans-serif;
  font-size: .6rem;
  font-weight: 400;
  line-height: 1.4;
}

.list {
  padding-left: 15px;
  list-style-type: square;
}

.list-item {
  color: var(--neutral-color-yellow);
  font-family: Lexend, sans-serif;
  font-size: .7rem;
}

.list-item.white {
  color: var(--background-soft-color);
}

.text-span-24 {
  color: var(--soft-dark-brand-color);
  font-family: Libre Baskerville, sans-serif;
  font-style: italic;
  font-weight: 700;
}

.text-span-24.white {
  color: var(--color);
}

.text-project-tittle {
  z-index: 10;
  flex: none;
  position: absolute;
  top: 13px;
  left: 18px;
}

.image-16 {
  object-fit: contain;
  border-radius: 4px;
  position: static;
  box-shadow: 0 6px 6px #00000014;
}

.image-16.shadow-with-light {
  overflow: visible;
  box-shadow: 0 6px 6px #00000014;
}

.image-16.shadow-with-light.white {
  background-color: #fff;
}

.image-17 {
  z-index: 5;
  flex: none;
  width: 101%;
  max-width: 101%;
  margin: auto;
  position: absolute;
  inset: auto;
}

.text-span-25 {
  font-family: Libre Baskerville, sans-serif;
  font-style: italic;
  font-weight: 700;
}

.bold-text-15, .bold-text-16 {
  font-weight: 400;
}

.text-block-9 {
  color: var(--neutral-color-yellow);
  font-family: Lexend, sans-serif;
  font-size: 1rem;
}

.div-block-43 {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 8px;
  margin-right: 8px;
  display: flex;
}

.link-protfolio {
  color: var(--neutral-color-yellow);
  font-family: Libre Baskerville, sans-serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 700;
}

.container-about {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border: 1px solid #fff8c60f;
  border-radius: 8px;
  flex-flow: column;
  width: 50%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 16px 140px;
  position: relative;
  top: 0;
}

.h1-minial {
  color: #494635;
  letter-spacing: 0;
  flex: none;
  width: 100%;
  height: auto;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lexend, sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.4;
}

.profile-about {
  object-fit: cover;
  border-radius: 4px;
  flex: none;
  width: 50%;
  max-width: 50%;
  height: 300px;
  box-shadow: 0 4px 3px #0003, 0 8px 13px #0003;
}

.container-minial-vertical {
  z-index: 2;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 20px;
  position: relative;
}

.text-span-27, .text-span-28, .text-span-29, .text-span-30 {
  color: var(--soft-dark-brand-color);
}

.h1-minial-copy {
  color: #494635;
  letter-spacing: .2px;
  flex: 1;
  width: 100%;
  height: auto;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lexend, sans-serif;
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.4;
}

.text-span-31 {
  font-family: Libre Baskerville, sans-serif;
  font-style: italic;
  font-weight: 700;
}

.back-arrow {
  background-color: var(--neutral-color-yellow);
  border: 0 #000;
  border-radius: 50px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  display: flex;
  position: absolute;
  inset: 2% auto auto 2%;
  box-shadow: 0 4px 9px #0003;
}

.text-block-10 {
  color: #fff;
  text-align: center;
  font-family: MATERIAL-ICONS, sans-serif;
  font-size: 20px;
}

.link-block {
  z-index: 5;
  width: 100%;
  height: 100%;
  position: absolute;
}

.div-block-44 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.div-block-45 {
  border: 1px solid var(--neutral-color-yellow);
  border-radius: 50px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  display: flex;
}

.number {
  color: #494635;
  text-align: center;
  letter-spacing: .2px;
  flex: none;
  width: 100%;
  height: auto;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lexend, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}

.pr-minimalist {
  color: #494635;
  letter-spacing: .2px;
  flex: 1;
  width: 100%;
  height: auto;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lexend, sans-serif;
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.4;
}

.h4-minimal {
  color: #494635;
  letter-spacing: 0;
  flex: none;
  width: 100%;
  height: auto;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Lexend, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}

.image-18 {
  filter: sepia(61%);
}

.link-4 {
  color: var(--soft-dark-brand-color);
  font-family: Lexend, sans-serif;
}

.bold-text-17, .bold-text-18, .bold-text-19 {
  font-family: Libre Baskerville, sans-serif;
  font-style: italic;
  font-weight: 700;
}

.div-block-46 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: flex-start;
  padding-top: 140px;
  padding-bottom: 140px;
  display: flex;
}

.text-span-32 {
  font-family: Libre Baskerville, sans-serif;
  font-style: italic;
}

.lottie-animation-10, .lottie-animation-11, .lottie-animation-12, .lottie-animation-13, .lottie-animation-14, .lottie-animation-15 {
  width: 300px;
}

.text-span-33 {
  font-family: Libre Baskerville, sans-serif;
  font-style: italic;
  font-weight: 600;
}

.text-span-34, .text-span-35 {
  font-family: Libre Baskerville, sans-serif;
  font-style: italic;
}

.lottie-animation-16, .lottie-animation-17 {
  flex: none;
  max-width: 300px;
}

.lottie-animation-18, .lottie-animation-19, .lottie-animation-20, .lottie-animation-21, .lottie-animation-22, .lottie-animation-23, .lottie-animation-24 {
  max-width: 300px;
}

.bold-text-20, .bold-text-21, .bold-text-22 {
  font-weight: 400;
}

.background-video-3 {
  flex: none;
  width: 80%;
  height: 600px;
}

.multiple-animations {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex: none;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.lottie-animation-25, .lottie-animation-26 {
  width: 200px;
}

.div-block-47 {
  grid-column-gap: 27px;
  grid-row-gap: 27px;
  margin-top: 31px;
  display: flex;
}

.lottie-animation-27 {
  cursor: auto;
}

.lottie-animation-28, .lottie-animation-29 {
  width: 150px;
  margin-left: auto;
  margin-right: auto;
}

.lottie-animation-30 {
  height: 150px;
  margin-left: auto;
  margin-right: auto;
}

.lottie-animation-31, .lottie-animation-32, .lottie-animation-33, .lottie-animation-34, .lottie-animation-35, .lottie-animation-36, .lottie-animation-37, .lottie-animation-38, .lottie-animation-39, .lottie-animation-40, .lottie-animation-41 {
  width: 150px;
  margin-left: auto;
  margin-right: auto;
}

.lottie-animation-42 {
  width: 500px;
}

.box-tittle-project {
  background-color: #deddd7;
  width: 100%;
  padding: 8px 16px;
}

.box-tittle-project.formal-blue {
  z-index: 10;
  background-color: #c7d9e5;
  position: absolute;
}

.box-tittle-project.green {
  background-color: #d3ece6;
}

.box-tittle-project.orange {
  background-color: #f1e0c8;
}

@media screen and (min-width: 1280px) {
  .m-background {
    filter: none;
  }

  .m-background._2 {
    filter: sepia(0%);
  }

  .navbar-principal {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0;
  }

  .footer-heading {
    color: #fff4a3;
  }

  .footer-link {
    opacity: .57;
    color: #fff4a3;
  }

  .slider-testimonial {
    height: auto;
  }

  .body-2-boni.left {
    font-size: 1.3rem;
  }

  .text-header-animatior {
    margin-left: 5vw;
  }

  .logo-header {
    width: 150px;
  }

  .the-face.two-face {
    height: 250px;
  }

  .the-face.the-arm {
    height: 200px;
    margin-bottom: -38px;
  }
}

@media screen and (min-width: 1440px) {
  .tittle-adn-picture.tiny {
    justify-content: space-between;
    width: 20%;
    padding-left: 0;
  }

  .h3-2, .litte-arrow {
    letter-spacing: -.1em;
    background-image: none;
    font-size: 2rem;
  }

  .book-a-call-panel-copy {
    height: auto;
  }

  .pr-pa-2.black {
    font-size: 1.5rem;
  }

  .div-block-23 {
    flex-flow: row;
  }

  .c_img_portfo {
    transform: translate3d(0, 0, 40px);
  }

  .logo-header {
    width: 150px;
  }

  .social-proof-brand-illustrator {
    margin-left: -12px;
  }

  .over-texture {
    z-index: 9999;
  }

  .content-phone {
    background-image: linear-gradient(#181818, #252525);
  }

  .central-animation {
    transform: translate3d(0, 0, 40px);
  }

  .h5-brading-designer.half-size.left_margin {
    font-size: 1.8rem;
  }

  .the-face.two-face {
    height: 220px;
    margin-bottom: -64px;
  }

  .the-face.principal {
    height: 350px;
  }

  .the-face.the-arm {
    height: 160px;
    margin-bottom: -32px;
  }

  .the-face.hand-energy {
    width: 100%;
    height: 120px;
    margin-bottom: 0;
  }

  .corner {
    justify-content: flex-end;
    align-items: flex-end;
  }

  .h2-minimal {
    width: 300px;
    font-size: 1.4rem;
  }

  .video-sample {
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .h2-tittle-portfolio {
    font-size: 1.4rem;
  }

  .image-17 {
    flex: none;
    align-self: center;
    position: absolute;
    inset: auto 0%;
  }

  .h1-minial-copy, .number, .pr-minimalist {
    font-size: 1.4rem;
  }
}

@media screen and (min-width: 1920px) {
  .m-black-blue {
    box-shadow: -51px 61px 12px -8px #000000d1;
  }

  .icon-nav-bar.web {
    color: #1e3a96;
    margin-right: 0;
    padding-right: 0;
  }

  .heading.portfolio {
    font-size: 7vh;
  }

  .paragraph-cta-free-brand {
    margin-bottom: 10px;
  }

  .paragraph-cta-free-brand.b2 {
    font-size: 40px;
  }

  .div-cta-free-sketch {
    margin-top: 36px;
  }

  .paragraph-cta-limited-calendar, .paragraph-cta-limited-calendar-copy {
    margin-bottom: 10px;
  }

  .paragraph-cta-limited-calendar-copy.b2 {
    font-size: 40px;
  }

  .buttom-webdesigner {
    color: #1a7955;
  }

  .animation-portfolio.luasis {
    height: 800px;
  }

  .footer-flex-container {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .bonive-text {
    font-size: 28px;
  }

  .bonive-text.little-tittle, .second-tex-bonive-portfolio.bigger {
    font-size: 22px;
  }

  .grain-overlay {
    display: block;
  }

  .section-2.view-elements.specific-vh-size {
    z-index: 4;
  }

  .section-2.no-separation {
    padding-bottom: 0;
  }

  .text-button {
    flex: none;
  }

  .h1 {
    letter-spacing: -10px;
    flex: none;
  }

  .h1.white {
    text-decoration: none;
  }

  .h1.black {
    color: var(--neutral-700);
    letter-spacing: -10px;
  }

  .pr.left.bold.white {
    color: #fffdf9;
  }

  .button-2 {
    flex: none;
    max-width: 600px;
  }

  .h3 {
    flex: none;
  }

  .container-14.lateral {
    align-items: flex-start;
  }

  .process-animation {
    margin-bottom: 20px;
  }

  .container-17.vertical {
    align-items: flex-start;
  }

  .h4 {
    flex: none;
  }

  .container-18.tiny-porcent {
    width: 38.28%;
  }

  .container-19.lateral {
    align-items: flex-start;
  }

  .div {
    flex: none;
    width: 50%;
    margin-top: auto;
  }

  .container-20.lateral {
    align-items: flex-start;
  }

  .logo-bonive-gold-landing {
    width: 60px;
    height: 90px;
  }

  .h1-header {
    flex: none;
  }

  .h1-header.header {
    width: 80%;
  }

  .nav-bard-landing-page {
    border-radius: 40px;
    width: 900px;
    height: 80px;
    bottom: 31px;
  }

  .text-link-nav-bard, .text-link-nav-bard._2.w--current {
    width: 150px;
  }

  .h3-l {
    flex: none;
  }

  .whatsapp-chat {
    display: none;
  }

  .livechat-button {
    transition: all .2s;
  }

  .livechat-button:hover {
    background-color: #000;
    transform: scale(1.05);
  }

  .link-sefl-propmotion.linkedin {
    height: 80px;
  }

  .tittle-adn-picture.tiny {
    justify-content: flex-start;
    padding-left: 0;
  }

  .header-info-1 {
    margin-bottom: 10vh;
  }

  .header-short-div {
    width: 1200px;
    height: 140px;
  }

  .ai-arm-full-arm_door {
    flex: none;
    margin-top: 167px;
    margin-left: 310px;
    transform: rotate(0)scale(1);
  }

  .body-7 {
    background-size: 100% 100%;
  }

  .inner-card-info-animation {
    flex: 1;
    padding-right: 0;
  }

  .body-2-boni.left {
    width: auto;
    font-size: 1.8rem;
    line-height: .8;
    position: relative;
  }

  .h1-end, .right-buttom-scare-copy {
    flex: none;
  }

  .book-a-call-panel-copy {
    width: 600px;
    height: 300px;
  }

  .book-a-call-panel-copy.corner {
    width: 300px;
    height: 250px;
  }

  .section-header-3d.work {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .face_top_top {
    background-image: linear-gradient(#535353, #484848 49%, #535353);
  }

  .laptop-3d {
    order: 1;
    width: 800px;
  }

  .phone-3d-ver-2 {
    width: 300px;
    height: 550px;
    margin-right: -284px;
  }

  .phone_face_from-ver-2.wicth-3d._1.gold {
    background-image: radial-gradient(circle, #a2a17a, #323232);
  }

  .phone-screen-ver-2 {
    justify-content: center;
    align-items: center;
  }

  .container-header.work {
    justify-content: space-between;
    align-items: center;
  }

  .text-header-animatior {
    max-width: 500px;
    margin-left: auto;
    position: relative;
  }

  .h1-animator.footer {
    padding-left: 24px;
    padding-right: 64px;
  }

  .h1-animator.header {
    max-width: 800px;
    font-size: 90px;
  }

  .h1-animator.header.work {
    color: var(--yellow-bonive);
  }

  .h1-animator.header {
    font-size: 4rem;
  }

  .h5-animator {
    font-family: var(--font-family);
    flex: none;
    font-size: 2vh;
  }

  .box-3d-sample-animation.phone {
    pointer-events: auto;
  }

  .flex-block-3 {
    flex: none;
    margin-left: 0;
  }

  .phone-aniamtion {
    background-image: url('../images/Sample-APP.svg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 16px;
    flex: 1;
    width: 100%;
  }

  .phone-aniamtion.sample-work {
    background-image: none;
  }

  .bonive-picture-pa.shorter {
    width: 60px;
  }

  .bonive-picture-pa.header {
    width: 40px;
    height: 300px;
    box-shadow: none;
    flex-flow: column;
  }

  .box-leeter-aniamtion {
    mix-blend-mode: overlay;
    flex: none;
  }

  .section-web-animator {
    padding-top: 124px;
    overflow: hidden;
  }

  .section-web-animator.hover.half-page.yellow {
    min-height: 70vh;
    padding-top: 128px;
    padding-bottom: 128px;
  }

  .pr-pa {
    max-width: 800px;
    font-size: 3rem;
  }

  .content-pa.b.header {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .content-pa.b._70 {
    grid-column-gap: 64px;
    grid-row-gap: 64px;
  }

  .content-pa.glass-version {
    margin-top: 298px;
  }

  .pr-pa-2 {
    letter-spacing: 2px;
    font-size: 1.6rem;
  }

  .pr-pa-2.normal {
    color: #fff;
  }

  .pr-pa-2.black {
    letter-spacing: 0;
    width: 100%;
    max-width: none;
    font-size: 2.5rem;
  }

  .pr-pa-2.black.caption {
    margin-top: auto;
    font-size: 1.2rem;
  }

  .button-pa-f.left {
    margin-left: 0;
  }

  .button-pa-f.left.center {
    margin-left: auto;
    margin-right: auto;
  }

  .button-pa-f.absolute {
    width: 400px;
  }

  .vertical-line {
    perspective-origin: 50% 0;
    transform-origin: 50% 0;
    mix-blend-mode: normal;
  }

  .section-pa-show-project {
    flex-flow: column;
  }

  .section-3 {
    height: 90vh;
  }

  .animation-header-pa.center {
    mix-blend-mode: normal;
  }

  .sample-portfolio {
    object-fit: contain;
  }

  .round-bordes {
    object-fit: cover;
    min-width: 100px;
    margin-left: 0;
    margin-right: 0;
  }

  .round-bordes.left {
    margin-right: auto;
  }

  .head-aniamtion {
    right: 0;
  }

  .full-picture-sample {
    object-fit: cover;
    min-width: 100px;
    margin-left: 0;
    margin-right: 0;
  }

  .caption-header-aniamtions {
    letter-spacing: 2px;
  }

  .container-bonive-logos {
    height: auto;
  }

  .logo-ai-enterprise {
    opacity: .35;
    object-fit: contain;
    width: 160px;
    height: 60px;
  }

  .div-block-15 {
    grid-column-gap: 124px;
    grid-row-gap: 124px;
  }

  .h4-visual-designer {
    flex: none;
  }

  .h4-visual-designer.header {
    width: 600px;
    margin-bottom: 2rem;
    font-size: 2.2rem;
    font-weight: 400;
  }

  .h4-visual-designer.half {
    font-size: 1.2rem;
  }

  .pr-explain-illustration {
    letter-spacing: 2px;
  }

  .card-resume-porfolio {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    width: 400px;
    height: 400px;
  }

  .div-block-23 {
    flex-flow: column;
  }

  .base-auto-carrucell {
    transform: none;
  }

  .image-5 {
    width: 100%;
    max-width: none;
    height: auto;
  }

  .div-block-27.black {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }

  .logo-header {
    object-fit: fill;
    width: 240px;
    height: 80px;
  }

  .logo-header.shorter {
    object-fit: contain;
    width: 220px;
  }

  .social-proof-brand-illustrator {
    width: 200px;
    margin-left: -19px;
  }

  .recomendation-brand-illustrator {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .recomendation-brand-illustrator.green, .recomendation-brand-illustrator.none {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .up-work-logo {
    width: 100px;
  }

  .central-tittle {
    font-size: 28px;
  }

  .div-app-header-m {
    overflow: hidden;
  }

  .div-mobile-header {
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .div-block-29 {
    width: 500px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: -280px;
    padding-bottom: 0;
    position: absolute;
    inset: 0%;
  }

  .div-block-30 {
    height: 350px;
  }

  .card-portfolio-phone {
    width: 280px;
  }

  .flex-block-10 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .content-phone {
    width: 350px;
    margin-left: 85px;
  }

  .arm-animation {
    width: 600px;
    height: 800px;
  }

  .pr-focus {
    max-width: 800px;
    font-size: 2rem;
  }

  .paragraph-phone-top-portfolio {
    width: 300px;
    line-height: 1.2;
  }

  .rive-2.principal {
    width: 400px;
    margin-bottom: 19px;
  }

  .header-branding-1, .header-branding-1.lateral-black.large.more-margen {
    background-image: none;
  }

  .header---branding {
    height: 250px;
    font-size: 6rem;
  }

  .content-header-_-branding {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }

  .h5-acent {
    font-size: 24px;
  }

  .div-block-32 {
    flex: none;
    transform: none;
  }

  .black-table {
    height: 240px;
    bottom: -25px;
    transform: perspective(1376px)rotateX(39deg)rotateY(0)rotateZ(0);
  }

  .button-base-design {
    transform: none;
  }

  .cards-how-we-works {
    height: 700px;
  }

  .top-over-shadow {
    opacity: .65;
  }

  .bottom-shadow {
    opacity: .47;
  }

  .h5-brading-designer {
    flex: none;
    font-size: 2.4rem;
  }

  .h5-brading-designer.half-size {
    font-size: 1.8rem;
  }

  .h5-brading-designer.half-size.left_margin {
    font-size: 2.4rem;
  }

  .text-block-3 {
    font-size: 20px;
  }

  .navbar {
    display: none;
  }

  .layout-central-one.normal-size {
    width: 1300px;
    height: 700px;
  }

  .layout-central-one.principal.space-above {
    width: 900px;
    height: 500px;
  }

  .button-3 {
    width: 200px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
  }

  .button-3.w--current {
    width: 200px;
    height: 50px;
    font-size: 20px;
  }

  .button-3.energy {
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
  }

  .button-3.world {
    width: 200px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
  }

  .text-block-2 {
    font-size: 20px;
  }

  .paragraph-4.central, .paragraph-4.central.lore._3-the-dark {
    font-size: 35px;
    line-height: 1;
  }

  .paragraph-4.central.lore._2-energy, .paragraph-4.central.lore._1-world {
    line-height: 1;
  }

  .tabs-menu-2 {
    margin-left: auto;
    margin-right: auto;
  }

  .text-block {
    font-size: 20px;
  }

  .the-face {
    width: 520px;
    height: 500px;
  }

  .the-face.two-face {
    height: 400px;
    margin-bottom: -85px;
  }

  .the-face.principal {
    width: 800px;
    height: 500px;
  }

  .the-face.the-arm {
    height: 200px;
    margin-bottom: -19px;
  }

  .the-face.hand-energy {
    width: 100%;
    height: 200px;
    margin-bottom: 0;
    margin-right: 0;
  }

  .div-block-33 {
    justify-content: flex-start;
    align-items: flex-end;
  }

  .div-block-33.right {
    justify-content: flex-end;
    align-items: flex-end;
  }

  .previus-projects {
    height: 700px;
  }

  .card-previus-projects {
    width: 1200px;
  }

  .presentation-project-assets {
    height: 500px;
  }

  .h5-tittle {
    flex: none;
    font-size: 2.4rem;
  }

  .h5-info {
    flex: none;
    font-size: 1.5rem;
  }

  .left-shadow {
    width: 15%;
    height: 100%;
    inset: 0% auto 0% 0%;
  }

  .right-shadow {
    width: 15%;
    height: 100%;
    inset: 0% 0% 0% auto;
  }

  .h2-minimal {
    width: 400px;
    font-size: 1.6rem;
  }

  .flex-block-19 {
    transform: scale(1);
  }

  .flex-block-24 {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .content-protfolio {
    justify-content: flex-start;
    align-items: center;
    margin-top: auto;
    margin-bottom: auto;
    position: relative;
  }

  .background-video-2 {
    height: auto;
    min-height: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .pr-minimal-2, .h2-tittle-portfolio, .description-text {
    font-size: 1.6rem;
  }

  .image-17 {
    z-index: 5;
    object-fit: cover;
    flex: none;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
  }
}

@media screen and (max-width: 991px) {
  .m-background._2 {
    display: flex;
  }

  .paragraph-information {
    text-align: center;
    justify-content: center;
    width: 80%;
    margin-top: 0%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0%;
    font-size: 20px;
  }

  .paragraph-information.privacy {
    width: 50%;
  }

  .navbar-principal {
    padding-left: 10px;
    padding-right: 10px;
  }

  .nav-menu {
    flex: none;
    justify-content: flex-end;
    margin-right: 0;
    padding-left: 0;
  }

  .container {
    flex-wrap: nowrap;
    justify-content: center;
    width: auto;
  }

  .paragraph {
    font-size: 18px;
  }

  .div-protfolio {
    flex: none;
  }

  .info-buttom-web-page {
    margin-right: 0;
  }

  .animation-portfolio.luasis-animation, .animation-portfolio.luasis-animation._1, .animation-portfolio.luasis-animation._2 {
    width: 600px;
  }

  .form-block {
    width: 40%;
  }

  .info-contact-form {
    width: 70%;
  }

  .animation-to-form {
    width: 40vh;
    height: 40vh;
  }

  .animation-email {
    left: -30.1vh;
  }

  .thank-you-men {
    width: 70%;
  }

  .footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .div-box-portfolio {
    flex: none;
  }

  .text-button {
    color: #08232c;
    border: 1px #000;
    flex: none;
    font-size: 4vh;
  }

  .h1 {
    font-size: 9vh;
  }

  .h1.left.white {
    font-size: 8vh;
  }

  .h1.left.white.shadow {
    text-align: center;
  }

  .pr {
    line-height: 1.2;
  }

  .pr.left-full {
    text-align: center;
  }

  .pr.left {
    text-align: left;
    order: 1;
    width: 100%;
  }

  .pr.tiny-text {
    height: 10vh;
    font-size: 2vh;
  }

  .pr.tiny-text.space-around.gold.right-auto {
    height: 5vh;
  }

  .pr.tiny-text.space-around.gold.right-auto.no-space {
    margin-top: 1vh;
  }

  .pr.tiny-text.bold.center {
    height: 6vh;
  }

  .pr.tiny-text.yellow.center {
    font-size: 2vh;
  }

  .pr.tiny-questions {
    font-size: 2.4vh;
  }

  .pr.minute, .pr.minute.left {
    font-size: 2vh;
  }

  .pr.personal-presentation {
    text-align: center;
    order: 1;
    width: 100%;
    font-size: 3vh;
  }

  .pr.auto-center {
    font-family: Saira;
  }

  .h3 {
    text-align: center;
    font-size: 5vh;
  }

  .text_left.header-animation {
    align-items: center;
    width: 90%;
    margin-right: auto;
    padding-top: 40vh;
  }

  .animation.out-right {
    width: 100%;
    margin-right: 0;
  }

  .feature-aniamtion {
    height: 30vh;
  }

  .feature-div {
    width: 35%;
  }

  .container-14.lateral.left-fit {
    flex-direction: column;
  }

  .container-process {
    width: 90%;
  }

  .recomendation-div {
    align-items: center;
  }

  .picture-recomendation {
    order: -1;
  }

  .h4 {
    text-align: center;
    font-size: 6vh;
  }

  .h4.pricing {
    text-align: left;
    height: 18vh;
    font-size: 5vh;
  }

  .bold-text-7 {
    font-size: 2vh;
  }

  .text-div {
    flex: none;
    width: 60%;
  }

  .send-a-email {
    text-align: left;
    flex: none;
  }

  .h1-header {
    font-size: 9vh;
  }

  .h1-header.header {
    opacity: 1;
    width: 100%;
  }

  .text-link-nav-bard {
    font-size: 1.5vh;
    font-weight: 400;
  }

  .h3-l {
    text-align: center;
    font-size: 3vh;
  }

  .heading-2-landing {
    text-align: center;
  }

  .sticky {
    flex-direction: row;
    justify-content: center;
    align-self: center;
    align-items: flex-start;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    inset: 0% auto auto;
    overflow: hidden;
  }

  .whatsapp-block {
    bottom: 20px;
    right: 20px;
  }

  .whatsapp-chat {
    display: none;
  }

  .tittle-review {
    line-height: 1.2;
  }

  .tittle-review.left {
    text-align: left;
    order: 1;
    width: 100%;
  }

  .header-info-1 {
    opacity: 1;
    width: 90%;
  }

  .header-info-2 {
    opacity: 1;
    flex: none;
    justify-content: center;
  }

  .header-section-total-info {
    align-items: flex-start;
  }

  .lottie-animation-2 {
    text-align: center;
    flex: none;
    justify-content: center;
    align-self: center;
    align-items: center;
    width: 150%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
    inset: -15% auto auto;
  }

  .header-short-div {
    z-index: 10;
    opacity: 1;
    align-items: flex-start;
    width: 600px;
    height: 100px;
    position: static;
  }

  .ai-arm_info {
    padding-left: 10vw;
  }

  .container-image-and-text {
    width: 40vw;
  }

  .book-a-call-panel-copy {
    width: 350px;
    height: auto;
  }

  .laptop-3d {
    transform: scale(.6);
  }

  .phone-3d-ver-2 {
    transform: scale(.9)perspective(954px)rotateX(-9deg)rotateY(-39deg)rotateZ(0);
  }

  .text-header-animatior {
    flex: none;
    max-width: 50%;
    margin-left: 0;
  }

  .h1-animator {
    font-size: 50px;
  }

  .h1-animator.footer {
    border-radius: 16px;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .h1-animator.header {
    border-radius: 16px;
    padding-top: 50px;
    padding-bottom: 10px;
    font-size: 40px;
  }

  .h5-animator {
    text-align: center;
  }

  .h5-animator.black {
    font-size: 1rem;
  }

  .section-web-animator.yellow.separation-content, .section-web-animator.full-height {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .section-web-animator.no-bottom-space.grey_background {
    padding-left: 2vw;
    padding-right: 2vw;
  }

  .container-pa {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: row;
    justify-content: center;
    align-items: center;
  }

  .container-pa.black._3d-shadow {
    justify-content: center;
    align-items: flex-start;
  }

  .container-pa.center-content {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    justify-content: center;
  }

  .pr-pa {
    max-width: 500px;
  }

  .content-pa.b {
    margin-right: auto;
  }

  .content-pa.b.header {
    margin-left: 50px;
  }

  .content-pa.b._70 {
    width: 65%;
  }

  .content-pa.s {
    width: 30%;
    margin-left: 0;
    margin-right: auto;
  }

  .content-pa.s.left {
    width: 60%;
  }

  .content-pa.s.left.top_spacing {
    order: -1;
  }

  .content-pa.show-sample {
    width: 50%;
    margin-left: 0;
    margin-right: auto;
  }

  .content-pa.glass-version {
    margin-left: 0;
    margin-right: auto;
  }

  .pr-pa-2 {
    width: 100%;
  }

  .pr-pa-2.center {
    max-width: 100%;
  }

  .sample-conent-portfoiol-pa {
    max-width: 500px;
  }

  .over-mirro-bonive {
    display: none;
  }

  .section-3 {
    height: auto;
    min-height: 50vh;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .animation-header-pa {
    max-width: 100%;
  }

  .sample-style {
    width: 100%;
  }

  .content-services {
    width: 250px;
  }

  .h2-animator {
    font-size: 26px;
  }

  .head-aniamtion {
    opacity: .37;
    mix-blend-mode: color-dodge;
  }

  .glass-over-2 {
    left: -229px;
  }

  .div-block-9 {
    margin-right: 3vw;
  }

  .caption-header-aniamtions {
    width: 100%;
  }

  .div-block-15 {
    width: 600px;
  }

  .h4-visual-designer {
    text-align: center;
    font-size: 5vh;
  }

  .h4-visual-designer.header {
    text-align: left;
    width: auto;
    max-width: 80vw;
  }

  .h4-visual-designer.half {
    text-align: left;
  }

  .div-block-21 {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
  }

  .pr-explain-illustration {
    width: 100%;
  }

  .div-block-22 {
    order: -1;
  }

  .logo-header {
    width: 140px;
  }

  .social-proof-brand-illustrator {
    order: -1;
  }

  .recomendation-brand-illustrator {
    align-items: center;
  }

  .container-feedback {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
  }

  .cursor-wrap {
    display: none;
  }

  .grid-sample {
    margin-right: 3vw;
  }

  .div-app-header-m {
    justify-content: space-between;
  }

  .div-mobile-header {
    margin-left: 0;
  }

  .div-block-29 {
    margin-left: 66px;
  }

  .content-phone {
    width: 200px;
    padding-left: 16px;
  }

  .arm-animation {
    width: 300px;
  }

  .pr-focus {
    max-width: 500px;
  }

  .paragraph-phone-top-portfolio {
    flex: none;
    width: 100%;
    font-size: 12px;
  }

  .over-black-intro {
    display: block;
  }

  .header-branding-1.lateral-black.large.more-margen {
    padding-left: 4%;
    padding-right: 4%;
  }

  .header---branding {
    font-size: 50px;
  }

  .button-base-design {
    height: auto;
  }

  .cards-how-we-works {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .flex-block-15 {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }

  .h5-brading-designer {
    text-align: center;
    font-size: 5vh;
  }

  .h5-brading-designer.half-size.left_margin {
    text-align: left;
    width: 80%;
    margin-left: 16px;
  }

  .heading-principal {
    text-align: center;
    width: 70%;
    font-size: 3vh;
    line-height: 1.2;
  }

  .tabs-2 {
    width: 80%;
    height: 80%;
  }

  .navbar {
    margin-left: auto;
    margin-right: auto;
  }

  .corner-elements {
    height: 50vh;
  }

  .buttons-header {
    flex-direction: row;
    height: 15vh;
  }

  .layouttemple {
    background-position: 50% 0;
    width: 70vw;
    height: 60vh;
  }

  .layout-central-one {
    flex: none;
    width: 30%;
  }

  .layout-central-one.normal-size {
    width: 800px;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .layout-central-one.principal {
    width: 90%;
  }

  .div-logo-info {
    height: 50%;
  }

  .div-logo-info.left {
    align-items: center;
  }

  .logos-header.left {
    flex-direction: row;
  }

  .layout-2 {
    flex: none;
    width: 30%;
  }

  .layout-2.header {
    flex-direction: column;
    width: 80%;
    height: 50%;
  }

  .layout-2.header.short {
    width: 80%;
    height: 20%;
    margin-top: auto;
  }

  .central-base {
    flex: none;
    width: 250px;
    height: 80%;
  }

  .container-absolute {
    height: 100vh;
  }

  .button-discord {
    inset: auto 0% 0% auto;
  }

  .lore-back {
    flex: none;
    width: 250%;
  }

  .lore-back._3, .lore-back._2, .lore-back._1 {
    width: 250%;
  }

  .container-21 {
    height: 100vh;
  }

  .container-21.header {
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
  }

  .image-nav-bard.image {
    background-size: contain;
    left: 0%;
  }

  .previus-projects {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .card-previus-projects {
    width: 100%;
  }

  .h5-tittle {
    text-align: left;
  }

  .h5-info {
    text-align: center;
  }

  .section-minila {
    flex-flow: column;
  }

  .contanier-minial-2 {
    flex: none;
    width: 100%;
    position: relative;
    top: 0;
  }

  .contanier-minial-2.short.white.stick {
    width: 100%;
  }

  .container-about {
    flex: none;
    width: 100%;
    position: relative;
    top: 0;
  }
}

@media screen and (max-width: 767px) {
  .m-black-blue {
    height: 90%;
  }

  .paragraph-information {
    text-align: center;
    padding-left: 0%;
  }

  .navbar-principal {
    justify-content: center;
    height: 50px;
    padding-right: 0;
  }

  .nav-menu {
    justify-content: center;
    align-items: center;
    width: auto;
    padding-left: 0;
  }

  .container {
    width: 80%;
  }

  .icon-nav-bar {
    background-size: cover;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    padding-left: 0;
    padding-right: 0;
  }

  .icon-nav-bar.special {
    width: 90px;
    height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 20px;
  }

  .icon-nav-bar.web {
    width: 150px;
    height: 25px;
    margin-left: 0;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 15px;
  }

  .icon-nav-bar.essendis {
    background-size: cover;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    padding-left: 0;
    padding-right: 0;
  }

  .paragraph {
    width: 40vw;
    font-size: 2.5vh;
  }

  .heading.over {
    width: 70vw;
    max-width: 90vw;
    padding-left: 1vh;
    padding-right: 1vh;
  }

  .div-protfolio {
    background-color: #ffaf4d;
    border-radius: 4px;
    flex: none;
    width: 30%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .sample-true, .sample-true-copy, .sample-true-copy._8 {
    height: 80%;
  }

  .paragraph-2 {
    text-align: center;
  }

  .info-intro-special-animation {
    background-color: #000f18;
  }

  .special-animation {
    background-color: #0000;
    background-size: contain;
    flex: none;
  }

  .headin-special-aniamtion {
    height: 100px;
    margin-bottom: 35px;
    font-size: 7vw;
  }

  .paragraph-3 {
    width: 100%;
    font-size: 4vh;
  }

  .info-text-intro-speciala-nimation {
    width: 70%;
    height: auto;
  }

  .info-buttom-web-page {
    background-color: #f1aa5800;
    height: 30px;
    margin-right: 0;
  }

  .diamon-navbar {
    width: 40px;
    height: 40px;
    margin-left: -26px;
    left: auto;
  }

  .buttom-webdesigner {
    flex: none;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .info-header-personal-animations {
    flex-direction: column;
    margin-top: 75px;
  }

  .text-header-personal-animation {
    flex-direction: column;
    order: 1;
    justify-content: center;
    width: 80%;
    height: 250px;
    margin-top: 40px;
    display: flex;
  }

  .headign-personal-animations {
    text-align: center;
    flex: none;
    font-family: Limelight;
  }

  .text-heading-personal-animation {
    color: #fff;
    text-align: center;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
    font-size: 3vh;
  }

  .base-personal-animation {
    order: -1;
    width: 300px;
    height: 300px;
  }

  .animation-portfolio {
    width: 100vw;
  }

  .animation-portfolio.luasis-animation, .animation-portfolio.luasis-animation._1, .animation-portfolio.luasis-animation._2 {
    width: 400px;
  }

  .layout {
    width: 80%;
    margin-top: 206px;
    top: 75px;
  }

  .contact-form {
    padding: 40px 20px;
  }

  .form-block {
    width: 50%;
  }

  .material-contact-form {
    padding-bottom: 10vh;
  }

  .animation-to-form {
    align-self: flex-end;
    width: 30vh;
    height: 30vh;
    margin-top: 0;
    margin-bottom: 14px;
  }

  .animation-email {
    left: -34.6vh;
  }

  .thank-you-men {
    width: 100%;
  }

  .footer {
    padding: 40px 20px;
  }

  .bonive-text, .second-tex-bonive-portfolio, .second-tex-bonive-portfolio.bigger {
    margin-left: 15px;
  }

  .section-2.top-separation {
    background-color: #131e2b;
    padding-bottom: 5vh;
  }

  .h1.left.white {
    font-size: 5vh;
  }

  .h1.white {
    font-size: 6.5vh;
  }

  .pr.left-full, .pr.left {
    font-size: 2.5vh;
  }

  .pr.center.full {
    width: 70%;
  }

  .bonive-logo-name {
    height: 50px;
  }

  .text_left {
    height: 200px;
  }

  .featuers-web-art {
    padding-top: 0;
  }

  .recomendation-div {
    align-items: center;
    width: 100%;
  }

  .picture-recomendation {
    flex: none;
    width: 40%;
  }

  .h4.right-auto {
    font-size: 5vh;
  }

  .h4.pricing {
    text-align: left;
    height: 25vh;
    font-size: 5vh;
  }

  .send-a-email {
    font-size: 3.5vh;
  }

  .text-6 {
    font-size: 20px;
  }

  .text-7 {
    text-align: right;
    font-size: 20px;
  }

  .text-footer {
    flex: none;
  }

  .logo-bonive-gold-landing {
    height: 50px;
  }

  .h1-header.header {
    justify-content: center;
    align-self: auto;
    width: 100%;
    display: flex;
  }

  .nav-bard-landing-page {
    width: 100%;
    bottom: 0%;
  }

  .whatsapp-block {
    bottom: 15px;
    right: 15px;
  }

  .tittle-review.left {
    font-size: 2.5vh;
  }

  .header-info-2 {
    display: flex;
  }

  .header-short-div {
    width: 100%;
  }

  .h3-2 {
    text-align: left;
  }

  .h3-2.left {
    font-size: 1.2rem;
  }

  .link-card-services {
    height: 100%;
  }

  .body-2-boni {
    font-size: 1.2rem;
  }

  .book-a-call-panel-copy {
    width: 100%;
    height: 300px;
  }

  .section-header-3d {
    height: auto;
    position: relative;
  }

  .screen-3d.top {
    transform: scale(.6)rotateX(-99deg)rotateY(0)rotateZ(0);
  }

  .screen-3d.base-computer {
    transform: scale(.6)rotateX(15deg)rotateY(0)rotateZ(0);
  }

  .laptop-3d {
    height: 500px;
    transform: scale(.7);
  }

  .phone-3d-ver-2 {
    margin-right: 0;
    transform: perspective(954px)rotateX(-9deg)rotateY(-39deg)rotateZ(0);
  }

  .container-header {
    flex-flow: column;
    height: auto;
  }

  .text-header-animatior {
    justify-content: flex-start;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .h1-animator {
    letter-spacing: -2px;
    margin-bottom: auto;
    font-size: 30px;
  }

  .h1-animator.full-width {
    text-align: center;
  }

  .h1-animator.footer {
    margin-bottom: 0;
    font-size: 30px;
  }

  .h1-animator.header {
    text-align: center;
    text-align: left;
    letter-spacing: -2px;
    margin-bottom: 0;
    padding-top: 0;
    font-size: 30px;
  }

  .h5-animator {
    font-size: 12px;
  }

  .nav-bard-animator {
    justify-content: space-around;
    align-items: flex-start;
    padding-left: 2vw;
    padding-right: 2vw;
  }

  .flex-block-3 {
    width: 100%;
    height: auto;
    margin-top: -197px;
    margin-left: auto;
    margin-right: auto;
  }

  .section-web-animator {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .container-pa {
    text-align: center;
    flex-flow: column;
  }

  .container-pa.black._3d-shadow {
    flex-flow: column;
  }

  .container-pa.center-content {
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .pr-pa {
    text-align: left;
  }

  .content-pa.b.lateral {
    justify-content: flex-start;
    align-items: flex-end;
    margin-left: auto;
    margin-right: auto;
  }

  .content-pa.b.left-content {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
    margin-left: auto;
    margin-right: auto;
  }

  .content-pa.b.left-content.compress {
    margin-left: auto;
    margin-right: auto;
  }

  .content-pa.b.header {
    flex-flow: column;
    margin-left: 0;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .content-pa.b._70 {
    width: 80%;
    margin-right: 0;
  }

  .content-pa.s {
    order: -1;
    width: 50%;
  }

  .pr-pa-2 {
    text-align: left;
  }

  .pr-pa-2.center {
    min-height: 100px;
  }

  .button-pa-f.left.m, .button-pa-f.left.center {
    margin-bottom: 0;
  }

  .divider.none {
    display: none;
  }

  .sample-conent-portfoiol-pa {
    right: -31%;
  }

  .flex-block-6 {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;
    max-width: none;
  }

  .nav-bar-pa-copy.futter {
    z-index: 5;
  }

  .round-bordes {
    object-fit: cover;
    min-height: 300px;
  }

  .content-services {
    background-color: #0000001a;
    justify-content: center;
    align-items: center;
    width: 350px;
    padding-top: 32px;
    padding-left: 32px;
    padding-right: 32px;
  }

  .head-aniamtion {
    opacity: .18;
  }

  .full-picture-sample {
    object-fit: cover;
    min-height: 300px;
  }

  .caption-header-aniamtions {
    text-align: left;
  }

  .container-bonive-logos {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: flex;
  }

  .div-block-15 {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    width: auto;
  }

  .pr-explain-illustration {
    text-align: left;
  }

  .over-lateral-shadow {
    background-image: radial-gradient(circle, #18181800 66%, #181818a8);
  }

  .social-proof-brand-illustrator {
    flex: none;
    width: 200px;
  }

  .recomendation-brand-illustrator {
    align-items: center;
    width: 100%;
  }

  .recomendation-brand-illustrator.green {
    width: 400px;
  }

  .container-feedback {
    text-align: center;
    flex-flow: column;
  }

  .central-tittle {
    margin-left: 15px;
  }

  .rive-central-animation {
    margin-left: -70px;
  }

  .div-app-header-m {
    justify-content: center;
    align-items: flex-end;
  }

  .phone-and-animation {
    z-index: 2;
    perspective-origin: 50% 100%;
    transform-origin: 50% 100%;
    margin-left: 0;
    transform: scale(.7);
  }

  .div-mobile-header {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .div-block-29 {
    margin-top: 110px;
  }

  .arm-animation {
    order: 1;
    height: 300px;
  }

  .pr-focus {
    text-align: left;
  }

  .header-branding-presentation {
    height: auto;
    position: relative;
  }

  .header-branding-1.no-lateral-margin {
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    margin-top: -78px;
  }

  .header---branding {
    letter-spacing: -2px;
    margin-bottom: auto;
    font-size: 60px;
  }

  .button-base-design {
    height: auto;
    margin-bottom: -35px;
  }

  .flex-block-15 {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
  }

  .h5-brading-designer.half-size.left_margin {
    font-size: 1.2rem;
  }

  .tab-pane-tab-2 {
    width: 100%;
    height: auto;
  }

  .heading-principal {
    font-size: 2.5vh;
  }

  .tabs-2 {
    height: 90%;
    display: flex;
  }

  .navbar {
    justify-content: center;
    align-items: flex-start;
  }

  .corner-elements {
    height: 50vh;
  }

  .layouttemple {
    width: 80%;
    height: 50%;
  }

  .logos-sources.binance, .logos-sources.eth, .logos-sources.polygon {
    margin-left: auto;
    margin-right: auto;
  }

  .layout-central-one.normal-size {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .layout-central-one.principal {
    width: 100%;
    height: 45%;
  }

  .layout-central-one.principal.space-above {
    height: 80%;
  }

  .div-logo-info.left {
    height: auto;
  }

  .logos-header.left {
    flex-direction: column;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .logo-header-2 {
    font-size: 12px;
  }

  .tab-pane-tab-1-2 {
    margin-left: auto;
    margin-right: auto;
  }

  .central-base {
    height: 80%;
  }

  .tabs-content-2 {
    width: 90vw;
  }

  .button-3 {
    width: 15vh;
    font-size: 1.8vh;
    display: flex;
  }

  .button-3.energy, .button-3.world.w--current {
    width: 15vh;
  }

  .buttonbase {
    width: 15vh;
    display: flex;
  }

  .paragraph-4.central {
    font-size: 2.5vh;
  }

  .paragraph-4.central.lore._3-the-dark, .paragraph-4.central.lore._2-energy {
    max-width: none;
    font-size: 2.5vh;
  }

  .paragraph-4.central.lore._1-world {
    width: auto;
    max-width: none;
    font-size: 2.5vh;
  }

  .section-4.header._3 {
    justify-content: center;
    display: flex;
  }

  .tabs-menu-2 {
    width: 70vw;
  }

  .container-21 {
    width: 90%;
  }

  .container-21.full {
    width: 160%;
  }

  .section-minila {
    grid-column-gap: 5.2rem;
    grid-row-gap: 5.2rem;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: auto;
    padding-top: 0;
    padding-left: 4%;
    padding-right: 4%;
    position: relative;
  }

  .h2-minimal {
    width: 50vw;
  }

  .contanier-minial-2 {
    width: 100%;
    position: relative;
  }

  .contanier-minial-2.short.white.stick {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .tittle-portfolio {
    width: 50vw;
  }

  .container-about {
    padding-top: 140px;
    position: relative;
  }
}

@media screen and (max-width: 479px) {
  .body.hide-elements {
    flex-direction: column;
    max-width: 100vw;
    display: flex;
    overflow: visible;
  }

  .m-background {
    background-image: url('../images/black-blue-golden.png');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .m-background._2 {
    background-image: none;
    height: 100%;
    display: flex;
  }

  .m-gold-line {
    height: 99%;
    display: none;
  }

  .m-black-blue {
    order: -1;
    align-self: center;
    align-items: stretch;
    height: 90%;
    margin-bottom: 0;
    display: none;
  }

  .m-black-blue.terms {
    height: 98%;
  }

  .paragraph-information {
    text-align: center;
    border: 1px #000;
    border-radius: 14px;
    justify-content: center;
    margin-right: auto;
    padding-bottom: 5px;
    padding-left: 0%;
  }

  .paragraph-information.privacy {
    width: 80%;
  }

  .navbar-principal {
    background-image: linear-gradient(#050021, #050021 51%, #090039);
    flex-direction: column;
    justify-content: center;
    align-self: center;
    align-items: center;
    height: 90px;
    padding-right: 0;
    display: flex;
    inset: 0% 0% auto;
  }

  .nav-menu {
    flex: none;
    justify-content: center;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }

  .container {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-self: center;
    align-items: stretch;
    width: auto;
    height: auto;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .container.retunre {
    width: 80vw;
  }

  .icon-nav-bar {
    background-size: 30px;
    border-radius: 5px;
    flex: none;
    width: 30px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }

  .icon-nav-bar.true {
    border-radius: 5px;
    margin-left: 0;
    padding: 0;
  }

  .icon-nav-bar.compli {
    background-size: contain;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .icon-nav-bar.special {
    width: 50px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 15px;
  }

  .icon-nav-bar.web {
    width: auto;
    height: auto;
    padding-bottom: 0;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
    display: none;
  }

  .icon-nav-bar.personal {
    background-size: contain;
    width: 30px;
    margin-right: 5px;
    padding-left: 0;
    padding-right: 0;
  }

  .icon-nav-bar.personal.w--current {
    padding-left: 0;
    padding-right: 0;
  }

  .paragraph {
    color: #fff;
    text-align: center;
    border-bottom: 1px #ffbc00bd;
    border-radius: 20px;
    width: 100%;
    padding-top: 2vh;
    padding-bottom: 2vh;
  }

  .paragraph.central {
    width: 100%;
  }

  .heading.over {
    z-index: 5;
    flex: none;
    order: -1;
    align-items: center;
    width: 80%;
    max-width: 80vw;
    min-height: 40px;
    margin-top: 53px;
    margin-left: auto;
    margin-right: auto;
    padding-top: .5vh;
    padding-bottom: .5vh;
    font-size: 4vh;
  }

  .heading.portfolio {
    width: auto;
    margin-left: auto;
    margin-right: auto;
    font-size: 3vh;
  }

  .div-protfolio {
    order: 1;
    justify-content: center;
    align-self: center;
    align-items: center;
    width: auto;
    height: 35px;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    padding-bottom: 0;
    padding-left: 5px;
    padding-right: 5px;
    display: flex;
    position: relative;
  }

  .section {
    height: auto;
    margin-top: 0;
    padding-top: 10vh;
    padding-bottom: 10vh;
  }

  .section.privacy.long {
    justify-content: flex-start;
  }

  .section.privacy.header {
    flex-direction: column;
  }

  .section.privacy.info {
    align-items: flex-start;
    height: auto;
    padding-top: 20vh;
    padding-bottom: 20vh;
  }

  .div-true-presentation {
    flex-direction: column;
    align-items: center;
  }

  .intro-true-ani {
    background-size: 150% 150%;
    height: 50%;
    margin-top: 0;
  }

  .line-orange {
    text-align: center;
  }

  .info-intro {
    width: 70%;
  }

  .section-sample-true {
    height: 100vh;
    margin-top: -116px;
  }

  .sample-true {
    height: 70%;
  }

  .tex-true {
    margin-top: 10px;
  }

  .sample-true-copy._2-copy, .sample-true-copy._2-copy-copy {
    background-size: 100% 100%;
    height: 70%;
  }

  .sample-true-copy._2-copy-copy-copy {
    background-size: 100% 100%;
    width: 90%;
    height: 70%;
  }

  .sample-true-copy._2-copy-copy-copy-copy {
    background-size: 100% 100%;
    width: 90%;
    height: 60%;
  }

  .sample-true-copy._5 {
    background-size: 100% 100%;
    height: 70%;
  }

  .sample-true-copy._6, .sample-true-copy._7, .sample-true-copy._8 {
    background-size: 100% 100%;
    width: 90%;
    height: 70%;
  }

  .special {
    font-size: 20px;
  }

  .div-color-true {
    width: 100%;
  }

  .intro-compli-ai {
    padding-top: 0;
  }

  .info-intro-compli-ai {
    width: 70vw;
  }

  .heading-compli-ai {
    width: 100%;
  }

  .info-image-sample-compli._4 {
    width: 100vw;
  }

  .image-sample-compli-ai._4 {
    background-position: 50%;
    background-size: 200% 200%;
  }

  .paragraph-2 {
    width: 70%;
  }

  .intro-special-animation {
    height: 100vh;
  }

  .info-intro-special-animation {
    justify-content: flex-end;
  }

  .special-animation {
    background-position: 80% 100%;
    background-size: cover;
    height: 50%;
  }

  .headin-special-aniamtion {
    text-align: center;
    justify-content: center;
    width: 80%;
    height: 80px;
    margin: 10px auto 29px;
    padding-left: 0;
    padding-right: 0;
    font-size: 10vw;
  }

  .paragraph-3 {
    text-align: center;
    width: 100%;
    margin: -4px auto 0;
    padding-left: 0;
    font-size: 3.5vh;
  }

  .special-animation-sample {
    background-size: cover;
  }

  .info-text-intro-speciala-nimation {
    flex: none;
    justify-content: center;
    align-self: center;
    align-items: center;
    width: 100%;
    margin-top: 109px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    position: relative;
    inset: auto 0% 0%;
  }

  .paragraph-cta-free-brand.b {
    font-size: 20px;
  }

  .div-cta-free-sketch.middle {
    z-index: 20;
    width: 100vw;
    height: 250px;
    margin-top: 0;
  }

  .div-cta-free-limite-calendar._2 {
    width: 95vw;
    height: auto;
  }

  .paragraph-cta-limited-calendar.b, .paragraph-cta-limited-calendar-copy.b2, .button-cta-limited-calendar {
    font-size: 20px;
  }

  .info-buttom-web-page {
    width: auto;
    height: auto;
  }

  .diamon-navbar {
    margin-top: 0;
    margin-left: 0;
  }

  .buttom-webdesigner {
    width: auto;
    height: auto;
  }

  .section-header-personal {
    padding-top: 10vh;
  }

  .info-header-personal-animations {
    flex-direction: column;
  }

  .text-header-personal-animation {
    flex-direction: column;
    order: 1;
    justify-content: center;
    align-self: center;
    align-items: center;
    width: 250px;
    height: auto;
    margin-top: 8px;
    display: flex;
  }

  .headign-personal-animations {
    text-align: center;
    flex: none;
    align-self: center;
    font-size: 5vh;
  }

  .text-heading-personal-animation {
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 2.5vh;
  }

  .base-personal-animation {
    width: 250px;
    height: 250px;
    margin-bottom: 20px;
  }

  .base-personal-animation._6 {
    background-size: cover;
  }

  .animation-portfolio, .animation-portfolio._2, .animation-portfolio._3, .animation-portfolio._4 {
    width: 100vw;
  }

  .animation-portfolio.luasis-animation._1, .animation-portfolio.luasis-animation._2, .animation-portfolio.luasis-animation._3, .animation-portfolio.luasis-animation._4, .animation-portfolio.luasis-animation._5, .animation-portfolio.luasis-animation._6, .animation-portfolio.luasis-animation._7, .animation-portfolio.luasis-animation._8 {
    width: 300px;
  }

  .layout {
    width: 100%;
    margin-top: 209px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .layout.heading {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .layout.heading.image {
    order: -1;
    width: 70%;
    height: 40%;
  }

  .panel-returne {
    flex-direction: column;
    flex: none;
    justify-content: center;
    width: 100%;
    height: 40vh;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 2vh;
    padding-right: 2vh;
    display: flex;
  }

  .heading-go-back {
    padding-left: 1vh;
    padding-right: 1vh;
  }

  .returne-buttom {
    flex: none;
  }

  .animation-end-panel {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
  }

  .form-block {
    flex: none;
    align-self: center;
    width: 100%;
    padding-bottom: 0;
  }

  .info-contact-form {
    width: 90%;
  }

  .material-contact-form {
    flex-direction: column;
  }

  .animation-to-form {
    margin-left: auto;
    margin-right: auto;
  }

  .field-label-3, .field-label-4, .field-label-5, .fiel-text {
    text-align: center;
  }

  .submit-button {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
  }

  .text-fiel-email {
    text-align: center;
  }

  .textarea-info {
    text-align: center;
    height: 30vh;
  }

  .footer {
    text-align: left;
    padding-bottom: 70px;
    padding-left: 40px;
    padding-right: 40px;
  }

  .footer-flex-container {
    flex-direction: column;
  }

  .footer-heading {
    margin-top: 20px;
  }

  .paragraph-privacy {
    font-size: 2vh;
  }

  .info-terms-m {
    width: 80%;
    margin-top: 13vh;
    margin-bottom: 0;
  }

  .bold-text-4 {
    font-size: 2vh;
  }

  .bold-text-5 {
    font-size: 3vh;
  }

  .link, .link-2 {
    font-size: 1.5vh;
  }

  .logo-bonive {
    flex: none;
    width: 40px;
    height: 100px;
  }

  .bonive-text {
    margin-top: 20px;
    margin-left: 0;
    display: none;
    transform: none;
  }

  .second-tex-bonive-portfolio.bigger {
    perspective-origin: 0 0;
    margin-top: 0;
    margin-left: 0;
    display: none;
    transform: none;
  }

  .div-box-portfolio {
    width: 100%;
  }

  .div-box-portfolio.header {
    overflow: hidden;
  }

  .section-portfolio {
    width: 100vw;
    height: auto;
  }

  .grain-overlay {
    display: none;
  }

  .section-2.view-elements {
    overflow: hidden;
  }

  .section-2.view-elements.specific-vh-size {
    background-image: linear-gradient(#02050675, #0d323f00 7% 30%);
    display: block;
  }

  .section-2.top-separation {
    height: auto;
    padding-top: 8vh;
  }

  .section-2.top-separation.black.shadow.top-line {
    z-index: 4;
  }

  .section-2.bottum-separation {
    padding-bottom: 12vh;
  }

  .text-button {
    justify-content: center;
    font-size: 4vh;
    display: flex;
  }

  .h1 {
    font-size: 6vh;
  }

  .h1.left {
    text-align: center;
  }

  .h1.white.bottom-space {
    margin-bottom: 10vh;
  }

  .h1.center.white.shadow {
    letter-spacing: 0;
  }

  .pr {
    font-size: 2.5vh;
  }

  .pr.yellow {
    color: #feebbe;
    font-size: 3vh;
    line-height: 1.2;
  }

  .pr.left-full {
    text-align: center;
    width: 100%;
    font-size: 2.5vh;
  }

  .pr.left-full.tiny-text.bold.yellow {
    text-align: left;
    letter-spacing: .1em;
    object-fit: none;
    margin-top: 0;
    font-size: 1.7vh;
  }

  .pr.left-full.shadow {
    text-shadow: 0 3px 4px #0000006b;
  }

  .pr.left {
    color: #feebbe;
    text-align: center;
    font-size: 2.5vh;
  }

  .pr.left.bold {
    color: #fff;
    text-align: left;
    margin-bottom: 1vh;
  }

  .pr.tiny-text {
    height: 6vh;
    font-size: 2vh;
  }

  .pr.tiny-text.space-around.gold.right-auto {
    color: var(--yellow-bonive);
  }

  .pr.tiny-text.space-around.gold.right-auto.no-space.shadow {
    text-shadow: 0 1px 4px #00000061;
  }

  .pr.tiny-text.bold.center {
    height: auto;
    font-size: 2.5vh;
  }

  .pr.tiny-text.yellow.center {
    flex: none;
    font-size: 2.5vh;
  }

  .pr.italy {
    font-size: 2.5vh;
  }

  .pr.miny {
    overflow-wrap: normal;
    font-size: 2.8vh;
    line-height: 1.2;
  }

  .pr.miny.bold {
    text-align: left;
    justify-content: flex-start;
    align-self: flex-start;
    display: flex;
  }

  .pr.tiny-questions {
    font-size: 2vh;
  }

  .pr.tiny.bold.white.left {
    text-align: center;
  }

  .pr.minute.left {
    text-align: center;
    font-size: 2.5vh;
  }

  .pr.minute.center {
    width: 100%;
    font-size: 2.5vh;
  }

  .pr.center {
    width: 100%;
  }

  .pr.personal-presentation {
    color: #fff;
    font-size: 2.5vh;
  }

  .pr.auto-center {
    width: 100%;
  }

  .bonive-logo-name {
    justify-content: center;
    width: 80px;
    margin-top: 2vh;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .button-2 {
    border-color: #13333f;
    flex: none;
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .text-header {
    margin-top: -10vh;
  }

  .h3 {
    font-size: 3vh;
  }

  .image {
    object-fit: none;
    width: 100%;
    height: 30vh;
  }

  .text_left {
    flex: none;
    align-items: center;
    width: 100%;
    height: auto;
  }

  .text_left.header-animation {
    justify-content: flex-end;
    width: 100%;
    margin-top: auto;
    margin-bottom: 10vh;
    padding-top: 0;
    position: relative;
    top: 0;
  }

  .animation.out-right {
    width: 100%;
  }

  .animation.icon-doc {
    width: 150px;
  }

  .feature-aniamtion {
    height: 20vh;
    margin-bottom: 2vh;
  }

  .feature-div {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 100%;
    margin-bottom: 5vh;
  }

  .vectors-wrapper-2 {
    display: none;
  }

  .featuers-web-art {
    flex-direction: column;
    align-items: center;
    padding-top: 0;
  }

  .container-14 {
    width: 90%;
  }

  .container-14.lateral {
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
  }

  .container-14.lateral.left-fit {
    width: 90%;
  }

  .brands {
    flex-direction: column;
    width: 50%;
  }

  .logo-brand {
    width: 100%;
    height: 6vh;
  }

  .div-brands {
    flex-direction: row;
    height: auto;
  }

  .container-process {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }

  .container-process.tiny {
    width: 100%;
    margin-top: -15vh;
  }

  .process-animation {
    height: 20vh;
    margin-left: auto;
    margin-right: auto;
  }

  .recomendation-div {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-direction: column;
    justify-content: flex-start;
    align-self: auto;
    align-items: center;
    width: 100%;
    height: auto;
    margin-left: 1vw;
    margin-right: 1vw;
  }

  .container-faq {
    width: 90%;
  }

  .container-17.vertical {
    flex-direction: column;
    justify-content: flex-start;
    width: 90%;
    height: auto;
  }

  .h4 {
    font-size: 3.7vh;
  }

  .h4.pricing {
    letter-spacing: 0;
    height: 10vh;
    font-size: 4vh;
  }

  .total-div-pricing {
    background-color: #1c4757;
    flex-direction: column;
    grid-auto-flow: row;
    padding-left: 1vw;
    padding-right: 1vw;
    display: flex;
  }

  .bold-text-7 {
    text-align: left;
    font-size: 1.8vh;
    line-height: 1;
  }

  .bold-text-7.bold {
    font-size: 1.8vh;
    font-weight: 700;
  }

  .div-pricing {
    border-style: none none solid;
    border-bottom-color: #ffe9b170;
    border-radius: 4px;
    margin-bottom: 8vh;
  }

  .div-pricing.no-spacing {
    padding-top: 2vw;
  }

  .tabs-menu {
    order: -1;
    width: 40%;
    margin-right: 1vw;
  }

  .questions-div {
    width: 100%;
  }

  .tab-link-tab-1 {
    opacity: .1;
  }

  .tab-link-tab-1.w--current {
    margin-top: 0;
    margin-bottom: 20px;
    padding: 4px 15px 4px 2vw;
  }

  .tabs-content {
    padding-top: 1vh;
  }

  .tiny {
    width: 60%;
  }

  .tab-pane-tab-1 {
    padding-left: 10px;
  }

  .tap-form {
    opacity: .1;
    object-fit: none;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 4px 15px 4px 2vw;
  }

  .tabs {
    flex-direction: row;
  }

  .container-18.tiny-porcent {
    width: 90%;
  }

  .container-18.tiny-porcent.over {
    width: 78.16%;
  }

  .vectors-wrapper-8 {
    flex: none;
  }

  .container-19.lateral {
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
  }

  .frame-52 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    border: 2px solid #fde29e0f;
    border-radius: 4px;
    flex-direction: row;
    flex: none;
    justify-content: center;
    width: 100%;
    height: auto;
    padding-top: 2vh;
    padding-bottom: 2vh;
  }

  .text-div {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    align-items: center;
    width: 100%;
  }

  .div {
    width: 100%;
  }

  .div.top-spacing {
    margin-top: 5vh;
  }

  .send-a-email {
    font-size: 3vh;
    line-height: 1;
  }

  .text-6 {
    text-align: center;
    flex: none;
    font-size: 2vh;
  }

  .container-20.lateral {
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
  }

  .text-7 {
    font-size: 2vh;
  }

  .footer-text._5 {
    display: none;
  }

  .footer-text._1 {
    display: flex;
  }

  .footer-text._4 {
    display: none;
  }

  .logo-and-info {
    align-items: center;
  }

  .text-footer {
    flex: none;
    align-self: center;
    align-items: center;
  }

  .div-text-info {
    width: 100%;
    height: auto;
    margin-top: 10vh;
    margin-bottom: auto;
    padding-top: 0;
  }

  .div-lateral-process {
    flex-direction: column;
    display: flex;
  }

  .h1-header {
    font-size: 6vh;
  }

  .h1-header.header {
    justify-content: center;
    width: 100%;
    font-size: 5vh;
    display: flex;
  }

  .div-the-last-projects {
    flex-direction: column;
    align-content: start;
    place-items: start center;
    width: 90%;
    height: auto;
    display: flex;
  }

  .last-project {
    width: 100%;
  }

  .last-project._2 {
    background-position: 100%;
  }

  .last-project._3 {
    background-position: 0%;
  }

  .nav-bard-landing-page {
    z-index: 20;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    width: auto;
    bottom: -1px;
  }

  .text-link-nav-bard {
    text-align: center;
    flex: 1;
    width: 40px;
    font-family: Marcellus, sans-serif;
    font-size: 1.3vh;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
  }

  .text-link-nav-bard._2 {
    flex: 1;
    width: 30px;
  }

  .text-link-nav-bard._2.w--current {
    width: 40px;
  }

  .h3-l {
    font-size: 2vh;
  }

  .heading-2-landing {
    text-align: center;
    font-size: 2.5vh;
    line-height: 1.2;
  }

  .sticky {
    z-index: 1;
    opacity: 1;
    background-image: none;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    margin-top: 0;
  }

  .whatsapp-block {
    width: 100%;
    margin-bottom: 40px;
    padding-left: 10px;
    padding-right: 10px;
    bottom: 0;
    right: 0;
  }

  .whatsapp-chat {
    width: 100%;
    height: auto;
    display: none;
    position: relative;
  }

  .live-icon {
    top: 0;
    left: 0;
  }

  .whatsapp-container {
    width: 50px;
    height: 50px;
    bottom: 10px;
    right: 0;
  }

  .div-self-description {
    width: 100%;
  }

  .link-sefl-propmotion.linkedin {
    background-size: 80%;
  }

  .link-sefl-propmotion.linkedin.testimonial {
    text-align: center;
    flex: none;
    order: 1;
  }

  .tittle-adn-picture.tiny {
    order: -1;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    padding-left: 0;
  }

  .tittle-review {
    font-size: 2.5vh;
  }

  .tittle-review.left {
    color: #0d323f;
    text-align: center;
    order: -1;
    width: 70%;
    margin-bottom: 20px;
    font-size: 2.5vh;
  }

  .tittle-review.tiny {
    font-size: 2.5vh;
  }

  .tittle-review.tiny.bold {
    margin-left: auto;
    margin-right: auto;
  }

  .offer-logo {
    top: -108.25px;
    left: -13.25px;
  }

  .offer-logo._1 {
    top: -98px;
  }

  .div-block-5 {
    width: 100%;
  }

  .div-block-6 {
    flex: none;
    width: 100%;
    height: auto;
    font-size: 10px;
  }

  .slider-testimonial {
    width: 100vw;
    padding-bottom: 0;
  }

  .mask {
    width: 100%;
    height: 600px;
  }

  .slide {
    width: 100%;
    height: 100%;
  }

  .right-arrow {
    flex: none;
    justify-content: flex-end;
    align-self: auto;
    align-items: center;
    width: 10%;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
  }

  .left-arrow {
    justify-content: flex-start;
    align-self: auto;
    align-items: center;
    width: 10%;
    height: auto;
    margin-top: auto;
    margin-bottom: 0;
    display: flex;
  }

  .icon {
    flex: none;
    align-self: center;
    margin-top: auto;
    margin-bottom: auto;
  }

  .icon-2 {
    flex: none;
    align-self: center;
    margin-bottom: auto;
  }

  .div-block-7 {
    width: 80%;
    font-size: 5rem;
  }

  .div-fix-information {
    z-index: 2;
  }

  .header-info-1 {
    width: 90%;
  }

  .header-info-2 {
    align-items: flex-start;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    top: 0;
  }

  .header-info-3 {
    z-index: 1;
    align-items: flex-start;
    width: 90%;
    height: 100vh;
    margin: auto;
    padding-bottom: 0;
    display: flex;
  }

  .header-section-total-info {
    display: flex;
  }

  .dimond_faces {
    flex: none;
    justify-content: center;
    width: 300%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    inset: 0% auto;
  }

  .lottie-animation-2 {
    z-index: 2;
    opacity: 1;
    width: 300%;
    position: relative;
    top: -5%;
  }

  .header-short-div {
    width: 100%;
  }

  .ai-arm-full-arm_door {
    margin-bottom: -42px;
    margin-left: 493px;
    transform: rotate(0)scale(.6);
  }

  .ai-arm-reference {
    overflow: hidden;
  }

  .ai-arm_full-arm {
    transform: rotate(4deg);
  }

  .ai-arm_info {
    height: 100svh;
    padding-left: 20px;
    padding-right: 20px;
  }

  .ai-arm_text {
    margin-top: 106px;
    margin-bottom: auto;
  }

  .heading-3 {
    text-align: center;
  }

  .ai-arm_paragraph {
    text-align: center;
    line-height: 1;
  }

  .ai-arm_detail {
    left: -85px;
  }

  .ai-arm_detail.v2 {
    margin-right: 0;
    right: -11%;
  }

  .body-7 {
    height: 100svh;
  }

  .ai-arm_total-door-m {
    transform: translate3d(0, 0, 5px);
  }

  .container-image-and-text {
    width: 100%;
    margin-top: 4%;
    margin-bottom: 4%;
  }

  .inner-card-info-animation {
    width: 100%;
  }

  .body-2-boni.left {
    letter-spacing: .1em;
    font-size: .8rem;
  }

  .right-buttom-scare-copy {
    min-height: 100%;
  }

  .book-a-call-panel-copy {
    height: 300px;
  }

  .section-header-3d {
    flex: none;
    height: auto;
  }

  .face_front.content-info {
    background-color: #0006;
    transform: translate3d(0, 0, 2px);
  }

  .screen-3d.top {
    transform: scale(.6)rotateX(-99deg)rotateY(0)rotateZ(0);
  }

  .screen-3d.base-computer {
    transform: scale(.6)rotateX(15deg)rotateY(0)rotateZ(0);
  }

  .laptop-3d {
    margin-top: 0;
    margin-left: 100px;
    left: -51%;
    transform: none;
  }

  .phone-3d-ver-2 {
    margin-right: auto;
  }

  .phone-3d-ver-2.no-separation {
    margin-left: auto;
    margin-right: auto;
    inset: -44% auto 0% -44%;
    transform: scale(.5);
  }

  .container-header {
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: auto;
  }

  .text-header-animatior {
    flex: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 40vh;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
  }

  .h1-animator {
    text-align: center;
    letter-spacing: 1px;
    margin-top: auto;
    margin-bottom: 0;
  }

  .h1-animator.footer {
    text-align: left;
    flex: 0 auto;
    max-width: 250px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 0;
    font-size: 30px;
  }

  .h1-animator.header {
    text-align: center;
    letter-spacing: -2px;
    text-align: left;
    border-radius: 0;
    flex: 0 auto;
    justify-content: flex-start;
    align-items: flex-end;
    margin-top: 0;
    padding-bottom: 8px;
    padding-left: 0;
    padding-right: 0;
    font-size: 30px;
    display: flex;
  }

  .h5-animator, .h5-animator.black {
    font-size: .8rem;
  }

  .nav-bard-animator {
    justify-content: space-between;
    margin-bottom: auto;
    padding-left: 10px;
    padding-right: 10px;
    top: 0;
    bottom: auto;
  }

  .flex-block {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .flex-block.vertical {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
    position: static;
  }

  .flex-block-3 {
    z-index: 2;
    flex: none;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 600px;
    min-height: 50vh;
    margin-top: -69px;
    margin-bottom: -100px;
    margin-left: auto;
    left: auto;
    transform: scale(.6);
  }

  .bonive-head-face {
    height: 100%;
  }

  .bonive-head-face.no-backgroun {
    background-image: linear-gradient(201deg, #fffb9987, #c8f8c800 49%, #9cf6ed00 64%, #87f5ff8f), url('../images/boni-image--3_1.avif');
  }

  .bonive-picture-pa {
    width: 100%;
    margin-bottom: -28px;
    margin-left: auto;
    margin-right: auto;
    transform: scale(.8);
  }

  .bonive-picture-pa.header {
    margin-top: -23px;
  }

  .background {
    display: none;
  }

  .section-web-animator {
    height: auto;
    margin-top: 0;
    padding: 32px 16px;
  }

  .section-web-animator.yellow.separation-content {
    min-height: 800px;
    margin-top: auto;
    padding: 0 0;
  }

  .section-web-animator.full-height {
    min-height: 120vh;
    padding-top: 16px;
    padding-bottom: 16px;
    display: flex;
  }

  .container-pa {
    flex-flow: column;
    height: 80px;
  }

  .container-pa.black._3d-shadow {
    border-radius: 0;
    justify-content: center;
    align-items: center;
    height: auto;
    padding-top: 16px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .container-pa.left {
    margin-top: 64px;
  }

  .container-pa.left.hie {
    display: none;
  }

  .container-pa.center {
    justify-content: space-between;
    align-items: flex-start;
  }

  .container-pa.center.bottom_aling {
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .pr-pa {
    text-align: center;
    font-size: 1.5rem;
  }

  .content-pa.b {
    order: -1;
    width: 100%;
  }

  .content-pa.b.lateral {
    width: auto;
  }

  .content-pa.b.left-content {
    margin-left: auto;
    margin-right: auto;
  }

  .content-pa.b.hide {
    display: none;
  }

  .content-pa.b.header {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-flow: row;
    width: 100%;
  }

  .content-pa.b._70 {
    width: 90%;
    height: 400px;
    display: block;
  }

  .content-pa.s {
    order: -1;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .content-pa.s.left {
    width: 100%;
    margin-left: 0;
  }

  .content-pa.show-sample {
    order: -1;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .content-pa.glass-version {
    order: -1;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .pr-pa-2 {
    text-align: center;
  }

  .pr-pa-2.normal {
    text-align: left;
  }

  .pr-pa-2.black.caption {
    text-align: center;
  }

  .button-pa-f.left {
    height: 70px;
    margin-left: auto;
    margin-right: auto;
    transform: scale(.8)perspective(1284px);
  }

  .button-pa-f.left.m.scale.test {
    margin-left: -124px;
    margin-right: auto;
    transform: scale(.6)perspective(1284px);
  }

  .button-pa-f.absolute.left {
    margin-left: 0;
    left: 0;
  }

  .button-pa-f.absolute.left.reduce {
    cursor: auto;
    margin-left: auto;
    left: auto;
    transform: perspective(1284px);
  }

  .button-pa-f.large {
    width: 380px;
  }

  .button-pa-f.phone {
    perspective-origin: 0%;
    transform-origin: 0%;
    transform: scale(.6)perspective(1284px);
  }

  .container-portfolio-pa {
    flex-flow: column;
    height: auto;
  }

  .button-portfolio-open-pa {
    margin-bottom: 32px;
  }

  .sample-conent-portfoiol-pa {
    display: none;
  }

  .flex-block-6 {
    flex-flow: column;
    flex: none;
    width: 300px;
    position: relative;
  }

  .section-3 {
    justify-content: flex-start;
    align-items: center;
    padding-left: 2vw;
    padding-right: 2vw;
  }

  .animation-header-pa {
    order: -1;
  }

  .nav-bar-pa-copy {
    justify-content: space-between;
    align-items: center;
    height: 100px;
  }

  .nav-bar-pa-copy.futter {
    margin-top: auto;
    bottom: 0;
  }

  .round-bordes.short {
    max-width: 100px;
  }

  .flex-block-8 {
    height: 500px;
    margin-left: 0;
    margin-right: 0;
    position: relative;
    left: 0;
    right: 0;
  }

  .glass-over-2 {
    bottom: 307px;
    left: -150px;
  }

  .container-contact {
    flex-flow: column;
    height: auto;
  }

  .submit-button-pa {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
  }

  .div-block-9 {
    place-content: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .animation-header-sample {
    min-height: 100px;
  }

  .caption-header-aniamtions {
    text-align: center;
    display: none;
  }

  .div-block-11 {
    flex: none;
    height: auto;
    display: none;
  }

  .left-panel-portfolio-test {
    grid-column-gap: 2%;
    grid-row-gap: 2%;
    border-bottom: 1px solid #fff1bd1a;
    border-right-style: none;
    flex-flow: row;
    order: 1;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100px;
    padding-top: 0%;
    display: flex;
    position: relative;
    inset: 0% 0% auto;
  }

  .container-bonive-logos {
    height: auto;
  }

  .div-block-15 {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-flow: row;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    align-items: flex-start;
    width: 600px;
    display: flex;
  }

  .h4-visual-designer {
    font-size: 3vh;
  }

  .h4-visual-designer.half {
    width: 80%;
  }

  .pr-explain-illustration {
    text-align: center;
  }

  .over-lateral-shadow.none {
    display: none;
  }

  .div-block-27 {
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .div-block-27.black {
    margin-left: auto;
    margin-right: auto;
  }

  .logo-header {
    height: 30px;
  }

  .social-proof-brand-illustrator {
    width: 100px;
    height: 100px;
  }

  .recomendation-brand-illustrator {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-direction: column;
    justify-content: flex-start;
    align-self: auto;
    align-items: center;
    width: 100%;
    height: auto;
    margin-left: 1vw;
    margin-right: 1vw;
  }

  .recomendation-brand-illustrator.green {
    flex-flow: column;
    width: 95vw;
  }

  .recomendation-brand-illustrator.none {
    display: none;
  }

  .container-feedback {
    flex-flow: column;
    width: 100vw;
  }

  .total-feedbacks {
    justify-content: center;
    align-items: center;
    width: 100vw;
  }

  .foother-container {
    order: -1;
  }

  .grid-sample {
    place-content: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .central-tittle {
    margin-top: 20px;
    margin-left: 0;
    display: none;
    transform: none;
  }

  .rive-central-animation {
    margin-left: -120px;
  }

  .phone-and-animation {
    transform: scale(.6);
  }

  .div-mobile-header {
    width: 100%;
  }

  .div-block-29 {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    justify-content: center;
    align-items: flex-start;
    height: auto;
    margin-left: 0;
    padding-left: 16px;
  }

  .div-block-30 {
    flex: 0 auto;
  }

  .pr-focus {
    text-align: center;
    font-size: 1.5rem;
  }

  .header-branding-presentation {
    flex: none;
    height: auto;
  }

  .header-branding-1.no-lateral-margin {
    height: auto;
    min-height: 100vh;
    margin-top: 0;
    padding-top: 92px;
  }

  .header-branding-1.lateral-black.large.more-margen {
    flex: none;
    justify-content: center;
    height: auto;
    min-height: 150vh;
    padding-left: 8%;
    padding-right: 8%;
  }

  .header---branding {
    text-align: left;
    letter-spacing: -1px;
    height: 200px;
    margin-top: auto;
    margin-bottom: 0;
    font-size: 50px;
    line-height: .8;
  }

  .content-header-_-branding {
    z-index: 10;
  }

  .over-logo-shadow {
    z-index: 1;
  }

  .flex-block-13 {
    width: 1500px;
  }

  .button-base-design {
    margin-top: -110px;
    margin-bottom: 0;
    margin-left: 0%;
    position: relative;
  }

  .cards-how-we-works {
    justify-content: center;
    height: auto;
    display: flex;
  }

  .base-card-how-we-works.aling-top {
    flex: none;
    width: 100%;
    height: 200px;
  }

  .base-card-how-we-works.aling-top.short {
    height: 100px;
  }

  .flex-block-15 {
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 0;
  }

  .h5-brading-designer {
    font-size: 3vh;
  }

  .h5-brading-designer.half-size.left_margin {
    margin-left: 16px;
    font-size: 1rem;
  }

  .heading-principal {
    text-align: center;
    flex: none;
    font-size: 2vh;
    line-height: 1.2;
  }

  .tabs-2 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .background-lore {
    align-items: center;
    display: flex;
    overflow: hidden;
  }

  .corner-elements {
    height: 25vh;
    margin-top: -1px;
  }

  .paralax.l3-starts {
    top: 0%;
  }

  .paralax.l4-island {
    width: 100%;
    top: 45px;
  }

  .paralax.l5-island {
    width: 100%;
    height: 50%;
    top: 383.112px;
  }

  .buttons-header {
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    height: 10vh;
  }

  .layouttemple {
    width: 100%;
    height: 100%;
    margin-top: 15vh;
  }

  .logos-sources.binance, .logos-sources.eth, .logos-sources.polygon {
    width: 6vh;
    margin-left: auto;
    margin-right: auto;
  }

  .layout-central-one.normal-size {
    background-size: cover;
    width: 100vw;
    max-width: 100vw;
    height: 70%;
    margin-left: auto;
    margin-right: auto;
  }

  .layout-central-one.principal {
    background-size: cover;
    height: 80%;
  }

  .layout-central-one.principal.space-above {
    background-size: cover;
    height: 60%;
  }

  .div-logo-info.left {
    align-items: center;
    height: auto;
  }

  .logos-header.left {
    flex-direction: column;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .logo-header-2 {
    width: 90%;
    min-width: 100px;
    height: 12vh;
  }

  .layout-2.header {
    justify-content: center;
    width: 90%;
    height: 30%;
    margin-left: auto;
    margin-right: auto;
  }

  .layout-2.header.short {
    width: 80%;
  }

  .tab-pane-tab-1-2 {
    max-width: none;
  }

  .central-base {
    width: 180px;
    height: 80%;
  }

  .container-absolute {
    align-items: center;
    width: 90%;
    height: 50vh;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
  }

  .button-discord {
    inset: auto 0% 0% auto;
  }

  .mountain.right, .mountain.left {
    height: 20%;
  }

  .tabs-content-2 {
    width: auto;
  }

  .button-3 {
    width: 100px;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 1.5vh;
  }

  .button-3.energy, .button-3.world.w--current {
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .rock.right {
    margin-right: -1px;
  }

  .lore-back {
    flex: none;
    width: 200%;
    margin-left: auto;
    margin-right: auto;
  }

  .lore-back._3, .lore-back._2, .lore-back._1 {
    width: 450%;
  }

  .text-block-2 {
    flex: none;
    margin-left: 0;
  }

  .buttonbase {
    width: auto;
  }

  .paragraph-4.central {
    width: 90vw;
  }

  .section-4.header._1 {
    align-items: center;
    display: flex;
  }

  .tabs-menu-2 {
    flex: none;
    justify-content: center;
    width: 90vw;
  }

  .container-21 {
    width: 100vw;
  }

  .container-21.header {
    flex-direction: column;
  }

  .background-2 {
    overflow: hidden;
  }

  .the-face.principal {
    height: 120px;
  }

  .card-previus-projects {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }

  .presentation-project-assets {
    height: 100px;
  }

  .h5-tittle {
    font-size: 3vh;
  }

  .h5-info {
    font-size: .8rem;
  }

  .div-block-35 {
    flex-flow: column;
    width: 100%;
  }

  .section-minila {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex: none;
    height: auto;
    padding-top: 60px;
    padding-left: 0%;
    padding-right: 0%;
  }

  .flex-block-21 {
    flex: none;
    width: 100%;
  }

  .infor-project-open {
    width: 100%;
  }

  .flex-block-31 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .flex-block-31-copy {
    padding-left: 20px;
    padding-right: 20px;
  }

  .div-block-40 {
    order: 9999;
  }

  .container-tittle {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }

  .h2-tittle-portfolio {
    flex: 1;
    order: -9999;
    font-size: 1rem;
  }

  .description-text {
    width: 80%;
  }

  .list {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
    display: flex;
  }

  .image-17 {
    height: 105%;
  }

  .div-block-43 {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .h1-minial {
    font-size: 1.4rem;
    line-height: 1.4;
  }

  .profile-about {
    width: 70%;
    max-width: 70%;
  }

  .back-arrow {
    z-index: 10;
    position: fixed;
  }

  .link-block {
    position: absolute;
  }

  .h4-minimal {
    font-size: 1.4rem;
    line-height: 1.4;
  }

  .text-span-33, .text-span-34 {
    flex: none;
  }
}

#w-node-_9e2c30b5-37bf-f22e-e1fe-9c59ae23a20c-ae23a1f2 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_3f978aff-b831-186d-4e3e-67989d070f70-37a01ccf, #w-node-_3f978aff-b831-186d-4e3e-67989d070f82-37a01ccf, #w-node-_6afe9475-a39a-7eef-666f-9409f864ccdd-37a01ccf {
  grid-area: span 8 / span 3 / span 8 / span 3;
}

#w-node-_6afe9475-a39a-7eef-666f-9409f864ccea-37a01ccf {
  grid-area: span 4 / span 3 / span 4 / span 3;
}

#w-node-_6afe9475-a39a-7eef-666f-9409f864ccf4-37a01ccf {
  grid-area: span 4 / span 2 / span 4 / span 2;
}

#w-node-_6afe9475-a39a-7eef-666f-9409f864ccfb-37a01ccf {
  grid-area: span 4 / span 1 / span 4 / span 1;
}

#w-node-ce7aead3-b4e8-7f51-960d-7b3c97dd3436-8e273547, #w-node-ecfcebdb-75f9-647a-1274-a1ecbc8749a8-8e273547 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_5a665425-e84f-f651-c946-c83f529abc99-8e273547 {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_5eeae6ce-817b-d11f-0770-c0397398b9a3-8e273547, #w-node-ecf4e745-5a4c-6632-b579-88d689581968-8e273547, #w-node-_9504ab2a-3b44-cb5f-a1fa-3becfea85b65-8e273547, #w-node-c07d97d8-7835-6610-e43a-5e45b5f6e575-8e273547, #w-node-_6a18daef-515f-58cd-a01e-115671d5a4b1-d567c427 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-c7112a8a-dbc5-947a-712a-c5fe9ac91b03-d567c427 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_9e3bbaff-d348-5dc6-1a15-1d06ffe878af-b33cf80a {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-_6a18daef-515f-58cd-a01e-115671d5a4b1-35daf1bb {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-c7112a8a-dbc5-947a-712a-c5fe9ac91b03-35daf1bb {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_65021b30-9da1-2db8-31b0-24fadb2c1bf4-34c74d87 {
  grid-area: span 2 / span 2 / span 2 / span 2;
}

#w-node-_7e510f80-0f4c-325a-8ec5-7b004b8cc8cb-34c74d87, #w-node-_29d05688-2a17-7754-14e9-7e87aba3bd37-34c74d87, #w-node-_65a4551d-326b-e7e8-8211-6ceff1be77d7-34c74d87, #w-node-cb9e8656-2644-595e-e6a9-cf1cc6284ef0-34c74d87, #w-node-_49ebae61-90f9-35b4-a572-ee917a260cea-34c74d87, #w-node-_7062205b-ccca-477d-81cb-0ed460db4f13-34c74d87 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-ecebe765-009e-c7e2-ae4a-077a3955c496-34c74d87, #w-node-_395091e9-839a-85a8-baa6-88b0459af4a0-34c74d87, #w-node-_900c481e-c884-ccc3-f689-148b51973af4-34c74d87, #w-node-_1382812c-68d3-5278-d9fd-e84a537ddb89-34c74d87, #w-node-_6a6907d8-d5cb-1c70-f932-c2810b8103a5-34c74d87, #w-node-_893e4297-8291-3710-72a7-92d559ed5246-34c74d87, #w-node-_8575a77b-903b-2126-a495-2631c9b987f5-34c74d87 {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-_5f706e30-3e0c-fb68-c546-f4577bc560ac-34c74d87, #w-node-_5f706e30-3e0c-fb68-c546-f4577bc560ad-34c74d87, #w-node-_5f706e30-3e0c-fb68-c546-f4577bc560b2-34c74d87, #w-node-_5f706e30-3e0c-fb68-c546-f4577bc560b3-34c74d87 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_5f706e30-3e0c-fb68-c546-f4577bc560b5-34c74d87, #w-node-_5f706e30-3e0c-fb68-c546-f4577bc560b6-34c74d87, #w-node-_5f706e30-3e0c-fb68-c546-f4577bc560b7-34c74d87, #w-node-_5f706e30-3e0c-fb68-c546-f4577bc560b8-34c74d87, #w-node-_5f706e30-3e0c-fb68-c546-f4577bc560b9-34c74d87, #w-node-_5f706e30-3e0c-fb68-c546-f4577bc560ba-34c74d87 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_5f706e30-3e0c-fb68-c546-f4577bc560bb-34c74d87, #w-node-_5f706e30-3e0c-fb68-c546-f4577bc560bc-34c74d87, #w-node-_5f706e30-3e0c-fb68-c546-f4577bc560bd-34c74d87 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_5f706e30-3e0c-fb68-c546-f4577bc560be-34c74d87, #w-node-_5f706e30-3e0c-fb68-c546-f4577bc560bf-34c74d87, #w-node-_5f706e30-3e0c-fb68-c546-f4577bc560c0-34c74d87, #w-node-_5f706e30-3e0c-fb68-c546-f4577bc560c1-34c74d87 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_65021b30-9da1-2db8-31b0-24fadb2c1bf4-46060ebc, #w-node-_72176dc6-0f2c-1874-db82-393f84743fcd-46060ebc, #w-node-_42604b85-1956-28e1-0810-fdd355ffbd37-46060ebc, #w-node-_2329c01e-72a3-803f-9e05-88474343dc28-46060ebc, #w-node-_2410bb9e-d8fe-23f6-a308-c8009192647b-46060ebc, #w-node-_5569df68-6e5e-9266-3293-d4539fe9f1e9-46060ebc, #w-node-_58708143-a25d-05be-b06c-0afb89ce0856-46060ebc, #w-node-_396bbf63-dca8-ad35-8d2c-fd663c48b9e7-46060ebc, #w-node-c8a1a43e-eb92-fdfc-4edd-ebd65c2d6c07-46060ebc, #w-node-_7f69ba2d-136d-ff74-3199-838953a8edc5-46060ebc {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_346b9ffc-99ae-17b4-bf56-596922fee2a6-d0d4c23e {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_844df742-d005-23d2-8480-8827dda2a0cd-4c473c29, #w-node-_01e69031-8254-c1ae-93f3-bdd95041fae0-4c473c29, #w-node-e914f653-4295-045a-c5ad-c9b5442027ae-4c473c29 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_9ac9abdc-a683-8618-263b-e58c6602c1c8-d889551e, #w-node-_024633a2-4c24-a137-1706-8b9c28a42314-d889551e {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-e4195768-a3cc-966a-6c00-eb774ec06209-d889551e {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-f6eea9fa-0442-0129-dd28-225bd4dc7a77-d889551e, #w-node-_5fc38040-5172-7864-dac7-9f88bd526457-d889551e, #w-node-d9ba33b6-909d-b83e-1d01-dbbc64f53a72-d889551e {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_3a4dcd41-feca-972a-cbc3-0a0b00ec53bd-87be16ee, #w-node-bfc8231b-2fc9-8388-9c7e-548b0196fe7b-87be16ee, #w-node-d1635af9-a470-ac37-48a8-f9cd71c46344-87be16ee {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-fa8b3e6a-9660-6834-2a2f-800885eefb90-0c1b0cc2 {
  grid-area: span 2 / span 4 / span 2 / span 4;
}

#w-node-_500bd471-6fa2-9434-d0dd-f480b7a95cd3-0c1b0cc2 {
  grid-area: span 2 / span 2 / span 2 / span 2;
}

#w-node-_4ec0bb3b-9169-82d0-b75f-41b36540e19b-0c1b0cc2 {
  grid-area: span 3 / span 2 / span 3 / span 2;
}

#w-node-ac269fa1-fa9e-f2b9-ee15-80c48fe2b086-0c1b0cc2 {
  grid-area: span 2 / span 2 / span 2 / span 2;
}

#w-node-bb14748d-39a3-715e-e0c5-09af08b132a8-0c1b0cc2 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_98a312f1-6b99-eb02-ffba-514c7806796f-06755b54, #w-node-d5f35999-fdd8-7dcd-6ec0-bd7d8360c00b-06755b54, #w-node-a1253ca4-a729-961c-dc2a-cd0abdeba628-06755b54, #w-node-_524b529f-a91e-b931-8854-16260a9bb928-06755b54 {
  grid-area: span 2 / span 2 / span 2 / span 2;
}

#w-node-ecfcebdb-75f9-647a-1274-a1ecbc8749a8-44fcfdc1, #w-node-ce7aead3-b4e8-7f51-960d-7b3c97dd3436-44fcfdc1, #w-node-_5a665425-e84f-f651-c946-c83f529abc99-44fcfdc1, #w-node-_5eeae6ce-817b-d11f-0770-c0397398b9a3-44fcfdc1, #w-node-d7eb9fe9-6847-0a41-c864-1c22b0a1a093-44fcfdc1, #w-node-_9d992c6d-cd9d-60d8-276e-c300407ad1ca-44fcfdc1, #w-node-_9649d332-b3e9-d743-d9c0-2942e6abc6b7-44fcfdc1, #w-node-fe861e87-c8d7-8ee0-4c51-d3523a604364-44fcfdc1, #w-node-_85c609fc-39a7-9225-a9d5-ac3a47f92e9e-44fcfdc1, #w-node-_5192547b-e85b-7b6a-d048-010d3e506c04-44fcfdc1, #w-node-_1c56438b-ed26-4857-a9cf-5278dc7ff8ba-44fcfdc1, #w-node-_02202fd5-59d5-bab0-9447-6de0294e2092-44fcfdc1 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-ce7aead3-b4e8-7f51-960d-7b3c97dd3436-f5521135 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_564ffbd3-a954-d121-9101-7427950d555e-f0d6496c {
  grid-area: span 2 / span 4 / span 2 / span 4;
}

#w-node-_62d96199-0a23-bc0c-744a-330d7ef0f3c4-f0d6496c, #w-node-b54998f8-b43e-2155-9905-299672dc51d5-f0d6496c, #w-node-_611a0227-f376-1e22-7ea7-13ddf26450de-f0d6496c, #w-node-_11a1f72e-435c-017e-1a1b-ce5a8c38036f-f0d6496c, #w-node-_15ff2187-52a2-2198-8dde-fe777fb7eb50-f0d6496c, #w-node-_1eb7a333-49da-bca5-fe2a-f1453f67ff0b-f0d6496c, #w-node-_572d8725-1dfe-01cd-0f8c-da3b8aedb5fa-f0d6496c {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-_708121dd-6daf-eb1d-acf8-a1ec8e2705f2-f0d6496c, #w-node-_075f5ca1-b7bc-14d6-ff80-78be5a73937e-f0d6496c, #w-node-_7f4f20a9-45f9-e85d-3e6e-35c36422aba5-f0d6496c, #w-node-f1b5b943-0951-8147-f2a0-0e8f79d59aa7-f0d6496c, #w-node-ed9195aa-0227-8329-09ed-4c99030f7497-f0d6496c, #w-node-_05d617a3-f00e-df74-b614-831221f921ed-f0d6496c {
  grid-area: span 2 / span 4 / span 2 / span 4;
}

#w-node-_1c98f156-4ca7-fd9f-24cc-e523c5746e71-f0d6496c {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-ca929504-55d5-d4ef-ffdd-67051afda60b-f0d6496c {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_708121dd-6daf-eb1d-acf8-a1ec8e2705f5-f0d6496c {
  justify-self: center;
}

#w-node-_708121dd-6daf-eb1d-acf8-a1ec8e2705f6-f0d6496c, #w-node-_708121dd-6daf-eb1d-acf8-a1ec8e2705f7-f0d6496c, #w-node-_1068ebca-c213-e2c5-656a-6625619d433b-f0d6496c, #w-node-ac4fba12-6f41-c297-445a-714fafa1cb34-f0d6496c, #w-node-c036e35c-e7aa-f840-7059-10f302a458a0-f0d6496c, #w-node-_92f5d277-0b21-6496-1c6b-27baf4ba8a08-f0d6496c {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#w-node-_4fde9790-52ec-0a6f-9278-d58839de1e93-f0d6496c {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: end;
}

#w-node-bb98b861-4dd0-824b-a3de-2475ece05514-f0d6496c, #w-node-faec82fa-6cac-8541-5db6-644cc1d4e9c2-f0d6496c {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: end;
}

#w-node-_708121dd-6daf-eb1d-acf8-a1ec8e2705f3-f0d6496c, #w-node-_66e71ca4-37cf-ff00-a15b-a3077c748411-f0d6496c, #w-node-_9a39f6df-cbd6-0ca8-01c4-a195ebfaae43-f0d6496c, #w-node-a7e6b656-b705-f00e-0dc5-647772012d54-f0d6496c, #w-node-_1960653e-5eda-fc1d-d711-2adb844578d5-f0d6496c, #w-node-_5e71a7c1-affb-7f12-554b-a4c73890ad63-f0d6496c, #w-node-c7b31441-1ed9-7531-f752-a235a9512fbe-f0d6496c, #w-node-a96f0b34-662b-abe6-d1c5-427d61633f69-f0d6496c {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-_66e71ca4-37cf-ff00-a15b-a3077c748410-f0d6496c {
  grid-area: span 2 / span 4 / span 2 / span 4;
}

#w-node-_66e71ca4-37cf-ff00-a15b-a3077c748412-f0d6496c {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_66e71ca4-37cf-ff00-a15b-a3077c748413-f0d6496c {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: center;
}

#w-node-f9271f3d-272a-8f06-788c-e5118033bc7c-f0d6496c, #w-node-_979593c0-3c16-1378-a1ab-5306981bfd02-f0d6496c, #w-node-d246df2d-0be0-0a50-8f44-b1cc431a9a99-f0d6496c {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: center;
}

#w-node-_9589db42-e7b4-0ba6-c449-aaa75433adee-f0d6496c, #w-node-_439cc81b-1c54-3551-2d91-f79893ffc637-f0d6496c, #w-node-c95326d1-099e-0826-5e07-5ca7bd8ad236-f0d6496c, #w-node-_5fc54f67-d8e4-c6c9-2659-bb46dfe725c6-f0d6496c {
  grid-area: span 1 / span 1 / span 1 / span 1;
  justify-self: center;
}

#w-node-_55172a33-84d4-b9cb-cc99-164be8a17a36-f0d6496c, #w-node-_690f852d-3d7d-3992-75ec-43764479feb2-f0d6496c {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: center;
}

#w-node-_0a3817ec-7ec1-58f8-2231-1221d33205ba-f0d6496c {
  grid-area: span 1 / span 4 / span 1 / span 4;
  justify-self: center;
}

#w-node-e465237b-3e29-b0ce-fc7c-3402fe8ef8b6-f0d6496c {
  grid-area: span 1 / span 4 / span 1 / span 4;
}

#w-node-e465237b-3e29-b0ce-fc7c-3402fe8ef8b7-f0d6496c, #w-node-e465237b-3e29-b0ce-fc7c-3402fe8ef8b8-f0d6496c, #w-node-e465237b-3e29-b0ce-fc7c-3402fe8ef8b9-f0d6496c, #w-node-e465237b-3e29-b0ce-fc7c-3402fe8ef8ba-f0d6496c, #w-node-e465237b-3e29-b0ce-fc7c-3402fe8ef8bb-f0d6496c {
  grid-area: span 2 / span 4 / span 2 / span 4;
}

#w-node-e465237b-3e29-b0ce-fc7c-3402fe8ef8bc-f0d6496c, #w-node-e465237b-3e29-b0ce-fc7c-3402fe8ef8bd-f0d6496c, #w-node-e465237b-3e29-b0ce-fc7c-3402fe8ef8be-f0d6496c, #w-node-e465237b-3e29-b0ce-fc7c-3402fe8ef8bf-f0d6496c, #w-node-e465237b-3e29-b0ce-fc7c-3402fe8ef8c0-f0d6496c, #w-node-e465237b-3e29-b0ce-fc7c-3402fe8ef8c1-f0d6496c, #w-node-e465237b-3e29-b0ce-fc7c-3402fe8ef8c2-f0d6496c, #w-node-e465237b-3e29-b0ce-fc7c-3402fe8ef8c3-f0d6496c, #w-node-e465237b-3e29-b0ce-fc7c-3402fe8ef8c4-f0d6496c, #w-node-e465237b-3e29-b0ce-fc7c-3402fe8ef8c5-f0d6496c, #w-node-e465237b-3e29-b0ce-fc7c-3402fe8ef8c6-f0d6496c, #w-node-e465237b-3e29-b0ce-fc7c-3402fe8ef8c7-f0d6496c {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-e2ba1700-95fd-3e74-f112-1ac71765e5cf-f0d6496c {
  grid-area: span 8 / span 3 / span 8 / span 3;
}

#w-node-e2ba1700-95fd-3e74-f112-1ac71765e5dc-f0d6496c {
  grid-area: span 4 / span 3 / span 4 / span 3;
}

#w-node-e2ba1700-95fd-3e74-f112-1ac71765e5e6-f0d6496c {
  grid-area: span 4 / span 2 / span 4 / span 2;
}

#w-node-e2ba1700-95fd-3e74-f112-1ac71765e5ed-f0d6496c {
  grid-area: span 4 / span 1 / span 4 / span 1;
}

@media screen and (min-width: 1920px) {
  #w-node-_3f978aff-b831-186d-4e3e-67989d070f70-37a01ccf, #w-node-_3f978aff-b831-186d-4e3e-67989d070f82-37a01ccf, #w-node-_6afe9475-a39a-7eef-666f-9409f864ccdd-37a01ccf {
    grid-area: span 8 / span 3 / span 8 / span 3;
  }

  #w-node-ecebe765-009e-c7e2-ae4a-077a3955c496-34c74d87, #w-node-_395091e9-839a-85a8-baa6-88b0459af4a0-34c74d87, #w-node-_900c481e-c884-ccc3-f689-148b51973af4-34c74d87, #w-node-_1382812c-68d3-5278-d9fd-e84a537ddb89-34c74d87, #w-node-_6a6907d8-d5cb-1c70-f932-c2810b8103a5-34c74d87, #w-node-_893e4297-8291-3710-72a7-92d559ed5246-34c74d87, #w-node-_8575a77b-903b-2126-a495-2631c9b987f5-34c74d87 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }

  #w-node-e2ba1700-95fd-3e74-f112-1ac71765e5cf-f0d6496c {
    grid-area: span 8 / span 3 / span 8 / span 3;
  }
}

@media screen and (max-width: 991px) {
  #w-node-_3f978aff-b831-186d-4e3e-67989d070f70-37a01ccf, #w-node-_3f978aff-b831-186d-4e3e-67989d070f82-37a01ccf, #w-node-_6afe9475-a39a-7eef-666f-9409f864ccdd-37a01ccf {
    grid-area: span 8 / span 3 / span 8 / span 3;
  }

  #w-node-_6afe9475-a39a-7eef-666f-9409f864ccea-37a01ccf {
    grid-area: span 4 / span 4 / span 4 / span 4;
  }

  #w-node-_6afe9475-a39a-7eef-666f-9409f864ccf4-37a01ccf, #w-node-_6afe9475-a39a-7eef-666f-9409f864ccfb-37a01ccf {
    grid-area: span 4 / span 2 / span 4 / span 2;
  }

  #w-node-e2ba1700-95fd-3e74-f112-1ac71765e5cf-f0d6496c {
    grid-area: span 8 / span 3 / span 8 / span 3;
  }

  #w-node-e2ba1700-95fd-3e74-f112-1ac71765e5dc-f0d6496c {
    grid-area: span 4 / span 4 / span 4 / span 4;
  }

  #w-node-e2ba1700-95fd-3e74-f112-1ac71765e5e6-f0d6496c, #w-node-e2ba1700-95fd-3e74-f112-1ac71765e5ed-f0d6496c {
    grid-area: span 4 / span 2 / span 4 / span 2;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_9e2c30b5-37bf-f22e-e1fe-9c59ae23a204-ae23a1f2, #w-node-_9e2c30b5-37bf-f22e-e1fe-9c59ae23a208-ae23a1f2 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
}


@font-face {
  font-family: 'MATERIAL-ICONS';
  src: url('../fonts/MaterialIcons-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}