@charset "UTF-8";
.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}
   html, body {
border: 0;
font-family: sans-serif;
line-height: 1.7em;
margin: 0;
padding: 0;
}
div, span, object, iframe, img, table, caption, thead, tbody,
tfoot, tr, tr, td, article, aside, canvas, details, figure, hgroup, menu,
nav, footer, header, section, summary, mark, audio, video {
border: 0;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cit, code,
del, dfn, em, ins, q, samp, small, strong, sub, sup, b, i, hr, dl, dt, dd,
ol, li, fieldset, legend, label {
border: 0; vertical-align: baseline;
margin: 0;
padding: 0;
}
article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
display: block;
}
table {
border-collapse: separate;
border-spacing: 0;
}
table caption, table th, table td {
text-align: left;
vertical-align: middle;
}
a img {
border: 0;
}
:focus {
outline: 0;
}           @font-face {
font-family: "Nexa";
src: url(//zibian-labs.com/wp-content/themes/panacea/assets/fonts/Nexa-Light.otf) format("opentype");
}
@font-face {
font-family: "NexaBold";
font-weight: bold;
src: url(//zibian-labs.com/wp-content/themes/panacea/assets/fonts/Nexa-Bold.otf) format("opentype");
} html,
body {
width: 100vw;
min-width: 100vw;
overflow-x: hidden; margin: 0 !important;
padding: 0;
}
body {
display: flex;
flex-direction: column;
font-size: 100%;
font-family: sans-serif;
font-display: swap;
color: white;
background-color: #1e1e1e; -webkit-hyphens: none;
hyphens: none; font-smooth: always; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
iframe[src*=recaptcha] {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
.grecaptcha-badge {
visibility: hidden !important;
pointer-events: none !important;
}
main {
background-color: #1e1e1e;
} .header--init,
.header--normal {
width: 100%;
background-color: transparent;
position: absolute;
display: flex;
justify-content: space-between;
padding: 2em 3em;
}
@media screen and (max-width: 1400px) {
.header--init,
.header--normal {
padding: 1em 2em;
}
}
@media screen and (max-width: 900px) {
.header--init,
.header--normal {
padding: 1em 1em;
}
}
@media screen and (max-width: 400px) {
.header--init,
.header--normal {
padding: 1em 1em;
}
}
.header--init .menu__init .menu,
.header--normal .menu__init .menu {
display: flex;
flex-flow: row nowrap;
gap: 4em;
list-style: none;
}
.header--init .menu__init .menu li:hover,
.header--normal .menu__init .menu li:hover {
border-bottom: 1px solid #1e1e1e;
}
.header--init .menu__init .menu li a,
.header--normal .menu__init .menu li a {
color: #1e1e1e;
font-family: "Inter", sans-serif;
font-weight: 500;
font-style: Medium;
font-size: 20px;
line-height: 145%;
letter-spacing: -0.5%;
text-align: center;
vertical-align: middle;
text-transform: capitalize;
text-decoration: none;
}
.header--init .menu__init.menu__item--white li:hover,
.header--normal .menu__init.menu__item--white li:hover {
border-bottom: 1px solid #ffffff;
}
.header--init .menu__init.menu__item--white li a,
.header--normal .menu__init.menu__item--white li a {
color: #ffffff;
}
.header--init .logo img {
width: 251px;
height: 121px;
}
@media screen and (max-width: 900px) {
.header--init .logo img {
width: 200px;
height: 100px;
}
}
@media screen and (max-width: 400px) {
.header--init .logo img {
width: 165px;
height: 80px;
}
}
.header--normal .logo img {
width: 40px;
height: 40px;
}
.menu-toggle {
display: none;
position: absolute;
top: 2em;
right: 2em;
z-index: 1100;
background: none;
border: none;
cursor: pointer;
}
.menu-toggle .hamburger {
width: 32px;
height: 4px;
background: #1e1e1e;
display: block;
position: relative;
border-radius: 2px;
transition: all 0.3s;
}
.menu-toggle .hamburger::before, .menu-toggle .hamburger::after {
content: "";
width: 32px;
height: 4px;
background: #1e1e1e;
position: absolute;
left: 0;
border-radius: 2px;
transition: all 0.3s;
}
.menu-toggle .hamburger::before {
top: -10px;
}
.menu-toggle .hamburger::after {
top: 10px;
}
.menu-toggle.fixed {
position: fixed;
top: 2em;
right: 2em;
z-index: 1110;
}
.menu-toggle.fixed .hamburger, .menu-toggle.active .hamburger {
background: transparent;
}
.menu-toggle.fixed .hamburger::before, .menu-toggle.active .hamburger::before {
top: 0;
transform: rotate(45deg);
background: #ffffff;
}
.menu-toggle.fixed .hamburger::after, .menu-toggle.active .hamburger::after {
top: 0;
transform: rotate(-45deg);
background: #ffffff;
}
.menu-toggle.white .hamburger {
background: #ffffff;
}
.menu-toggle.white .hamburger::before, .menu-toggle.white .hamburger::after {
background: #ffffff;
}
.menu-toggle.white.fixed .hamburger, .menu-toggle.white.active .hamburger {
background: transparent;
}
.menu__mobile {
display: none;
position: fixed;
top: 0;
right: 0;
width: 100vw;
height: 100vh;
background: #1e1e1e;
z-index: 1099;
flex-direction: column;
padding: 5em 2em;
}
.menu__mobile ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2em;
}
.menu__mobile ul li a {
color: #ffffff;
font-size: 2em;
text-decoration: none;
}
.menu__mobile.active {
display: flex;
}
.menu__mobile.active ~ a.scroll-to-top, .menu__mobile.active ~ main a.scroll-to-top {
display: none !important;
}
@media (max-width: 900px) {
.menu-toggle {
display: block;
}
.menu__init {
display: none;
}
.menu__mobile {
display: none;
}
.menu__mobile.active {
display: flex;
}
}
html #wpadminbar {
display: none;
} main a.scroll-to-top {
position: fixed;
right: 1em;
bottom: 1em;
z-index: 9999;
}
main a.scroll-to-top .image-dissolve-container {
position: relative;
width: 120px;
height: 86px;
}
@media screen and (max-width: 900px) {
main a.scroll-to-top .image-dissolve-container {
width: 82px;
height: 86px;
}
}
@media screen and (max-width: 400px) {
main a.scroll-to-top .image-dissolve-container {
width: 57px;
height: 60px;
}
}
main a.scroll-to-top .image-dissolve-container .img-base,
main a.scroll-to-top .image-dissolve-container .img-hover {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
transition: opacity 0.5s ease;
border-radius: 25px;
-o-object-fit: cover;
object-fit: cover;
display: block;
}
main a.scroll-to-top .image-dissolve-container .img-base {
opacity: 1;
z-index: 1;
}
main a.scroll-to-top .image-dissolve-container .img-hover {
opacity: 0;
z-index: 2;
}
main a.scroll-to-top .image-dissolve-container:hover .img-base {
opacity: 0;
}
main a.scroll-to-top .image-dissolve-container:hover .img-hover {
opacity: 1;
}
.main {
padding: 0;
margin: 0;        }
.main p {
font-family: "Inter", sans-serif;
font-weight: 500;
font-style: Medium;
font-size: 24px;
line-height: 145%;
letter-spacing: -0.5%;
vertical-align: middle;
}
.main p.p--white {
color: #ffffff;
}
.main p.p--black {
color: #1e1e1e;
}
@media screen and (max-width: 900px) {
.main p {
font-size: 20px;
}
}
.main h1 {
font-family: Inter;
font-weight: 700;
font-style: Bold;
font-size: 56px;
line-height: 110%;
letter-spacing: -2%;
vertical-align: middle;
}
@media screen and (max-width: 1400px) {
.main h1 {
font-size: 48px;
}
}
@media screen and (max-width: 900px) {
.main h1 {
font-size: 36px;
}
}
.main h2 {
font-family: Oxygen;
font-weight: 700;
font-style: Bold;
font-size: 48px;
line-height: 120%;
letter-spacing: -2%;
vertical-align: middle;
}
.main h2.h2--white {
color: #ffffff;
}
.main h2.h2--black {
color: #1e1e1e;
}
.main h2.h2--radial {
background: radial-gradient(71.93% 147.5% at 21.18% 26.1%, #ffffff 5.29%, #f3dfff 36.54%, #76f6f5 73.41%, #ffffff 100%);
background-clip: text;
-webkit-background-clip: text; color: transparent;
-webkit-text-fill-color: transparent; }
@media screen and (max-width: 1400px) {
.main h2 {
font-size: 36px;
}
}
@media screen and (max-width: 900px) {
.main h2 {
font-size: 30px;
}
}
.main h3 {
font-family: "Inter", sans-serif;
font-weight: 600;
font-style: SemiBold;
font-size: 36px;
line-height: 120%;
letter-spacing: -2%;
vertical-align: middle;
}
@media screen and (max-width: 1400px) {
.main h3 {
font-size: 30px;
}
}
@media screen and (max-width: 900px) {
.main h3 {
font-size: 24px;
}
}
.main .tags {
width: -moz-fit-content;
width: fit-content;
padding: 4px 12px;
border-radius: 20px;
border-width: 1px;
font-family: Oxygen;
font-weight: 400;
font-style: Regular;
font-size: 14px !important;
line-height: 145%;
letter-spacing: -0.5%;
vertical-align: middle;
}
.main .tags.tags--purple {
border: 1px solid #b541fa;
color: #b541fa;
}
.main .tags.tags--turquoise {
border: 1px solid #76f6f5;
color: #76f6f5;
}
.main .tags.tags--purple-light {
border: 1px solid #f3dfff;
color: #f3dfff;
}
.main .tags.tags--white {
border: 1px solid #ffffff;
color: #ffffff;
}
.main button[type=submit] {
border-radius: 12px;
padding: 12px 16px;
font-family: "Inter", sans-serif;
font-weight: 500;
font-style: Medium;
font-size: 18px;
line-height: 145%;
letter-spacing: -0.5%;
text-align: center;
vertical-align: middle;
}
.main button[type=submit].button--black {
background-color: #1e1e1e;
color: #ffffff;
border: #1e1e1e 1px solid;
}
.main button[type=submit].button--black:hover {
background-color: #f3dfff;
color: #1e1e1e;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.main button[type=submit].button--white {
background-color: #ffffff;
color: #1e1e1e;
border: rgba(0, 0, 0, 0.1490196078) 1px solid;
}
.main button[type=submit].button--white:hover {
border: #1e1e1e 1px solid;
transition: border-color 0.3s ease-in-out, color 0.2s ease-in-out;
}
.main button[type=submit].button--purple {
background-color: #b541fa;
color: #ffffff;
border: none;
text-transform: uppercase;
padding: 12px 34px;
border-radius: 40px;
display: inline-flex;
gap: 0.5em;
transition: padding-right 300ms ease-in-out;
}
.main button[type=submit].button--purple::after {
content: url(//zibian-labs.com/wp-content/uploads/2025/08/arrow-right.svg);
display: block;
width: 12.6px;
height: 16px;
position: relative;
left: 0;
transition: left 300ms ease-in-out;
}
.main button[type=submit].button--purple:hover {
padding-right: 36px;
}
.main button[type=submit].button--purple:hover::after {
left: 13px;
}
.main button[type=submit].button--purple.button--purple--right {
align-self: flex-end;
}
.main .button a {
border-radius: 12px;
padding: 12px 16px;
font-family: "Inter", sans-serif;
font-weight: 500;
font-style: Medium;
font-size: 18px;
line-height: 145%;
letter-spacing: -0.5%;
text-align: center;
vertical-align: middle;
}
.main .button.button--black a {
background-color: #1e1e1e;
color: #ffffff;
border: #1e1e1e 1px solid;
}
.main .button.button--black a:hover {
background-color: #f3dfff;
color: #1e1e1e;
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.main .button.button--white a {
background-color: #ffffff;
color: #1e1e1e;
border: rgba(0, 0, 0, 0.1490196078) 1px solid;
}
.main .button.button--white a:hover {
border: #1e1e1e 1px solid;
transition: border-color 0.3s ease-in-out, color 0.2s ease-in-out;
}
.main .button.button--purple a {
background-color: #b541fa;
color: #ffffff;
border: none;
text-transform: uppercase;
padding: 12px 24px;
border-radius: 40px;
display: inline-flex;
gap: 0.5em;
transition: padding-right 300ms ease-in-out;
}
.main .button.button--purple a::after {
content: url(//zibian-labs.com/wp-content/uploads/2025/08/arrow-right.svg);
display: block;
width: 12.6px;
height: 16px;
position: relative;
left: 0;
transition: left 300ms ease-in-out;
}
.main .button.button--purple a:hover {
padding-right: 36px;
}
.main .button.button--purple a:hover::after {
left: 13px;
}
.main .button.button--purple.button--purple--right {
position: relative;
left: 21em;
}
@media screen and (max-width: 1024px) {
.main .button.button--purple.button--purple--right {
left: 12em;
}
}
@media screen and (max-width: 900px) {
.main .button.button--purple.button--purple--right {
left: 0em;
}
}
@media screen and (max-width: 900px) {
.main .wp-block-buttons:has(.button--purple--right) {
justify-content: flex-end;
}
}
.main .text--white {
color: #ffffff;
}
.main .float-container {
display: flex;
justify-content: center;
perspective: 1000px; }
.main .float-container .floating-img {
max-width: 100%;
height: auto;
animation: float 6s ease-in-out infinite;
}
.main .float-container .floating-img.contact {
max-width: 80%;
}
@media screen and (max-width: 400px) {
.main .float-container .floating-img.contact {
max-width: 100%;
}
}
@media screen and (max-width: 1400px) {
.main .background__block1,
.main .background__block2,
.main .background__block3,
.main .background__block4,
.main .background__block5,
.main .background__block6,
.main .background__block7,
.main .product__init,
.main .product__block1--layout,
.main .product__block2--layout,
.main .product__block3--layout,
.main .banner {
padding: 0 1em;
}
}
.main .slider__container {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.main .slider__container .slider {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
height: auto;
transition: transform 0.5s ease;
}
.main .slider__container .slider .slide {
flex: 0 0 420px;
transform: scale(0.8);
opacity: 0.5;
transition: all 0.5s ease;
transition: opacity 0.5s ease;
border-radius: 10px;
}
.main .slider__container .slider .slide.fade-in {
opacity: 1;
}
.main .slider__container .slider .slide.fade-out {
opacity: 0;
}
.main .slider__container .slider .slide.center {
flex: 0 0 60%;
transform: scale(1);
opacity: 1;
}
.main .slider__container .slider .slide img {
width: 100%;
border-radius: 10px;
}
.main .slider__container .dots {
margin-top: 15px;
display: flex;
gap: 10px;
}
.main .slider__container .dots .dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
transition: background-color 0.3s ease;
}
.main .slider__container .dots .dot.active {
background-color: #76f6f5;
}
.main .wrap__slider {
--dot-size: 12px;
--dot-gap: 10px;
--transition-ms: 500ms;
--autoplay-ms: 3500ms;
}
.main .wrap__slider .product__slider {
position: relative;
max-width: 70%;
margin: 2rem auto;
padding-top: 2em;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
background: #1e1e1e;
}
@media screen and (max-width: 900px) {
.main .wrap__slider .product__slider {
margin: 0 auto;
max-width: 100%;
}
}
@media (max-width: 480px) {
.main .wrap__slider .product__slider {
--dot-size: 10px;
}
}
.main .wrap__slider .product__slider .viewport {
position: relative;
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
}
.main .wrap__slider .product__slider .product__slides {
display: flex;
width: 100%;
height: 100%;
transition: transform var(--transition-ms) linear;
}
.main .wrap__slider .product__slider .product__slide {
flex: 0 0 100%;
height: 100%;
background-color: transparent;
}
.main .wrap__slider .product__slider .product__slide img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
transform: none !important;
transition: none !important;
}
.main .wrap__slider .product__dots {
display: flex;
justify-content: center;
gap: var(--dot-gap);
padding: 2em 0;
background: transparent;
}
.main .wrap__slider .product__dots button {
width: var(--dot-size);
height: var(--dot-size);
border-radius: 50%;
border: 0;
background: #ededed;
opacity: 0.7;
cursor: pointer;
transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}
.main .wrap__slider .product__dots button:hover {
opacity: 1;
transform: scale(1.15);
}
.main .wrap__slider .product__dots button.active {
background: #76f6f5;
opacity: 1;
transform: scale(1.2);
}
.main .wrap__slider .block__text {
display: none;
opacity: 0;
}
.main .wrap__slider .block__text.active {
display: grid;
grid-template-columns: 50%;
justify-content: center;
text-align: center;
gap: 1em;
padding: 2em 0;
animation: textFadeIn 0.8s ease forwards;
}
@media screen and (max-width: 900px) {
.main .wrap__slider .block__text.active {
grid-template-columns: 1fr;
}
}
.main .block__content {
width: 87%;
align-self: center;
}
@media screen and (max-width: 780px) {
.main .block__content {
width: 100%;
}
}
.main .background__block1 {
background: radial-gradient(circle at 50% -50%, #b9f1e0 0%, #58c4f6 20%, #6c70ff 40%, #d2b7f3 60%, #ffffff 80%);
height: 60em;
}
@media screen and (max-width: 400px) {
.main .background__block1 {
height: 50em;
}
}
.main .background__block1 .background__block1--layout {
max-width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
padding-top: 6em;
}
@media screen and (max-width: 1400px) {
.main .background__block1 .background__block1--layout {
padding-top: 5em;
}
}
@media screen and (max-width: 900px) {
.main .background__block1 .background__block1--layout {
padding-top: 0;
}
}
@media screen and (max-width: 780px) {
.main .background__block1 .background__block1--layout {
padding-top: 12em;
}
}
@media screen and (max-width: 400px) {
.main .background__block1 .background__block1--layout {
padding-top: 10em;
}
}
.main .background__block1 .background__block1--layout .block__title {
max-width: 1400px;
gap: 7em;
}
@media screen and (max-width: 1400px) {
.main .background__block1 .background__block1--layout .block__title {
gap: 3em;
}
}
@media screen and (max-width: 900px) {
.main .background__block1 .background__block1--layout .block__title {
gap: 1em;
}
}
@media screen and (max-width: 780px) {
.main .background__block1 .background__block1--layout .block__title {
gap: 3em;
}
.main .background__block1 .background__block1--layout .block__title .wp-block-buttons {
justify-content: center;
padding-top: 2em;
}
}
.main .background__block1 .background__block1--layout .block__title video {
border-radius: 32px;
}
.main .background__block2 {
background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 22.33%, #1e1e1e 81.48%);
max-width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
.main .background__block2 .background__block2--layout {
display: flex;
flex-flow: column nowrap;
gap: 2em;
max-width: 1400px;
margin: 0 auto;
}
.main .background__block2 .background__block2--layout > .cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2em;
justify-content: center;
}
.main .background__block2 .background__block2--layout > .cards .card {
width: 100%;
height: 583px;
gap: 14em;
padding: 48px 38px 48px 24px;
border-radius: 24px;
transition: padding-top 0.3s ease, gap 0.3s ease;
text-decoration: none;
}
@media screen and (max-width: 900px) {
.main .background__block2 .background__block2--layout > .cards .card {
height: 506px;
gap: 7em;
transition: none;
}
.main .background__block2 .background__block2--layout > .cards .card > div:first-child {
display: grid;
grid-template-columns: 1fr auto;
}
}
@media screen and (max-width: 780px) {
.main .background__block2 .background__block2--layout > .cards .card {
gap: 3em;
}
}
.main .background__block2 .background__block2--layout > .cards .card.card--purple {
background: #e5b9ff;
}
.main .background__block2 .background__block2--layout > .cards .card.card--turquoise {
background: #76f6f5;
}
.main .background__block2 .background__block2--layout > .cards .card.card--white {
background: #ffffff;
}
.main .background__block2 .background__block2--layout > .cards .card .card__header {
display: flex;
justify-content: space-between;
}
.main .background__block2 .background__block2--layout > .cards .card .card__arrow {
opacity: 0;
}
@media screen and (max-width: 900px) {
.main .background__block2 .background__block2--layout > .cards .card .card__arrow {
opacity: 1;
}
}
.main .background__block2 .background__block2--layout > .cards .card .card--hover {
opacity: 0;
}
@media screen and (max-width: 900px) {
.main .background__block2 .background__block2--layout > .cards .card .card--hover {
opacity: 1;
}
}
.main .background__block2 .background__block2--layout > .cards .card .card--hover p {
font-family: "Inter", sans-serif;
font-weight: 400;
font-style: Regular;
font-size: 16px;
line-height: 120%;
letter-spacing: -2%;
vertical-align: middle;
}
.main .background__block2 .background__block2--layout > .cards .card .card__arrow,
.main .background__block2 .background__block2--layout > .cards .card .card--hover {
transition: none;
}
.main .background__block2 .background__block2--layout > .cards .card:hover {
padding-top: 38px;
gap: 9em;
}
@media screen and (max-width: 780px) {
.main .background__block2 .background__block2--layout > .cards .card:hover {
gap: 3em;
}
}
.main .background__block2 .background__block2--layout > .cards .card:hover .card__arrow,
.main .background__block2 .background__block2--layout > .cards .card:hover .card--hover {
transition: opacity 0.7s;
opacity: 1;
}
.main .background__block3 .background__block3--layout {
max-width: 1400px;
margin: 0 auto;
padding: 6em 0;
display: flex;
flex-flow: column nowrap;
gap: 2em;
}
@media screen and (max-width: 780px) {
.main .background__block3 .background__block3--layout {
padding: 3em 0 1em;
}
}
@media screen and (max-width: 780px) {
.main .block__mobile-change-order {
display: flex;
flex-flow: column nowrap;
}
.main .block__mobile-change-order div:first-child {
order: 2;
}
.main .block__mobile-change-order div:last-child {
order: 1;
}
}
.main .background__block4 {
background: linear-gradient(180deg, #1e1e1e 0%, #281333 100%);
}
.main .background__block4 .background__block4--layout {
max-width: 1400px;
width: 100%;
margin: 0 auto;
padding: 6em 0;
display: flex;
flex-flow: column nowrap;
gap: 2em;
}
@media screen and (max-width: 780px) {
.main .background__block4 .background__block4--layout {
padding: 1em 0;
}
}
.main .background__block4 .background__block4--layout .slider__container {
display: flex;
}
@media screen and (max-width: 1650px) {
.main .background__block4 .background__block4--layout .slider__container {
display: none;
}
}
.main .background__block4 .background__block4--layout .wrap__slider {
display: none;
}
@media screen and (max-width: 1650px) {
.main .background__block4 .background__block4--layout .wrap__slider {
display: block;
}
}
.main .background__block5 {
background-image: url(//zibian-labs.com/wp-content/uploads/2025/08/ZL-gradiente-unplash-1-resize3.jpg);
background-image: -webkit-image-set(url(//zibian-labs.com/wp-content/uploads/2025/08/ZL-gradiente-unplash-1-resize3.webp) type("image/webp"), url(//zibian-labs.com/wp-content/uploads/2025/08/ZL-gradiente-unplash-1-resize3.png) type("image/png"));
background-image: image-set(url(//zibian-labs.com/wp-content/uploads/2025/08/ZL-gradiente-unplash-1-resize3.webp) type("image/webp"), url(//zibian-labs.com/wp-content/uploads/2025/08/ZL-gradiente-unplash-1-resize3.png) type("image/png"));
background-size: cover;
width: 100%;
padding-bottom: 9em;
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
.main .background__block5 .background__block5--layout {
display: flex;
flex-flow: column nowrap;
justify-content: center;
padding: 8em 0 0;
max-width: 1400px;
}
@media screen and (max-width: 780px) {
.main .background__block5 .background__block5--layout {
padding: 2em 0 0;
}
}
.main .background__block5 .background__block5--layout .tags {
align-self: center;
}
.main .background__block5 .background__block5--layout h2 {
text-align: center;
}
.main .background__block5 .background__block5--layout .box--layout {
display: flex;
flex-flow: column nowrap;
justify-content: center;
gap: 3em;
padding-top: 5em;
}
@media screen and (max-width: 900px) {
.main .background__block5 .background__block5--layout .box--layout {
gap: 1em;
}
}
.main .background__block5 .background__block5--layout .box--layout .box {
display: grid;
grid-template-columns: auto 1fr;
gap: 1em;
padding: 20px 40px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.1607843137);
box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.1019607843);
max-width: 80%;
color: #ffffff;
}
@media screen and (max-width: 900px) {
.main .background__block5 .background__block5--layout .box--layout .box {
max-width: 100%;
padding: 20px 20px;
grid-template-columns: 1fr;
}
}
.main .background__block5 .background__block5--layout .box--layout .box p {
margin: 0;
}
.main .background__block5 .background__block5--layout .box--layout .box > div:first-child p {
position: relative;
top: -5px;
}
.main .background__block5 .background__block5--layout .box--layout .box.box--right {
align-self: end;
}
.main .background__block5 .background__block5--layout .box--layout .box.box--left {
align-self: start;
}
@media screen and (max-width: 900px) {
.main .background__block5 .background__block5--layout .box--layout .box.box--right, .main .background__block5 .background__block5--layout .box--layout .box.box--left {
align-self: center;
width: 100%;
}
}
.main .background__block6 {
width: 100%;
}
.main .background__block6.background__block6--page {
background: #1e1e1e;
}
.main .background__block6.background__block6--home {
background: linear-gradient(180deg, #1c1a24 100%, #1c1a24 0%);
}
.main .background__block6 .background__block6--layout {
max-width: 1400px;
margin: 0 auto;
padding: 3em 0 6em;
display: flex;
flex-flow: column nowrap;
gap: 3em;
}
@media screen and (max-width: 780px) {
.main .background__block6 .background__block6--layout .block__content > div:first-child {
order: 2;
padding-top: 2em;
}
.main .background__block6 .background__block6--layout .block__content > div:last-child {
order: 1;
}
}
.main .background__block6 .background__block6--layout .form__init {
display: flex;
flex-flow: column nowrap;
gap: 1em;
}
@media screen and (max-width: 780px) {
.main .background__block6 .background__block6--layout .form__init > div:first-child {
gap: 1em;
}
}
.main .background__block6 .background__block6--layout .form__init br {
display: none;
}
.main .background__block6 .background__block6--layout .form__init p {
margin: 0;
padding: 0;
}
.main .background__block6 .background__block6--layout .form__init p input,
.main .background__block6 .background__block6--layout .form__init p select,
.main .background__block6 .background__block6--layout .form__init p textarea {
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 12px 14px;
border-radius: 5px;
background-color: #29262d;
color: rgba(255, 255, 255, 0.6);
}
.main .background__block6 .background__block6--layout .form__init p input::-moz-placeholder, .main .background__block6 .background__block6--layout .form__init p select::-moz-placeholder, .main .background__block6 .background__block6--layout .form__init p textarea::-moz-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.main .background__block6 .background__block6--layout .form__init p input::placeholder,
.main .background__block6 .background__block6--layout .form__init p input option,
.main .background__block6 .background__block6--layout .form__init p select::placeholder,
.main .background__block6 .background__block6--layout .form__init p select option,
.main .background__block6 .background__block6--layout .form__init p textarea::placeholder,
.main .background__block6 .background__block6--layout .form__init p textarea option {
color: rgba(255, 255, 255, 0.6);
}
.main .background__block6 .background__block6--layout .form__init p select {
background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
background-repeat: no-repeat;
background-position: right 0.7em center;
background-size: 1em;
}
.main .background__block6 .wpcf7-response-output {
color: #ffffff;
}
.main .background__block7 {
background-color: #1c1a24;
display: flex;
justify-content: center;
padding-top: 2em;
}
.main .background__block7 .background__block7--layout {
max-width: 1400px;
display: flex;
justify-content: center;
align-items: center;
}
.main .background__block7 .background__block7--layout figure {
display: flex;
justify-content: center;
}
.main .background__block7 .background__block7--layout figure.keywords__desktop {
display: block;
}
@media screen and (max-width: 400px) {
.main .background__block7 .background__block7--layout figure.keywords__desktop {
display: none;
}
}
.main .background__block7 .background__block7--layout figure.keywords__mobile {
display: none;
}
@media screen and (max-width: 400px) {
.main .background__block7 .background__block7--layout figure.keywords__mobile {
display: block;
}
}
.main .products {
padding-top: 10em;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center; }
.main .products p {
font-family: "Inter", sans-serif;
font-weight: 400;
font-style: Regular;
font-size: 20px;
line-height: 140%;
letter-spacing: -2%;
vertical-align: middle;
}
.main .products .product__init {
max-width: 1400px;
display: grid;
grid-template-columns: 40% 50%;
justify-content: space-between;
gap: 1em;
}
@media screen and (max-width: 900px) {
.main .products .product__init {
grid-template-columns: 1fr;
justify-content: center;
gap: 4em;
}
}
.main .products .product__init .product__title {
display: flex;
flex-flow: column nowrap;
gap: 1em;
}
.main .products .product__init .product__title .visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.main .products .product__init .product__title .tags--layout {
display: flex;
flex-flow: row nowrap;
gap: 1em;
}
.main .products .product__init .product__title .tags--layout .tags--layout--two-item {
display: grid;
grid-template-columns: 50% 50%;
gap: 0.5em;
height: -moz-fit-content;
height: fit-content;
align-items: center;
}
.main .products .product__init .product__title .tags--layout .tags--layout--two-item img:first-child {
width: 20px;
}
.main .products .product__init .product__title .tags--layout .tags--layout--two-item img:last-child {
width: 16px;
}
.main .products .product__init .image-wrapper {
position: relative;
display: inline-block;
mix-blend-mode: screen;
}
.main .products .product__init .image-wrapper img {
width: 60%;
}
.main .products .product__init .image-wrapper::before {
content: "";
position: absolute;
top: -180px;
left: -180px;
right: -180px;
bottom: -180px; background: radial-gradient(circle at 20% 40%, rgba(0, 255, 200, 0.8) 0%, transparent 70%), radial-gradient(circle at 80% 20%, rgba(200, 0, 255, 0.7) 0%, transparent 70%), radial-gradient(circle at 60% 90%, rgba(0, 150, 255, 0.6) 0%, transparent 70%);
filter: blur(100px);
z-index: -1;
}
.main .products .product__block1--layout {
max-width: 1400px;
display: flex;
flex-flow: column nowrap;
gap: 1em;
padding-top: 5em;
}
@media screen and (max-width: 900px) {
.main .products .product__block1--layout {
padding-top: 2em;
}
}
.main .products .product__block2 {
background-image: url(//zibian-labs.com/wp-content/uploads/2025/08/gradient-background-1.svg);
background-image: -webkit-image-set(url(//zibian-labs.com/wp-content/uploads/2025/08/gradient-background-1.svg) type("image/svg+xml"), url(//zibian-labs.com/wp-content/uploads/2025/08/gradient-background-1.png) type("image/png"));
background-image: image-set(url(//zibian-labs.com/wp-content/uploads/2025/08/gradient-background-1.svg) type("image/svg+xml"), url(//zibian-labs.com/wp-content/uploads/2025/08/gradient-background-1.png) type("image/png"));
background-size: cover;
width: 100%;
padding: 0 0 5em;
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
.main .products .product__block2 .product__block2--layout {
display: flex;
flex-flow: column nowrap;
justify-content: center;
gap: 1em;
padding: 8em 0 0;
max-width: 1400px;
}
@media screen and (max-width: 900px) {
.main .products .product__block2 .product__block2--layout {
padding: 3em 0 0;
}
}
.main .products .product__block2 .product__block2--layout .tags {
align-self: center;
}
.main .products .product__block2 .product__block2--layout .box--layout {
display: flex;
justify-content: center;
align-items: center;
}
.main .products .product__block2 .product__block2--layout .box--layout figure {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.main .products .product__block2 .product__block2--layout .box--layout figure.workflow--desktop {
display: block;
}
@media screen and (max-width: 780px) {
.main .products .product__block2 .product__block2--layout .box--layout figure.workflow--desktop {
display: none;
}
}
.main .products .product__block2 .product__block2--layout .box--layout figure.workflow--mobile {
display: none;
}
@media screen and (max-width: 780px) {
.main .products .product__block2 .product__block2--layout .box--layout figure.workflow--mobile {
display: block;
}
}
.main .products .product__block2 .product__block2--layout .box--layout figure img {
width: 100%;
padding-top: 4em;
}
@media screen and (max-width: 900px) {
.main .products .product__block2 .product__block2--layout .box--layout figure img {
padding-top: 0em;
}
}
.main .products .background__block3--layout {
padding: 1em 0 3em;
}
.main .products .testimonial__name {
display: flex;
flex-flow: column nowrap;
align-items: end;
padding: 2em 0 0;
}
.main .products .testimonial__name p {
font-family: "Space Grotesk", sans-serif;
font-weight: 500;
font-style: Medium;
font-size: 14px;
line-height: 145%;
letter-spacing: -0.5%;
text-align: right;
vertical-align: middle;
color: #ffffff;
}
.main .products .product__block3 {
background-color: #ffffff;
width: 100%;
padding: 3em 0;
}
.main .products .product__block3 .product__block3--layout {
max-width: 1400px;
margin: 0 auto;
}
.main .products .product__block3 .product__block3--layout .accordion-button {
padding: 2em 1em;
}
.main .products .product__block3 .product__block3--layout .accordion-button .accordion-button-text {
font-family: "Oxygen", sans-serif;
font-weight: 700;
font-style: Bold;
font-size: 24px;
line-height: 120%;
letter-spacing: -2%;
vertical-align: middle;
}
@media screen and (max-width: 900px) {
.main .products .product__block3 .product__block3--layout .accordion-button .accordion-button-text {
font-size: 20px;
}
}
.main .products .product__block3 .product__block3--layout .accordion-button .accordion-button-text::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background: #1e1e1e;
margin-right: 8px;
vertical-align: middle;
}
.main .products .product__block3 .product__block3--layout .accordion-button.collapsed {
border-bottom: 1px solid #1e1e1e;
}
.main .products .product__block3 .product__block3--layout .accordion-button:not(.collapsed) {
background-color: #ffffff;
color: #b541fa;
}
.main .products .product__block3 .product__block3--layout .accordion-button:not(.collapsed) .accordion-button-text::before {
background: #b541fa;
}
.main .products .product__block3 .product__block3--layout .accordion-button:focus {
box-shadow: none;
}
.main .products .product__block3 .product__block3--layout .accordion-body {
font-family: "Oxygen", sans-serif;
font-weight: 400;
font-style: Regular;
font-size: 24px;
line-height: 120%;
letter-spacing: -2%;
vertical-align: middle;
border-bottom: 1px solid #1e1e1e;
}
@media screen and (max-width: 900px) {
.main .products .product__block3 .product__block3--layout .accordion-body {
font-size: 20px;
}
}
.main .banner {
margin: 4em 0;
display: flex;
justify-content: center;
align-items: center;
}
.main .banner .banner1 {
max-width: 1400px;
background-color: #ffffff;
justify-content: space-between;
padding: 32px 80px;
border-radius: 24px;
}
@media screen and (max-width: 900px) {
.main .banner .banner1 {
padding: 1em;
}
}
.main .banner .banner1 .banner1--layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px;
}
@media (max-width: 780px) {
.main .banner .banner1 .banner1--layout {
grid-template-columns: 1fr;
}
.main .banner .banner1 .banner1--layout div:first-child {
order: 2;
}
.main .banner .banner1 .banner1--layout div:last-child {
order: 1;
}
.main .banner .banner1 .banner1--layout div:last-child figure {
justify-content: center;
}
}
.main .banner .banner1 .banner1--layout div:first-child {
max-width: 70%;
height: auto;
}
@media screen and (max-width: 780px) {
.main .banner .banner1 .banner1--layout div:first-child {
max-width: 100%;
}
}
.main .banner .banner1 .banner1--layout figure {
display: flex;
justify-content: end;
}
.main .legal__content {
display: flex;
justify-content: end;
gap: 2em;
padding: 11em 4em 4em;
}
@media screen and (max-width: 781px) {
.main .legal__content {
padding: 0 0 4em;
}
}
.main .legal__content .legal--layout {
max-width: 70%;
}
@media screen and (max-width: 781px) {
.main .legal__content .legal--layout {
max-width: 100%;
}
}
.main .legal__content .legal--layout hr {
border: 1.5px solid #76f6f5;
border-bottom: 0px;
opacity: 1;
}
@media screen and (max-width: 781px) {
.main .legal__content {
max-width: 100%;
}
}
.main .legal__content .legal__title {
color: #fff;
margin: 1.5rem 0;
font-family: "Roboto", Helvetica;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: normal;
word-break: keep-all; overflow-wrap: normal; -webkit-hyphens: none;
hyphens: none;
}
@media screen and (max-width: 781px) {
.main .legal__content .legal__title {
width: 100%;
margin: 0;
}
}
.main .legal__content .legal__text {
color: #fff;
margin: 1.5rem 0;
font-family: "Roboto", Helvetica;
font-size: 1.5rem;
font-style: normal;
font-weight: 400;
line-height: normal;
word-break: keep-all; overflow-wrap: normal; -webkit-hyphens: none;
hyphens: none;
}
@media screen and (max-width: 781px) {
.main .legal__content .legal__text {
width: 100%;
margin: 0;
}
}
.main .legal__content .legal__text ol {
margin: 0;
padding: 1.5em 0;
list-style-position: inside; display: flex;
flex-flow: column nowrap;
gap: 1em;
}
.main .legal__content .legal__text ol li {
color: #76f6f5;
font-family: "Roboto", Helvetica;
font-size: 1.5rem;
font-style: normal;
font-weight: 400;
line-height: normal;
word-break: keep-all;
overflow-wrap: normal;
-webkit-hyphens: none;
hyphens: none;
}
.main .legal__content .legal__text a {
color: #fff;
text-decoration: underline;
}
.main .legal__content .legal__text a:hover {
text-decoration: none;
color: #d9d9d9;
} @keyframes zoomInCenter {
0% {
transform: scale(0.8);
opacity: 0.6;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes shake-in {
0% {
transform: translateX(0) scale(0.9);
opacity: 0;
}
20% {
transform: translateX(-10px) scale(1);
}
40% {
transform: translateX(10px) scale(1);
}
60% {
transform: translateX(-6px) scale(1);
}
80% {
transform: translateX(6px) scale(1);
}
100% {
transform: translateX(0) scale(1);
opacity: 1;
}
}
@keyframes textFadeIn {
from {
opacity: 0;
transform: translateY(10px); }
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0% {
transform: translateY(0px) rotateX(0deg) rotateY(0deg);
}
25% {
transform: translateY(-15px) rotateX(5deg) rotateY(5deg);
}
50% {
transform: translateY(0px) rotateX(0deg) rotateY(0deg);
}
75% {
transform: translateY(-15px) rotateX(-5deg) rotateY(-5deg);
}
100% {
transform: translateY(0px) rotateX(0deg) rotateY(0deg);
}
} .footer {
width: 100%;
}
.footer .footer__container {
padding: 5em;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
@media screen and (max-width: 780px) {
.footer .footer__container {
padding: 1em;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
}
.footer .footer__container .footer__brand {
display: flex;
flex-flow: column nowrap;
gap: 1em;
align-items: start;
width: 360px;
}
.footer .footer__container .footer__brand img {
max-width: 212px;
height: auto;
}
.footer .footer__container .footer__brand p {
margin: 0;
font-family: Inter;
font-weight: 500;
font-style: Medium;
font-size: 16px;
line-height: 145%;
letter-spacing: -0.5%;
vertical-align: middle;
color: rgba(0, 0, 0, 0.5490196078);
}
@media screen and (max-width: 780px) {
.footer .footer__container .footer__brand {
justify-content: center;
align-items: center;
width: 60%;
text-align: center;
}
}
@media screen and (max-width: 400px) {
.footer .footer__container .footer__brand {
width: 100%;
}
}
.footer .footer__container .footer__nav {
display: flex;
flex-flow: row nowrap;
justify-content: end;
gap: 7em;
}
@media screen and (max-width: 780px) {
.footer .footer__container .footer__nav {
flex-flow: column nowrap;
align-items: center;
justify-content: center;
gap: 2em;
padding: 2em 0;
}
.footer .footer__container .footer__nav .footer__menu1 {
position: relative;
}
.footer .footer__container .footer__nav .footer__menu1::after {
content: "";
display: block;
width: 40px;
height: 1px;
background: rgba(0, 0, 0, 0.5490196078);
margin: 1em auto 0.5em;
}
}
.footer .footer__container .footer__nav .footer__menu1,
.footer .footer__container .footer__nav .footer__menu2 {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-flow: column nowrap;
gap: 1em;
}
@media screen and (max-width: 780px) {
.footer .footer__container .footer__nav .footer__menu1,
.footer .footer__container .footer__nav .footer__menu2 {
text-align: center;
}
}
.footer .footer__container .footer__nav .footer__menu1 li,
.footer .footer__container .footer__nav .footer__menu2 li {
margin: 0;
}
.footer .footer__container .footer__nav .footer__menu1 li a,
.footer .footer__container .footer__nav .footer__menu2 li a {
font-family: Inter;
font-weight: 500;
font-style: Medium;
font-size: 16px;
line-height: 145%;
letter-spacing: -0.5%;
vertical-align: middle;
color: rgba(0, 0, 0, 0.5490196078);
text-decoration: none;
}
.footer .footer__container .footer__nav .footer__menu1 li a:hover,
.footer .footer__container .footer__nav .footer__menu2 li a:hover {
text-decoration: underline;
cursor: pointer;
}
.footer .footer__bottom img {
width: 100%;
height: auto;
}