:root { --color-primary: #2A36B8 !important; --color-primary-bg: #aeb5ff52 !important; --box-shadow: 0px 9px 15px #aeb5ff52 !important; } body { font-family: 'Poppins', sans-serif; font-size: 18px; line-height: 1.6; color: #2c3e50; background: #f8f9fa; } h1, h2, h3, h4, h5, h6 { font-family: 'Roboto', sans-serif; font-weight: 700; letter-spacing: inherit; color: #2c3e50; } a { transition: 0.3s ease; color: var(--color-primary); text-decoration: none; } a:hover { color: #1e2a8a; } /* Enhanced Blog List Styling */ .ai-blog-list-item { margin-bottom: 2rem; transition: all 0.3s ease; } .ai-blog-list-item:hover { transform: translateY(-5px); } .ai-list-blog { display: flex; align-items: stretch; background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 8px 25px rgba(42, 54, 184, 0.1); transition: all 0.3s ease; border: 1px solid rgba(42, 54, 184, 0.08); } .ai-list-blog:hover { box-shadow: 0 15px 35px rgba(42, 54, 184, 0.2); border-color: rgba(42, 54, 184, 0.15); } .ai-list-blog .ax-single-blog-post-img { flex: 0 0 400px; position: relative; overflow: hidden; } .ai-list-blog .ax-single-blog-post-img img { width: 100%; height: 280px; object-fit: cover; transition: transform 0.3s ease; } .ai-list-blog .ax-single-blog-post-img:hover img { transform: scale(1.05); } .ai-list-blog .ax-single-blog-post-details { padding: 2rem; width: 100%; background: #fff; } .ai-list-blog h2.ax-single-blog-post-title, .ai-list-blog .entry-title.post-title { font-size: 2.2rem; line-height: 1.3; margin-bottom: 1rem; color: #2c3e50; } .ai-list-blog h2.ax-single-blog-post-title a, .ai-list-blog .entry-title.post-title a { color: #2c3e50; transition: color 0.3s ease; } .ai-list-blog h2.ax-single-blog-post-title a:hover, .ai-list-blog .entry-title.post-title a:hover { color: var(--color-primary); } /* Enhanced Meta Information */ .ai-blog-meta { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; padding: 0.5rem 0; border-bottom: 1px solid rgba(42, 54, 184, 0.1); } .ax-blog-post-author-detalis { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .ax-blog-post-author-img { display: flex; align-items: center; gap: 0.5rem; } .ax-blog-post-author-img img { width: 25px; height: 25px; border-radius: 50%; border: 2px solid rgba(42, 54, 184, 0.1); } .ax-blog-post-author-name { font-weight: 600; color: #2c3e50; font-size: 0.9rem; } .ax-blog-post-author-name:hover { color: var(--color-primary); } .ax-single-blog-post-pub-date p { color: #7f8c8d; font-size: 0.85rem; margin: 0; font-weight: 500; } /* Enhanced Category Badge */ html body .ai-blog-meta .blog-categrory { background: linear-gradient(135deg, var(--color-primary), #3b49df); color: #fff; padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; } .blog-categrory:hover { background: linear-gradient(135deg, #1e2a8a, var(--color-primary)); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(42, 54, 184, 0.3); color: white; } /* Enhanced Excerpt */ .ax-single-blog-post-dres { margin-top: 1rem; } .ax-single-blog-post-dres p { color: #5d6d7e; line-height: 1.6; margin-bottom: 1rem; } /* Enhanced Read More Button */ .ai-readmore { display: inline-block; background: linear-gradient(135deg, var(--color-primary), #3b49df); color: white; padding: 0.7rem 1.5rem; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; border: none; font-size: 0.9rem; letter-spacing: 0.5px; } .ai-readmore:hover { background: linear-gradient(135deg, #1e2a8a, var(--color-primary)); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(42, 54, 184, 0.3); color: white; } /* Form Elements */ input[type="submit"] { border: 1px solid var(--color-gray); border-radius: 25px; font-size: 16px; transition: all 0.3s ease; } p.logged-in-as { font-size: medium; margin: 6px 0; } /* Brand Text */ .brand-text .site-title { font-size: 80px; text-transform: inherit; background: linear-gradient(135deg, var(--color-primary), #3b49df); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .site-info a, .site-info { text-transform: inherit; } /* Animation */ .site-main div.js-scroll:first-child { opacity: 1 !important; } .js-scroll.fade-in-bottom { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; } .js-scroll.fade-in-bottom.show { opacity: 1; transform: translateY(0); } /* Pagination */ .pagination { margin-top: 3rem; display: flex; justify-content: center; } .pagination .page-numbers { display: inline-block; padding: 0.7rem 1rem; margin: 0 0.2rem; background: #fff; border: 1px solid rgba(42, 54, 184, 0.1); border-radius: 8px; color: var(--color-primary); transition: all 0.3s ease; } .pagination .page-numbers:hover, .pagination .page-numbers.current { background: var(--color-primary); color: white; border-color: var(--color-primary); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(42, 54, 184, 0.2); } /* Grid Layout */ .ax-all-blog .ai-blog-list-item { padding: 0 15px; margin-bottom: 30px; } /* Responsive Design */ @media only screen and (min-width: 992px) and (max-width: 1200px) { .ai-list-blog h2.ax-single-blog-post-title, .ai-list-blog .entry-title.post-title { font-size: 1.8rem; } .ai-list-blog .ax-single-blog-post-img { flex: 0 0 350px; } } @media only screen and (max-width: 991px) { .ai-list-blog { flex-direction: column; align-items: stretch; } .ai-list-blog .ax-single-blog-post-img { flex: 1; height: 250px; } .ai-list-blog .ax-single-blog-post-img img { height: 100%; } .ai-list-blog h2.ax-single-blog-post-title, .ai-list-blog .entry-title.post-title { font-size: 1.8rem; } .ai-list-blog .ax-single-blog-post-details { padding: 1.5rem; } .ai-blog-meta { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .ax-blog-post-author-detalis { flex-direction: column; align-items: flex-start; gap: 0.5rem; } } @media only screen and (max-width: 768px) { .ai-list-blog .ax-single-blog-post-img { height: 200px; } .ai-list-blog h2.ax-single-blog-post-title, .ai-list-blog .entry-title.post-title { font-size: 1.5rem; } .ai-list-blog .ax-single-blog-post-details { padding: 1.2rem; } .brand-text .site-title { font-size: 60px; } } @media only screen and (max-width: 480px) { .ai-list-blog .ax-single-blog-post-details { padding: 1rem; } .ai-list-blog h2.ax-single-blog-post-title, .ai-list-blog .entry-title.post-title { font-size: 1.3rem; } .brand-text .site-title { font-size: 40px; } }