/* ── Blog Pagination (projects-style) ── */
.blog-custom-pagination{margin-top:30px;}
.blog-custom-pagination a.page_btn,
.blog-custom-pagination a.page_number,
.blog-custom-pagination span.page_number{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}
.blog-custom-pagination a.page_btn,
.blog-custom-pagination a.page_number{color:inherit;}
.blog-custom-pagination a.page_btn:hover,
.blog-custom-pagination a.page_number:hover,
.blog-custom-pagination span.page_number.active{color:#fff;}

.chip {background-color: #fff;box-shadow: 0 0 10px 0px #3c2fc014;border-radius: 60px;justify-content: flex-start;align-self: flex-start;align-items: center;padding: 14px 40px;display: flex;font-family: Plus Jakarta Sans, sans-serif;color: #102c6d;font-size: 16px;line-height: 25px;font-weight: 700;border: none;transition: all 0.3s ease;}
.category-box_blogs .chip {all: unset; cursor: pointer;}
.chip.active {background-image: linear-gradient(90deg, #f86800, #102c6d);color: #fff;border-radius: 60px;justify-content: flex-start;align-self: flex-start;align-items: center;padding: 14px 40px;display: flex;}
.category-box_blogs .chip.active {all: unset;}
.blog-content {display: flex;gap: 24px;}
.blog-cards {width: 70%;display: grid;gap: 20px;    height: fit-content;}
.blog_details_container .blog-cards {width: 100%;grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));}
.blog-card {background: #fff;padding: 18px;border-radius: 14px;box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.06);animation: popIn 0.4s ease forwards;}
.blog-card h3 {margin: 0 0 8px;font-family: Plus Jakarta Sans, sans-serif;}
.blog-card p {margin: 0;font-size: 14px;color: #666;line-height: inherit;font-family: Plus Jakarta Sans, sans-serif;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.blog-card h2 {color: #102c6d;text-transform: capitalize;font-family: Plus Jakarta Sans, sans-serif;font-size: 24px;font-weight: 600;line-height: 30px;padding-top: 24px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.blog_card_det{display: flex;flex-direction: column;gap: 8px;}
.blog_card_det .home-one-button-autofit{ margin-top: 6px;}
.read_more_blog {display: flex;width: fit-content;padding: 12px 30px !important;}
.blog-card img{border-radius: 6px;width: 100%;}
/* .category-box_blogs{background: #fff;border-radius: 14px;padding: 20px;box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.06);} */
.blog-list {width: 30%;position: sticky;height: fit-content;top: calc(0px + 2rem);transition: 0.4s;display: flex;flex-direction: column;gap: 24px;}
.blog-list h4 {margin-bottom: 12px;font-family: Plus Jakarta Sans, sans-serif;}
.blog-list .cat_list a {padding: 14px 0 0 0;font-weight: 600;color: #000;font-size: 14px;font-family: Plus Jakarta Sans, sans-serif;}
.blog-list .cat_list a:not(:last-child) {border-bottom: 1px solid #DEE7F9;padding: 14px 0;}
.blog-list .cat_list a:last-child {padding: 14px 0;}
.blog_date{font-weight: 600;}
.blog_category{background-color: #fff;border-radius: 100px;position: absolute;padding: 1px 16px;top: 30px;left: 30px;}
.blog_time{background: rgba(141, 141, 141, 0.65);border-radius: 100px;position: absolute;padding: 4px 12px;top: 30px;right: 30px;opacity: 0;transition: 0.25s;display: flex;gap: 8px;align-items: center;}
.blog-card:hover .blog_time {opacity: 1;}
.blog_time p{color: #fff;}
.blog_time img {height: 14px;width: 14px;filter: invert(1);}
.blog_category p {font-family: Plus Jakarta Sans, sans-serif;margin-bottom: 0 !important;font-weight: 600;font-size: 12px;}
.blog-category{background-color: #fff;border-radius: 100px;padding: 4px 24px;box-shadow: 0 0 10px 0 rgba(128, 128, 128, 0.313);width: fit-content;}
.blog-category p{font-family: Plus Jakarta Sans, sans-serif;margin-bottom: 0 !important;font-weight: 600;font-size: 14px;}
.blog-detail-one-hero-aection {padding: 60px 15px 60px;overflow: hidden;}
.blog-detail-one-banner-background {background-position: 50%;background-repeat: no-repeat;background-size: cover;}
.blog_img{object-fit: cover;}
/* .blog_details_container{padding: 60px 0;border-top: 1px solid #102c6d42;} */
.blog_details_container{padding: 40px 15px;}
.blog_details_box{display: flex;flex-direction: column;gap: 06px;}
.blog_details_box table {text-align: left; width: 100%; border-collapse: collapse;}
.blog_details_box table th {text-align: left; padding: 10px; background-color: #f5f5f5; font-weight: bold;}
.blog_details_box table td {text-align: left; padding: 10px; border-bottom: 1px solid #eee;}
.blog_breadcrumb_box{font-size: 12px;display: flex;align-items: center;gap: 6px;flex-wrap: wrap;}
.blog_breadcrumb_box a{color: var(--primary);font-weight: 600;}
.blog_breadcrumb_box p {font-size: 12px;margin: 0;line-height: initial;}
.navbar-one {box-shadow: 0 0 10px 0 rgba(128, 128, 128, 0.313);}
.blog_det_title{padding-bottom: 16px;}
.blog-one-banner-background {background-image: url("../img/blog.5fe42a2aea4a.svg");background-position: 50%;background-repeat: no-repeat;background-size: cover;}
.blog_details_box .table_content_list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; align-items: stretch; counter-reset: my-counter; }
.blog_details_box .table_content_list li { position: relative; padding: 16px 18px 16px 62px; background: #fbfcff; border: 1px solid #edf2ff; border-radius: 18px; font-size: 16px; font-weight: 500; line-height: 1.6; color: #1d2b53; transition: all 0.3s ease; cursor: pointer; display: flex; align-items: center; counter-increment: my-counter; }
.blog_details_box .table_content_list li::before { content: counter(my-counter); position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg, #245bff, #6c8dff); color: white; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.blog_details_box .table_content_list li:hover { transform: translateY(-2px); border-color: #cfe0ff; background: #f5f8ff; box-shadow: 0 10px 24px rgba(36, 91, 255, 0.08); }

@keyframes popIn {
    from {opacity: 0;transform: scale(0.96);}
    to {opacity: 1;transform: scale(1);}
}
.cat_list {max-height: calc(84vh - 496px); overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px;}
.cat_list::-webkit-scrollbar {width: 3px !important;}
.cat_list::-webkit-scrollbar-track {background: #dfe7f8 !important;}
.cat_list::-webkit-scrollbar-thumb {background-color: #1a3799 !important; border-radius: 10px !important;}
.search-box_blogs h4 { font-size:16px; font-weight:600; margin-bottom:12px; color:inherit; }
.blog-search-wrapper { display:flex; align-items:center; border:1.5px solid #e0e0e0; border-radius:8px; overflow:hidden; background:#fff; transition:border-color .2s ease, box-shadow .2s ease; }
.blog-search-wrapper:focus-within { border-color:#4f46e5; box-shadow:0 0 0 3px rgba(79,70,229,.1); }
.blog-search-input { flex:1; border:none; outline:none; padding:10px 14px; font-size:14px; background:transparent; color:#333; }
.blog-search-input::placeholder { color:#aaa; }
.blog-search-btn { background:none; border:none; padding:0 14px; cursor:pointer; color:#888; display:flex; align-items:center; height:100%; transition:color .2s ease; }
.blog-search-btn:hover { color:#4f46e5; }
.cat-link { transition:all .2s ease; }
.cat-link:hover { color:#175cff!important; padding-left:8px; transition:all .2s ease; font-size:16px!important; }
.cat-link.active { color:#175cff!important; padding-left:8px; transition:all .2s ease; font-size:16px!important; font-weight:600!important; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.blog-list{width:30%;position:sticky;top:2rem;height:100%;display:flex;flex-direction:column;gap:24px;}
.category-box_blogs{background:#fff;border-radius:14px;padding:20px;box-shadow:0 0 10px 0 rgba(0,0,0,0.06);display:flex;flex-direction:column;}
/* hero-css */
:root { --bg: #f7f7ff; --primary: #1450de; --navy: #102c6d; --muted: #475569; --faint: #94a3b8; }
.svc-hero { background-color: #f7f7ff; background-image: linear-gradient(rgba(20, 80, 222, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 80, 222, 0.05) 1px, transparent 1px); background-size: 56px 56px; position: relative; overflow: hidden; padding: 0px 0 35px; }
.svc-hero-wrap { display: flex; align-items: center; flex-wrap: wrap; max-width: 1290px; margin: 0 auto; width: 100%; }
.svc-hero-content { padding-right: 32px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(20, 80, 222, 0.07); border: 1px solid rgba(20, 80, 222, 0.22); border-radius: 50px; padding: 6px 16px; font-size: 12.5px; color: var(--primary); font-weight: 500; letter-spacing: 0.03em; margin-bottom: 1.4rem; text-transform: uppercase; }
.badge-dot { width: 6px; height: 6px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 7px rgba(20, 80, 222, 0.6); animation: pulse-dot 1.8s ease-in-out infinite; }
.svc-hero-sub { color: var(--muted); font-size: 1.05rem; line-height: 1.72; max-width: 460px; margin-top: 1.2rem; margin-bottom: 0; }
.svc-hero-visual { display: flex; align-items: center; justify-content: center; min-height: 340px; }
.svc-canvas-wrap { width: 100%; display: flex; justify-content: end; }
h1 { margin: auto; }
.t-gradient { background: linear-gradient(135deg, var(--primary) 0%, var(--navy) 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.t-accent { background: linear-gradient(135deg, var(--navy) 0%, var(--primary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.bcard-scene { position: relative; width: 468px; height: 455px; flex-shrink: 0; }
.bcard-stack { position: absolute; width: 280px; height: 355px; top: 44px; left: 104px; perspective: 900px; }
.bcard-card { position: absolute; inset: 0; border-radius: 22px; padding: 18px; overflow: hidden; transform-origin: center center; opacity: 0; }
.bcard-c4 { z-index: 1; background: #eaeff8; box-shadow: -4px 4px 12px rgba(0,0,0,0.03); transform: translate(91px, 5px) scale(0.97) rotate(4deg); animation: bcard-flip-c4 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both; }
.bcard-c3 { z-index: 2; background: #f2f6fc; box-shadow: -6px 6px 18px rgba(0,0,0,0.04); transform: translate(56px, 3px) scale(0.98) rotate(1.5deg); animation: bcard-flip-c3 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both; }
.bcard-c2 { z-index: 3; background: #f9fbff; box-shadow: -8px 8px 22px rgba(0,0,0,0.05); transform: translate(28px, 2px) scale(0.99) rotate(0.5deg); animation: bcard-flip-c2 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both; }
.bcard-c1 { z-index: 4; background: #ffffff; box-shadow: -10px 10px 30px rgba(0,0,0,0.05), 0 4px 14px rgba(0,0,0,0.07); transform: translate(0, 0) scale(1); animation: bcard-flip-c1 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.7s both, bcard-flt 4.2s ease-in-out 1.6s infinite; }
@keyframes bcard-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bcard-flip-c4 { from { opacity: 0; transform: translate(91px, 5px) scale(0.97) rotate(4deg) rotateY(-90deg); } to { opacity: 1; transform: translate(91px, 5px) scale(0.97) rotate(4deg) rotateY(0deg); } }
@keyframes bcard-flip-c3 { from { opacity: 0; transform: translate(56px, 3px) scale(0.98) rotate(1.5deg) rotateY(-90deg); } to { opacity: 1; transform: translate(56px, 3px) scale(0.98) rotate(1.5deg) rotateY(0deg); } }
@keyframes bcard-flip-c2 { from { opacity: 0; transform: translate(28px, 2px) scale(0.99) rotate(0.5deg) rotateY(-90deg); } to { opacity: 1; transform: translate(28px, 2px) scale(0.99) rotate(0.5deg) rotateY(0deg); } }
@keyframes bcard-flip-c1 { from { opacity: 0; transform: scale(0.92) rotateY(-90deg); } to { opacity: 1; transform: translate(0, 0) scale(1) rotateY(0deg); } }
@keyframes bcard-flt { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.72); } }
.bcard-logo { font-size: 0.6rem; font-weight: 800; color: #7c8fa8; letter-spacing: 0.12em; text-transform: uppercase; display: flex; align-items: center; margin-top: -14px; gap: 5px; }
.bcard-logo::before { content: ''; display: inline-block; width: 10px; height: 10px; background: #7c8fa8; border-radius: 3px; }
.bcard-img { width: 100%; height: 140px; border-radius: 14px; overflow: hidden; flex-shrink: 0; }
.bcard-img-bg { width: 100%; height: 100%; background: linear-gradient(135deg, #8ba1c7 0%, #536999 100%); position: relative; overflow: hidden; }
.bcard-img-bg::before { content: ''; position: absolute; bottom: -2px; left: -22px; width: 0; height: 0; border-style: solid; border-width: 0 120px 90px 120px; border-color: transparent transparent #3b496e transparent; opacity: 0.9; }
.bcard-img-bg::after { content: ''; position: absolute; bottom: -2px; right: -40px; width: 0; height: 0; border-style: solid; border-width: 0 148px 108px 148px; border-color: transparent transparent #283352 transparent; }
.bcard-img img { width: 100%; height: 100%; object-fit: fill; display: block; }
.bcard-img svg { display: block; width: 100%; height: 100%; }
.bcard-body { margin-top: 14px; }
.bcard-title { font-size: 15px; font-weight: 700; color: #1a253c; line-height: 1.38; margin-bottom: 9px; letter-spacing: -0.01em; }
.bcard-meta { color: #94a3b8; font-size: 11.5px; font-weight: 500; margin-bottom: 14px; }
.bcard-tag { display: inline-block; background: #edf3ff; color: #2b66f5; font-size: 11px; font-weight: 600; padding: 5px 13px; border-radius: 20px; }
.bcard-link { display: block; text-decoration: none; color: inherit; }
.bcard-link:hover { box-shadow: -14px 14px 42px rgba(20,80,222,0.15); transition: box-shadow 0.25s ease; }
.bcard-wrap { display: flex; flex-direction: column; align-items: center; }
.bcard-cta-btn { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #1450de 0%, #102c6d 100%) padding-box, conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)), transparent, #6fa3ff var(--gradient-percent), var(--gradient-shine) calc(var(--gradient-percent) * 2), #6fa3ff calc(var(--gradient-percent) * 3), transparent calc(var(--gradient-percent) * 4)) border-box; border: 1.5px solid transparent; --shadow-size: 2px; position: relative; overflow: hidden; isolation: isolate; color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; padding: 14px 34px; border-radius: 50px; text-decoration: none; box-shadow: 0 8px 32px rgba(20, 80, 222, 0.38); margin-top: -22px; opacity: 0; animation: bcard-fade 0.6s ease 1.4s both, gradient-angle 3s linear infinite; transition: transform 0.22s ease, box-shadow 0.22s ease; }
.bcard-cta-btn:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 14px 42px rgba(20, 80, 222, 0.52); }
.bcard-cta-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.cta-button { margin-left: 74px; }
.bcard-cta-btn::before, .bcard-cta-btn::after { content: ''; pointer-events: none; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; z-index: -1; }
.bcard-cta-btn::before { --size: calc(100% - var(--shadow-size) * 3); --position: 2px; --space: calc(var(--position) * 2); width: var(--size); height: var(--size); background: radial-gradient(circle at var(--position) var(--position), white calc(var(--position) / 4), transparent 0) padding-box; background-size: var(--space) var(--space); background-repeat: space; mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black); border-radius: inherit; opacity: 0.4; animation: gradient-angle 3s linear infinite; }
.bcard-cta-btn::after { width: 100%; aspect-ratio: 1; background: linear-gradient(-50deg, transparent, #4d7fff, transparent); mask-image: radial-gradient(circle at bottom, transparent 40%, black); opacity: 0.6; animation: shimmer 3s linear infinite; }

@media (max-width: 1400px){
    .blog_details_container{padding-left: 16px;padding-right: 16px;}
}
@media (min-width:992px) and (max-width:1070px) {
    .navlink {font-size: 15px;}
    .dropdown-toggle {padding: 24px 10px 26px;}
    .navlink.padding {padding-left: 10px;padding-right: 10px;}
}
@media (max-width: 992px){
    .blog-detail-one-hero-aection {padding: 40px 15px 40px;}
    .blog_card_det .home-one-button-autofit{margin: inherit;margin-left: inherit !important;}
    .svc-canvas-wrap { display:flex; justify-content:center; } .bcard-scene { transform-origin:top center; }
}
@media (max-width: 767px) {
    .blog_filters_box .filters button {padding: 5px 10px;margin: 5px;}
    .blog_cards_container.grid>.element-item {width: calc(100% / 2 - 30px);}
    .blog_cards_container .element-item p {font-size: 16px;line-height: 22px;}
    .blog_breadcrumb_box {gap: 2px;flex-wrap: wrap;}
    .custom-slider {max-width: 100%;}
    .slide img {height: 360px;}
    .blog-content {flex-direction: column;}
    .blog-cards, .blog-list {width: 100%;}
    .blog-list {order: -1; position: relative !important; margin-bottom: 30px;}
    .chip {padding: 10px 24px;font-size: 14px;line-height: 18px;}
    .blog-card h2{font-size: 20px;line-height: 26px;}
    .blog_details_container {padding-top: 40px;}
    .svc-hero { padding: 52px 0 44px; } .svc-hero-content { padding-right: 10px; margin-bottom: 24px; } .bcard-scene { width:544px; }
}

@media (max-width: 575px) {
    .blog_cards_container.grid>li {width: calc(100% - 30px);}
    .blog-card img {height: 100%}
}
@media (max-width: 768px) {
  .blog_details_box .table_content_list {
    grid-template-columns: 1fr;
  }
  .blog-list {
    width: 100% !important;
  }
}
@media (max-width:900px) { .bcard-scene { width:536px; } .cta-button { margin-left: 0px; } }
@media (max-width:480px) { .bcard-stack { width: 243px; } .bcard-scene { width: 523px; } }