/*
Theme Name: SMARTIX
Description: Theme created by Leandro Berg (fullstack development - http://virtuemasters.com.br).
Version: 1.16
Author: VIRTUEMASTERS
Author URI: http://virtuemasters.com.br
*/

/* GENERAL */

body {
    font-family: "Epilogue", sans-serif;
    font-size: 18px;
    line-height: 26px;
}

section,
section.wp-block-cover {
    overflow: hidden;
    position: relative;
    padding: 100px 0;
}

section:nth-child(1) {
    padding-top: 60px;
}

.wrapper,
section > .wp-block-cover__inner-container,
section > .wp-block-group__inner-container,
footer > .wp-block-columns {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    width: calc(100% - 40px) !important;
}

p {
    margin-bottom: 36px;
}

p.has-text-align-center {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

img {
    max-width: 100%;
    height: auto;
}

iframe,
video,
audio {
    max-width: 100%;
}

b,
strong {
    font-weight: 700;
}

em {
    font-style: italic;
}

del {
    text-decoration: overline;
}

/* LINKS */

a {
    color: var(--orange);
    display: inline-block;
    text-decoration: none;
}

a:hover,
a:active,
a:focus {
    text-decoration: none;
    color: var(--red);
}

.current-menu-item a,
.current-page-ancestor a {
    color: var(--orange);
}

a.permalink {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}

/* SEPARATOR - block */

.wp-block-separator {
    border-top: 1px solid var(--orange);
    margin-bottom: 30px;
}

/* BUTTONS - block */

.button,
.wp-block-button .wp-block-button__link,
.blogs .wp-block-post-excerpt__more-link,
button {
    font-family: "Lexend Mega", sans-serif;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    line-height: 1em;
    padding: 13px 20px 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    border: none;
    cursor: pointer;
}

.wp-block-button .wp-block-button__link img {
    margin: -8px 0;
}

.button:hover,
.wp-block-button__link:hover,
.blogs .wp-block-post-excerpt__more-link:hover,
button:hover {
    background-color: var(--orange);
    color: white;
}

.wp-block-button__link.has-orange-background-color:hover {
    background-color: white;
    color: var(--orange);
}

.wp-block-button__link.has-black-background-color:hover,
.wp-block-button__link.has-white-background-color:hover {
    background-color: var(--orange) !important;
    color: white;
}

.button i {
    font-size: 28px;
    line-height: 0;
}

/* FORM */

form input::-webkit-input-placeholder,
form textarea::-webkit-input-placeholder {
}

form input:-moz-placeholder,
form textarea:-moz-placeholder {
}

form input::-moz-placeholder,
form textarea::-moz-placeholder {
}

form input:-ms-input-placeholder,
form textarea:-ms-input-placeholder {
}

form label.error {
    display: none !important;
}

form .error {
    border: 1px solid red !important;
    color: red;
}

form .error::-webkit-input-placeholder {
    color: red;
}

form .error:-moz-placeholder {
    color: red;
}

form .error::-moz-placeholder {
    color: red;
}

form .error:-ms-input-placeholder {
    color: red;
}

/* ALIGNMENT */

.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
}

.alignwide {
    margin-left: -20%;
    margin-right: -20%;
}

.alignwide iframe {
    width: 100%;
    height: 600px;
    margin: 15px 0;
}

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 20px auto;
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

img.alignnone {
    margin: 5px 20px 20px 0;
    border-radius: 50px;
    position: relative;
    max-width: 100vw;
}

img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* IMAGE - block */

.wp-block-image {
    margin-bottom: 30px;
}

.wp-block-image img {
    border-radius: 5px;
}

/* VIDEO - block */

.wp-block-video video {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 5px;
    pointer-events: none;
}

/* MEDIA TEXT - block */

.wp-block-media-text iframe,
.wp-block-media-text video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* CAPTION */

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* HEADINGS */

h1 {}

h2 {
    font-size: 40px;
    line-height: 48px;
    font-weight: 400;
    margin-bottom: 30px;
}

h2 strong {
    font-weight: 900;
}

h3 {
    font-weight: 900;
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 20px;
}

h4 {
    margin-bottom: 10px;
    font-weight: 700;
}

h5 {}

h6 {
    font-family: "Lexend Mega", sans-serif;
    font-size: 10px;
    line-height: 1em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: 10px;
}

h6:before {
    content: '';
    width: 30px;
    height: 1px;
    background-color: black;
    display: inline-block;
    opacity: .6;
    vertical-align: middle;
    margin-right: 20px;
}

/* LIST - block */

ul.wp-block-list {
    list-style-type: disc;
    padding: 0 15px 15px;
    margin-left: 15px;
    margin-top: -10px;
}

ol.wp-block-list {
    list-style-type: decimal;
    list-style-position: outside;
    padding: 0 20px;
}

.wp-block-list li {
    padding: 10px 0;
}

.wp-block-list ul {
    list-style-type: circle;
    list-style-position: outside;
    margin-left: 15px;
}

.wp-block-list ol {
    list-style-type: lower-latin;
    list-style-position: outside;
    margin-left: 15px;
}

.wp-block-list a {
    display: initial;
}

/* HEADER */

header {
    z-index: 9;
    position: relative;
}

header .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
}

header .custom-logo-link {
    margin-bottom: 8px;
}

header nav ul {
    display: flex;
    gap: 40px;
}

header nav ul li a {
    font-family: "Lexend Mega", sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--dark-gray);
}

header > div > div > .button {
    padding-left: 15px;
    padding-right: 15px;
    background-color: var(--dark-gray);
    opacity: .5;
    color: white;
}

header > div > div > .button:hover {
    opacity: 1;
    background-color: var(--orange);
    color: white;
}

header .hamburguer {
    width: 36px;
    height: 22px;
    position: relative;
    z-index: 9999;
    display: none;
}

header .hamburguer:before {
    position: absolute;
    height: 3px;
    width: 100%;
    content: "";
    left: 0;
    top: 0;
    background-color: var(--dark-gray);
    transition: background 0.3s;
}

header .hamburguer span {
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: var(--dark-gray);
    content: "";
    left: 0;
    top: 10px;
    transition: background 0.3s;
}

header .hamburguer:after {
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: var(--dark-gray);
    content: "";
    left: 0;
    top: calc(100% - 2px);
    transition: background 0.3s;
}

header .hamburguer:hover:before,
header .hamburguer:hover span,
header .hamburguer:hover:after {
    background: var(--orange);
}

header li.contact,
header li.social {
    display: none;
}

header li.contact {
    margin-top: 10px;
}

header li.contact .button {
    background-color: rgba(255, 255, 255, .5);
    display: inline-flex;
    padding-left: 12px;
    padding-right: 12px;
}

header li.social {
    align-self: end;
    margin-top: -43px;
}

header li.social svg {
    fill: white;
}

/* HOME */

.home {
    background-image: url(images/hero.webp);
    background-repeat: no-repeat;
}

/* HERO */

section.hero {
    padding: 0;
    min-height: 400px;
    overflow: initial;
}

.hero .wp-block-media-text {
    grid-template-columns: 40% 1fr;
    gap: 70px;
    position: absolute;
    left: 50%;
    top: 0;
    padding: 30px 60px;
    opacity: 0;
    z-index: -1;
    transition: opacity 1s;
    max-width: 1280px;
    transform: translate(-50%);
    width: 100%;
}

.hero .wp-block-media-text__media {
    position: relative;
}

.hero .wp-block-media-text__media:before {
    content: '';
    background-image: url(images/swirl-2.webp);
    background-position: center 0;
    background-repeat: no-repeat;
    width: 100vw;
    height: 617px;
    position: absolute;
    bottom: -180px;
    left: 0;
    transform: translateX(calc((100vw - 1160px) / -2));
}

.hero .wp-block-media-text__media img {
    position: relative;
}

.hero .dots {
    position: absolute;
    left: 0;
    bottom: -60px;
    width: 100%;
    height: 10px;
    display: flex;
    gap: 10px;
    justify-content: center;
    z-index: 1;
}

.hero .dots span {
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 100%;
    cursor: pointer;
    transition: all .3s;
}

.hero .dots span:hover,
.hero .dots span.active {
    background-color: var(--cyan);
}

.hero .dots span.active {
    animation: dot 10s linear;
}

.hero .wp-block-media-text.active {
    opacity: 1;
    z-index: 1;
}

.hero .wp-block-button__link {
    background-color: white;
    color: var(--orange);
}

.hero .wp-block-button__link:hover {
    background-color: var(--orange);
    color: white;
}

/* SEGMENTS */

.segments {
    color: white;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 140px;
}

.segments > .wp-block-group__inner-container {
    padding: 0;
    border-radius: 5px;
    max-width: 1280px;
}

.segments h6 {
    opacity: 1;
}

.segments h6:before {
    background-color: white;
    opacity: 1;
}

.segments .is-layout-grid {
    margin: 40px -140px;
    gap: 40px;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    user-select: none;
}

.segments .is-layout-grid::-webkit-scrollbar {
    display: none;
}

.segments .is-layout-grid > div {
    padding: 20px 20px 25px;
    border-radius: 5px;
    overflow: hidden;
    min-width: 268px;
}

.segments .is-layout-grid > div figure {
    margin: -20px -20px 20px;
    pointer-events: none;
}

.segments .is-layout-grid > div figure img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.segments .is-layout-grid > div h3 {
    color: var(--orange);
    text-transform: uppercase;
    font-family: "Lexend Mega", sans-serif;
    font-size: 15px;
    line-height: 1em;
    margin-bottom: 20px;
}

.segments .is-layout-grid > div p {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 20px;
    pointer-events: none;
}

.segments .is-layout-grid > div .wp-block-button__link {
    padding: 10px 15px;
    font-size: 12px;
}

/* FEATURES */

.features .wp-block-columns {
    gap: 100px;
}

.features .is-layout-grid {
    gap: 70px 100px;
    counter-reset: feature-counter;
}

.features .is-layout-grid > div {
    border-left: 1px solid;
    padding: 0 30px;
}

.features .is-layout-grid > div:before {
    counter-increment: feature-counter;
    content: counter(feature-counter, decimal-leading-zero);
    font-family: "Lexend Mega", sans-serif;
    font-size: 10px;
    line-height: 1em;
}

.features .is-layout-grid > div h3 {
    margin-bottom: 10px;
}

.features .is-layout-grid > div p {
    margin: 0;
    font-size: 14px;
    line-height: 18px;
}

/* BANNER */

.home .banner {
    margin-bottom: 0;
}

section.banner {
    overflow: initial;
    padding-bottom: 20px;
    margin-top: 60px;
}

.banner .wp-block-cover__inner-container {
    display: flex;
    flex-wrap: wrap;
    gap: 100px;
}

.banner .wp-block-cover__inner-container:before {
    content: url(images/sparkly.webp);
    position: absolute;
    top: -160px;
    left: 300px;
}

.banner .wp-block-cover__inner-container:after {
    content: url(images/sparkly-blur.webp);
    order: 1;
    top: -50px;
    position: relative;
}

.banner .wp-block-cover__inner-container > div {
    order: 2;
}

.banner .wp-block-group__inner-container {
    max-width: 600px;
}

.banner h2 {
    font-size: 48px;
    line-height: 50px;
}

.banner .wp-block-button__link {
    font-size: 16px;
    padding: 15px 20px;
}

/* LATEST BLOGS */

.latest-blogs .wp-block-columns {
    gap: 100px;
}

.latest-blogs .wp-block-button__link:hover {
    background-color: black;
}

.latest-blogs .is-layout-grid {
    gap: 40px;
}

.latest-blogs .is-layout-grid > div {
    position: relative;
}

.latest-blogs .is-layout-grid > div figure {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: hidden;
}

.latest-blogs .is-layout-grid > div figure img {
    width: 100%;
    height: 210px;
    object-fit: cover;
}

.latest-blogs .is-layout-grid > div .wp-block-group {
    padding: 20px 20px 25px;
    position: relative;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.latest-blogs .taxonomy-blog-category,
.blogs .taxonomy-blog-category,
.related-blogs span {
    position: absolute;
    top: -20px;
    left: 0;
    padding: 5px 20px 5px 10px;
    border-top-right-radius: 5px;
}

.latest-blogs .taxonomy-blog-category a,
.blogs .taxonomy-blog-category a,
.related-blogs span {
    text-transform: uppercase;
    font-family: "Lexend Mega", sans-serif;
    font-size: 10px;
    line-height: 1;
    display: block;
}

.latest-blogs .is-layout-grid > div h3 {
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

.latest-blogs .wp-block-read-more {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.latest-blogs .is-layout-grid > div:nth-child(1):before,
.latest-blogs .is-layout-grid > div:nth-child(4):before {
    content: '';
    border: 1px solid;
    border-radius: 5px;
    position: absolute;
    left: -30px;
    top: -30px;
    width: 100%;
    height: 100%;
    opacity: .3;
}

.latest-blogs .is-layout-grid > div:nth-child(4):before {
    top: initial;
    left: initial;
    right: -30px;
    bottom: -30px;
}

.latest-blogs .is-layout-grid > div:nth-child(2) {
    margin-right: 50px;
    margin-top: 50px;
}

.latest-blogs .is-layout-grid > div:nth-child(2) figure img,
.latest-blogs .is-layout-grid > div:nth-child(3) figure img {
    height: 160px;
}

.latest-blogs .is-layout-grid > div:nth-child(3) {
    margin-left: 50px;
}

.latest-blogs li:hover h3 {
    color: var(--cyan);
}

/* BLOGS */

section.blogs {
    padding-bottom: 200px;
}

.blogs .tag {
    display: flex;
    justify-content: center;
    margin-top: -30px;
}

.blogs .tag span {
    background-color: black !important;
    color: var(--cyan) !important;
}

.blogs .is-layout-grid {
    gap: 80px;
    margin-top: 80px;
}

.blogs .is-layout-grid > li,
.related-blogs li {
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.blogs .is-layout-grid > li:nth-child(1n) {
    margin-bottom: -80px;
}

.blogs .is-layout-grid > li:nth-child(2n) {
    margin-top: 80px;
}

.blogs .is-layout-grid > li figure img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.blogs .is-layout-grid > li .wp-block-group,
.related-blogs li div {
    padding: 30px;
    position: relative;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.blogs .is-layout-grid > li h3 {
    font-size: 32px;
    line-height: 36px;
}

.blogs .is-layout-grid > li p {
    font-size: 16px;
    line-height: 22px;
}

.blogs .is-layout-grid > li .wp-block-post-excerpt__more-link {
    background-color: var(--dark-gray);
    display: inline-block;
    margin-top: 30px;
    padding: 10px 15px;
    font-size: 12px;
}

.blogs .is-layout-grid > li .social {
    position: absolute;
    right: 30px;
    bottom: 22px;
    z-index: 2;
}

.blogs .is-layout-grid > li .social a {
    line-height: 0;
}

.blogs .is-layout-grid > li .social ul {
    display: flex;
    gap: 10px;
    width: 0;
    overflow: hidden;
    transition: width 1s;
    position: absolute;
    right: 30px;
}

.blogs .is-layout-grid > li .social i {
    background-color: var(--dark-gray) !important;
}

.blogs .is-layout-grid > li .social i:hover {
    background-color: var(--orange) !important;
}

.blogs .is-layout-grid > li .social.active ul {
    width: 130px;
}

.blogs .is-layout-grid > li .social > a:hover img {
    filter: invert(52%) sepia(94%) saturate(3260%) hue-rotate(349deg) brightness(99%) contrast(92%);
}

.blogs .is-layout-grid > li:hover h3 {
    color: var(--cyan);
}

.blogs .is-layout-grid > li:hover .wp-block-post-excerpt__excerpt {
    opacity: .7;
}

.blogs .is-layout-grid > li:hover .wp-block-post-excerpt__more-link {
    background-color: var(--cyan);
}

.blogs .cta {
    align-self: end;
    overflow: initial !important;
}

.blogs .is-layout-grid > .cta h3 {
    font-size: 70px;
    line-height: 1;
    font-weight: 900;
    color: white !important;
    margin-bottom: -8px;
    text-shadow: 
        -1px -1px 0 black,
         1px -1px 0 black,
        -1px  1px 0 black,
         1px  1px 0 black;
}

.blogs .is-layout-grid > .cta div {
    display: flex;
    gap: 40px;
}

.blogs .wp-block-social-links {
    flex-direction: column;
    justify-content: end;
}

/* BLOG - single */

.single-blog:before {
    top: 250px !important;
    z-index: initial !important;
}

.single-blog .post {
    overflow: initial;
}

.single-blog .post > div > h2 {
    text-align: center;
    font-weight: 900;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}

.single-blog .post > div > .excerpt {
    max-width: 800px;
    margin: 0 auto 60px;
    text-align: center;
}

.single-blog article h2 {
    font-weight: 900;
}

.single-blog .post .thumbnail {
    margin-bottom: 40px;
    border-radius: 5px;
    width: 100%;
    height: 480px;
    object-fit: cover;
}

.single-blog .post .content {
    display: grid;
    grid-template-columns: 20px 1fr 1fr;
    column-gap: 40px;
    max-width: 860px;
    margin: 0 auto;
}

.single-blog .post .share {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    position: sticky;
    top: 0;
    padding-top: 30px;
    margin-top: -30px;
    height: fit-content;
}

.single-blog .post .share p {
    margin-bottom: 20px;
}

.single-blog .post .share p,
.single-blog .post .tags p,
.single-blog .post .author p {
    writing-mode: sideways-lr;
    text-transform: uppercase;
    font-family: "Lexend Mega", sans-serif;
    font-size: 12px;
    line-height: 26px;
    opacity: .5;
}

.single-blog .post .share p:after {
    content: '';
    width: 1px;
    height: 80px;
    background-color: black;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
}

.single-blog .post .share i,
.blogs .is-layout-grid > li .social i {
    background-color: rgba(0, 0, 0, .5);
    padding: 5px;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    transition: background .3s;
    width: 14px;
    text-align: center;
}

.single-blog .post .share .fa-x-twitter{
    font-size: 12px;
}

.single-blog .post .share i:hover {
    background-color: black;
}

.single-blog .post article {
    grid-column: 2 / span 2;
}

.single-blog .post .author {
    grid-column: 2;
    display: flex;
    gap: 10px;
}

.single-blog .post .author img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
}

.single-blog .post .author h3 {
    text-transform: uppercase;
    font-family: "Lexend Mega", sans-serif;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}

.single-blog .post .tags {
    grid-column: 3;
}

.single-blog .post .tags p,
.single-blog .post .author p {
    writing-mode: horizontal-tb;
    display: flex;
    gap: 10px;
    margin: 0;
    align-items: center;
    margin-bottom: 15px;
    font-size: 10px;
    line-height: 1;
}

.single-blog .post .tags p:before,
.single-blog .post .author p:before {
    content: '';
    width: 30px;
    height: 1px;
    background-color: black;
}

.single-blog .post .tags ul {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.single-blog .post .tags a,
.blogs .tag span {
    background-color: var(--cyan);
    color: var(--dark-gray);
    text-transform: uppercase;
    font-size: 12px;
    line-height: 26px;
    font-family: "Lexend Mega", sans-serif;
    font-weight: 700;
    border-radius: 20px;
    padding: 0 15px;
}

.single-blog .post .tags a:hover {
    background-color: black;
    color: var(--cyan);
}

/* BLOG - related */

.related-blogs {
    padding: 0;
}

.related-blogs h2 {
    font-family: "Lexend Mega", sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 24px;
    line-height: 28px;
}

.related-blogs ul {
    display: flex;
    gap: 40px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100vw;
    margin-left: calc((1280px - 100vw) / 2);
    padding-left: calc((100vw - 1280px) / 2);
    user-select: none;
    padding-right: 980px;
}

.related-blogs li {
    max-width: 325px;
    min-width: 325px;
    transition: filter 160ms linear;
    will-change: filter;
}

.related-blogs li img {
    width: 100%;
    height: 163px;
    object-fit: cover;
}

.related-blogs li a {
    display: block;
}

.related-blogs li div {
    background-color: black;
    color: white;
    padding: 20px;
}

.related-blogs li span {
    background-color: var(--orange);
}

.related-blogs li h3 {
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    font-weight: 700;
}

.related-blogs li:hover h3 {
    color: var(--cyan);
}

/* SOCIAL */

.wp-social-link {
    color: white;
    background: black;
    border-radius: 5px;
}

.wp-social-link:hover {
    background-color: var(--orange);
}

/* RESOURCES - hero */

section.resources-hero {
    counter-reset: resources-counter;
}

.resources-hero .is-layout-flow:before {
    content: '';
    background-image: url(images/brain.webp);
    background-size: 923px;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 919px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%);
    z-index: 1;
}

.resources-hero h2 {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.resources-hero p {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

.resources-hero .is-layout-grid {
    grid-template-columns: repeat(2, 300px);
    justify-content: space-between;
    gap: 170px;
    padding: 20px 70px 100px;
    z-index: 2;
    position: relative;
}

.resources-hero .is-layout-grid > div {
    padding: 20px;
    border-radius: 5px;
}

.resources-hero .is-layout-grid > div > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.resources-hero .is-layout-grid .wp-block-image {
    flex: 1;
    max-width: 30%;
    margin: 0;
}

.resources-hero .is-layout-grid h3 {
    font-family: "Lexend Mega", sans-serif;
    font-weight: 700;
    flex: 1;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 20px;
    margin: 0;
    text-align: right;
}

.resources-hero .is-layout-grid h3:before {
    counter-increment: resources-counter;
    content: counter(resources-counter, decimal-leading-zero);
    display: block;
    color: var(--orange);
    font-size: 10px;
    line-height: 16px;
    font-weight: 400;
}

.resources-hero .is-layout-grid p {
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    text-align: right;
}

.resources-hero .is-layout-grid > div:nth-child(2) h3,
.resources-hero .is-layout-grid > div:nth-child(4) h3 {
    order: -1;
    text-align: left;
}

.resources-hero .is-layout-grid > div:nth-child(2) .wp-block-image,
.resources-hero .is-layout-grid > div:nth-child(4) .wp-block-image {
    text-align: right;
}

.resources-hero .is-layout-grid > div:nth-child(2) p,
.resources-hero .is-layout-grid > div:nth-child(4) p {
    text-align: left;
}

.resources-hero .wp-block-button__link:hover {
    background-color: black;
    color: white;
}

/* RESOURCES */

.resources {
    padding-top: 0;
}

.resources:before,
.single-blog:before {
    content: '';
    background-image: url(images/swirl.webp);
    background-size: 1920px;
    background-repeat: no-repeat;
    background-position: center;
    height: 617px;
    width: 100%;
    position: absolute;
    top: 100px;
    z-index: 1;
}

.resources > div {
    display: grid;
    grid-template-columns: 360px 360px auto;
}

.resources .wp-block-media-text {
    grid-template-columns: 360px auto;
    border-radius: 5px;
    overflow: hidden;
}

.resources .wp-block-media-text__content {
    padding: 35px;
}

.resources h2 {
    font-weight: 900;
    font-size: 36px;
    line-height: 36px;
}

.resources h3 {
    font-family: "Lexend Mega", sans-serif;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    margin-bottom: 10px;
}

.resources p {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 20px;
}

.resources .wp-block-media-text:nth-child(1) {
    grid-column: 1 / span 3;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.resources .wp-block-media-text:nth-child(3) {
    grid-column: 2 / span 2;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.resources .wp-block-media-text__media iframe {
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.resources .wp-block-image img {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ABOUT */

.about h2 {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* ABOUT - mission */

section.mission {
    margin-top: -100px;
}

.mission .wp-block-cover__inner-container {
    display: grid;
    grid-template-columns: 50% 25% 25%;
}

.mission .wp-block-group {
    padding: 30px;
    border-radius: 5px;
}

.mission h3 {
    font-family: "Lexend Mega", sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 24px;
    font-weight: 200;
    margin-bottom: 10px;
}

.mission p {
    margin: 0;
}

.mission .wp-block-group:nth-child(1) {
    grid-column: 2;
}

.mission .wp-block-group:nth-child(2) {
    grid-column: 3;
    grid-row: 2;
}

/* CONTACT */

section.contact {
    margin-bottom: -60px;
    padding-bottom: 160px;
}

.contact p {
    max-width: 656px;
}

.contact .wp-block-columns {
    gap: 40px;
    max-width: 910px;
    margin: 50px auto 0;
}

.contact .wp-block-column:nth-child(1) {
    max-width: 500px;
}

.contact .wp-block-column:nth-child(2) {
    max-width: 370px;
}

.contact .wp-block-group .wp-block-group {
    border-radius:5px;
    padding: 20px;
    margin-bottom: 15px;
}

.contact .wp-block-media-text {
    grid-template-columns: 32px 1fr;
    gap: 10px;
}

.contact .wp-block-media-text:not(:last-child) {
    margin-bottom: 20px;
}

.contact .wp-block-media-text__media img {
    width: auto;
}

.contact .wp-block-media-text__content {
    padding: 0;
}

.contact .wp-block-media-text__content p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
}

.contact .wp-block-media-text__content p strong {
    font-size: 16px;
}

.contact iframe {
    width: 100%;
    height: 220px;
    border-radius: 5px;
}

.contact input[type=text],
.contact input[type=email],
.contact textarea {
    background-color: rgba(255, 255, 255, .7);
    border: none;
    border-radius: 5px;
    padding: 12px 15px;
    font-family: "Epilogue", sans-serif;
    font-size: 14px;
    line-height: 26px;
    display: block;
    width: calc(100% - 30px);
    margin-bottom: 20px;
}

.contact textarea {
    height: 220px;
}

.contact button {
    background-color: black;
    color: white;
    font-size: 16px;
    margin-top: 30px;
}

.contact button:hover {
    background-color: var(--orange);
}

.contact p.output {
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: black;
    color: white;
    width: calc(100% - 31px);
    margin: 0;
    z-index: 1;
    padding: 15px;
    text-align: center;
    border-top-right-radius: 5px;
    border-left: 1px solid var(--orange);
}

/* HOW IT WORKS */

section.how-it-works {
    margin-bottom: -60px;
    padding-bottom: 160px;
}

.how-it-works .wp-block-cover__image-background,
.contact .wp-block-cover__image-background {
    object-position: center 100px;
}

.how-it-works h2 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.how-it-works .wp-block-cover__inner-container > h3 {
    font-family: "Lexend Mega", sans-serif;
}

.how-it-works .wp-block-cover__inner-container > h3:before,
.how-it-works .wp-block-cover__inner-container > h3:after {
    content: '';
    width: 60px;
    height: 1px;
    background-color: white;
    display: inline-block;
    vertical-align: middle;
    margin: 0 15px;
}

.how-it-works .is-layout-grid {
    display: flex;
    gap: 40px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    counter-reset: how-it-works-counter;
    margin-top: 60px;
    width: 100vw;
    margin-left: calc((1280px - 100vw) / 2);
    padding-left: calc((100vw - 1280px) / 2);
    user-select: none;
    padding-right: 700px;
    cursor: grab;
}

.how-it-works .is-layout-grid::-webkit-scrollbar {
    display: none;
}

.how-it-works .is-layout-grid figure {
    pointer-events: none;
}

.how-it-works .is-layout-grid > div {
    min-width: 600px;
    border-radius: 5px;
    overflow: hidden;
    transition: filter 160ms linear;
    will-change: filter;
}

.how-it-works .is-layout-grid .wp-block-media-text__content {
    padding: 20px;
    align-self: start;
}

.how-it-works .is-layout-grid h3 {
    font-family: "Lexend Mega", sans-serif;
    text-transform: uppercase;
    font-weight: 200;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.how-it-works .is-layout-grid h3:before {
    content: '';
    width: 30px;
    height: 1px;
    background-color: white;
    opacity: .5;
    order: -2;
}

.how-it-works .is-layout-grid h3:after {
    counter-increment: how-it-works-counter;
    content: counter(how-it-works-counter, decimal-leading-zero);
    font-size: 10px;
    line-height: 1;
    color: white;
    opacity: .5;
    order: -1;
}

.how-it-works .is-layout-grid p {
    margin: 0;
}

/* SOLUTIONS */

section.solutions {
    margin-bottom: -60px;
    padding-bottom: 160px;
}

.solutions:before,
.blogs:before {
    content: '';
    background-image: url(images/swirl-3.webp);
    background-position: center 0;
    background-repeat: no-repeat;
    width: 100%;
    height: 472px;
    position: absolute;
    top: 220px;
    left: 0;
    z-index: 1;
}

.solutions:after {
    content: '';
    width: 100%;
    height: 1700px;
    background-image: url(images/solutions.webp);
    background-position: center bottom;
    background-repeat: no-repeat;
    position: absolute;
    z-index: -1;
    bottom: -600px;
}

.solutions .wp-block-cover__image-background,
.blogs .wp-block-cover__image-background {
    z-index: -2;
    object-position: center top;
}

.solutions .is-layout-grid {
    gap: 80px;
    margin-top: 80px;
}

.solutions .is-layout-grid > li {
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.solutions .is-layout-grid > li:nth-child(1),
.blogs .is-layout-grid > li:nth-child(1) {
    z-index: 2;
}

.solutions .is-layout-grid > li:nth-child(1n) {
    margin-bottom: -80px;
}

.solutions .is-layout-grid > li:nth-child(2n) {
    margin-top: 80px;
}

.solutions .is-layout-grid > li .wp-block-post-featured-image img,
.solutions .is-layout-grid > li figure iframe {
    width: 100%;
    height: 300px;
    object-fit: cover;
    pointer-events: none;
}

.solutions .is-layout-grid > li .wp-block-group {
    padding: 30px 30px 20px;
    position: relative;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.solutions .is-layout-grid > li h3 {
    font-size: 40px;
    line-height: 40px;
}

.solutions .is-layout-grid > li p {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 25px;
}

.solutions .is-layout-grid .wp-block-columns {
    gap: 40px;
}

.solutions .is-layout-grid .wp-block-columns p {
    margin-bottom: 15px;
    border-left: 1px solid var(--orange);
    padding-left: 15px;
}

.solutions .cta {
    align-self: end;
    overflow: initial !important;
}

.solutions .is-layout-grid > .cta .wp-block-group {
    transform: rotate(-1.88deg);
    border-radius: 5px;
    margin-top: 60px;
    padding-bottom: 40px;
    padding-right: 50px;
}

.solutions .is-layout-grid > .cta .wp-block-group:before {
    content: url(images/hand.webp);
    position: absolute;
    right: -350px;
    bottom: 0;
}

.solutions .is-layout-grid > .cta .wp-block-group p {
    font-size: 18px;
    line-height: 26px;
}

/* PRODUCTS - docs */

.docs .wp-block-cover__image-background {
    object-position: 0 0;
}

.docs h2 {
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
}

.docs .wp-block-media-text.has-black-background-color {
    max-width: 724px;
    margin-left: auto;
    border-radius: 5px;
    grid-template-columns: 1fr 270px;
    position: relative;
    margin-top: 60px;
    margin-bottom: 200px;
}

.docs .wp-block-media-text.has-black-background-color:before {
    content: '';
    background-image: url(images/docs-3.webp);
    background-size: 100%;
    position: absolute;
    bottom: 125px;
    left: -500px;
    transform: rotate(15deg);
    opacity: .4;
    z-index: 1;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
    border-radius: 5px;
    background-color: white;
    width: 280px;
    height: 220px;
}

.docs .wp-block-media-text.has-black-background-color:after {
    content: '';
    background-image: url(images/docs-2.webp);
    background-size: 100%;
    position: absolute;
    bottom: -140px;
    left: -360px;
    transform: rotate(-15deg);
    opacity: .8;
    z-index: 2;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
    border-radius: 5px;
    background-color: white;
    width: 390px;
    height: 360px;
}

.docs .wp-block-media-text.has-black-background-color > .wp-block-media-text__content {
    padding: 30px 30px 100px;
    z-index: 3;
    background-color: black;
    border-top-left-radius: 5px;
}

.docs .wp-block-media-text.has-black-background-color > .wp-block-media-text__content:after {
    content: '';
    background-image: url(images/docs-1.webp);
    background-size: 100%;
    position: absolute;
    left: -50px;
    top: calc(100% - 100px);
    z-index: 4;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
    border-radius: 5px;
    background-color: white;
    width: 620px;
    height: 330px;
}

.docs .wp-block-media-text.has-black-background-color > .wp-block-media-text__media:before {
    content: url(images/sparkly-2.webp);
    position: absolute;
    right: 40px;
    top: -60px;
    z-index: 1;
}

.docs .wp-block-media-text.has-black-background-color > .wp-block-media-text__media > img {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.docs .wp-block-media-text .wp-block-media-text {
    grid-template-columns: 36px 1fr;
    gap: 20px;
}

.docs .wp-block-media-text .wp-block-media-text .wp-block-media-text__content {
    padding: 0;
}

.docs .wp-block-media-text h3 {
    font-family: "Lexend Mega", sans-serif;
    font-weight: 200;
    font-size: 20px;
    line-height: 24px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.docs .wp-block-media-text p {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 30px;
}

/* PRODUCTS - benefits */

.benefits .wp-block-media-text {
    overflow: initial;
    max-width: 900px;
    margin-left: auto;
    grid-template-columns: 300px 1fr;
    position: relative;
    border-radius: 5px;
}

.benefits .wp-block-media-text:before {
    content: '';
    background-image: url(images/benefits.webp);
    background-size: 100%;
    position: absolute;
    z-index: 3;
    left: -280px;
    bottom: 38px;
    width: 430px;
    height: 567px;
}

.benefits .wp-block-media-text:after {
    content: '';
    width: calc(100% + 210px);
    height: 100%;
    border: 1px solid var(--cyan);
    border-radius: 5px;
    position: absolute;
    top: -40px;
    left: -250px;
    z-index: 1;
}

.benefits .wp-block-media-text__media {
    margin-top: -160px;
    border-radius: 5px;
    overflow: hidden;
    z-index: 2;
}

.benefits .wp-block-media-text__content {
    padding: 40px 80px 80px 40px;
    z-index: 2;
}

.benefits .wp-block-media-text h3 {
    font-family: "Lexend Mega", sans-serif;
    font-weight: 200;
    font-size: 20px;
    line-height: 24px;
    text-transform: uppercase;
}

.benefits .wp-block-columns {
    margin-bottom: 10px;
    gap: 60px;
}

.benefits .wp-block-columns p {
    margin-bottom: 15px;
}

/* FAQ */

.faq {
    display: flex;
    gap: 10px 60px;
    flex-wrap: wrap;
    flex: 1;
    margin-bottom: 40px !important;
    margin-top: 0 !important;
}

.faq,
.faq ul {
    list-style: none;
    padding: 0 !important;
    margin-left: 0 !important;
}

.faq > li {
    position: relative;
    border-bottom: 2px solid var(--gray);
    cursor: pointer;
    text-align: left;
    font-size: 24px;
    font-weight: 700;
    padding: 0 30px 15px 0;
    flex: 1;
    min-width: calc(100% - 30px);
    list-style: none;
}

.faq > li:before {
    content: '\2b';
    font-family: 'Font Awesome 6 Free';
    font-size: 18px;
    position: absolute;
    top: 4px;
    right: 0;
    color: var(--blue);
    transition: transform linear 0.3s;
}

.faq > li.active,
.faq > li:hover {
    color: var(--orange);
}

.faq > li.active:before {
    transform: rotate(45deg);
}

.faq > li ul {
    margin-top: 15px !important;
}

.faq > li.active ul li {
    color: initial;
}

.faq > li:not(.active) ul {
    display: none;
}

.faq > li ul li {
    font-size: 20px;
    font-weight: 400;
    cursor: initial;
    padding: 0;
}

/* FOOTER */

footer {
    padding: 100px 0;
    font-size: 14px;
    line-height: 20px;
    background-image: url(images/footer.webp);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
}

footer .wp-block-columns {
    align-items: start !important;
}

footer .wp-block-column {
    border-left: 1px solid rgba(0,0,0,.3);
    padding-left: 20px;
}

footer .wp-block-column:first-child {
    border: none;
    padding-left: 0;
}

footer .wp-block-site-logo {
    margin-bottom: 20px;
}

footer .wp-block-column:nth-child(1) p,
footer .wp-block-column:nth-child(1) .wp-block-button {
    margin-left: 18px;
}

footer p {
    margin-bottom: 20px;
}

footer .wp-block-button .wp-block-button__link {
    font-size: 12px;
    padding: 10px 15px;
}

footer .wp-block-list {
    padding: 0;
    list-style: none;
    margin: 0;
}

footer .wp-block-list li {
    padding: 5px 0;
}

footer .wp-block-list li:before {
    content: '>';
    color: var(--orange);
    font-weight: 900;
    font-size: 10px;
    margin-right: 5px;
    vertical-align: 2px;
}

footer .wp-block-list a {
    color: initial;
}

footer .wp-block-list a:hover {
    color: var(--orange);
}

footer .wp-block-social-links {
    margin-top: 15px;
}

footer .whatsapp-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    font-size: 35px;
    background-color: #25D366;
    color: white;
    border-radius: 100%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
}