.blog-container{background:#fff;border-radius:20px;box-shadow:0 10px 20px rgba(0,0,0,.1);cursor:pointer;max-height:400px;overflow:hidden;position:relative;transition:transform .3s ease,box-shadow .3s ease;width:550px}.blog-container:hover{box-shadow:0 15px 30px rgba(0,0,0,.15);transform:translateY(-5px)}.blog-image-wrapper{animation:gradientShift 3s ease infinite,pulse 2s ease-in-out infinite;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);background-size:400% 400%;height:400px;overflow:hidden;position:relative;transition:all .3s ease;width:100%}.blog-image-wrapper:before{animation:shimmer 2s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.4) 25%,hsla(0,0%,100%,.8) 50%,hsla(0,0%,100%,.4) 75%,transparent);background-size:200% 100%;bottom:0;content:"";left:0;position:absolute;right:0;top:0;transition:opacity .3s ease;z-index:1}.blog-image-wrapper.loaded{animation:none;background:transparent}.blog-image-wrapper.loaded:before{opacity:0;pointer-events:none}.card-loading-indicator{left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);transition:opacity .3s ease;z-index:3}.card-loading-text{animation:textPulse 2s ease-in-out infinite;color:var(--color-primary);font-size:.9rem;font-weight:600;opacity:.9;text-shadow:0 0 10px rgba(0,255,132,.3)}.blog-container img{backface-visibility:hidden;height:100%;-o-object-fit:cover;object-fit:cover;opacity:0;transform:translateZ(0);transition:transform .5s ease,opacity .3s ease;width:100%;will-change:transform}.blog-container img.loaded{opacity:1}.blog-container:hover img{transform:scale(1.05)}.blog-overlay{background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.6));height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease;width:100%}.blog-container:hover .blog-overlay{opacity:1}.blog-content{background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);bottom:0;left:0;padding:20px;position:absolute;transform:translateY(20px);transition:transform .3s ease;width:100%}.blog-container:hover .blog-content{transform:translateY(0)}.blog-container h2{color:#fff;font-size:1.8rem;font-weight:600;margin:0 0 15px;opacity:0;text-shadow:2px 2px 4px rgba(0,0,0,.3);transform:translateY(20px);transition:all .3s ease}.blog-container:hover h2{opacity:1;transform:translateY(0)}.blog-card-read-more-btn{align-items:center;background:var(--color-primary);border-radius:25px;color:#fff;display:inline-flex;font-size:.9rem;font-weight:500;opacity:0;padding:8px 20px;text-decoration:none;transform:translateY(20px);transition:all .3s ease}.blog-container:hover .blog-card-read-more-btn{opacity:1;transform:translateY(0)}.blog-card-read-more-btn .arrow{margin-left:8px;transition:transform .3s ease}.blog-card-read-more-btn:hover .arrow{transform:translateX(5px)}.blog-category-tag{background:var(--color-primary);border-radius:20px;box-shadow:0 4px 10px rgba(0,0,0,.2);color:#fff;font-size:.8rem;font-weight:500;left:20px;opacity:0;padding:6px 15px;position:absolute;top:20px;transform:translateY(-10px);transition:all .3s ease;z-index:2}.blog-container:hover .blog-category-tag{opacity:1;transform:translateY(0)}@media (max-width:1200px){.blog-container{max-height:350px;width:80%}.blog-card-read-more-btn,.blog-category-tag,.blog-container h2{opacity:1;transform:translateY(0)}.blog-content{transform:translateY(0)}}@media (max-width:900px){.blog-container{max-height:320px;width:90%}.blog-container h2{font-size:1.5rem}.blog-card-read-more-btn,.blog-category-tag,.blog-container h2{opacity:1;transform:translateY(0)}.blog-content{transform:translateY(0)}}@media (max-width:600px){.blog-container{max-height:280px;width:100%}.blog-container h2{font-size:1.2rem}.blog-card-read-more-btn{font-size:.8rem;padding:6px 15px}.blog-category-tag{font-size:.7rem;left:15px;padding:4px 10px;top:15px}.blog-card-read-more-btn,.blog-category-tag,.blog-container h2{opacity:1;transform:translateY(0)}.blog-content{transform:translateY(0)}}@media (max-width:400px){.blog-container h2{font-size:1rem}.blog-card-read-more-btn{font-size:.75rem;padding:5px 12px}.blog-category-tag{font-size:.65rem;left:10px;padding:3px 8px;top:10px}}@keyframes gradientShift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}@keyframes textPulse{0%,to{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}