@charset "UTF-8";.anchor-click[data-astro-cid-c4pg3o5b] {
  position: relative;
}

.anchor-click[data-astro-cid-c4pg3o5b] .copy-text[data-astro-cid-c4pg3o5b] {
  display: none;
  position: absolute;
  left: -.875rem;
  bottom: -1.75rem;
  background-color: #fff;
  padding: .25rem .5rem;
  border-radius: .25rem;
}

.anchor-click[data-astro-cid-c4pg3o5b] .copy-text[data-astro-cid-c4pg3o5b].show {
  display: flex;
}

.blog-social__content[data-astro-cid-c4pg3o5b] {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.blog-social__content[data-astro-cid-c4pg3o5b].headings {
  margin-top: 1rem;
  justify-content: start;
}

.blog-social__content[data-astro-cid-c4pg3o5b] ul[data-astro-cid-c4pg3o5b] {
  display: flex;
  gap: 1rem;
}
.blog-hero[data-astro-cid-vwyzofhh] {
  --grid-template: repeat(12, 1fr);
  --content-grid-position: 1/7;
  --image-grid-position: 8/-1;
  --section-base: var(--active-blue-100);
  --section-image-border: var(--active-blue-300);
  --section-border-radius: 20px;
  --base-text-color: var(--neutral-900);
  --base-text-meta-color: -var(--neutral-800);
  --meta-base: var(--active-blue-400);
  --meta-border-position: 0;
  --section-grid-gap: 0px;
  --section-padding: 2.5rem;
  max-width: 71.25rem;
  margin-inline: auto;
  display: grid;
  background-color: var(--section-base);
  padding: var(--section-padding);
  grid-template-columns: var(--grid-template);
  border-radius: var(--section-border-radius);
  gap: var(--section-grid-gap);
}

@media screen and (width <= 830px) {
  .blog-hero[data-astro-cid-vwyzofhh] {
    --grid-template: 1fr;
    --image-grid-position: auto;
    --content-grid-position: auto;
    --meta-border-position: 100%;
    --section-grid-gap: 2.5rem;
    --section-padding: 1.5rem .5rem;
  }
}

.blog-hero__tags[data-astro-cid-vwyzofhh] {
  margin-bottom: 1rem;
}

.blog-hero__tags[data-astro-cid-vwyzofhh] > [data-astro-cid-vwyzofhh] {
  width: fit-content;
  padding: .25rem .5rem;
  border-radius: 3.125rem;
  font-size: .875rem;
  border: 1px solid #10345e;
}

.blog-hero__content[data-astro-cid-vwyzofhh] {
  grid-column: var(--content-grid-position);
  align-content: center;
}

.blog-hero__image[data-astro-cid-vwyzofhh] {
  --border-radius: 8px;
  border-radius: var(--border-radius);
  grid-column: var(--image-grid-position);
  border: 4px solid var(--section-image-border);
  border-width: 0 4px 4px 0;
}

.blog-hero__image[data-astro-cid-vwyzofhh] img[data-astro-cid-vwyzofhh] {
  width: 100%;
  height: 100%;
  min-height: 18.75rem;
  object-position: top;
  border-radius: var(--border-radius);
}

.blog-hero__header[data-astro-cid-vwyzofhh] {
  --bottom-spacer: 2.5rem;
  margin-bottom: var(--bottom-spacer);
  color: var(--base-text-color);
}

.blog-hero__header[data-astro-cid-vwyzofhh] h1[data-astro-cid-vwyzofhh] {
  font-size: clamp(1.5rem, 1.02174rem + 1.73913vw, 2rem);
}

.blog-hero__header[data-astro-cid-vwyzofhh] p[data-astro-cid-vwyzofhh] {
  margin-top: .5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-hero__meta[data-astro-cid-vwyzofhh] {
  --spacer: 16px;
  display: flex;
  position: relative;
  font-size: clamp(.75rem, .51087rem + .869565vw, 1rem);
  color: var(--base-text-meta-color);
  gap: var(--spacer);
  padding-bottom: 1.125rem;
  flex-wrap: wrap;
}

.blog-hero__meta[data-astro-cid-vwyzofhh]:before {
  content: "";
  width: 10%;
  background-color: var(--meta-base);
  height: 2px;
  position: absolute;
  bottom: var(--meta-border-position);
}

.blog-hero[data-astro-cid-vwyzofhh] .meta-inc[data-astro-cid-vwyzofhh] {
  display: none;
}

@media screen and (width <= 770px) {
  .blog-hero[data-astro-cid-vwyzofhh] .meta-inc[data-astro-cid-vwyzofhh] {
    display: grid;
  }
}

.blog-hero[data-astro-cid-vwyzofhh] .meta-inc[data-astro-cid-vwyzofhh].headings {
  display: grid;
}

/**
 * Converts a number to rem, given the base value
 * @param {number} pixel - the number to convert
 * @param {string} suffix - the suffix (default to 1rem)
 * @param {number} base - the base value (default to 16)
 * @return {string} - the converted string
 *
 * @example
 * div {
 *   font-size: useConvertNumberToRem(16);
 * }
 */
/**
 * UseAdvanceClamp is a function that takes the minimum width, maximum width, size at minimum width and size at maximum width and returns a clamp value.
 * @param {number} $min-width - the minimum width
 * @param {number} $max-width - the maximum width
 * @param {number} $size-at-min-width - the size at minimum width
 * @param {number} $size-at-max-width - the size at maximum width
 * @return {string} - the clamp value
 *
 * @example
 * div {
 *   font-size: useClampWithMedia(450, 1100, 24, 34);
 * }
 */
/* ==========================================
   Global Design System Reset & Baseline
   Author: Clement Femi Bazuaye
   Github: https://github.com/dev-bazz
   LinkedIn: https://www.linkedin.com/in/devbazz/
   ========================================== */
/*
#:~:text=hello,you
  ::target-text {}
  */
@property --base {
  initial-value: #fff;
  inherits: true;
  syntax: "<color>";
}
@property --color-bg {
  initial-value: #fff;
  inherits: true;
  syntax: "<color>";
}
@property --color-fg {
  initial-value: #111;
  inherits: true;
  syntax: "<color>";
}
@property --outline-color {
  initial-value: #0275d8;
  inherits: true;
  syntax: "<color>";
}
@property --selection-fg {
  initial-value: #38a2ff;
  inherits: true;
  syntax: "<color>";
}
@property --active-blue-100 {
  syntax: "<color>";
  inherits: false;
  initial-value: #EBF8FE;
}
@property --container-1120 {
  syntax: "*";
  inherits: true;
  initial-value: 70rem;
}
@property --container-1200 {
  syntax: "*";
  inherits: false;
  initial-value: 75rem;
}
@property --debug {
  syntax: "<color>";
  inherits: true;
  initial-value: magenta;
}
@property --pop-blue {
  syntax: "<color>";
  inherits: false;
  initial-value: #00B8DE;
}
@property --nav-container {
  syntax: "*";
  inherits: false;
  initial-value: 80rem;
}
::target-text {
  background-color: var(--target-text-bg);
  color: var(--target-text-color);
  font-weight: var(--font-weight-bold);
}

@layer tokens {
  :root {
    --selection-bg: hsl(from var(--selection-fg) h 100% 80% / 0.2);
    /* Color Variables - Neutral */
    --spacing: 1rem;
    --outline-size: 0.25rem;
    --outline-offset: 0.25rem;
    --neutral-100: #f9fbfc;
    --neutral-200: #f3f5f6;
    --neutral-300: #e1e6ed;
    --neutral-800: #4e5a6c;
    --neutral-900: #353f50;
    --text-neutral-600: #848f9f;
    --text-neutral-700: #5f738c;
    --text-primary: #353f50;
    --default-grey-200: #E5E7EB;
    /* Color Variables - Blue */
    --white: #fff;
    --active-blue-100: #ebf8fe;
    --active-blue-200: #6eb4e0;
    --active-blue-300: #7bc6e4;
    --active-blue-400: #0275d8;
    --active-blue-500: #1a4983;
    --active-blue-600: #10345e;
    --primary-blue-100: #ebf8fe;
    --primary-blue-200: #aeddf1;
    --primary-blue-400: #479fc8;
    --primary-blue-700: #072f40;
    --primary-blue-800: #647f8b;
    --primary-base-blue: #00425f;
    --brand-colors-pop-blue: #00b8de;
    /* Color Variables - Red */
    --primary-red-100: #fbe9e9;
    --primary-red-400: #dc4437;
    --primary-red-500: #a4251a;
    --primary-red: #EE312A;
    /* Color Variables - Gray */
    --default-gray-200: #ebf8fe;
    --default-gray-500: #6b7280;
    --default-gray-900: #111827;
    /* Other Colors */
    --lin: #111827;
    /* Container & Layout */
    --container-170: 73.125rem;
    --container-lg: 70rem;
    --container-1200: 75rem;
    --container-max: 90rem;
    --container-lgsx: 70.4375rem;
    --container-lgx1: 71.25rem;
    --container-sm: 48rem;
    --mobile-lg: 50rem;
    --nav-container: 80rem;
    --max-container: 75rem;
    --container: 75rem;
    --page-container: 75rem;
    /* Static Properties (moved from @property) */
    --scroll-width: 0px;
    --scroll-track-color: transparent;
    --scroll-thumb-color: rgb(47, 47, 47);
    --scroll-border-radius: 50px;
    --scroll-hover-color: rgb(77, 87, 108);
    --scroll-display: block;
    --background-color: #fff;
    --option-fg: #000;
    --option-bg: #fff;
    --option-hover: #3d52ea;
    --option-check: '☑️';
    --drop-down-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.0002 6.66679C18.0002 6.88013 17.9185 7.09346 17.756 7.25596L11.0894 13.9226C10.7635 14.2485 10.2369 14.2485 9.91104 13.9226L3.24437 7.25596C2.91854 6.93013 2.91854 6.40346 3.24437 6.07763C3.57021 5.75179 4.09687 5.75179 4.42271 6.07763L10.5002 12.1551L16.5777 6.07763C16.9035 5.75179 17.4302 5.75179 17.756 6.07763C17.9185 6.24013 18.0002 6.45346 18.0002 6.66679Z' fill='%235F738C'/%3E%3C/svg%3E");
    --img-placeholder: url(../assets/img-bg.svg);
    --target-text-bg: #fbe9e9;
    --target-text-color: #353f50;
    --placeholder-color: rgb(135, 135, 135);
    --table-border-color: #ddd;
    --option-hover-bg: #e5e5e5;
    --picker-icon-color: #999999;
    --font-weight-bold: 700;
    --line-height-base: 1.5;
    --line-height-heading: 1.2;
    --line-height-body: 1.6;
    --gap-label: 0.5rem;
    --padding-table-cell: 0.5rem;
    --picker-offset: 0.5rem;
    --details-padding-bottom: 0.5em;
    --textarea-min-height: 10em;
    --max-text-width: 64ch;
    --section-intrinsic-size: 43.75rem;
    --blur-amount: 0.4375rem;
    --border-radius-top: 8px;
    --border-radius-bottom: 8px;
    --transition-duration-fast: 0.2s;
    --transition-duration-medium: 0.4s;
    --transition-duration-base: 0.5s;
    --transition-duration-slow: 0.6s;
    --transition-duration-slower: 1s;
    --transition-duration-instant: 0.01ms;
    --ease-out-3: cubic-bezier(0.2, 0.8, 0.2, 1);
    --table-border-width: 1px;
    --rotation-180: 180deg;
    --opacity-hidden: 0;
    --opacity-visible: 1;
    --transform-translate-y: 10px;
    --box-sizing: border-box;
    --height-full: 100%;
    --min-height-full: 100dvh;
    --width-full: 100%;
    --margin-zero: 0;
    --padding-zero: 0;
    --max-width-full: 100%;
    --height-auto: auto;
    --text-align-left: left;
    --vertical-align-top: top;
    --border-collapse: collapse;
    --outline-style: solid;
    --order-one: 1;
    --iteration-count: 1;
    --anchor-left: 0%;
    --backdrop-color: #00000083;
    /* Borders */
    --table-border: var(--table-border-width) var(--outline-style) var(--table-border-color);
    --debug-outline: var(--table-border-width) var(--outline-style) var(--debug);
    /* Border Radius Compound */
    --border-radius-top-compound: var(--border-radius-top) var(--border-radius-top) var(--margin-zero) var(--margin-zero);
    --border-radius-bottom-compound: var(--margin-zero) var(--margin-zero) var(--border-radius-bottom) var(--border-radius-bottom);
    /* Code Styling */
    --code-bg: #1e293b;
    --code-color: #e2e8f0;
    --code-border: #334155;
    --code-inline-bg: #f3f5f6;
    --code-font-family: 'Courier New', Courier, monospace;
  }
}
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: var(--box-sizing);
    font-family: var(--averta-font);
  }
  html,
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  figure,
  blockquote,
  dl,
  dd,
  ul,
  ol {
    margin: var(--margin-zero);
    padding: var(--padding-zero);
  }
  html {
    height: var(--height-full);
    scroll-behavior: smooth;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  body {
    min-height: var(--min-height-full);
    line-height: var(--line-height-base);
    font-family: var(--averta-font);
    background-color: var(--color-bg);
    color: var(--color-fg);
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--averta-font);
    line-height: var(--line-height-heading);
  }
  a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: var(--max-width-full);
    height: var(--height-auto);
  }
  video,
  img {
    object-fit: cover;
  }
  ul,
  ol {
    list-style: none;
  }
  :is(button, input, select) {
    cursor: pointer;
  }
  button,
  input:not([type=checkbox], [type=radio]),
  textarea,
  select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    margin: var(--margin-zero);
    padding: var(--padding-zero);
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  :is(select[data-select-placeholder]) {
    --placeholder-color: var(--placeholder-color);
  }
  :is(select[data-select-placeholder]:focus-within option:first-child) {
    opacity: var(--opacity-hidden);
    pointer-events: none;
  }
  :is(select[data-select-placeholder]:invalid) {
    color: var(--placeholder-color);
  }
  :is(textarea:not([rows])) {
    min-height: var(--textarea-min-height);
  }
  :is(label:has(input, textarea, select, div)) {
    display: grid;
    gap: var(--gap-label);
    cursor: pointer;
  }
  textarea {
    resize: vertical;
    min-height: var(--textarea-min-height);
    /* fallback */
  }
  @supports (field-sizing: content) {
    textarea {
      field-sizing: content;
    }
  }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: var(--margin-zero);
  }
  table {
    border-collapse: var(--border-collapse);
    width: var(--width-full);
  }
  th,
  td {
    text-align: var(--text-align-left);
    vertical-align: var(--vertical-align-top);
    padding: var(--padding-table-cell);
    border: var(--table-border);
  }
  ::selection {
    background-color: var(--selection-bg);
    color: var(--selection-fg);
  }
  :focus-visible {
    outline-color: var(--outline-color);
    outline-width: var(--outline-size);
    outline-offset: var(--outline-offset);
    outline-style: var(--outline-style);
  }
  pre {
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    word-wrap: break-word;
    word-break: break-word;
  }
  code {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--code-color, #353f50);
    background-color: transparent;
    padding: 0.125rem 0.25rem;
    border-radius: 4px;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
    font-size: inherit;
  }
  /* Inline code styling */
  :not(pre) > code {
    background-color: var(--code-inline-bg, #f3f5f6);
    padding: 0.25rem 0.5rem;
  }
}
@layer scrollStyle {
  div,
  body,
  section {
    scrollbar-width: var(--scroll-width);
    -ms-overflow-style: var(--scroll-display);
  }
  div::-webkit-scrollbar,
  body::-webkit-scrollbar,
  section::-webkit-scrollbar {
    display: var(--scroll-display);
  }
  div::-webkit-scrollbar,
  body::-webkit-scrollbar,
  section::-webkit-scrollbar {
    width: var(--scroll-width);
  }
  div::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track,
  section::-webkit-scrollbar-track {
    background: var(--scroll-track-color);
  }
  div::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb,
  section::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb-color);
    border-radius: var(--scroll-border-radius);
  }
  div::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover,
  section::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-hover-color);
  }
}
@layer experimental {
  select {
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    width: var(--width-full);
  }
  select option:checked {
    font-weight: bold;
  }
  select option::checkmark {
    order: var(--order-one);
    margin-left: auto;
    content: var(--option-check);
  }
  option:first-of-type {
    border-radius: var(--border-radius-top-compound);
  }
  option:last-of-type {
    border-radius: var(--border-radius-bottom-compound);
  }
  option:not(option:last-of-type) {
    border-bottom: none;
  }
  option {
    background: var(--option-bg);
    color: var(--option-fg);
  }
  option:hover {
    background: var(--option-hover-bg);
  }
  select,
  ::picker(select) {
    appearance: base-select;
  }
  select::picker-icon {
    content: var(--drop-down-icon);
    color: var(--picker-icon-color);
    transition: var(--transition-duration-medium) rotate;
  }
  select:open::picker-icon {
    rotate: var(--rotation-180);
  }
  ::picker(select) {
    opacity: var(--opacity-hidden);
    transition: opacity var(--transition-duration-fast) ease, transform var(--transition-duration-fast) var(--ease-out-3), display var(--transition-duration-fast) allow-discrete, overlay var(--transition-duration-fast) allow-discrete;
    border: none;
  }
  ::picker(select):popover-open {
    opacity: var(--opacity-visible);
  }
  @starting-style {
    ::picker(select):popover-open {
      opacity: var(--opacity-hidden);
    }
  }
  ::picker(select) {
    top: calc(anchor(bottom) + var(--picker-offset));
    left: anchor(var(--anchor-left));
  }
  select::-ms-expand {
    display: none;
  }
  /* transition the selected option changing */
  selectedcontent > * {
    transition: transform var(--transition-duration-slower) var(--ease-out-3), display var(--transition-duration-slower) allow-discrete, opacity var(--transition-duration-slower);
    opacity: var(--opacity-visible);
  }
  @starting-style {
    selectedcontent > * {
      opacity: var(--opacity-hidden);
      transform: translateY(var(--transform-translate-y));
    }
  }
}
/* -----------------------------
   3. Typography
   ----------------------------- */
@layer typography {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  p,
  li,
  figcaption {
    max-width: var(--max-text-width);
    line-height: var(--line-height-body);
    text-wrap: pretty;
  }
}
/* -----------------------------
   4. Layout
   ----------------------------- */
@layer layout {
  footer,
  main,
  nav,
  aside,
  section,
  article {
    width: var(--width-full);
    container-type: inline-size;
  }
  section {
    content-visibility: auto;
    contain-intrinsic-size: auto var(--section-intrinsic-size);
  }
  [data-container] {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--spacing);
  }
  [float-root] {
    display: flow-root;
  }
}
/* Details */
@layer details {
  details > summary {
    cursor: pointer;
    list-style: none;
  }
  details > summary::marker,
  details > summary::-webkit-details-marker {
    display: none;
  }
  @supports (interpolate-size: allow-keywords) {
    :root {
      interpolate-size: allow-keywords;
    }
    ::details-content {
      --trans-duration: var(--transition-duration-base);
      transition: all var(--trans-duration) var(--ease-out-3), content-visibility var(--trans-duration) allow-discrete;
      height: var(--opacity-hidden);
      overflow: clip;
    }
    [open]::details-content {
      height: var(--height-auto);
      padding-bottom: var(--details-padding-bottom);
    }
  }
}
/* Dialog */
@layer modal {
  dialog {
    transition: display var(--transition-duration-slower) allow-discrete, overlay var(--transition-duration-slower) allow-discrete, scale var(--transition-duration-fast) var(--ease-out-3);
    scale: var(--opacity-hidden);
  }
  dialog[open] {
    transition: display var(--transition-duration-slower) allow-discrete, overlay var(--transition-duration-slower) allow-discrete, scale var(--transition-duration-slow) var(--ease-out-3);
    scale: var(--opacity-visible);
  }
  @starting-style {
    dialog[open] {
      scale: var(--opacity-hidden);
    }
  }
  dialog[open]::backdrop {
    opacity: var(--opacity-visible);
  }
  @starting-style {
    dialog[open]::backdrop {
      opacity: var(--opacity-hidden);
    }
  }
  dialog::backdrop {
    background-color: var(--background-color);
    transition: opacity var(--transition-duration-slower);
    opacity: var(--opacity-hidden);
  }
  [popover] {
    transition: display var(--transition-duration-slower) allow-discrete, overlay var(--transition-duration-slower) allow-discrete, scale var(--transition-duration-fast) var(--ease-out-3);
    scale: var(--opacity-hidden);
  }
  [popover]:popover-open {
    transition: display var(--transition-duration-slower) allow-discrete, overlay var(--transition-duration-slower) allow-discrete, scale var(--transition-duration-slow) var(--ease-out-3);
    scale: var(--opacity-visible);
  }
  @starting-style {
    [popover]:popover-open {
      scale: var(--opacity-hidden);
    }
  }
  [popover]:popover-open::backdrop {
    background-color: var(--backdrop-color);
    backdrop-filter: blur(var(--blur-amount));
    transition: opacity var(--transition-duration-slower);
    opacity: var(--opacity-visible);
  }
  @starting-style {
    [popover]:popover-open::backdrop {
      opacity: var(--opacity-hidden);
    }
  }
}
/* -----------------------------
   6. Accessibility
   ----------------------------- */
@layer accessibility {
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: var(--transition-duration-instant) !important;
      animation-iteration-count: var(--iteration-count) !important;
      transition-duration: var(--transition-duration-instant) !important;
      scroll-behavior: auto !important;
    }
  }
  @media (prefers-contrast: more) {
    :focus-visible {
      outline-color: CanvasText;
    }
  }
}
/* -----------------------------
   7. Developer Ergonomics
   ----------------------------- */
@layer helpers {
  [data-debug] * {
    outline: var(--debug-outline);
  }
}
#root_content {
  text-align: justify;
}

.blog-details {
  --padding-inline: 1.5rem;
  background-color: #fff;
  border-radius: 1rem;
  padding: 1rem var(--padding-inline);
}
@media screen and (width <= 530px) {
  .blog-details {
    --padding-inline: 0.75rem;
  }
}
.blog-details h2,
.blog-details h3,
.blog-details h4,
.blog-details h5,
.blog-details h6 {
  font-size: clamp(1.125rem, 1.0054347826rem + 0.0043478261 * 100vw, 1.25rem);
  font-weight: 700;
  color: var(--neutral-900);
  margin-top: clamp(1.25rem, 0.0543478261rem + 0.0434782609 * 100vw, 2.5rem);
  margin-bottom: 0.5rem;
  scroll-margin-top: 9.375rem;
}
.blog-details p {
  color: var(--neutral-800);
  max-width: none;
}
.blog-details p + p {
  margin-top: clamp(0.625rem, 0.027173913rem + 0.0217391304 * 100vw, 1.25rem);
}
.blog-details img {
  margin-block: clamp(1.25rem, 0.0543478261rem + 0.0434782609 * 100vw, 2.5rem);
}
.blog-details blockquote {
  --quotes-position: -10%;
  position: relative;
  margin-block: 1.5rem;
  background-color: #ebf8fe;
  font-size: clamp(0.875rem, 0.5163043478rem + 0.0130434783 * 100vw, 1.25rem);
  border-radius: 8px;
  border: 1px solid var(--active-blue-400);
  padding: 2.5em;
  container-type: inline-size;
  isolation: isolate;
}
@media screen and (width <= 730px) {
  .blog-details blockquote {
    --quotes-position: -8%;
  }
}
.blog-details blockquote::after, .blog-details blockquote::before {
  position: absolute;
}
.blog-details blockquote::before {
  content: url("data:image/svg+xml,%3csvg%20width='57'%20height='56'%20viewBox='0%200%2057%2056'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M31.125%2040.25V21C31.1281%2018.2162%2032.2354%2015.5473%2034.2039%2013.5789C36.1723%2011.6104%2038.8412%2010.5031%2041.625%2010.5C42.0891%2010.5%2042.5342%2010.6844%2042.8624%2011.0126C43.1906%2011.3408%2043.375%2011.7859%2043.375%2012.25C43.375%2012.7141%2043.1906%2013.1593%2042.8624%2013.4874C42.5342%2013.8156%2042.0891%2014%2041.625%2014C39.7691%2014.0021%2037.9899%2014.7402%2036.6776%2016.0526C35.3653%2017.3649%2034.6271%2019.1441%2034.625%2021V22.75H47.75C48.6779%2022.7511%2049.5676%2023.1202%2050.2237%2023.7763C50.8798%2024.4324%2051.2489%2025.3221%2051.25%2026.25V40.25C51.2489%2041.1779%2050.8798%2042.0676%2050.2237%2042.7237C49.5676%2043.3798%2048.6779%2043.7489%2047.75%2043.75H34.625C33.6971%2043.7489%2032.8074%2043.3798%2032.1513%2042.7237C31.4952%2042.0676%2031.1261%2041.1779%2031.125%2040.25ZM9.25%2043.75H22.375C23.3029%2043.7489%2024.1926%2043.3798%2024.8487%2042.7237C25.5048%2042.0676%2025.8739%2041.1779%2025.875%2040.25V26.25C25.8739%2025.3221%2025.5048%2024.4324%2024.8487%2023.7763C24.1926%2023.1202%2023.3029%2022.7511%2022.375%2022.75H9.25V21C9.25208%2019.1441%209.99025%2017.3649%2011.3026%2016.0526C12.6149%2014.7402%2014.3941%2014.0021%2016.25%2014C16.7141%2014%2017.1592%2013.8156%2017.4874%2013.4874C17.8156%2013.1593%2018%2012.7141%2018%2012.25C18%2011.7859%2017.8156%2011.3408%2017.4874%2011.0126C17.1592%2010.6844%2016.7141%2010.5%2016.25%2010.5C13.4662%2010.5031%2010.7973%2011.6104%208.82886%2013.5789C6.8604%2015.5473%205.75315%2018.2162%205.75%2021V40.25C5.75106%2041.1779%206.12015%2042.0676%206.7763%2042.7237C7.43245%2043.3798%208.32207%2043.7489%209.25%2043.75Z'%20fill='%230275D8'/%3e%3c/svg%3e");
  top: var(--quotes-position);
  left: 5%;
}
.blog-details blockquote::after {
  content: url("data:image/svg+xml,%3csvg%20width='57'%20height='56'%20viewBox='0%200%2057%2056'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M25.875%2040.25V21C25.8719%2018.2162%2024.7646%2015.5473%2022.7961%2013.5789C20.8277%2011.6104%2018.1588%2010.5031%2015.375%2010.5C14.9109%2010.5%2014.4658%2010.6844%2014.1376%2011.0126C13.8094%2011.3408%2013.625%2011.7859%2013.625%2012.25C13.625%2012.7141%2013.8094%2013.1593%2014.1376%2013.4874C14.4658%2013.8156%2014.9109%2014%2015.375%2014C17.2309%2014.0021%2019.0101%2014.7402%2020.3224%2016.0526C21.6347%2017.3649%2022.3729%2019.1441%2022.375%2021V22.75H9.25C8.32207%2022.7511%207.43245%2023.1202%206.7763%2023.7763C6.12015%2024.4324%205.75106%2025.3221%205.75%2026.25L5.75%2040.25C5.75106%2041.1779%206.12015%2042.0676%206.7763%2042.7237C7.43245%2043.3798%208.32207%2043.7489%209.25%2043.75H22.375C23.3029%2043.7489%2024.1926%2043.3798%2024.8487%2042.7237C25.5048%2042.0676%2025.8739%2041.1779%2025.875%2040.25ZM47.75%2043.75H34.625C33.6971%2043.7489%2032.8074%2043.3798%2032.1513%2042.7237C31.4952%2042.0676%2031.1261%2041.1779%2031.125%2040.25V26.25C31.1261%2025.3221%2031.4952%2024.4324%2032.1513%2023.7763C32.8074%2023.1202%2033.6971%2022.7511%2034.625%2022.75H47.75V21C47.7479%2019.1441%2047.0098%2017.3649%2045.6974%2016.0526C44.3851%2014.7402%2042.6059%2014.0021%2040.75%2014C40.2859%2014%2039.8408%2013.8156%2039.5126%2013.4874C39.1844%2013.1593%2039%2012.7141%2039%2012.25C39%2011.7859%2039.1844%2011.3408%2039.5126%2011.0126C39.8408%2010.6844%2040.2859%2010.5%2040.75%2010.5C43.5338%2010.5031%2046.2027%2011.6104%2048.1711%2013.5789C50.1396%2015.5473%2051.2469%2018.2162%2051.25%2021V40.25C51.2489%2041.1779%2050.8798%2042.0676%2050.2237%2042.7237C49.5676%2043.3798%2048.6779%2043.7489%2047.75%2043.75Z'%20fill='%230275D8'/%3e%3c/svg%3e");
  bottom: var(--quotes-position);
  right: 5%;
}
.blog-details a {
  color: var(--active-blue-400);
}
.blog-details a:hover {
  text-decoration: underline;
}.blog-sidebar[data-astro-cid-zony3gbo] {
  position: sticky;
  padding-top: .875rem;
  top: 6.25rem;
  border-radius: 1rem;
  background-color: #fff;
  padding: 1rem;
}

.blog-sidebar__title[data-astro-cid-zony3gbo] {
  color: var(--active-blue-400);
  font-size: 1.25rem;
  font-weight: 700;
}

.blog-sidebar__list[data-astro-cid-zony3gbo] {
  list-style: decimal-leading-zero;
  margin-left: 2rem;
  margin-top: 1.25rem;
}

.blog-sidebar__list-item[data-astro-cid-zony3gbo] {
  list-style: decimal-leading-zero;
  color: #353f50;
}

.blog-sidebar__list-item[data-astro-cid-zony3gbo]::marker {
  color: #848f9f;
}

.blog-sidebar__list-item[data-astro-cid-zony3gbo] a[data-astro-cid-zony3gbo] {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-sidebar__list[data-astro-cid-zony3gbo] li[data-astro-cid-zony3gbo] + li[data-astro-cid-zony3gbo] {
  margin-top: 1rem;
}

.blog-sidebar__list[data-astro-cid-zony3gbo] li[data-astro-cid-zony3gbo]:has(a[data-activeNav="true"]) {
  color: var(--active-blue-400);
}

.blog-sidebar__list[data-astro-cid-zony3gbo] li[data-astro-cid-zony3gbo]:has(a[data-activeNav="true"])::marker {
  color: var(--active-blue-400);
}

.blog-sidebar__list[data-astro-cid-zony3gbo] a[data-astro-cid-zony3gbo] {
  text-decoration: underline;
}

.aside-bar[data-astro-cid-zony3gbo] {
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid #f3f5f6;
  background: #fff;
  position: sticky;
  top: 7.5rem;
  max-width: 10.9375rem;
  display: grid;
}

@media screen and (width <= 770px) {
  .aside-bar[data-astro-cid-zony3gbo] {
    display: none;
  }
}

.aside-bar[data-astro-cid-zony3gbo] ul[data-astro-cid-zony3gbo] {
  display: grid;
  gap: 2rem;
  place-items: center;
}

.aside-bar[data-astro-cid-zony3gbo] ul[data-astro-cid-zony3gbo] li[data-astro-cid-zony3gbo] {
  display: grid;
  gap: .75rem;
  align-items: center;
  grid-template-columns: 24px 1fr;
}