.blog-author
{
    color: #747474;
    font-size: 20px;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    text-align: left;
    vertical-align: middle;   
}
.blog-keywords
{
    color: #747474;
    font-size: 22px;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    text-align: left;
    vertical-align: middle;   
}
.blog-img
{
    height: 400px;
    border-radius: 20px;    
    padding-right: 10px;
}
.counter-box {
display: block;
background: #6266ea;
padding: 40px 20px 37px;
text-align: center;
border-radius: 20px;
}

.counter-box p {
margin: 5px 0 0;
padding: 0;
color: #ffffff;
font-size: 18px;
font-weight: 500
}

.counter-box i {
font-size: 60px;
margin: 0 0 15px;
color: #d2d2d2
}

.counter { 
display: block;
font-size: 32px;
font-weight: 700;
color: #dddddd;
line-height: 28px
}

.counter-box.colored {
    background: #3acf87;
}

.counter-box.colored p,
.counter-box.colored i,
.counter-box.colored .counter {
color: #fff
}

/* This CSS is for Flip Card */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

.container .box{
    position: relative;
    width: 300px;
    height: 300px;
    margin: 20px;
    transform-style: preserve-3d;
    perspective: 1000px;
    cursor: pointer;
}

.container .box .body{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: 0.9s ease;
}



.container .box .body .imgContainer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.container .box .body .imgContainer img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container .box .body .content{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #6266ea;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
}

.container .box:hover .body{
    transform: rotateY(180deg);
}

.container .box .body .content div{
    transform-style: preserve-3d;
    padding: 20px;
    background: linear-gradient(45deg, #194775,#000000);
    transform: translateZ(100px);
}

.container .box .body .content div h3{
    letter-spacing: 1px;
}