/* Blog-specific styles */
:root {
    --blog-primary-color: #FF9900;
    --blog-primary-gradient: linear-gradient(135deg, #FF9900, #F57C00);
    --blog-text-dark: #333;
    --blog-text-medium: #666;
    --blog-text-light: #777;
    --blog-bg-light: #f9f9f9;
    --blog-border-light: #eee;
}

/* Blog Card Animations */
.blog-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* Blog Content Typography */
.blog-content h2, .blog-content h3, .blog-content h4 {
    color: var(--blog-text-dark);
    font-weight: 600;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
}

.blog-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
}

.blog-content a {
    color: var(--blog-primary-color);
    text-decoration: none;
}

.blog-content a:hover {
    text-decoration: underline;
}

/* Button Styles */
.btn-blog-primary {
    background: var(--blog-primary-gradient);
    border: none;
    color: white;
    font-weight: 600;
}

.btn-blog-primary:hover {
    background: linear-gradient(135deg, #F57C00, #FF9900);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 153, 0, 0.3);
}

/* Pagination Styles */
.blog-pagination .page-link {
    color: var(--blog-primary-color);
    border-color: var(--blog-border-light);
}

.blog-pagination .page-item.active .page-link {
    background: var(--blog-primary-gradient);
    border-color: var(--blog-primary-color);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .blog-section {
        padding-top: 100px !important;
    }
    
    .blog-detail {
        padding-top: 100px !important;
    }
    
    .section-title {
        font-size: 2rem !important;
    }
}