.elementor-22518 .elementor-element.elementor-element-34679c9{--display:flex;}.elementor-22518 .elementor-element.elementor-element-34679c9:not(.elementor-motion-effects-element-type-background), .elementor-22518 .elementor-element.elementor-element-34679c9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-22518 .elementor-element.elementor-element-456c802 > .elementor-widget-container{background-color:#000000;}/* Start custom CSS for html, class: .elementor-element-456c802 */```css
/* =========================================
   GLOBAL
========================================= */

html {
  scroll-behavior: smooth;
}

.sp-social-post,
.sp-social-post * {
  box-sizing: border-box;
}

.sp-social-post {
  --sp-gold: #d7a52d;
  --sp-gold-light: #efbb42;
  --sp-bg: #020303;
  --sp-card: #0c0e0e;
  --sp-text: #f4f4f4;
  --sp-muted: #b9b9b9;
  --sp-border: rgba(215, 165, 45, 0.62);

  width: 100%;
  padding: 42px 20px 75px;

  direction: ltr;
  text-align: left;

  color: var(--sp-text);
  background: var(--sp-bg);
  font-family: inherit;
}

.sp-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

#at-a-glance,
#choose-right-platforms,
#build-trust-recognition,
#create-valuable-content,
#convert-engagement-leads,
#measure-improve,
#content-ideas,
#common-mistakes,
#final-thoughts,
#frequently-asked-questions {
  scroll-margin-top: 130px;
}


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

.sp-hero {
  margin-bottom: 34px;
}

.sp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(400px, 1fr);
  align-items: center;
  gap: 52px;
}

.sp-category {
  display: block;
  margin-bottom: 16px;

  color: var(--sp-gold);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.sp-hero-content h1 {
  max-width: 650px;
  margin: 0 0 20px;

  color: #fff;
  font-size: clamp(39px, 4.8vw, 61px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.4px;
}

.sp-hero-description {
  max-width: 610px;
  margin: 0 0 25px;

  color: var(--sp-muted);
  font-size: 16px;
  line-height: 1.8;
}

.sp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 13px 28px;

  color: #d1d1d1;
  font-size: 13px;
}

.sp-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sp-meta span::before {
  content: "";

  width: 9px;
  height: 9px;

  border: 1px solid var(--sp-gold);
  border-radius: 50%;
}

.sp-hero-image {
  height: 355px;
  margin: 0;

  position: relative;
  overflow: hidden;

  border: 1px solid var(--sp-border);
  border-radius: 20px;

  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.4),
    0 0 25px rgba(215, 165, 45, 0.08);
}

.sp-hero-image img {
  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;

  transition: transform 0.45s ease;
}

.sp-hero-image:hover img {
  transform: scale(1.035);
}


/* =========================================
   AT A GLANCE
========================================= */

.sp-glance {
  width: 100%;
  margin-bottom: 18px;
  padding: 21px 25px;

  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 17px;

  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 94% 50%,
      rgba(215, 165, 45, 0.13),
      transparent 23%
    ),
    var(--sp-card);

  border: 1px solid var(--sp-border);
  border-radius: 11px;
}

.sp-glance::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: 0;

  width: 130px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--sp-gold),
      transparent
    );

  box-shadow: 0 0 13px rgba(215, 165, 45, 0.7);
}

.sp-glance-icon {
  width: 42px;
  height: 42px;
  color: var(--sp-gold);
}

.sp-glance-icon svg {
  width: 100%;
  height: 100%;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.sp-label {
  display: block;
  margin-bottom: 5px;

  color: var(--sp-gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.65px;
}

.sp-glance p {
  margin: 0;

  color: #d0d0d0;
  font-size: 14px;
  line-height: 1.65;
}


/* =========================================
   FEATURE CARDS
========================================= */

.sp-feature-grid {
  width: 100%;
  margin-bottom: 24px;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.sp-feature-card {
  min-height: 158px;
  padding: 21px;

  display: grid;
  grid-template-columns: 57px minmax(0, 1fr);
  align-items: start;
  gap: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.018),
      rgba(215, 165, 45, 0.026)
    ),
    var(--sp-card);

  border: 1px solid var(--sp-border);
  border-radius: 10px;

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

.sp-feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--sp-gold-light);

  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.sp-feature-icon {
  width: 52px;
  height: 52px;
  color: var(--sp-gold);
}

.sp-feature-icon svg {
  width: 100%;
  height: 100%;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sp-feature-card h3 {
  margin: 0 0 7px;

  color: var(--sp-gold-light);
  font-size: 17px;
  line-height: 1.3;
}

.sp-feature-card p {
  margin: 0 0 9px;

  color: #d1d1d1;
  font-size: 13px;
  line-height: 1.55;
}

.sp-feature-card small {
  color: #929292;
  font-size: 11px;
}


/* =========================================
   INTRODUCTION
========================================= */

.sp-introduction {
  margin: 25px 0 34px;
}

.sp-introduction p {
  margin: 0 0 13px;

  color: #bebebe;
  font-size: 14px;
  line-height: 1.85;
}

.sp-introduction p:last-child {
  margin-bottom: 0;
}


/* =========================================
   MAIN LAYOUT
========================================= */

.sp-layout {
  width: 100%;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  align-items: start;
  gap: 52px;
}

.sp-main {
  width: 100%;
  min-width: 0;
}

.sp-sidebar {
  width: 100%;
  min-width: 0;

  position: sticky;
  top: 100px;
  align-self: start;
}


/* =========================================
   STEPS
========================================= */

.sp-step {
  width: 100%;
  margin-bottom: 29px;

  display: grid;
  grid-template-columns: 47px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.sp-step-number {
  width: 42px;
  height: 42px;

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

  color: var(--sp-gold-light);
  font-size: 17px;
  font-weight: 750;

  background: #0a0c0c;
  border: 2px solid rgba(215, 165, 45, 0.8);
  border-radius: 50%;
}

.sp-step-content {
  padding-bottom: 23px;

  border-bottom: 1px solid rgba(215, 165, 45, 0.25);
}

.sp-step-content h2 {
  margin: 0 0 7px;

  color: #fff;
  font-size: 19px;
  font-weight: 750;
  line-height: 1.4;
}

.sp-step-content p {
  margin: 0 0 7px;

  color: #bdbdbd;
  font-size: 13px;
  line-height: 1.7;
}

.sp-step-content ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.sp-step-content li {
  margin-bottom: 5px;
  padding-left: 18px;

  position: relative;

  color: #d0d0d0;
  font-size: 12.5px;
  line-height: 1.5;
}

.sp-step-content li::before {
  content: "✓";

  position: absolute;
  top: 0;
  left: 0;

  color: var(--sp-gold);
  font-size: 12px;
  font-weight: 800;
}


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

.sp-social-post blockquote.sp-quote {
  width: 100% !important;
  min-height: 145px;

  margin: 6px 0 31px !important;
  padding: 25px 27px !important;

  display: flex !important;
  align-items: center !important;
  gap: 21px !important;

  position: relative;
  overflow: hidden;

  direction: ltr !important;
  text-align: left !important;

  background:
    radial-gradient(
      circle at 90% 100%,
      rgba(215, 165, 45, 0.12),
      transparent 32%
    ),
    #0d0f0f !important;

  border: 1px solid var(--sp-border) !important;
  border-radius: 8px !important;
}

.sp-social-post blockquote.sp-quote::before {
  content: none !important;
  display: none !important;
}

.sp-social-post blockquote.sp-quote::after {
  content: "";

  position: absolute;
  right: 13%;
  bottom: 0;

  width: 120px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--sp-gold),
      transparent
    );

  box-shadow: 0 0 12px rgba(215, 165, 45, 0.75);
}

.sp-quote-mark {
  width: 52px;
  min-width: 52px;

  color: var(--sp-gold-light);
  font-family: Georgia, serif;
  font-size: 70px;
  font-weight: 700;
  line-height: 0.7;
  text-align: center;
}

.sp-quote-content {
  flex: 1;
  min-width: 0;
}

.sp-quote-content p {
  width: 100%;
  margin: 0 0 9px !important;

  color: #f5f5f5;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;

  white-space: normal;
  word-break: normal;
}

.sp-quote-content cite {
  display: block;

  color: var(--sp-gold);
  font-size: 12px;
  font-style: normal;
}


/* =========================================
   INFO BOXES
========================================= */

.sp-info-box {
  width: 100%;
  margin-bottom: 13px;
  padding: 19px 21px;

  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 15px;

  background:
    radial-gradient(
      circle at 95% 50%,
      rgba(215, 165, 45, 0.09),
      transparent 27%
    ),
    var(--sp-card);

  border: 1px solid var(--sp-border);
  border-radius: 10px;
}

.sp-info-icon {
  width: 39px;
  height: 39px;
  color: var(--sp-gold);
}

.sp-info-icon svg {
  width: 100%;
  height: 100%;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sp-list-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 28px;
}

.sp-list-columns.sp-two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sp-list-columns ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-list-columns li {
  margin-bottom: 5px;
  padding-left: 14px;

  position: relative;

  color: #d0d0d0;
  font-size: 11.5px;
  line-height: 1.45;
}

.sp-list-columns li::before {
  content: "•";

  position: absolute;
  left: 0;

  color: var(--sp-gold);
}

.sp-warning-box {
  background:
    radial-gradient(
      circle at 95% 50%,
      rgba(215, 165, 45, 0.07),
      transparent 27%
    ),
    #0e0e0d;
}


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

.sp-final-box {
  width: 100%;
  padding: 20px 22px;

  display: grid;
  grid-template-columns: 45px minmax(0, 1fr) 62px;
  align-items: center;
  gap: 17px;

  background:
    radial-gradient(
      circle at 88% 50%,
      rgba(215, 165, 45, 0.12),
      transparent 26%
    ),
    var(--sp-card);

  border: 1px solid var(--sp-border);
  border-radius: 10px;
}

.sp-final-quote {
  color: var(--sp-gold);
  font-family: Georgia, serif;
  font-size: 66px;
  font-weight: 700;
  line-height: 0.65;
}

.sp-final-box h2 {
  margin: 0 0 7px;

  color: #fff;
  font-size: 18px;
  line-height: 1.4;
}

.sp-final-box p {
  margin: 0;

  color: #cacaca;
  font-size: 12.5px;
  line-height: 1.65;
}

.sp-final-icon {
  width: 56px;
  height: 56px;
  color: var(--sp-gold);
}

.sp-final-icon svg {
  width: 100%;
  height: 100%;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}


/* =========================================
   TABLE OF CONTENTS
========================================= */

.sp-toc {
  width: 100%;
  padding: 24px 22px;

  background:
    radial-gradient(
      circle at 100% 100%,
      rgba(215, 165, 45, 0.06),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #151717,
      #0d0f0f
    );

  border: 1px solid rgba(215, 165, 45, 0.55);
  border-radius: 12px;

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.sp-toc h3 {
  margin: 0 0 16px;

  color: #fff;
  font-size: 20px;
  line-height: 1.3;
}

.sp-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-toc li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  column-gap: 13px;
}

.sp-toc li::before {
  content: "";

  width: 6px;
  height: 6px;

  background: var(--sp-gold);
  border-radius: 50%;

  box-shadow:
    0 0 0 4px rgba(215, 165, 45, 0.07),
    0 0 10px rgba(215, 165, 45, 0.55);
}

.sp-toc a {
  width: 100%;
  min-height: 46px;
  padding: 12px 0;

  display: flex;
  align-items: center;

  color: #dedede;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;

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

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.sp-toc li:last-child a {
  border-bottom: none;
}

.sp-toc li:hover a {
  color: var(--sp-gold-light);
  transform: translateX(4px);
}


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

.sp-faq {
  width: 100%;
  margin: 34px 0 0;
  clear: both;
}

.sp-faq h2 {
  margin: 0 0 15px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  color: #fff;
  font-size: 20px;
}

.sp-faq h2 > span {
  width: 28px;
  height: 28px;

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

  color: var(--sp-gold);

  border: 1px solid rgba(215, 165, 45, 0.7);
  border-radius: 50%;
}

.sp-faq-list {
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-faq details {
  width: 100%;
  overflow: hidden;

  background: #111313;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.sp-faq summary {
  min-height: 44px;
  padding: 10px 13px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  color: #e8e8e8;
  font-size: 12.5px;
  font-weight: 550;

  cursor: pointer;
  list-style: none;
}

.sp-faq summary::-webkit-details-marker {
  display: none;
}

.sp-faq summary::marker {
  content: "";
}

.sp-faq summary b {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;

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

  color: var(--sp-gold);
  font-size: 14px;
  font-weight: 400;

  border: 1px solid rgba(215, 165, 45, 0.65);
  border-radius: 50%;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.sp-faq-answer {
  padding: 0 13px 14px;

  color: #b7b7b7;
  font-size: 12.5px;
  line-height: 1.75;
}

.sp-faq details[open] {
  border-color: rgba(215, 165, 45, 0.6);
}

.sp-faq details[open] summary b {
  color: #111;
  background: var(--sp-gold);
  transform: rotate(45deg);
}


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

@media (max-width: 1024px) {

  .sp-hero-grid {
    grid-template-columns:
      minmax(0, 1fr) minmax(330px, 0.9fr);

    gap: 34px;
  }

  .sp-hero-content h1 {
    font-size: 43px;
  }

  .sp-hero-image {
    height: 315px;
  }

  .sp-feature-grid {
    gap: 16px;
  }

  .sp-feature-card {
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 11px;
    padding: 17px;
  }

  .sp-feature-icon {
    width: 42px;
    height: 42px;
  }

  .sp-layout {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 28px;
  }

  .sp-sidebar {
    top: 80px;
  }

}


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

@media (max-width: 767px) {

  .sp-social-post {
    padding: 29px 14px 52px;
  }

  .sp-hero-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .sp-hero-content h1 {
    font-size: 34px;
    line-height: 1.17;
    letter-spacing: -0.7px;
  }

  .sp-hero-description {
    font-size: 15px;
  }

  .sp-hero-image {
    height: 260px;
    border-radius: 15px;
  }

  .sp-glance {
    padding: 18px 16px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
  }

  .sp-feature-grid {
    grid-template-columns: 1fr;
  }

  .sp-feature-card {
    min-height: 135px;
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .sp-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .sp-sidebar {
    position: relative;
    top: auto;
  }

  .sp-step {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
  }

  .sp-step-number {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .sp-step-content h2 {
    font-size: 17px;
  }

  .sp-social-post blockquote.sp-quote {
    min-height: auto;

    padding: 19px 16px !important;
    gap: 13px !important;
  }

  .sp-quote-mark {
    width: 39px;
    min-width: 39px;

    font-size: 55px;
  }

  .sp-quote-content p {
    font-size: 14px;
  }

  .sp-list-columns,
  .sp-list-columns.sp-two-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .sp-info-box {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 17px 15px;
  }

  .sp-final-box {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 17px 15px;
  }

  .sp-final-icon {
    display: none;
  }

  .sp-final-quote {
    font-size: 54px;
  }

  .sp-toc {
    width: 100%;
    padding: 22px 19px;
  }

  .sp-faq {
    margin-top: 34px;
  }

  .sp-faq h2 {
    justify-content: flex-start;
    font-size: 19px;
  }

}
```/* End custom CSS */