body{
    margin: 20;
    padding: 0;
    background: #ffffff;
    
    font-family: sans-serif;
}
.heading{
    text-align: center;
    color: rgb(180, 17, 17);
    border: 2px solid gold;
    border-radius: 10%;
   display: block;
   width: 300px;
   margin: 12px auto;

   
}

.container
{
    width:1280px;
   
    margin: 70 auto 0;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   flex-wrap: wrap;
   
}
.container .box
{
    position: relative;
    width: 300px;
    height: 300px;
    background: rgb(140, 201, 207);
    margin:  50px;
    box-sizing: border-box;
    display: inline-block;
    border-radius: 15%;
    
    
}

.container .box .imgbox
{
    position: relative;
    overflow: hidden;
    border-radius: 15%;
}

.container .box .imgbox img
{
    max-width: 100%;
    transition: transform 2s;
    height: 300px;
    width: 300px;
}

.container .box:hover .imgbox img
{
    transform: scale(1.2);
   
}

.container .box .details
{
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    background: rgba(138, 129, 129, 0.8);
    transform: scaleY(0);
    transition: transform .5s;

}

.container .box:hover .details
{
    transform: scaleY(1);
}


.container .box .details .content
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    padding: 15px;
    color: #fff;

}

.container .box .details .content .h2
{
      margin: 0;
      padding: 0;
      font-size: 20px;
      color: rgb(240, 15, 15);
}

.container .box .details .content .p
{
      margin: 10px 0 0;
      padding: 0;
      
}