*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    /*Primary Colors*/

    --verydark:  hsl(233, 47%, 7%);
    --darkdasat: hsl(244, 38%, 16%);
    --soflviolet: hsl(277, 64%, 61%);

    /*Neural colors*/
    --mainheading:  hsl(0, 0%, 100%);
    --mainparagraph: hsla(0, 0%, 100%, 0.75);
    --statheading: hsla(0, 0%, 100%, 0.6);
    /*Fonts*/

    --font1: "Inter", sans-serif;
    --font2: "Lexend Deca", sans-serif;
}

body{
    min-height: 100dvh;
    font-family: var(--font1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mainheading);
    flex-direction: column;
    background-color: var(--verydark);
}

.card{
    width: 300px;
    border-radius: 10px;
    background-color: var(--darkdasat);
    overflow: hidden;
    margin: 20px 0;
}

.container{
    width: 248px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.container .lead{
    text-align: center;
    font-size: 15px;
    margin: 15px 5px 0 5px;
}
.container .head{
    width: 240px;
    text-align: center;
}
.container .lead h1{
    font-size: 24px;
    text-align: center;
}
.container h1 span{
    color: var(--soflviolet);
}
.container .lead p{
    padding-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    line-height: 1.6; 
    font-family: var(--font1);
    font-size: 14px;   
    color: var(--statheading);

}



.img_main{
    position: relative;    
}
.img_main img{
    display: block;
    width: 100%;  
}

.img_main::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--soflviolet);
    opacity: 0.7; /* Você pode ajustar a opacidade conforme necessário */
    z-index: 1; /* Coloque isso abaixo do conteúdo, mas acima da imagem */
}
 .n1, .n2, .n3{
    font-size: 12px;
    font-family: var(--font1);
    margin-top: 10px;
    line-height: 1.5;

}


.statistic{
    text-align: center;
    margin-bottom: 20px;
}
.statistic p{
    font-family: var(--font2);
    color: var(--statheading);
}