body {
    background-color: black;
}

.card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: rgb(255, 255, 255);
    max-width: 1200px;
    height: auto;
    margin: 200px auto;
    color: white;
    font-family: "Lexend Deca", sans-serif;
    cursor: pointer;
    overflow: hidden;
    border-radius: 15px;
    

}

.card:hover {
    cursor: pointer;
    transform: scale(1.03);
    transition: transform 0.3s ease;

}


.info {
    background-color: rgb(3, 3, 80);
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    overflow: hidden;
    padding-bottom: 40px;
    height: 100%;

}

h1{
    font-size: 50px;
    margin-left: 30px;
}

.insights {
    color: rgb(238, 130, 238);
}

.para {
    font-size: 16px;
    color: silver;
    margin-left: 30px;
    margin-top: -20px;
    margin-bottom: 25px;
}

.stats > p {
    font-size: 23px;
}

.stats  span{
    color: silver;
    font-size: 13px;

}

.stats {
    display: flex;
    justify-content: space-around;
    gap: 50pX;
}

.Img {
    background-image:
     linear-gradient(rgba(227, 121, 227, 0.7), rgba(238, 130, 238, 0.7)), 
    url(https://cdn-dynmedia-1.microsoft.com/is/image/microsoftcorp/O2019-Hero-image-x2:VP1-539x440?resMode=sharp2&op_usm=1.5,0.65,15,0&wid=1920&hei=720&qlt=75&fit=constrain);
    background-size: cover;
    height: 100%;

}

@media (max-width:820px) {
    .card {
        display: grid;
        width: 90%;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2fr;
        
        
        
    }

    .info {
        grid-area: 2/1/3/2;
        text-align: center;

    }

    .para{
        justify-content: space-around;
    }

    h1{
        justify-content: space-around;
    }




}