@charset "utf-8";

.blog-banner .right { width: 40%; text-align: right; padding-right: 10%;}
.blog-listing { display: flex; flex-wrap: wrap; margin: 0 -15px;}
.blog-listing .blog-box { padding: 0 15px 50px; width: 33.33%;}
.blog-listing .blog-box .pic { padding-bottom: 20px;}
.blog-listing .blog-box .pic img { width: 100%; height: 310px; object-fit: cover; object-position: center; border-radius: 16px;}
.blog-listing .blog-box .blog-title {font-size: 24px; line-height: 1.3; color: var(--blue); font-weight: 600; letter-spacing: 3%;font-family: var(--title-font);    overflow: hidden; display: -webkit-box;  -webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.blog-listing .blog-box .blog-title a{ color: var(--blue); }
.blog-listing .blog-box .date-time { display: flex; padding-top: 15px; gap: 20px; font-family: var(--title-font); color: #373737; letter-spacing: 2%;}
.circle1 {animation: moveCircle1 4s ease-in-out infinite; transform-origin: center;}
.circle2 {animation: moveCircle2 4s ease-in-out infinite; transform-origin: center;}
@keyframes moveCircle1 {
    0%,100% {
    transform: translate(0px,0px);
    }
    50% {
    transform: translate(63px,-63px);
    }
}
@keyframes moveCircle2 {
    0%,100% {
    transform: translate(0px,0px);
    }
    50% {
    transform: translate(-63px,63px);
    }
}
@media (max-width: 1440px) {
    .blog-listing .blog-box .pic img { height: 220px;}
    .blog-listing .blog-box .blog-title { font-size: 20px;} 
}
@media (max-width: 991px) {
    .blog-listing .blog-box { width: 50%;}
    .blog-listing .blog-box .pic img { height: 216px; border-radius: 10px;} 
}
@media (max-width: 767px) {
    .blog-listing .blog-box { width: 100%; padding-bottom: 20px;margin-bottom:20px;}
    .blog-listing .blog-box .pic{ padding-bottom: 12px;}
    .blog-listing .blog-box .blog-title { font-size: 16px;}
    .blog-banner { position: relative;}
    .blog-banner .left { width: 100%; position: relative; padding-right: 0!important; z-index: 9;}
    .blog-banner .right { width: 100%; text-align: center; padding-right: 0; position: absolute; left: 0; top: 20px;}
}