@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");body{font-family:Poppins,sans-serif}.blog-container{display:flex;gap:2rem;padding:2rem;max-width:1200px;margin:0 auto;flex-wrap:wrap}.blog-main{flex:1 1 65%;min-width:300px;border:1px solid #ddd}.blog-image{margin-bottom:1.5rem;border-radius:8px;overflow:hidden}.blog-title{font-size:2rem;font-weight:700;margin-bottom:1rem}.blog-meta{display:flex;gap:1.5rem;color:#555;font-size:.875rem;margin-bottom:1.5rem;align-items:center}.blog-meta .icon{margin-right:.3rem;color:#333;font-size:.875rem;vertical-align:middle;background:none;padding:0}.blog-content p{line-height:1.8;margin-bottom:1rem}.blog-content li{margin-left:1.5rem;margin-bottom:.5rem}.blog-sidebar{flex:1 1 30%;min-width:250px;display:flex;flex-direction:column;gap:2rem}.blog-sidebar .categories,.blog-sidebar .recent-post,.tags-section{background-color:#fff;padding:20px;border:1px solid #ddd}.blog-sidebar h3{font-size:1.2rem;margin-bottom:.5rem;border-bottom:1px dotted #ccc;padding:15px 0}.blog-sidebar ul{list-style:none;padding:0;margin:0}.blog-sidebar li{padding:10px 0;cursor:pointer;font-size:15px}.blog-sidebar a{color:#0070f3;text-decoration:none}.blog-sidebar a:hover{text-decoration:underline}.post-date{font-size:.75rem;color:#888}.tags-section h3{font-size:1.1rem;font-weight:600;margin-bottom:.5rem;color:#333}.tags-container{display:flex;flex-wrap:wrap;gap:1rem}.tag-box{font-size:.875rem;padding:.4rem .8rem;border-radius:9999px;border:1px solid #ddd;background-color:#f3f4f6;color:#555;cursor:pointer;transition:all .3s ease}.tag-box:hover{background-color:#eb6425;color:#fff;border-color:#eb8525;transform:translateY(-2px)}@media screen and (max-width:768px){.blog-container,.blog-sidebar{flex-direction:column}.blog-sidebar{gap:1.5rem}}@media (max-width:1024px){.blog-container{gap:25px}.blog-title{font-size:1.9rem}}@media (max-width:900px){.blog-container{flex-direction:column}.blog-sidebar{position:static;width:100%}.blog-main{width:100%}}@media (max-width:600px){.blog-container{padding:15px 12px}.blog-main{padding:18px}.blog-title{font-size:1.5rem}.blog-content h2{font-size:1.3rem}.blog-content li,.blog-content p{font-size:15px;line-height:1.8}.blog-meta{font-size:13px;gap:10px}.recent-post-item a{gap:8px}.tag-box{font-size:12px;padding:5px 10px}}@media (max-width:400px){.blog-title{font-size:1.3rem}.blog-meta{flex-direction:column;align-items:flex-start}}