* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:;
}

html,
body {
  height: 100%;
  width: 100%;
  background-color: black;
}

/* Z-index demo Concept*/
/*
#box1 {
    height: 200px;
    width: 200px;
    background-color: crimson;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}
/* 
#box2 {
    height: 200px;
    width: 200px;
    background-color: beige;
    position: absolute;
    top: 30%;
    left: 30%;
    z-index: 7;
}

#box3 {
    height: 200px;
    width: 200px;
    background-color: greenyellow;
    position: absolute;
    top: 50%;
    left: 40%;
    z-index: 6;
} */


/* Display Flex Concept */
/* #parent {
  height: 100%;
  width: 100%;
  background-color: rgb(0, 0, 0);
  /*rows and columns ke form mei divide hogyi*/
  /* display: flex;
  /*Display jo hai row(default) se Column ke form mei hojayga*/
  /* flex-direction: row;
  /*Y-axis (cross) pe movement*/
  /* align-items: center;
  /*X-axis (main) pe movement*/
  /* justify-content: center;
  /* gap: 15px;
  /* flex-wrap: wrap;
} */
/* #child1 {
  flex-shrink: 0;
  height: 200px;
  width: 200px;
  background-color: crimson;
  border: 3px solid white;
}
#child2 {
  flex-shrink: 0;
  height: 200px;
  width: 200px;
  background-color: rgb(20, 220, 133);
  border: 3px solid white;
}
#child3 {
  flex-shrink: 0;
  height: 200px;
  width: 200px;
  background-color: rgb(20, 63, 220);
  border: 3px solid white;
}
#child4 {
  flex-shrink: 0;
  height: 200px;
  width: 200px;
  background-color: crimson;
  border: 3px solid white;
}
#child5 {
  flex-shrink: 0;
  height: 200px;
  width: 200px;
  background-color: rgb(20, 220, 133);
  border: 3px solid white;
}
#child6 {
  flex-shrink: 0;
  height: 200px;
  width: 200px;
  background-color: rgb(20, 63, 220);
  border: 3px solid white;
}
#child7 {
  flex-shrink: 0;
  height: 200px;
  width: 200px;
  background-color: rgb(127, 20, 220);
  border: 3px solid white;
}
#child8 {
  flex-shrink: 0;
  height: 200px;
  width: 200px;
  background-color: rgb(220, 217, 20);
  border: 3px solid white;
}
#child9 {
  flex-shrink: 0;
  height: 200px;
  width: 200px;
  background-color: rgb(206, 146, 14);
  border: 3px solid white;
} */




#main {
    height: 100%;
    width: 100%;
    background-color: lightblue;
    padding: 20px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.card {
    height: 300px;
    width: 250px;
    background-color: white;
    border-radius: 10px;
    /* X aur Y-Axis, Blur, shadow color */
    box-shadow: 5px 10px 25px rgba(0, 0, 0, 0.258);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    padding: 20px;
}

.card p {
    font-size: 14px;
    font-weight: 600;
    color: grey;
    text-align: center;
}

.card img {
    height: 100px;
    width: 100px;
    object-fit: cover;
    border-radius: 50%;
}

/* Note:
What is the Difference between Object-fit: Cover and Background-size: Cover ...?

Object-fit: Cover -> img tag ke liye yani wo img src tag
Background-size: Cover -> background image ke liye use hota hai
*/

.card h2 {
    font-weight: 500;
    font-size: 26px;
}

.card button {
    border-radius: 50px;
    padding: 10px 30px;
    background-color: #3fb8fd;
    border: none;
    color: aliceblue;
    font-weight: 600;
    border: 3px solid #3fb8fd;
}

.card button:hover {
    /* background-color: rgb(244, 85, 27); */
    background-color: transparent;
    color: #3fb8fd;
    cursor: pointer;
}