@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1300px; }
}
.title-wrap h1 { font-size: 50px; font-weight: 600; line-height: 140%; letter-spacing: -0.5px; color: #fff; position: relative; z-index: 99; margin: 0; }
/* .title-wrap h1 span { color: var(--primarycolor); font-family: var(--primaryfont); } */
.dots { position: relative; }
.common-media { padding: 60px 0 7px 0; }
@media screen and (max-width:1199px) {
  .common-media { padding: 55px 0px 12px 0; }
}
@media screen and (max-width:991px) {
  .common-media { padding: 50px 0 26px 0; }
}
@media screen and (max-width:767px) {
  .common-media { padding: 45px 0px 37px 0; }
}
@media (max-width:576px) {
  .common-media { padding: 35px 0; }
}
@media (max-width:480px) {
  .common-media { padding: 25px 0; }
}
.title-wrap .h4 .dots { left: 0; top: 6px; width: 8px; height: 8px; border-radius: 100%; background: var(--primarycolor); display: block; }
.title-wrap .h4 { font-size: 14px; color: #4C596D; font-weight: 500; line-height: 150%; position: relative; padding-bottom: 15px; display: flex; gap: 10px; margin: 0; }
.details-img-wrap img { margin: 0; }
.banner-right-content { padding: 24px 16px; background: rgba(255, 108, 26, 0.05); }
.banner-right-content .h3, .banner-right-content h3 { color: #192A44; font-size: 22px; font-weight: 600; line-height: 29px; padding-bottom: 24px; margin-bottom: 0; }
.banner-right-content p { color: #192A44; font-size: 14px; font-weight: 400; line-height: 22px; }
.author-main { margin-top: 10px; }
audio { width: 500px; height: 60px; }
.spotify-podcast-frame { border-radius: 12px; }
.blog-author-detail p a { color: #192A44; font-size: 20px; font-weight: 600; line-height: 40px; }
.blog-author-detail p a:hover { color: #ff6c1a; }
.author-detail { color: #192A44; font-size: 18px; font-weight: 400; line-height: 24px; }
.blogs-main-content-wrap { margin-top: 85px; }
.blog-post-content ul, .blog-post-content ol, .blog-post-content p { margin-bottom: 0; }
.blog-post-content ul li, .blog-post-content ol li, .blog-post-content p { color: #192A44; font-size: 18px; font-weight: 400; line-height: 35px; padding-bottom: 8px; }
label { color: #192A44; font-size: 18px; font-weight: 400; padding-bottom: 14px; }
li b, p b { font-weight: 600; }
@media (max-width:1199px) {
  .banner-right-content .h3, .banner-right-content h3 { font-size: 20px; font-weight: 600; line-height: 24px; margin-bottom: 0; }
  .title-wrap h1 { font-size: 34px; line-height: 132%; }
  audio { width: 400px; height: 50px; }
  .ai-cta .title-wrap { padding: 50px 0px 50px 50px; }
  .blogs-main-content-wrap { margin-top: 60px; }
}
@media (max-width:991px) {
  audio { width: 300px; height: 50px; }
  .blogs-main-content-wrap { margin-top: 50px; }
}
.blog-post-content .h2, .blog-post-content h2 { color: #192A44; font-size: 26px; font-weight: 700; line-height: 36px; margin-bottom: 0; padding-top: 22px !important; padding-bottom: 16px !important; }
.blog-post-content h3, .blog-post-content .h3 { color: #192A44; font-size: 22px; font-weight: 700; line-height: normal; margin-bottom: 0; padding: 6px 0 4px 0px; }
.blog-post-content h4, .blog-post-content .h4 { color: #192A44; font-size: 20px; font-weight: 600; line-height: normal; margin-bottom: 0; padding: 6px 0px 4px; }
@media (max-width: 767px) {
  .blog-post-content .h2, .blog-post-content h2 { font-size: 22px; }
  .blog-post-content h3, .blog-post-content .h3 { font-size: 18px; }
}
@media (max-width: 480px) {
  .blog-post-content .h2, .blog-post-content h2 { font-size: 20px; }
}
.sub-titles { color: #192A44; font-size: 18px; font-weight: 600; line-height: normal; margin-bottom: 10px; }
/* Table of contents start */
.table-of-content-section { position: sticky; top: 100px; }
.blog-toc { border: 3px solid #FF6C1A66; border-radius: 15px; padding-top: 10px; }
.recent-blogs-head .h2 { color: #192A44; font-size: 20px; font-weight: 700; line-height: 150%; padding-left: 20px; }
.sidebar-blogs-single .h4 { margin-bottom: 0; }
.smart-header .h4 { display: block; color: #192A44; font-size: 16px; font-weight: 400; line-height: 25px; padding: 10px 25px; border-radius: 4px; width: 100%; margin-bottom: 0; }
.sidebar-blogs-single .h4 a { display: block; color: #192A44; font-size: 16px; font-weight: 400; line-height: 25px; padding: 10px 25px; border-radius: 4px; width: 100%; }
.smart-image { padding: 10px 10px 0 10px; }
.smart-image img { border-radius: 15px; }
.smart-blog-first { cursor: pointer; }
.popular-item:hover .popular-number { color: #FF8A3D !important; transition: 0.3s ease-in-out; }
.popular-item:hover .h4 { color: #FF8A3D; transition: 0.3s ease-in-out; }
.toc-scroll .menu-link.active { background: rgba(255, 108, 26, 0.15); color: #FF6C1A; font-weight: 600; }
.toc-scroll { display: flex; flex-direction: column; gap: 3px; }
.table-responsive.ai-table td, .table-responsive.ai-table th { padding: 14px; text-align: start; border: 1px solid #E5E7EB; }
.ai-table .table th { font-size: 16px; font-weight: 600; background: rgba(255, 108, 26, 0.10); color: #FF6C1A; }
.ai-table .table td ul li, .ai-table .table td { font-size: 18px; font-weight: 400; }
.ai-table .table td.spark { min-width: 250px; }
.ai-table .table { font-size: 20px; border-collapse: separate; border-spacing: 0; border-radius: 20px 20px 0px 0px; overflow: hidden; border: 1px solid #E5E7EB; min-width: 800px !important; }
@media (max-width:1199px) {
  .ai-table .table td ul li, .ai-table .table td { font-size: 16px; }
  .smart-header .h4 { padding: 10px 15px; }
}
/* CTA STart */
.ai-cta-request { border-radius: 24px; border: 1.5px solid #E5E7EB; background: rgba(255, 108, 26, 0.02); padding: 50px 60px; max-width: 830px; margin: 0 auto; }
.multimodal-cta-heading span { color: #ff6c1a; }
@media (max-width:1199px) {
  .ai-cta-request { padding: 40px 50px; }
}
@media (max-width:991px) {
  .blog-post-content .h2, .blog-post-content h2 { font-size: 24px; line-height: 32px; }
  .ai-table .table td.spark { min-width: auto; }
  .ai-cta-request { padding: 40px; border-radius: 10px; }
  .title-wrap h1 { font-size: 30px; }
  .ai-table { margin-bottom: 20px; }
  .ai-table .table td ul li, .ai-table .table td { font-size: 16px; font-weight: 400; }
  .blog-video iframe { height: 270px !important; }
  .smart-image { padding: 0; }
  .recent-blogs-head .h2 { padding: 0px 0px 10px 0px; }
}
@media (max-width: 700px) {
  .ai-cta-request { padding: 35px 40px; margin: 0; }
  .title-wrap h1 { font-size: 28px; }
  .blog-author-detail img { width: 33px !important; height: 33px !important; }
  .blog-author-detail p a { font-size: 18px; line-height: 130%; }
  .author-detail { font-size: 16px; }
  .blogs-main-content-wrap { margin-top: 35px; }
  .blog-post-content .h2, .blog-post-content h2 { font-size: 22px; line-height: 28px; }
  .blog-post-content ul li, .blog-post-content ol li, .blog-post-content p { font-size: 17px; line-height: 150%; }
  label { font-size: 17px; }
  .blog-post-content h4, .blog-post-content .h4 { font-size: 18px; }
  .blog-post-content .h2 { text-align: center !important; }
  .ai-cta .title-wrap { padding: 26px; }
  .blog-post-content h3, .blog-post-content .h3 { font-size: 18px; padding: 8px 0 4px 0px; }
}
@media (max-width: 575px) {
  .title-wrap h1 { font-size: 26px; }
  .author-detail { font-size: 14px; }
  audio { height: 40px; }
  .blog-video iframe { height: 250px !important; }
}
@media (max-width: 480px) {
  .ai-cta-request { padding: 30px 15px; border-radius: 16px; }
  .title-wrap h1 { font-size: 24px; }
  .blog-post-content .h2, .blog-post-content h2 { font-size: 20px; line-height: 26px; padding-top: 14px !important; padding-bottom: 16px !important; }
  .blog-post-content ul li, .blog-post-content ol li, .blog-post-content p { font-size: 15px; }
  label { font-size: 16px; }
  .sub-titles { font-size: 16px; }
  .blog-post-content h4, .blog-post-content .h4 { font-size: 17px; }
  .banner-cta-btns a { font-size: 12px; }
}
/* CTA End */
/* CTA Start */
.ai-cta-main { padding: 70px 0; }
.ai-cta { border: 1px solid #E5E7EB; border-radius: 15px; background: rgba(255, 108, 26, 0.02); min-height: 336px; margin: 0 auto; }
.ai-cta .title-wrap { padding: 0 0 0 45px; }
.ai-cta-imgs { border-radius: 0px 15px 15px 0px; }
@media (max-width: 1199px) {
  .ai-cta .title-wrap h2 { font-size: 24px; }
  .ai-cta-main { padding-top: 0; }
  /* .ai-cta .title-wrap {padding: 80px 0 70px 70px;} */
}
@media (max-width: 991px) {
  .ai-cta .title-wrap { padding: 40px; }
  .ai-cta-main { padding: 0 0 60px; }
  .ai-cta { margin: 0px; }
}
@media (max-width: 767px) {
  .ai-cta .title-wrap h2 { font-size: 22px; }
  .ai-cta .title-wrap { padding: 40px; }
}
@media (max-width: 480px) {
  .ai-cta .title-wrap h2 { font-size: 20px; }
  .ai-cta .title-wrap { padding: 30px 20px; }
  .ai-cta-main { padding: 0 0 45px; }
}
/* CTA End */
/* banner-cta-btns style start here */
.banner-cta-btns { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 20px; }
.banner-cta-btns a { display: block; padding: 8px 20px; border-radius: 8px; font-size: 16px; font-weight: 600; transition: all 0.5s; }
.banner-cta-btns a:first-child { border: 1px solid #ff6c1a; background: rgba(255, 108, 26, 0.10); color: #ff6c1a; }
.banner-cta-btns a:hover { color: #fff; background: #ff6c1a; }
.banner-cta-btns a:hover svg path { stroke: #fff; }
.banner-list p { color: #192A44; font-size: 14px; font-weight: 600; }
.banner-list p span { color: #FF6C1A; }
@media (max-width:1199px) {
  .banner-cta-btns a { font-size: 15px; padding: 12px; }
  .banner-list p { font-size: 12px; }
  .ai-cta { min-height: auto; }
}
@media (max-width: 991px) {
  .banner-cta-btns a { padding: 10px 12px; }
}
@media (max-width:767px) {
  .banner-cta-btns a { font-size: 14px; }
}
/* Blog Scroll Section style start here */
.blog-section .blog-card { padding-bottom: 0; }
.blog-section .blog-card figure { margin-bottom: 0; }
.blog-section .desc { padding: 15px; background: #f7f7f7; border: 1px solid #ededed; }
.blog-section .bolg-category-title .h4, .blog-section .bolg-category-title h4 { font-size: 14px; line-height: 21px; font-weight: 600; color: #192a44; padding-right: 10px; margin: 0; }
.blog-section .blog-card .bolg-category-title img { visibility: hidden; }
.blog-section .blog-card:hover .bolg-category-title img { transition: 1s ease-in-out; visibility: visible; }
.blog-section .blog-card h3, .blog-section .blog-card .h3 { color: var(--secondrycolor); font-size: 20px; font-weight: 600; line-height: 150%; transition: .3s ease-in-out; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 60px; margin: 0 !important; padding: 0; }
.blog-section .blog-card:hover h3 { color: var(--primarycolor); }
@media screen and (max-width:1199px) {
  .blog-section .blog-card h3, .blog-section .blog-card .h3 { font-size: 18px; min-height: 54px; }
}
@media screen and (max-width:767px) {
  .blog-section { padding-left: 12px !important; padding-right: 12px !important; }
  .blog-section .blog-card h3, .blog-section .blog-card .h3 { font-size: 17px; min-height: 50px; }
}
@media screen and (max-width:480px) {
  .blog-section .desc { padding: 10px; }
  .blog-section .bolg-category-title .h4, .blog-section .bolg-category-title h4 { font-size: 13px; }
  .blog-section .blog-card h3, .blog-section .blog-card .h3 { font-size: 15px; min-height: 45px; }
}
/* Blog Scroll Section style ends here */
.pros-cons { background-color: #f3f6f9; }
.list-img.tick li:before { background: url(../images/tick.svg) no-repeat left top; }
.list-img.exclamation li:before { background: url(../images/exclamation-red.svg) no-repeat left top; }
/* FAQ Start */
.faq-assist-heading { color: #192A44; font-size: 32px; font-weight: 700; line-height: 1.3; letter-spacing: 0; position: relative; display: inline-block; max-width: 760px; margin: 0 auto; }
.faq-assist-heading span:first-child { color: #FF6C1A; }
.faq-assist-heading .dots { display: inline-block; width: 26px; height: 26px; border-radius: 50%; background: #FF6C1A; margin-left: 4px; transform: translateY(5px); }
.faq .accordion-item { border: 0; border-bottom: 1px solid #E5E7EB; }
.faq .accordion-item:last-child { border-bottom: 0; }
.faq .accordion-button { font-size: 20px; color: #4C596D; padding: 30px 0; gap: 5px; }
.faq .accordion-button:not(.collapsed) { font-weight: 600; color: #111928; background-color: transparent; box-shadow: 0 0 0 0; }
.faq .accordion-button::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.0007 0.0820312C8.10555 0.0820312 0.0839844 8.1036 0.0839844 17.9987C0.0839844 27.8939 8.10555 35.9154 18.0007 35.9154C27.8958 35.9154 35.9173 27.8939 35.9173 17.9987C35.9173 8.1036 27.8958 0.0820312 18.0007 0.0820312ZM19.6673 11.332C19.6673 10.4116 18.9212 9.66536 18.0007 9.66536C17.0802 9.66536 16.334 10.4116 16.334 11.332V16.332H11.334C10.4135 16.332 9.66732 17.0782 9.66732 17.9987C9.66732 18.9192 10.4135 19.6654 11.334 19.6654H16.334V24.6654C16.334 25.5859 17.0802 26.332 18.0007 26.332C18.9212 26.332 19.6673 25.5859 19.6673 24.6654V19.6654H24.6673C25.5878 19.6654 26.334 18.9192 26.334 17.9987C26.334 17.0782 25.5878 16.332 24.6673 16.332H19.6673V11.332Z" fill="%23FF6C1A" fill-opacity="0.2"/></svg>'); width: 40px; height: 40px; background-size: 40px; }
.faq .accordion-button:not(.collapsed)::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.0007 2.08203C10.1056 2.08203 2.08398 10.1036 2.08398 19.9987C2.08398 29.8939 10.1056 37.9154 20.0007 37.9154C29.8958 37.9154 37.9173 29.8939 37.9173 19.9987C37.9173 10.1036 29.8958 2.08203 20.0007 2.08203ZM13.334 18.332C12.4135 18.332 11.6673 19.0782 11.6673 19.9987C11.6673 20.9192 12.4135 21.6654 13.334 21.6654H26.6673C27.5878 21.6654 28.334 20.9192 28.334 19.9987C28.334 19.0782 27.5878 18.332 26.6673 18.332H13.334Z" fill="%23FF6C1A"/></svg>'); }
.faq .accordion-button:focus { box-shadow: 0 0 0 0; }
.faq .accordion-body { padding: 0 0 30px; }
.faq .accordion-body p { color: #192A44; font-size: 18px; font-weight: 400; line-height: 162%; }
/* FAQ End */
@media (max-width: 767px) {
  .faq .accordion-button { font-size: 18px; padding: 20px 0; }
  .faq .accordion-body p { font-size: 17px; }
}
@media (max-width: 576px) {
  .faq .accordion-button { font-size: 16px; padding: 20px 0; }
  .faq .accordion-body p { font-size: 15px; }
  .faq .accordion-button::after { width: 30px; height: 30px; background-size: 30px; }
}
/* Footer Start */
.lines-white hr { background: #D1D5DB; }
.social-icons ul li a { transition: 0.3s ease-in-out; }
.social-icons ul li a:hover svg path { fill: #ff6c1a; }
.footer-heading ul li a:hover { font-weight: 400 !important; }
@media screen and (max-width: 991px) {
  .footer-heading p { padding-bottom: 25px !important; }
  .lines-white hr { margin: 0 0 25px; }
}
/* Footer End */
/* Table of Contents style start here */
body button.btn.btn-toc { background: #ff6c1a !important; color: #fff !important; border-radius: 0; position: relative; }
body button.btn.btn-toc.dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; }
.toc-main { position: relative; margin-top: 30px; margin-bottom: -60px; z-index: 1; }
.btn-toc { background: #ff6c1a !important; color: #fff !important; border-radius: 0; }
.btn-toc .btn.show { color: #fff !important; }
.btn-toc.dropdown-menu.show { position: relative !important; transform: translate(0, 0) !important; transition: all 2s ease-in-out; }
.btn-toc.toc-tab-menu.dropdown-menu.show { position: relative !important; top: 0 !important; left: 0 !important; transform: none !important; max-height: 300px !important; overflow-y: auto !important; }
.btn-toc.toc-tab-menu.dropdown-menu.show::-webkit-scrollbar { width: 5px !important; }
.btn-toc.toc-tab-menu.dropdown-menu.show::-webkit-scrollbar-thumb { background-color: #ff6c1a !important; border-radius: 20px !important; }
.btn-toc.dropdown-menu { width: 100%; background: #f3f6f9 !important; border-radius: 6px; padding: 25px; }
.btn-toc.dropdown-menu li { list-style: disc; list-style-position: inside; color: #000; }
.btn-toc.dropdown-menu li a { font-size: 16px; color: #4c596d !important; }
.btn-toc.dropdown-menu li a:hover { color: #ff6c1a !important; }
@media (max-width:991px) {
  .toc-main { margin-bottom: -40px; }
  .table-of-content-section { top: 20px; }
}
@media (max-width:767px) {
  .toc-main { margin-bottom: -20px; }
  .btn-toc.dropdown-menu li a { font-size: 14px; }
  .btn-toc.dropdown-menu { padding: 15px; }
}
@media (max-width:576px) {
  .btn-toc.dropdown-menu { padding: 10px; }
}
.ai-table::-webkit-scrollbar { background-color: #e5e7eb; width: 5px; height: 5px; /* width of the entire scrollbar */; }
.ai-table::-webkit-scrollbar-thumb { background-color: #ff6c1a; border-radius: 6px; width: 5px; height: 5px; }
.digital-maturity-widget { width: 100%; background: #ffffff; border: 1px solid #dce5f0; border-radius: 14px; box-shadow: 0 18px 38px rgba(25, 42, 68, 0.10); padding: 16px; }
.maturity-grid { display: grid; gap: 10px; }
.maturity-row { display: grid; grid-template-columns: minmax(190px, 1fr) auto; align-items: center; gap: 18px; border: 1px solid #e1e9f3; border-radius: 10px; background: #f8fbff; padding: 14px 16px; }
.maturity-row span { color: #192A44; font-size: 14px; font-weight: 800; line-height: 1.2; }
.maturity-score-buttons { display: flex; gap: 9px; }
.maturity-score-buttons button { width: 36px; height: 34px; border: 1px solid #d8e2ee; border-radius: 7px; background: #ffffff; color: #192A44; cursor: pointer; font-size: 13px; font-weight: 800; line-height: 1; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.maturity-score-buttons button:hover, .maturity-score-buttons button.is-active { background: #ff6c1a; border-color: #ff6c1a; color: #ffffff; }
.maturity-score-buttons button:hover { transform: translateY(-1px); }
.maturity-result { margin-top: 12px; border: 1px solid rgba(255, 108, 26, 0.20); border-radius: 12px; background: #fff8f3; padding: 16px; }
.maturity-result span { color: #ff6c1a; display: block; font-size: 24px; font-weight: 900; line-height: 1; padding-bottom: 10px; }
.maturity-progress { height: 8px; border-radius: 999px; background: #ffe2cf; margin-bottom: 12px; overflow: hidden; }
.maturity-progress i { display: block; width: 60%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff6c1a, #ff9a4d); transition: width 0.25s ease; }
.maturity-progress i.is-score-4 { width: 20%; }
.maturity-progress i.is-score-5 { width: 25%; }
.maturity-progress i.is-score-6 { width: 30%; }
.maturity-progress i.is-score-7 { width: 35%; }
.maturity-progress i.is-score-8 { width: 40%; }
.maturity-progress i.is-score-9 { width: 45%; }
.maturity-progress i.is-score-10 { width: 50%; }
.maturity-progress i.is-score-11 { width: 55%; }
.maturity-progress i.is-score-12 { width: 60%; }
.maturity-progress i.is-score-13 { width: 65%; }
.maturity-progress i.is-score-14 { width: 70%; }
.maturity-progress i.is-score-15 { width: 75%; }
.maturity-progress i.is-score-16 { width: 80%; }
.maturity-progress i.is-score-17 { width: 85%; }
.maturity-progress i.is-score-18 { width: 90%; }
.maturity-progress i.is-score-19 { width: 95%; }
.maturity-progress i.is-score-20 { width: 100%; }
.maturity-result p { color: #192A44 !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.3 !important; margin: 0 !important; padding: 0 0 6px !important; }
.maturity-result strong { color: #4C596D; display: block; font-size: 14px; font-weight: 600; line-height: 1.45; max-width: 720px; }
@media (max-width: 767px) {
  .maturity-row { grid-template-columns: 1fr; }
  .maturity-score-buttons { flex-wrap: wrap; }
}
.ai-trap-infographic { border: 1px solid #dce5f0; border-bottom: 4px solid #ff6c1a; border-radius: 14px; background: #ffffff; box-shadow: 0 16px 34px rgba(25, 42, 68, 0.09); overflow: hidden; }
.ai-trap-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; background: #192A44; }
.ai-trap-head span { display: block; color: #ffb27f; font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 1.2; padding-bottom: 5px; text-transform: uppercase; }
.ai-trap-title { color: #ffffff !important; margin: 0 !important; padding: 0 !important; font-size: 21px !important; font-weight: 800 !important; line-height: 1.28 !important; }
.ai-trap-head strong { flex: 0 0 auto; border-radius: 999px; background: #ff6c1a; color: #ffffff; font-size: 14px; font-weight: 900; line-height: 1; padding: 10px 14px; }
.ai-trap-layout { display: grid; grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.45fr); gap: 0; background: #ffffff; }
.ai-trap-list { display: grid; gap: 9px; align-content: start; padding: 16px; background: #f7faff; border-right: 1px solid #dce5f0; }
.ai-trap-list button { width: 100%; border: 1px solid #dce5f0; border-radius: 9px; background: #ffffff; color: #192A44; cursor: pointer; font-size: 13px; font-weight: 800; line-height: 1.35; min-height: 54px; padding: 10px 12px; text-align: left; transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; }
.ai-trap-list button:hover { border-color: rgba(255, 108, 26, 0.55); box-shadow: 0 8px 18px rgba(25, 42, 68, 0.08); transform: translateY(-1px); }
.ai-trap-list button.is-active { background: #fff5ee; border-color: #ff6c1a; box-shadow: inset 3px 0 0 #ff6c1a; }
.ai-trap-compare { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); gap: 18px; align-items: center; padding: 20px 22px; }
.ai-trap-card { border-radius: 12px; min-height: 156px; padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; }
.ai-trap-card span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 1.2; padding-bottom: 10px; text-transform: uppercase; }
.ai-trap-card p { margin: 0 !important; padding: 0 !important; color: #192A44 !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.36 !important; }
.ai-trap-card.wrong { border: 1px solid #ffc8bf; background: #fff8f6; box-shadow: inset 4px 0 0 #f04438; }
.ai-trap-card.wrong span { color: #d93025; }
.ai-trap-card.right { border: 1px solid #bfe8cd; background: #f3fff7; box-shadow: inset 4px 0 0 #1e9b50; }
.ai-trap-card.right span { color: #138a42; }
.ai-trap-connector { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; }
.ai-trap-connector i { width: 18px; height: 2px; border-radius: 999px; background: #ff6c1a; position: relative; }
.ai-trap-connector i::after { content: ""; position: absolute; right: -1px; top: 50%; width: 7px; height: 7px; border-right: 2px solid #ff6c1a; border-top: 2px solid #ff6c1a; transform: translateY(-50%) rotate(45deg); }
.ai-trap-connector b { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #ff6c1a; color: #ffffff; font-size: 11px; font-weight: 900; text-transform: uppercase; box-shadow: 0 10px 20px rgba(255, 108, 26, 0.25); }
.ai-trap-progress { height: 6px; background: #ffe4d2; overflow: hidden; }
.ai-trap-progress i { display: block; width: 20%; height: 100%; background: #ff6c1a; transition: width 0.25s ease; }
.ai-trap-progress i.is-step-1 { width: 20%; }
.ai-trap-progress i.is-step-2 { width: 40%; }
.ai-trap-progress i.is-step-3 { width: 60%; }
.ai-trap-progress i.is-step-4 { width: 80%; }
.ai-trap-progress i.is-step-5 { width: 100%; }
@media (max-width: 991px) {
  .ai-trap-layout, .ai-trap-compare { grid-template-columns: 1fr; }
  .ai-trap-list { border-right: 0; border-bottom: 1px solid #dce5f0; }
  .ai-trap-compare { gap: 12px; padding: 16px; }
  .ai-trap-card { min-height: auto; padding-top: 14px; padding-bottom: 14px; }
  .ai-trap-card p { font-size: 15.5px !important; line-height: 1.4 !important; }
  .ai-trap-connector { flex-direction: column; gap: 7px; min-height: 62px; }
  .ai-trap-connector i { width: 2px; height: 26px; min-height: 26px; }
  .ai-trap-connector i::after { right: auto; top: auto; bottom: -1px; left: 50%; transform: translateX(-50%) rotate(135deg); }
}
@media (max-width: 767px) {
  .ai-trap-head { padding: 14px 16px; }
  .ai-trap-head span { font-size: 10px; padding-bottom: 4px; }
  .ai-trap-title { font-size: 18px !important; line-height: 1.25 !important; }
  .ai-trap-head strong { font-size: 12px; padding: 8px 12px; }
  .ai-trap-card p { font-size: 15px !important; line-height: 1.4 !important; }
}
@media (max-width: 575px) {
  .ai-trap-head { align-items: flex-start; flex-direction: column; }
  .ai-trap-list, .ai-trap-compare { padding: 14px; }
  .ai-trap-card { min-height: auto; padding-top: 12px; padding-bottom: 12px; }
  .ai-trap-card p { font-size: 14px !important; line-height: 1.35 !important; }
  .ai-trap-kicker { font-size: 10px !important; }
}
.dt-article-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 24px; border: 1px solid rgba(255, 108, 26, 0.28); border-radius: 14px; background: linear-gradient(135deg, #fff8f4 0%, #ffffff 58%, #f8fbff 100%); box-shadow: 0 14px 30px rgba(25, 42, 68, 0.08); }
.dt-article-cta-final { background: #192A44; border-color: #192A44; box-shadow: 0 16px 34px rgba(25, 42, 68, 0.16); }
.dt-article-cta-kicker { display: inline-flex; width: fit-content; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 108, 26, 0.12); color: #ff6c1a; font-size: 11px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.dt-article-cta-title { margin: 0 !important; padding-bottom: 8px !important; color: #192A44 !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1.28 !important; }
.dt-article-cta-text { margin: 0 !important; padding-bottom: 0 !important; color: #4C596D !important; font-size: 15.5px !important; line-height: 1.55 !important; }
.dt-article-cta-final .dt-article-cta-title, .dt-article-cta-final .dt-article-cta-text { color: #ffffff !important; }
.dt-article-cta-final .dt-article-cta-text { opacity: 0.86; }
.dt-article-cta-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 18px; border: 1px solid #ff6c1a; border-radius: 10px; background: #ff6c1a; color: #ffffff !important; font-size: 14px; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; }
.dt-article-cta-btn:hover { background: #e85a0e; border-color: #e85a0e; box-shadow: 0 10px 22px rgba(255, 108, 26, 0.24); transform: translateY(-1px); }
@media (max-width: 767px) {
  .dt-article-cta { grid-template-columns: 1fr; gap: 14px; padding: 18px; border-radius: 12px; }
  .dt-article-cta-title { font-size: 18px !important; }
  .dt-article-cta-text { font-size: 13.5px !important; }
  .dt-article-cta-btn { width: auto; justify-self: center; white-space: normal; }
}
/* Keep TOC labels in logical LTR order even inside RTL scroll containers */
.blog-toc .menu-link { direction: ltr; unicode-bidi: isolate; text-align: left; display: block; }
.toc-scroll .toc-subitems .menu-link.active { background: transparent; }
.toc-subitems li { list-style: none; position: relative; padding-left: 30px; }
.toc-scroll .toc-subitems li .menu-link.active::before { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 100%; background: #ff6c1a; left: 15px; top: 12px; transform: translate(-50%, -50%); }
.toc-subitems { flex-direction: column; gap: 10px; margin: 10px 0; }
.toc-subitems.is-open { display: flex; }
.custom-scroll { max-height: 300px; overflow-y: auto; padding-right: 6px; direction: rtl; text-align: end; scrollbar-width: none; -ms-overflow-style: none; }
.custom-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.custom-scroll::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 20px; }
.custom-scrolls { max-height: 600px; overflow-y: auto; padding-right: 6px; direction: rtl; text-align: end; position: sticky; top: 100px; scrollbar-width: thin; scrollbar-color: #ff6c1a transparent; }
.custom-scrolls::-webkit-scrollbar { width: 5px; }
.custom-scrolls::-webkit-scrollbar-thumb { background-color: #ff6c1a; border-radius: 20px; }
.popular-number { margin: auto; color: #FF6C1A66; font-size: 32px; font-weight: 700; display: flex; justify-content: center; align-items: center; }
.cta-text .cta-title { margin: 0 0 2px !important; padding-bottom: 0 !important; color: var(--text, #192A44) !important; font-size: clamp(15px, 1.6vw, 17px) !important; font-weight: 700 !important; line-height: 1.35 !important; }
.popular-section { border: 3px solid #FF6C1A66; padding: 10px; border-radius: 15px; }
.horizontal-line { margin: 30px 0px; height: 0px; border-top: 0 solid #e6e8ea; position: relative; height: 2px; opacity: 1; background: #e6e8ea; }
.horizontal-lines { margin: 30px 0px 20px 0px; height: 0px; border-top: 0 solid #e6e8ea; position: relative; height: 2px; opacity: 1; background: #e6e8ea; }
.horizontal-lines:before, .horizontal-lines:after, .horizontal-line:before, .horizontal-line:after { width: 35px; height: 2px; background: #ff6c1a; content: ""; position: absolute; left: 0; top: 0; }
.horizontal-lines:after, .horizontal-line:after { width: 6px; background: #fff; left: 35px; }
.responsive-height { height: auto; /* mobile (default) */; }
@media (min-width: 768px) {
  .responsive-height { height: 100%; /* tablet + desktops */; }
}
.toc-subitems { display: none; }
.scroller.is-visible { display: flex; }
/* End */
/* how-to-build-deploy-spring-boot-application blog Start */
.content-main { border-radius: 15px; background: #2b2f35; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.content-main:hover { transform: translateY(-3px); }
.content-copy { padding: 10px 15px; border-radius: 15px 15px 0 0; border-bottom: 1px solid #ffddb9; }
.content-body { padding: 15px 15px; }
.content-body p { color: #ffddb9; }
.copy-wrapper { position: relative; display: flex; align-items: center; justify-content: center; font-size: 14px; border-radius: 8px; color: #fff; background: #ff6c1a; padding: 3px 10px; cursor: pointer; }
.copy-wrapper:hover { background-color: #e65a00; }
.content-body pre::-webkit-scrollbar { height: 4px; }
.content-body pre::-webkit-scrollbar-thumb { background-color: #ff6c1a; border-radius: 20px; }
.content-body pre code { color: #ffddb9; }
.copy-main { position: absolute; right: 10px; top: 10px; }
.copy-tooltip { position: absolute; top: -30px; right: 0; background-color: #fff; color: #000; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity 0.3s ease, transform 0.3s ease; z-index: 10; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.copy-tooltip.show { opacity: 1; transform: translateY(0); }
@media (max-width:991px) {
  .copy-main { position: relative; right: 10px; top: 10px; display: flex; justify-content: end; margin-bottom: 5px; }
}
/* End */
.author-detail-img { width: calc(100% - 70px); & img { width: 100%; }; }
@media (max-width:991px) {
  .author-detail-img { width: auto; & img { width: auto; }; }
}
@media (max-width:700px) {
  .author-detail-img { width: calc(100% - 70px); & img { width: 100% !important; height: auto !important; }; }
}
.banner-new { background-color: #4c596d; align-items: center; justify-content: center; }
/* .banner-image { width: calc(100% - 250px); } */
.blog-banner-header { background-color: #192A44; height: 430px; padding: 20px; }
.blog-banner { height: 100%; }
@media(max-width:1199px) {
  .blog-banner-header { height: auto; }
  .blog-banner { height: auto; }
}
@media(max-width: 991px) {
  .popular-number { text-align: end; margin: 0; }
}
@media(max-width:576px) {
  .blog-header h1 { text-align: center !important; margin: auto !important; }
  .blog-banner-header { display: flex; align-items: center; height: 200px; }
  .blog-banner { display: block; align-items: center !important; margin: auto; }
  .banner-image { display: none; }
}
@media (max-width:991px) {
  .popular-content hr { border-top: 0 solid #e6e8ea; position: relative; height: 2px; opacity: 1; background: #e6e8ea; margin: 70px 0px 10px 0px; }
  .popular-content hr:before, .popular-content hr:after { width: 35px; height: 2px; background: #ff6c1a; content: ""; position: absolute; left: 0; top: 0; }
  .popular-content hr:after { width: 6px; background: #fff; left: 35px; }
}
@media (max-width: 480px) {
  .popular-content hr { margin: 40px 0px 60px 0px; }
}
.recommend { display: flex; border-radius: 24px; border: 1.5px solid #ff6c1a; background: rgba(255, 108, 26, 0.02); padding: 30px 40px; max-width: 830px; margin: 0 auto; flex-direction: row; background: linear-gradient(240deg, #ffe6cf, #fff2e8); }
/* recommend section Start */
.recommend h4 { padding: 10px 0 5px 0 !important; }
.recommend h5 { font-size: 14px !important; padding: 7px !important; border-radius: 24px; font-size: 12px; font-weight: 600; color: #ff7a00; background: linear-gradient(180deg, #ffe6cf); width: fit-content; }
.recommend p { font-size: 16px; padding: 0px; }
@media (max-width: 1199px) {
  .recommend { padding: 20px 24px; }
}
@media (max-width: 767px) {
  .recommend { flex-direction: column; padding: 16px 18px; }
  .recommend p { padding-bottom: 10px; }
}
@media (max-width: 567px) {
  .banner-cta-btns a { padding: 8px 10px; }
}
/* recommend section End */
/* protips section Start */
.protips { display: flex; border-radius: 24px; border: 1.5px solid #2563EB; background: rgba(255, 108, 26, 0.02); padding: 30px 40px; max-width: 830px; margin: 0 auto; flex-direction: row; background: linear-gradient(180deg, #DCE6F6 10%, #FFFFFF 100%); }
.protips span { color: #2563EB !important; }
.protips p { color: #2563EB !important; }
.protips ul li { color: #2563EB !important; }
.protips h4,.protips .h4 { color: #2563EB !important; }
.protips.orange { background: linear-gradient(180deg, #FFE6CF 10%, #FFFFFF 100%); border: 1.5px solid #FF6C1A; }
.protips.orange span { color: #FF6C1A !important; }
.protips.orange p { color: #FF6C1A !important; }
.protips.orange ul li { color: #FF6C1A !important; }
.protips.orange h4, .protips.orange .h4 { color: #FF6C1A !important; }
@media (max-width: 1199px) {
  .protips { padding: 20px 24px; }
}
@media (max-width: 767px) {
  .protips { padding: 16px 18px; }
}
/* protips section End */
/* quote section Start */
.quote-box { background: #f5f5f5; border-left: 4px solid #F97316; padding: 16px 18px; font-style: italic; font-family: "Georgia", "Times New Roman", serif; color: #1F2937; font-size: 20px; max-width: 880px; margin: 10px 0; }
@media (max-width: 1199px) {
  .quote-box { max-width: 100%; font-size: 18px; }
}
@media (max-width: 767px) {
  .quote-box { max-width: 100%; font-size: 16px; }
}
/* quote section End */
/* preferred notes Start */
.preferred-box { padding: 20px 24px!important; margin: 15px 0px!important; background-color: transparent; border-left: 4px solid transparent; transition: background-color 0.4s ease, border-left 0.4s ease, transform 0.3s ease; }
.preferred-box { border-left: 4px solid #FF6C1A; background-color: #f3f7ff; transform: translateY(-2px); }
.preferred-box:hover { transform: translateY(-4px); }
/* preferred notes End */
/* important notes Start */
.important-box { border-left: 4px solid #FF6C1A; padding: 5px 20px; margin: 10px 0; }
@media (max-width: 767px) {
  .important-box { border-left: 3px solid #FF6C1A; padding: 3px 8px; }
}
/* important notes End */
/* Quick Facts Start */
.quick-facts-card { margin: 24px 0 8px; padding: 24px 26px; border: 1px solid rgba(255, 108, 26, 0.18); border-left: 5px solid #FF6C1A; border-radius: 14px; background: linear-gradient(135deg, #fffaf6 0%, #ffffff 58%, #f7fbff 100%); box-shadow: 0 16px 34px rgba(25, 42, 68, 0.08); }
.quick-facts-card h3 { padding: 0 !important; margin: 0 0 18px !important; color: #10153f !important; font-size: 22px !important; line-height: 1.3 !important; font-weight: 800 !important; }
.quick-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.quick-facts p { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 10px; margin: 0 !important; padding: 12px 14px !important; border: 1px solid #edf2f7; border-radius: 10px; background: rgba(255, 255, 255, 0.78); color: #192A44; font-size: 15px !important; line-height: 1.5 !important; box-shadow: 0 8px 18px rgba(25, 42, 68, 0.05); }
.quick-facts p span { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(255, 108, 26, 0.10); font-size: 18px; line-height: 1; }
.fact-item { display: flex; align-items: center; gap: 10px; }
.fact-item span { font-size: 18px; }
@media (max-width: 991px) {
  .quick-facts { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .quick-facts-card { padding: 18px 16px; border-radius: 12px; }
  .quick-facts-card h3 { font-size: 19px !important; }
  .fact-item span { font-size: 17px; }
}
@media (max-width: 480px) {
  .quick-facts p { grid-template-columns: 30px minmax(0, 1fr); padding: 10px 11px !important; font-size: 14px !important; }
  .quick-facts p span { width: 30px; height: 30px; font-size: 16px; }
  .fact-item span { font-size: 16px; }
}
/* Quick Facts End */
/* Executive KPI Dashboard Infographic Start */
.kpi-dashboard-widget { border: 1px solid #dce5f0; border-top: 4px solid #ff6c1a; border-radius: 16px; background: #ffffff; box-shadow: 0 18px 40px rgba(25, 42, 68, 0.10); margin: 28px 0; overflow: hidden; }
.kpi-dash-header { background: #192A44; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.kpi-dash-title-area { display: flex; flex-direction: column; gap: 4px; }
.kpi-dash-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 108, 26, 0.18); color: #ff9a4d; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; width: fit-content; }
.kpi-dash-badge i { width: 6px; height: 6px; border-radius: 50%; background: #ff6c1a; display: inline-block; }
.kpi-dash-title { color: #ffffff !important; font-size: 22px !important; font-weight: 800 !important; margin: 0 !important; padding: 0 !important; line-height: 1.25 !important; }
.kpi-dash-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.kpi-tab-btn { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: #e2e8f0; font-size: 14px; font-weight: 700; padding: 9px 16px; border-radius: 8px; cursor: pointer; transition: all 0.25s ease; }
.kpi-tab-btn:hover, .kpi-tab-btn.is-active { background: #ff6c1a; border-color: #ff6c1a; color: #ffffff; box-shadow: 0 4px 12px rgba(255, 108, 26, 0.3); }
.kpi-dash-grid { padding: 22px; background: #f8fbff; }
.kpi-card { background: #ffffff; border: 1px solid #e1e8f2; border-radius: 14px; padding: 24px; transition: all 0.3s ease; }
.kpi-card.is-hidden { display: none; }
.kpi-card:hover { border-color: #ff6c1a; box-shadow: 0 12px 28px rgba(25, 42, 68, 0.08); }
.kpi-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.kpi-card-title { font-size: 22px !important; font-weight: 700 !important; color: #192A44 !important; margin: 0 !important; padding: 0 !important; line-height: 1.3 !important; }
.kpi-stage-tag { font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 6px; text-transform: uppercase; background: #eef4fc; color: #3b82f6; white-space: nowrap; }
.kpi-card-desc { font-size: 16px !important; color: #4C596D !important; line-height: 1.5 !important; margin-bottom: 20px !important; padding-bottom: 0 !important; }
.kpi-list { list-style: none; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 10px; }
.kpi-list-item { display: flex; align-items: center; justify-content: space-between; background: #f8fafc; border: 1px solid #edf2f7; border-radius: 8px; padding: 12px 16px; font-size: 16px !important; font-weight: 600; color: #192A44 !important; line-height: 1.3 !important; }
.kpi-list-item:hover { background: #ffffff; border-color: rgba(255, 108, 26, 0.4); }
.kpi-item-name { display: flex; align-items: center; gap: 10px; }
.kpi-bullet-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff6c1a; display: inline-block; flex-shrink: 0; }
.kpi-target-pill { font-size: 12px; font-weight: 700; color: #16a34a; background: #dcfce7; padding: 3px 10px; border-radius: 12px; }
.kpi-footer-note { background: #192A44; color: #e2e8f0; padding: 14px 22px; font-size: 14px; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.kpi-footer-note i { color: #ff6c1a; font-size: 16px; }
@media (max-width: 991px) {
  .kpi-dash-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
  .kpi-dashboard-widget { margin: 20px 0; border-radius: 12px; }
  .kpi-dash-header { padding: 14px; gap: 12px; }
  .kpi-dash-badge { font-size: 10px; padding: 3px 8px; }
  .kpi-dash-title { font-size: 17px !important; }
  .kpi-dash-tabs { gap: 6px; width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); }
  .kpi-tab-btn { font-size: 12px; padding: 7px 10px; text-align: center; width: 100%; box-sizing: border-box; }
  .kpi-dash-grid { padding: 12px; }
  .kpi-card { padding: 14px; border-radius: 10px; }
  .kpi-card-head { margin-bottom: 10px; gap: 8px; flex-direction: column; align-items: flex-start; }
  .kpi-card-title { font-size: 17px !important; }
  .kpi-stage-tag { font-size: 10px; padding: 3px 8px; }
  .kpi-card-desc { font-size: 13px !important; margin-bottom: 12px !important; line-height: 1.45 !important; }
  .kpi-list { gap: 8px; }
  .kpi-list-item { padding: 8px 10px; font-size: 13px !important; border-radius: 6px; }
  .kpi-item-name { gap: 6px; }
  .kpi-bullet-dot { width: 6px; height: 6px; }
  .kpi-target-pill { font-size: 10px; padding: 2px 7px; }
  .kpi-footer-note { padding: 10px 14px; font-size: 12px; }
}
/* Executive KPI Dashboard Infographic End */
/* Prevention Checklist Widget Start */
.prevention-checklist-widget { background: #ffffff; border: 1px solid #e1e8f2; border-radius: 14px; padding: 24px; margin: 24px 0; box-shadow: 0 12px 28px rgba(25, 42, 68, 0.06); }
.checklist-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #edf2f7; }
.checklist-progress-wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; }
.checklist-score { font-size: 14px; font-weight: 700; color: #ff6c1a; white-space: nowrap; }
.checklist-progress-bar { flex: 1; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.checklist-progress-fill { height: 100%; background: #ff6c1a; border-radius: 4px; transition: width 0.3s ease; }
.checklist-progress-fill.is-complete-0 { width: 0%; }
.checklist-progress-fill.is-complete-1 { width: 10%; }
.checklist-progress-fill.is-complete-2 { width: 20%; }
.checklist-progress-fill.is-complete-3 { width: 30%; }
.checklist-progress-fill.is-complete-4 { width: 40%; }
.checklist-progress-fill.is-complete-5 { width: 50%; }
.checklist-progress-fill.is-complete-6 { width: 60%; }
.checklist-progress-fill.is-complete-7 { width: 70%; }
.checklist-progress-fill.is-complete-8 { width: 80%; }
.checklist-progress-fill.is-complete-9 { width: 90%; }
.checklist-progress-fill.is-complete-10 { width: 100%; }
.checklist-items { list-style: none; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 8px; }
.checklist-item { border: 1px solid #edf2f7; border-radius: 8px; background: #f8fafc; transition: all 0.2s ease; padding: 0 !important; margin-bottom: 0; }
.checklist-item:hover { border-color: rgba(255, 108, 26, 0.3); background: #ffffff; }
.checklist-label { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0; cursor: pointer; width: 100%; box-sizing: border-box; }
.checklist-input { position: absolute; opacity: 0; pointer-events: none; }
.checklist-checkbox { width: 20px; height: 20px; border: 2px solid #94a3b8; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; background: #ffffff; flex-shrink: 0; transition: all 0.2s ease; position: relative; }
.checklist-checkbox::after { content: ""; width: 5px; height: 10px; border: solid #ffffff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); display: none; margin-top: -2px; }
.checklist-item.is-checked .checklist-checkbox { background: #ff6c1a; border-color: #ff6c1a; }
.checklist-item.is-checked .checklist-checkbox::after { display: block; }
.checklist-text { font-size: 15px !important; color: #192A44 !important; line-height: 1.45 !important; transition: all 0.2s ease; }
.checklist-item.is-checked .checklist-text { text-decoration: line-through; opacity: 0.6; color: #64748b !important; }
@media (max-width: 767px) {
  .prevention-checklist-widget { padding: 14px; margin: 18px 0; border-radius: 10px; }
  .checklist-header { margin-bottom: 12px; padding-bottom: 10px; }
  .checklist-label { padding: 9px 12px; gap: 10px; }
  .checklist-checkbox { width: 18px; height: 18px; }
  .checklist-checkbox::after { width: 4px; height: 8px; border-width: 0 2px 2px 0; }
  .checklist-text { font-size: 13px !important; }
}
/* Prevention Checklist Widget End */
/* Interactive 4 Pillars Infographic Widget Start */
.four-pillars-widget { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 20px; padding: 28px; margin: 32px 0; box-shadow: 0 12px 36px rgba(15, 23, 42, 0.04); position: relative; }
.pillars-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.pillar-nav-btn { background: #ffffff; border: 2px solid #e2e8f0; border-radius: 14px; padding: 16px 14px; cursor: pointer; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; text-align: left; outline: none; width: 100%; position: relative; overflow: hidden; min-height: 84px; }
.pillar-nav-btn::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: transparent; transition: background 0.3s ease; }
.pillar-nav-btn:hover { border-color: #ff6c1a; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255, 108, 26, 0.1); }
.pillar-nav-btn.is-active { border-color: #ff6c1a; background: #ffffff; box-shadow: 0 10px 28px rgba(255, 108, 26, 0.18); }
.pillar-nav-btn.is-active::before { background: #ff6c1a; }
.pillar-num { font-size: 12px; font-weight: 800; color: #ff6c1a; background: rgba(255, 108, 26, 0.1); padding: 3px 10px; border-radius: 20px; letter-spacing: 0.5px; margin-bottom: 8px; }
.pillar-title { font-size: 16px; font-weight: 700; color: #0f172a; margin: 0; }
.pillars-display-panel { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 28px 32px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03); position: relative; }
.pillar-detail-pane { display: none; opacity: 0; transform: translateY(6px); transition: all 0.3s ease-in-out; }
.pillar-detail-pane.is-active { display: block; opacity: 1; transform: translateY(0); }
.pane-content-wrapper { display: flex; align-items: flex-start; gap: 24px; }
.pane-accent-badge { width: 60px; height: 60px; background: linear-gradient(135deg, #ff6c1a 0%, #ff8a47 100%); color: #ffffff; font-size: 22px; font-weight: 800; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 20px rgba(255, 108, 26, 0.3); }
.pane-text-body { flex: 1; }
.pane-pillar-name { font-size: 22px !important; font-weight: 800 !important; color: #0f172a !important; margin-bottom: 8px !important; display: block !important; letter-spacing: -0.3px !important; }
.pane-pillar-text { font-size: 15px !important; color: #334155 !important; line-height: 1.65 !important; margin: 0 !important; }
.text-highlight { color: #ff6c1a; font-weight: 800; }
.pillars-status-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px solid #f1f5f9; font-size: 12px; color: #64748b; font-weight: 600; }
.status-dots { display: flex; gap: 6px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; transition: all 0.3s ease; }
.status-dot.is-active { background: #ff6c1a; width: 20px; border-radius: 10px; }
@media (max-width: 991px) {
  .pillars-nav { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .four-pillars-widget { padding: 16px; margin: 20px 0; border-radius: 14px; }
  .pillars-nav { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
  .pillar-nav-btn { padding: 12px; min-height: 72px; }
  .pillar-num { font-size: 11px; padding: 2px 8px; margin-bottom: 6px; }
  .pillar-title { font-size: 14px; }
  .pillars-display-panel { padding: 20px 16px; border-radius: 12px; }
  .pane-content-wrapper { flex-direction: column; gap: 14px; }
  .pane-accent-badge { width: 44px; height: 44px; font-size: 16px; border-radius: 12px; }
  .pane-pillar-name { font-size: 18px !important; margin-bottom: 4px !important; }
  .pane-pillar-text { font-size: 13px !important; }
}
/* Interactive 4 Pillars Infographic Widget End */
/* Interactive 3-Pillar Framework Infographic Widget Start */
.three-pillars-widget { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 24px; padding: 32px; margin: 36px 0; color: #0f172a; box-shadow: 0 12px 36px rgba(15, 23, 42, 0.04); position: relative; overflow: hidden; }
.three-pillars-widget::before { content: ""; position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255, 108, 26, 0.06) 0%, transparent 70%); pointer-events: none; }
.tp-master-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.tp-nav-card { background: #ffffff; border: 2px solid #e2e8f0; border-radius: 16px; padding: 20px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-align: left; position: relative; overflow: hidden; width: 100%; color: #0f172a; outline: none; }
.tp-nav-card:hover { border-color: #ff6c1a; transform: translateY(-4px); box-shadow: 0 10px 24px rgba(255, 108, 26, 0.12); }
.tp-nav-card.is-active { border-color: #ff6c1a; background: #ffffff; box-shadow: 0 12px 30px rgba(255, 108, 26, 0.18); }
.tp-nav-card.is-active::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #ff6c1a, #ff9e66); }
.tp-card-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #ff6c1a; background: rgba(255, 108, 26, 0.1); padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.blog-post-content h3.tp-card-title, .tp-card-title { display: block; font-size: 18px !important; font-weight: 800 !important; color: #0f172a !important; margin: 0 0 4px 0 !important; padding: 0 !important; line-height: 1.3 !important; }
.tp-card-count { font-size: 13px; color: #64748b; font-weight: 600; }
.tp-pane-container { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 28px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03); }
.tp-pillar-pane { display: none; opacity: 0; transform: translateY(8px); transition: all 0.35s ease; }
.tp-pillar-pane.is-active { display: block; opacity: 1; transform: translateY(0); }
.tp-pane-intro { background: #f1f5f9; border-left: 4px solid #ff6c1a; border-radius: 8px; padding: 16px 20px; margin-bottom: 24px; }
.tp-pillar-title { font-size: 20px; font-weight: 800; color: #0f172a; margin: 0 0 6px 0; }
.tp-pane-intro p { font-size: 16px; color: #334155; margin: 0; line-height: 1.6; }
.tp-risk-grid { display: flex; flex-direction: column; gap: 14px; }
.tp-risk-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; transition: all 0.3s ease; }
.tp-risk-card:hover { border-color: #ff6c1a; }
.tp-risk-header { padding: 18px 22px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; }
.tp-risk-title-wrap { display: flex; align-items: center; gap: 14px; }
.tp-risk-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(239, 68, 68, 0.1); color: #dc2626; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.blog-post-content h4.tp-risk-title { font-size: 16px; font-weight: 700; line-height: 1.35; color: #0f172a; margin: 0; padding: 0; }
.tp-risk-toggle-icon { font-size: 18px; color: #ff6c1a; transition: transform 0.3s ease; font-weight: bold; }
.tp-risk-card.is-open .tp-risk-toggle-icon { transform: rotate(180deg); }
.tp-risk-body { display: none; padding: 0 22px 22px 22px; border-top: 1px solid #e2e8f0; margin-top: 4px; background: #ffffff; }
.tp-risk-card.is-open .tp-risk-body { display: block; animation: fadeIn 0.3s ease; }
.tp-problem-desc { font-size: 14.5px; color: #334155; line-height: 1.65; margin: 16px 0 14px 0; }
.tp-solution-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 16px 18px; margin-top: 12px; }
.tp-sol-title { font-size: 13px; font-weight: 800; color: #16a34a; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.tp-solution-box p { font-size: 16px; color: #1e293b; margin: 0; line-height: 1.6; }
.tp-solution-box ul { margin: 6px 0 0 0; padding-left: 20px; color: #334155; font-size: 14px; }
.tp-solution-box ul li { margin-bottom: 6px; line-height: 1.5; }
@media (max-width: 991px) {
  .tp-master-nav { grid-template-columns: 1fr; gap: 12px; }
  .blog-post-content h4.tp-risk-title { font-size: 14px; }
}
@media (max-width: 767px) {
  .three-pillars-widget { padding: 18px; border-radius: 16px; margin: 24px 0; }
  .tp-pane-container { padding: 16px; border-radius: 14px; }
  .tp-risk-header { padding: 14px 16px; }
  .tp-risk-body { padding: 0 16px 16px 16px; }
  .tp-card-title { font-size: 16px; }
}
@media (max-width: 567px) {
  .three-pillars-widget { padding: 14px; border-radius: 14px; }
  .tp-master-nav { gap: 10px; margin-bottom: 0; }
  .tp-nav-card { padding: 16px 18px; border-radius: 14px; }
  .tp-nav-card.is-active { box-shadow: 0 10px 22px rgba(255, 108, 26, 0.14); }
  .tp-pane-container { display: none; }
  .tp-pillar-pane.is-active { display: block; margin: 4px 0 10px; padding: 14px; background: #ffffff; border: 1px solid rgba(255, 108, 26, 0.32); border-radius: 14px; box-shadow: 0 10px 22px rgba(255, 108, 26, 0.08); }
  .tp-pillar-pane.is-active::before { content: "Selected pillar details"; display: inline-block; margin: 0 0 10px; color: #ff6c1a; font-size: 10.5px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
  .tp-pane-intro { padding: 12px 14px; margin-bottom: 12px; }
  .tp-pane-intro p { font-size: 13px; line-height: 1.55; }
  .tp-risk-grid { gap: 10px; }
  .tp-risk-header { padding: 12px; }
  .tp-risk-icon { width: 28px; height: 28px; border-radius: 7px; }
  .blog-post-content h4.tp-risk-title { font-size: 14px; }
  .tp-risk-body { padding: 0 12px 12px; }
  .tp-problem-desc { font-size: 13px; line-height: 1.55; margin: 12px 0; }
  .tp-solution-box { padding: 12px; }
  .tp-solution-box p, .tp-solution-box ul { font-size: 13px; line-height: 1.55; }
}
/* Interactive 3-Pillar Framework Infographic Widget End */
/* Interactive Process Flow Vertical Roadmap Widget Start */
.process-flow-roadmap-widget { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 24px; padding: 32px; margin: 36px 0; box-shadow: 0 12px 36px rgba(15, 23, 42, 0.04); position: relative; }
.roadmap-layout-grid { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: center; }
/* Left Rail Styles */
.roadmap-rail-col { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 24px 20px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02); }
.roadmap-rail-title { text-align: center; margin-bottom: 20px; border-bottom: 1px solid #f1f5f9; padding-bottom: 12px; }
.rail-badge { display: inline-block; background: rgba(255, 108, 26, 0.1); color: #ff6c1a; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.rail-sub { display: block; font-size: 12.5px; color: #64748b; font-weight: 500; }
.roadmap-vertical-track { display: flex; flex-direction: column; gap: 12px; position: relative; padding-left: 0; }
.track-line-bg { position: absolute; left: 27.5px; top: 16px; bottom: 16px; width: 3px; background: #e2e8f0; border-radius: 4px; z-index: 1; }
.track-line-progress { position: absolute; left: 0; top: 0; width: 100%; background: linear-gradient(180deg, #ff6c1a, #ff9e66); border-radius: 4px; transition: height 0.4s ease; }
.track-line-progress.is-step-1 { height: 8.33%; }
.track-line-progress.is-step-2 { height: 25%; }
.track-line-progress.is-step-3 { height: 41.66%; }
.track-line-progress.is-step-4 { height: 58.33%; }
.track-line-progress.is-step-5 { height: 75%; }
.track-line-progress.is-step-6 { height: 91.66%; }
.roadmap-step-node { display: flex; align-items: center; gap: 14px; background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 10px 12px; cursor: pointer; text-align: left; transition: all 0.3s ease; position: relative; z-index: 2; width: 100%; outline: none; }
.roadmap-step-node:hover { background: #f8fafc; border-color: #cbd5e1; }
.roadmap-step-node.is-active { background: #ffffff; border-color: #ff6c1a; box-shadow: 0 6px 18px rgba(255, 108, 26, 0.14); }
.node-circle { width: 34px; height: 34px; border-radius: 50%; background: #ffffff; border: 2px solid #cbd5e1; color: #475569; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; }
.roadmap-step-node.is-active .node-circle { border-color: #ff6c1a; background: #ff6c1a; color: #ffffff; box-shadow: 0 0 12px rgba(255, 108, 26, 0.4); }
.roadmap-step-node.is-completed .node-circle { border-color: #10b981; background: #10b981; color: #ffffff; }
.node-meta { display: flex; flex-direction: column; gap: 2px; }
.node-title { font-size: 13.5px; font-weight: 700; color: #0f172a; line-height: 1.3; }
.node-time { font-size: 11.5px; color: #64748b; font-weight: 600; }
/* Right Showcase Card Styles */
.roadmap-detail-col { width: 100%; }
.roadmap-showcase-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 28px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03); min-height: auto; display: flex; flex-direction: column; justify-content: space-between; }
.showcase-top-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; border-bottom: 1px solid #f1f5f9; padding-bottom: 14px; }
.showcase-step-indicator { font-size: 13px; font-weight: 800; color: #ff6c1a; background: rgba(255, 108, 26, 0.08); padding: 4px 12px; border-radius: 20px; text-transform: uppercase; }
.showcase-play-btn { background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; color: #0f172a; cursor: pointer; transition: all 0.25s ease; outline: none; display: flex; align-items: center; gap: 6px; }
.showcase-play-btn:hover { border-color: #ff6c1a; color: #ff6c1a; }
.roadmap-phase-pane { display: none; opacity: 0; transform: translateX(12px); transition: all 0.35s ease; }
.roadmap-phase-pane.is-active { display: block; opacity: 1; transform: translateX(0); }
.phase-header-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.phase-tag { background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 8px; text-transform: uppercase; }
.phase-header-wrap h3 { font-size: 22px; font-weight: 800; color: #0f172a; margin: 0; }
.time-tag { background: #fff7ed; color: #ea580c; border: 1px solid #ffedd5; font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: 20px; }
.phase-text { font-size: 15.5px; color: #334155; line-height: 1.65; margin-bottom: 12px; }
.phase-checklist-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 18px 20px; }
.checklist-title { font-size: 13.5px; font-weight: 800; color: #16a34a; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: block; }
.phase-checklist-box ul { margin: 0; padding-left: 20px; color: #334155; font-size: 14.5px; }
.phase-checklist-box ul li { margin-bottom: 6px; line-height: 1.5; }
.showcase-bottom-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; border-top: 1px solid #f1f5f9; padding-top: 14px; }
.roadmap-nav-btn { background: #ffffff; border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px 20px; font-size: 14px; font-weight: 700; color: #0f172a; cursor: pointer; transition: all 0.25s ease; outline: none; }
.roadmap-nav-btn:hover:not(:disabled) { border-color: #ff6c1a; color: #ff6c1a; box-shadow: 0 4px 14px rgba(255, 108, 26, 0.14); }
.roadmap-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 991px) {
  .roadmap-layout-grid { grid-template-columns: 1fr; gap: 20px; }
  .track-line-bg { display: none; }
  .roadmap-vertical-track { flex-direction: row; flex-wrap: wrap; gap: 10px; padding-left: 0; }
  .roadmap-step-node { width: calc(50% - 5px); }
  .roadmap-showcase-card { min-height: auto; padding: 20px; }
  .phase-text { margin-bottom: 10px; font-size: 14.5px; }
  .showcase-bottom-nav { margin-top: 14px; padding-top: 12px; }
}
@media (max-width: 767px) {
  .process-flow-roadmap-widget { padding: 16px; margin: 18px 0; border-radius: 14px; }
  .roadmap-layout-grid { gap: 16px; }
  .roadmap-rail-col { padding: 16px 14px; border-radius: 14px; }
  .roadmap-rail-title { margin-bottom: 12px; padding-bottom: 8px; }
  .rail-badge { font-size: 11px; padding: 3px 8px; }
  .rail-sub { font-size: 11.5px; }
  .roadmap-step-node { padding: 8px 10px; gap: 10px; border-radius: 10px; }
  .node-circle { width: 28px; height: 28px; font-size: 11.5px; border-width: 1.5px; }
  .node-title { font-size: 12.5px; }
  .node-time { font-size: 10.5px; }
  .roadmap-showcase-card { padding: 16px; border-radius: 14px; min-height: auto; }
  .showcase-top-bar { margin-bottom: 12px; padding-bottom: 10px; }
  .showcase-step-indicator { font-size: 11px; padding: 3px 10px; }
  .phase-header-wrap { margin-bottom: 10px; gap: 8px; }
  .phase-header-wrap h3 { font-size: 16.5px; }
  .time-tag { font-size: 11.5px; padding: 2px 8px; }
  .phase-text { font-size: 13.5px; line-height: 1.55; margin-bottom: 8px; }
  .showcase-bottom-nav { margin-top: 10px; padding-top: 10px; }
  .roadmap-nav-btn { padding: 8px 14px; font-size: 12.5px; border-radius: 8px; }
}
@media (max-width: 575px) {
  .roadmap-step-node { width: 100%; }
  .process-flow-roadmap-widget { padding: 14px; border-radius: 14px; margin: 16px 0; }
  .roadmap-showcase-card { padding: 14px; border-radius: 12px; min-height: auto; }
  .phase-header-wrap h3 { font-size: 15.5px; }
  .phase-text { font-size: 13px; margin-bottom: 6px; }
  .showcase-bottom-nav { margin-top: 8px; padding-top: 8px; }
}
@media (max-width: 567px) {
  .roadmap-layout-grid { gap: 0; }
  .roadmap-vertical-track { gap: 8px; }
  .roadmap-detail-col { width: 100%; margin: 4px 0 8px; }
  .roadmap-detail-col::before { content: "Selected phase details"; display: inline-block; margin: 2px 0 8px 42px; color: #ff6c1a; font-size: 10.5px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
  .roadmap-showcase-card { border-color: rgba(255, 108, 26, 0.35); box-shadow: 0 10px 22px rgba(255, 108, 26, 0.10); }
  .showcase-top-bar { margin-bottom: 10px; }
  .showcase-bottom-nav { gap: 8px; }
  .roadmap-nav-btn { flex: 1 1 auto; min-width: 0; padding: 6px 6px; font-size: 11px; line-height: 1.2; white-space: nowrap; border-radius: 7px; }
}
/* Interactive Process Flow Vertical Roadmap Widget End */