body {
    margin: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.card {
    padding: 20px;
    width: 300px;

    display:block;

    margin: 0 auto;

    text-align: center;

    background-color: #E1E8ED;
    color: #2b2839;
    border-bottom: 8px solid #66757F;


    position: relative;

    overflow: hidden;

}

.avatar {
    width: 150px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    position: relative;
    z-index: 2;

}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  
  /* height: 100%;
  width: 100%; */

  top: -5px;
  right: -5px;
  bottom:-5px;
  left:-5px;

  background-image: url('./images/background.webp');
  /* background-size: contain;  */
  background-size: cover;

  background-position: center ;
  background-repeat:no-repeat;
  opacity:0; 
  transition: opacity 1s ease;
  z-index: 1; 
}

.card::before {
  margin: 4px;
  /* yaha pe ye margin koi kam nhi kr rha hai */
}

.card:hover::before {
  opacity: 1;
  
}

.main-content {
    position: relative;
    z-index: 2;
    transition: 1s ease;
}

.card:hover .main-content{
    color: rgb(94, 1, 155);
    transform: translateY(-10px);
    /* translateY(-10px) ka mtlb hai ki jab ham mouse ko card ke upar le jaenge toh hamara content thoda sa uppar chala jayega  */
    /* border: 1px dotted white; */
}

.card:hover .avatar {
    border: 2px solid white;
}