@import url(./global.css);
/* -------- inicio do header -------- */
header{
    display: flex;
    height: 80px;
    justify-content: space-around;
    align-items: center;
}
header > .logo {
    display: flex;
    align-items: center;
    gap: 11px;
}
header > .logo > p {
    font-size: 22px;
    color: var(--color-White);  
}
header > nav > ul {
    display: flex;
    gap: 40px;
    
}
header > nav > ul > li > a{
    color: var(--color-Gray1);
}
header > nav > ul > li:hover {
    text-decoration: underline var(--color-Gray1);
    transition: transform 0.2s ease-in-out;
    transform: translate(3px, -2px);
}
header > nav > ul > li > a:hover{
    font-weight: 500;
    color: white;
}
    header > nav > ul > li > a.ativo{
    color: var(--color-White);
    font-weight: 400;
}
header > .buttonsWrapper > button:nth-child(1) {
    color: white;
    padding: 10px 24px;
}
header > .buttonsWrapper > button:nth-child(1):hover {
    border-top: 2px solid var(--color-Gray1);
    transform: scale(1.1) translateY(-7px);
    transition: transform 0.2s ease-in-out;
    border-radius: 40px;
}
header > .buttonsWrapper > button:nth-child(2) {
    background-color: var(--color-Green);
    color: #000000;
    padding: 10px 24px;
    border-radius: 40px;
}
header > .buttonsWrapper > button:nth-child(2):hover {
    background-color: #84cc3d;
    border-top: 1px solid var(--color-Gray1);
    transform: scale(1.1) translateY(-7px);
    transition: transform 0.2s ease-in-out;
    border-radius: 40px;    
}
/* ----- Inicio Menu hamburgão ----- */
.hamburgerMenu > .hamburgerIcon{
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}    
.hamburgerMenu > .hamburgerIcon >ul{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 26px;
    height: 26px;
    gap: 5px;

}
.hamburgerMenu > .hamburgerIcon > ul > li{
    background-color: white;
    width: 26px;
    height: 26px;
    height: 5px;
    border-radius: 10px;
}
.hamburgerMenuShape {
    display: none;
    width: 268px;
    height: auto;
    background: linear-gradient(var(--color-Gray4)) padding-box, linear-gradient(-38deg, #272727, #FFFFFF) border-box;
    border: 1px solid transparent;
    border-radius: 5px;
    position: fixed;
    left: -300px;  
    top: 0;
    transition: left 0.5s ease-in-out;
    z-index: 99999;
}
.bodylockScroll{
    overflow: hidden;
}
.hamburgerMenuShape > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
}
.hamburgerLogo{
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}
.hamburgerMenuShape > header > .hamburgerLogo > p{
    color: var(--color-White);
}
.hamburgerMenuShape > header > ul {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 26px;
  height: 26px;
}

.hamburgerMenuShape>header>ul>li {
  background-color: #ffffff;
  width: 26px;
  height: 5px;
  border-radius: 10px;
  list-style: none;
}
.hamburgerMenuShape>header>ul>li:nth-child(1) {
  transform: rotate(135deg);
  position: relative;
  right: -0.5px;
  top: 11px;
  }
.hamburgerMenuShape>header>ul>li:nth-child(2) {
  transform: rotate(45deg);
  position: relative;
  top: -11px;
  left: 1px;
  top: 1px;
}
.hamburgerMenuShape > nav > ul > li:hover {
    transform: translate(5px, -3px);
}
.hamburgerMenuShape > nav > ul > li {
    padding-left: 20px;
    padding-top: 15px;
    width: 160px;
}
.hamburgerMenuShape > nav > ul > li> a:hover {
    color: var(--color-Gray2);
}
.hamburgerMenuShape > nav > ul > li> a {
    color: var(--color-White);
    font-size: 22px;
    padding-left: 20px;
}
.hamburgerMenuShape > .buttons {
    display: flex;
    gap: 16px;
    padding: 56px 20px;
}
.hamburgerMenuShape > .buttons > button:nth-child(1) {
    color: var(--color-White);
    padding: 10px 24px;
}
.hamburgerMenuShape > .buttons > button:nth-child(1):hover {
    background: linear-gradient(var(--color-Gray4)) padding-box, linear-gradient(38deg, #000000 27%, #FFFFFF 70%) border-box;
    border: 1px solid transparent;
    transform: translate(5px, 3px) scale(1.05);
}
.hamburgerMenuShape > .buttons > button:nth-child(2) {
    background-color: var(--color-Green);
    color: var(--color-Gray4);
    padding: 10px 24px;
    border-radius: 40px;
}
.hamburgerMenuShape > .buttons > button:nth-child(2):hover {
    background: linear-gradient(var(--color-Green)) padding-box, linear-gradient(38deg, #8d7272 27%, #282bdb 70%) border-box;
    border: 1px solid transparent;
    transform: translate(5px, 3px) scale(1.05);

}
.socialMedia{
    display: flex;
    gap: 24px;
    padding: 0 0 50px 39px;
}
.facebook > a{
    background: linear-gradient(var(--color-Gray4)) padding-box, linear-gradient(-120deg, #FFFFFF, #000000 ) border-box;
    border: 1px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 30px;
    font-weight: 400;
    color: var(--color-White);
}
.facebook > a:hover{
    background: linear-gradient(#180cca) padding-box, linear-gradient(-120deg, #FFFFFF, #000000 ) border-box;
    border: 1px solid transparent;
    transform: translate(8px, -3px);
    box-shadow: -6px 8px rgba(24, 12, 202, 0.4);
    transition: 0.3s ease-in;
}
.linkedin > a{
    background: linear-gradient(var(--color-Gray4)) padding-box, linear-gradient(-120deg, #FFFFFF, #000000 ) border-box;
    border: 1px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    font-size: 30px;
    font-weight: 400;
    color: var(--color-White);
}
.linkedin > a:hover{
    background: linear-gradient(#9DFF3A) padding-box, linear-gradient(-120deg, #FFFFFF, #000000 ) border-box;
    border: 1px solid transparent;
    transform: translate(8px, -3px);
    box-shadow: -6px 8px rgba(157, 255, 58, 0.4);
    transition: 0.3s ease-in;
    color: #000000;
}
.instagram > a{
    background: linear-gradient(var(--color-Gray4)) padding-box, linear-gradient(-120deg, #FFFFFF, #000000 ) border-box;
    border: 2px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 5px;
}
.instagram > a:hover{
    background: linear-gradient(#405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D) padding-box, linear-gradient(-120deg, #FFFFFF, #000000 ) border-box;
    border: 1px solid transparent;
    transform: translate(8px, -3px);
    box-shadow: -6px 8px #833AB4;
    transition: 0.3s ease-in;
    color: #000000;
    /* background: linear-gradient(45deg, ); */
    
}
.circle{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid white;
    background-color: transparent;
}
.deg{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: white;
    position: relative;
    top: -5px;
    left: 18px;
}
/* -----  Fim Menu hamburgão ----- */
/* -------- Fim do header -------- */
/* ----- Inicio do main ----- */
main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    margin: 60px 0px 60px 0px;
}
main > .Finance {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 568px;
}

main > .Finance > button{
    color: #9DFF3A;
    background: linear-gradient(#000000, #000000) padding-box, linear-gradient(102deg, rgba(179, 179, 179, 0.6), rgba(77, 77, 77, 0.6)) border-box;
    border-radius: 50px;
    border: 1px solid
    transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 12px;
    border-radius: 24px;
    width: 137px;
    cursor: default;
    pointer-events: none;
}
main > .Finance > button > a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--color-Green);
    cursor: default;
    pointer-events: none;
}

.decentralised {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--color-Green);
}

main > .Finance > h1{
    font-size: 64px;
    font-weight: bold;
    color: var(--color-White);
}
main > .Finance > h2 {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-Gray1);
}

main > .Finance > .buttonStarted {
    display: flex;
    flex-direction: row;
    gap: 20px;
}
main > .Finance > .buttonStarted > button:nth-child(1) {
    color: #000000;
    background-color: var(--color-Green);
    padding: 14px 24px;
    border-radius: 40px;
    font-size: 18px;
    font-weight: 400;
}
main > .Finance > .buttonStarted > button:nth-child(1):hover {
    background-color: #84cc3d;
    border-top: 1px solid var(--color-Gray1);
    /* transform: translateY(-7px); */
    transition: transform 0.2s ease-in-out;
    
}
main > .Finance > .buttonStarted > button:nth-child(2) {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: var(--color-White);
    background: linear-gradient(#000000, #000000) padding-box, linear-gradient(102deg, rgba(179, 179, 179, 0.6), rgba(77, 77, 77, 0.6)) border-box;
    border: 1px solid
    transparent;
    border-radius: 40px;
    padding: 15px 24px;
    gap: 6px;
    width: 190px;
    height: 52px;
    cursor: default;
    pointer-events: none;
}
/* ----- Fim do Main ----- */

/* ----- Inicio da section Partners ----- */
.partners {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color-Gray4);
}

.partners > h3 {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-Gray1);
    margin: 40px 0px 40px 0px;
    background-color: var(--color-Gray4);
}

.partners > nav > ul, li > img{
    display: flex;
    flex-direction: row;
    gap: 50px;
    background-color: var(--color-Gray4);
    padding-bottom: 20px;
}


/* ----- Fim da section Partners ----- */
/* ----- Inicio da section breakdown */
.breakdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;  
    margin-top: 60px; 
    gap: 20px;
}
.breakdown > button {
    background-color: var(--color-Gray3);
    color: var(--color-Green);
    padding: 12px 20px;
    border-radius: 24px;
    background: linear-gradient(#000000, #000000) padding-box, linear-gradient(102deg, rgba(179, 179, 179, 0.6), rgba(77, 77, 77, 0.6)) border-box;
    border: 1px solid
    transparent;
}
.breakdown > button:hover {
    background: linear-gradient(#000000, #000000) padding-box, linear-gradient(102deg, rgba(179, 179, 179, 0.6), rgba(77, 77, 77, 0.6)) border-box;
    border: 1px solid;
    transition: scale 2s ease-in-out;
    transform: scale(1.1) translateY(-7px);
}
.breakdown > h2 {
    font-size: 48px;
    font-weight: 400;
    color: var(--color-White);
}
.breakdown > h3 {
    font-size: 18px;
    color: var(--color-Gray1);
    width: 572px;
}
.breakdown > .card {
    display: flex;
    gap: 20px;
}
.breakdown > .card > .cardContent  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 60px 0px 60px 0px;
    padding: 48px 36px;
    gap: 16px;
    background: linear-gradient(var(--color-Gray4))padding-box, linear-gradient(116deg, var(--color-Gray2), #B3B3B3)border-box;
    border: 1px solid transparent;
    border-radius: 12px;
}
.breakdown > .card > .cardContent > h3 {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-White);
    margin-top: 20px;
}
.breakdown > .card > .cardContent > p {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: var(--color-Gray1);
    width: 330px;
}
/* ----- Fim da section breakdown ----- */
/* ----- Inicio da section Levelrage ----- */
.levelrage{
    background-color: var(--color-Gray4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding-top: 60px;
}
.levelrage > button {
    background-color: var(--color-Gray4);
    color: var(--color-Green);
    border: 1px solid var(--color-Gray3);
    border-radius: 24px;
    padding: 12px 20px;
}
.levelrage > button:hover {
    background-color: #000000;
    border: 1.5px solid var(--color-Gray1);
    transform: scale(1.1) translateY(-7px);
    transition: transform 0.2s ease-in-out;
    border-radius: 40px;
    
}
.levelrage > h2 {
    color: var(--color-White);
    font-size: 48px;
    font-weight: 400;
}
.levelrage > p {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-Gray1);
    width: 644px;
    font-family: "Inter", sans-serif;
}
.levelrage > .levelrageInformation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 20px;
    margin-top: 40px;
    background-color: var(--color-Gray4);
}
.levelrage > .levelrageInformation > .cardInformation {
    background-color: var(--color-Gray4);
    padding: 0 72px 60px 0;
}
.levelrage > .levelrageInformation > .cardInformation > h3 {
    font-size: 48px;
    font-weight: 400;
    color: var(--color-Green);
}
.levelrage > .levelrageInformation > .cardInformation > p {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-Gray1);
    font-family: "Inter", sans-serif;
}
/* ----- Fim da section Levelrage ----- */
/* ----- Inicio da section blockchain ----- */
.blockchain {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 60px 0px 60px 0px;
}
.blockchain > .futureBlockchain {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 20px;
}
.blockchain > .futureBlockchain > button {
    color: var(--color-Green);
    border: 1px solid var(--color-Gray3);
    padding: 12px 20px;
    border-radius: 24px;
    font-weight: 400;
}
.blockchain > .futureBlockchain > button:hover {
    background: linear-gradient(#000000, #000000) padding-box, linear-gradient(102deg, rgba(179, 179, 179, 0.6), rgba(77, 77, 77, 0.6)) border-box;
    border: 1px solid;
    transition: scale 2s ease-in-out;
    transform: scale(1.1) translateY(-7px);
}
.blockchain > .futureBlockchain > h2 {
    color: var(--color-White);
    font-size: 48px;
    font-weight: 400;
}
.blockchain > .futureBlockchain > p {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-Gray1);
    font-family: "Inter", sans-serif;
    width: 644px;
}
.blockchain > .blockchainInfo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
}

.blockchain > .blockchainInfo > aside > .rectangle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 624px;
    background: linear-gradient(var(--color-Gray4))padding-box, linear-gradient(116deg, var(--color-Gray2), #B3B3B3)border-box;
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 30px 20px;
    margin-top: 40px;
}
.blockchain > .blockchainInfo > aside > .rectangle > .rectangleInformation {
    background-color: transparent;
}
.rectangleInformation > h3 {
    font-size: 20px;
    color: var(--color-White);
    font-weight: 400;
    font-family: "Inter", sans-serif;
}
.rectangleInformation > p {
    font-style: 16px;
    font-weight: 400;
    color: var(--color-Gray1);
    margin-top: 8px;
}
/* ----- Fim da section blockchain ----- */
/* ----- Inicio da section questions ----- */
.commonQuestions  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color-Gray4);
    gap: 20px;
}
.commonQuestions > button {
    color: var(--color-Green);
    font-weight: 400;
    border: 1px solid var(--color-Gray3);
    padding: 12px 20px;
    margin-top: 40px;
    border-radius: 24px;
}
.commonQuestions > button:hover {
    background: linear-gradient(#000000, #000000) padding-box, linear-gradient(102deg, rgba(179, 179, 179, 0.6), rgba(77, 77, 77, 0.6)) border-box;
    border: 1px solid;
    transition: scale 2s ease-in-out;
    transform: scale(1.1) translateY(-7px);    
}

.commonQuestions > h2 {
    font-size: 48px;
    color: var(--color-White);
    font-weight: 400;
}
.commonQuestions > p {
    color: var(--color-Gray1);
    font-size: 18px;
    font-weight: 400;
    width: 644px;
    text-align: center;
    font-family: "Inter", sans-serif;
    padding-bottom: 60px;
}
.questions {
    background: linear-gradient(var(--color-Gray4))padding-box, linear-gradient(var(--color-Gray3))border-box;
    border: 1px solid transparent;
    display: flex;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
}
.questions:nth-child(9){
    margin-bottom: 60px;
}
.questions > h3 {
    color: var(--color-White);
    font-size: 16px;
    font-weight: 400px;
    width: 700px;
}
/* ----- Fim da section questions ----- */
/* ----- Inicio da section workflow ----- */
.workflow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #000000;
    margin-top: 60px;
    gap: 20px;
}
.workflow > button:nth-child(1) {
    padding: 12px 20px;
    border: 1px solid var(--color-Gray3);
    border-radius: 24px;
    color: var(--color-Green);
}
.workflow > button:nth-child(1):hover {
    background: linear-gradient(#000000, #000000) padding-box, linear-gradient(102deg, rgba(179, 179, 179, 0.6), rgba(77, 77, 77, 0.6)) border-box;
    border: 1px solid;
    transition: scale 2s ease-in-out;
    transform: scale(1.1) translateY(-7px);        
}
.workflow > h2 {
    color: var(--color-White);
    font-size: 48px;
    font-weight: 400;
    width: 800px;
}
.workflow > p {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-Gray1);
    width: 644px;
}
.workflow > button:nth-child(4){
    color: #000000;
    background-color: var(--color-Green);
    padding: 14px 24px;
}
.workflow > button:nth-child(4):hover {
    background-color: #84cc3d;
    border-top: 1px solid var(--color-Gray1);
    transform: scale(1.1) translateY(5px);
    transition: transform 0.2s ease-in-out;
}
/* ----- Fim da section workflow ----- */
/* ----- Inicio do Footer ----- */
footer{
    display: flex;
    justify-content: center;
    align-items: start;
    margin-top: 60px;
    gap: 120px;
}
.footerLogo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11px;
    color: var(--color-White);
    font-size: 22px;
    font-weight: 500;
}
footer > aside {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 92px;
    justify-content: center;
    align-items: start;
    padding-bottom: 60px;
}
footer > aside > ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
footer > aside > ul > li:nth-child(1) > a:nth-child(1) {
    color: var(--color-White);
    font-size: 20px;
    font-weight: 400;
    font-family: "Inter", sans-serif;
    width: 102px;
    cursor: text;
}
footer > aside > ul > li:nth-child(1) {
    margin-bottom: 16px;
}
footer > aside > ul > li:nth-child(n+2):hover {
    text-decoration: underline var(--color-Gray1);
    transition: transform 0.2s ease-in-out;
    transform: translate(3px, -2px);
}
footer > aside > ul > li > a {
    color: var(--color-Gray1);
    font-size: 14px;
    font-weight: 400;
}
footer > aside > ul > li > a:hover {
    font-weight: 500;
    color: var(--color-White);
}
.joinUpdates{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 20px;
}
.joinUpdates > h3 {
    font-size: 20px;
    font-family: "Inter", sans-serif;
    color: #D8D8D8;
    font-weight: 400;
    width: 198px;
}
.joinUpdates > p::placeholder {
    font-size: 14px;
    color: var(--color-Gray1);
    border: none;
}
.input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-Gray1);
    padding-bottom: 16px;
    width: 345px;
}
.input > p > input {
    padding: 12px 0px;
    outline: none;
    color: var(--color-Gray1);
    background-color: #000000;
    width: 300px;
}
.input > p > input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #000000 inset !important;
    -webkit-text-fill-color: var(--color-Gray1) !important; /* Texto branco pra manter contraste */
}

.send {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-Green);
}
.send:hover {
    background-color: #84cc3d;
    border-top: 1px solid var(--color-Gray1);
    transform: scale(1.1) translateX(5px);
    transition: transform 0.2s ease-in-out;
}
/* ----- Fim do Footer ----- */
/* Inicio das reposividades */
/* Responsividade pra notebook */
@media (max-width: 1024px){
    main {
        gap: 30px;
    }
    main > .Finance:nth-child(1)  > button{
        margin-left: 30px;
    }
    main > .Finance > h1{
        margin-left: 30px;
        font-size: 50px;
    }
    main > .Finance > h2{
        margin-left: 30px;
    }
    main > .Finance > .buttonStarted {
        margin-left: 30px;   
    }
    main > img {
        width: 400px;
        height: 400px;
    }
    .breakdown > .card {
        gap: 40px;
    }
    .breakdown > .card > .cardContent > p {
        width: 200px;
    }
    .blockchain > .blockchainInfo {
        gap: 30px;
    }
    .blockchain > .blockchainInfo > img {
        width: 400px;
        height: 400px;
    }
    .blockchain > .blockchainInfo > aside > .rectangle {
        width: 450px;
        gap: 10px;
        padding: 20px 10px;
    }
    .blockchain > .blockchainInfo > aside > .rectangle > img {
        margin-left: 15px;
    }
    .rectangleInformation > p {
        width: 400px;  
    }
    footer {
        gap: 60px;
    }
    footer > aside {
        gap: 60px;
    }
    footer > aside > * {
        margin-left: 20px;
    }
    .joinUpdates> * {
        margin-right: 20px;
    }
    .input{
        width: 300px;
    }
    .input > p > input {
        width: 250px;
    }
}
@media (max-width: 900px){
    .breakdown > h3 {
        margin-bottom: 60px;
    }
    .breakdown > .card > .cardContent {
        margin: 0px;
    }
    .breakdown > .card > .cardContent:nth-child(3) {
        margin-bottom: 60px;
    }
    .breakdown > .card {
        flex-wrap: wrap;
        justify-content: center;
        
    }
    .blockchain > .futureBlockchain > h2 {
        width: 600px;
    }
    .blockchain > .futureBlockchain > p {
        width: 450px;
    }
    .blockchain > .blockchainInfo{
        flex-direction: column-reverse;
    }
    .blockchain > .blockchainInfo > aside > .rectangle {
        width: 550px;
    }
    .blockchain > .blockchainInfo > aside > .rectangle > img {
        margin-left: 0px;
    }
    .blockchain > .blockchainInfo > aside > .rectangle {
        justify-content: start;
        margin-left: 10px!important;
    }
    .blockchain > .blockchainInfo > aside > .rectangle > img {
        margin-left: 10px;
    }
    .blockchain > .blockchainInfo > img {
        width: 500px;
        height: 500px;
    }
    .commonQuestions > h2 {
        width: 600px;
        text-align: center;
    }
    .commonQuestions > p {
        width: 550px;
    }
    .workflow > h2 {
        width: 600px;
        text-align: center;
    }
    .workflow > p {
        width: 550px;
        text-align: center;
    }
    footer {
        flex-direction: column;
        align-items: center;
        gap: 0px;
    }
    .joinUpdates {
        margin-bottom: 50px;
    }
}
@media (max-width: 860px){  
    main > img {
        width: 300px;
        height: 300px;
        margin-right: 10px;
    }
    main > .Finance> * {
        margin-left: 20px;
    }
    .partners > nav> ul{
        justify-content: center;
    }
    .partners > nav > ul{
        flex-wrap: wrap;
    }
}
/* Inicio das responsividades para tablets */
@media (max-width: 768px){
    body > header {
        width: 100vw;
        padding: 0 20px;
        position: fixed;
        top: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        scale: 0.95;
    }
    main > .Finance {
        margin-top: 60px;
    }

    .hamburgerMenu > .hamburgerIcon{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .hamburgerMenu > .hamburgerIcon {
        width: 200px;
    }
    .buttonsWrapper {
        margin-right: 20px;
    }
    .hamburgerMenuShape{
        position: fixed;
        top: 0;
        left: -300px;
    }
    header > nav {
        display: none;
    }
    .questions {
        width: 550px;
    }
    main {
        flex-direction: column;
    }
    main > .Finance {
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .levelrage > h2 {
        width: 500px;
    }
    .levelrage > p {
        width: 500px;
    }
    .levelrage > .levelrageInformation {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 60px;
        padding-bottom: 60px;
    }
    .levelrage > .levelrageInformation:not(:last-child) {
        margin: 0 72px 60px 0;
    }
    .levelrage > .levelrageInformation > .cardInformation{
        padding: 0;
    }
    .blockchain > .blockchainInfo > img {
        width: 350px;
        height: 350px;
    }
    .workflow > h2 {
        font-size: 32px;
        width: 400px;
    }
    .workflow > p {
        width: 400px;
        font-size: 16px;
    }
    footer > aside {
        display: flex;
        flex-wrap: wrap;

    }
}
@media (max-width: 600px){
    body > header {
        padding: 0 20px;
        position: fixed;
        top: 0;
        left: 0px;
        transition: 0.3s ease;
    }
    .hamburgerMenu > .hamburgerIcon {
        width: 170px;
    }
    header > .logo {
        margin-left: 40px;
    }
    .buttonsWrapper{
        scale: 0.82;
        margin-left: 10px;
        margin-right: 0px;
    }
    main > .Finance > h1 {
        font-size: 40px;
    }
    main > .Finance > h2 {
        font-size: 18px;
        width: 430px;
    }
    .breakdown > h2 {
        font-size: 40px;
    }
    .breakdown > h3 {
        width: 430px;
        text-align: center;
    }
    .levelrage > h2 {
        font-size: 40px;
    }
    .levelrage > p {
        width: 430px;
    }
    .levelrage > .levelrageInformation{
        margin-left: 40px;
    }
    .blockchain > .futureBlockchain > h2{
        font-size: 40px;
    }
    .commonQuestions > h2 {
        width: 450px;
        font-size: 40px;
    }
    .commonQuestions > p{
        width: 450px;
    }
    .questions {
        width: 450px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
}
/* Inicio da responsividade pra celulares grandes */
@media (max-width: 568px){
    body > header {
        width: 100vw;
        padding: 0 20px;
        position: fixed;
        top: 0;
    }
    .buttonsWrapper {
        display: none !important;
    }
    .hamburgerMenuShape {
    position: fixed;
    left: -20px;
    top: 0;
    }
    main > .Finance {
    margin-top: 60px;
    }
    .buttonsWrapper{
        display: none;
    }
    .blockchain > .blockchainInfo > aside > .rectangle{
        width: 450px;
    }
}
@media (max-width: 476px){
    .buttonsWrapper {
        display: none;
    }
    main > .Finance > h1 {
        font-size: 30px;
        width: 350px;
    }
    main > .Finance > * {
        margin: 0 !important;
    }
    main > .Finance > h2 {
        width: 350px;
    }
    .blockchain > .blockchainInfo > aside > .rectangle{
        width: 400px;
    }
    .blockchain > .futureBlockchain > h2 {
        font-size: 30px;
        width: 350px;    
    }
    .blockchain > .futureBlockchain > p {
        font-size: 16px;
        width: 400px;
    }
    .rectangleInformation > h3 {
        font-size: 16px;
    }
    .rectangleInformation > p {
    font-size: 14px;
    width: 350px;
    }
    .levelrage > .levelrageInformation > .cardInformation > h3 {
        font-size: 32px;
    }
    .levelrage > .levelrageInformation {
        margin-left: 10px;
    }
    .questions {
        width: 400px;
    }
    .commonQuestions > p{
        width: 400px;
    }
    footer > aside {
        gap: 30px;
    }
    footer > aside > *{
        margin-left: 0 !important;
    }
    footer > aside > *:last-child {
        margin-left: 30px !important;
    }
}
@media (max-width: 400px){
    .breakdown > h2 {
        font-size: 30px;
    }
    .breakdown > h3{
        font-size: 16px;
        width: 350px;
    }
    .levelrage > h2{
        font-size: 30px;
        width: 350px;
    }
    .levelrage > p{
        font-size: 16px;
        width: 350px;
    }
    .blockchain > .blockchainInfo > aside > .rectangle{
        width: 320px;
    }
    .levelrage > .levelrageInformation{
        gap: 30px;
    }
    .rectangleInformation > p{
        width: 250px;
    }
    .commonQuestions > h2{
        font-size: 30px;
        width: 350px;
    }
    .commonQuestions > p{
        font-size: 16px;
        width: 350px;
    }
    .questions{
        width: 320px;
    }
    .questions > h3{
        width: 300px;
    }
    .workflow > h2{
        font-size: 25px;
        width: 350px;
    }
    .workflow > p{
        width: 350px;
    }
}
@media (max-width: 350px){
    main > .Finance > h1{
        font-size: 25px;
    }
    main > .Finance > h2{
        font-size: 14px;
        width: 300px;
    }
    main > .Finance > .buttonStarted{
        scale: 0.8;
    }
    main > img{
        width: 300px;
        height: 300px;
    }
    .blockchain > .blockchainInfo > img {
        width: 300px;
        height: 300px;
    }
    .levelrage > p{
        width: 300px;
    }
    .levelrage > .levelrageInformation{
        scale: 0.9;
    }
    .blockchain > .futureBlockchain > h2{
        font-size: 25px;
        width: 300px;
    }
    .blockchain > .futureBlockchain > p{
        width: 300px;
    }
    .commonQuestions > p{
        width: 300px;
    }
    .workflow > h2{
        width: 300px;
    }
    .workflow > p{
        width: 300px;
    }
    footer > aside {
        justify-content: space-evenly;    
    }
    footer > aside > *:last-child{
        margin-left: 0 !important;
    }
}
/* Fim das resposividades * /