/* ==========================================================
   VARNOO — ARTICLE PAGE
   Scoped Article Styles
   Does NOT modify the main Varnoo stylesheet
   ========================================================== */


/* ==========================================================
   FONTS
   ========================================================== */

@font-face {
  font-family: "Dubai";
  src: url("../fonts/DUBAI-LIGHT.TTF") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Dubai";
  src: url("../fonts/DUBAI-REGULAR.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Dubai";
  src: url("../fonts/DUBAI-MEDIUM.TTF") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Dubai";
  src: url("../fonts/DUBAI-BOLD.TTF") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


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

.varnoo-article-page {

  --article-yellow: #fee600;
  --article-bg: #0d0d0f;
  --article-bg-soft: #121214;
  --article-border: rgba(255,255,255,.11);
  --article-text: #f4f3f5;
  --article-muted: #a8a6ad;

  direction: rtl;

  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(254,230,0,.035),
      transparent 30%
    ),
    var(--article-bg);

  color: var(--article-text);

  font-family: "Dubai", sans-serif;

  overflow: hidden;

  position: relative;
}


.varnoo-article-page *,
.varnoo-article-page *::before,
.varnoo-article-page *::after {

  box-sizing: border-box;

}


.varnoo-article-page img {

  max-width: 100%;
  height: auto;
  display: block;

}


.varnoo-article-page a {

  text-decoration: none;

}


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

.varnoo-article-hero {

  padding: 150px 0 105px;

  position: relative;

}


.varnoo-article-hero::before {

  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  border: 1px solid rgba(254,230,0,.08);

  border-radius: 50%;

  left: -260px;
  top: 60px;

}


.varnoo-article-hero-grid {

  display: grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(300px, .75fr);

  gap: 80px;

  align-items: center;

}


.varnoo-article-kicker {

  color: var(--article-yellow);

  font-size: 12px;

  letter-spacing: 4px;

  direction: ltr;

  margin-bottom: 28px;

}


.varnoo-article-meta {

  display: flex;

  align-items: center;

  gap: 14px;

  color: #77757c;

  font-size: 12px;

  margin-bottom: 32px;

}


.meta-dot {

  width: 4px;
  height: 4px;

  background: var(--article-yellow);

  border-radius: 50%;

  display: inline-block;

}


.varnoo-article-hero h1 {

  font-family: "Dubai", sans-serif;

  font-size: clamp(45px, 6vw, 82px);

  font-weight: 500;

  line-height: 1.25;

  letter-spacing: -1.5px;

  margin: 0;

  max-width: 950px;

}


.varnoo-article-hero h1 em {

  color: var(--article-yellow);

  font-style: normal;

}


.varnoo-article-lead {

  max-width: 730px;

  color: #b8b6bd;

  font-size: 19px;

  line-height: 2.25;

  margin: 38px 0 45px;

}


.varnoo-article-author {

  display: flex;

  align-items: center;

  gap: 15px;

}


.author-avatar {

  width: 45px;
  height: 45px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 1px solid rgba(254,230,0,.5);

  color: var(--article-yellow);

  font-family: Arial, sans-serif;

  font-size: 17px;

}


.author-info {

  display: flex;

  flex-direction: column;

  gap: 2px;

}


.author-info strong {

  color: #fff;

  font-size: 14px;

  font-weight: 500;

}


.author-info span {

  color: #77757e;

  font-size: 11px;

}


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

.varnoo-article-hero-visual {

  min-height: 480px;

  position: relative;

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

  background:

    linear-gradient(
      135deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.005)
    );

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

}


.varnoo-article-hero-visual::before {

  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  border: 1px solid rgba(254,230,0,.22);

  transform: rotate(45deg);

}


.varnoo-article-hero-visual::after {

  content: "";

  position: absolute;

  width: 210px;
  height: 210px;

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

  transform: rotate(45deg);

}


.hero-visual-number {

  position: absolute;

  top: 25px;
  left: 25px;

  color: var(--article-yellow);

  font-size: 11px;

  letter-spacing: 3px;

  direction: ltr;

}


.hero-visual-word {

  position: relative;

  z-index: 2;

  color: #fff;

  font-family: Arial, sans-serif;

  font-size: clamp(28px, 4vw, 48px);

  line-height: .95;

  font-weight: 700;

  letter-spacing: -2px;

  direction: ltr;

  text-align: center;

}


.hero-visual-line {

  position: absolute;

  width: 1px;
  height: 110px;

  background: var(--article-yellow);

  bottom: -35px;
  right: 55px;

}


/* ==========================================================
   COVER
   ========================================================== */

.varnoo-article-cover {

  padding: 0 0 130px;

}


.article-cover-box {

  min-height: 490px;

  position: relative;

  overflow: hidden;

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

  background:

    radial-gradient(
      circle at 75% 40%,
      rgba(254,230,0,.08),
      transparent 28%
    ),

    linear-gradient(
      135deg,
      #171719,
      #0c0c0e
    );

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 70px;

}


.article-cover-box::before {

  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

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

  border-radius: 50%;

  left: 10%;

  top: 50%;

  transform: translateY(-50%);

}


.cover-label {

  position: relative;

  z-index: 2;

  color: var(--article-yellow);

  font-family: Arial, sans-serif;

  font-size: 10px;

  letter-spacing: 4px;

  direction: ltr;

  margin-bottom: 25px;

}


.cover-title {

  position: relative;

  z-index: 2;

  color: #fff;

  font-family: Arial, sans-serif;

  font-weight: 700;

  font-size: clamp(42px, 7vw, 92px);

  line-height: .92;

  letter-spacing: -4px;

  direction: ltr;

}


.cover-symbol {

  position: absolute;

  left: 12%;

  top: 50%;

  transform: translateY(-50%);

  display: flex;

  flex-direction: column;

  gap: 9px;

}


.cover-symbol span {

  display: block;

  width: 120px;

  height: 2px;

  background: var(--article-yellow);

}


.cover-symbol span:nth-child(2) {

  width: 80px;

}


.cover-symbol span:nth-child(3) {

  width: 45px;

}


/* ==========================================================
   CONTENT LAYOUT
   ========================================================== */

.varnoo-article-content {

  padding: 0 0 120px;

}


.varnoo-article-layout {

  display: grid;

  grid-template-columns: 230px minmax(0, 850px);

  gap: 90px;

  justify-content: center;

  align-items: start;

}


/* ==========================================================
   SIDEBAR
   ========================================================== */

.varnoo-article-sidebar {

  direction: ltr;

}


.article-sidebar-sticky {

  position: sticky;

  top: 120px;

}


.sidebar-label {

  display: block;

  color: var(--article-yellow);

  font-family: Arial, sans-serif;

  font-size: 9px;

  letter-spacing: 2px;

  margin-bottom: 17px;

}


.sidebar-line {

  width: 100%;

  height: 1px;

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

  margin-bottom: 18px;

}


.article-sidebar-sticky > a {

  display: block;

  color: #77757d;

  font-family: "Dubai", sans-serif;

  font-size: 11px;

  line-height: 1.8;

  margin-bottom: 8px;

  transition: .25s ease;

}


.article-sidebar-sticky > a:hover {

  color: #fff;

  transform: translateX(-4px);

}


.sidebar-share {

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

  margin-top: 30px;

  padding-top: 20px;

}


.sidebar-share > span {

  display: block;

  color: #65636a;

  font-family: Arial, sans-serif;

  font-size: 9px;

  letter-spacing: 2px;

  margin-bottom: 14px;

}


.sidebar-share > div {

  display: flex;

  gap: 8px;

}


.sidebar-share a {

  width: 30px;
  height: 30px;

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

  display: flex;

  align-items: center;
  justify-content: center;

  color: #aaa;

  font-size: 12px;

  transition: .25s ease;

}


.sidebar-share a:hover {

  border-color: var(--article-yellow);

  color: var(--article-yellow);

}


/* ==========================================================
   BODY
   ========================================================== */

.varnoo-article-body {

  min-width: 0;

  direction: rtl;

}


.varnoo-article-body p {

  color: #aaa8af;

  font-size: 18px;

  line-height: 2.35;

  margin: 0 0 25px;

}


.varnoo-article-body strong {

  color: #eee;

  font-weight: 500;

}


.article-intro {

  color: #dedce1 !important;

  font-size: 23px !important;

  line-height: 2.15 !important;

  font-weight: 400;

  margin-bottom: 35px !important;

}


.varnoo-article-body h2 {

  color: #fff;

  font-size: clamp(30px, 4vw, 43px);

  line-height: 1.45;

  font-weight: 500;

  margin: 0 0 30px;

}


.varnoo-article-body h3 {

  color: #eee;

  font-size: 20px;

  font-weight: 500;

  margin: 40px 0 20px;

}


.varnoo-article-body ul {

  padding: 0 25px 0 0;

  margin: 0 0 32px;

}


.varnoo-article-body li {

  color: #aaa8af;

  font-size: 17px;

  line-height: 2;

  margin-bottom: 8px;

  padding-right: 8px;

}


.varnoo-article-body li::marker {

  color: var(--article-yellow);

}


/* ==========================================================
   OPENING NOTE
   ========================================================== */

.article-opening-note {

  border-right: 2px solid var(--article-yellow);

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

  padding: 28px 30px;

  margin: 50px 0 100px;

}


.article-opening-note span {

  display: block;

  color: var(--article-yellow);

  font-family: Arial, sans-serif;

  font-size: 9px;

  letter-spacing: 3px;

  direction: ltr;

  margin-bottom: 13px;

}


.article-opening-note strong {

  display: block;

  color: #e7e5e9;

  font-size: 20px;

  line-height: 1.9;

}


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

.article-section {

  position: relative;

  padding-top: 25px;

  margin-bottom: 115px;

}


.article-section-number {

  color: var(--article-yellow);

  font-family: Arial, sans-serif;

  font-size: 10px;

  letter-spacing: 3px;

  direction: ltr;

  margin-bottom: 16px;

}


.article-section h2 {

  position: relative;

}


.article-section h2::after {

  content: "";

  display: block;

  width: 45px;
  height: 2px;

  background: var(--article-yellow);

  margin-top: 20px;

}


/* ==========================================================
   BLOCKQUOTE
   ========================================================== */

.varnoo-article-body blockquote {

  margin: 45px 0;

  padding: 28px 30px;

  border-right: 2px solid var(--article-yellow);

  background: rgba(254,230,0,.025);

  color: #e9e7eb;

  font-size: 21px;

  line-height: 1.9;

}


/* ==========================================================
   BIG QUOTE
   ========================================================== */

.article-big-quote {

  color: #fff;

  font-size: 25px;

  line-height: 1.9;

  padding: 35px;

  margin: 40px 0;

  border: 1px solid rgba(254,230,0,.18);

  background: rgba(254,230,0,.025);

}


/* ==========================================================
   ANSWER
   ========================================================== */

.article-answer {

  color: var(--article-yellow);

  font-size: 42px;

  font-weight: 500;

  margin: 25px 0 35px;

}


/* ==========================================================
   CHANNEL GRID
   ========================================================== */

.article-channel-grid {

  display: grid;

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

  border-top: 1px solid var(--article-border);

  border-right: 1px solid var(--article-border);

  margin: 40px 0;

}


.article-channel-grid > div {

  padding: 25px;

  border-left: 1px solid var(--article-border);

  border-bottom: 1px solid var(--article-border);

}


.article-channel-grid span {

  display: block;

  color: var(--article-yellow);

  font-family: Arial, sans-serif;

  font-size: 9px;

  letter-spacing: 2px;

  direction: ltr;

  margin-bottom: 12px;

}


.article-channel-grid strong {

  display: block;

  font-size: 17px;

}


/* ==========================================================
   QUESTION BOX
   ========================================================== */

.article-question-box {

  margin: 45px 0;

  padding: 40px;

  background: #151517;

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

}


.article-question-box span {

  display: block;

  color: var(--article-yellow);

  font-family: Arial, sans-serif;

  font-size: 9px;

  letter-spacing: 3px;

  direction: ltr;

  margin-bottom: 20px;

}


.article-question-box strong {

  font-size: 28px;

  line-height: 1.8;

  color: #fff;

}


/* ==========================================================
   VISUAL BREAK
   ========================================================== */

.article-visual-break {

  min-height: 420px;

  margin: 100px 0 120px;

  position: relative;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 70% 50%,
      rgba(254,230,0,.11),
      transparent 27%
    ),

    #151517;

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

}


.article-visual-break::before {

  content: "";

  position: absolute;

  width: 350px;
  height: 350px;

  border: 1px solid rgba(254,230,0,.2);

  border-radius: 50%;

  right: -80px;

  top: 50%;

  transform: translateY(-50%);

}


.article-visual-break::after {

  content: "";

  position: absolute;

  width: 500px;
  height: 1px;

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

  right: 0;

  top: 50%;

  transform: rotate(-35deg);

}


.visual-break-content {

  position: relative;

  z-index: 2;

  padding: 65px;

}


.visual-break-content span {

  display: block;

  color: var(--article-yellow);

  font-family: Arial, sans-serif;

  font-size: 9px;

  letter-spacing: 3px;

  direction: ltr;

  margin-bottom: 20px;

}


.visual-break-content strong {

  display: block;

  color: #fff;

  font-family: Arial, sans-serif;

  font-size: clamp(30px, 5vw, 55px);

  line-height: .95;

  letter-spacing: -2px;

  direction: ltr;

}


/* ==========================================================
   KEYWORD
   ========================================================== */

.article-keyword {

  padding: 25px 30px;

  border: 1px dashed rgba(254,230,0,.35);

  background: rgba(254,230,0,.025);

  color: var(--article-yellow);

  font-size: 18px;

  line-height: 1.8;

  margin: 35px 0;

}


/* ==========================================================
   CONTENT TYPES
   ========================================================== */

.article-content-types {

  display: grid;

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

  gap: 12px;

  margin: 40px 0;

}


.article-content-types > div {

  padding: 25px;

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

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

}


.article-content-types span {

  display: block;

  color: var(--article-yellow);

  font-family: Arial, sans-serif;

  font-size: 10px;

  margin-bottom: 15px;

  direction: ltr;

}


.article-content-types strong {

  display: block;

  color: #fff;

  font-size: 18px;

  margin-bottom: 8px;

}


.article-content-types p {

  font-size: 14px !important;

  margin: 0 !important;

  line-height: 1.9 !important;

}


/* ==========================================================
   FUNNEL
   ========================================================== */

.article-funnel {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;

  padding: 35px 20px;

  margin: 40px 0;

  background: #151517;

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

}


.article-funnel span {

  color: #eee;

  font-size: 14px;

  padding: 9px 13px;

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

}


.article-funnel span:last-child {

  border-color: var(--article-yellow);

  color: var(--article-yellow);

}


.article-funnel b {

  color: var(--article-yellow);

  font-size: 15px;

}


/* ==========================================================
   80 / 20
   ========================================================== */

.article-big-number {

  display: flex;

  align-items: baseline;

  gap: 10px;

  direction: ltr;

  margin: 35px 0;

}


.article-big-number span {

  color: #fff;

  font-family: Arial, sans-serif;

  font-size: clamp(80px, 13vw, 150px);

  line-height: .8;

  font-weight: 700;

}


.article-big-number small {

  color: var(--article-yellow);

  font-family: Arial, sans-serif;

  font-size: 40px;

}


.article-big-number strong {

  color: var(--article-yellow);

  font-family: Arial, sans-serif;

  font-size: clamp(60px, 10vw, 115px);

}


/* ==========================================================
   PLAN
   ========================================================== */

.article-plan {

  margin: 120px 0;

  padding: 55px;

  background: #151517;

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

}


.article-plan h2 {

  margin-bottom: 50px;

}


.article-plan-grid {

  display: grid;

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

  gap: 1px;

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

}


.plan-card {

  background: #151517;

  padding: 30px 25px;

}


.plan-card > span {

  display: block;

  color: var(--article-yellow);

  font-family: Arial, sans-serif;

  font-size: 9px;

  letter-spacing: 2px;

  direction: ltr;

  margin-bottom: 20px;

}


.plan-card h3 {

  margin: 0 0 20px;

  color: #fff;

  font-size: 23px;

}


.plan-card ul {

  margin: 0;

  padding-right: 18px;

}


.plan-card li {

  font-size: 14px;

  line-height: 1.9;

  margin-bottom: 6px;

}


/* ==========================================================
   FINAL
   ========================================================== */

.article-final {

  margin-bottom: 120px;

}


.article-final-statement {

  margin-top: 50px;

  padding: 40px;

  border-right: 3px solid var(--article-yellow);

  background: rgba(254,230,0,.025);

  color: #eee;

  font-size: 21px;

  line-height: 2;

}


.article-final-statement strong {

  display: block;

  color: var(--article-yellow);

  font-size: 25px;

  margin-top: 8px;

}


/* ==========================================================
   SUMMARY
   ========================================================== */

.article-summary {

  padding: 60px;

  background: #f4f3ef;

  color: #111;

  margin-bottom: 100px;

}


.article-summary h2 {

  color: #111;

}


.article-summary p {

  color: #555;

}


.summary-highlight {

  margin-top: 35px;

  padding-top: 25px;

  border-top: 1px solid #d3d0c9;

  color: #111;

  font-size: 22px;

  line-height: 1.9;

  font-weight: 500;

}


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

.article-faq {

  margin-bottom: 80px;

}


.faq-item {

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

  padding: 30px 0;

}


.faq-item:last-child {

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

}


.faq-item h3 {

  color: #fff;

  font-size: 20px;

  margin: 0 0 14px;

}


.faq-item p {

  margin: 0;

  font-size: 16px;

  color: #929097;

}


/* ==========================================================
   TAGS
   ========================================================== */

.varnoo-article-tags {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

  padding-top: 35px;

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

}


.varnoo-article-tags > span {

  color: #77757c;

  font-size: 12px;

  margin-left: 8px;

}


.varnoo-article-tags a {

  color: #aaa8ae;

  font-size: 11px;

  padding: 7px 13px;

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

  transition: .25s ease;

}


.varnoo-article-tags a:hover {

  color: #111;

  background: var(--article-yellow);

  border-color: var(--article-yellow);

}


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

.varnoo-article-cta {

  padding: 130px 0;

  background:

    radial-gradient(
      circle at 50% 0%,
      rgba(254,230,0,.08),
      transparent 40%
    ),

    #151517;

  border-top: 1px solid rgba(255,255,255,.07);

  border-bottom: 1px solid rgba(255,255,255,.07);

  text-align: center;

}


.varnoo-article-cta-inner {

  max-width: 850px;

  margin: auto;

}


.varnoo-article-cta-inner > span {

  display: block;

  color: var(--article-yellow);

  font-family: Arial, sans-serif;

  font-size: 10px;

  letter-spacing: 4px;

  direction: ltr;

  margin-bottom: 25px;

}


.varnoo-article-cta h2 {

  color: #fff;

  font-size: clamp(35px, 5vw, 62px);

  line-height: 1.35;

  font-weight: 500;

  margin: 0 0 25px;

}


.varnoo-article-cta p {

  color: #99979e;

  font-size: 18px;

  line-height: 2;

  max-width: 650px;

  margin: 0 auto 35px;

}


.varnoo-article-cta .cs_btn {

  font-family: "Dubai", sans-serif;

}


/* ==========================================================
   NAVIGATION
   ========================================================== */

.varnoo-article-navigation {

  padding: 0;

  background: #0d0d0f;

}


.article-navigation-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

}


.article-nav-item {

  min-height: 270px;

  padding: 55px;

  display: flex;

  flex-direction: column;

  justify-content: center;

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

  position: relative;

  transition: .3s ease;

}


.article-nav-item:last-child {

  border-left: 0;

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

}


.article-nav-item:hover {

  background: #141416;

}


.article-nav-item span {

  color: var(--article-yellow);

  font-size: 11px;

  margin-bottom: 18px;

}


.article-nav-item strong {

  color: #eee;

  font-size: 24px;

  line-height: 1.7;

  font-weight: 400;

  max-width: 500px;

}


.article-nav-item small {

  position: absolute;

  left: 50px;

  bottom: 45px;

  color: var(--article-yellow);

  font-family: Arial, sans-serif;

  font-size: 22px;

}


.article-nav-next small {

  left: auto;

  right: 50px;

}


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

@media (max-width: 1199px) {

  .varnoo-article-layout {

    grid-template-columns: 180px minmax(0, 760px);

    gap: 55px;

  }

}


@media (max-width: 991px) {

  .varnoo-article-hero {

    padding: 110px 0 80px;

  }


  .varnoo-article-hero-grid {

    grid-template-columns: 1fr;

    gap: 55px;

  }


  .varnoo-article-hero-visual {

    min-height: 350px;

  }


  .varnoo-article-layout {

    display: block;

  }


  .varnoo-article-sidebar {

    display: none;

  }


  .varnoo-article-body {

    max-width: 850px;

    margin: auto;

  }


  .article-plan-grid {

    grid-template-columns: 1fr;

  }


  .article-plan {

    padding: 40px;

  }

}


@media (max-width: 767px) {

  .varnoo-article-hero {

    padding: 80px 0 65px;

  }


  .varnoo-article-hero h1 {

    font-size: 43px;

    line-height: 1.3;

    letter-spacing: -.5px;

  }


  .varnoo-article-lead {

    font-size: 17px;

    line-height: 2.15;

    margin: 28px 0 35px;

  }


  .varnoo-article-meta {

    flex-wrap: wrap;

    gap: 8px 12px;

  }


  .varnoo-article-cover {

    padding-bottom: 75px;

  }


  .article-cover-box {

    min-height: 350px;

    padding: 35px;

  }


  .cover-title {

    font-size: 50px;

    letter-spacing: -2px;

  }


  .cover-symbol {

    left: 8%;

  }


  .varnoo-article-content {

    padding-bottom: 75px;

  }


  .varnoo-article-body p {

    font-size: 16px;

    line-height: 2.2;

  }


  .article-intro {

    font-size: 20px !important;

    line-height: 2.1 !important;

  }


  .varnoo-article-body h2 {

    font-size: 30px;

  }


  .article-opening-note {

    margin: 40px 0 75px;

    padding: 23px;

  }


  .article-opening-note strong {

    font-size: 17px;

  }


  .article-section {

    margin-bottom: 80px;

  }


  .article-big-quote {

    font-size: 19px;

    padding: 25px;

  }


  .article-channel-grid {

    grid-template-columns: 1fr;

  }


  .article-content-types {

    grid-template-columns: 1fr;

  }


  .article-question-box {

    padding: 28px;

  }


  .article-question-box strong {

    font-size: 22px;

  }


  .article-visual-break {

    min-height: 330px;

    margin: 70px 0 80px;

  }


  .visual-break-content {

    padding: 40px 30px;

  }


  .visual-break-content strong {

    font-size: 39px;

  }


  .article-funnel {

    justify-content: flex-start;

  }


  .article-funnel b {

    display: none;

  }


  .article-big-number span {

    font-size: 90px;

  }


  .article-big-number strong {

    font-size: 75px;

  }


  .article-plan {

    padding: 30px 22px;

    margin: 80px 0;

  }


  .article-summary {

    padding: 35px 25px;

    margin-bottom: 70px;

  }


  .summary-highlight {

    font-size: 19px;

  }


  .varnoo-article-cta {

    padding: 90px 0;

  }


  .varnoo-article-cta h2 {

    font-size: 35px;

  }


  .varnoo-article-cta p {

    font-size: 16px;

  }


  .article-navigation-grid {

    grid-template-columns: 1fr;

  }


  .article-nav-item {

    min-height: 210px;

    padding: 35px 25px;

    border-left: 0;

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

  }


  .article-nav-item:last-child {

    border-right: 0;

  }


  .article-nav-item small {

    left: 25px;

    bottom: 25px;

  }


  .article-nav-next small {

    right: 25px;

    left: auto;

  }

}


@media (max-width: 575px) {

  .varnoo-article-hero h1 {

    font-size: 38px;

  }


  .varnoo-article-hero-visual {

    min-height: 290px;

  }


  .hero-visual-word {

    font-size: 31px;

  }


  .varnoo-article-meta {

    font-size: 10px;

  }


  .article-cover-box {

    min-height: 290px;

    padding: 28px;

  }


  .cover-title {

    font-size: 40px;

  }


  .article-cover-box::before {

    width: 260px;
    height: 260px;

  }


  .article-visual-break {

    min-height: 280px;

  }


  .visual-break-content strong {

    font-size: 32px;

  }


  .article-funnel span {

    font-size: 12px;

  }


  .article-big-number span {

    font-size: 70px;

  }


  .article-big-number strong {

    font-size: 60px;

  }


  .article-final-statement {

    padding: 25px;

    font-size: 17px;

  }


  .article-final-statement strong {

    font-size: 20px;

  }


  .faq-item h3 {

    font-size: 17px;

    line-height: 1.8;

  }


  .varnoo-article-tags {

    gap: 6px;

  }


  .varnoo-article-tags a {

    font-size: 10px;

  }

}


/* ==========================================================
   FONT FALLBACK
   ========================================================== */

@media (min-width: 1px) {

  .varnoo-article-page,
  .varnoo-article-page h1,
  .varnoo-article-page h2,
  .varnoo-article-page h3,
  .varnoo-article-page p,
  .varnoo-article-page a,
  .varnoo-article-page li,
  .varnoo-article-page span,
  .varnoo-article-page strong {

    font-family: "Dubai", Tahoma, Arial, sans-serif;

  }

}