utility.css

.text-center{
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}


.mx-auto{
    margin: auto;
    

}
.flex
{
display: flex;
}
.flex-col{
    flex-direction: column;
}
.items-center{
    align-items: center;
     justify-content: center;
}
.text-center i{
    font-size: 2rem;
    padding: 10px;
}
.container{
    background: rgb(151, 188, 188);
    width: 38vw;
    height: 75vh;
    transition: 3s ease;
    border: 2px solid black;
    background: radial-gradient(rgb(71, 63, 96), transparent);
}
.container:hover{
    background: radial-gradient(rgb(98, 43, 43) ,transparent);
    
     border-radius: 20px;
    }
.text-center::after{
    content: ' ';
    width: 0;
    height: 2px;
    background-color: red;
    display: block;
    margin: auto;
    transition: 3s ease;
}
.text-center:hover::after{
    width: 20%;
}