:root {
     --yellow: #721AE7;
     --yellow-300: #C29CF2;
     --black: #080714;
     --white: #F1E8FD;
     --green: #0CB97B;
}
 * {
     margin:0;
     padding:0;
     box-sizing:border-box;
     font-family:"Lato",sans-serif;
     color:#F1E8FD;
     -webkit- font-smoothing:antialiased 
}
 html {
     font-size:62.5% 
}
 body {
     background-color:#080714 
}
 img {
     max-width:100%;
     display:block 
}
 ul {
     list-style:none 
}
 button {
     background-color:rgba(0,0,0,0);
     border:none;
     cursor:pointer 
}
 a {
     text-decoration:none;
     display:inline-block 
}
 h1,h2,h3,h4,h5,h6 {
     font-family:"Recursive",sans-serif 
}
 h1 {
     font-size:5.6rem;
     font-weight:900;
     line-height:130% 
}
 h2 {
     font-size:5.6rem;
     font-weight:900;
     line-height:130% 
}
 h3 {
     font-size:2.8rem;
     font-weight:900;
     line-height:130% 
}
 .container {
     position:relative;
     width:100%;
     max-width:115.8rem;
     margin:0 auto;
     padding:0 1.5rem 
}
 @media(max-width: 991px) {
     .container {
         max-width:100%;
        padding:0 2.4rem 
    }
}
 header {
     background-color:var(--black);
     padding-top:6.4rem;
     padding-bottom:12rem;
     display:flex;
     align-items:center;
     justify-content:center;
     flex-direction:column;
     text-align:center;
     gap:8.8px 
}
 header strong {
     color:var(--yellow);
     font-family:"Recursive",sans-serif;
     font-size:2.3652rem;
     font-weight:900;
     line-height:130%;
     letter-spacing:17.739px;
     text-transform:uppercase;
     border-bottom:2px solid var(--yellow);
     max-width:23.8rem;
     padding-bottom:4.4px
}
 @media(max-width: 560px){
    header{
        padding-bottom:16rem
    }
}
footer{
    position:relative;
    width:100%;
    background-color:#FAF5FF;
    padding:6.4rem 0
}
footer .box-contact{
    padding:23px 24px;
    border-radius:8px;
    background-color:#222;
    max-width:55.2rem;
    margin:0 auto;
    margin-bottom:6.3rem;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-top:-14rem
}
footer .box-contact h3{
    flex:1;
    max-width:24rem
}
footer .box-contact>div{
    max-width:24rem
}
footer .box-contact>div p{
    color:#eafffe;
    font-size:1.6rem;
    font-weight:400;
    margin-bottom:1.6rem
}
footer .area{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:4rem
}
footer .area nav{
    display:flex;
    gap:1.6rem
}
footer .area nav a{
    color:#721AE7;
    font-size:1.4rem;
    line-height:115%;
    padding:.8rem 1.6rem
}
footer .area .lines.mb{
    display:none
}
footer .copy{
    display:flex;
    align-items:center;
    justify-content:space-between
}
footer .copy p{
    flex:1;
    color:#101010;
    font-size:1.4rem;
    font-weight:400;
    line-height:150%
}
footer .copy p span{
    color:#101010
}
footer .copy ul{
    display:flex;
    align-items:center;
    gap:2rem
}
footer .lines.geral .line:first-child{
    top:0
}
footer .lines.geral .line:nth-child(2){
    top:10.4rem
}
footer .lines.geral .line:nth-child(3){
    bottom:0
}
@media(max-width: 991px){
    footer .area{
        position:relative;
        flex-direction:column;
        align-items:center;
        margin-bottom:6.4rem
    }
    footer .area nav{
        flex-direction:column;
        align-items:center;
        margin-top:2.4rem
    }
    footer .area .lines.mb{
        display:block
    }
    footer .area .lines .line{
        position:absolute
    }
    footer .area .lines .line:first-child{
        top:4rem
    }
    footer .area .lines .line:nth-child(2){
        top:9.5rem
    }
    footer .area .lines .line:nth-child(3){
        top:14.3rem
    }
    footer .area .lines .line:nth-child(4){
        top:19.1rem
    }
    footer .area .lines .line:nth-child(5){
        top:23.9rem
    }
    footer .area .lines .line:last-child{
        top:36.3rem
    }
    footer .copy{
        flex-direction:column;
        gap:2.4rem
    }
    footer .copy p{
        text-align:center;
        max-width:72%
    }
    footer .lines.geral{
        display:flex;
        flex-direction:column;
        justify-content:space-between
    }
    footer .lines.geral .line:nth-child(2){
        display:none
    }
}
@media(max-width: 560px){
    footer .box-contact{
        max-width:90%;
        flex-direction:column;
        align-items:flex-start;
        margin-bottom:4.3rem
    }
    footer .box-contact>div{
        max-width:100%;
        margin-top:1.6rem
    }
    footer .copy p{
        max-width:100%
    }
}
.s-hero{
    background-color:#F1E8FD;
    padding-bottom:6.4rem;
    display:flex;
    flex-direction:column;
    align-items:center
}
.s-hero .box{
    width:100%;
    max-width:74.4rem;
    border-radius:8px;
    background-color:#0E0D1E;
    margin:0 auto;
    margin-bottom:6.4rem;
    display:grid;
    grid-template-columns:1fr 1fr;
    margin-top:-56px
}
.s-hero .box .left{
    border-right:1px solid #2f2f2f;
    padding:2.4rem;
    text-align:center
}
.s-hero .box .left p{
    color:##F7F2FE;
    text-align:center;
    font-size:1.6rem;
    font-weight:700;
    margin-bottom:1.6rem
}
.s-hero .box .left strong{
    display:block;
    color:##F7F2FE;
    text-align:center;
    font-family:"Recursive",sans-serif;
    font-size:3.2rem;
    font-weight:900;
    line-height:130%
}
.s-hero .box .left span{
    color:#F7F2FE;
    text-align:center;
    font-size:1.6rem;
    font-weight:400
}
.s-hero .box .right{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1.6rem;
    padding:2.4rem
}
.s-hero .box .right p{
    color:#F7F2FE;
    text-align:center;
    font-size:1.6rem;
    font-weight:400
}
.s-hero .msg{
    flex:1;
    max-width:36rem
}
.s-hero .msg p{
    color:#080714;
    font-size:1.4rem;
    font-weight:400;
    margin-bottom:1.6rem
}
.s-hero .msg a{
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:8px;
    background-color:#e00a0a;
    padding:1.6rem 0;
    gap:8px;
    color:#fffcf5;
    font-size:1.4rem;
    font-weight:400;
    transition:filter .3s ease
}
.s-hero .msg a:hover{
    filter:brightness(0.8)
}
@media(max-width: 991px){
    .s-hero .box{
        grid-template-columns:1fr;
        max-width:336px
    }
    .s-hero .box .left{
        border-bottom:1px solid #15132C;
        border-right:none
    }
}
@media(max-width: 560px){
    .s-hero .box{
        margin-top:-11rem
    }
}