: class="flex-grow-1" ========================================================== */ .blog-page { min-height: 100%; margin: 0; padding: 0; } /* ========================================================== 2) Blog Header (top header section) ========================================================== */ .blog-header { text-align: center; } .blog-header h1 { font-size: 2.8rem; font-weight: 700; color: #425d79; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 1px; } /* Safe to keep (in case any page still uses an h2 in the header) */ .blog-header h2 { font-size: 1.6rem; font-weight: 600; color: #2c3e50; margin-bottom: 0.75rem; } /* Header text (supports your subtitle

Blog

) */ .blog-header p { font-size: 1.2rem; color: #6c757d; max-width: 640px; margin: 0 auto; font-style: italic; } /* ========================================================== 3) Blog section wrapper ========================================================== */ .section.blog { background-color: #f7f9fc; padding: 2.5rem 0; } /* ========================================================== 4) Blog Posts Layout ========================================================== */ .blog-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; } /* ========================================================== 5) Blog Card ========================================================== */ .blog-card { background: #fff; border-radius: 14px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; height: 100%; } .blog-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); } /* If image is wrapped in a link, keep it block-level */ .blog-card > a { display: block; text-decoration: none; color: inherit; } /* Card Image (supports or ) */ .blog-card img { width: 100%; height: 220px; object-fit: cover; display: block; } /* Card Content */ .blog-card-content { padding: 1.8rem; display: flex; flex-direction: column; flex-grow: 1; } .blog-card-content h2, .blog-card-content h3 { font-size: 1.5rem; color: #2c3e50; margin-bottom: 0.9rem; font-weight: 600; line-height: 1.3; } .blog-card-content p { color: #5d6d7e; font-size: 1.05rem; margin-bottom: 1.5rem; flex-grow: 1; } /* Read More Button */ .blog-card-content a.read-more { align-self: flex-start; background-color: #3498db; color: #fff; font-weight: 600; font-size: 0.95rem; padding: 0.55rem 1.3rem; border-radius: 30px; text-decoration: none; transition: background-color 0.3s ease, box-shadow 0.3s ease; } .blog-card-content a.read-more:hover { background-color: #2c80b4; box-shadow: 0 5px 20px rgba(44, 128, 180, 0.35); } /* ========================================================== 6) OPTIONAL full-card clickable link helper ========================================================== */ .blog-card-click { text-decoration: none; color: inherit; display: block; } /* ========================================================== 7) Sidebar ========================================================== */ .sidebar { background: #fff; padding: 2rem; border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); } .sidebar h2, .sidebar h4 { font-weight: 700; margin-bottom: 1.2rem; color: #2980b9; border-bottom: 2px solid #2980b9; padding-bottom: 0.5rem; } .sidebar ul { list-style: none; padding-left: 0; margin-bottom: 0; } .sidebar ul li { margin-bottom: 0.75rem; } .sidebar ul li a { color: #5d6d7e; font-weight: 500; text-decoration: none; transition: color 0.3s; } .sidebar ul li a:hover { color: #3498db; text-decoration: underline; } /* ========================================================== 8) Responsive tweaks ========================================================== */ @media (max-width: 991.98px) { .sidebar { margin-top: 1rem; } .blog-header h1 { font-size: 2.2rem; } }