/* =========================================================
   MUDAWIN BLOG
========================================================= */

.mw-blog-page {
  --blog-purple: #7139d5;
  --blog-purple-dark: #51259f;
  --blog-orange: #ffab35;
  --blog-ink: #21172d;
  --blog-text: #6d6375;
  --blog-muted: #8c8293;
  --blog-line: #ebe6ef;
  --blog-soft: #faf8fc;

  font-family:
    'Inter',
    sans-serif;

  color:
    var(--blog-ink);

  background:
    #fff;

  overflow:
    hidden;
}


.mw-blog-page *,
.mw-blog-page *::before,
.mw-blog-page *::after {
  box-sizing:
    border-box;
}


.mw-blog-container {
  width:
    min(
      1180px,
      calc(100% - 80px)
    );

  margin-inline:
    auto;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.mw-breadcrumb {
  position:
    relative;

  z-index:
    5;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-bottom:
    38px;

  color:
    #82778b;

  font-size:
    .73rem;

  line-height:
    1.5;
}


.mw-breadcrumb a {
  color:
    #6e6377;

  text-decoration:
    none;

  transition:
    color .2s ease;
}


.mw-breadcrumb a:hover {
  color:
    var(--blog-purple);
}


.mw-breadcrumb span[aria-current="page"] {
  color:
    var(--blog-purple);

  font-weight:
    650;
}


/* =========================================================
   HERO
========================================================= */

.mw-blog-hero {
  position:
    relative;

  padding:
    70px 0
    105px;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(113,57,213,.14),
      transparent 31%
    ),
    radial-gradient(
      circle at 89% 74%,
      rgba(255,171,53,.16),
      transparent 28%
    ),
    #fff;
}


.mw-blog-hero::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background-image:
    linear-gradient(
      rgba(113,57,213,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(113,57,213,.035) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.6),
      transparent
    );
}


.mw-blog-hero-content {
  position:
    relative;

  z-index:
    2;

  max-width:
    870px;

  margin-inline:
    auto;

  text-align:
    center;
}


.mw-blog-eyebrow {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  margin-bottom:
    22px;

  padding:
    8px 14px;

  border:
    1px solid
    rgba(113,57,213,.14);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.75);

  color:
    var(--blog-purple);

  font-size:
    .7rem;

  font-weight:
    800;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;
}


.mw-blog-eyebrow::before {
  content:
    "";

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--blog-orange);

  box-shadow:
    0 0 0 5px
    rgba(255,171,53,.14);
}


.mw-blog-hero h1 {
  margin:
    0;

  font-family:
    'Poppins',
    sans-serif;

  font-size:
    clamp(
      3rem,
      6.5vw,
      5.7rem
    );

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    -.065em;
}


.mw-blog-hero h1 span {
  display:
    block;

  color:
    var(--blog-purple);
}


.mw-blog-hero-content > p {
  max-width:
    700px;

  margin:
    26px auto 0;

  color:
    #6c6274;

  font-size:
    clamp(
      1rem,
      1.5vw,
      1.1rem
    );

  line-height:
    1.9;
}


/* =========================================================
   SECTIONS
========================================================= */

.mw-blog-section {
  padding:
    100px 0;
}


.mw-blog-section-soft {
  border-top:
    1px solid #f0ebf4;

  border-bottom:
    1px solid #f0ebf4;

  background:
    var(--blog-soft);
}


.mw-blog-section-heading {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    50px;

  margin-bottom:
    45px;
}


.mw-blog-label {
  display:
    block;

  margin-bottom:
    10px;

  color:
    var(--blog-purple);

  font-size:
    .68rem;

  font-weight:
    800;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}


.mw-blog-section-heading h2 {
  margin:
    0;

  font-family:
    'Poppins',
    sans-serif;

  color:
    var(--blog-ink);

  font-size:
    clamp(
      2rem,
      3.7vw,
      3.25rem
    );

  line-height:
    1.1;

  letter-spacing:
    -.05em;
}


.mw-blog-section-heading > p {
  max-width:
    440px;

  margin:
    0;

  color:
    var(--blog-text);

  font-size:
    .91rem;

  line-height:
    1.8;
}


/* =========================================================
   FEATURED
========================================================= */

.mw-featured-post {
  display:
    grid;

  grid-template-columns:
    1fr
    .82fr;

  gap:
    70px;

  align-items:
    center;

  padding:
    55px;

  border:
    1px solid
    var(--blog-line);

  border-radius:
    28px;

  background:
    #fff;

  box-shadow:
    0 25px 70px
    rgba(47,23,66,.06);
}


.mw-post-category {
  display:
    inline-block;

  margin-bottom:
    16px;

  color:
    var(--blog-purple);

  font-size:
    .66rem;

  font-weight:
    800;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}


.mw-featured-copy h2 {
  margin:
    0;

  font-family:
    'Poppins',
    sans-serif;

  font-size:
    clamp(
      2rem,
      3.6vw,
      3.2rem
    );

  line-height:
    1.13;

  letter-spacing:
    -.05em;
}


.mw-featured-copy h2 a {
  color:
    inherit;

  text-decoration:
    none;
}


.mw-featured-copy > p {
  margin:
    20px 0 0;

  color:
    var(--blog-text);

  font-size:
    .96rem;

  line-height:
    1.85;
}


.mw-post-meta {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    22px;

  color:
    var(--blog-muted);

  font-size:
    .7rem;
}


.mw-post-link {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  margin-top:
    28px;

  color:
    var(--blog-purple);

  font-size:
    .82rem;

  font-weight:
    700;

  text-decoration:
    none;
}


.mw-post-link span {
  transition:
    transform .2s ease;
}


.mw-post-link:hover span {
  transform:
    translateX(4px);
}


.mw-featured-visual {
  min-height:
    340px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    40px;

  border-radius:
    24px;

  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,.92),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #efe5ff,
      #fff0d9
    );

  color:
    var(--blog-ink);

  text-decoration:
    none;
}


.mw-featured-logo {
  width:
    125px;

  height:
    125px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    24px;

  border-radius:
    30px;

  background:
    rgba(255,255,255,.85);

  box-shadow:
    0 18px 45px
    rgba(60,30,86,.10);
}


.mw-featured-logo img {
  width:
    92px;

  height:
    92px;

  object-fit:
    contain;
}


.mw-featured-visual > span {
  color:
    var(--blog-purple);

  font-size:
    .7rem;

  font-weight:
    800;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;
}


.mw-featured-visual strong {
  margin-top:
    8px;

  font-size:
    1.35rem;

  letter-spacing:
    -.04em;
}


/* =========================================================
   POST GRID
========================================================= */

.mw-post-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    22px;
}


.mw-post-card {
  overflow:
    hidden;

  border:
    1px solid
    var(--blog-line);

  border-radius:
    21px;

  background:
    #fff;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.mw-post-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 20px 50px
    rgba(46,23,64,.07);
}


.mw-post-card-visual {
  min-height:
    190px;

  display:
    grid;

  place-items:
    center;

  background:
    linear-gradient(
      145deg,
      #f5ecff,
      #fff8ee
    );

  text-decoration:
    none;
}


.mw-visual-purple {
  background:
    linear-gradient(
      145deg,
      #eee4ff,
      #f8f4ff
    );
}


.mw-visual-orange {
  background:
    linear-gradient(
      145deg,
      #fff0d9,
      #fff9f1
    );
}


.mw-card-symbol {
  width:
    72px;

  height:
    72px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    20px;

  background:
    #fff;

  color:
    var(--blog-purple);

  font-weight:
    850;

  box-shadow:
    0 13px 35px
    rgba(48,22,70,.08);
}


.mw-post-card-body {
  padding:
    25px;
}


.mw-post-card h2 {
  margin:
    0;

  font-size:
    1.08rem;

  line-height:
    1.45;

  letter-spacing:
    -.025em;
}


.mw-post-card h2 a {
  color:
    inherit;

  text-decoration:
    none;
}


.mw-post-card-body > p {
  margin:
    10px 0 0;

  color:
    var(--blog-text);

  font-size:
    .79rem;

  line-height:
    1.75;
}


/* =========================================================
   TOPIC CARDS
========================================================= */

.mw-topic-grid {
  display:
    grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:
    16px;
}


.mw-topic-card {
  padding:
    28px;

  border:
    1px solid
    var(--blog-line);

  border-radius:
    19px;

  background:
    #fff;

  color:
    inherit;

  text-decoration:
    none;

  transition:
    border-color .2s ease,
    transform .2s ease;
}


.mw-topic-card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(113,57,213,.28);
}


.mw-topic-card > span {
  display:
    block;

  margin-bottom:
    28px;

  color:
    #afa5b6;

  font-size:
    .66rem;

  font-weight:
    800;
}


.mw-topic-card strong {
  display:
    block;

  font-size:
    .95rem;
}


.mw-topic-card p {
  margin:
    9px 0 0;

  color:
    #776d7e;

  font-size:
    .75rem;

  line-height:
    1.65;
}


/* =========================================================
   CTA
========================================================= */

.mw-blog-cta {
  padding:
    95px 0;

  background:
    linear-gradient(
      145deg,
      #2b1941,
      #1c102b
    );

  color:
    #fff;

  text-align:
    center;
}


.mw-blog-cta-inner {
  max-width:
    740px;

  margin-inline:
    auto;
}


.mw-blog-cta-inner > span {
  color:
    #c0a2f1;

  font-size:
    .68rem;

  font-weight:
    800;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}


.mw-blog-cta h2 {
  margin:
    14px 0 0;

  font-family:
    'Poppins',
    sans-serif;

  font-size:
    clamp(
      2.2rem,
      4vw,
      3.7rem
    );

  line-height:
    1.08;

  letter-spacing:
    -.05em;
}


.mw-blog-cta h2 strong {
  display:
    block;

  color:
    var(--blog-orange);
}


.mw-blog-cta p {
  max-width:
    560px;

  margin:
    20px auto 0;

  color:
    #c6b9d1;

  font-size:
    .91rem;

  line-height:
    1.8;
}


.mw-blog-cta a {
  min-height:
    50px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  margin-top:
    28px;

  padding:
    12px 22px;

  border-radius:
    10px;

  background:
    var(--blog-purple);

  color:
    #fff;

  font-size:
    .82rem;

  font-weight:
    700;

  text-decoration:
    none;
}


/* =========================================================
   ARTICLE PAGE
========================================================= */

.mw-article-page {
  font-family:
    'Inter',
    sans-serif;

  color:
    var(--blog-ink);

  background:
    #fff;
}


.mw-article-hero {
  padding:
    62px 0
    70px;

  border-bottom:
    1px solid
    var(--blog-line);

  background:
    linear-gradient(
      180deg,
      #fff,
      #faf8fc
    );
}


.mw-article-header {
  max-width:
    900px;

  margin-inline:
    auto;

  text-align:
    center;
}


.mw-article-header .mw-breadcrumb {
  justify-content:
    center;
}


.mw-article-category {
  display:
    inline-block;

  margin-bottom:
    17px;

  color:
    var(--blog-purple);

  font-size:
    .68rem;

  font-weight:
    800;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;
}


.mw-article-header h1 {
  margin:
    0;

  font-family:
    'Poppins',
    sans-serif;

  font-size:
    clamp(
      2.8rem,
      5.7vw,
      5rem
    );

  line-height:
    1.05;

  letter-spacing:
    -.06em;
}


.mw-article-lead {
  max-width:
    720px;

  margin:
    24px auto 0;

  color:
    var(--blog-text);

  font-size:
    1.03rem;

  line-height:
    1.85;
}


.mw-article-meta {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    24px;

  color:
    var(--blog-muted);

  font-size:
    .72rem;
}


/* =========================================================
   ARTICLE LAYOUT
========================================================= */

.mw-article-layout {
  display:
    grid;

  grid-template-columns:
    240px
    minmax(0,720px);

  gap:
    70px;

  justify-content:
    center;

  align-items:
    start;

  padding:
    80px 0
    100px;
}


/* =========================================================
   TOC
========================================================= */

.mw-toc {
  position:
    sticky;

  top:
    110px;

  padding:
    22px;

  border:
    1px solid
    var(--blog-line);

  border-radius:
    17px;

  background:
    #faf9fc;
}


.mw-toc-title {
  margin-bottom:
    14px;

  color:
    #44364e;

  font-size:
    .74rem;

  font-weight:
    800;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


.mw-toc-list {
  display:
    grid;

  gap:
    4px;

  margin:
    0;

  padding:
    0;

  list-style:
    none;
}


.mw-toc-list a {
  display:
    block;

  padding:
    7px 9px;

  border-radius:
    7px;

  color:
    #776c7e;

  font-size:
    .74rem;

  line-height:
    1.5;

  text-decoration:
    none;
}


.mw-toc-list a:hover,
.mw-toc-list a.active {
  background:
    #efe7fb;

  color:
    var(--blog-purple);
}


/* =========================================================
   ARTICLE CONTENT
========================================================= */

.mw-article-content {
  min-width:
    0;
}


.mw-article-content p {
  margin:
    0 0
    23px;

  color:
    #554a5e;

  font-size:
    1rem;

  line-height:
    1.95;
}


.mw-article-content h2 {
  scroll-margin-top:
    110px;

  margin:
    60px 0
    20px;

  font-family:
    'Poppins',
    sans-serif;

  color:
    #2d2037;

  font-size:
    1.8rem;

  line-height:
    1.3;

  letter-spacing:
    -.04em;
}


.mw-article-content h3 {
  scroll-margin-top:
    110px;

  margin:
    37px 0
    14px;

  color:
    #36293f;

  font-size:
    1.2rem;

  line-height:
    1.4;
}


.mw-article-content ul,
.mw-article-content ol {
  margin:
    0 0
    27px;

  padding-left:
    24px;

  color:
    #574d60;
}


.mw-article-content li {
  margin:
    8px 0;

  line-height:
    1.8;
}


/* =========================================================
   FEATURED-SNIPPET STYLE ANSWER
========================================================= */

.mw-answer-box {
  margin:
    28px 0
    36px;

  padding:
    24px 26px;

  border-left:
    4px solid
    var(--blog-purple);

  border-radius:
    0 15px 15px 0;

  background:
    #f7f2fd;
}


.mw-answer-box strong {
  display:
    block;

  margin-bottom:
    8px;

  color:
    #342540;

  font-size:
    .86rem;
}


.mw-answer-box p {
  margin:
    0;

  color:
    #574a61;

  font-size:
    .92rem;

  line-height:
    1.8;
}


/* =========================================================
   ARTICLE TABLE
========================================================= */

.mw-article-table-wrap {
  width:
    100%;

  margin:
    28px 0;

  overflow-x:
    auto;

  border:
    1px solid
    var(--blog-line);

  border-radius:
    15px;
}


.mw-article-table {
  width:
    100%;

  border-collapse:
    collapse;

  min-width:
    560px;
}


.mw-article-table th,
.mw-article-table td {
  padding:
    14px 16px;

  border-bottom:
    1px solid
    var(--blog-line);

  text-align:
    left;

  font-size:
    .82rem;

  line-height:
    1.6;
}


.mw-article-table th {
  background:
    #faf8fc;

  color:
    #392b43;

  font-weight:
    700;
}


/* =========================================================
   ARTICLE FAQ
========================================================= */

.mw-article-faq {
  margin-top:
    60px;
}


.mw-article-faq details {
  border-bottom:
    1px solid
    var(--blog-line);
}


.mw-article-faq details:first-of-type {
  border-top:
    1px solid
    var(--blog-line);
}


.mw-article-faq summary {
  padding:
    20px 0;

  cursor:
    pointer;

  color:
    #342740;

  font-weight:
    700;

  line-height:
    1.5;
}


.mw-article-faq details p {
  padding-bottom:
    20px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media
(max-width: 1000px) {

  .mw-blog-container {
    width:
      calc(100% - 56px);
  }


  .mw-featured-post {
    gap:
      40px;

    padding:
      40px;
  }


  .mw-topic-grid {
    grid-template-columns:
      repeat(2,1fr);
  }


  .mw-article-layout {
    grid-template-columns:
      210px
      minmax(0,1fr);

    gap:
      45px;
  }

}


@media
(max-width: 800px) {

  .mw-blog-container {
    width:
      calc(100% - 40px);
  }


  .mw-blog-hero {
    padding:
      55px 0
      70px;
  }


  .mw-blog-section {
    padding:
      75px 0;
  }


  .mw-featured-post {
    grid-template-columns:
      1fr;
  }


  .mw-featured-visual {
    min-height:
      270px;
  }


  .mw-post-grid {
    grid-template-columns:
      1fr 1fr;
  }


  .mw-blog-section-heading {
    display:
      block;
  }


  .mw-blog-section-heading > p {
    margin-top:
      17px;
  }


  .mw-article-layout {
    display:
      block;

    padding:
      55px 0
      75px;
  }


  .mw-toc {
    position:
      static;

    margin-bottom:
      45px;
  }

}


@media
(max-width: 560px) {

  .mw-blog-container {
    width:
      calc(100% - 30px);
  }


  .mw-blog-hero h1 {
    font-size:
      clamp(
        2.7rem,
        12vw,
        4rem
      );
  }


  .mw-featured-post {
    padding:
      27px;
  }


  .mw-post-grid,
  .mw-topic-grid {
    grid-template-columns:
      1fr;
  }


  .mw-article-hero {
    padding:
      40px 0
      52px;
  }


  .mw-article-header h1 {
    font-size:
      clamp(
        2.35rem,
        11vw,
        3.6rem
      );
  }

}