@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;700&display=swap');

:root {
    --principal: #FF6714;
    --principal-hover: #c45012;
    --secundaria: #1b1b1b;
    --black: #000000;
    --background: #0f0f0f;
    --white: #FFFFFF;
    --el-box-shadow: 2px 4px 20px 1px rgba(45, 45, 45, 0.13);
}

* {
    margin: 0;
    padding: 0;
}

/***********************************
    PERSONALIZAÇÃO SCROLLBAR
************************************/
::-webkit-scrollbar-track {
    background: var(--secundaria);
}

::-webkit-scrollbar {
    width: 7px;
    background: #000000;
}

::-webkit-scrollbar-thumb {
    background: var(--principal);
    border-radius: 20px;
}

/***********************************
                GERAL
************************************/
h1,
h2,
h3 {
    color: var(--principal);
}

body {
    font-family: 'Jost', sans-serif;
    /* overflow-x: hidden; */
    overflow-y: hidden;
    background-color: var(--background) !important;
    background-color: #201c1e;
    color: var(--white);
    font-size: 16px;
}

.btn-contato {
    position: relative;
    display: inline-block;
    padding: 1rem 2rem;
    border: 2px solid var(--principal);
    border-radius: .5rem;
    background-color: transparent;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 2px;
    color: var(--white);
    -webkit-box-reflect: below 0px linear-gradient(transparent, #0002);
    transition: .5s;
    transition-delay: 0s;
}

.btn-contato:hover {
    transition-delay: 1.5s;
    color: var(--secundaria);
    background-color: transparent;
    border: 2px solid var(--principal);
    box-shadow: 0 0 10px var(--principal),
        0 0 10px var(--principal),
        0 0 20px var(--principal),
        0 0 40px var(--principal),
        0 0 80px var(--principal);
}

.btn-contato span {
    position: relative;
    z-index: 100;
}

.btn-contato:nth-child(2) {
    filter: hue-rotate(80deg);
}

.btn-contato::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 2px;
    border-radius: .5rem;
    background-color: var(--principal);
    box-shadow: 5px -8px 0 var(--principal),
        5px 8px 0 var(--principal);
    transition: width .5s, left .5s, height .5s, box-shadow .5s;
    transition-delay: 1s, 0.5s, 0s, 0s;
}

.btn-contato:hover::before {
    width: 60%;
    height: 100%;
    left: -2px;
    box-shadow: 5px 0 0 var(--principal),
        5px 0 0 var(--principal);
    transition-delay: 0s, 0.5s, 1s, 1s;
}

.btn-contato::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 2px;
    border-radius: .5rem;
    background-color: var(--principal);
    box-shadow: -5px -8px 0 var(--principal),
        -5px 8px 0 var(--principal);
    transition: width .5s, right .5s, height .5s, box-shadow .5s;
    transition-delay: 1s, 0.5s, 0s, 0s;
}

.btn-contato:hover::after {
    width: 60%;
    height: 100%;
    right: -2px;
    box-shadow: -5px 0 0 var(--principal),
        -5px 0 0 var(--principal);
    transition-delay: 0s, 0.5s, 1s, 1s;
}

#counter,
#servicos,
#beneficios-mkt,
#beneficios-dev,
#principios,
#processos,
#faq {
    padding-top: 160px;
    padding-bottom: 160px;
}

.main {
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    opacity: 1;
    box-shadow: var(--el-box-shadow);
}

section h2 {
    padding-bottom: 3rem;
}

/***********************************
            NAVEGAÇÃO
************************************/

.navbar {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    width: 100%;
}

.nav-link {
    color: var(--white);
}

.nav-link.active,
.nav-link:hover {
    color: var(--principal) !important;
}

.nav-item a i {
    font-size: 1.5rem;
}

/***********************************
                INTRO
************************************/
#intro {
    height: 100vh;
    width: 100vw;
    position: fixed;
    background-color: var(--black);
    top: 0;
    z-index: 1031;
}

.intro-icon {
    width: .1%;
}

#intro hr {
    margin: 0;
    width: 0;
    position: relative;
    top: 50%;
    opacity: 1;
    border: 0;
    border-top: 5px solid var(--principal);
}

/***********************************
                HERO
************************************/
#hero {
    position: relative;
    background: linear-gradient(#000000DD, #000000AA), url("../img/hero.jpg") center no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 88px;
}

#hero h1 span,
#hero h2 span {
    color: var(--principal);
}

.servicos-hero {
    font-size: 2rem;
}

.servicos-hero span {
    color: var(--principal);
    font-weight: 700;
}

#particles-js {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
}

.anim-hero {
    opacity: 0;
}

/***********************************
            ABOUT
************************************/
#about {
    padding: 4rem 0;
    margin: 80px 80px;
    background-color: var(--secundaria);
    border-radius: 2rem;
    box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.9);
    z-index: 2;
}

#about h2 {
    padding-bottom: 4rem;
}

#about h5 {
    padding-top: 4rem;
}

#about h2 span,
#about h5 span {
    color: var(--principal);
}

/***********************************
            METODO
************************************/
#metodo {
    padding: 4rem 0;
    margin: 80px 80px;
    /* background-color: var(--secundaria); */
    border-radius: 2rem;
    box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.9);
    z-index: 2;
}

#metodo h2 {
    padding-bottom: 4rem;
}

#metodo h5 {
    padding-top: 4rem;
}

#metodo h2 span,
#metodo h5 span {
    color: var(--principal);
}

/***********************************
            COUNTERS
************************************/
#counter {
    background-color: var(--secundaria);
    border-radius: 2rem;
    margin: 0 80px;
    margin-top: -9rem;
    z-index: 1;
}

#counter .card {
    transform-style: preserve-3d;
    padding: 2rem 2rem;
    color: var(--white);
    text-align: center;
    background-color: var(--secundaria);
    border-radius: 2rem;
    border: 2px solid rgba(150, 150, 150, 0.1);
    border-bottom: 10px solid var(--principal);
    box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.9);
    transition: all 0.5s;
}

#counter .card:hover {
    border: 2px solid rgba(150, 150, 150, 0.1);
}

#counter .card .card-body {
    transform-style: preserve-3d;
}

#counter .card i {
    transform-style: preserve-3d;
    transform: translate3d(0, 0, 0px);
    color: var(--principal);
    font-size: 2.5em;
    text-align: center;
}

#counter .card:hover i {
    text-shadow: -5px 10px 20px rgba(0, 0, 0, 0.5);
    transform: translate3d(0px, 0px, 80px);
}

#counter .card p {
    color: var(--white);
    font-weight: 600;
    font-size: 1.5rem;
    transform-style: preserve-3d;
}

#counter .card:hover p {
    text-shadow: -5px 10px 20px rgba(0, 0, 0, 0.2);
    transform: translate3d(0px, 0px, 100px);
}

#counter .card h5 {
    text-shadow: -5px 10px 20px rgba(0, 0, 0, 0.5);
    transform-style: preserve-3d;
}

#counter .card:hover h5 {
    transform: translate3d(0px, 0px, 50px);
}

/***********************************
            SERVIÇOS
************************************/
#servicos h2 {
    letter-spacing: .6rem;
}

.service-item+.service-item {
    border-top: 1px solid #ccc;
    padding-top: 2rem;
}

.service-number {
    padding-right: 6rem;
    align-items: end;
}

.service-text h3 {
    font-size: 3rem;
}

.service-text span {
    color: var(--principal);
}

/***********************************
            BENEFÍCIOS MKT
************************************/
.grid-vantagens {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-auto-columns: 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    transform-style: preserve-3d;
    perspective: 2500px;
    transition: all 0.5s;
}

.grid-vantagens div:nth-child(1),
.grid-vantagens div:nth-child(5),
.grid-vantagens div:nth-child(7),
.grid-vantagens div:nth-child(10) {
    grid-column: span 2;
    grid-row: span 1;
}

.grid-vantagens div:nth-child(2),
.grid-vantagens div:nth-child(4),
.grid-vantagens div:nth-child(8),
.grid-vantagens div:nth-child(9) {
    grid-column: span 1;
    grid-row: span 1;
}

.grid-vantagens div:nth-child(3),
.grid-vantagens div:nth-child(6) {
    grid-column: span 1;
    grid-row: span 2;
}

#beneficios-mkt .grid-vantagens .grid-item img:first-child {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: inherit;
}

#beneficios-mkt .grid-vantagens .grid-item:hover img:first-child {
    filter: grayscale(1) blur(5px);
}

#beneficios-mkt .grid-vantagens .grid-item *:not(img:first-child) {
    position: relative;
    z-index: 1;
}

#beneficios-mkt .grid-item {
    background-color: var(--secundaria);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    border-radius: 1rem;
    min-height: 200px;
    transition: all .5s ease;
    transform-style: preserve-3d;
}

#beneficios-mkt .grid-item:hover {
    transform: perspective(900px) translateY(-10%) rotateX(10deg) translateZ(0);
    box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
    z-index: 5;
    filter: none;
}

#beneficios-mkt .grid-item .img-hover {
    width: 20%;
    transition: all 0.5s;
    position: absolute;
    bottom: 0;
    transform-style: preserve-3d;
    opacity: 0;
    z-index: 1;
}

#beneficios-mkt .grid-item h5:nth-child(2) {
    transform-style: preserve-3d;
    transform: translate3d(0, 0, 0px);
    text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
    transition: all 0.5s;
    opacity: 1;
    z-index: 99;
}

#beneficios-mkt .grid-item:hover h5:nth-child(2) {
    text-shadow: -5px 10px 20px rgba(0, 0, 0, 0.5);
    transform: rotateX(-25deg) translateZ(10px);
    transition: all 0.5s;
    opacity: 0;
}

#beneficios-mkt .grid-item h5:nth-child(3) {
    opacity: 0;
    transform-style: preserve-3d;
    transform: translate3d(0, 0, 0px);
    transition: all 0.5s;
    position: relative;
    z-index: 2;
}

#beneficios-mkt .grid-item:first-child .img-hover {
    width: 20%;
    transition: all 0.5s;
    position: absolute;
    bottom: 0;
    transform-style: preserve-3d;
    opacity: 0;
    z-index: 1;
}

#beneficios-mkt .grid-item:first-child:hover .img-hover {
    opacity: 1;
    transform: rotateX(-10deg) translate3d(15%, -8%, 100px);
}

#beneficios-mkt .grid-item:first-child:hover h5:nth-child(3) {
    text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
    transform: rotateX(-10deg) translate3d(0%, 600%, 150px);
    transition: all 0.5s;
    opacity: 1;
}

#beneficios-mkt .grid-item:nth-child(2) .img-hover {
    width: 60%;
    transition: all 0.5s;
    position: absolute;
    bottom: 0;
    transform-style: preserve-3d;
    opacity: 0;
    z-index: 1;
}

#beneficios-mkt .grid-item:nth-child(2):hover .img-hover {
    opacity: 1;
    transform: rotateX(-10deg) translate3d(-5%, -8%, 100px);
}

#beneficios-mkt .grid-item:nth-child(2):hover h5:nth-child(3) {
    text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
    transform: rotateX(-10deg) translate3d(0%, 300%, 150px);
    transition: all 0.5s;
    opacity: 1;
}

#beneficios-mkt .grid-item:nth-child(3) .img-hover {
    width: 40%;
    transition: all 0.5s;
    position: absolute;
    bottom: 0;
    transform-style: preserve-3d;
    opacity: 0;
    z-index: 1;
}

#beneficios-mkt .grid-item:nth-child(3):hover .img-hover {
    opacity: 1;
    transform: rotateX(-10deg) translate3d(-40%, -50%, 100px);
}

#beneficios-mkt .grid-item:nth-child(3):hover h5:nth-child(3) {
    text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
    transform: rotateX(-10deg) translate3d(-10%, 100%, 150px);
    transition: all 0.5s;
    opacity: 1;
}

#beneficios-mkt .grid-item:nth-child(4) .img-hover {
    width: 60%;
    transition: all 0.5s;
    position: absolute;
    bottom: 0;
    transform-style: preserve-3d;
    opacity: 0;
    z-index: 1;
}

#beneficios-mkt .grid-item:nth-child(4):hover .img-hover {
    opacity: 1;
    transform: rotateX(-10deg) translate3d(20%, -8%, 100px);
}

#beneficios-mkt .grid-item:nth-child(4):hover h5:nth-child(3) {
    text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
    transform: rotateX(-10deg) translate3d(10%, 100%, 150px);
    transition: all 0.5s;
    opacity: 1;
}

#beneficios-mkt .grid-item:nth-child(5) .img-hover {
    width: 10%;
    transition: all 0.5s;
    position: absolute;
    bottom: 0;
    transform-style: preserve-3d;
    opacity: 0;
    z-index: 1;
}

#beneficios-mkt .grid-item:nth-child(5):hover .img-hover {
    opacity: 1;
    transform: rotateX(-10deg) translate3d(-5%, -8%, 100px);
}

#beneficios-mkt .grid-item:nth-child(5):hover h5:nth-child(3) {
    text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
    transform: rotateX(-10deg) translate3d(0%, 500%, 150px);
    transition: all 0.5s;
    opacity: 1;
}

#beneficios-mkt .grid-item:nth-child(6) .img-hover {
    width: 50%;
    transition: all 0.5s;
    position: absolute;
    bottom: 0;
    transform-style: preserve-3d;
    opacity: 0;
    z-index: 1;
}

#beneficios-mkt .grid-item:nth-child(6):hover .img-hover {
    opacity: 1;
    transform: rotateX(-10deg) translate3d(15%, -8%, 100px);
}

#beneficios-mkt .grid-item:nth-child(6):hover h5:nth-child(3) {
    text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
    transform: rotateX(-10deg) translate3d(20%, 700%, 150px);
    transition: all 0.5s;
    opacity: 1;
}

#beneficios-mkt .grid-item:nth-child(7) .img-hover {
    width: 40%;
    transition: all 0.5s;
    position: absolute;
    bottom: 0;
    transform-style: preserve-3d;
    opacity: 0;
    z-index: 1;
}

#beneficios-mkt .grid-item:nth-child(7):hover .img-hover {
    opacity: 1;
    transform: rotateX(-10deg) translate3d(0%, -8%, 100px);
}

#beneficios-mkt .grid-item:nth-child(7):hover h5:nth-child(3) {
    text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
    transform: rotateX(-10deg) translate3d(0%, 250%, 150px);
    transition: all 0.5s;
    opacity: 1;
}

#beneficios-mkt .grid-item:nth-child(8) .img-hover {
    width: 40%;
    transition: all 0.5s;
    position: absolute;
    bottom: 0;
    transform-style: preserve-3d;
    opacity: 0;
    z-index: 1;
}

#beneficios-mkt .grid-item:nth-child(8):hover .img-hover {
    opacity: 1;
    transform: rotateX(-10deg) translate3d(-20%, -30%, 100px);
}

#beneficios-mkt .grid-item:nth-child(8):hover h5:nth-child(3) {
    text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
    transform: rotateX(-10deg) translate3d(-10%, 150%, 150px);
    transition: all 0.5s;
    opacity: 1;
}

#beneficios-mkt .grid-item:nth-child(9) .img-hover {
    width: 40%;
    transition: all 0.5s;
    position: absolute;
    bottom: 0;
    transform-style: preserve-3d;
    opacity: 0;
    z-index: 1;
}

#beneficios-mkt .grid-item:nth-child(9):hover .img-hover {
    opacity: 1;
    transform: rotateX(-10deg) translate3d(5%, -20%, 100px);
}

#beneficios-mkt .grid-item:nth-child(9):hover h5:nth-child(3) {
    text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
    transform: rotateX(-10deg) translate3d(5%, 100%, 150px);
    transition: all 0.5s;
    opacity: 1;
}

#beneficios-mkt .grid-item:nth-child(10) .img-hover {
    width: 60%;
    transition: all 0.5s;
    position: absolute;
    bottom: 0;
    transform-style: preserve-3d;
    opacity: 0;
    z-index: 1;
}

#beneficios-mkt .grid-item:nth-child(10):hover .img-hover {
    opacity: 1;
    transform: rotateX(-10deg) translate3d(0%, -20%, 100px);
}

#beneficios-mkt .grid-item:nth-child(10):hover h5:nth-child(3) {
    text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
    transform: rotateX(-10deg) translate3d(0%, 100%, 150px);
    transition: all 0.5s;
    opacity: 1;
}

#beneficios-mkt .grid-item:hover .img-hover {
    opacity: 1;
    transform: rotateX(-10deg) translate3d(-5%, -80%, 100px);
}

#beneficios-mkt .grid-item:hover h5:nth-child(3) {
    text-shadow: 0px 5px 5px rgba(0, 0, 0, 1);
    transform: rotateX(-10deg) translate3d(-20%, -50%, 150px);
    transition: all 0.5s;
    opacity: 1;
}

#beneficios-mkt .grid-item h5 {
    transform-style: preserve-3d;
}

#beneficios-mkt .grid-item:hover h4 {
    transition: transform .5s ease;
}

/***********************************
            BENEFÍCIOS DEV
************************************/
#beneficios-dev .grid-item {
    position: relative;
    background: linear-gradient(0deg, #000000, #1b1b1b);
    padding: 1rem 1rem 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    border-radius: 1rem;
    min-height: 30vh;
    transition: all .5s ease;
}

#beneficios-dev .grid-item:hover:before,
#beneficios-dev .grid-item:hover:after {
    content: '';
    position: absolute;
    left: -2px;
    top: -2px;
    background: linear-gradient(45deg, #000, #ff6714, #000, #ff6714, #000, #ff6714);
    background-size: 400%;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    z-index: -1;
    border-radius: 1rem;
    animation: steam 40s linear infinite;
}

#beneficios-dev .grid-item .conteudo {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#beneficios-dev .grid-item:hover .conteudo::before {
    background-color: linear-gradient(0deg, #000, #fff);
}

#beneficios-dev .grid-item .imagens {
    display: flex;
    margin-top: 5rem;
    overflow: hidden;
    opacity: .2;
    transition: all .5s ease;
}

#beneficios-dev .grid-item:hover .imagens {
    margin-top: 0rem;
    opacity: .9;
}

#beneficios-dev .grid-item .imagens img {
    position: absolute;
    width: 60%;
    z-index: -1;
    left: 20%;
}

#beneficios-dev .grid-item .conteudo .titulo-cima {
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    transition: all .5s;
    z-index: 1;
}

#beneficios-dev .grid-item .titulo-baixo {
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: all .5s;
    z-index: 1;
}

#beneficios-dev .grid-item:nth-child(2):hover .conteudo .titulo-cima {
    opacity: 0;
}

#beneficios-dev .grid-item:nth-child(2):hover .titulo-baixo {
    opacity: 1;
}

@keyframes steam {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: -400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

#beneficios-dev .grid-item:after {
    filter: blur(50px);
}

/***********************************
            PRINCÍPIOS
************************************/
#about2 {
    padding-top: 160px;
    padding-bottom: 80px;
}

#principios {
    background-color: var(--secundaria);
    border-radius: 2rem;
    margin: 80px 80px;
    z-index: 1;
}

#principios .card {
    width: 100%;
    padding: 2rem 2rem;
    color: var(--white);
    text-align: center;
    background-color: var(--secundaria);
    border-radius: 2rem;
    border: 2px solid rgba(150, 150, 150, 0.1);
    border-bottom: 10px solid var(--principal);
    box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.9);
    transform-style: preserve-3d;
    transition: all 0.5s;
}

#principios .card:hover {
    border: 2px solid rgba(150, 150, 150, 0.1);
}

#principios .card .card-body {
    transform-style: preserve-3d;
}

#principios .card i {
    transform-style: preserve-3d;
    transform: translate3d(0, 0, 0px);
    color: var(--principal);
    font-size: 2.5em;
    text-align: center;
}

#principios .card:hover i {
    text-shadow: -5px 10px 20px rgba(0, 0, 0, 0.5);
    transform: translate3d(0px, 0px, 100px);
}

#principios .card p {
    color: var(--white);
    transform-style: preserve-3d;
}

#principios .card:hover p {
    text-shadow: -5px 10px 20px rgba(0, 0, 0, 0.2);
    transform: translate3d(0px, 0px, 80px);
}

#principios .card h5 {
    text-shadow: -5px 10px 20px rgba(0, 0, 0, 0.5);
    transform-style: preserve-3d;
}

#principios .card:hover h5 {
    transform: translate3d(0px, 0px, 100px);
}

/***********************************
            PROCESSO
************************************/
.processo {
    position: -webkit-sticky;
    position: sticky;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 75vh;
    top: 5vh;
}

/***********************************
                FAQ
************************************/
.accordion-header {
    padding: 0;
}

.accordion-item {
    background-color: transparent;
}

.accordion-button {
    color: var(--white);
    background-color: transparent;
}

.accordion-button:not(.collapsed) {
    color: var(--white);
    background-color: transparent;
}

.accordion-button:not(.collapsed)::after {
    color: var(--principal);
}

.accordion-body {
    color: var(--white);
}

.accordion-header {
    border: none;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

/***********************************
            RODAPÉ
************************************/
footer {
    height: 100vh;
    background: linear-gradient(#0f0f0fEE, #000000AA), url("../img/logo.svg") center no-repeat;
    background-position: center;
    background-size: contain;
}

#form-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* Ajuste conforme necessário para sua página */
}

#form-intro,
#form-content {
    width: 100%;
    /* Ou a largura máxima que preferir */
    max-width: 600px;
    /* Exemplo de largura máxima */
    opacity: 0;
    visibility: hidden;
    position: absolute;
    transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s;
    /* Ajuste a transição conforme necessário */
}

/* Apenas para garantir que o conteúdo inicial seja visível */
#form-intro {
    opacity: 1;
    visibility: visible;
}

#msform {
    width: 400px;
    margin: 50px auto;
    text-align: center;
    position: relative;
}

#msform fieldset {
    background: rgba(255, 255, 255, 0.32);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5.6px);
    -webkit-backdrop-filter: blur(5.6px);
    border: 1px solid rgba(255, 255, 255, 0.33);
    padding: 20px 30px;
    box-sizing: border-box;
    width: 80%;
    margin: 0 10%;
    position: relative;
}

/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
    display: none;
}

/*inputs*/
#msform input,
#msform textarea,
#msform select {
    width: 100%;
    /* padding: 0 15px; */
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--white);
    background-color: transparent;
    /* border: none; */
    /* border-bottom: 1px solid #ccc; */
    /* border-radius: 3px; */
    /* box-sizing: border-box; */
    /* font-family: montserrat; */
}

.form-floating>.form-control~label {
    font-size: .9rem;
}

.form-floating>.form-control:focus~label {
    font-size: .9rem;
    color: var(--white);
}

.form-floating>.form-control:focus~label::after {
    background-color: transparent;
}

/*buttons*/
#msform .action-button {
    width: 100px;
    background: var(--principal);
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px;
    margin: 10px 5px;
    text-decoration: none;
    font-size: 14px;
    transition: all .5s ease;
}

#msform .action-button:hover,
#msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px var(--principal);
}

/*headings*/
.fs-title {
    font-size: 15px;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 10px;
}

.fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: var(--white);
    margin-bottom: 20px;
}

/*progressbar*/
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
}

#progressbar li {
    list-style-type: none;
    color: white;
    text-transform: uppercase;
    font-size: 9px;
    width: 33.33%;
    float: left;
    position: relative;
}

#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    color: #333;
    background: white;
    border-radius: 3px;
    margin: 0 auto 5px auto;
}

/*progressbar connectors*/
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: var(--principal);
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: -1;
    /*put it behind the numbers*/
}

#progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content: none;
}

/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,
#progressbar li.active:after {
    background: var(--principal);
    color: white;
}