:root{--secondary-color:#00000075}.blog-container{width:45%;box-shadow:0 3px 8px rgba(0,0,0,.24);transition:all .35s ease;border:2px solid transparent}.blog-container:hover{transform:scale(1.05);border:2px solid var(--primary-color)}.blog-container h5{color:var(--primary-color)}.blog-container p{color:var(--secondary-color);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;height:50px}.blog-intro{position:relative;background-image:url(/_next/static/media/blog-bg.1785f8b9.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;height:50vh;overflow:hidden;margin-bottom:30px}.blog-intro,.blog-intro .blog-intro-layer{width:100%;border-bottom-left-radius:23px;border-bottom-right-radius:23px}.blog-intro .blog-intro-layer{position:absolute;top:0;left:0;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center}.blog-intro .blog-intro-layer h2{color:white;font-size:2rem;text-align:center;width:60%;margin:2rem 0 0}h1.page-title{width:-moz-fit-content;width:fit-content;font-size:30px;margin-left:3%;display:flex;align-items:center;gap:10px}.blogs-page-container{width:100%;display:flex;margin-bottom:35px;justify-content:space-evenly}.blogs-page-container .blogs-pagination{width:60%}.blogs-page-container .all-blogs-container{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:40px;padding:25px 0}.blogs-page-container .other-blogs-container{width:30%}.blogs-page-container .other-blogs-container h3{width:-moz-fit-content;width:fit-content;font-size:25px;margin-bottom:15px;display:flex;align-items:center;gap:5px}.blogs-page-container .other-blogs-container .side-blog-box{display:flex;margin-bottom:15px;justify-content:flex-start;gap:15px;border-radius:16px;overflow:hidden;box-shadow:0 3px 8px rgba(0,0,0,.24);transition:all .35s ease}.blogs-page-container .other-blogs-container .side-blog-box:hover{transform:scale(1.05)}.blogs-page-container .other-blogs-container .side-blog-box .side-blog-img{width:35%;height:8rem;position:relative;border-radius:16px}.blogs-page-container .other-blogs-container .side-blog-box .side-blog-desc{width:55%;display:flex;flex-direction:column;justify-content:center}.blogs-page-container .other-blogs-container .side-blog-box .side-blog-desc h2{color:var(--primary-color);font-size:17px;font-weight:500}.blogs-page-container .other-blogs-container .side-blog-box .side-blog-desc p{font-weight:400;font-size:15px;width:80%;color:#000000ad;margin-bottom:10px}.blogs-page-container .other-blogs-container .side-blog-box .side-blog-desc h5{color:#00000080;font-size:14px;font-weight:500}.blog-container .blog-box-btm{display:flex;align-items:center;justify-content:space-between}.blog-container .blog-box-btm h6{color:#00000085}.error-container,.loading-container,.no-blogs-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;min-height:300px;width:100%}.loading-container{gap:1rem}.spinner{width:50px;height:50px;border:4px solid rgba(0,0,0,.1);border-left-color:#3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loading-container p{color:#666;font-size:1rem;margin:0}.error-container{gap:1rem}.error-message{color:#e74c3c;font-size:1rem;margin:0;text-align:center}.retry-button{padding:.75rem 1.5rem;background-color:#3498db;color:white;border:none;border-radius:5px;font-size:1rem;cursor:pointer;transition:background-color .3s ease}.retry-button:hover{background-color:#2980b9}.no-blogs-container p{color:#666;font-size:1.1rem;margin:0;text-align:center}.pagination-container{display:flex;justify-content:center;align-items:center;gap:8px;margin:auto;direction:ltr}.pagination-container a{padding:8px 14px;border-radius:6px;border:1px solid #ccc;background-color:white;cursor:pointer;transition:all .2s ease}.pagination-container a:hover{background-color:#e2e2e2;transform:scale(1.1)}.pagination-container .active-page{background-color:#007bff;color:white;border-color:#007bff;transition:all .25s ease}.pagination-container button.active-page:hover{color:#007bff}@media (max-width:992px){.blog-container{width:100%}}@media (max-width:500px){.blogs-page-container{flex-direction:column;margin-bottom:25px}.blogs-page-container .all-blogs-container{width:90%;margin:auto auto 25px}.blogs-page-container .other-blogs-container{margin:auto;width:90%}.blog-intro .blog-intro-layer h2{font-size:20px;width:80%}h1.page-title{margin:auto}.blogs-page-container .other-blogs-container h3{margin:auto auto 15px}.blogs-page-container .blogs-pagination{width:100%;margin-bottom:40px}}