@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap');

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

.container{
    width:100%;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:hsl(233, 47%, 7%);

}

.stats-preview-component{
    display:flex;
    width:1200px;
    background-color:hsl(244, 38%, 16%);
    border-radius:10px;
    overflow: hidden;
    contain:content;
}

.text-section{
    padding:70px 140px 70px 70px;
    color:white;
    font-family: 'Inter', sans-serif;
    display:flex;
    flex-direction: column;
    gap:50px;
}

.details{
    display:flex;
    gap:30px;
    flex-direction: column;
    align-items:flex-start;
}

.details h1{
    font-size:2.5rem;
}

.details p{
    font-size: 15px;
    color:hsla(0, 0%, 100%, 0.75);
    line-height: 1.8;
}

.details h1 span{
    color:hsl(277, 70%, 61%);
}

.stats{
    display:flex;
    gap: 55px;
}

.stats div h1{
    font-size: 1.5rem;
    color:white;
    font-family: 'Inter', sans-serif;
    text-transform: none;
}

.stats div{
    font-family: 'Lexend Deca', sans-serif;
    text-transform:uppercase;
    font-size:13px;
    color:hsla(0, 0%, 100%, 0.6);
    letter-spacing: 1px;
}

.img-section{
    display:flex;
}

.img-section img{
    filter:contrast(110%);
}


.img-section::after{
    content:'';
    width:100%;
    height:100%;
    background-color: hsl(277, 70%, 61%);
    position:absolute;
    opacity:60%;
    
}

@media (max-width:500px){
    .stats-preview-component{
        width:90%;
        flex-direction: column-reverse;
    }

    .text-section{
        padding: 30px 20px 30px 20px;
        align-items:center;
        text-align:center;
    }

    .stats{
        flex-direction: column;
    }

    .img-section{
        content:url("images/image-header-mobile.jpg");
    }
}