* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: cursive;
}
.center-box {
    height: 100vh;
    background-color: rgb(251, 136, 155);
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    background: white;
    padding: 45px 40px;
    border-radius: 12px;
    text-align: center;
    width: 100%;
    max-width: 420px;
}
.card h1{
    color: rgb(112, 20, 20);
    font-size: 25px;
}
.card a{
    text-decoration: none;
}
.card img{
    width: 120px;
    animation : zoomPulse 1.5s infinite ease-in-out;
}
@keyframes zoomPulse{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.15);
    }
    100%{
        transform: scale(1);
    }
}
.yes-btn{
    font-family: cursive;
    background-color:rgb(234, 63, 92);
    font-size: 15px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    padding: 7px 30px 9px 30px;
    border: 1px solid rgb(112, 20, 20);
    border-radius: 35px;
    cursor: pointer;
    transition: transform 0.3s ease;
    position: relative;
}
.no-btn{
    font-family: cursive;
    background-color: rgb(255, 255, 255);
    font-weight: bold;
    color: rgb(0, 0, 0);
    font-size: 15px;
    padding: 7px 30px 9px 30px;
    border: 1px solid rgb(112, 20, 20);
    border-radius: 35px;
    cursor: pointer;
}
.yes-btn:hover{
    transform: scale(1.25);
}

.parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    background-color: rgb(251, 136, 155);
    height: 100vh;
    /* justify-content: center;
    align-items: center;  */
}
  
.div1 { 
    grid-area: 1 / 1 / 2 / 2; 
    background: linear-gradient(
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
    ),
    url(images/);
}
.div2 { 
    grid-area: 1 / 2 / 2 / 3; 
    background: linear-gradient(
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
    ),
    url(images/);
}
.div3 { 
    grid-area: 1 / 3 / 2 / 4; 
    background: linear-gradient(
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
    ),
    url(images/);
}
.div4 { 
    grid-area: 2 / 1 / 3 / 2; 
    background: linear-gradient(
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
    ),
    url(images/);
}
.div5 { 
    grid-area: 2 / 2 / 3 / 3; 
    
}
.div6 { 
    grid-area: 2 / 3 / 3 / 4; 
    background: linear-gradient(
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
    ),
    url(images/);
}
.div7 { 
    grid-area: 3 / 1 / 4 / 2; 
    background: linear-gradient(
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
    ),
    url(images/);
}
.div8 { 
    grid-area: 3 / 2 / 4 / 3; 
    background: linear-gradient(
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
    ),
    url(images/);
}
.div9 { 
    grid-area: 3 / 3 / 4 / 4; 
    background: linear-gradient(
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
    ),
    url(images/);
}

.common{
    background-color:rgba(255, 208, 216,0.5) ;
    max-height: 420px;
    width: 100%;
    border: 1 px solid rgb(251, 136, 155);
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    text-align: center;
    color: white;
    padding: 30px 35px;
    position: relative;
    /* justify-content: center;
    align-items: center; */
}
.common h2{
    left: 8;
    position: absolute;
    transition: transform 0.3s ease;
}
.common p{
    position:absolute;
    /* bottom: -50px; */
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.common:hover h2{
    transform: translateX(145px);
}
.common:hover p{
    left : 15px;
    right:15px;
    transform: translateY(38px);
    opacity: 1;
}