:root{

    /*colors*/
    --Verydarkblue: hsl(233, 47%, 7%);
    --Darkdesaturatedblue: hsl(244, 38%, 16%);
    --Softviolet: hsl(277, 64%, 61%);
    --White: hsl(0, 0%, 100%);
    --Slightlytransparent: hsla(0, 0%, 100%, 0.75);
    --Slightly: hsla(0, 0%, 100%, 0.6);
    
    /*font size variable*/
    --fontBase: "Inter", sans-serif;
    --fontAlternative:'Lexend Deca', sans-serif;
    
    --headLine: bold 28px/33px var(--fontBase);
    --Body: 15px/25px var(--fontBase);
    --Label: 15px/25px var(--fontAlternative);
    --Number: 15px/25px var(--fontBase);
    
    --headLineMobile1: bold 28px/33px var(--fontBase);
    --BodyMobile: 15px/25px var(--fontBase);
    --LabelMobile: 15px/25px var(--fontAlternative);
    --NumberMobile: bold 24px/12px var(--fontBase);
}

body{
    background-color: var(--Verydarkblue);
}

.Main{
    margin: 86px auto;
    background-color: var(--Darkdesaturatedblue);
    text-align: center;
    min-width: 340px;
    width: 85%;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.Main-image{
    width: 100%;
    height: 242px;
    background-image:   linear-gradient(180deg, rgba(158, 85, 202, 0.8) 0%, rgba(100, 54, 128, 0.84) 100%),url("../images/image-header-mobile.jpg");
    background-image: -webkit-gradient linear-gradient(180deg, rgba(158, 85, 202, 0.80) 0%,rgba(100, 54, 128, 0.84) 100%),url("../images/image-header-mobile.jpg");
    background-image: -moz-linear-gradient(180deg, rgba(158, 85, 202, 0.80) 0%, rgba(100, 54, 128, 0.84) 100%),url("../images/image-header-mobile.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.Main-text h1{
    margin-block-start: 40px;
    margin-block-end: 20px;
    padding:0 22px;
    font:var(--headLineMobile1);
    color: var(--White);
}
.Main-text h1 span{
    color: var(--Softviolet);
}

.Main-text p{
    padding: 0 35px;
    font: var(--BodyMobile);
    color: var(--Slightlytransparent);
    max-width: 360px;
    margin: 0 auto;
}

.stats{
 margin-block-start: 40px;
 margin-block-end: 40px;
 padding-block-end: 40px;
}

.stat h2{

    font: var(--NumberMobile);
    color: var(--Slightly);
    margin-block-end: 15px;
}

.stat p{
    font: var(--LabelMobile);
    letter-spacing: 0.7px;
    margin-block-end: 30px;
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .stats{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .Main{
        display: flex;
        flex-direction: row;
        max-width: 1110px;
        max-height: 452px;
    }
    .Main-text{
        order: -1;
        text-align: left;
    }
    .Main-text h1{
        margin-inline-start: 75px;
        margin-block-start: 75px;
        padding-left: 0;
    }
    .Main-text .description{
        padding-left: 0;
        margin: 32px 0px 80px 75px;
    }
    .Main-image{
        width: 539px;
        height: 446px;
        margin-right: 0;
    }
    .stats{
        justify-content:flex-start;
        margin: 0 0 0 75px;
        text-align: left;
        padding: 0;
    }
    
    .stat p{
        margin-block-start: 15px;
        padding-left: 0;
    }
}