html, body {
    max-width: 100%;
    overflow-x: hidden;
}
.sub-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
   
}
  .sub-card{
    
   margin-top: 17%;
   margin-left: 12%;
   margin-right: -100px;
    transform: translate(-50%,-50%);
    width: 360px;
    height: 360px;
    
    background: #000;
}

 .sub-card .sub-img{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

 .sub-card .sub-img img{
 width: 100%;
 transition: .5s;
}
 .sub-card:hover .sub-img img{
 opacity: .5;
 transform: translateX(30%);
}
.sub-card .sub-details{
 position: absolute;
 top: 0;
 left: 0;
 width: 70%;
 height: 100%;
 background: #bababa;
 transition: .5s;
 transform-origin: left;
 transform: perspective(2000px) rotateY(-90deg);

}
.sub-card:hover .sub-details{
 transform: perspective(2000px) rotateY(0deg);
}
.sub-card .sub-details .sub-center{
   
    text-align: center;
    background: #fff;
    position: absolute;
   top: 20%;
   transform: translateY(-5%);

}
.sub-card .sub-details .sub-center h1{
    margin: 18px;
    padding: 0;
    line-height: 20px;
    font-size: 20px;
    text-transform: uppercase;
}
.sub-card .sub-details .sub-center p{
    margin: 10px 0;
    padding: 0;
    color: #262626;

}

@media(max-width: 1544px){
.sub-card{
    margin-left: 192px;
    margin-right: -150px
}
}
@media(max-width: 1244px){
    .content-sec{
        padding: 0 0 64px;}
    .sub-card{
        margin-left: 377px;
    margin-right: 11px;
    margin-top: 254px;
    margin-bottom: -180px;
    }
}

@media(max-width: 720px){
    .sub-card{
        margin-left: 324px;
    }
}
@media(max-width: 667px){
    .sub-card{
        width: 278px;
        height: 278px;
    }
    .sub-card .sub-details .sub-center h1{
        font-size: 14px;
    }
    .sub-card .sub-details .sub-center p{
        font-size: 12px;
    }
    .sub-card .sub-details .sub-center {
        top: 11%;
    }
}
@media(max-width: 374px){
    .sub-card{
        margin-left: 180px;
        margin-right: -127px};
}
@media(max-width: 584px){
    .sub-card{
        margin-right: -10px;
    }
}
@media(max-width: 563px){
    .sub-card{
        margin-right: -26px;
    margin-left: 267px;
    margin-top: 210px;
    }
}
@media(max-width: 490px){
    .sub-card{
        margin-right: -29px;
    margin-left: 252px;
    margin-top: 210px;
}
    
}

@media(max-width: 473px){
    .sub-card{
    margin-right: -100px;
    margin-left: 168px;
    margin-top: 210px;}
}
@media(max-width: 473px){
    .sub-card{
        margin-right: -136px;
        margin-left: 138px;
        margin-top: 207px;
    }
}