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

:root{
    --azul:#144ACE;
    --verde:#01D66A;
    --dark:#202020;
    --gray:#D9D9D9;
    --light:#fdfdfd;

    --font-small:14px;
    --font-text:16px;
    --font-title:48px;
    --font-title-medium:32px;
    --font-subtitle:24px;

    --bold: 700;
    --semibold: 500;
    --regular: 400;
}

body{
    background-color: var(--light);
    font-size: var(--font-text);
    font-family: 'Poppins', sans-serif;
}
.hero{
    height: 90vh;
    width: 100%;
    overflow-y: hidden;
}

.hero-figure{
    background:url("../img/app/objeto.png") no-repeat left top, url("../img/app/objeto_hero_dir.png") no-repeat right bottom;    
}

@media screen and (max-width: 540px) {
    .hero-figure{
        background:url("../img/app/objeto.png") no-repeat left top cover, url("../img/app/objeto_hero_dir.png") no-repeat right bottom;    
    } 
    .hero h1.title span{
        color: var(--light);
    }
}

.hero-blue{
    background-color: var(--azul);
}
.logo{
 
}
.hero h1.title{
    color: var(--light);
    font-size: var(--font-title);
    font-weight: var(--bold);
    text-align: center;
}
.hero h1.title span{
    color: var(--verde);
}

h2.title{
    color: var(--dark);
    font-size: var(--font-title-medium);
    font-weight: var(--semibold);
}

h2.title span{
    color: var(--azul);
}
.crop{
    overflow-x: hidden;
}
.align{
    position: relative;
    right: -158px;
}
.green{
    background-color:var(--verde);
}

h2.title-alternative{
    color: var(--light);
    font-size: var(--font-title-medium);
    font-weight: var(--bold);
    text-align: center;
    line-height: 150%;
}

h2.title-alternative span{
    color: var(--azul);
}

h3{
    font-size: var(--font-subtitle);
    font-weight: var(--semibold);
    padding: 16px 0px;
}

.description{
    color: var(--gray);
    font-size: var(--font-text);
}

footer{
    height: 48px;
    width: 100%;
}

footer .copyright{
    font-size: var(--font-small);
}
@media screen and (max-width: 540px) {
    .hero-figure{
        background:url("../img/app/objeto.png") no-repeat left top cover, url("../img/app/objeto_hero_dir.png") no-repeat right bottom;    
    } 
    .hero h1.title span{
        color: var(--light);
    }
}