/* Desire Gym Custom Blog Page CSS */

.custom-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; margin-bottom: 30px; }

.custom-blog-card { background: transparent; overflow: hidden; display: flex; flex-direction: column; }

.custom-blog-img-wrap { display: block; position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; margin-bottom: 15px; height: 210px; }

.custom-blog-img-wrap img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }

.custom-blog-date { position: absolute; top: 15px; left: 15px; background: rgba(34, 34, 34, 0.9); color: #fff; padding: 5px 10px; text-align: center; z-index: 10; }

.custom-blog-date .day { display: block; font-size: 18px; font-weight: 700; line-height: 1; margin-bottom: 3px; font-family: Poppins; }

.custom-blog-date .month { display: block; font-size: 11.2px !important; letter-spacing: 0.7px; font-family: Poppins; opacity: .6; font-weight: 400; }

.custom-blog-content { padding: 0; display: flex; flex-direction: column; flex-grow: 1; }

.custom-blog-title { font-size: 18px !important; margin: 0 0 15px 0 !important; line-height: 1 !important; font-weight: 700 !important; font-family: "Open Sans", sans-serif !important; }

.custom-blog-title a { text-decoration: none !important; color: #0b0b0b !important; }

.custom-blog-excerpt { font-size: 13px !important; color: #777 !important; line-height: 24px !important; margin-bottom: 20px !important; flex-grow: 1; font-family: "Open Sans", sans-serif !important; font-weight: 400 !important; }

.custom-blog-loading { text-align: center; padding: 30px 0; display: none; width: 100%; }

.dots-loader { display: flex; justify-content: center; align-items: center; gap: 8px; }

.dots-loader .dot { width: 14px; height: 14px; background-color: #d1d1d1; border-radius: 50%; animation: dotPulse 1.4s infinite ease-in-out both; }

.dots-loader .dot:nth-child(1) { animation-delay: -0.32s; }
.dots-loader .dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes dotPulse {
    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

@media (max-width: 1024px) {
    .custom-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .custom-blog-grid { grid-template-columns: 1fr; }
}