@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; }
.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 li, .blog-post-content ol li, .blog-post-content p { color: #192A44; font-size: 18px; font-weight: 400; line-height: 35px; padding-bottom: 14px; }
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; padding-bottom: 20px; }
.blog-post-content h3, .blog-post-content .h3 { color: #192A44; font-size: 22px; font-weight: 700; line-height: normal; padding: 10px 0 10px 0px; }
.blog-post-content h4, .blog-post-content .h4 { color: #192A44; font-size: 20px; font-weight: 600; line-height: normal; padding: 10px 0px; }
.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; }
@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; }
@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 { padding: 25px 0 5px 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-bottom: 15px; }
    .blog-post-content ul li, .blog-post-content ol li, .blog-post-content p { font-size: 16px; }
    label { font-size: 16px; }
    .sub-titles { font-size: 16px; }
    .blog-post-content h4, .blog-post-content .h4 { font-size: 17px; }
    .blog-post-content .h2, .blog-post-content h2 { font-size: 18px; }
    .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-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 .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 .accordion-item {
    border: 0; border-bottom: 1px solid #E5E7EB; &: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; &: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: absolute !important; top: 100% !important; max-height: 300px !important; overflow-y: auto !important; &::-webkit-scrollbar { width: 5px !important; }
    &::-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; }
/* 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; }
.custom-scroll {
    /* max-height: calc(100vh - 150px); */
    max-height: 300px; overflow-y: auto; padding-right: 6px; direction: rtl; text-align: end; &::-webkit-scrollbar { width: 5px; }
    &::-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; &::-webkit-scrollbar { width: 5px; }
    &::-webkit-scrollbar-thumb { background-color: #ff6c1a; border-radius: 20px; }
}
.popular-number { margin: auto; color: #FF6C1A66; font-weight: 700; display: flex; justify-content: center; align-items: center; }
.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; }
/* 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; &:hover { background-color: #e65a00; }
}
.content-body pre {
    &::-webkit-scrollbar { height: 4px; }
    &::-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 { display: flex; flex-direction: column; gap: 12px; }
.fact-item { display: flex; align-items: center; gap: 10px; }
.fact-item span { font-size: 18px; }
@media (max-width: 700px) {
    .fact-item span { font-size: 17px; }
}
@media (max-width: 480px) {
    .fact-item span { font-size: 16px; }
}
/* Quick Facts End */
.blog-post-content ul.star-list { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.blog-post-content ul.star-list li { list-style: none !important; position: relative; padding-left: 22px; }
.blog-post-content ul.star-list li::before { content: "\2605"; position: absolute; left: 0; top: 10px; color: #000000; font-size: 14px; line-height: 1; }

.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; &:hover { background-color: #e65a00; }
}
.content-body pre {
    &::-webkit-scrollbar { height: 4px; }
    &::-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 */
.trust-badges { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 16px; font-weight: 500; }
.trust-badges > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(255, 108, 26, 0.15); border: 1px solid #f68e44; border-radius: 999px; box-shadow: 0 6px 14px rgba(17, 24, 39, 0.06); }
.trust-badges .trust-rating-icon { font-size: 1.05em; color: #FF6C1A; }
.trust-badges .rating-value { font-weight: 700; color: #111827; }
.trust-badges .rating-stars { display: inline-flex; align-items: center; gap: 2px; line-height: 1; }
.trust-badges .rating-stars i { font-size: 0.95em; color: #f59e0b; }
.rating-flex { flex-wrap: wrap; }
@media (max-width: 767px) {
    .trust-badges { gap: 8px; font-size: 14px; }
    .trust-badges > span { width: 100%; justify-content: flex-start; padding: 8px 12px; border-radius: 14px; line-height: 1.4; }
    .trust-badges > span b { white-space: nowrap; }
}
.trend-stats-wrap { background:rgba(255, 108, 26, 0.10); border:1px solid #E5E7EB; border-radius:16px; padding:18px; }
.trend-stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.trend-stat-card { background:rgba(255, 108, 26, 0.10); border:1px solid #E5E7EB; border-radius:14px; padding:18px 16px; box-shadow:0 10px 24px #f3f6f9; height:100%; }
.trend-stat-value { color:#FF6C1A; font-weight:800; font-size:28px; line-height:1.15; letter-spacing:-0.02em; margin-bottom:10px; }
.trend-stat-title { color:#000; font-weight:600; font-size:13px; line-height:1.35; margin-bottom:10px; }
.trend-stat-source { color:#000; font-size:12px; line-height:1.3; }
@media (max-width: 1199px) {
    .trend-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 575px) {
    .trend-stats-wrap { padding:14px;border-radius:14px; }
    .trend-stats-grid { grid-template-columns:1fr;gap:12px; }
    .trend-stat-value { font-size:26px; }
}

.industry-impacts-widget { --white: #ffffff; --page-bg: #f7f9fc; --navy: #172640; --muted: #63718a; --border: #dce5f0; --blue: #1778d2; --green: #138c62; --orange: #ff681f; --violet: #6848bd; --red: #d83b3b; --yellow: #d99a16; width: 100%; margin: 24px 0; border: 1px solid var(--border); border-radius: 22px; background: radial-gradient(circle at 8% 11%, rgba(255, 104, 31, 0.045), transparent 28%), radial-gradient(circle at 91% 86%, rgba(23, 120, 210, 0.055), transparent 30%), linear-gradient(135deg, rgba(250, 252, 255, 0.96), #fff 48%, rgba(248, 251, 255, 0.93)); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05); position: relative; }
.industry-impacts-widget .canvas { padding: 30px; display: flex; flex-direction: column; gap: 20px; }
.industry-impacts-widget .tabs-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: center; }
.industry-impacts-widget .tab-list { display: flex; flex-direction: column; gap: 10px; }
.industry-impacts-widget .tab-button { --accent: var(--blue); display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 52px; width: 100%; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 12px; background: #fff; color: var(--navy); font-family: inherit; text-align: left; cursor: pointer; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.03); transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease; }
.industry-impacts-widget .tab-button:nth-child(1) { --accent: var(--blue); }
.industry-impacts-widget .tab-button:nth-child(2) { --accent: var(--orange); }
.industry-impacts-widget .tab-button:nth-child(3) { --accent: var(--green); }
.industry-impacts-widget .tab-button:nth-child(4) { --accent: var(--violet); }
.industry-impacts-widget .tab-button:nth-child(5) { --accent: var(--yellow); }
.industry-impacts-widget .tab-button:nth-child(6) { --accent: var(--red); }
.industry-impacts-widget .tab-button:hover, .industry-impacts-widget .tab-button.is-active { transform: translateX(4px); border-color: color-mix(in srgb, var(--accent) 58%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, #fff); box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06); }
.industry-impacts-widget .tab-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, #fff); transition: color 0.22s ease, background 0.22s ease; }
.industry-impacts-widget .tab-button:hover .tab-icon, .industry-impacts-widget .tab-button.is-active .tab-icon { color: #fff; background: var(--accent); }
.industry-impacts-widget .tab-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.industry-impacts-widget .tab-name { font-size: 13px; font-weight: 700; line-height: 1.2; }
.industry-impacts-widget .tab-panel-wrap { border: 1px solid var(--border); border-radius: 20px; background: #fff; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04); display: flex; flex-direction: column; }
.industry-impacts-widget .tab-panel { --accent: var(--blue); display: none; flex-direction: column; gap: 16px; padding: 24px; background: radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 38%), color-mix(in srgb, var(--accent) 4%, #fff); border-radius: 20px; }
.industry-impacts-widget .tab-panel.is-active { display: flex; animation: widgetFadeIn 0.25s ease-out forwards; }
@keyframes widgetFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.industry-impacts-widget .panel-hero { display: flex; align-items: center; gap: 12px; }
.industry-impacts-widget .panel-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: var(--accent); box-shadow: 0 8px 16px color-mix(in srgb, var(--accent) 22%, transparent); }
.industry-impacts-widget .panel-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.industry-impacts-widget .panel-title { color: var(--navy); font-size: 18px; font-weight: 800; margin: 0; padding: 0; }
.industry-impacts-widget .panel-desc { color: var(--navy); font-size: 15px; line-height: 22px; margin: 0 0 10px 0; padding: 0; font-weight: 500; }
.industry-impacts-widget .impact-box { padding: 16px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius: 14px; background: rgba(255, 255, 255, 0.9); }
.industry-impacts-widget .challenges-title { font-weight: 700; font-size: 14px; color: var(--orange); display: block; margin-bottom: 8px; }
.industry-impacts-widget .challenges-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.industry-impacts-widget .challenges-list li { font-size: 14px; font-weight: 600; color: var(--navy); display: flex; align-items: center; line-height: 1.3; padding: 0 !important; }
.industry-impacts-widget .challenges-list li i { color: #dc3545; font-size: 14px; margin-right: 6px; }
.industry-impacts-widget .manufacturing { --accent: var(--blue); }
.industry-impacts-widget .retail { --accent: var(--orange); }
.industry-impacts-widget .healthcare { --accent: var(--green); }
.industry-impacts-widget .logistics { --accent: var(--violet); }
.industry-impacts-widget .food { --accent: var(--yellow); }
.industry-impacts-widget .automotive { --accent: var(--red); }
@media (max-width: 1199px) {
    .industry-impacts-widget .tabs-shell { grid-template-columns: 1fr; }
    .industry-impacts-widget .tab-panel-wrap { min-height: 380px; }
    .industry-impacts-widget .challenges-list { grid-template-columns: 1fr; }
}
@media (max-width: 991px) {
    .industry-impacts-widget .tab-list { display: contents; }
    .industry-impacts-widget .tab-panel-wrap { display: contents; }
    .industry-impacts-widget .tab-button:nth-of-type(1) { order: 1; }
    .industry-impacts-widget .tab-panel:nth-of-type(1) { order: 2; }
    .industry-impacts-widget .tab-button:nth-of-type(2) { order: 3; }
    .industry-impacts-widget .tab-panel:nth-of-type(2) { order: 4; }
    .industry-impacts-widget .tab-button:nth-of-type(3) { order: 5; }
    .industry-impacts-widget .tab-panel:nth-of-type(3) { order: 6; }
    .industry-impacts-widget .tab-button:nth-of-type(4) { order: 7; }
    .industry-impacts-widget .tab-panel:nth-of-type(4) { order: 8; }
    .industry-impacts-widget .tab-button:nth-of-type(5) { order: 9; }
    .industry-impacts-widget .tab-panel:nth-of-type(5) { order: 10; }
    .industry-impacts-widget .tab-button:nth-of-type(6) { order: 11; }
    .industry-impacts-widget .tab-panel:nth-of-type(6) { order: 12; }
    .industry-impacts-widget .tab-panel { border: 1px solid var(--border); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04); margin-bottom: 12px; padding: 14px; gap: 12px; }
    .industry-impacts-widget .panel-hero { display: none !important; }
    .industry-impacts-widget .panel-desc { font-size: 14px; line-height: 20px; }
    .industry-impacts-widget .impact-box { padding: 12px; }
}
/* Maturity Assessment Widget */
.maturity-assessment-widget { --white: #ffffff; --navy: #172640; --muted: #5f6f86; --border: #dce5f0; --soft-border: #edf2f7; --orange: #ff681f; --blue: #1778d2; --green: #15845b; width: 100%; margin: 24px 0; }
.maturity-assessment-widget .maturity-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: center; }
.maturity-assessment-widget .level-list { position: relative; display: flex; flex-direction: column; gap: 10px; }
.maturity-assessment-widget .level-list::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 27px; width: 2px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 104, 31, 0.26), rgba(23, 120, 210, 0.24), rgba(21, 132, 91, 0.28)); }
.maturity-assessment-widget .level-button { --accent: var(--orange); position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 12px; background: #fff; color: var(--navy); font-family: inherit; text-align: left; cursor: pointer; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.03); transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease; }
.maturity-assessment-widget .level-button:nth-child(1) { --accent: var(--orange); }
.maturity-assessment-widget .level-button:nth-child(2) { --accent: #ff8a3d; }
.maturity-assessment-widget .level-button:nth-child(3) { --accent: var(--blue); }
.maturity-assessment-widget .level-button:nth-child(4) { --accent: #4b6edb; }
.maturity-assessment-widget .level-button:nth-child(5) { --accent: var(--green); }
.maturity-assessment-widget .level-button:hover, .maturity-assessment-widget .level-button.is-active { transform: translateX(4px); border-color: color-mix(in srgb, var(--accent) 58%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, #fff); box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06); }
.maturity-assessment-widget .level-badge { position: relative; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: #fff; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); font-size: 13px; font-weight: 800; transition: color 0.22s ease, background 0.22s ease; }
.maturity-assessment-widget .level-button.is-active .level-badge, .maturity-assessment-widget .level-button:hover .level-badge { color: #fff; background: var(--accent); }
.maturity-assessment-widget .level-copy { display: flex; flex-direction: column; gap: 2px; }
.maturity-assessment-widget .level-copy strong { color: var(--navy); font-size: 13px; font-weight: 800; line-height: 1.2; }
.maturity-assessment-widget .level-copy span { color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.2; }
.maturity-assessment-widget .stage-panel { border: 1px solid var(--border); border-radius: 20px; background: #fff; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04); display: flex; flex-direction: column; }
.maturity-assessment-widget .stage-card { --accent: var(--orange); display: none; flex-direction: column; gap: 16px; padding: 24px; background: radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 38%), color-mix(in srgb, var(--accent) 4%, #fff); border-radius: 20px; }
.maturity-assessment-widget .stage-card.is-active { display: flex; animation: widgetFadeIn 0.25s ease-out forwards; }
.maturity-assessment-widget .stage-head { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--soft-border); }
.maturity-assessment-widget .stage-number { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 74%, #172640)); font-size: 20px; font-weight: 800; box-shadow: 0 8px 16px color-mix(in srgb, var(--accent) 22%, transparent); }
.maturity-assessment-widget .stage-title { display: grid; gap: 4px; }
.maturity-assessment-widget .stage-title span { width: fit-content; padding: 4px 10px; border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); font-size: 11px; font-weight: 800; line-height: 1; }
.maturity-assessment-widget .stage-title h3, .maturity-assessment-widget .stage-title .stage-title-text { color: var(--navy); font-size: 18px; font-weight: 800; margin: 0; padding: 0; line-height: 1.2; }
.maturity-assessment-widget .description-box { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius: 14px; background: rgba(255, 255, 255, 0.9); }
.maturity-assessment-widget .description-label { color: var(--orange); font-size: 12px; font-weight: 800; line-height: 1; text-transform: uppercase; margin: 0; }
.maturity-assessment-widget .description-text { color: var(--navy); font-size: 15px; font-weight: 600; line-height: 22px; margin: 0; }
@media (max-width: 1199px) {
    .maturity-assessment-widget .maturity-shell { grid-template-columns: 1fr; }
}
@media (max-width: 991px) {
    .maturity-assessment-widget .level-list { display: contents; }
    .maturity-assessment-widget .level-list::before { display: none; }
    .maturity-assessment-widget .stage-panel { display: contents; }
    .maturity-assessment-widget .level-button:nth-of-type(1) { order: 1; }
    .maturity-assessment-widget .stage-card:nth-of-type(1) { order: 2; }
    .maturity-assessment-widget .level-button:nth-of-type(2) { order: 3; }
    .maturity-assessment-widget .stage-card:nth-of-type(2) { order: 4; }
    .maturity-assessment-widget .level-button:nth-of-type(3) { order: 5; }
    .maturity-assessment-widget .stage-card:nth-of-type(3) { order: 6; }
    .maturity-assessment-widget .level-button:nth-of-type(4) { order: 7; }
    .maturity-assessment-widget .stage-card:nth-of-type(4) { order: 8; }
    .maturity-assessment-widget .level-button:nth-of-type(5) { order: 9; }
    .maturity-assessment-widget .stage-card:nth-of-type(5) { order: 10; }
    .maturity-assessment-widget .stage-card { border: 1px solid var(--border); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04); margin-bottom: 12px; padding: 14px; gap: 12px; }
    .maturity-assessment-widget .stage-head { display: none !important; }
    .maturity-assessment-widget .description-box { padding: 12px; }
}
/* Trends 2026 Cards Animation Widget */
.trends-animation-widget { --white: #ffffff; --page-bg: #f7f9fc; --navy: #172640; --border: #dce5f0; --blue: #1778d2; --green: #138c62; --orange: #ff681f; --violet: #6848bd; --red: #d83b3b; --yellow: #d99a16; width: 100%; margin: 24px 0; position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 22px; background: radial-gradient(circle at 8% 11%, rgba(255, 104, 31, 0.045), transparent 28%), radial-gradient(circle at 91% 86%, rgba(23, 120, 210, 0.055), transparent 30%), linear-gradient(135deg, rgba(250, 252, 255, 0.96), #fff 48%, rgba(248, 251, 255, 0.93)); box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08); }
.trends-animation-widget::after { content: ""; position: absolute; inset: 18px; border: none; border-radius: 17px; pointer-events: none; z-index: 4; }
.trends-animation-widget .canvas { position: relative; z-index: 1; height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 26px; padding: 42px 52px 46px; }
.trends-animation-widget .page-title { max-width: 780px; margin: 0 auto; color: var(--navy); font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: 0; text-align: center; border: none; padding: 0; }
.trends-animation-widget .trend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: 18px; min-height: 0; }
.trends-animation-widget .trend-card { --accent: var(--blue); position: relative; display: grid; grid-template-rows: 64px minmax(0, auto); align-content: center; justify-items: center; gap: 16px; min-height: 180px; padding: 24px 18px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--accent) 5%, #fff); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.065); text-align: center; transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease; }
.trends-animation-widget .trend-card::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 14px; height: 5px; border-radius: 999px; background: var(--accent); transform: scaleX(0.3); transform-origin: center; transition: transform 0.24s ease; }
.trends-animation-widget .trend-card:hover, .trends-animation-widget .trend-card:focus-within { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 58%, var(--border)); background: color-mix(in srgb, var(--accent) 9%, #fff); box-shadow: 0 20px 34px rgba(15, 23, 42, 0.13); }
.trends-animation-widget .trend-card:hover::after, .trends-animation-widget .trend-card:focus-within::after { transform: scaleX(1); }
.trends-animation-widget .trend-card:nth-child(1) { --accent: var(--blue); }
.trends-animation-widget .trend-card:nth-child(2) { --accent: var(--red); }
.trends-animation-widget .trend-card:nth-child(3) { --accent: var(--green); }
.trends-animation-widget .trend-card:nth-child(4) { --accent: var(--violet); }
.trends-animation-widget .trend-card:nth-child(5) { --accent: var(--yellow); }
.trends-animation-widget .trend-card:nth-child(6) { --accent: var(--orange); }
.trends-animation-widget .trend-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 19px; color: var(--accent); background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, var(--border)), 0 10px 18px rgba(15, 23, 42, 0.07); transition: color 0.24s ease, background 0.24s ease, transform 0.24s ease; }
.trends-animation-widget .trend-card:hover .trend-icon, .trends-animation-widget .trend-card:focus-within .trend-icon { color: #fff; background: var(--accent); transform: scale(1.06); }
.trends-animation-widget .trend-icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.trends-animation-widget .trend-title { color: var(--navy); font-size: 16px; font-weight: 700; line-height: 1.22; letter-spacing: 0; margin:auto 0; }
@media (max-width: 1199px) {
    .trends-animation-widget { height: auto; min-height: auto; }
    .trends-animation-widget .canvas { padding: 32px 24px; }
    .trends-animation-widget .page-title { font-size: 20px; }
    .trends-animation-widget .trend-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; }
    .trends-animation-widget .trend-card { min-height: 86px; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: 1fr; justify-items: start; text-align: left; padding: 16px 18px; align-content: center; }
    .trends-animation-widget .trend-card::after { left: auto; top: 14px; right: 12px; bottom: 14px; width: 4px; height: auto; transform: scaleY(0.34); }
    .trends-animation-widget .trend-card:hover::after, .trends-animation-widget .trend-card:focus-within::after { transform: scaleY(1); }
    .trends-animation-widget .trend-icon { width: 42px; height: 42px; border-radius: 10px; }
    .trends-animation-widget .trend-icon svg { width: 22px; height: 22px; }
    .trends-animation-widget .trend-title { font-size: 15px; }
}
/* Visibility vs Transparency Matrix Widget */
.visibility-vs-transparency-matrix { --white: #ffffff; --page-bg: #f7f9fc; --navy: #172640; --muted: #5f6f86; --border: #dce5f0; --soft-border: #edf2f7; --blue: #1778d2; --orange: #ff681f; width: 100%; margin: 24px 0; position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 22px; background: radial-gradient(circle at 8% 11%, rgba(255, 104, 31, 0.045), transparent 28%), radial-gradient(circle at 91% 86%, rgba(23, 120, 210, 0.055), transparent 30%), linear-gradient(135deg, rgba(250, 252, 255, 0.96), #fff 48%, rgba(248, 251, 255, 0.93)); box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08); }
.visibility-vs-transparency-matrix::after { content: ""; position: absolute; inset: 18px; border: none; border-radius: 17px; pointer-events: none; z-index: 4; }
.visibility-vs-transparency-matrix .canvas { position: relative; z-index: 1; height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 22px; padding: 42px 50px 46px; }
.visibility-vs-transparency-matrix .page-title { max-width: 780px; margin: 0 auto; color: var(--navy); font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: 0; text-align: center; border: none; padding: 0; }
.visibility-vs-transparency-matrix .comparison-shell { display: grid; grid-template-columns: 285px minmax(0, 1fr); gap: 18px; min-height: 0; }
.visibility-vs-transparency-matrix .factor-list { display: grid; gap: 9px; align-content: stretch; min-height: 0; }
.visibility-vs-transparency-matrix .factor-button { --accent: var(--blue); display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 54px; width: 100%; padding: 10px 13px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 14px; background: #fff; color: var(--navy); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 8px 16px rgba(15, 23, 42, 0.045); transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease; }
.visibility-vs-transparency-matrix .factor-button:nth-child(even) { --accent: var(--orange); }
.visibility-vs-transparency-matrix .factor-button:hover, .visibility-vs-transparency-matrix .factor-button.is-active { transform: translateX(4px); border-color: color-mix(in srgb, var(--accent) 56%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, #fff); box-shadow: 0 13px 24px rgba(15, 23, 42, 0.08); }
.visibility-vs-transparency-matrix .factor-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, #fff); font-size: 12px; font-weight: 800; transition: color 0.22s ease, background 0.22s ease; }
.visibility-vs-transparency-matrix .factor-button:hover .factor-mark, .visibility-vs-transparency-matrix .factor-button.is-active .factor-mark { color: #fff; background: var(--accent); }
.visibility-vs-transparency-matrix .factor-name { font-size: 12px; font-weight: 800; line-height: 1.28; letter-spacing: 0; margin: 0; }
.visibility-vs-transparency-matrix .detail-panel { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: 0 14px 28px rgba(15, 23, 42, 0.065); min-height: 320px; }
.visibility-vs-transparency-matrix .detail-card { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; gap: 18px; padding: 24px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.24s ease, transform 0.24s ease; }
.visibility-vs-transparency-matrix .detail-card.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.visibility-vs-transparency-matrix .detail-title { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; width: fit-content; max-width: 100%; padding: 10px 18px; border-radius: 999px; color: var(--navy); background: linear-gradient(90deg, rgba(23, 120, 210, 0.09), rgba(255, 104, 31, 0.1)); font-size: 14px; font-weight: 800; line-height: 1.15; letter-spacing: 0; margin: 0; }
.visibility-vs-transparency-matrix .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 0; }
.visibility-vs-transparency-matrix .compare-card { display: grid; grid-template-rows: auto 1fr; gap: 18px; min-height: 0; padding: 22px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius: 17px; background: color-mix(in srgb, var(--accent) 5%, #fff); }
.visibility-vs-transparency-matrix .visibility-card { --accent: var(--blue); }
.visibility-vs-transparency-matrix .transparency-card { --accent: var(--orange); }
.visibility-vs-transparency-matrix .compare-head { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 12px; }
.visibility-vs-transparency-matrix .compare-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: var(--accent); box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08); }
.visibility-vs-transparency-matrix .compare-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.visibility-vs-transparency-matrix .compare-title { color: var(--navy); font-size: 13.5px; font-weight: 700; line-height: 1.2; letter-spacing: 0; margin: 0; }
.visibility-vs-transparency-matrix .compare-value { display: flex; align-items: center; color: var(--muted); font-size: 14.5px; font-weight: 600; line-height: 1.32; letter-spacing: 0; margin: 0; }
@media (max-width: 1199px) {
    .visibility-vs-transparency-matrix { height: auto; min-height: auto; }
    .visibility-vs-transparency-matrix .canvas { padding: 32px 24px; }
    .visibility-vs-transparency-matrix .page-title { font-size: 20px; }
    .visibility-vs-transparency-matrix .comparison-shell { grid-template-columns: 1fr; }
    .visibility-vs-transparency-matrix .factor-list { grid-template-columns: 1fr; }
    .visibility-vs-transparency-matrix .detail-panel { min-height: 380px; }
    .visibility-vs-transparency-matrix .detail-card { padding: 18px; position: relative; display: none; height: auto; }
    .visibility-vs-transparency-matrix .detail-card.is-active { display: grid; opacity: 1; transform: none; }
    .visibility-vs-transparency-matrix .detail-grid { grid-template-columns: 1fr; }
    .visibility-vs-transparency-matrix .compare-title { font-size: 13px; }
    .visibility-vs-transparency-matrix .compare-value { font-size: 13px;padding-bottom:0px; }
}
@media (max-width: 991px) {
    .visibility-vs-transparency-matrix .factor-list { display: contents; }
    .visibility-vs-transparency-matrix .detail-panel { display: contents; }
    .visibility-vs-transparency-matrix .factor-button:nth-of-type(1) { order: 1; }
    .visibility-vs-transparency-matrix .detail-card:nth-of-type(1) { order: 2; }
    .visibility-vs-transparency-matrix .factor-button:nth-of-type(2) { order: 3; }
    .visibility-vs-transparency-matrix .detail-card:nth-of-type(2) { order: 4; }
    .visibility-vs-transparency-matrix .factor-button:nth-of-type(3) { order: 5; }
    .visibility-vs-transparency-matrix .detail-card:nth-of-type(3) { order: 6; }
    .visibility-vs-transparency-matrix .factor-button:nth-of-type(4) { order: 7; }
    .visibility-vs-transparency-matrix .detail-card:nth-of-type(4) { order: 8; }
    .visibility-vs-transparency-matrix .factor-button:nth-of-type(5) { order: 9; }
    .visibility-vs-transparency-matrix .detail-card:nth-of-type(5) { order: 10; }
    .visibility-vs-transparency-matrix .factor-button:nth-of-type(6) { order: 11; }
    .visibility-vs-transparency-matrix .detail-card:nth-of-type(6) { order: 12; }
    .visibility-vs-transparency-matrix .factor-button:nth-of-type(7) { order: 13; }
    .visibility-vs-transparency-matrix .detail-card:nth-of-type(7) { order: 14; }
    .visibility-vs-transparency-matrix .detail-card { border: 1px solid var(--border); box-shadow: 0 14px 28px rgba(15, 23, 42, 0.065); margin-bottom: 12px; border-radius: 18px; background: #fff; padding: 14px; gap: 12px; }
    .visibility-vs-transparency-matrix .detail-title { display: none !important; }
    .visibility-vs-transparency-matrix .compare-card { padding: 12px 14px; gap: 8px; border-radius: 12px; }
    .visibility-vs-transparency-matrix .compare-head { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
    .visibility-vs-transparency-matrix .compare-icon { width: 34px; height: 34px; border-radius: 10px; }
    .visibility-vs-transparency-matrix .compare-icon svg { width: 18px; height: 18px; stroke-width: 2; }
    .visibility-vs-transparency-matrix .detail-grid { gap: 10px; }
}
/* Technologies Enabling End-to-End Widget */
.technologies-enabling-widget { --white: #ffffff; --page-bg: #f7f9fc; --navy: #172640; --border: #dce5f0; --blue: #1778d2; --green: #138c62; --orange: #ff681f; --violet: #6848bd; --red: #d83b3b; --yellow: #d99a16; width: 100%; margin: 24px 0; position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 22px; background: radial-gradient(circle at 8% 11%, rgba(255, 104, 31, 0.045), transparent 28%), radial-gradient(circle at 91% 86%, rgba(23, 120, 210, 0.055), transparent 30%), linear-gradient(135deg, rgba(250, 252, 255, 0.96), #fff 48%, rgba(248, 251, 255, 0.93)); box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08); }
.technologies-enabling-widget::after { content: ""; position: absolute; inset: 18px; border: none; border-radius: 17px; pointer-events: none; z-index: 4; }
.technologies-enabling-widget .canvas { position: relative; z-index: 1; height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 26px; padding: 42px 52px 46px; }
.technologies-enabling-widget .page-title { max-width: 780px; margin: 0 auto; color: var(--navy); font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: 0; text-align: center; border: none; padding: 0; }
.technologies-enabling-widget .tech-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: 18px; min-height: 0; }
.technologies-enabling-widget .tech-card { --accent: var(--blue); display: grid; grid-template-rows: 64px minmax(0, auto); align-content: center; justify-items: center; gap: 17px; min-height: 180px; padding: 24px 18px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--accent) 5%, #fff); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.065); text-align: center; transition: transform 0.24s ease, box-shadow 0.24s ease; }
.technologies-enabling-widget .tech-card:hover { transform: translateY(-6px); box-shadow: 0 20px 34px rgba(15, 23, 42, 0.13); }
.technologies-enabling-widget .tech-card:nth-child(1) { --accent: var(--blue); }
.technologies-enabling-widget .tech-card:nth-child(2) { --accent: var(--green); }
.technologies-enabling-widget .tech-card:nth-child(3) { --accent: var(--orange); }
.technologies-enabling-widget .tech-card:nth-child(4) { --accent: var(--violet); }
.technologies-enabling-widget .tech-card:nth-child(5) { --accent: var(--red); }
.technologies-enabling-widget .tech-card:nth-child(6) { --accent: var(--yellow); }
.technologies-enabling-widget .tech-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 19px; color: #fff; background: var(--accent); box-shadow: 0 14px 24px color-mix(in srgb, var(--accent) 22%, transparent); }
.technologies-enabling-widget .tech-icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.technologies-enabling-widget .tech-title { color: var(--navy); font-size: 16px; font-weight: 700; line-height: 1.22; letter-spacing: 0; margin:auto 0; }
@media (max-width: 1199px) {
    .technologies-enabling-widget { height: auto; min-height: auto; }
    .technologies-enabling-widget .canvas { padding: 32px 24px; }
    .technologies-enabling-widget .page-title { font-size: 20px; }
    .technologies-enabling-widget .tech-grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; }
    .technologies-enabling-widget .tech-card { min-height: 86px; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: 1fr; justify-items: start; text-align: left; padding: 16px 18px; align-content: center; }
    .technologies-enabling-widget .tech-icon { width: 42px; height: 42px; border-radius: 10px; }
    .technologies-enabling-widget .tech-icon svg { width: 22px; height: 22px; }
    .technologies-enabling-widget .tech-title { font-size: 15px; }
}
/* The 5 Pillars of Effective Supply Chain Visibility Widget */
.five-pillars-widget { --white: #ffffff; --page-bg: #f7f9fc; --navy: #172640; --border: #dce5f0; --blue: #1778d2; --green: #138c62; --orange: #ff681f; --violet: #6848bd; --red: #d83b3b; width: 100%; margin: 24px 0; position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 22px; background: radial-gradient(circle at 9% 11%, rgba(255, 104, 31, 0.045), transparent 28%), radial-gradient(circle at 90% 86%, rgba(23, 120, 210, 0.055), transparent 30%), linear-gradient(135deg, rgba(250, 252, 255, 0.96), #fff 48%, rgba(248, 251, 255, 0.93)); box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08); }
.five-pillars-widget::after { content: ""; position: absolute; inset: 18px; border: none; border-radius: 17px; pointer-events: none; z-index: 5; }
.five-pillars-widget .canvas { position: relative; z-index: 1; height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 20px; padding: 42px 54px 46px; }
.five-pillars-widget .page-title { max-width: 720px; margin: 0 auto; color: var(--navy); font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: 0; text-align: center; border: none; padding: 0; }
.five-pillars-widget .visibility-scene { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 18px; min-height: 0; align-content: stretch; }
.five-pillars-widget .pillar-card { --accent: var(--blue); position: relative; z-index: 1; display: grid; grid-template-rows: 64px minmax(0, auto); align-content: center; justify-items: center; gap: 16px; min-height: 174px; padding: 24px 18px; border: 1px solid color-mix(in srgb, var(--accent) 27%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--accent) 5%, #fff); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07); text-align: center; transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease; }
.five-pillars-widget .pillar-card::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 14px; height: 5px; border-radius: 999px; background: var(--accent); transform: scaleX(0.26); transform-origin: center; transition: transform 0.24s ease; }
.five-pillars-widget .pillar-card:hover, .five-pillars-widget .pillar-card:focus-within { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 58%, var(--border)); background: color-mix(in srgb, var(--accent) 9%, #fff); box-shadow: 0 20px 34px rgba(15, 23, 42, 0.13); }
.five-pillars-widget .pillar-card:hover::after, .five-pillars-widget .pillar-card:focus-within::after { transform: scaleX(1); }
.five-pillars-widget .pillar-card.inventory { --accent: var(--blue); grid-column: span 2; }
.five-pillars-widget .pillar-card.supplier { --accent: var(--green); grid-column: span 2; }
.five-pillars-widget .pillar-card.logistics { --accent: var(--orange); grid-column: span 2; }
.five-pillars-widget .pillar-card.demand { --accent: var(--violet); grid-column: 2 / span 2; }
.five-pillars-widget .pillar-card.risk { --accent: var(--red); grid-column: 4 / span 2; }
.five-pillars-widget .pillar-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; color: var(--accent); background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, var(--border)), 0 10px 18px rgba(15, 23, 42, 0.07); transition: color 0.24s ease, background 0.24s ease, transform 0.24s ease; }
.five-pillars-widget .pillar-card:hover .pillar-icon, .five-pillars-widget .pillar-card:focus-within .pillar-icon { color: #fff; background: var(--accent); transform: scale(1.06); }
.five-pillars-widget .pillar-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.five-pillars-widget .pillar-title { color: var(--navy); font-size: 16px; font-weight: 700; line-height: 1.22; letter-spacing: 0; margin:auto 0; }
@media (max-width: 1199px) {
    .five-pillars-widget { height: auto; min-height: auto; }
    .five-pillars-widget .canvas { padding: 32px 24px; }
    .five-pillars-widget .page-title { font-size: 20px; }
    .five-pillars-widget .visibility-scene { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; }
    .five-pillars-widget .pillar-card, .five-pillars-widget .pillar-card.inventory, .five-pillars-widget .pillar-card.supplier, .five-pillars-widget .pillar-card.logistics, .five-pillars-widget .pillar-card.demand, .five-pillars-widget .pillar-card.risk { grid-column: auto; min-height: 86px; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: 1fr; justify-items: start; text-align: left; padding: 16px 18px; align-content: center; }
    .five-pillars-widget .pillar-card::after { left: auto; top: 14px; right: 12px; bottom: 14px; width: 4px; height: auto; transform: scaleY(0.34); }
    .five-pillars-widget .pillar-card:hover::after, .five-pillars-widget .pillar-card:focus-within::after { transform: scaleY(1); }
    .five-pillars-widget .pillar-icon { width: 42px; height: 42px; border-radius: 10px; }
    .five-pillars-widget .pillar-icon svg { width: 22px; height: 22px; }
    .five-pillars-widget .pillar-title { font-size: 15px; }
}
/* The Hidden Impact of Limited Supply Chain Visibility Widget */
.hidden-impact-widget { --white: #ffffff; --page-bg: #f7f9fc; --navy: #172640; --muted: #63718a; --border: #dce5f0; --blue: #1778d2; --green: #138c62; --orange: #ff681f; --violet: #6848bd; --red: #d83b3b; --yellow: #d99a16; width: 100%; margin: 24px 0; position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 22px; background: radial-gradient(circle at 9% 11%, rgba(255, 104, 31, 0.045), transparent 28%), radial-gradient(circle at 91% 86%, rgba(23, 120, 210, 0.055), transparent 30%), linear-gradient(135deg, rgba(250, 252, 255, 0.96), #fff 48%, rgba(248, 251, 255, 0.93)); box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08); }
.hidden-impact-widget::after { content: ""; position: absolute; inset: 18px; border: none; border-radius: 17px; pointer-events: none; z-index: 5; }
.hidden-impact-widget .canvas { position: relative; z-index: 1; height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 22px; padding: 42px 52px 46px; }
.hidden-impact-widget .page-title { max-width: 760px; margin: 0 auto; color: var(--navy); font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: 0; text-align: center; border: none; padding: 0; }
.hidden-impact-widget .flow-stage { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 20px; min-height: 0; }
.hidden-impact-widget .flow-stage::before { content: ""; position: absolute; top: 50%; left: 7%; right: 7%; height: 4px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,104,31,.2), rgba(23,120,210,.28), rgba(19,140,98,.24), rgba(216,59,59,.2)); transform: translateY(-50%); }
.hidden-impact-widget .flow-stage::after { content: ""; position: absolute; top: 50%; left: 7%; width: 90px; height: 4px; border-radius: 999px; background: var(--orange); transform: translateY(-50%); animation: flow-line-widget 4.8s ease-in-out infinite; box-shadow: 0 0 18px rgba(255, 104, 31, 0.38); }
.hidden-impact-widget .impact-card { --accent: var(--blue); position: relative; z-index: 1; display: grid; grid-template-rows: 54px minmax(0, auto); align-content: center; justify-items: center; gap: 12px; min-height: 172px; padding: 20px 14px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--accent) 5%, #fff); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.065); text-align: center; animation: card-pulse-widget 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * 0.34s); transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease; }
.hidden-impact-widget .impact-card:hover, .hidden-impact-widget .impact-card:focus-within { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 58%, var(--border)); box-shadow: 0 20px 34px rgba(15, 23, 42, 0.13); }
.hidden-impact-widget .impact-card:nth-child(1) { --accent: var(--orange); --i: 0; grid-column: 1 / span 2; }
.hidden-impact-widget .impact-card:nth-child(2) { --accent: var(--red); --i: 1; grid-column: 3 / span 2; }
.hidden-impact-widget .impact-card:nth-child(3) { --accent: var(--blue); --i: 2; grid-column: 5 / span 2; }
.hidden-impact-widget .impact-card:nth-child(4) { --accent: var(--yellow); --i: 3; grid-column: 7 / span 2; }
.hidden-impact-widget .impact-card:nth-child(5) { --accent: var(--violet); --i: 4; grid-column: 2 / span 2; }
.hidden-impact-widget .impact-card:nth-child(6) { --accent: var(--green); --i: 5; grid-column: 4 / span 2; }
.hidden-impact-widget .impact-card:nth-child(7) { --accent: var(--red); --i: 6; grid-column: 6 / span 2; }
.hidden-impact-widget .impact-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; color: var(--accent); background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, var(--border)), 0 10px 18px rgba(15, 23, 42, 0.07); animation: icon-fill-widget 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * 0.34s); transition: color 0.24s ease, background 0.24s ease; }
.hidden-impact-widget .impact-card:hover .impact-icon, .hidden-impact-widget .impact-card:focus-within .impact-icon { color: #fff; background: var(--accent); }
.hidden-impact-widget .impact-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.hidden-impact-widget .impact-title { color: var(--navy); font-size: 13px; font-weight: 700; line-height: 1.26; letter-spacing: 0; margin:auto 0; }
@keyframes flow-line-widget {
    0% { left: 7%; opacity: 0; }
    8% { opacity: 1; }
    84% { left: 83%; opacity: 1; }
    100% { left: 83%; opacity: 0; }
}
@keyframes card-pulse-widget {
    0%, 100% { transform: translateY(0); }
    12% { transform: translateY(-5px); }
    24% { transform: translateY(0); }
}
@keyframes icon-fill-widget {
    0%, 100% { color: var(--accent); background: #fff; }
    12% { color: #fff; background: var(--accent); }
    24% { color: var(--accent); background: #fff; }
}
@media (max-width: 1199px) {
    .hidden-impact-widget { height: auto; min-height: auto; }
    .hidden-impact-widget .canvas { padding: 32px 24px; }
    .hidden-impact-widget .page-title { font-size: 20px; }
    .hidden-impact-widget .flow-stage { grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; }
    .hidden-impact-widget .flow-stage::before, .hidden-impact-widget .flow-stage::after { display: none; }
    .hidden-impact-widget .impact-card { grid-column: auto !important; min-height: 86px; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: 1fr; justify-items: start; text-align: left; padding: 16px 18px; align-content: center; animation: none; }
    .hidden-impact-widget .impact-icon { animation: none; width: 42px; height: 42px; border-radius: 10px; }
    .hidden-impact-widget .impact-icon svg { width: 22px; height: 22px; }
    .hidden-impact-widget .impact-title { font-size: 14px; }
}

@media (max-width: 991px) {
    /* 5 Pillars Widget Mobile Adjustments */
    .five-pillars-widget .canvas { padding: 20px 16px; }
    .five-pillars-widget .visibility-scene { gap: 8px; }
    .five-pillars-widget .pillar-card, 
    .five-pillars-widget .pillar-card.inventory, 
    .five-pillars-widget .pillar-card.supplier, 
    .five-pillars-widget .pillar-card.logistics, 
    .five-pillars-widget .pillar-card.demand, 
    .five-pillars-widget .pillar-card.risk { 
        min-height: 54px; 
        grid-template-columns: 30px minmax(0, 1fr); 
        gap: 12px; 
        padding: 10px 14px; 
        align-items: center;
    }
    .five-pillars-widget .pillar-card::after { top: 10px; bottom: 10px; right: 8px; }
    .five-pillars-widget .pillar-icon { width: 30px; height: 30px; border-radius: 8px; }
    .five-pillars-widget .pillar-icon svg { width: 15px; height: 15px; stroke-width: 2.25; }
    .five-pillars-widget .pillar-title { font-size: 13.5px; }

    /* Trends 2026 Widget Mobile Adjustments */
    .trends-animation-widget .canvas { padding: 20px 16px; }
    .trends-animation-widget .trend-grid { gap: 8px; }
    .trends-animation-widget .trend-card { 
        min-height: 54px; 
        grid-template-columns: 30px minmax(0, 1fr); 
        gap: 12px; 
        padding: 10px 14px; 
        align-items: center;
    }
    .trends-animation-widget .trend-card::after { top: 10px; bottom: 10px; right: 8px; }
    .trends-animation-widget .trend-icon { width: 30px; height: 30px; border-radius: 8px; }
    .trends-animation-widget .trend-icon svg { width: 15px; height: 15px; stroke-width: 2.25; }
    .trends-animation-widget .trend-title { font-size: 13.5px; }

    /* Technologies Enabling Widget Mobile Adjustments */
    .technologies-enabling-widget .canvas { padding: 20px 16px; }
    .technologies-enabling-widget .tech-grid { gap: 8px; }
    .technologies-enabling-widget .tech-card { 
        min-height: 54px; 
        grid-template-columns: 30px minmax(0, 1fr); 
        gap: 12px; 
        padding: 10px 14px; 
        align-items: center;
    }
    .technologies-enabling-widget .tech-icon { width: 30px; height: 30px; border-radius: 8px; }
    .technologies-enabling-widget .tech-icon svg { width: 15px; height: 15px; stroke-width: 2.25; }
    .technologies-enabling-widget .tech-title { font-size: 13.5px; }

    /* Hidden Impact Widget Mobile Adjustments */
    .hidden-impact-widget .canvas { padding: 20px 16px; }
    .hidden-impact-widget .flow-stage { gap: 8px; }
    .hidden-impact-widget .impact-card { 
        min-height: 54px; 
        grid-template-columns: 30px minmax(0, 1fr); 
        gap: 12px; 
        padding: 10px 14px; 
        align-items: center;
    }
    .hidden-impact-widget .impact-icon { width: 30px; height: 30px; border-radius: 8px; }
    .hidden-impact-widget .impact-icon svg { width: 15px; height: 15px; stroke-width: 2.25; }
    .hidden-impact-widget .impact-title { font-size: 13.5px; }

    /* Matrix Widget Mobile Adjustments */
    .visibility-vs-transparency-matrix .canvas { padding: 20px 16px; }
    .visibility-vs-transparency-matrix .factor-button { 
        min-height: 44px; 
        padding: 8px 12px; 
        gap: 10px; 
        grid-template-columns: 28px minmax(0, 1fr); 
        border-radius: 10px; 
    }
    .visibility-vs-transparency-matrix .factor-mark { 
        width: 28px; 
        height: 28px; 
        border-radius: 8px; 
        font-size: 13px; 
    }
    .visibility-vs-transparency-matrix .factor-button span {
        font-size: 13.5px;
    }
    .visibility-vs-transparency-matrix .compare-card { 
        padding: 10px 12px; 
        gap: 6px; 
        border-radius: 10px; 
    }
    .visibility-vs-transparency-matrix .compare-head { 
        grid-template-columns: 28px minmax(0, 1fr); 
        gap: 8px; 
    }
    .visibility-vs-transparency-matrix .compare-icon { 
        width: 28px; 
        height: 28px; 
        border-radius: 8px; 
    }
    .visibility-vs-transparency-matrix .compare-icon svg { 
        width: 14px; 
        height: 14px; 
    }
    .visibility-vs-transparency-matrix .compare-title { 
        font-size: 12px; 
        font-weight: 700;
    }
    .visibility-vs-transparency-matrix .compare-value { 
        font-size: 11px; 
        font-weight: 500;
        padding-bottom: 0px;
    }
    body button.btn.checklist-submit-btn,
    body button.btn.checklist-reset-btn {
        padding: 6px 10px !important;
        font-size: 12.5px !important;
        line-height: 1.2 !important;
    }
    body a.btn.cta-blindspots-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }
}
/* ==========================================================================
   REFACTORED INLINE STYLES FOR Lack of Supply Chain Visibility Page
   ========================================================================== */
/* Spotify Iframe */
.spotify-embed-iframe { border-radius: 12px; }
/* Key Takeaways */
.takeaways-section-title { color: #FF6C1A; font-weight: 700; }
.takeaways-list-icon { color: #FF6C1A; font-size: 1.1rem; }
/* The 5 Pillars of Effective Supply Chain Visibility */
.pillar-card-wrapper { background: #f8fafc; border-left: 4px solid #FF6C1A !important; }
.pillar-card-title-text { color: #192A44; font-weight: 700; }
.pillar-card-desc-text { font-size: 16px; line-height: 24px; }
.pillar-card-benefits-label { font-weight: 700; font-size: 15px; color: #ff6c1a; }
.pillar-card-benefit-item-text { font-size: 15px; color: #4B5563; line-height: 22px; }
/* Why These Five Pillars Matter */
.pillars-matter-title { font-weight: 700; color: #192A44; }
/* Quick Assessment Title & Icons */
.quick-assessment-title-text { color: #192A44; font-weight: 700; }
.quick-assessment-list-icon { font-size: 1.1rem; color: #FF6C1A; }
/* Statistics section cards */
.stat-box-card { background: rgba(255, 108, 26, 0.02); border-color: rgba(255, 108, 26, 0.2) !important; }
.stat-box-value { font-size: 2.2rem; font-weight: 800; color: #ff6c1a; }
.stat-box-desc { font-size: 15px; line-height: 22px; }
/* What These Statistics Mean */
.stats-meaning-title { font-weight: 700; color: #192A44; }
/* Quick Insight */
.quick-insight-title { color: #FF6C1A; font-weight: 700; }
/* Visibility Assessment Checklist block */
.checklist-wrapper { background: #ffffff; border-color: #e5e7eb !important; }
.checklist-title-text { color: #192A44; font-weight: 700; }
.checklist-input { cursor: pointer; }
.checklist-label { font-size: 15px; line-height: 20px; cursor: pointer; }
body button.btn.checklist-submit-btn { background-color: #ff6c1a !important; color: #ffffff !important; border-radius: 6px; font-weight: 600; border: none; transition: all 0.3s; padding: 8px 16px !important; font-size: 14px !important; line-height: 1.25 !important; }
body button.btn.checklist-submit-btn:hover { background-color: #e65a00 !important; color: #ffffff !important; }
body button.btn.checklist-reset-btn { background-color: transparent !important; color: #ff6c1a !important; border: 1.5px solid #ff6c1a !important; border-radius: 6px; font-weight: 600; transition: all 0.3s; padding: 8px 16px !important; font-size: 14px !important; line-height: 1.25 !important; }
body button.btn.checklist-reset-btn:hover { background-color: #ff6c1a !important; color: #ffffff !important; }
.checklist-result-box { background: #fdf6f0; border: 1.5px solid #ff6c1a; }
.checklist-result-title { font-weight: 700; color: #192A44; }
.checklist-result-highlight { color: #ff6c1a; }
.checklist-result-desc { font-size: 16px; font-weight: 500; color: #192A44; }
.checklist-tiers-title-text { color: #192A44; font-weight: 700; }
.checklist-tiers-list { font-size: 15px; line-height: 22px; color: #4b5563; padding-left: 0; }
.checklist-tier-key-40 { color: #ff6c1a; font-weight: 700; min-width: 40px; }
.checklist-tier-key-80 { color: #ff6c1a; font-weight: 700; min-width: 80px; }
/* Struggling With Supply Chain Blind Spots CTA */
.cta-blindspots-wrapper { background: linear-gradient(135deg, #192A44 0%, #101c2e 100%); color: #fff; }
.cta-blindspots-title { font-weight: 700; }
.cta-blindspots-desc { font-size: 16px; }
.cta-blindspots-btn { background: #ff6c1a !important; color: #fff !important; font-weight: 600; border-radius: 8px; transition: all 0.2s ease-in-out; }
.cta-blindspots-btn:hover { background: #e65a00 !important; color: #fff !important; text-decoration: none; }
/* Industry impact tab lists - SVGs */
.industry-impacts-svg { flex-shrink: 0; }
/* How AI Helps section cards */
.ai-help-card { background: rgba(255, 108, 26, 0.01); border-left: 3px solid #ff6c1a !important; }
.ai-help-card-title { font-size: 18px; font-weight: 700; color: #192A44; }
.ai-help-card-desc { font-size: 15px; line-height: 22px; }
/* Maturity Level custom variables mapping */
#level-1 { --accent: #ff681f; }
#level-2 { --accent: #ff8a3d; }
#level-3 { --accent: #1778d2; }
#level-4 { --accent: #4b6edb; }
#level-5 { --accent: #15845b; }
/* Interactive Maturity Assessment */
.maturity-wrapper { background: #ffffff; border-color: #e5e7eb !important; }
.maturity-title { color: #192A44; font-weight: 700; }
.maturity-label-span { font-size: 15px; font-weight: 500; }
.maturity-input-switch { width: 2.5em; height: 1.25em; cursor: pointer; }
/* Expert Quote */
.quote-author-info { font-size: 16px; font-weight: 600; color: #ff6c1a; font-style: normal; display: block; text-align: right; }
/* With Sparkout Tech, You Can section */
.sparkout-features-title { color: #192A44; font-weight: 700; }
.sparkout-feature-icon { color: #FF6C1A; }
/* Ready to Improve Supply Chain Visibility CTA */
.cta-consultation-title { color: #192A44; font-weight: 700; }
/* VISIBLE Framework letter columns */
.framework-letter-card { background: #fff; }
.framework-letter-char { font-size: 2.5rem; font-weight: 900; color: #ff6c1a; line-height: 1; }
.framework-letter-title { font-size: 18px; font-weight: 700; color: #192A44; }
.framework-letter-desc { font-size: 15px; line-height: 22px; }
/* Struggling With Supply Chain Blind Spots second CTA */
.cta-blindspots2-wrapper { background: rgba(255, 108, 26, 0.05); border-color: #ff6c1a !important; }
.cta-blindspots2-title { font-weight: 700; color: #192A44; }
.cta-blindspots2-desc { font-size: 16px; }
/* Trends cards */
.trend-intro-card { background: #fdfdfd; }
.trend-intro-card-title { font-size: 18px; font-weight: 700; color: #192A44; }
.trend-intro-card-desc { font-size: 15px; line-height: 22px; }
/* Trends Matter title */
.trends-matter-title { font-weight: 700; color: #192A44; }
/* Implementation Stages title */
.implementation-stages-title { font-weight: 700; color: #192A44; }