/* Blog-specific styles */
.hero-banner { 
    max-width:900px; 
    margin:24px auto; 
    background: linear-gradient(135deg, #5b9bd5, #4a90c2); 
    padding:40px 24px; 
    border-radius:16px; 
    text-align:center; 
    color:#fff; 
    box-shadow: 0 8px 24px rgba(91,155,213,0.3); 
}

.hero-banner h2 { font-size:2.2rem; margin:0 0 12px; font-weight:900; color:#fff; }
.hero-banner p { font-size:1.1rem; margin:0; opacity:0.95; }

article { 
    max-width:800px; 
    margin:32px auto; 
    background:#fff; 
    padding:32px; 
    border-radius:16px; 
    box-shadow: 0 4px 16px rgba(0,0,0,0.08); 
}

article h2 { 
    color:#1a3a5c; 
    font-size:1.8rem; 
    margin-top:32px; 
    margin-bottom:16px; 
    font-weight:800; 
}

article h3 { 
    color:#1a3a5c; 
    font-size:1.4rem; 
    margin-top:28px; 
    margin-bottom:12px; 
    font-weight:700; 
}

article h4 { 
    color:#1a3a5c; 
    font-size:1.2rem; 
    margin-top:24px; 
    margin-bottom:10px; 
    font-weight:700; 
}

article p { 
    margin:16px 0; 
    line-height:1.7; 
    color:#333; 
}

article ul, article ol { margin:16px 0; padding-left:32px; }
article li { margin:8px 0; line-height:1.6; }

article strong { 
    color:#1a3a5c; 
    font-weight:700; 
}

.blog-image { 
    width: 40%;
    max-width: 350px;
    height: auto;
    border-radius: 12px;
    margin: 16px 20px 16px 0;
    display: block;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    float: left;
}

.hero-image { 
    width: 45%;
    max-width: 400px;
    height: auto;
    border-radius: 12px;
    margin: 16px 24px 16px 0;
    display: block;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    float: left;
}

.budget-box { 
    background:#f0f8ff; 
    border-left:4px solid #5b9bd5; 
    padding:20px; 
    margin:24px 0; 
    border-radius:8px; 
}

.budget-box ul { margin:12px 0; }

.key-points { 
    background:#fff5e6; 
    border-left:4px solid #ff6f00; 
    padding:20px; 
    margin:24px 0; 
    border-radius:8px; 
}

@media (max-width:768px){
  .hero-banner h2 { font-size:1.6rem; }
  article { padding:20px; margin:16px; }
  article h2 { font-size:1.5rem; }
  
  .blog-image, .hero-image {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
  }
}