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