#dgc-blog,
  #dgc-blog * { box-sizing: border-box; }

  #dgc-blog {
    --dgc-navy: #071b3d;
    --dgc-navy-2: #0a2a59;
    --dgc-blue: #1765f3;
    --dgc-blue-2: #0c7fff;
    --dgc-text: #10264d;
    --dgc-muted: #657187;
    --dgc-line: #e3e9f2;
    --dgc-soft: #f5f7fb;
    --dgc-white: #ffffff;
    --dgc-shadow: 0 16px 40px rgba(7, 27, 61, .12);
    --dgc-shadow-soft: 0 8px 25px rgba(7, 27, 61, .09);
    --dgc-hero-image: none;
    --dgc-newsletter-image: none;
    --dgc-featured-content-image: none;
    width: 100%;
    overflow: hidden;
    color: var(--dgc-text);
    background: #fff;
    font-family: inherit;
  }

  #dgc-blog img { display: block; max-width: 100%; }
  #dgc-blog button,
  #dgc-blog input,
  #dgc-blog select { font: inherit; }
  #dgc-blog button,
  #dgc-blog a { -webkit-tap-highlight-color: transparent; }
  #dgc-blog a { color: inherit; text-decoration: none; }

  #dgc-blog svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .dgc-container {
    width: min(1280px, calc(100% - 40px));
    margin-inline: auto;
  }

  .dgc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Hero */
  .dgc-hero {
    position: relative;
    isolation: isolate;
    min-height: 430px;
    color: #fff;
    background-image:
      linear-gradient(90deg, rgba(3, 17, 42, .50), rgba(3, 17, 42, .65) 48%, rgba(3, 17, 42, .85)),
      var(--dgc-hero-image),
      linear-gradient(135deg, #081d40, #0d3163);
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }

  .dgc-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 130px;
    z-index: -1;
    background: linear-gradient(180deg, transparent, rgba(4, 18, 44, .48));
  }

  .dgc-hero__inner {
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 54px 0 105px;
  }

  .dgc-hero__copy { max-width: 780px; }

  .dgc-hero h1 {
    margin: 90px 0 20px 20px;
    color: #fff;
    font-size: clamp(34px, 4.5vw, 58px);
    line-height: 1.32;
    letter-spacing: -1.5px;
    font-weight: 900;
  }

  .dgc-hero__copy p {
    max-width: 700px;
    margin: 0;
    color: rgba(255,255,255,.88);
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 2;
  }

  .dgc-search {
    width: min(790px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(210px, .75fr) 125px;
    gap: 5px;
    direction: ltr;
    margin-top: 24px;
    padding: 6px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 35px rgba(1, 14, 35, .28);
  }

  .dgc-search__input-wrap,
  .dgc-search__select-wrap {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    background: #fff;
  }

  .dgc-search__input-wrap { border-right: 1px solid #dbe1eb; }
  .dgc-search__input-wrap input,
  .dgc-search__select-wrap select {
    width: 100%;
    height: 46px;
    border: 0;
    outline: 0;
    color: #132a50;
    background: transparent;
  }

  .dgc-search__input-wrap input {
    direction: rtl;
    padding: 0 15px 0 46px;
  }

  .dgc-search__icon {
    position: absolute;
    left: 14px;
    color: #243b61;
    pointer-events: none;
  }

  .dgc-search__select-wrap { direction: rtl; }
  .dgc-search__select-wrap select {
    appearance: none;
    cursor: pointer;
    padding: 0 14px 0 40px;
  }

  .dgc-search__select-wrap > span {
    position: absolute;
    left: 12px;
    color: #4b5d77;
    pointer-events: none;
  }

  .dgc-search__button {
    min-height: 46px;
    border: 0;
    border-radius: 5px;
    padding: 0 18px;
    color: #fff;
    background: var(--dgc-navy);
    font-weight: 800;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
  }

  .dgc-search__button:hover { transform: translateY(-1px); background: #0c3164; }

  /* Overlapping category cards */
  .dgc-category-overlap {
    position: relative;
    z-index: 5;
    margin-top: -76px;
  }

  .dgc-category-shell { position: relative; }

  /* راست‌چین شدن کارت‌های دسته‌بندی بالای صفحه */
#dgc-blog .dgc-category-shell {
  direction: rtl;
}

#dgc-blog .dgc-category-strip {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  direction: rtl;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 4px 2px 18px;
}

/* محتوای انگلیسی داخل کارت‌ها منظم باقی بماند */
#dgc-blog .dgc-category-card {
  direction: ltr;
  flex-shrink: 0;
}

#dgc-blog .dgc-category-card__inner {
  direction: ltr;
  text-align: center;
}
  .dgc-category-strip::-webkit-scrollbar,
  .dgc-popular-strip::-webkit-scrollbar { display: none; }

  .dgc-category-card {
    position: relative;
    flex: 0 0 148px;
    height: 148px;
    overflow: hidden;
    scroll-snap-align: start;
    isolation: isolate;
    border: 3px solid rgba(255,255,255,.95);
    border-radius: 8px;
    padding: 14px 11px 12px;
    color: #fff;
    background: #0a2c59;
    box-shadow: 0 10px 22px rgba(7, 27, 61, .17);
    cursor: pointer;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }

  .dgc-category-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(2,15,38,.12), rgba(2,15,38,.78));
  }

  .dgc-category-card__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dgc-category-card__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    direction: ltr;
  }

  .dgc-category-card__icon-box {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #fff;
  }

  .dgc-category-card__icon-box img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }

  .dgc-category-card strong {
    color: #fff;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
    text-shadow: 0 2px 6px rgba(0,0,0,.32);
  }

  .dgc-category-card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(7, 27, 61, .24); }
  .dgc-category-card.is-active { border-color: #72a9ff; box-shadow: 0 0 0 3px rgba(23,101,243,.18), 0 16px 32px rgba(7, 27, 61, .23); }

  #dgc-blog .dgc-round-nav {
    position: absolute;
    top: 56px;
    z-index: 6;
    width: 36px;
    height: 36px;
    min-width: 36px;
    max-width: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--dgc-line);
    border-radius: 50%;
    color: #28405f;
    background: #fff;
    box-shadow: var(--dgc-shadow-soft);
    cursor: pointer;
  }

  .dgc-round-nav--prev { left: -18px; }
  .dgc-round-nav--next { right: -18px; }

  /* Main */
  .dgc-main {
    margin-top: -2px;
    padding: 18px 0 76px;
    background: linear-gradient(#fff, #fbfcff);
  }

  .dgc-section { padding-top: 34px; }

  .dgc-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--dgc-blue);
    font-size: 12px;
    font-weight: 900;
  }

  .dgc-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
  }

  .dgc-section-head--compact { align-items: center; }

  .dgc-section-head h2,
  .dgc-application-panel h2,
  .dgc-small-panel-head h2,
  .dgc-newsletter h2 {
    margin: 0;
    color: var(--dgc-text);
    font-size: clamp(21px, 2vw, 29px);
    line-height: 1.4;
    font-weight: 900;
  }

  .dgc-active-filter {
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 8px 0 4px;
    padding: 11px 14px;
    border: 1px solid #d9e5f8;
    border-radius: 8px;
    color: #2b4569;
    background: #f3f7ff;
  }

  .dgc-active-filter:not([hidden]) { display: flex; }
  .dgc-active-filter button {
    border: 0;
    color: #ce2f50;
    background: transparent;
    font-weight: 800;
    cursor: pointer;
  }

  /* Featured */
  .dgc-featured-card {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    direction: ltr;
    min-height: 306px;
    overflow: hidden;
    border: 1px solid var(--dgc-line);
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--dgc-shadow);
  }

  .dgc-featured-card__image {
    position: relative;
    min-height: 306px;
    overflow: hidden;
    background: #0a2c59;
  }

  .dgc-featured-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
  }

  .dgc-featured-card:hover .dgc-featured-card__image img { transform: scale(1.035); }

/* ستون محتوای مقاله ویژه */
#dgc-blog .dgc-featured-card__content {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  direction: rtl;
  overflow: hidden;

  padding: clamp(26px, 4vw, 50px);

  background: #fff;
}

/* تصویر به‌عنوان بک‌گراند، پشت محتوا */
#dgc-blog .dgc-featured-card__content::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  width: 100%;
  height: 100%;

background-image:
  linear-gradient(
    180deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.35) 40%,
    rgba(255,255,255,.10) 70%,
    rgba(255,255,255,0) 100%
  ),
  var(--dgc-featured-content-image);

  background-repeat: no-repeat;
  background-position: center center, center center;
  background-size: cover, cover;

  opacity: 1;
  pointer-events: none;
}

/* محتوای متنی همیشه روی بک‌گراند باشد */
#dgc-blog .dgc-featured-card__content > * {
  position: relative;
  z-index: 1;
}

  .dgc-featured-card__content > * {
    position: relative;
    z-index: 1;
  }

  .dgc-featured-badge {
    width: fit-content;
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 4px;
    color: #fff;
    background: var(--dgc-blue);
    font-size: 11px;
    font-weight: 900;
  }

  .dgc-featured-card h2 {
    margin: 14px 0 8px;
    color: var(--dgc-text);
    font-size: clamp(25px, 2.7vw, 38px);
    line-height: 1.35;
    font-weight: 900;
  }

  .dgc-featured-card h2 a:hover { color: var(--dgc-blue); }

  .dgc-featured-card__excerpt {
    max-width: 560px;
    margin: 0 0 14px;
    color: var(--dgc-muted);
    font-size: 14px;
    line-height: 1.9;
  }

  .dgc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    color: #6e798b;
    font-size: 11px;
  }

  .dgc-meta span { display: inline-flex; align-items: center; gap: 5px; }
  .dgc-meta svg { width: 16px; height: 16px; }

  .dgc-featured-read {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 17px;
    border-radius: 5px;
    color: #fff;
    background: var(--dgc-blue);
    font-size: 12px;
    font-weight: 900;
  }

  .dgc-featured-read:hover { background: #0f52d4; }

  /* Latest + left application filter */
  .dgc-latest-layout {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 28px;
    direction: ltr;
    align-items: start;
  }

  .dgc-application-panel {
    direction: ltr;
    padding-top: 2px;
  }

  .dgc-application-panel h2 {
    margin-bottom: 17px;
    font-size: 18px;
    text-align: left;
  }

  #dgc-blog .dgc-application-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  #dgc-blog .dgc-application-item {
    width: 100%;
    min-height: 35px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    column-gap: 9px;
    border: 0;
    border-radius: 7px;
    padding: 5px;
    color: #263d5e;
    background: transparent;
    direction: ltr;
    text-align: left;
    font-size: 9px;
    line-height: 1.25;
    font-weight: 700;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, transform .2s ease;
  }

  #dgc-blog .dgc-application-item:hover,
  #dgc-blog .dgc-application-item.is-active { color: var(--dgc-blue); background: #eff5ff; transform: translateX(2px); }
  #dgc-blog .dgc-application-item.is-disabled { opacity: .68; cursor: default; }
  #dgc-blog .dgc-application-item.is-disabled:hover { color: #263d5e; background: transparent; transform: none; }

  .dgc-application-icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
  }

  .dgc-application-icon img {
    width: 21px;
    height: 21px;
    object-fit: contain;
  }

  .dgc-application-label {
    min-width: 0;
    display: block;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .dgc-latest-content { min-width: 0; direction: rtl; }

  .dgc-more-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    padding: 7px 0;
    color: var(--dgc-blue);
    background: transparent;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
  }

  .dgc-more-button:hover { color: #0d4fca; }

  .dgc-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(225px, auto));
    gap: 14px;
    direction: ltr;
  }

  .dgc-article-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    direction: rtl;
    border: 1px solid var(--dgc-line);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 4px 13px rgba(7,27,61,.06);
    transition: transform .2s ease, box-shadow .2s ease;
  }

  .dgc-article-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(7,27,61,.12); }

  .dgc-article-card:nth-child(1) { grid-column: 1; grid-row: 1; }
  .dgc-article-card:nth-child(2) { grid-column: 2; grid-row: 1; }
  .dgc-article-card:nth-child(3) { grid-column: 1; grid-row: 2; }
  .dgc-article-card:nth-child(4) { grid-column: 2; grid-row: 2; }
  .dgc-article-card:nth-child(5) { grid-column: 3; grid-row: 1 / span 2; }

  .dgc-article-card__image {
    position: relative;
    display: block;
    height: 112px;
    overflow: hidden;
    background: #0a2c59;
  }

  .dgc-article-card:nth-child(5) .dgc-article-card__image { height: 56%; min-height: 250px; }

  .dgc-article-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
  }

  .dgc-article-card:hover .dgc-article-card__image img { transform: scale(1.04); }

  .dgc-card-category {
    position: absolute;
    top: 8px;
    right: 8px;
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 4px;
    color: #fff;
    background: rgba(20,100,244,.94);
    font-size: 9px;
    font-weight: 900;
  }

  .dgc-reading-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 7px;
    border-radius: 999px;
    color: #fff;
    background: rgba(4,18,44,.82);
    font-size: 9px;
    font-weight: 800;
  }

  .dgc-article-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 12px 11px;
  }

  .dgc-article-card h3 {
    margin: 0 0 6px;
    color: var(--dgc-text);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 900;
  }

  .dgc-article-card:nth-child(5) h3 { font-size: 17px; }
  .dgc-article-card h3 a:hover { color: var(--dgc-blue); }

  .dgc-article-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 9px;
    color: var(--dgc-muted);
    font-size: 11px;
    line-height: 1.65;
  }

  .dgc-article-card:nth-child(5) .dgc-article-card__excerpt { -webkit-line-clamp: 3; font-size: 12px; }
  .dgc-article-card .dgc-meta { margin-top: auto; font-size: 9px; }

  /* Popular slider */
  .dgc-trending-section {
    margin-top: 34px;
    padding: 22px 18px 18px;
    border-radius: 12px;
    background: #f2f4f8;
  }

  .dgc-slider-actions { display: flex; gap: 7px; direction: ltr; }

  /* دکمه‌های عقب و جلو مقالات پربازدید */
#dgc-blog button.dgc-circle-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  flex: 0 0 36px;
  aspect-ratio: 1 / 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;
  border: 1px solid var(--dgc-line);
  border-radius: 50%;

  color: #2b4160;
  background: #fff;
  line-height: 1;
  box-sizing: border-box;
  cursor: pointer;
}

#dgc-blog .dgc-circle-button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
}

  .dgc-popular-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    direction: ltr;
    padding: 2px;
  }

  .dgc-popular-card {
    position: relative;
    flex: 0 0 190px;
    height: 132px;
    overflow: hidden;
    scroll-snap-align: start;
    isolation: isolate;
    border-radius: 8px;
    color: #fff;
    background: #0a2c59;
  }

  .dgc-popular-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent 20%, rgba(3,16,39,.87));
  }

  .dgc-popular-card img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dgc-popular-card h3 {
    position: absolute;
    inset: auto 10px 10px;
    margin: 0;
    color: #fff;
    direction: rtl;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 900;
  }

  /* Bottom resources / tags / categories / newsletter */
  .dgc-bottom-layout {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 14px;
    direction: ltr;
    align-items: stretch;
  }

  .dgc-bottom-left {
    display: grid;
    gap: 10px;
    direction: rtl;
  }

  .dgc-resource-panel,
  .dgc-tags-panel,
  .dgc-all-categories-panel {
    border: 1px solid var(--dgc-line);
    border-radius: 9px;
    padding: 13px 15px;
    background: #f7f8fb;
  }

  .dgc-small-panel-head { margin-bottom: 11px; }
  .dgc-small-panel-head h2 { font-size: 15px; }

  .dgc-resource-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }

  .dgc-resource-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 7px;
    padding: 7px 4px;
    color: #183563;
    background: transparent;
    cursor: pointer;
  }

  .dgc-resource-item:hover { color: var(--dgc-blue); background: #fff; }

  .dgc-resource-item img {
    width: 27px;
    height: 27px;
    object-fit: contain;
  }

  .dgc-resource-item span {
    text-align: center;
    font-size: 9px;
    line-height: 1.45;
    font-weight: 800;
  }

  .dgc-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .dgc-tag-button {
    border: 1px solid #a8c6fb;
    border-radius: 5px;
    padding: 5px 10px;
    color: #2462c7;
    background: #fff;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
  }

  .dgc-tag-button:hover,
  .dgc-tag-button.is-active { color: #fff; border-color: var(--dgc-blue); background: var(--dgc-blue); }
  .dgc-tag-button.is-disabled { opacity: .58; cursor: default; }
  .dgc-tag-button.is-disabled:hover { color: #2462c7; border-color: #a8c6fb; background: #fff; }

  .dgc-all-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 15px;
  }

  .dgc-all-category-button {
    border: 0;
    padding: 2px 0;
    color: #304967;
    background: transparent;
    font-size: 11px;
    cursor: pointer;
  }

  .dgc-all-category-button:hover,
  .dgc-all-category-button.is-active { color: var(--dgc-blue); }

  .dgc-newsletter {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    isolation: isolate;
    direction: rtl;
    border-radius: 9px;
    color: #fff;
    background-image: var(--dgc-newsletter-image), linear-gradient(135deg, #071b3d, #0a3471);
    background-size: contain, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-color: #071b3d;
  }

  .dgc-newsletter__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(90deg, rgba(5,20,49,.95), rgba(5,20,49,.82)),
      radial-gradient(circle at 80% 20%, rgba(238,29,142,.52), transparent 34%);
  }

  .dgc-newsletter__content {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 4vw, 38px);
  }

  .dgc-newsletter__content > span {
    width: fit-content;
    margin-bottom: 8px;
    color: #9fc5ff;
    font-size: 11px;
    font-weight: 900;
  }

  .dgc-newsletter h2 { max-width: 430px; color: #fff; font-size: clamp(22px, 2.3vw, 31px); }

  .dgc-newsletter p {
    max-width: 470px;
    margin: 9px 0 18px;
    color: rgba(255,255,255,.78);
    font-size: 12px;
    line-height: 1.9;
  }

  .dgc-newsletter__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    direction: ltr;
    overflow: hidden;
    border-radius: 6px;
    background: #fff;
  }

  .dgc-newsletter__form input {
    min-width: 0;
    height: 45px;
    border: 0;
    outline: 0;
    direction: rtl;
    padding: 0 13px;
    color: #193158;
    background: #fff;
  }

  .dgc-newsletter__form button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    padding: 0 15px;
    color: #fff;
    background: var(--dgc-blue);
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
  }

  .dgc-newsletter small { margin-top: 10px; color: rgba(255,255,255,.62); font-size: 9px; }
  .dgc-newsletter__message { min-height: 18px; margin: 7px 0 0; font-size: 10px; }
  .dgc-newsletter__message.is-success { color: #7ff0ad; }
  .dgc-newsletter__message.is-error { color: #ffb7c4; }

  .dgc-empty {
    padding: 45px 20px;
    text-align: center;
    border: 1px dashed #c9d4e4;
    border-radius: 10px;
    background: #fafcff;
  }

  .dgc-empty svg { width: 38px; height: 38px; color: #7890af; }
  .dgc-empty h3 { margin: 10px 0 4px; font-size: 20px; }
  .dgc-empty p { margin: 0 0 13px; color: var(--dgc-muted); }
  .dgc-empty button {
    border: 1px solid #b9cdf0;
    border-radius: 6px;
    padding: 8px 14px;
    color: var(--dgc-blue);
    background: #fff;
    font-weight: 800;
    cursor: pointer;
  }

  .dgc-global-message {
    margin-top: 18px;
    padding: 13px 15px;
    border: 1px solid #f0b7c2;
    border-radius: 8px;
    color: #9e2b43;
    background: #fff3f5;
    font-size: 13px;
    line-height: 1.8;
  }

  /* Skeletons */
  .dgc-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: 9px;
    background: #e9edf4;
  }

  .dgc-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
    animation: dgc-shimmer 1.35s infinite;
  }

  .dgc-skeleton--category { flex: 0 0 148px; height: 148px; }
  .dgc-skeleton--featured { height: 306px; }
  .dgc-skeleton--article { min-height: 225px; }
  .dgc-skeleton--article-tall { grid-column: 3; grid-row: 1 / span 2; }
  .dgc-skeleton--popular { flex: 0 0 190px; height: 132px; }

  @keyframes dgc-shimmer { to { transform: translateX(100%); } }

  /* Responsive */
  @media (max-width: 1100px) {
    .dgc-category-card,
    .dgc-skeleton--category { flex-basis: 142px; }

    .dgc-latest-layout { grid-template-columns: 185px minmax(0, 1fr); gap: 20px; }
    .dgc-articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
    .dgc-article-card:nth-child(n) { grid-column: auto; grid-row: auto; }
    .dgc-article-card:nth-child(5) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; direction: ltr; }
    .dgc-article-card:nth-child(5) .dgc-article-card__image { height: 100%; min-height: 235px; }
    .dgc-article-card:nth-child(5) .dgc-article-card__body { direction: rtl; }
    .dgc-resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media (max-width: 850px) {
    .dgc-hero { min-height: 465px; }
    .dgc-hero__inner { min-height: 465px; padding-bottom: 116px; }
    .dgc-search { grid-template-columns: 1fr 210px 110px; }
    .dgc-round-nav { display: none; }

    .dgc-featured-card { grid-template-columns: 1fr; }
    .dgc-featured-card__image { min-height: 285px; }

    .dgc-latest-layout { grid-template-columns: 1fr; direction: rtl; }
    .dgc-application-panel { overflow: visible; direction: ltr; }
    .dgc-application-panel h2 { text-align: left; }

    .dgc-bottom-layout { grid-template-columns: 1fr; }
    .dgc-newsletter { min-height: 330px; }
  }

  @media (max-width: 640px) {
    .dgc-container { width: min(100% - 24px, 1280px); }
    .dgc-hero h1 { font-size: 31px; }
    .dgc-hero__copy p { font-size: 14px; }
    .dgc-search {
      grid-template-columns: 1fr;
      gap: 0;
      border-radius: 9px;
      padding: 7px;
    }
    .dgc-search__input-wrap { border-right: 0; border-bottom: 1px solid #e1e6ee; }
    .dgc-search__button { margin-top: 6px; }

    .dgc-category-overlap { margin-top: -70px; }
    .dgc-category-card,
    .dgc-skeleton--category { flex-basis: 132px; height: 139px; }

    .dgc-section { padding-top: 28px; }
    .dgc-featured-card__image { min-height: 225px; }
    .dgc-featured-card__content {
      --dgc-featured-padding: 18px;
      padding: 23px var(--dgc-featured-padding) 0;
    }
    .dgc-featured-card__content::after {
      flex-basis: 125px;
      height: 125px;
      min-height: 125px;
      margin-top: 20px;
      background-position: center center;
      background-size: cover;
    }
    .dgc-featured-card h2 { font-size: 25px; }

    .dgc-section-head { align-items: center; }
    .dgc-articles-grid { grid-template-columns: 1fr; }
    .dgc-article-card:nth-child(5) { display: flex; grid-column: auto; }
    .dgc-article-card:nth-child(5) .dgc-article-card__image { height: 190px; min-height: 0; }
    .dgc-article-card__image { height: 190px; }
    .dgc-article-card h3,
    .dgc-article-card:nth-child(5) h3 { font-size: 16px; }
    .dgc-article-card__excerpt,
    .dgc-article-card:nth-child(5) .dgc-article-card__excerpt { font-size: 12px; }

    .dgc-trending-section { margin-inline: -2px; padding: 18px 12px 14px; }
    .dgc-popular-card,
    .dgc-skeleton--popular { flex-basis: 170px; }
    .dgc-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dgc-newsletter__form { grid-template-columns: 1fr; gap: 6px; overflow: visible; background: transparent; }
    .dgc-newsletter__form input,
    .dgc-newsletter__form button { min-height: 45px; border-radius: 6px; }
    .dgc-newsletter__form button { justify-content: center; }

    .dgc-active-filter { align-items: flex-start; flex-direction: column; }
  }

  @media (prefers-reduced-motion: reduce) {
    #dgc-blog *,
    #dgc-blog *::before,
    #dgc-blog *::after {
      scroll-behavior: auto;
      animation-duration: .01ms;
      animation-iteration-count: 1;
      transition-duration: .01ms;
    }
  }

/* Server-rendered version: content remains visible even before JavaScript runs. */
#dgc-blog [hidden] { display: none; }

.dgc-noscript-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:14px; }
@media (max-width:850px){ .dgc-noscript-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .dgc-noscript-list{ grid-template-columns:1fr; } }

@media (max-width: 640px) {
  #dgc-blog .dgc-featured-card__content {
    padding: 23px 18px 26px;
    min-height: 360px;
  }

  #dgc-blog .dgc-featured-card__content::after {
    background-position: center center, center bottom;
    background-size: cover, cover;
  }
}

/* =========================================================
   RANG SAREH BLOG — FINAL VISUAL THEME V3
   Visual layer only. HTML/PHP/JS structure and behavior unchanged.
   Alternating full-width light / dark sections like the homepage.
========================================================= */

#dgc-blog {
    --dgc-navy: #082419;
    --dgc-navy-2: #123c2a;
    --dgc-blue: #2b6749;
    --dgc-blue-2: #3b7b58;
    --dgc-text: #163e2d;
    --dgc-muted: #71877b;
    --dgc-line: rgba(22,62,45,.11);
    --dgc-soft: #edf2ed;
    --dgc-white: #ffffff;
    --dgc-yellow: #ffe161;
    --dgc-cream: #f5f0e2;
    --dgc-cream-2: #ede8d8;
    --dgc-green-1: #082419;
    --dgc-green-2: #123c2a;
    --dgc-green-3: #09271b;
    --dgc-shadow: 0 24px 62px rgba(31,52,40,.14);
    --dgc-shadow-soft: 0 12px 30px rgba(31,52,40,.10);

    position: relative;
    isolation: isolate;
    color: var(--dgc-text);
    background: #f6f8f4;
}

/* faint global texture */
#dgc-blog::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(22,62,45,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22,62,45,.018) 1px, transparent 1px);
    background-size: 58px 58px;
}


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

#dgc-blog .dgc-hero {
    min-height: 430px;
    color: #fff;
    background-image:
        linear-gradient(90deg, rgba(8,36,25,.50), rgba(8,36,25,.68) 48%, rgba(8,36,25,.90)),
        var(--dgc-hero-image),
        radial-gradient(circle at 14% 18%, rgba(255,225,97,.10), transparent 24%),
        linear-gradient(125deg, #082419 0%, #123c2a 52%, #09271b 100%);
    background-size: cover, cover, auto, auto;
    background-position: center;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

#dgc-blog .dgc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 8%, transparent 84%);
    mask-image: radial-gradient(ellipse at center, #000 8%, transparent 84%);
}

#dgc-blog .dgc-hero::after {
    height: 150px;
    background: linear-gradient(180deg, transparent, rgba(8,36,25,.72));
}

#dgc-blog .dgc-hero h1 {
    text-shadow: 0 12px 34px rgba(0,0,0,.25);
}

#dgc-blog .dgc-hero__copy p {
    color: rgba(240,247,243,.84);
}

#dgc-blog .dgc-search {
    padding: 7px;
    gap: 6px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    box-shadow:
        0 22px 52px rgba(2,20,13,.28),
        inset 0 1px 0 rgba(255,255,255,.96);
}

#dgc-blog .dgc-search__input-wrap,
#dgc-blog .dgc-search__select-wrap {
    border-radius: 10px;
    background: rgba(248,251,249,.98);
}

#dgc-blog .dgc-search__input-wrap {
    border-right-color: rgba(22,62,45,.09);
}

#dgc-blog .dgc-search__input-wrap input,
#dgc-blog .dgc-search__select-wrap select {
    color: #163e2d;
}

#dgc-blog .dgc-search__icon,
#dgc-blog .dgc-search__select-wrap > span {
    color: #567565;
}

#dgc-blog .dgc-search__button {
    border-radius: 10px;
    color: #163e2d;
    background: linear-gradient(145deg, #ffe161, #efd04f);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

#dgc-blog .dgc-search__button:hover {
    background: linear-gradient(145deg, #ffe87c, #f2d65b);
}


/* =========================================================
   CATEGORY STRIP
========================================================= */

#dgc-blog .dgc-category-overlap {
    margin-top: -74px;
}

#dgc-blog .dgc-category-strip {
    gap: 14px;
    padding: 5px 4px 24px;
}

#dgc-blog .dgc-category-card {
    height: 148px;
    flex-basis: 156px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 20px;
    background: #123c2a;
    box-shadow:
        0 18px 38px rgba(8,36,25,.22),
        inset 0 1px 0 rgba(255,255,255,.06);
}

#dgc-blog .dgc-category-card::before {
    background:
        linear-gradient(
            180deg,
            rgba(8,36,25,.10) 0%,
            rgba(8,36,25,.50) 48%,
            rgba(8,36,25,.94) 100%
        );
}

#dgc-blog .dgc-category-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(circle at 18% 15%, rgba(255,225,97,.14), transparent 35%);
}

#dgc-blog .dgc-category-card__icon-box {
    border: 1px solid rgba(255,225,97,.16);
    border-radius: 13px;
    background: rgba(255,225,97,.07);
}

#dgc-blog .dgc-category-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,225,97,.34);
    box-shadow: 0 23px 44px rgba(8,36,25,.28);
}

#dgc-blog .dgc-category-card.is-active {
    border-color: #ffe161;
    box-shadow:
        0 0 0 3px rgba(255,225,97,.14),
        0 23px 44px rgba(8,36,25,.27);
}

#dgc-blog .dgc-round-nav {
    color: #163e2d;
    border-color: rgba(22,62,45,.10);
    background: rgba(255,255,255,.98);
    box-shadow: 0 12px 28px rgba(31,52,40,.13);
}


/* =========================================================
   MAIN / FULL-BLEED SECTION SYSTEM
========================================================= */

#dgc-blog .dgc-main {
    margin-top: -2px;
    padding: 0;
    background: #f6f8f4;
}

#dgc-blog .dgc-section {
    position: relative;
    isolation: isolate;
    padding-top: 66px;
    padding-bottom: 66px;
    margin-top: 0;
}

#dgc-blog .dgc-section::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: -2;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
}

/* 1 — LIGHT */
#dgc-blog .dgc-featured-section::before {
    background:
        radial-gradient(circle at 9% 18%, rgba(255,225,97,.14), transparent 24%),
        radial-gradient(circle at 91% 82%, rgba(43,103,73,.07), transparent 25%),
        linear-gradient(180deg, #f5f0e2 0%, #ede8d8 100%);
}

/* 2 — DARK */
#dgc-blog .dgc-latest-section::before {
    background:
        radial-gradient(circle at 12% 16%, rgba(255,225,97,.075), transparent 23%),
        radial-gradient(circle at 88% 76%, rgba(78,131,190,.055), transparent 27%),
        linear-gradient(125deg, #082419 0%, #123c2a 50%, #09271b 100%);
}

/* 3 — LIGHT */
#dgc-blog .dgc-trending-section::before {
    background:
        radial-gradient(circle at 88% 15%, rgba(255,225,97,.12), transparent 23%),
        radial-gradient(circle at 11% 79%, rgba(43,103,73,.06), transparent 26%),
        linear-gradient(180deg, #f6f8f4 0%, #edf2ed 100%);
}

/* 4 — DARK */
#dgc-blog .dgc-bottom-layout::before {
    background:
        radial-gradient(circle at 10% 20%, rgba(255,225,97,.07), transparent 24%),
        radial-gradient(circle at 90% 80%, rgba(78,131,190,.05), transparent 27%),
        linear-gradient(125deg, #082419 0%, #123c2a 50%, #09271b 100%);
}

/* full-width soft grids only on dark areas */
#dgc-blog .dgc-latest-section::after,
#dgc-blog .dgc-bottom-layout::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: -1;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 8%, transparent 84%);
    mask-image: radial-gradient(ellipse at center, #000 8%, transparent 84%);
}

#dgc-blog .dgc-kicker {
    color: #2b6749;
}

#dgc-blog .dgc-kicker::before {
    content: "•";
    margin-left: 6px;
    color: #d1aa21;
}

#dgc-blog .dgc-section-head h2,
#dgc-blog .dgc-application-panel h2,
#dgc-blog .dgc-small-panel-head h2 {
    color: #163e2d;
}

#dgc-blog .dgc-active-filter {
    border-color: rgba(43,103,73,.12);
    border-radius: 12px;
    color: #315a46;
    background: rgba(255,255,255,.76);
}


/* =========================================================
   FEATURED — light premium editorial block
========================================================= */

#dgc-blog .dgc-featured-card {
    min-height: 320px;
    border: 1px solid rgba(22,62,45,.10);
    border-radius: 30px;
    background: #fff;
    box-shadow:
        0 26px 65px rgba(55,63,46,.14),
        inset 0 1px 0 rgba(255,255,255,.90);
}

#dgc-blog .dgc-featured-card__image {
    min-height: 320px;
    background: #082419;
}

#dgc-blog .dgc-featured-card__image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(8,36,25,.02), rgba(8,36,25,.16));
}

#dgc-blog .dgc-featured-card__content {
    padding: clamp(34px, 4.2vw, 54px);
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,249,244,.94));
}

#dgc-blog .dgc-featured-card__content::after {
    background-image:
        linear-gradient(
            180deg,
            rgba(255,255,255,.82) 0%,
            rgba(250,250,245,.70) 45%,
            rgba(244,247,240,.46) 100%
        ),
        var(--dgc-featured-content-image);
    opacity: .60;
}

#dgc-blog .dgc-featured-badge,
#dgc-blog .dgc-card-category {
    color: #163e2d;
    background: #ffe161;
    border-radius: 999px;
}

#dgc-blog .dgc-featured-card h2 {
    color: #163e2d;
}

#dgc-blog .dgc-featured-card h2 a:hover,
#dgc-blog .dgc-article-card h3 a:hover {
    color: #2b6749;
}

#dgc-blog .dgc-featured-card__excerpt,
#dgc-blog .dgc-meta {
    color: #71877b;
}

#dgc-blog .dgc-featured-read {
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, #163e2d, #2b6749);
    box-shadow: 0 12px 24px rgba(22,62,45,.16);
}

#dgc-blog .dgc-featured-read:hover {
    background: linear-gradient(135deg, #1d513a, #347755);
}


/* =========================================================
   LATEST — dark full section + light cards
========================================================= */

#dgc-blog .dgc-latest-section {
    color: #edf5f0;
}

#dgc-blog .dgc-latest-section .dgc-kicker {
    color: #ffe161;
}

#dgc-blog .dgc-latest-section .dgc-section-head h2 {
    color: #f3f8f5;
}

#dgc-blog .dgc-latest-section .dgc-more-button {
    color: #ffe161;
}

#dgc-blog .dgc-latest-section .dgc-more-button:hover {
    color: #fff0a5;
}

#dgc-blog .dgc-latest-layout {
    gap: 28px;
}

#dgc-blog .dgc-application-panel {
    overflow: hidden;
    padding: 20px 17px 18px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    background:
        radial-gradient(circle at 15% 14%, rgba(255,225,97,.08), transparent 30%),
        rgba(255,255,255,.035);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 18px 40px rgba(0,0,0,.14);
}

#dgc-blog .dgc-application-panel h2 {
    margin-bottom: 13px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: #f3f8f5;
}

#dgc-blog .dgc-application-item {
    min-height: 39px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #a7b9ae;
    background: transparent;
}

#dgc-blog .dgc-application-item:hover,
#dgc-blog .dgc-application-item.is-active {
    color: #fff7c8;
    border-color: rgba(255,225,97,.12);
    background: rgba(255,225,97,.065);
}

#dgc-blog .dgc-application-item.is-disabled:hover {
    color: #a7b9ae;
    background: transparent;
}

#dgc-blog .dgc-article-card {
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    background: linear-gradient(180deg, #fff, #f7faf7);
    box-shadow:
        0 16px 36px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.88);
}

#dgc-blog .dgc-article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 23px 45px rgba(0,0,0,.20);
}

#dgc-blog .dgc-article-card__image {
    background: #0b2f21;
}

#dgc-blog .dgc-reading-badge {
    color: #edf5f0;
    background: rgba(8,36,25,.88);
}

#dgc-blog .dgc-article-card__body {
    padding: 13px 14px 14px;
}

#dgc-blog .dgc-article-card h3 {
    color: #163e2d;
}

#dgc-blog .dgc-article-card__excerpt {
    color: #71877b;
}


/* =========================================================
   TRENDING — light section with dark cards
========================================================= */

#dgc-blog .dgc-trending-section {
    margin-top: 0;
    padding-inline: 0;
    border-radius: 0;
    background: transparent;
}

#dgc-blog .dgc-trending-section .dgc-section-head {
    margin-bottom: 22px;
}

#dgc-blog .dgc-trending-section .dgc-section-head h2 {
    color: #163e2d;
}

#dgc-blog button.dgc-circle-button {
    color: #315a46;
    border-color: rgba(22,62,45,.10);
    background: rgba(255,255,255,.94);
    box-shadow: 0 10px 24px rgba(31,52,40,.10);
}

#dgc-blog button.dgc-circle-button:hover {
    color: #163e2d;
    border-color: rgba(255,225,97,.70);
    background: #fff8d7;
}

#dgc-blog .dgc-popular-strip {
    gap: 14px;
    padding: 3px 2px 7px;
}

#dgc-blog .dgc-popular-card {
    flex-basis: 202px;
    height: 142px;
    border: 1px solid rgba(22,62,45,.08);
    border-radius: 17px;
    background: #123c2a;
    box-shadow: 0 16px 32px rgba(31,52,40,.14);
}

#dgc-blog .dgc-popular-card::after {
    background:
        linear-gradient(180deg, transparent 18%, rgba(8,36,25,.94));
}


/* =========================================================
   BOTTOM — dark full section / white glass utility cards
========================================================= */

#dgc-blog .dgc-bottom-layout {
    gap: 18px;
    align-items: stretch;
}

#dgc-blog .dgc-bottom-left {
    gap: 12px;
}

#dgc-blog .dgc-resource-panel,
#dgc-blog .dgc-tags-panel,
#dgc-blog .dgc-all-categories-panel {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    padding: 18px 19px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,250,247,.92));
    box-shadow:
        0 18px 42px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.92);
}

#dgc-blog .dgc-small-panel-head {
    margin-bottom: 12px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(22,62,45,.07);
}

#dgc-blog .dgc-resource-item {
    border: 1px solid transparent;
    border-radius: 12px;
    color: #315a46;
}

#dgc-blog .dgc-resource-item:hover {
    color: #163e2d;
    border-color: rgba(43,103,73,.10);
    background: rgba(43,103,73,.07);
}

#dgc-blog .dgc-tag-button {
    border: 1px solid rgba(43,103,73,.18);
    border-radius: 999px;
    color: #2b6749;
    background: #fff;
}

#dgc-blog .dgc-tag-button:hover,
#dgc-blog .dgc-tag-button.is-active {
    color: #163e2d;
    border-color: #ffe161;
    background: #ffe161;
}

#dgc-blog .dgc-tag-button.is-disabled:hover {
    color: #2b6749;
    border-color: rgba(43,103,73,.18);
    background: #fff;
}

#dgc-blog .dgc-all-category-button {
    color: #456555;
}

#dgc-blog .dgc-all-category-button:hover,
#dgc-blog .dgc-all-category-button.is-active {
    color: #163e2d;
}


/* =========================================================
   NEWSLETTER
========================================================= */

#dgc-blog .dgc-newsletter {
    min-height: 100%;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 28px;
    background-image:
        var(--dgc-newsletter-image),
        radial-gradient(circle at 18% 18%, rgba(255,225,97,.10), transparent 26%),
        linear-gradient(135deg, #0b2f21, #164b35 58%, #09271b);
    background-color: #082419;
    box-shadow:
        0 20px 48px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.04);
}

#dgc-blog .dgc-newsletter::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
    background-size: 55px 55px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 82%);
    mask-image: radial-gradient(ellipse at center, #000 10%, transparent 82%);
}

#dgc-blog .dgc-newsletter__overlay {
    background:
        linear-gradient(90deg, rgba(8,36,25,.95), rgba(8,36,25,.78)),
        radial-gradient(circle at 82% 18%, rgba(255,225,97,.14), transparent 35%);
}

#dgc-blog .dgc-newsletter__content > span {
    color: #ffe161;
}

#dgc-blog .dgc-newsletter h2 {
    color: #fff;
}

#dgc-blog .dgc-newsletter p {
    color: rgba(237,245,240,.80);
}

#dgc-blog .dgc-newsletter__form {
    padding: 5px;
    gap: 5px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

#dgc-blog .dgc-newsletter__form input {
    color: #163e2d;
    background: transparent;
}

#dgc-blog .dgc-newsletter__form button {
    border-radius: 8px;
    color: #163e2d;
    background: #ffe161;
}

#dgc-blog .dgc-newsletter__form button:hover {
    background: #ffea82;
}

#dgc-blog .dgc-newsletter__message.is-success {
    color: #bce7c7;
}

#dgc-blog .dgc-newsletter__message.is-error {
    color: #ffd6a1;
}


/* =========================================================
   STATES
========================================================= */

#dgc-blog .dgc-empty {
    border-color: rgba(43,103,73,.20);
    border-radius: 18px;
    background: rgba(255,255,255,.80);
}

#dgc-blog .dgc-empty svg {
    color: #668577;
}

#dgc-blog .dgc-empty button {
    border-color: rgba(43,103,73,.18);
    border-radius: 10px;
    color: #2b6749;
}

#dgc-blog .dgc-global-message {
    border-color: rgba(177,119,57,.22);
    border-radius: 12px;
    color: #8e5a2d;
    background: #fff8e8;
}


/* =========================================================
   RESPONSIVE VISUAL ADJUSTMENTS
========================================================= */

@media (max-width: 1100px) {
    #dgc-blog .dgc-section {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

@media (max-width: 850px) {
    #dgc-blog .dgc-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    #dgc-blog .dgc-application-panel {
        border-radius: 20px;
    }

    #dgc-blog .dgc-newsletter {
        border-radius: 24px;
    }
}

@media (max-width: 640px) {
    #dgc-blog .dgc-section {
        padding-top: 38px;
        padding-bottom: 38px;
    }

    #dgc-blog .dgc-featured-card {
        border-radius: 22px;
    }

    #dgc-blog .dgc-featured-card__content {
        padding: 24px 18px 27px;
    }

    #dgc-blog .dgc-application-panel {
        padding: 16px 14px;
        border-radius: 18px;
    }

    #dgc-blog .dgc-article-card {
        border-radius: 17px;
    }

    #dgc-blog .dgc-popular-card {
        border-radius: 15px;
    }

    #dgc-blog .dgc-resource-panel,
    #dgc-blog .dgc-tags-panel,
    #dgc-blog .dgc-all-categories-panel {
        padding: 15px;
        border-radius: 18px;
    }

    #dgc-blog .dgc-newsletter {
        border-radius: 20px;
    }

    #dgc-blog .dgc-newsletter__form {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    #dgc-blog .dgc-newsletter__form input {
        background: #fff;
    }
}

/* =========================================================
   END — RANG SAREH BLOG FINAL VISUAL THEME V3
========================================================= */


/* =========================================================
   RANG SAREH BLOG — V4
   Hero-to-content transition refinements
   Structure / PHP / JS untouched
========================================================= */

/* ---------------------------------------------------------
   FIRST SECTION UNDER HERO:
   dark green continuation instead of sudden light surface
--------------------------------------------------------- */

#dgc-blog .dgc-featured-section {
    color: #edf5f0;
}

#dgc-blog .dgc-featured-section::before {
    background:
        radial-gradient(circle at 12% 18%, rgba(255,225,97,.085), transparent 24%),
        radial-gradient(circle at 88% 76%, rgba(78,131,190,.055), transparent 27%),
        linear-gradient(125deg, #082419 0%, #123c2a 50%, #09271b 100%);
}

#dgc-blog .dgc-featured-section::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: -1;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 8%, transparent 84%);
    mask-image: radial-gradient(ellipse at center, #000 8%, transparent 84%);
}

#dgc-blog .dgc-featured-section .dgc-kicker {
    color: #ffe161;
}

#dgc-blog .dgc-featured-section .dgc-section-head h2 {
    color: #f3f8f5;
}

#dgc-blog .dgc-featured-section .dgc-section-head p {
    color: rgba(231,241,235,.72);
}

/* featured article becomes a dark/glass split panel */
#dgc-blog .dgc-featured-card {
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 30px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.022)
        );
    box-shadow:
        0 26px 65px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.045);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

#dgc-blog .dgc-featured-card__image {
    background: #071f16;
}

#dgc-blog .dgc-featured-card__image::after {
    background:
        linear-gradient(90deg, rgba(8,36,25,.05), rgba(8,36,25,.30));
}

#dgc-blog .dgc-featured-card__content {
    position: relative;
    background:
        radial-gradient(circle at 84% 16%, rgba(255,225,97,.065), transparent 30%),
        linear-gradient(
            145deg,
            rgba(15,56,39,.92),
            rgba(7,34,24,.88)
        );
}

#dgc-blog .dgc-featured-card__content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.017) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.017) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
    mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
}

#dgc-blog .dgc-featured-card__content::after {
    opacity: .12;
    background-image: var(--dgc-featured-content-image);
}

#dgc-blog .dgc-featured-card__content > * {
    position: relative;
    z-index: 2;
}

#dgc-blog .dgc-featured-badge {
    color: #163e2d;
    background: #ffe161;
    box-shadow: 0 8px 20px rgba(0,0,0,.10);
}

#dgc-blog .dgc-featured-card h2,
#dgc-blog .dgc-featured-card h2 a {
    color: #f5faf7;
}

#dgc-blog .dgc-featured-card h2 a:hover {
    color: #ffe161;
}

#dgc-blog .dgc-featured-card__excerpt {
    color: rgba(222,236,227,.76);
}

#dgc-blog .dgc-featured-card .dgc-meta {
    color: rgba(194,216,203,.68);
}

#dgc-blog .dgc-featured-read {
    color: #163e2d;
    background: #ffe161;
    box-shadow: 0 12px 24px rgba(0,0,0,.13);
}

#dgc-blog .dgc-featured-read:hover {
    color: #163e2d;
    background: #ffea82;
}


/* ---------------------------------------------------------
   CATEGORY CARDS:
   blend into hero / first dark section
--------------------------------------------------------- */

#dgc-blog .dgc-category-overlap {
    position: relative;
    z-index: 8;
}

#dgc-blog .dgc-category-overlap::before {
    content: "";
    position: absolute;
    top: 54px;
    bottom: 0;
    left: 50%;
    z-index: -1;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(8,36,25,0) 0%,
            rgba(8,36,25,.62) 58%,
            #082419 100%
        );
}

#dgc-blog .dgc-category-card {
    border-color: rgba(255,255,255,.10);
    background: #0d3324;
    box-shadow:
        0 18px 38px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.045);
}


/* ---------------------------------------------------------
   ALTERNATING RHYTHM AFTER FEATURED
   DARK → LIGHT → DARK → LIGHT
--------------------------------------------------------- */

/* latest becomes light */
#dgc-blog .dgc-latest-section {
    color: #163e2d;
}

#dgc-blog .dgc-latest-section::before {
    background:
        radial-gradient(circle at 9% 18%, rgba(255,225,97,.12), transparent 24%),
        radial-gradient(circle at 91% 80%, rgba(43,103,73,.07), transparent 26%),
        linear-gradient(180deg, #f6f8f4 0%, #edf2ed 100%);
}

#dgc-blog .dgc-latest-section::after {
    background-image:
        linear-gradient(rgba(22,62,45,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22,62,45,.018) 1px, transparent 1px);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 8%, transparent 84%);
    mask-image: radial-gradient(ellipse at center, #000 8%, transparent 84%);
}

#dgc-blog .dgc-latest-section .dgc-kicker {
    color: #2b6749;
}

#dgc-blog .dgc-latest-section .dgc-section-head h2 {
    color: #163e2d;
}

#dgc-blog .dgc-latest-section .dgc-more-button {
    color: #2b6749;
}

#dgc-blog .dgc-latest-section .dgc-more-button:hover {
    color: #163e2d;
}

/* application panel stays dark as a designed contrast card */
#dgc-blog .dgc-latest-section .dgc-application-panel {
    background:
        radial-gradient(circle at 16% 14%, rgba(255,225,97,.08), transparent 30%),
        linear-gradient(140deg, #082419 0%, #113a29 55%, #09271b 100%);
    border-color: rgba(255,255,255,.08);
    box-shadow:
        0 18px 42px rgba(31,52,40,.16),
        inset 0 1px 0 rgba(255,255,255,.04);
}

#dgc-blog .dgc-latest-section .dgc-application-panel h2 {
    color: #f3f8f5;
}

#dgc-blog .dgc-latest-section .dgc-application-item {
    color: #a7b9ae;
}

#dgc-blog .dgc-latest-section .dgc-application-item:hover,
#dgc-blog .dgc-latest-section .dgc-application-item.is-active {
    color: #fff7c8;
    background: rgba(255,225,97,.065);
}


/* trending becomes dark */
#dgc-blog .dgc-trending-section {
    color: #edf5f0;
}

#dgc-blog .dgc-trending-section::before {
    background:
        radial-gradient(circle at 11% 19%, rgba(255,225,97,.075), transparent 24%),
        radial-gradient(circle at 89% 79%, rgba(78,131,190,.05), transparent 27%),
        linear-gradient(125deg, #082419 0%, #123c2a 50%, #09271b 100%);
}

#dgc-blog .dgc-trending-section::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: -1;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 8%, transparent 84%);
    mask-image: radial-gradient(ellipse at center, #000 8%, transparent 84%);
}

#dgc-blog .dgc-trending-section .dgc-kicker {
    color: #ffe161;
}

#dgc-blog .dgc-trending-section .dgc-section-head h2 {
    color: #f3f8f5;
}

#dgc-blog .dgc-trending-section button.dgc-circle-button {
    color: #b8c9bf;
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.045);
}

#dgc-blog .dgc-trending-section button.dgc-circle-button:hover {
    color: #163e2d;
    border-color: rgba(255,225,97,.22);
    background: #ffe161;
}


/* bottom becomes light */
#dgc-blog .dgc-bottom-layout::before {
    background:
        radial-gradient(circle at 12% 18%, rgba(255,225,97,.12), transparent 24%),
        radial-gradient(circle at 89% 80%, rgba(43,103,73,.065), transparent 27%),
        linear-gradient(180deg, #f5f0e2 0%, #ede8d8 100%);
}

#dgc-blog .dgc-bottom-layout::after {
    background-image:
        linear-gradient(rgba(22,62,45,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22,62,45,.018) 1px, transparent 1px);
}

#dgc-blog .dgc-resource-panel,
#dgc-blog .dgc-tags-panel,
#dgc-blog .dgc-all-categories-panel {
    border-color: rgba(22,62,45,.09);
    background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,246,.90));
    box-shadow:
        0 18px 42px rgba(55,63,46,.11),
        inset 0 1px 0 rgba(255,255,255,.90);
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 640px) {
    #dgc-blog .dgc-category-overlap::before {
        top: 38px;
    }

    #dgc-blog .dgc-featured-card {
        border-radius: 22px;
    }

    #dgc-blog .dgc-featured-card__content {
        padding: 24px 18px 27px;
    }
}

/* =========================================================
   END — RANG SAREH BLOG V4
========================================================= */


/* =========================================================
   RANG SAREH BLOG — V5
   Merge the first two content sections into one dark-green flow
   Structure / PHP / JS untouched
========================================================= */

/* Featured section under hero */
#dgc-blog .dgc-featured-section::before {
    background:
        radial-gradient(circle at 12% 18%, rgba(255,225,97,.085), transparent 24%),
        radial-gradient(circle at 88% 76%, rgba(78,131,190,.055), transparent 27%),
        linear-gradient(125deg, #082419 0%, #123c2a 50%, #09271b 100%);
}

/* Latest section directly below it — same exact green family */
#dgc-blog .dgc-latest-section::before {
    background:
        radial-gradient(circle at 12% 18%, rgba(255,225,97,.075), transparent 24%),
        radial-gradient(circle at 88% 76%, rgba(78,131,190,.05), transparent 27%),
        linear-gradient(125deg, #082419 0%, #123c2a 50%, #09271b 100%);
}

/* Same subtle grid on both */
#dgc-blog .dgc-featured-section::after,
#dgc-blog .dgc-latest-section::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: -1;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 8%, transparent 84%);
    mask-image: radial-gradient(ellipse at center, #000 8%, transparent 84%);
}

/* Remove visible seam between the two green sections */
#dgc-blog .dgc-featured-section {
    padding-bottom: 48px;
}

#dgc-blog .dgc-latest-section {
    padding-top: 48px;
    color: #edf5f0;
}

#dgc-blog .dgc-featured-section + .dgc-latest-section {
    border-top: 1px solid rgba(255,255,255,.035);
}

/* Headings and controls in second green section */
#dgc-blog .dgc-latest-section .dgc-kicker {
    color: #ffe161;
}

#dgc-blog .dgc-latest-section .dgc-section-head h2 {
    color: #f3f8f5;
}

#dgc-blog .dgc-latest-section .dgc-more-button {
    color: #ffe161;
}

#dgc-blog .dgc-latest-section .dgc-more-button:hover {
    color: #fff0a5;
}

/* Application panel stays integrated with green section */
#dgc-blog .dgc-latest-section .dgc-application-panel {
    border: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 16% 14%, rgba(255,225,97,.08), transparent 30%),
        rgba(255,255,255,.035);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 18px 40px rgba(0,0,0,.14);
}

#dgc-blog .dgc-latest-section .dgc-application-panel h2 {
    color: #f3f8f5;
}

#dgc-blog .dgc-latest-section .dgc-application-item {
    color: #a7b9ae;
}

#dgc-blog .dgc-latest-section .dgc-application-item:hover,
#dgc-blog .dgc-latest-section .dgc-application-item.is-active {
    color: #fff7c8;
    border-color: rgba(255,225,97,.12);
    background: rgba(255,225,97,.065);
}

/* Article cards remain light for readable contrast on green */
#dgc-blog .dgc-latest-section .dgc-article-card {
    border-color: rgba(255,255,255,.08);
    background: linear-gradient(180deg, #ffffff, #f7faf7);
    box-shadow:
        0 16px 36px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.90);
}

/* Keep the next section light so the green block ends clearly */
#dgc-blog .dgc-trending-section::before {
    background:
        radial-gradient(circle at 88% 15%, rgba(255,225,97,.12), transparent 23%),
        radial-gradient(circle at 11% 79%, rgba(43,103,73,.06), transparent 26%),
        linear-gradient(180deg, #f6f8f4 0%, #edf2ed 100%);
}

#dgc-blog .dgc-trending-section {
    color: #163e2d;
}

#dgc-blog .dgc-trending-section::after {
    background-image:
        linear-gradient(rgba(22,62,45,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22,62,45,.018) 1px, transparent 1px);
}

#dgc-blog .dgc-trending-section .dgc-kicker {
    color: #2b6749;
}

#dgc-blog .dgc-trending-section .dgc-section-head h2 {
    color: #163e2d;
}

#dgc-blog .dgc-trending-section button.dgc-circle-button {
    color: #315a46;
    border-color: rgba(22,62,45,.10);
    background: rgba(255,255,255,.94);
}

#dgc-blog .dgc-trending-section button.dgc-circle-button:hover {
    color: #163e2d;
    border-color: rgba(255,225,97,.70);
    background: #fff8d7;
}

/* =========================================================
   END — RANG SAREH BLOG V5
========================================================= */


/* =========================================================
   RANG SAREH BLOG — V6
   Fix 1: remove seam between the two green sections
   Fix 2: make the entire area directly below hero green
   Structure / PHP / JS untouched
========================================================= */

/* ---------------------------------------------------------
   REMOVE THE WHITE / LIGHT SEAM BETWEEN GREEN SECTIONS
--------------------------------------------------------- */

#dgc-blog .dgc-featured-section + .dgc-latest-section {
    border-top: 0;
}

#dgc-blog .dgc-featured-section,
#dgc-blog .dgc-latest-section {
    border-top: 0;
    border-bottom: 0;
}

/* ensure no 1px gap is exposed by sub-pixel rendering */
#dgc-blog .dgc-featured-section {
    margin-bottom: -1px;
}

#dgc-blog .dgc-latest-section {
    margin-top: 0;
}


/* ---------------------------------------------------------
   ENTIRE AREA DIRECTLY BELOW HERO = DARK GREEN
--------------------------------------------------------- */

/* the category-overlap zone now has a full-width green base */
#dgc-blog .dgc-category-overlap {
    position: relative;
    z-index: 8;
    background: transparent;
}

/* full green bridge from hero into the first content section */
#dgc-blog .dgc-category-overlap::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: -2px;
    left: 50%;
    z-index: -2;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(255,225,97,.075), transparent 24%),
        radial-gradient(circle at 88% 76%, rgba(78,131,190,.05), transparent 27%),
        linear-gradient(125deg, #082419 0%, #123c2a 50%, #09271b 100%);
}

/* same subtle grid so it feels like one continuous section */
#dgc-blog .dgc-category-overlap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: -2px;
    left: 50%;
    z-index: -1;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 8%, transparent 84%);
    mask-image: radial-gradient(ellipse at center, #000 8%, transparent 84%);
}

/* remove any light page background showing between hero and first section */
#dgc-blog .dgc-main {
    background: #082419;
}

/* first two sections form one continuous green block */
#dgc-blog .dgc-featured-section::before,
#dgc-blog .dgc-latest-section::before {
    background:
        radial-gradient(circle at 12% 18%, rgba(255,225,97,.075), transparent 24%),
        radial-gradient(circle at 88% 76%, rgba(78,131,190,.05), transparent 27%),
        linear-gradient(125deg, #082419 0%, #123c2a 50%, #09271b 100%);
}

/* protect the next light section so the alternation still begins cleanly */
#dgc-blog .dgc-trending-section::before {
    background:
        radial-gradient(circle at 88% 15%, rgba(255,225,97,.12), transparent 23%),
        radial-gradient(circle at 11% 79%, rgba(43,103,73,.06), transparent 26%),
        linear-gradient(180deg, #f6f8f4 0%, #edf2ed 100%);
}

/* mobile: no light strip under hero either */
@media (max-width: 640px) {
    #dgc-blog .dgc-category-overlap::before,
    #dgc-blog .dgc-category-overlap::after {
        top: 0;
        bottom: -2px;
    }

    #dgc-blog .dgc-featured-section {
        margin-bottom: -1px;
    }
}

/* =========================================================
   END — RANG SAREH BLOG V6
========================================================= */


/* =========================================================
   RANG SAREH BLOG — V7
   Seamless unified green canvas under Hero
   Structure / PHP / JS untouched
========================================================= */

/* ---------------------------------------------------------
   ONE CONTINUOUS GREEN CANVAS
   The first content area is now painted once on .dgc-main,
   instead of restarting a separate gradient in each section.
--------------------------------------------------------- */

#dgc-blog .dgc-main {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 13% 12%, rgba(255,225,97,.065), transparent 25%),
        radial-gradient(circle at 88% 43%, rgba(78,131,190,.040), transparent 29%),
        linear-gradient(125deg, #082419 0%, #103827 48%, #09271b 100%);
}

/* continuous subtle texture over the whole green canvas */
#dgc-blog .dgc-main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.021) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.021) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.96) 0%,
            rgba(0,0,0,.92) 45%,
            rgba(0,0,0,.35) 68%,
            transparent 79%
        );
    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.96) 0%,
            rgba(0,0,0,.92) 45%,
            rgba(0,0,0,.35) 68%,
            transparent 79%
        );
}

/* ---------------------------------------------------------
   BRIDGE DIRECTLY UNDER HERO
--------------------------------------------------------- */

#dgc-blog .dgc-category-overlap::before {
    top: 0;
    bottom: -3px;
    background:
        linear-gradient(
            180deg,
            #082419 0%,
            #0b2e20 58%,
            #0d3324 100%
        );
}

#dgc-blog .dgc-category-overlap::after {
    opacity: .72;
}

/* ---------------------------------------------------------
   FEATURED + LATEST:
   no separate gradient = no visual mismatch
--------------------------------------------------------- */

#dgc-blog .dgc-featured-section::before,
#dgc-blog .dgc-latest-section::before {
    background: transparent;
}

#dgc-blog .dgc-featured-section::after,
#dgc-blog .dgc-latest-section::after {
    content: none;
}

/* remove any seam, border or exposed pixel between the two */
#dgc-blog .dgc-featured-section,
#dgc-blog .dgc-latest-section,
#dgc-blog .dgc-featured-section + .dgc-latest-section {
    border-top: 0;
    border-bottom: 0;
    box-shadow: none;
}

#dgc-blog .dgc-featured-section {
    margin-bottom: 0;
    padding-bottom: 54px;
}

#dgc-blog .dgc-latest-section {
    margin-top: -1px;
    padding-top: 54px;
}

/* very subtle divider glow only, not a visible line */
#dgc-blog .dgc-latest-section .dgc-section-head {
    position: relative;
}

#dgc-blog .dgc-latest-section .dgc-section-head::before {
    content: "";
    position: absolute;
    top: -34px;
    left: 50%;
    width: min(820px, 78vw);
    height: 1px;
    transform: translateX(-50%);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,225,97,.045),
            rgba(255,255,255,.035),
            rgba(255,225,97,.045),
            transparent
        );
    pointer-events: none;
}

/* ---------------------------------------------------------
   KEEP THE FIRST TWO SECTIONS IN THE SAME COLOR LANGUAGE
--------------------------------------------------------- */

#dgc-blog .dgc-featured-section,
#dgc-blog .dgc-latest-section {
    color: #edf5f0;
}

#dgc-blog .dgc-featured-section .dgc-kicker,
#dgc-blog .dgc-latest-section .dgc-kicker {
    color: #ffe161;
}

#dgc-blog .dgc-featured-section .dgc-section-head h2,
#dgc-blog .dgc-latest-section .dgc-section-head h2 {
    color: #f3f8f5;
}

/* slightly harmonize internal dark panels with the canvas */
#dgc-blog .dgc-featured-card,
#dgc-blog .dgc-latest-section .dgc-application-panel {
    border-color: rgba(255,255,255,.085);
}

#dgc-blog .dgc-featured-card__content,
#dgc-blog .dgc-latest-section .dgc-application-panel {
    background:
        radial-gradient(circle at 82% 14%, rgba(255,225,97,.050), transparent 30%),
        linear-gradient(
            145deg,
            rgba(17,58,41,.92),
            rgba(8,37,26,.90)
        );
}

/* article cards stay light for contrast */
#dgc-blog .dgc-latest-section .dgc-article-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,.985), rgba(247,250,247,.97));
}

/* ---------------------------------------------------------
   NEXT SECTION STAYS LIGHT
--------------------------------------------------------- */

#dgc-blog .dgc-trending-section::before {
    background:
        radial-gradient(circle at 88% 15%, rgba(255,225,97,.12), transparent 23%),
        radial-gradient(circle at 11% 79%, rgba(43,103,73,.06), transparent 26%),
        linear-gradient(180deg, #f6f8f4 0%, #edf2ed 100%);
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 640px) {
    #dgc-blog .dgc-featured-section {
        padding-bottom: 42px;
    }

    #dgc-blog .dgc-latest-section {
        margin-top: -1px;
        padding-top: 42px;
    }

    #dgc-blog .dgc-latest-section .dgc-section-head::before {
        top: -27px;
        width: 82vw;
    }
}

/* =========================================================
   END — RANG SAREH BLOG V7
========================================================= */


/* =========================================================
   RANG SAREH BLOG — V8 ALL GREEN
   Entire page uses one continuous green visual canvas
   Structure / PHP / JS untouched
========================================================= */

/* ---------------------------------------------------------
   GLOBAL PAGE CANVAS
--------------------------------------------------------- */

#dgc-blog {
    background:
        radial-gradient(circle at 10% 12%, rgba(255,225,97,.065), transparent 24%),
        radial-gradient(circle at 88% 42%, rgba(78,131,190,.040), transparent 28%),
        radial-gradient(circle at 18% 78%, rgba(255,225,97,.035), transparent 23%),
        linear-gradient(125deg, #082419 0%, #103827 48%, #09271b 100%);
    color: #edf5f0;
}

#dgc-blog::before {
    z-index: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.020) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.020) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 8%, transparent 88%);
    mask-image: radial-gradient(ellipse at center, #000 8%, transparent 88%);
}

#dgc-blog .dgc-main {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 13% 10%, rgba(255,225,97,.055), transparent 25%),
        radial-gradient(circle at 87% 40%, rgba(78,131,190,.035), transparent 29%),
        radial-gradient(circle at 20% 82%, rgba(255,225,97,.025), transparent 22%),
        linear-gradient(125deg, #082419 0%, #103827 48%, #09271b 100%);
}

#dgc-blog .dgc-main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.020) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.020) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.98) 0%,
            rgba(0,0,0,.92) 82%,
            rgba(0,0,0,.55) 100%
        );
    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.98) 0%,
            rgba(0,0,0,.92) 82%,
            rgba(0,0,0,.55) 100%
        );
}

/* ---------------------------------------------------------
   HERO / CATEGORY BRIDGE
--------------------------------------------------------- */

#dgc-blog .dgc-hero {
    background-image:
        linear-gradient(90deg, rgba(8,36,25,.48), rgba(8,36,25,.68) 48%, rgba(8,36,25,.90)),
        var(--dgc-hero-image),
        linear-gradient(125deg, #082419 0%, #103827 48%, #09271b 100%);
}

#dgc-blog .dgc-category-overlap::before {
    background:
        linear-gradient(
            180deg,
            rgba(8,36,25,.98) 0%,
            #0b2e20 55%,
            #0d3324 100%
        );
}

/* ---------------------------------------------------------
   ALL SECTIONS = TRANSPARENT ON SAME GREEN CANVAS
--------------------------------------------------------- */

#dgc-blog .dgc-featured-section::before,
#dgc-blog .dgc-latest-section::before,
#dgc-blog .dgc-trending-section::before,
#dgc-blog .dgc-bottom-layout::before {
    background: transparent;
}

#dgc-blog .dgc-featured-section::after,
#dgc-blog .dgc-latest-section::after,
#dgc-blog .dgc-trending-section::after,
#dgc-blog .dgc-bottom-layout::after {
    content: none;
}

#dgc-blog .dgc-featured-section,
#dgc-blog .dgc-latest-section,
#dgc-blog .dgc-trending-section,
#dgc-blog .dgc-bottom-layout {
    color: #edf5f0;
    border: 0;
    box-shadow: none;
}

/* no visible band/seam between sections */
#dgc-blog .dgc-featured-section,
#dgc-blog .dgc-latest-section,
#dgc-blog .dgc-trending-section {
    margin-top: 0;
    margin-bottom: 0;
}

/* ---------------------------------------------------------
   HEADINGS / LABELS
--------------------------------------------------------- */

#dgc-blog .dgc-featured-section .dgc-kicker,
#dgc-blog .dgc-latest-section .dgc-kicker,
#dgc-blog .dgc-trending-section .dgc-kicker {
    color: #ffe161;
}

#dgc-blog .dgc-featured-section .dgc-section-head h2,
#dgc-blog .dgc-latest-section .dgc-section-head h2,
#dgc-blog .dgc-trending-section .dgc-section-head h2 {
    color: #f3f8f5;
}

#dgc-blog .dgc-featured-section .dgc-section-head p,
#dgc-blog .dgc-latest-section .dgc-section-head p,
#dgc-blog .dgc-trending-section .dgc-section-head p {
    color: rgba(226,238,230,.72);
}

#dgc-blog .dgc-more-button,
#dgc-blog .dgc-latest-section .dgc-more-button {
    color: #ffe161;
}

#dgc-blog .dgc-more-button:hover,
#dgc-blog .dgc-latest-section .dgc-more-button:hover {
    color: #fff0a5;
}

/* ---------------------------------------------------------
   FEATURED / APPLICATION PANELS = DARK GLASS
--------------------------------------------------------- */

#dgc-blog .dgc-featured-card,
#dgc-blog .dgc-application-panel {
    border: 1px solid rgba(255,255,255,.085);
    background:
        radial-gradient(circle at 82% 14%, rgba(255,225,97,.050), transparent 30%),
        linear-gradient(
            145deg,
            rgba(17,58,41,.92),
            rgba(8,37,26,.90)
        );
    box-shadow:
        0 20px 48px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.04);
}

#dgc-blog .dgc-application-panel h2 {
    color: #f3f8f5;
}

#dgc-blog .dgc-application-item {
    color: #a7b9ae;
}

#dgc-blog .dgc-application-item:hover,
#dgc-blog .dgc-application-item.is-active {
    color: #fff7c8;
    border-color: rgba(255,225,97,.12);
    background: rgba(255,225,97,.065);
}

/* ---------------------------------------------------------
   ARTICLE / POPULAR CARDS
   Light cards remain only as content surfaces, not section backgrounds
--------------------------------------------------------- */

#dgc-blog .dgc-article-card {
    border-color: rgba(255,255,255,.08);
    background:
        linear-gradient(180deg, rgba(255,255,255,.985), rgba(247,250,247,.97));
    box-shadow:
        0 16px 36px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.90);
}

#dgc-blog .dgc-popular-card {
    border-color: rgba(255,255,255,.08);
    background: #0b2f21;
    box-shadow: 0 16px 34px rgba(0,0,0,.15);
}

/* ---------------------------------------------------------
   BOTTOM UTILITY PANELS = GLASS GREEN
--------------------------------------------------------- */

#dgc-blog .dgc-resource-panel,
#dgc-blog .dgc-tags-panel,
#dgc-blog .dgc-all-categories-panel {
    border: 1px solid rgba(255,255,255,.08);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.028)
        );
    box-shadow:
        0 18px 42px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.035);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}

#dgc-blog .dgc-small-panel-head {
    border-bottom-color: rgba(255,255,255,.07);
}

#dgc-blog .dgc-small-panel-head h2 {
    color: #f3f8f5;
}

#dgc-blog .dgc-resource-item {
    color: #b8c9bf;
}

#dgc-blog .dgc-resource-item:hover {
    color: #fff5bd;
    border-color: rgba(255,225,97,.10);
    background: rgba(255,225,97,.055);
}

#dgc-blog .dgc-tag-button {
    color: #d8e5dc;
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.045);
}

#dgc-blog .dgc-tag-button:hover,
#dgc-blog .dgc-tag-button.is-active {
    color: #163e2d;
    border-color: #ffe161;
    background: #ffe161;
}

#dgc-blog .dgc-all-category-button {
    color: #b8c9bf;
}

#dgc-blog .dgc-all-category-button:hover,
#dgc-blog .dgc-all-category-button.is-active {
    color: #ffe161;
}

/* ---------------------------------------------------------
   NAV BUTTONS ON GREEN
--------------------------------------------------------- */

#dgc-blog button.dgc-circle-button {
    color: #b8c9bf;
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.045);
}

#dgc-blog button.dgc-circle-button:hover {
    color: #163e2d;
    border-color: rgba(255,225,97,.22);
    background: #ffe161;
}

/* ---------------------------------------------------------
   NEWSLETTER = SAME FAMILY, SLIGHTLY DEEPER
--------------------------------------------------------- */

#dgc-blog .dgc-newsletter {
    border-color: rgba(255,255,255,.09);
    background-image:
        var(--dgc-newsletter-image),
        radial-gradient(circle at 18% 18%, rgba(255,225,97,.09), transparent 26%),
        linear-gradient(135deg, #071f16, #103827 58%, #082419);
    background-color: #082419;
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 640px) {
    #dgc-blog .dgc-main {
        background:
            radial-gradient(circle at 16% 12%, rgba(255,225,97,.050), transparent 26%),
            linear-gradient(125deg, #082419 0%, #103827 48%, #09271b 100%);
    }
}

/* =========================================================
   END — RANG SAREH BLOG V8 ALL GREEN
========================================================= */


/* =========================================================
   RANG SAREH BLOG — V9
   Fix category background + active filter panel
   One continuous green canvas
   Structure / PHP / JS untouched
========================================================= */

/* ---------------------------------------------------------
   TRUE CONTINUOUS BACKGROUND
   Remove the separate paint layer under category cards and main.
--------------------------------------------------------- */

#dgc-blog {
    background:
        radial-gradient(circle at 11% 20%, rgba(255,225,97,.055), transparent 25%),
        radial-gradient(circle at 88% 54%, rgba(78,131,190,.035), transparent 30%),
        radial-gradient(circle at 18% 82%, rgba(255,225,97,.025), transparent 24%),
        linear-gradient(125deg, #082419 0%, #103827 48%, #09271b 100%);
}

#dgc-blog .dgc-main {
    background: transparent;
}

/* Remove the restarted background/texture from main */
#dgc-blog .dgc-main::before {
    content: none;
}

/* Category area now simply reveals the same page canvas */
#dgc-blog .dgc-category-overlap {
    background: transparent;
}

#dgc-blog .dgc-category-overlap::before,
#dgc-blog .dgc-category-overlap::after {
    content: none;
}

/* first sections also stay transparent over the same canvas */
#dgc-blog .dgc-featured-section::before,
#dgc-blog .dgc-featured-section::after,
#dgc-blog .dgc-latest-section::before,
#dgc-blog .dgc-latest-section::after,
#dgc-blog .dgc-trending-section::before,
#dgc-blog .dgc-trending-section::after,
#dgc-blog .dgc-bottom-layout::before,
#dgc-blog .dgc-bottom-layout::after {
    content: none;
    background: transparent;
}

/* one subtle texture for the whole page instead of per-section textures */
#dgc-blog::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.84) 13%,
            rgba(0,0,0,.84) 90%,
            transparent 100%
        );
    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.84) 13%,
            rgba(0,0,0,.84) 90%,
            transparent 100%
        );
}

/* keep page content above the shared texture */
#dgc-blog > * {
    position: relative;
    z-index: 1;
}


/* ---------------------------------------------------------
   CATEGORY STRIP — integrated with page
--------------------------------------------------------- */

#dgc-blog .dgc-category-strip {
    padding-bottom: 26px;
}

#dgc-blog .dgc-category-card {
    border-color: rgba(255,255,255,.10);
    background: rgba(9,43,30,.82);
    box-shadow:
        0 18px 38px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.045);
}

#dgc-blog .dgc-category-card:hover {
    border-color: rgba(255,225,97,.30);
    box-shadow:
        0 23px 46px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.055);
}

#dgc-blog .dgc-category-card.is-active {
    border-color: #ffe161;
    box-shadow:
        0 0 0 3px rgba(255,225,97,.12),
        0 23px 46px rgba(0,0,0,.20);
}

/* arrows also become dark glass, removing isolated white circles */
#dgc-blog .dgc-round-nav {
    color: #ffe161;
    border-color: rgba(255,255,255,.10);
    background:
        linear-gradient(
            145deg,
            rgba(18,61,43,.92),
            rgba(8,38,27,.90)
        );
    box-shadow:
        0 12px 28px rgba(0,0,0,.17),
        inset 0 1px 0 rgba(255,255,255,.045);
}

#dgc-blog .dgc-round-nav:hover {
    color: #163e2d;
    border-color: rgba(255,225,97,.32);
    background: #ffe161;
}


/* ---------------------------------------------------------
   ACTIVE FILTER — remove white panel
--------------------------------------------------------- */

#dgc-blog .dgc-active-filter {
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin: 20px 0 6px;
    padding: 12px 14px;

    border: 1px solid rgba(255,255,255,.085);
    border-radius: 14px;

    color: #eaf3ed;

    background:
        radial-gradient(circle at 88% 18%, rgba(255,225,97,.055), transparent 34%),
        linear-gradient(
            145deg,
            rgba(18,61,43,.88),
            rgba(8,38,27,.88)
        );

    box-shadow:
        0 14px 32px rgba(0,0,0,.13),
        inset 0 1px 0 rgba(255,255,255,.045);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

#dgc-blog .dgc-active-filter span {
    color: #eaf3ed;
    font-weight: 700;
}

#dgc-blog .dgc-active-filter button {
    min-height: 34px;
    padding: 6px 12px;

    border: 1px solid rgba(255,225,97,.28);
    border-radius: 9px;

    color: #163e2d;
    background: #ffe161;

    font-weight: 800;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35);

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

#dgc-blog .dgc-active-filter button:hover {
    transform: translateY(-1px);
    border-color: #ffea82;
    background: #ffea82;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 640px) {
    #dgc-blog .dgc-active-filter {
        align-items: stretch;
        gap: 10px;
        margin-top: 16px;
        padding: 12px;
        border-radius: 12px;
    }

    #dgc-blog .dgc-active-filter button {
        width: 100%;
    }
}

/* =========================================================
   END — RANG SAREH BLOG V9
========================================================= */


/* =========================================================
   RANG SAREH BLOG — V10
   Premium Hero Search + Category Select
   CSS only — structure / PHP / JS untouched
========================================================= */

/* ---------------------------------------------------------
   SEARCH SHELL
--------------------------------------------------------- */

#dgc-blog .dgc-search {
    position: relative;
    width: min(860px, 100%);
    display: grid;
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(215px, .76fr)
        128px;
    align-items: stretch;
    gap: 9px;

    direction: ltr;

    margin-top: 28px;
    padding: 8px;

    border: 1px solid rgba(255,255,255,.11);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(255,225,97,.055),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(20,64,45,.78),
            rgba(7,35,24,.74)
        );

    box-shadow:
        0 24px 55px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.055);

    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

#dgc-blog .dgc-search::before {
    content: "";
    position: absolute;
    top: 0;
    left: 9%;
    right: 9%;
    height: 1px;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,225,97,.22),
            rgba(255,255,255,.10),
            rgba(255,225,97,.22),
            transparent
        );
}


/* ---------------------------------------------------------
   INNER FIELDS
--------------------------------------------------------- */

#dgc-blog .dgc-search__input-wrap,
#dgc-blog .dgc-search__select-wrap {
    position: relative;
    min-width: 0;
    min-height: 54px;

    display: flex;
    align-items: center;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.032)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035);

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

#dgc-blog .dgc-search__input-wrap {
    border-right: 1px solid rgba(255,255,255,.08);
}

#dgc-blog .dgc-search__input-wrap:hover,
#dgc-blog .dgc-search__select-wrap:hover {
    border-color: rgba(255,225,97,.19);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.078),
            rgba(255,255,255,.040)
        );
}

#dgc-blog .dgc-search__input-wrap:focus-within,
#dgc-blog .dgc-search__select-wrap:focus-within {
    border-color: rgba(255,225,97,.48);

    box-shadow:
        0 0 0 3px rgba(255,225,97,.075),
        inset 0 1px 0 rgba(255,255,255,.045);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.045)
        );
}


/* ---------------------------------------------------------
   INPUT
--------------------------------------------------------- */

#dgc-blog .dgc-search__input-wrap input,
#dgc-blog .dgc-search__select-wrap select {
    width: 100%;
    height: 54px;

    border: 0;
    outline: 0;

    font-family: inherit;
    font-size: 14px;
    line-height: 1;

    color: #eef6f1;
    background: transparent;
}

#dgc-blog .dgc-search__input-wrap input {
    direction: rtl;

    padding:
        0 18px
        0 54px;

    caret-color: #ffe161;
}

#dgc-blog .dgc-search__input-wrap input::placeholder {
    color: rgba(224,237,229,.58);
    opacity: 1;
}

#dgc-blog .dgc-search__input-wrap input::-webkit-search-cancel-button {
    cursor: pointer;
    opacity: .62;
    filter: invert(1);
}


/* search icon */

#dgc-blog .dgc-search__icon {
    position: absolute;
    left: 9px;

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,225,97,.12);
    border-radius: 10px;

    color: #ffe161;

    background:
        rgba(255,225,97,.055);

    pointer-events: none;

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

#dgc-blog .dgc-search__icon svg {
    width: 18px;
    height: 18px;
}

#dgc-blog .dgc-search__input-wrap:focus-within .dgc-search__icon {
    border-color: rgba(255,225,97,.28);
    background: rgba(255,225,97,.095);
    transform: scale(1.035);
}


/* ---------------------------------------------------------
   CUSTOM-LOOK SELECT
--------------------------------------------------------- */

#dgc-blog .dgc-search__select-wrap {
    direction: rtl;
}

#dgc-blog .dgc-search__select-wrap select {
    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;

    padding:
        0 18px
        0 54px;

    color: #edf5f0;

    font-weight: 750;

    text-overflow: ellipsis;
}

#dgc-blog .dgc-search__select-wrap > span {
    position: absolute;
    left: 9px;

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,225,97,.12);
    border-radius: 10px;

    color: #ffe161;

    background:
        rgba(255,225,97,.055);

    pointer-events: none;

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

#dgc-blog .dgc-search__select-wrap > span svg {
    width: 17px;
    height: 17px;

    transition: transform .25s ease;
}

#dgc-blog .dgc-search__select-wrap:focus-within > span {
    border-color: rgba(255,225,97,.30);
    background: rgba(255,225,97,.10);
}

#dgc-blog .dgc-search__select-wrap:focus-within > span svg {
    transform: rotate(180deg);
}


/* Native dropdown popup styling where browser supports it */

#dgc-blog .dgc-search__select-wrap select option {
    color: #eef6f1;
    background: #0b2f21;

    font-family: inherit;
    font-size: 14px;
    font-weight: 650;

    padding: 10px 14px;
}

#dgc-blog .dgc-search__select-wrap select option:checked {
    color: #163e2d;
    background: #ffe161;
}


/* ---------------------------------------------------------
   SEARCH BUTTON
--------------------------------------------------------- */

#dgc-blog .dgc-search__button {
    position: relative;
    overflow: hidden;

    min-height: 54px;

    border: 1px solid rgba(255,225,97,.56);
    border-radius: 13px;

    padding: 0 20px;

    color: #163e2d;

    background:
        linear-gradient(
            145deg,
            #ffe66f 0%,
            #ffe161 48%,
            #eec74a 100%
        );

    box-shadow:
        0 12px 26px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.50);

    font-family: inherit;
    font-size: 14px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        filter .22s ease;
}

#dgc-blog .dgc-search__button::before {
    content: "";

    position: absolute;
    top: -80%;
    left: -45%;

    width: 48%;
    height: 250%;

    transform: rotate(22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.30),
            transparent
        );

    transition: left .48s ease;

    pointer-events: none;
}

#dgc-blog .dgc-search__button span {
    position: relative;
    z-index: 1;
}

#dgc-blog .dgc-search__button:hover {
    transform: translateY(-2px);

    border-color: rgba(255,235,140,.80);

    background:
        linear-gradient(
            145deg,
            #ffeb84 0%,
            #ffe66f 50%,
            #f2d15c 100%
        );

    box-shadow:
        0 17px 32px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.58);
}

#dgc-blog .dgc-search__button:hover::before {
    left: 112%;
}

#dgc-blog .dgc-search__button:active {
    transform: translateY(0);
}


/* ---------------------------------------------------------
   ACCESSIBLE KEYBOARD FOCUS
--------------------------------------------------------- */

#dgc-blog .dgc-search__button:focus-visible {
    outline: 0;

    box-shadow:
        0 0 0 3px rgba(255,225,97,.20),
        0 17px 32px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.52);
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 850px) {

    #dgc-blog .dgc-search {
        grid-template-columns:
            minmax(0, 1fr)
            205px
            112px;

        gap: 7px;

        padding: 7px;

        border-radius: 18px;
    }

    #dgc-blog .dgc-search__input-wrap,
    #dgc-blog .dgc-search__select-wrap,
    #dgc-blog .dgc-search__button {
        min-height: 52px;
    }

    #dgc-blog .dgc-search__input-wrap input,
    #dgc-blog .dgc-search__select-wrap select {
        height: 52px;
    }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 640px) {

    #dgc-blog .dgc-search {
        grid-template-columns: 1fr;

        gap: 8px;

        margin-top: 22px;
        padding: 8px;

        border-radius: 18px;
    }

    #dgc-blog .dgc-search__input-wrap {
        border-right: 1px solid rgba(255,255,255,.08);
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    #dgc-blog .dgc-search__button {
        margin-top: 0;
        min-height: 50px;
    }

}


/* =========================================================
   END — RANG SAREH BLOG V10
========================================================= */


/* =========================================================
   RANG SAREH BLOG — V11
   "مقاله جدید" premium pigment badge
   Inspired by the small multi-color technical card
   CSS only — PHP / JS / structure untouched
========================================================= */

#dgc-blog .dgc-featured-badge {
    position: relative;

    display: inline-flex;
    align-items: center;

    width: fit-content;
    min-height: 54px;

    padding:
        9px
        64px
        9px
        17px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.105);

    border-radius: 16px;

    color: transparent;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(255,225,97,.055),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(16,55,39,.96),
            rgba(7,35,25,.94)
        );

    box-shadow:
        0 16px 34px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.045);

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    font-size: 0;

    transition:
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease;
}

/* visible label */
#dgc-blog .dgc-featured-badge::after {
    content: "مقاله جدید";

    position: relative;
    z-index: 2;

    display: block;

    color: #f4f8f5;

    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 900;

    white-space: nowrap;

    text-shadow:
        0 1px 0 rgba(0,0,0,.18);
}

/* three pigment color bars */
#dgc-blog .dgc-featured-badge::before {
    content: "";

    position: absolute;
    top: 50%;
    right: 13px;

    width: 9px;
    height: 30px;

    transform:
        translateY(-50%);

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #ff8b76,
            #ff6f61
        );

    box-shadow:
        -14px 0 0 #ffe161,
        -28px 0 0 #74c7ed;

    pointer-events: none;
}

#dgc-blog .dgc-featured-badge:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(255,225,97,.24);

    box-shadow:
        0 20px 40px rgba(0,0,0,.22),
        0 0 0 1px rgba(255,225,97,.035),
        inset 0 1px 0 rgba(255,255,255,.055);
}


/* subtle inner top line */
#dgc-blog .dgc-featured-badge span {
    display: none;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 640px) {

    #dgc-blog .dgc-featured-badge {
        min-height: 50px;

        padding:
            8px
            60px
            8px
            15px;

        border-radius: 14px;
    }

    #dgc-blog .dgc-featured-badge::after {
        font-size: 12px;
    }

    #dgc-blog .dgc-featured-badge::before {
        right: 12px;

        width: 8px;
        height: 27px;

        box-shadow:
            -13px 0 0 #ffe161,
            -26px 0 0 #74c7ed;
    }

}

/* =========================================================
   END — RANG SAREH BLOG V11
========================================================= */


/* =========================================================
   RANG SAREH BLOG — V12
   Premium Tags + Unified Newsletter Form
   CSS only — PHP / JS / structure untouched
========================================================= */

/* ---------------------------------------------------------
   TAGS — compact badges inspired by article-card labels
--------------------------------------------------------- */

#dgc-blog .dgc-tag-cloud {
    gap: 8px;
}

#dgc-blog .dgc-tag-button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding:
        6px
        13px;

    border:
        1px solid
        rgba(255,225,97,.34);

    border-radius:
        999px;

    color:
        #163e2d;

    background:
        linear-gradient(
            145deg,
            #ffe76f 0%,
            #ffe161 55%,
            #f1cc50 100%
        );

    box-shadow:
        0 8px 18px rgba(0,0,0,.13),
        inset 0 1px 0 rgba(255,255,255,.42);

    font-family: inherit;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;

    cursor: pointer;

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

#dgc-blog .dgc-tag-button:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(255,235,140,.66);

    background:
        linear-gradient(
            145deg,
            #ffed8f 0%,
            #ffe66f 55%,
            #f3d35d 100%
        );

    box-shadow:
        0 12px 22px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.52);
}

#dgc-blog .dgc-tag-button.is-active {
    color:
        #f5faf7;

    border-color:
        rgba(255,255,255,.12);

    background:
        linear-gradient(
            145deg,
            rgba(18,61,43,.98),
            rgba(8,38,27,.98)
        );

    box-shadow:
        0 10px 22px rgba(0,0,0,.17),
        inset 0 1px 0 rgba(255,255,255,.045);
}

#dgc-blog .dgc-tag-button.is-disabled {
    opacity:
        .48;

    cursor:
        default;

    transform:
        none;
}

#dgc-blog .dgc-tag-button.is-disabled:hover {
    color:
        #163e2d;

    border-color:
        rgba(255,225,97,.34);

    background:
        linear-gradient(
            145deg,
            #ffe76f 0%,
            #ffe161 55%,
            #f1cc50 100%
        );

    box-shadow:
        0 8px 18px rgba(0,0,0,.13),
        inset 0 1px 0 rgba(255,255,255,.42);
}


/* ---------------------------------------------------------
   NEWSLETTER — same visual family as Hero search
--------------------------------------------------------- */

#dgc-blog .dgc-newsletter {
    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        28px;

    background-image:
        var(--dgc-newsletter-image),
        radial-gradient(
            circle at 16% 18%,
            rgba(255,225,97,.075),
            transparent 27%
        ),
        radial-gradient(
            circle at 86% 78%,
            rgba(78,131,190,.040),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #071f16 0%,
            #103827 56%,
            #082419 100%
        );

    background-color:
        #082419;

    box-shadow:
        0 22px 52px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.04);
}

#dgc-blog .dgc-newsletter__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(8,36,25,.94),
            rgba(8,36,25,.76)
        ),
        radial-gradient(
            circle at 84% 16%,
            rgba(255,225,97,.10),
            transparent 34%
        );
}


/* form shell */

#dgc-blog .dgc-newsletter__form {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:
        8px;

    direction:
        ltr;

    padding:
        7px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:
        18px;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(255,225,97,.045),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            rgba(20,64,45,.72),
            rgba(7,35,24,.70)
        );

    box-shadow:
        0 18px 38px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.045);

    -webkit-backdrop-filter:
        blur(16px);

    backdrop-filter:
        blur(16px);
}

#dgc-blog .dgc-newsletter__form::before {
    content: "";

    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;

    height:
        1px;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,225,97,.18),
            rgba(255,255,255,.08),
            rgba(255,225,97,.18),
            transparent
        );
}


/* email input */

#dgc-blog .dgc-newsletter__form input {
    min-width:
        0;

    height:
        50px;

    padding:
        0 16px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius:
        12px;

    outline:
        0;

    direction:
        rtl;

    color:
        #eef6f1;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.060),
            rgba(255,255,255,.030)
        );

    font-family:
        inherit;

    font-size:
        13px;

    caret-color:
        #ffe161;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03);

    transition:
        border-color .24s ease,
        background .24s ease,
        box-shadow .24s ease;
}

#dgc-blog .dgc-newsletter__form input::placeholder {
    color:
        rgba(225,237,229,.58);

    opacity:
        1;
}

#dgc-blog .dgc-newsletter__form input:hover {
    border-color:
        rgba(255,225,97,.17);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.074),
            rgba(255,255,255,.038)
        );
}

#dgc-blog .dgc-newsletter__form input:focus {
    border-color:
        rgba(255,225,97,.44);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.085),
            rgba(255,255,255,.043)
        );

    box-shadow:
        0 0 0 3px rgba(255,225,97,.07),
        inset 0 1px 0 rgba(255,255,255,.04);
}


/* membership button */

#dgc-blog .dgc-newsletter__form button {
    position:
        relative;

    min-width:
        112px;

    min-height:
        50px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 18px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,225,97,.52);

    border-radius:
        12px;

    color:
        #163e2d;

    background:
        linear-gradient(
            145deg,
            #ffe76f 0%,
            #ffe161 52%,
            #efc94c 100%
        );

    box-shadow:
        0 11px 24px rgba(0,0,0,.17),
        inset 0 1px 0 rgba(255,255,255,.45);

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        900;

    cursor:
        pointer;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease,
        border-color .22s ease;
}

#dgc-blog .dgc-newsletter__form button::before {
    content: "";

    position:
        absolute;

    top:
        -90%;

    left:
        -48%;

    width:
        45%;

    height:
        270%;

    transform:
        rotate(22deg);

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.28),
            transparent
        );

    transition:
        left .48s ease;
}

#dgc-blog .dgc-newsletter__form button:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(255,235,140,.78);

    background:
        linear-gradient(
            145deg,
            #ffed8d 0%,
            #ffe76f 52%,
            #f2d15b 100%
        );

    box-shadow:
        0 15px 28px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.55);
}

#dgc-blog .dgc-newsletter__form button:hover::before {
    left:
        115%;
}

#dgc-blog .dgc-newsletter__form button:active {
    transform:
        translateY(0);
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 640px) {

    #dgc-blog .dgc-tag-cloud {
        gap:
            7px;
    }

    #dgc-blog .dgc-tag-button {
        min-height:
            30px;

        padding:
            5px
            11px;

        font-size:
            9px;
    }

    #dgc-blog .dgc-newsletter__form {
        grid-template-columns:
            1fr;

        gap:
            8px;

        padding:
            7px;

        border-radius:
            16px;
    }

    #dgc-blog .dgc-newsletter__form input,
    #dgc-blog .dgc-newsletter__form button {
        width:
            100%;

        min-height:
            48px;

        border-radius:
            11px;
    }

    #dgc-blog .dgc-newsletter__form button {
        min-width:
            0;
    }

}

/* =========================================================
   END — RANG SAREH BLOG V12
========================================================= */


/* =========================================================
   RANG SAREH BLOG — V13
   Newsletter form matched to the approved homepage newsletter
   Keeps Resources / Tags / Categories beside it
   CSS only — PHP / JS / structure untouched
========================================================= */

/* ---------------------------------------------------------
   BOTTOM GRID
   Keep technical panels beside newsletter, not below it.
--------------------------------------------------------- */

#dgc-blog .dgc-bottom-layout {
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(350px, .92fr);

    align-items:
        start;

    gap:
        18px;
}

#dgc-blog .dgc-bottom-left {
    gap:
        11px;
}


/* ---------------------------------------------------------
   NEWSLETTER = SAME SUBSCRIBE CARD LANGUAGE AS HOMEPAGE
--------------------------------------------------------- */

#dgc-blog .dgc-newsletter {
    position:
        relative;

    min-height:
        0;

    align-self:
        start;

    overflow:
        hidden;

    padding:
        27px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:
        25px;

    color:
        #f5f8f6;

    background:
        radial-gradient(
            circle at 82% 14%,
            rgba(255,225,97,.055),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.085),
            rgba(255,255,255,.035)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.08),
        0 20px 40px
        rgba(0,0,0,.11);

    -webkit-backdrop-filter:
        blur(18px);

    backdrop-filter:
        blur(18px);

    isolation:
        isolate;
}

#dgc-blog .dgc-newsletter::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    pointer-events:
        none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.020) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.020) 1px,
            transparent 1px
        );

    background-size:
        48px 48px;

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 5%,
            transparent 88%
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            #000 5%,
            transparent 88%
        );
}

#dgc-blog .dgc-newsletter::after {
    content: "";

    position:
        absolute;

    top:
        0;

    left:
        14%;

    right:
        14%;

    height:
        1px;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,225,97,.24),
            rgba(255,255,255,.08),
            rgba(255,225,97,.24),
            transparent
        );
}


/* old image overlay is not needed in this card design */

#dgc-blog .dgc-newsletter__overlay {
    display:
        none;
}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

#dgc-blog .dgc-newsletter__content {
    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        46px
        minmax(0,1fr);

    grid-template-areas:
        "icon title"
        "icon subtitle"
        "form form"
        "message message"
        "privacy privacy";

    align-items:
        center;

    column-gap:
        12px;

    row-gap:
        0;

    padding:
        0;
}


/* ---------------------------------------------------------
   TOP ICON
--------------------------------------------------------- */

#dgc-blog .dgc-newsletter__content > span {
    grid-area:
        icon;

    display:
        grid;

    place-items:
        center;

    width:
        46px;

    height:
        46px;

    margin:
        0;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,225,97,.18);

    border-radius:
        14px;

    color:
        transparent;

    background:
        rgba(255,225,97,.08);

    font-size:
        0;
}

#dgc-blog .dgc-newsletter__content > span::after {
    content: "";

    width:
        21px;

    height:
        21px;

    background:
        center / 21px 21px
        no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe161' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------
   HEADING / SUBTITLE
   Visible copy matches the approved homepage form card.
--------------------------------------------------------- */

#dgc-blog .dgc-newsletter h2 {
    grid-area:
        title;

    max-width:
        none;

    margin:
        0 0 3px;

    padding:
        0;

    color:
        #f5f8f6;

    font-size:
        0;

    line-height:
        1.4;

    font-weight:
        750;
}

#dgc-blog .dgc-newsletter h2::after {
    content:
        "عضویت در خبرنامه";

    display:
        block;

    font-family:
        inherit;

    font-size:
        14px;

    line-height:
        1.4;

    font-weight:
        750;
}


#dgc-blog .dgc-newsletter__content > p:not(.dgc-newsletter__message) {
    grid-area:
        subtitle;

    max-width:
        none;

    margin:
        0;

    padding:
        0;

    color:
        #8ea398;

    font-size:
        0;

    line-height:
        1.5;
}

#dgc-blog .dgc-newsletter__content > p:not(.dgc-newsletter__message)::after {
    content:
        "فقط ایمیل شما کافی است.";

    display:
        block;

    font-family:
        inherit;

    font-size:
        9.5px;

    line-height:
        1.5;
}


/* ---------------------------------------------------------
   FORM ROW
   Exact visual direction of the homepage subscribe box:
   white email field + yellow button
--------------------------------------------------------- */

#dgc-blog .dgc-newsletter__form {
    grid-area:
        form;

    display:
        flex;

    align-items:
        stretch;

    width:
        100%;

    gap:
        8px;

    margin:
        23px 0 0;

    padding:
        0;

    overflow:
        visible;

    direction:
        rtl;

    border:
        0;

    border-radius:
        0;

    background:
        transparent;

    box-shadow:
        none;

    -webkit-backdrop-filter:
        none;

    backdrop-filter:
        none;
}

#dgc-blog .dgc-newsletter__form::before {
    content:
        none;
}


/* EMAIL FIELD */

#dgc-blog .dgc-newsletter__form input {
    flex:
        1 1 auto;

    min-width:
        0;

    height:
        58px;

    margin:
        0;

    padding:
        0 48px
        0 15px;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius:
        16px;

    outline:
        0;

    color:
        #264a37;

    background-color:
        rgba(255,255,255,.94);

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23668072' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");

    background-repeat:
        no-repeat;

    background-size:
        17px 17px;

    background-position:
        right 16px center;

    direction:
        rtl;

    text-align:
        right;

    font-family:
        inherit;

    font-size:
        12px;

    line-height:
        1;

    caret-color:
        #2b6749;

    box-shadow:
        none;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background-color .3s ease;
}

#dgc-blog .dgc-newsletter__form input::placeholder {
    color:
        #96a39b;

    opacity:
        1;
}

#dgc-blog .dgc-newsletter__form input:hover {
    border-color:
        rgba(255,225,97,.36);

    background-color:
        #ffffff;
}

#dgc-blog .dgc-newsletter__form input:focus {
    border-color:
        rgba(255,225,97,.72);

    background-color:
        #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(255,225,97,.08);
}


/* BUTTON */

#dgc-blog .dgc-newsletter__form button {
    flex:
        0 0 auto;

    min-width:
        154px;

    height:
        58px;

    margin:
        0;

    padding:
        0 18px;

    gap:
        9px;

    border:
        1px solid
        rgba(255,225,97,.40);

    border-radius:
        16px;

    color:
        #173f2e;

    background:
        linear-gradient(
            145deg,
            #ffe161,
            #efc849
        );

    box-shadow:
        0 13px 25px
        rgba(0,0,0,.13),
        inset 0 1px 0
        rgba(255,255,255,.45);

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        750;

    line-height:
        1;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        transform .3s
        cubic-bezier(.2,.8,.2,1),
        box-shadow .3s ease,
        filter .3s ease;
}

#dgc-blog .dgc-newsletter__form button span {
    font-size:
        0;
}

#dgc-blog .dgc-newsletter__form button span::after {
    content:
        "عضویت در خبرنامه";

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        750;
}

#dgc-blog .dgc-newsletter__form button svg {
    width:
        26px;

    height:
        26px;

    padding:
        6px;

    border-radius:
        8px;

    color:
        #173f2e;

    background:
        rgba(23,63,46,.09);

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;
}

#dgc-blog .dgc-newsletter__form button:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.035);

    box-shadow:
        0 17px 30px
        rgba(0,0,0,.16),
        inset 0 1px 0
        rgba(255,255,255,.50);
}

#dgc-blog .dgc-newsletter__form button:active {
    transform:
        translateY(0);
}


/* ---------------------------------------------------------
   MESSAGE
--------------------------------------------------------- */

#dgc-blog .dgc-newsletter__message {
    grid-area:
        message;

    min-height:
        18px;

    max-width:
        none;

    margin:
        7px 0 0;

    color:
        #a6bbb0;

    font-size:
        10px;

    line-height:
        1.6;
}

#dgc-blog .dgc-newsletter__message.is-success {
    color:
        #88dfa9;
}

#dgc-blog .dgc-newsletter__message.is-error {
    color:
        #ffb3ad;
}


/* ---------------------------------------------------------
   PRIVACY LINE
--------------------------------------------------------- */

#dgc-blog .dgc-newsletter small {
    grid-area:
        privacy;

    position:
        relative;

    display:
        block;

    margin:
        7px 0 0;

    padding:
        0 21px 0 0;

    color:
        #7f9589;

    font-size:
        0;

    line-height:
        1.7;
}

#dgc-blog .dgc-newsletter small::before {
    content: "";

    position:
        absolute;

    top:
        50%;

    right:
        0;

    width:
        13px;

    height:
        13px;

    transform:
        translateY(-50%);

    background:
        center / 13px 13px
        no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f9589' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

#dgc-blog .dgc-newsletter small::after {
    content:
        "ایمیل شما محرمانه می‌ماند و پیام‌های غیرمرتبط ارسال نمی‌شود.";

    display:
        block;

    font-family:
        inherit;

    font-size:
        9px;

    line-height:
        1.7;
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 1000px) {

    #dgc-blog .dgc-bottom-layout {
        grid-template-columns:
            1fr;

        gap:
            14px;
    }

    #dgc-blog .dgc-newsletter {
        width:
            100%;
    }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 640px) {

    #dgc-blog .dgc-newsletter {
        padding:
            20px;

        border-radius:
            21px;
    }

    #dgc-blog .dgc-newsletter__content {
        grid-template-columns:
            42px
            minmax(0,1fr);

        column-gap:
            10px;
    }

    #dgc-blog .dgc-newsletter__content > span {
        width:
            42px;

        height:
            42px;

        border-radius:
            13px;
    }

    #dgc-blog .dgc-newsletter__form {
        flex-direction:
            column;

        gap:
            8px;

        margin-top:
            19px;
    }

    #dgc-blog .dgc-newsletter__form input,
    #dgc-blog .dgc-newsletter__form button {
        width:
            100%;

        min-width:
            0;

        height:
            54px;

        border-radius:
            14px;
    }

    #dgc-blog .dgc-newsletter__form button {
        justify-content:
            center;
    }

}

/* =========================================================
   END — RANG SAREH BLOG V13
========================================================= */


/* =========================================================
   RANG SAREH BLOG — V14
   EXACT NEWSLETTER CARD MATCH
   Matches the approved compact homepage subscription card
   CSS only — PHP / JS / structure untouched
========================================================= */

/* Two equal columns so the newsletter keeps the same compact proportions */
#dgc-blog .dgc-bottom-layout {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items:
        start;

    gap:
        20px;
}


/* =========================================================
   NEWSLETTER CARD
========================================================= */

#dgc-blog .dgc-newsletter {
    position:
        relative;

    width:
        100%;

    min-height:
        228px;

    margin:
        0;

    padding:
        27px
        27px
        22px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:
        25px;

    color:
        #f4f8f5;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.028)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.055),
        0 17px 38px
        rgba(0,0,0,.10);

    -webkit-backdrop-filter:
        blur(16px);

    backdrop-filter:
        blur(16px);

    isolation:
        isolate;
}


/* subtle technical grid exactly inside the card */
#dgc-blog .dgc-newsletter::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    pointer-events:
        none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size:
        42px
        42px;

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            transparent 90%
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            transparent 90%
        );
}


/* no decorative image/overlay in this compact version */
#dgc-blog .dgc-newsletter__overlay {
    display:
        none;
}


/* =========================================================
   CONTENT GRID
========================================================= */

#dgc-blog .dgc-newsletter__content {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        47px;

    grid-template-areas:
        "title icon"
        "subtitle icon"
        "form form"
        "message message"
        "privacy privacy";

    column-gap:
        12px;

    row-gap:
        0;

    width:
        100%;

    min-height:
        178px;

    padding:
        0;

    direction:
        rtl;
}


/* =========================================================
   ICON — TOP RIGHT
========================================================= */

#dgc-blog .dgc-newsletter__content > span {
    grid-area:
        icon;

    position:
        relative;

    display:
        grid;

    place-items:
        center;

    width:
        47px;

    height:
        47px;

    margin:
        0;

    padding:
        0;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,225,97,.25);

    border-radius:
        14px;

    color:
        transparent;

    background:
        rgba(255,225,97,.075);

    font-size:
        0;

    line-height:
        0;
}

#dgc-blog .dgc-newsletter__content > span::after {
    content: "";

    display:
        block;

    width:
        20px;

    height:
        20px;

    background:
        center /
        20px 20px
        no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe161' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
}


/* =========================================================
   TITLE
========================================================= */

#dgc-blog .dgc-newsletter h2 {
    grid-area:
        title;

    align-self:
        end;

    margin:
        2px
        0
        2px;

    padding:
        0;

    color:
        transparent;

    font-size:
        0;

    line-height:
        1;

    text-align:
        right;
}

#dgc-blog .dgc-newsletter h2::after {
    content:
        "عضویت در خبرنامه";

    display:
        block;

    color:
        #f7f9f7;

    font-family:
        inherit;

    font-size:
        14px;

    line-height:
        1.5;

    font-weight:
        900;
}


/* =========================================================
   SUBTITLE
========================================================= */

#dgc-blog .dgc-newsletter__content > p:not(.dgc-newsletter__message) {
    grid-area:
        subtitle;

    align-self:
        start;

    margin:
        0;

    padding:
        0;

    color:
        transparent;

    font-size:
        0;

    line-height:
        1;

    text-align:
        right;
}

#dgc-blog .dgc-newsletter__content > p:not(.dgc-newsletter__message)::after {
    content:
        "فقط ایمیل شما کافی است.";

    display:
        block;

    color:
        #8ca095;

    font-family:
        inherit;

    font-size:
        9.5px;

    line-height:
        1.7;

    font-weight:
        500;
}


/* =========================================================
   FORM — EXACT ONE ROW
========================================================= */

#dgc-blog .dgc-newsletter__form {
    grid-area:
        form;

    display:
        flex;

    flex-direction:
        row;

    align-items:
        stretch;

    width:
        100%;

    gap:
        8px;

    margin:
        23px
        0
        0;

    padding:
        0;

    overflow:
        visible;

    border:
        0;

    border-radius:
        0;

    background:
        transparent;

    box-shadow:
        none;

    -webkit-backdrop-filter:
        none;

    backdrop-filter:
        none;

    direction:
        rtl;
}

#dgc-blog .dgc-newsletter__form::before {
    content:
        none;
}


/* =========================================================
   EMAIL FIELD
========================================================= */

#dgc-blog .dgc-newsletter__form input {
    flex:
        1 1 auto;

    min-width:
        0;

    height:
        58px;

    margin:
        0;

    padding:
        0
        48px
        0
        15px;

    border:
        1px solid
        rgba(255,255,255,.20);

    border-radius:
        16px;

    outline:
        0;

    color:
        #2b4a3a;

    background-color:
        #f1f3f2;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23748a7e' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");

    background-repeat:
        no-repeat;

    background-position:
        right 16px center;

    background-size:
        17px
        17px;

    direction:
        rtl;

    text-align:
        right;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        500;

    caret-color:
        #2b6749;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.75);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background-color .25s ease;
}

#dgc-blog .dgc-newsletter__form input::placeholder {
    color:
        #9aa7a0;

    opacity:
        1;
}

#dgc-blog .dgc-newsletter__form input:hover {
    background-color:
        #f7f8f7;

    border-color:
        rgba(255,225,97,.35);
}

#dgc-blog .dgc-newsletter__form input:focus {
    background-color:
        #ffffff;

    border-color:
        rgba(255,225,97,.68);

    box-shadow:
        0 0 0 3px
        rgba(255,225,97,.08),
        inset 0 1px 0
        rgba(255,255,255,.85);
}


/* =========================================================
   SUBMIT BUTTON — LEFT SIDE
========================================================= */

#dgc-blog .dgc-newsletter__form button {
    flex:
        0 0 154px;

    width:
        154px;

    height:
        58px;

    margin:
        0;

    padding:
        0
        16px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,225,97,.58);

    border-radius:
        16px;

    color:
        #173f2e;

    background:
        linear-gradient(
            145deg,
            #ffe161 0%,
            #f8d653 100%
        );

    box-shadow:
        0 11px 22px
        rgba(0,0,0,.12),
        inset 0 1px 0
        rgba(255,255,255,.46);

    direction:
        rtl;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        900;

    line-height:
        1;

    white-space:
        nowrap;

    cursor:
        pointer;

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

#dgc-blog .dgc-newsletter__form button span {
    display:
        inline;

    color:
        transparent;

    font-size:
        0;
}

#dgc-blog .dgc-newsletter__form button span::after {
    content:
        "عضویت در خبرنامه";

    color:
        #173f2e;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        900;
}


/* arrow inside the small pale square */
#dgc-blog .dgc-newsletter__form button svg {
    order:
        2;

    flex:
        0 0 27px;

    width:
        27px;

    height:
        27px;

    padding:
        7px;

    border-radius:
        8px;

    color:
        #345b45;

    background:
        rgba(23,63,46,.08);

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;
}

#dgc-blog .dgc-newsletter__form button:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.035);

    box-shadow:
        0 15px 27px
        rgba(0,0,0,.16),
        inset 0 1px 0
        rgba(255,255,255,.50);
}

#dgc-blog .dgc-newsletter__form button:active {
    transform:
        translateY(0);
}


/* =========================================================
   FORM MESSAGE
========================================================= */

#dgc-blog .dgc-newsletter__message {
    grid-area:
        message;

    min-height:
        0;

    margin:
        6px
        0
        0;

    padding:
        0;

    color:
        #9bb0a5;

    font-size:
        10px;

    line-height:
        1.6;

    text-align:
        right;
}

#dgc-blog .dgc-newsletter__message:empty {
    display:
        none;
}

#dgc-blog .dgc-newsletter__message.is-success {
    color:
        #8cdaa8;
}

#dgc-blog .dgc-newsletter__message.is-error {
    color:
        #ffb1aa;
}


/* =========================================================
   PRIVACY LINE
========================================================= */

#dgc-blog .dgc-newsletter small {
    grid-area:
        privacy;

    position:
        relative;

    display:
        block;

    align-self:
        end;

    margin:
        20px
        0
        0;

    padding:
        0
        21px
        0
        0;

    color:
        transparent;

    font-size:
        0;

    line-height:
        1;

    text-align:
        right;
}

#dgc-blog .dgc-newsletter small::before {
    content: "";

    position:
        absolute;

    top:
        50%;

    right:
        0;

    width:
        13px;

    height:
        13px;

    transform:
        translateY(-50%);

    background:
        center /
        13px 13px
        no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c9186' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

#dgc-blog .dgc-newsletter small::after {
    content:
        "ایمیل شما محرمانه می‌ماند و پیام‌های غیرمرتبط ارسال نمی‌شود.";

    display:
        block;

    color:
        #748b7f;

    font-family:
        inherit;

    font-size:
        8.5px;

    line-height:
        1.7;

    font-weight:
        500;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    #dgc-blog .dgc-bottom-layout {
        grid-template-columns:
            1fr;

        gap:
            15px;
    }

    #dgc-blog .dgc-newsletter {
        max-width:
            620px;

        justify-self:
            center;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    #dgc-blog .dgc-newsletter {
        min-height:
            0;

        padding:
            20px;

        border-radius:
            21px;
    }

    #dgc-blog .dgc-newsletter__content {
        grid-template-columns:
            minmax(0,1fr)
            43px;

        min-height:
            0;

        column-gap:
            10px;
    }

    #dgc-blog .dgc-newsletter__content > span {
        width:
            43px;

        height:
            43px;

        border-radius:
            13px;
    }

    #dgc-blog .dgc-newsletter__form {
        flex-direction:
            column;

        gap:
            8px;

        margin-top:
            19px;
    }

    #dgc-blog .dgc-newsletter__form input,
    #dgc-blog .dgc-newsletter__form button {
        flex:
            0 0 auto;

        width:
            100%;

        min-width:
            0;

        height:
            54px;

        border-radius:
            14px;
    }

    #dgc-blog .dgc-newsletter small {
        margin-top:
            16px;
    }

}

/* =========================================================
   END — RANG SAREH BLOG V14
========================================================= */











/* =========================================================
   V19 — RANG SAREH BLOG RETOUCH
   Section signatures / premium cards / aligned bottom columns
========================================================= */

/* SECTION SIGNATURES */
#dgc-blog .dgc-section-signature {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    margin: 8px 0 34px;
    padding: 0 2px;
    direction: ltr;
}

#dgc-blog .dgc-section-signature__line {
    flex: 1 1 auto;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.075),
            rgba(255,225,97,.09),
            rgba(255,255,255,.075),
            transparent
        );
}

#dgc-blog .dgc-section-signature__center {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 0 0 auto;
    color: #738b7e;
    white-space: nowrap;
    font-family: Arial, sans-serif;
    font-size: 7px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .14em;
}

#dgc-blog .dgc-section-signature__palette {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

#dgc-blog .dgc-section-signature__palette i {
    display: block;
    width: 5px;
    height: 14px;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

#dgc-blog .dgc-section-signature__palette i:nth-child(1) { background: #ec6956; }
#dgc-blog .dgc-section-signature__palette i:nth-child(2) { background: #ffe161; }
#dgc-blog .dgc-section-signature__palette i:nth-child(3) { background: #58a37a; }
#dgc-blog .dgc-section-signature__palette i:nth-child(4) { background: #5b89ba; }

#dgc-blog .dgc-section-signature--topics .dgc-section-signature__center > span:last-child { color: #849b8f; }
#dgc-blog .dgc-section-signature--featured .dgc-section-signature__center > span:last-child { color: #9a8e5a; }
#dgc-blog .dgc-section-signature--latest .dgc-section-signature__center > span:last-child { color: #7f9e8e; }
#dgc-blog .dgc-section-signature--popular .dgc-section-signature__center > span:last-child { color: #8998a6; }

/* GLOBAL CARD RETOUCH */
#dgc-blog .dgc-category-card,
#dgc-blog .dgc-featured-card,
#dgc-blog .dgc-application-panel,
#dgc-blog .dgc-article-card,
#dgc-blog .dgc-popular-card,
#dgc-blog .dgc-resource-panel,
#dgc-blog .dgc-tags-panel,
#dgc-blog .dgc-all-categories-panel {
    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        border-color .28s ease,
        box-shadow .28s ease,
        background .28s ease;
}

#dgc-blog .dgc-category-card {
    border-color: rgba(255,255,255,.115);
    background:
        radial-gradient(circle at 82% 15%, rgba(255,225,97,.055), transparent 30%),
        linear-gradient(145deg, rgba(17,58,41,.96), rgba(8,38,27,.92));
    box-shadow:
        0 18px 38px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.055);
}

#dgc-blog .dgc-category-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,225,97,.28);
    box-shadow:
        0 24px 48px rgba(0,0,0,.20),
        0 0 0 1px rgba(255,225,97,.035),
        inset 0 1px 0 rgba(255,255,255,.07);
}

#dgc-blog .dgc-featured-card {
    border-color: rgba(255,255,255,.105);
    box-shadow:
        0 30px 70px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.05);
}

#dgc-blog .dgc-application-panel {
    border-color: rgba(255,255,255,.10);
    box-shadow:
        0 22px 48px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.05);
}

#dgc-blog .dgc-article-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    background:
        linear-gradient(180deg, rgba(255,255,255,.985), rgba(244,248,245,.965));
    box-shadow:
        0 18px 38px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.94);
}

#dgc-blog .dgc-article-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,225,97,.50);
    box-shadow:
        0 28px 52px rgba(0,0,0,.19),
        0 0 0 1px rgba(255,225,97,.055),
        inset 0 1px 0 rgba(255,255,255,.98);
}

#dgc-blog .dgc-popular-card {
    border: 1px solid rgba(255,255,255,.105);
    background:
        radial-gradient(circle at 86% 10%, rgba(255,225,97,.055), transparent 29%),
        linear-gradient(145deg, #0d3525, #09291d);
    box-shadow:
        0 18px 38px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.045);
}

#dgc-blog .dgc-popular-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,225,97,.26);
    box-shadow:
        0 25px 48px rgba(0,0,0,.21),
        inset 0 1px 0 rgba(255,255,255,.055);
}

/* BOTTOM UTILITY CARDS */
#dgc-blog .dgc-resource-panel,
#dgc-blog .dgc-tags-panel,
#dgc-blog .dgc-all-categories-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.105);
    border-radius: 24px;
    background:
        radial-gradient(circle at 88% 8%, rgba(255,225,97,.045), transparent 27%),
        linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.026));
    box-shadow:
        0 18px 38px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.055);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

#dgc-blog .dgc-resource-panel::before,
#dgc-blog .dgc-tags-panel::before,
#dgc-blog .dgc-all-categories-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 13%;
    right: 13%;
    height: 1px;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,225,97,.24),
            rgba(255,255,255,.07),
            rgba(255,225,97,.24),
            transparent
        );
}

#dgc-blog .dgc-small-panel-head {
    position: relative;
    padding-left: 38px;
    border-bottom-color: rgba(255,255,255,.07);
}

#dgc-blog .dgc-small-panel-head::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    width: 4px;
    height: 17px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: #ec6956;
    box-shadow:
        7px 0 0 #ffe161,
        14px 0 0 #58a37a,
        21px 0 0 #5b89ba;
}

#dgc-blog .dgc-resource-item {
    border: 1px solid transparent;
    border-radius: 13px;
    transition:
        transform .22s ease,
        color .22s ease,
        border-color .22s ease,
        background .22s ease;
}

#dgc-blog .dgc-resource-item:hover {
    transform: translateY(-2px);
    color: #fff4b0;
    border-color: rgba(255,225,97,.10);
    background: rgba(255,225,97,.055);
}

#dgc-blog .dgc-all-category-button {
    border-radius: 11px;
    transition:
        color .22s ease,
        background .22s ease,
        transform .22s ease;
}

#dgc-blog .dgc-all-category-button:hover {
    transform: translateX(-2px);
    color: #ffe161;
    background: rgba(255,225,97,.045);
}

/* FINAL BOTTOM ALIGNMENT */
#dgc-blog .dgc-bottom-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
    direction: ltr;
}

#dgc-blog .dgc-bottom-left {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-rows:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    min-width: 0;
    height: 100%;
    align-self: stretch;
    direction: rtl;
}

#dgc-blog .dgc-resource-panel,
#dgc-blog .dgc-tags-panel,
#dgc-blog .dgc-all-categories-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: 100%;
    align-self: stretch;
}

#dgc-blog .dgc-resource-grid,
#dgc-blog .dgc-tag-cloud,
#dgc-blog .dgc-all-categories {
    align-content: start;
}

#dgc-blog .dgc-bottom-layout > .rsx-news {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    align-self: stretch;
    overflow: visible;
    background: transparent;
}

#dgc-blog .dgc-bottom-layout > .rsx-news .rsx-news__inner {
    width: 100%;
    height: 100%;
    margin: 0;
}

#dgc-blog .dgc-bottom-layout > .rsx-news .rsx-news__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 30px 28px 24px;
    border-radius: 28px;
}

#dgc-blog .dgc-bottom-layout > .rsx-news .rsx-news__grid {
    flex: 1 1 auto;
    grid-template-columns: 1fr;
    gap: 28px;
}

#dgc-blog .dgc-bottom-layout > .rsx-news .rsx-news__content {
    text-align: right;
}

#dgc-blog .dgc-bottom-layout > .rsx-news .rsx-news__title,
#dgc-blog .dgc-bottom-layout > .rsx-news .rsx-news__text {
    margin-left: 0;
    margin-right: 0;
}

#dgc-blog .dgc-bottom-layout > .rsx-news .rsx-news__benefits,
#dgc-blog .dgc-bottom-layout > .rsx-news .rsx-news__eyebrow {
    justify-content: flex-start;
}

#dgc-blog .dgc-bottom-layout > .rsx-news .rsx-news__bottom {
    flex: 0 0 auto;
}

/* RESPONSIVE */
@media (max-width: 980px) {
    #dgc-blog .dgc-bottom-layout {
        grid-template-columns: 1fr;
        gap: 18px;
        align-items: start;
    }

    #dgc-blog .dgc-bottom-left,
    #dgc-blog .dgc-bottom-layout > .rsx-news {
        grid-column: 1;
        grid-row: auto;
        height: auto;
        align-self: auto;
    }

    #dgc-blog .dgc-bottom-left {
        grid-template-rows: none;
    }

    #dgc-blog .dgc-resource-panel,
    #dgc-blog .dgc-tags-panel,
    #dgc-blog .dgc-all-categories-panel,
    #dgc-blog .dgc-bottom-layout > .rsx-news .rsx-news__inner,
    #dgc-blog .dgc-bottom-layout > .rsx-news .rsx-news__panel {
        height: auto;
    }
}

@media (max-width: 640px) {
    #dgc-blog .dgc-section-signature {
        gap: 9px;
        margin: 2px 0 26px;
    }

    #dgc-blog .dgc-section-signature__center {
        gap: 7px;
        max-width: calc(100vw - 46px);
        white-space: normal;
        text-align: center;
        font-size: 6px;
        line-height: 1.5;
    }

    #dgc-blog .dgc-section-signature__palette i {
        width: 4px;
        height: 12px;
    }

    #dgc-blog .dgc-section-signature__line {
        min-width: 18px;
    }

    #dgc-blog .dgc-resource-panel,
    #dgc-blog .dgc-tags-panel,
    #dgc-blog .dgc-all-categories-panel {
        border-radius: 20px;
    }
}

/* =========================================================
   END V19
========================================================= */


/* =========================================================
   V20 — ARTICLE CATEGORY BADGES
   Compact version of the premium "مقاله جدید" pigment badge
========================================================= */

#dgc-blog .dgc-card-category {
    position: absolute;

    top: 9px;
    right: 9px;

    z-index: 4;

    display: inline-flex;
    align-items: center;

    width: fit-content;
    max-width: calc(100% - 70px);
    min-height: 35px;

    padding:
        7px
        49px
        7px
        12px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 12px;

    color: #f4f8f5;

    background:
        radial-gradient(
            circle at 84% 18%,
            rgba(255,225,97,.065),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(16,55,39,.96),
            rgba(7,35,25,.94)
        );

    box-shadow:
        0 12px 26px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.055);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    direction: rtl;

    font-size: 9.5px;
    line-height: 1.25;
    font-weight: 900;

    white-space: nowrap;
    text-overflow: ellipsis;

    text-shadow:
        0 1px 0 rgba(0,0,0,.20);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

/* pigment bars */
#dgc-blog .dgc-card-category::before {
    content: "";

    position: absolute;

    top: 50%;
    right: 11px;

    width: 6px;
    height: 21px;

    transform: translateY(-50%);

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #ff8b76,
            #ff6f61
        );

    box-shadow:
        -10px 0 0 #ffe161,
        -20px 0 0 #74c7ed;

    pointer-events: none;
}

/* subtle premium top highlight */
#dgc-blog .dgc-card-category::after {
    content: "";

    position: absolute;

    top: 0;
    left: 14%;
    right: 14%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,225,97,.20),
            rgba(255,255,255,.09),
            transparent
        );

    pointer-events: none;
}

#dgc-blog .dgc-article-card:hover .dgc-card-category {
    transform: translateY(-2px);

    border-color:
        rgba(255,225,97,.25);

    box-shadow:
        0 16px 32px rgba(0,0,0,.28),
        0 0 0 1px rgba(255,225,97,.035),
        inset 0 1px 0 rgba(255,255,255,.065);
}

@media (max-width: 640px) {

    #dgc-blog .dgc-card-category {
        top: 8px;
        right: 8px;

        min-height: 33px;

        padding:
            6px
            45px
            6px
            10px;

        border-radius: 11px;

        font-size: 9px;
    }

    #dgc-blog .dgc-card-category::before {
        right: 10px;

        width: 5px;
        height: 19px;

        box-shadow:
            -9px 0 0 #ffe161,
            -18px 0 0 #74c7ed;
    }

}

/* =========================================================
   END V20
========================================================= */

/* =========================================================
   V21 — PROFESSIONAL ALTERNATING GREEN / WHITE SECTIONS
   Visual-only refinement. Structure / PHP / JS untouched.
   2026-09-21
========================================================= */

/* Page canvas: return the blog to the same light/dark rhythm used across DGCHEME. */
#dgc-blog {
    background: #f7faf8;
    color: #173d31;
}

#dgc-blog::before {
    content: none;
}

#dgc-blog .dgc-main {
    position: relative;
    isolation: isolate;
    background: #f7faf8;
}

#dgc-blog .dgc-main::before {
    content: none;
}

/* Keep hero premium/dark and let category cards bridge hero → content. */
#dgc-blog .dgc-hero {
    background-image:
        linear-gradient(90deg, rgba(5,32,23,.42), rgba(6,40,28,.66) 48%, rgba(5,30,22,.92)),
        var(--dgc-hero-image),
        linear-gradient(125deg, #071f16 0%, #103827 52%, #082419 100%);
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}

#dgc-blog .dgc-category-overlap {
    background: transparent;
}

#dgc-blog .dgc-category-overlap::before,
#dgc-blog .dgc-category-overlap::after {
    content: none;
}

/* Full-bleed section bands without changing markup. */
#dgc-blog .dgc-section {
    position: relative;
    isolation: isolate;
    padding-top: 76px;
    padding-bottom: 76px;
}

#dgc-blog .dgc-section::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: -2;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
}

#dgc-blog .dgc-section::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: -1;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
}

/* 01 — FEATURED / WHITE */
#dgc-blog .dgc-featured-section::before {
    background:
        radial-gradient(circle at 11% 14%, rgba(202,169,75,.11), transparent 24%),
        radial-gradient(circle at 88% 84%, rgba(11,93,71,.07), transparent 27%),
        linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
}

#dgc-blog .dgc-featured-section::after {
    background-image:
        linear-gradient(rgba(11,93,71,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11,93,71,.022) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 5%, transparent 80%);
    mask-image: radial-gradient(ellipse at center, #000 5%, transparent 80%);
}

#dgc-blog .dgc-featured-section,
#dgc-blog .dgc-featured-section .dgc-section-head h2 {
    color: #0a4938;
}

#dgc-blog .dgc-featured-section .dgc-kicker {
    color: #9d7e25;
}

#dgc-blog .dgc-featured-section .dgc-section-head p {
    color: #587068;
}

/* Featured card becomes the strong premium focal surface on the white band. */
#dgc-blog .dgc-featured-card {
    border: 1px solid rgba(7,67,50,.11);
    border-radius: 30px;
    background: #ffffff;
    box-shadow:
        0 26px 64px rgba(8,54,42,.12),
        inset 0 1px 0 rgba(255,255,255,.98);
}

#dgc-blog .dgc-featured-card__content {
    background:
        radial-gradient(circle at 84% 15%, rgba(255,225,97,.075), transparent 30%),
        linear-gradient(145deg, #0d3f2e, #082b20 72%, #071f17);
}

/* 02 — LATEST / DEEP GREEN */
#dgc-blog .dgc-latest-section::before {
    background:
        radial-gradient(circle at 12% 16%, rgba(255,225,97,.075), transparent 24%),
        radial-gradient(circle at 88% 76%, rgba(86,146,112,.09), transparent 28%),
        linear-gradient(125deg, #071f16 0%, #103827 50%, #082419 100%);
}

#dgc-blog .dgc-latest-section::after {
    background-image:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 8%, transparent 86%);
    mask-image: radial-gradient(ellipse at center, #000 8%, transparent 86%);
}

#dgc-blog .dgc-latest-section,
#dgc-blog .dgc-latest-section .dgc-section-head h2 {
    color: #f4faf6;
}

#dgc-blog .dgc-latest-section .dgc-kicker,
#dgc-blog .dgc-latest-section .dgc-more-button {
    color: #ffe161;
}

#dgc-blog .dgc-latest-section .dgc-more-button:hover {
    color: #fff2a8;
}

#dgc-blog .dgc-latest-section .dgc-application-panel {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 24px;
    padding: 22px 18px;
    background:
        radial-gradient(circle at 84% 10%, rgba(255,225,97,.055), transparent 30%),
        linear-gradient(145deg, rgba(18,61,43,.92), rgba(7,34,24,.88));
    box-shadow:
        0 20px 44px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.05);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

#dgc-blog .dgc-latest-section .dgc-application-panel h2 {
    color: #f5faf7;
}

#dgc-blog .dgc-latest-section .dgc-application-item {
    color: #b9c9c0;
}

#dgc-blog .dgc-latest-section .dgc-application-item:hover,
#dgc-blog .dgc-latest-section .dgc-application-item.is-active {
    color: #fff4b0;
    background: rgba(255,225,97,.065);
}

#dgc-blog .dgc-latest-section .dgc-article-card {
    border-color: rgba(255,255,255,.10);
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff, #f7faf8);
    box-shadow:
        0 18px 42px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.98);
}

#dgc-blog .dgc-latest-section .dgc-article-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,225,97,.48);
    box-shadow: 0 28px 54px rgba(0,0,0,.20);
}

/* 03 — POPULAR / WHITE */
#dgc-blog .dgc-trending-section::before {
    background:
        radial-gradient(circle at 88% 15%, rgba(202,169,75,.10), transparent 24%),
        radial-gradient(circle at 10% 82%, rgba(11,93,71,.065), transparent 27%),
        linear-gradient(180deg, #ffffff 0%, #f4f8f5 100%);
}

#dgc-blog .dgc-trending-section::after {
    background-image:
        linear-gradient(rgba(11,93,71,.020) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11,93,71,.020) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 5%, transparent 80%);
    mask-image: radial-gradient(ellipse at center, #000 5%, transparent 80%);
}

#dgc-blog .dgc-trending-section,
#dgc-blog .dgc-trending-section .dgc-section-head h2 {
    color: #0a4938;
}

#dgc-blog .dgc-trending-section .dgc-kicker {
    color: #9d7e25;
}

#dgc-blog .dgc-trending-section button.dgc-circle-button {
    color: #0b5d47;
    border-color: rgba(11,93,71,.14);
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(8,54,42,.09);
}

#dgc-blog .dgc-trending-section button.dgc-circle-button:hover {
    color: #163e2d;
    border-color: rgba(202,169,75,.38);
    background: #ffe161;
}

#dgc-blog .dgc-popular-card {
    border: 1px solid rgba(7,67,50,.10);
    border-radius: 22px;
    background:
        radial-gradient(circle at 86% 10%, rgba(255,225,97,.060), transparent 30%),
        linear-gradient(145deg, #0d3a2a, #08291e);
    box-shadow: 0 18px 40px rgba(8,54,42,.13);
}

/* 04 — UTILITIES + NEWSLETTER / DEEP GREEN */
#dgc-blog .dgc-bottom-layout::before {
    background:
        radial-gradient(circle at 9% 18%, rgba(255,225,97,.07), transparent 24%),
        radial-gradient(circle at 91% 82%, rgba(86,146,112,.085), transparent 27%),
        linear-gradient(125deg, #071f16 0%, #103827 50%, #082419 100%);
}

#dgc-blog .dgc-bottom-layout::after {
    background-image:
        linear-gradient(rgba(255,255,255,.021) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.021) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 8%, transparent 86%);
    mask-image: radial-gradient(ellipse at center, #000 8%, transparent 86%);
}

#dgc-blog .dgc-bottom-layout {
    color: #edf5f0;
}

#dgc-blog .dgc-resource-panel,
#dgc-blog .dgc-tags-panel,
#dgc-blog .dgc-all-categories-panel {
    border-color: rgba(255,255,255,.10);
    background:
        radial-gradient(circle at 88% 8%, rgba(255,225,97,.045), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.026));
    box-shadow:
        0 20px 44px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.05);
}

/* Signatures live between bands, so keep them elegant on the light canvas. */
#dgc-blog .dgc-section-signature {
    margin-top: 0;
    margin-bottom: 0;
    padding: 26px 0;
    background: #f7faf8;
}

#dgc-blog .dgc-section-signature__line {
    background: linear-gradient(90deg, transparent, rgba(11,93,71,.16), rgba(202,169,75,.23), rgba(11,93,71,.16), transparent);
}

#dgc-blog .dgc-section-signature__center {
    color: #527066;
}

#dgc-blog .dgc-section-signature--topics .dgc-section-signature__center > span:last-child,
#dgc-blog .dgc-section-signature--latest .dgc-section-signature__center > span:last-child,
#dgc-blog .dgc-section-signature--popular .dgc-section-signature__center > span:last-child {
    color: #6f8b80;
}

/* Cleaner vertical transitions, like Contact page. */
#dgc-blog .dgc-featured-section,
#dgc-blog .dgc-latest-section,
#dgc-blog .dgc-trending-section,
#dgc-blog .dgc-bottom-layout {
    margin-top: 0;
    margin-bottom: 0;
    border: 0;
    box-shadow: none;
}

/* Mobile keeps the same white/green rhythm without oversized spacing. */
@media (max-width: 980px) {
    #dgc-blog .dgc-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    #dgc-blog .dgc-latest-section .dgc-application-panel {
        padding: 18px 16px;
    }
}

@media (max-width: 640px) {
    #dgc-blog .dgc-section {
        padding-top: 46px;
        padding-bottom: 46px;
    }

    #dgc-blog .dgc-section-signature {
        padding: 20px 0;
    }

    #dgc-blog .dgc-featured-card,
    #dgc-blog .dgc-latest-section .dgc-article-card,
    #dgc-blog .dgc-popular-card {
        border-radius: 18px;
    }
}

/* =========================================================
   END V21
========================================================= */