/* 
   Datavare Premium Blog Redesign - SaaS Inspired
   Target: Middle Content Section Only
   Constraint: DO NOT touch Header or Footer
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap");

:root {
  --dv-purple: #663399;
  --dv-purple-dark: #4b3195;
  --dv-purple-light: #f3f0ff;
  --dv-orange: #ff7817;
  --dv-orange-hover: #e66a15;
  --dv-bg-gray: #f8fafc;
  --dv-white: #ffffff;
  --dv-text-dark: #0f172a;
  --dv-text-gray: #64748b;
  --dv-border: #e2e8f0;
  --dv-card-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --dv-hover-shadow:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --dv-font-main: "Inter", sans-serif;
  --dv-font-heading: "Manrope", sans-serif;
}

body {
  background-color: var(--dv-bg-gray) !important;
  font-family: var(--dv-font-main) !important;
  color: var(--dv-text-dark) !important;
}

/* ===================================
   Hero Section Enhancement
   =================================== */

.slider.visible-sm-left-center {
  background:
    linear-gradient(135deg, var(--dv-purple-dark) 0%, var(--dv-purple) 100%),
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 57c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm57-13c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
  padding: 100px 20px !important;
  text-align: center !important;
  margin-bottom: 0 !important;
  position: relative;
  overflow: hidden;
}

.slider h1 {
  color: var(--dv-white) !important;
  font-family: var(--dv-font-heading) !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  margin: 0 auto 20px auto !important;
  letter-spacing: -1px;
  line-height: 1.2 !important;
}

.slider .subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  font-weight: 500;
  max-width: 700px;
  margin: 0 auto 30px auto;
  line-height: 1.6;
}

/* Premium CTA Buttons */
.slider .btn {
  padding: 14px 35px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  border: none !important;
  text-transform: none !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.slider .btn:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3) !important;
}

.slider .btn-primary {
  background: linear-gradient(to right, #ffffff, #f1f5f9) !important;
  color: var(--dv-purple) !important;
}

.slider .btn-danger {
  background: linear-gradient(to right, var(--dv-orange), #ff9144) !important;
  color: #fff !important;
}

.slider .btn i {
  font-size: 18px !important;
}

/* ===================================
   Search & Filter Section
   =================================== */

.blog-controls-section {
  max-width: 1100px;
  margin: -50px auto 40px auto;
  position: relative;
  z-index: 100;
  padding: 0 20px;
}

.controls-card {
  background: var(--dv-white);
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--dv-border);
}

.search-wrapper {
  position: relative;
  margin-bottom: 25px;
}

#blogSearch {
  width: 100% !important;
  padding: 18px 25px 18px 60px !important;
  border: 2px solid var(--dv-border) !important;
  background: #fcfcfd !important;
  border-radius: 15px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--dv-text-dark) !important;
  transition: all 0.3s ease !important;
}

#blogSearch:focus {
  border-color: var(--dv-purple) !important;
  background: var(--dv-white) !important;
  box-shadow: 0 0 0 5px rgba(102, 51, 153, 0.1) !important;
}

.search-icon-fixed {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  color: var(--dv-purple);
  opacity: 0.6;
}

/* Category Filters */
.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.filter-btn {
  padding: 10px 20px;
  background: var(--dv-purple-light);
  color: var(--dv-purple);
  border: 1px solid transparent;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  background: var(--dv-purple);
  color: var(--dv-white);
  transform: translateY(-2px);
}

.filter-btn.active {
  background: var(--dv-purple);
  color: var(--dv-white);
  box-shadow: 0 4px 12px rgba(102, 51, 153, 0.3);
}

/* ===================================
   Blog Grid & Cards
   =================================== */

#blogGrid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  padding: 0 20px !important;
  max-width: 1200px !important;
  margin: 0 auto 60px auto !important;
}

.blog-card {
  background: var(--dv-white);
  border-radius: 20px;
  border: 1px solid var(--dv-border);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.blog-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--dv-hover-shadow);
  border-color: var(--dv-purple-light);
}

.card-icon-area {
  height: 180px;
  background: var(--dv-purple-light);
  position: relative;
  overflow: hidden;
}

.card-icon-area img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s ease !important;
}

.blog-card:hover .card-icon-area img {
  transform: scale(1.1) !important;
}

.category-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: var(--dv-purple);
  color: var(--dv-white);
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 10;
}

.card-body {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.blog-date {
  font-size: 13px;
  color: var(--dv-text-gray);
  margin-bottom: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.blog-card-title {
  font-family: var(--dv-font-heading);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 15px;
  color: var(--dv-text-dark);
}

.blog-card-title a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s;
}

.blog-card-title a:hover {
  color: var(--dv-purple);
}

.card-footer {
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #f1f5f9;
}

.read-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dv-purple);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s;
}

.read-more-btn:hover {
  color: var(--dv-orange);
  gap: 12px;
}

/* ===================================
   STICKY SIDEBARS (Detail Pages)
   =================================== */

.blog-outer-wrapper {
  display: flex !important;
  justify-content: center !important;
  gap: 40px !important;
  align-items: stretch !important;
  max-width: 1550px !important;
  margin: 0 auto !important;
  position: relative !important;
  overflow: visible !important;
}
.blog-side-col {
  flex: 0 0 auto !important;
  width: 260px !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
}
.right-col {
  width: 80px !important;
}
.blog-center-col {
  flex: 0 1 1000px !important;
  min-width: 0 !important;
  z-index: 10;
}

.dv-blog-card {
  background: var(--dv-white) !important;
  width: 100% !important;
  border-radius: 20px !important;
  box-shadow: var(--dv-card-shadow) !important;
  padding: 50px !important;
  border: 1px solid var(--dv-border) !important;
  position: relative !important;
  z-index: 2;
  margin-bottom: 40px !important;
}

.toc-sticky-card {
  position: sticky !important;
  top: 100px !important;
  align-self: flex-start !important;
  z-index: 60 !important;
  max-height: calc(100vh - 120px) !important;
  overflow-y: auto !important;
  background: var(--dv-white) !important;
  border-radius: 12px !important;
  padding: 25px !important;
  box-shadow: var(--dv-premium-shadow) !important;
  border: 1px solid var(--dv-border) !important;
}
.toc-sticky-card h4 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--dv-purple) !important;
  border-bottom: 2px solid var(--dv-bg-gray) !important;
  padding-bottom: 10px !important;
  margin-bottom: 20px !important;
  font-family: var(--dv-font-heading);
}

#toc-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.toc-item {
  margin-bottom: 12px !important;
  position: relative !important;
  padding-left: 20px !important;
  list-style: none !important;
}
.toc-item:before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  color: var(--dv-orange) !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  display: block !important;
}
.toc-h3 {
  padding-left: 35px !important;
}
.toc-h3:before {
  left: 15px !important;
  opacity: 0.7 !important;
}
.toc-item a {
  color: var(--dv-text-dark) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  display: block !important;
  line-height: 1.4 !important;
  transition: 0.3s;
}
.toc-item a:hover {
  color: var(--dv-orange) !important;
  transform: translateX(3px) !important;
}

.share-sticky-box {
  position: sticky !important;
  top: 100px !important;
  align-self: flex-start !important;
  z-index: 60 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 15px !important;
}
.share-title-vert {
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--dv-text-gray) !important;
  margin-bottom: 15px !important;
}
.share-icon-sticky {
  width: 45px !important;
  height: 45px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--dv-white) !important;
  border-radius: 12px !important;
  box-shadow: var(--dv-premium-shadow) !important;
  color: var(--dv-purple) !important;
  border: 1px solid var(--dv-border) !important;
  transition: 0.3s !important;
}
.share-icon-sticky svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
}
.share-icon-sticky:hover {
  background: var(--dv-purple) !important;
  color: var(--dv-white) !important;
  transform: translateY(-3px) !important;
}

/* Responsive Adjustments */
@media (max-width: 1480px) {
  .blog-outer-wrapper {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 20px !important;
  }
  .blog-side-col {
    width: 100% !important;
    max-width: 1000px !important;
  }
  .right-col {
    width: 100% !important;
    order: 3;
  }
  .blog-center-col {
    order: 2;
    width: 100% !important;
  }
  .share-sticky-box {
    flex-direction: row !important;
    padding: 20px !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: var(--dv-card-shadow) !important;
    margin-bottom: 40px !important;
    justify-content: center;
  }
  .share-title-vert {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    margin: 0 15px 0 0 !important;
  }
}

@media (max-width: 1100px) {
  #blogGrid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .toc-sticky-card,
  .share-sticky-box {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  .share-sticky-box {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 12px !important;
    margin-bottom: 16px !important;
  }

  .share-title-vert {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 8px 0 !important;
  }

  #blogGrid {
    grid-template-columns: 1fr !important;
  }
  .slider h1 {
    font-size: 38px !important;
  }
  .blog-controls-section {
    margin-top: -30px;
  }
  .controls-card {
    padding: 20px;
  }
}

/* Detail Content Styling */
.dv-blog-card p {
  font-size: 17px !important;
  line-height: 1.8 !important;
  color: #475569 !important;
  margin-bottom: 25px !important;
}
.dv-blog-card h2 {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--dv-purple) !important;
  margin: 45px 0 20px 0 !important;
  border-bottom: 1px solid var(--dv-border) !important;
  padding-bottom: 12px !important;
  font-family: var(--dv-font-heading);
}
.dv-blog-card ul:not(.list-circle):not(#toc-list) li {
  position: relative !important;
  padding-left: 30px !important;
  margin-bottom: 15px !important;
  list-style: none !important;
  line-height: 1.6 !important;
}
.dv-blog-card ul:not(.list-circle):not(#toc-list) li:before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: var(--dv-orange) !important;
  font-weight: 900 !important;
}
.breadcrumb {
  background: #f1f5f9 !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  margin-top: 20px !important;
}

/* No Results Section */
#noResults {
  text-align: center;
  padding: 100px 20px;
  background: var(--dv-white);
  border-radius: 20px;
  margin: 0 20px 60px 20px;
  border: 1px dashed var(--dv-text-gray);
}

#noResults h3 {
  font-size: 24px;
  color: var(--dv-text-dark);
  margin-bottom: 10px;
}

/* ===================================
   Microsoft-Inspired Blog Article Refresh
   Content remains unchanged; this only restyles the blog detail layout.
   =================================== */

:root {
  --dv-ms-blue: #0078d4;
  --dv-ms-blue-dark: #005a9e;
  --dv-ms-blue-light: #deecf9;
  --dv-ms-gray-10: #faf9f8;
  --dv-ms-gray-20: #f3f2f1;
  --dv-ms-gray-30: #edebe9;
  --dv-ms-gray-60: #8a8886;
  --dv-ms-gray-80: #605e5c;
  --dv-ms-gray-130: #323130;
  --dv-ms-gray-160: #201f1e;
  --dv-ms-amber: #fff4ce;
  --dv-ms-green: #107c10;
}

body {
  background: #fff !important;
  color: var(--dv-ms-gray-130) !important;
  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Inter",
    sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

.slider.visible-sm-left-center {
  background: linear-gradient(135deg, #dce8f5 0%, #e8f1fa 58%, #d6e6f5 100%) !important;
  max-width: 1420px !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 44px 24px 54px 24px !important;
  text-align: left !important;
  border-bottom: 1px solid #b8cfe8 !important;
  box-shadow: 0 0 0 100vmax #dce8f5 !important;
  clip-path: inset(0 -100vmax) !important;
  overflow: visible !important;
}

.slider.visible-sm-left-center::before {
  content: "Blog";
  display: block;
  color: var(--dv-ms-blue);
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 10px;
}

.slider h1,
.slider h1.h2 {
  color: var(--dv-ms-gray-160) !important;
  max-width: 1100px !important;
  margin: 0 !important;
  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.slider .subtitle {
  color: var(--dv-ms-gray-80) !important;
  max-width: 780px !important;
  margin: 14px 0 0 0 !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
}

.slider.visible-sm-left-center br {
  display: none !important;
}

.slider.visible-sm-left-center .space {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 28px 0 0 0 !important;
  text-align: left !important;
}

.slider.visible-sm-left-center .space .btn {
  min-width: 168px !important;
  justify-content: center !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.slider.visible-sm-left-center .space .btn-primary {
  background: linear-gradient(to right, #c5d9ed, #a8c4e0) !important;
  color: #1a3d6b !important;
  border: 1px solid #8eb0d4 !important;
}

.slider.visible-sm-left-center .space .btn-primary:hover {
  background: linear-gradient(to right, #b0cae5, #95b8d8) !important;
  color: #0f2d52 !important;
  transform: none !important;
}

.slider.visible-sm-left-center .space .btn-danger {
  background: linear-gradient(to right, var(--dv-orange), #e66a15) !important;
  color: #fff !important;
  border: 1px solid #d45f10 !important;
}

section.container.padding-top-60.padding-btm-60 {
  width: 100% !important;
  max-width: none !important;
  padding: 0 32px 64px 32px !important;
  background: #fff !important;
}

section.container.padding-top-60.padding-btm-60 > .row {
  display: none !important;
}

section.bg-white.padding-btm-60 {
  background: #fff !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}

section.bg-white.padding-btm-60 > .container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.blog-outer-wrapper {
  max-width: 1420px !important;
  margin: 0 auto !important;
  padding: 34px 0 0 0 !important;
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1040px) 52px !important;
  gap: 34px !important;
  align-items: stretch !important;
  overflow: visible !important;
}

.blog-side-col,
.right-col {
  width: auto !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}

.blog-center-col {
  width: 100% !important;
  max-width: 1040px !important;
}

.dv-blog-card {
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.dv-blog-card p {
  color: var(--dv-ms-gray-130) !important;
  font-size: 16px !important;
  line-height: 1.78 !important;
  margin: 0 0 18px 0 !important;
}

.dv-blog-card p.padding-top-14 {
  padding-top: 0 !important;
}

.dv-blog-card h2,
.dv-blog-card .h4 {
  color: var(--dv-ms-gray-160) !important;
  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  margin: 42px 0 18px 0 !important;
  padding: 0 0 12px 0 !important;
  border-bottom: 1px solid var(--dv-ms-gray-30) !important;
  letter-spacing: 0 !important;
}

.dv-blog-card h3 {
  color: var(--dv-ms-gray-160) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 28px 0 10px 0 !important;
}

.dv-blog-card strong {
  color: var(--dv-ms-gray-160) !important;
  font-weight: 600 !important;
}

.dv-blog-card ul:not(.list-circle):not(#toc-list) {
  margin: 14px 0 24px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.dv-blog-card ul:not(.list-circle):not(#toc-list) li {
  color: var(--dv-ms-gray-130) !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  padding: 8px 0 8px 28px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--dv-ms-gray-20) !important;
}

.dv-blog-card ul:not(.list-circle):not(#toc-list) li:last-child {
  border-bottom: 0 !important;
}

.dv-blog-card ul:not(.list-circle):not(#toc-list) li::before {
  content: "✓" !important;
  left: 0 !important;
  top: 9px !important;
  color: var(--dv-ms-green) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

.dv-blog-card .bg-yellow {
  background: var(--dv-ms-blue-light) !important;
  border-left: 3px solid var(--dv-ms-blue) !important;
  border-radius: 0 2px 2px 0 !important;
  color: var(--dv-ms-gray-160) !important;
  font-weight: 600 !important;
  padding: 13px 16px !important;
  margin: 24px 0 16px 0 !important;
}

.dv-blog-card img {
  max-width: 100% !important;
  height: auto !important;
  border: 1px solid var(--dv-ms-gray-30) !important;
  border-radius: 2px !important;
  margin: 12px 0 20px 0 !important;
}

.toc-sticky-card {
  position: sticky !important;
  top: 86px !important;
  align-self: flex-start !important;
  z-index: 60 !important;
  max-height: calc(100vh - 110px) !important;
  overflow-y: auto !important;
  background: #fff !important;
  border: 1px solid var(--dv-ms-gray-30) !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  padding: 18px 18px 16px 18px !important;
}

.toc-sticky-card h4 {
  color: var(--dv-ms-gray-160) !important;
  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 0 12px 0 !important;
  padding: 0 0 10px 0 !important;
  border-bottom: 1px solid var(--dv-ms-gray-30) !important;
}

#toc-list {
  margin: 0 !important;
  padding: 0 !important;
}

.toc-item {
  padding: 0 0 0 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--dv-ms-gray-20) !important;
}

.toc-item:last-child {
  border-bottom: 0 !important;
}

.toc-item::before {
  content: "" !important;
  width: 5px !important;
  height: 5px !important;
  left: 0 !important;
  top: 15px !important;
  background: var(--dv-ms-blue) !important;
  border-radius: 50% !important;
}

.toc-h3 {
  padding-left: 26px !important;
}

.toc-h3::before {
  left: 12px !important;
  opacity: 0.7 !important;
}

.toc-item a {
  color: var(--dv-ms-gray-80) !important;
  display: block !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  padding: 10px 0 !important;
  text-decoration: none !important;
}

.toc-item a:hover {
  color: var(--dv-ms-blue) !important;
  transform: none !important;
}

.toc-item a.is-active {
  color: var(--dv-ms-blue) !important;
  font-weight: 600 !important;
}

.share-sticky-box {
  position: sticky !important;
  top: 86px !important;
  align-self: flex-start !important;
  z-index: 60 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  background: #fff !important;
  border: 1px solid var(--dv-ms-gray-30) !important;
  border-radius: 2px !important;
  padding: 14px 10px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

.share-title-vert {
  color: var(--dv-ms-gray-60) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
}

.share-icon-sticky {
  width: 38px !important;
  height: 38px !important;
  background: #fff !important;
  border: 1px solid var(--dv-ms-gray-30) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--dv-ms-blue) !important;
}

.share-icon-sticky svg {
  width: 17px !important;
  height: 17px !important;
}

.share-icon-sticky:hover {
  background: var(--dv-ms-blue) !important;
  border-color: var(--dv-ms-blue) !important;
  color: #fff !important;
  transform: none !important;
}

.breadcrumb {
  max-width: 1420px !important;
  margin: 28px auto 0 auto !important;
  background: var(--dv-ms-gray-10) !important;
  border: 1px solid var(--dv-ms-gray-30) !important;
  border-radius: 2px !important;
  color: var(--dv-ms-gray-80) !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
}

.breadcrumb a {
  color: var(--dv-ms-blue) !important;
}

@media (max-width: 1180px) {
  .blog-outer-wrapper {
    grid-template-columns: 220px minmax(0, 1fr) 50px !important;
    gap: 24px !important;
  }
}

@media (max-width: 960px) {
  .slider.visible-sm-left-center {
    margin-top: 0 !important;
    padding: 30px 20px 26px 20px !important;
  }

  .slider h1,
  .slider h1.h2 {
    font-size: 28px !important;
  }

  .blog-outer-wrapper {
    display: flex !important;
    flex-direction: column !important;
    max-width: 760px !important;
    gap: 18px !important;
    padding-top: 24px !important;
  }

  .blog-side-col,
  .right-col,
  .blog-center-col {
    width: 100% !important;
    max-width: none !important;
  }

  .toc-sticky-card,
  .share-sticky-box {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .share-sticky-box {
    flex-direction: row !important;
    justify-content: flex-start !important;
    background: #fff !important;
    border: 1px solid var(--dv-ms-gray-30) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    padding: 12px !important;
    margin-bottom: 0 !important;
  }

  .share-title-vert {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    margin: 0 6px 0 0 !important;
  }
}

@media (max-width: 640px) {
  section.container.padding-top-60.padding-btm-60 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .slider.visible-sm-left-center {
    margin-top: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .dv-blog-card p,
  .dv-blog-card ul:not(.list-circle):not(#toc-list) li {
    font-size: 15px !important;
  }

  .dv-blog-card h2,
  .dv-blog-card .h4 {
    font-size: 21px !important;
  }
}

/* ===================================
   Keep Blog Listing Page Original Hero
   The Microsoft-style article layout above is for detail pages only.
   =================================== */

body:has(#blogSearch) {
  background-color: var(--dv-bg-gray) !important;
}

body:has(#blogSearch) .slider.visible-sm-left-center {
  background: linear-gradient(135deg, var(--dv-purple-dark) 0%, var(--dv-purple) 100%),
              url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 57c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm57-13c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
  max-width: none !important;
  margin: 0 0 0 0 !important;
  padding: 100px 20px !important;
  text-align: center !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  overflow: hidden !important;
}

body:has(#blogSearch) .slider.visible-sm-left-center::before {
  content: none !important;
}

body:has(#blogSearch) .slider h1,
body:has(#blogSearch) .slider h1.h2 {
  color: var(--dv-white) !important;
  max-width: 900px !important;
  margin: 0 auto 20px auto !important;
  font-family: var(--dv-font-heading) !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

body:has(#blogSearch) .slider .subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
  max-width: 700px !important;
  margin: 0 auto 30px auto !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

body:has(#blogSearch) .blog-controls-section {
  margin: -50px auto 40px auto !important;
}

@media (max-width: 768px) {
  body:has(#blogSearch) .slider.visible-sm-left-center {
    padding: 80px 18px !important;
  }

  body:has(#blogSearch) .slider h1,
  body:has(#blogSearch) .slider h1.h2 {
    font-size: 38px !important;
  }

  body:has(#blogSearch) .blog-controls-section {
    margin-top: -30px !important;
  }
}