body{
    margin: 0;
    background-color: #f2f2f2;
    color: #333;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header{
    margin-top: 30px;
    text-align: center;
    margin: 40px 20px 20px;
}

.subheading{
    color: gray;
    font-size: 14px;
    margin: 0;
}

.description{
    color: #555;
    max-width: 700px;
    margin: auto;
}

.cards{
    display: grid;
    grid-template-columns:repeat(3, 1fr) ;
    grid-template-rows: auto;
    gap: 20px;
    max-width: 1100px;
    padding: 20px;
    position: relative;
    top: -60px;
}

.card{
    background-color: white;
    padding: 20px 20px 80px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    position: relative;
    text-align: left;
    display: block;
    justify-content: space-between;
    font-size: small;
}

/* cards placement */

.supervisor{
    grid-column: 1;
    grid-row: 2;
    border-top: solid blue;
}

.team-builder{
    grid-column: 2 ;
    grid-row: 1;
    transform: translateY(60%);
    border-top: solid orange;
}

.karma{
    grid-column:2 ;
    grid-row: 2;
    transform: translateY(60%);
    border-top: solid orangered;
    }

.calculator{
    grid-column: 3;
    grid-row: 2;
    border-top: solid blue;
}

.card img{
    width: 50px;
    height: 50px;
    object-fit: contain;
    flex-shrink: 0;
    position: absolute;
    bottom: 10px;
    right: 20px;
    
}