*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    border:none;
    outline:none;
    list-style:none;
    text-decoration:none;
    font-family:'Roboto', sans-serif
}
img{
    max-width:100%;
    display:block
}
html{
    font-size:62.5%
}
@media (max-width: 1300px){
    html{
        font-size:58%
    }
}
@media (max-width: 991px){
    html{
        font-size:62.5%
    }
}
html,body{
    overflow-x:hidden
}
button{
    background-color:transparent;
    cursor:pointer
}
.container{
    width:100%;
    max-width:124.6rem;
    padding:0 1.5rem;
    margin:0 auto
}
h1{
    font-weight:400;
    font-size:64px;
    line-height:112%;
    letter-spacing:-1px;
    width:39rem;
    color:#E54C10
}
h4{
    font-weight:400;
    font-size:18px;
    line-height:150%;
    color:#7A7786
}
h1,h2,h3,h4{
    font-family:'Roboto', sans-serif
}
.btn-primary{
    background-color:#E54C10;
    color:#F1F0F5;
    display:inline-block;
    padding:0 48px;
    border-radius:12px;
    font-family:'Roboto', sans-serif;
    font-weight:600;
    font-size:16px;
    line-height:48px;
    transition:all .3s
}
.btn-primary:hover{
    outline:2px solid #E54C10;
    outline-offset:-2px;
    background-color:transparent;
    color:#E54C10
}
header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:90px;
    display:flex;
    background:url("bg-header.svg")
}
header .container .logo img{
    padding:25px 0
}
@media (max-width: 768px){
    header .container{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:space-between
    }
}
@media (max-width: 480px){
    header{
        height:80px
    }
    header .container .logo img{
        padding:20px 0
    }
}
footer{
    margin-top:60px
}
footer .container{
    border-bottom:4px solid #E54C10;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center
}
footer .container .text h4{
    padding-top:56px;
    padding-bottom:27px;
    font-weight:400;
    font-size:18px;
    line-height:150%
}
@media (max-width: 1440px){
    footer{
        margin-top:96px
    }
    footer .container .text h4{
        padding-top:80px;
        padding-bottom:29px
    }
}
@media (max-width: 768px){
    footer{
        margin-top:40px
    }
    footer .container{
        max-width:700px
    }
    footer .container .text h4{
        padding-top:54px;
        padding-bottom:32px
    }
}
@media (max-width: 480px){
    footer{
        margin-top:30px
    }
    footer .container{
        max-width:350px
    }
    footer .container .image img{
        max-width:150px
    }
    footer .container .text h4{
        font-size:16px;
        padding-top:30px;
        padding-bottom:21px
    }
}
.s-hero{
    margin-top:150px
}
.s-hero .container{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between
}
.s-hero .container .text h4{
    margin-top:24px;
    font-weight:400;
    font-size:18px;
    line-height:150%
}
.s-hero .container .text .btn-primary{
    margin-top:24px
}
.s-hero .container .text .app{
    display:flex;
    align-items:flex-start;
    width:385px
}
.s-hero .container .text .app .lojas{
    display:flex;
    flex-direction:column;
    align-items:center
}
.s-hero .container .text .app .lojas .app-store{
    margin-top:8px
}
.s-hero .container .text .app .lojas .google-play{
    margin-top:8px
}
.s-hero .container .text .app .code{
    margin-top:24px;
    margin-left:24px
}
.s-hero .container .image img{
    width:660px
}
@media (max-width: 1440px){
    .s-hero{
        margin-top:180px
    }
}
@media (max-width: 768px){
    .s-hero .container{
        flex-direction:column;
        align-items:center
    }
    .s-hero .container .text{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        margin-bottom:40px
    }
    .s-hero .container .text h1{
        width:516px;
        text-align:center
    }
    .s-hero .container .text h4{
        margin-top:24px;
        text-align:center
    }
}
@media (max-width: 480px){
    .s-hero{
        margin-top:120px
    }
    .s-hero .container .text h1{
        font-size:48px;
        max-width:280px
    }
    .s-hero .container .text h4{
        margin-top:20px;
        font-size:16px;
        max-width:214px
    }
    .s-hero .container .text .btn-primary{
        margin-top:20px
    }
    .s-hero .container .text .app{
        display:none
    }
}