* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   transition: all 0.4s ease-in-out;
}

.last-updated {
   color: var(--text-disabled);
   font-size: 14px;
   margin-bottom: 20px;
}

body {
    margin: 0 auto;
    font-family: Arial, sans-serif;
    background: #f3f4f6;
    color: #111827;
}

:root {
   /* Typography */
   --primary-font: "Inter", sans-serif;
   --secondary-font: "Manrope", sans-serif;
   --mono-font: "JetBrains Mono", monospace;

   /* Layout */
   --container-max-width: 1280px;

   /* Transitions */
   --transition-fast: 150ms ease;
   --transition-normal: 250ms ease;
   --transition-slow: 350ms ease;
}

[data-theme="dark"] {
   ::selection {
      background: rgba(212, 175, 55, 0.85);
      color: #050505;
   }

   /* =======================================================
     BACKGROUNDS
     ======================================================= */

   --bg-primary: #050505;
   --bg-secondary: #161616;
   --bg-tertiary: #181614;
   --bg-quaternary: #181818;

   --bg-elevated: #1E1E1E;

   /* =======================================================
     SURFACES / CARDS
     ======================================================= */

   --surface-primary: #141414;
   --surface-secondary: #1B1B1B;
   --surface-tertiary: #232323;

   --surface-hover: #292929;
   --surface-active: #303030;

   --surface-solid: #181818;

   /* =======================================================
     GLASS
     ======================================================= */

   --glass-bg: rgba(15, 15, 15, 0.95);
   --glass-bg-strong: rgba(29, 22, 12, 0.897);
   --glass-bg-subtle: rgba(27, 24, 17, 0.932);

   --glass-border: rgba(44, 42, 35, 0.801);
   --glass-border-hover: rgba(212, 175, 55, 0.616);

   /* =======================================================
     HEADER
     ======================================================= */

   --header-bg: rgba(5, 5, 5, 0.877);

   --header-shadow: 0 10px 35px rgba(0, 0, 0, 0.40);

   --header-border: rgb(235, 180, 0);

   /* =======================================================
     FOOTER
     ======================================================= */

   --footer-bg: #030303;
   --footer-surface: rgba(255, 255, 255, 0.025);
   --footer-border: rgba(255, 255, 255, 0.06);

   /* =======================================================
     TYPOGRAPHY
     ======================================================= */

   --text-primary: #FFFFFF;
   --text-secondary: #D7D7D7;
   --text-muted: #9C9C9C;
   --text-subtle: #737373;
   --text-disabled: #555555;

   --text-inverse: #101010;
   --text-sec-inverse: #FFFFFF;

   /* =======================================================
     BRAND / BLACK ACCENT
     ======================================================= */

   --accent-primary: #C79A24;
   --accent-hover: #D9AE3D;
   --accent-active: #A97C13;

   --accent-bright: #E5C45B;
   --accent-soft: #ffefc1;

   --accent-subtle: rgba(199, 154, 36, 0.075);
   --accent-light: rgba(223, 167, 26, 0.13);
   --accent-medium: rgba(199, 154, 36, 0.21);
   --accent-strong: rgba(199, 154, 36, 0.34);

   --highlight-primary: #C79A24;

   /* =======================================================
     BUTTONS — PRIMARY
     ======================================================= */

   --btn-primary-bg: #C79A24;
   --btn-primary-hover: #c08d0c;
   --btn-primary-active: #755304;
   --btn-primary-disabled-bg: rgba(199, 154, 36, 0.25);
   --btn-primary-text: #1d1d1d;
   --btn-primary-shadow: rgb(202, 182, 0);

   /* =======================================================
     BUTTONS — SECONDARY
     ======================================================= */

   --btn-secondary-bg: rgba(121, 121, 121, 0.767);
   --btn-secondary-hover: rgba(110, 110, 110, 0.959);
   --btn-secondary-disabled-bg: rgba(94, 93, 93, 0.342);

   --btn-secondary-border: rgba(119, 118, 118, 0.616);
   --btn-secondary-border-hover: rgba(187, 187, 187, 0.815);

   --btn-secondary-text: #020202;

   /* =======================================================
     BUTTONS — GHOST
     ======================================================= */

   --btn-ghost-bg: transparent;
   --btn-ghost-hover: rgba(255, 255, 255, 0.055);
   --btn-ghost-text: #FFFFFF;

   /* =======================================================
     BORDERS - Primary
     ======================================================= */

   --border-primary: #c59907;
   --border-secondary: #ce9f07;

   --border-subtle: #55461491;

   --border-hover: #7a5f05;
   --border-accent: #ffdb67a2;

   --border-focus: #D4AF37;

   /* =======================================================
     BORDERS - Black
     ======================================================= */

   --border-black-primary: rgb(0, 0, 0);
   --border-black-secondary: rgba(0, 0, 0, 0.115);

   --border-black-subtle: rgba(0, 0, 0, 0.045);

   --border-black-hover: rgba(0, 0, 0, 0.18);
   --border-black-accent: rgba(71, 52, 8, 0.479);

   --border-black-focus: #000000;

   /* =======================================================
     INPUTS
     ======================================================= */

   --input-bg: rgb(46, 45, 45);
   --input-bg-focus: rgba(255, 255, 255, 0.055);

   --input-border: rgb(54, 53, 53);
   --input-border-hover: rgba(255, 255, 255, 0.15);
   --input-border-focus: #D4AF37;

   --input-placeholder: #737373;
   --input-text: #737373;

   /* =======================================================
     SKELETON LOADERS
     ======================================================= */

   --skeleton-base: #292929;
   --skeleton-highlight: #3D3D3D;
   --skeleton-border: #4A4A4A;
   /* Dashboard surfaces */
   --dashboard-card: #191816;
   --dashboard-card-hover: #24211B;
   --dashboard-card-border: rgba(229, 196, 91, 0.20);
   --dashboard-icon-surface: rgba(199, 154, 36, 0.16);
   --dashboard-upgrade-start: #362508;
   --dashboard-upgrade-end: #19150C;
   --dashboard-upgrade-text: #FFF7DF;
   --dashboard-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);

   /* =======================================================
     DIVIDERS
     ======================================================= */

   --divider: rgba(255, 255, 255, 0.065);
   --divider-strong: rgba(255, 255, 255, 0.11);

   /* =======================================================
     SHADOWS — Primary
     ======================================================= */

   --shadow-xs:
      0 0 6px rgb(211, 165, 14);

   --shadow-sm:
      0 0 12px rgb(211, 165, 14);

   --shadow-md:
      0 0 22px rgb(212, 175, 55);

   --shadow-lg:
      0 0 34px rgb(194, 152, 13);

   /* =======================================================
     SHADOWS — Secondary
     ======================================================= */

   --shadow-sec-xs:
      0 0 6px rgb(14, 11, 1);

   --shadow-sec-sm:
      0 0 12px rgb(14, 11, 1);

   --shadow-sec-md:
      0 0 22px rgb(14, 11, 1);

   --shadow-sec-lg:
      0 0 34px rgb(14, 11, 1);

   /* =======================================================
     SHADOWS — BLACK
     ======================================================= */

   --shadow-black-xs:
      0 0px 6px rgba(25, 30, 38, 0.05);

   --shadow-black-sm:
      0 0px 12px rgba(25, 30, 38, 0.075);

   --shadow-black-md:
      0 0px 22px rgba(25, 30, 38, 0.10);

   --shadow-black-lg:
      0 0px 34px rgba(25, 30, 38, 0.14);

   /* =======================================================
     SHADOWS — GOLD
     ======================================================= */

   --shadow-gold-xs:
      0 0 6px rgb(211, 165, 14);

   --shadow-gold-sm:
      0 0 12px rgb(211, 165, 14);

   --shadow-gold-md:
      0 0 22px rgb(212, 175, 55);

   --shadow-gold-lg:
      0 0 34px rgb(194, 152, 13);

   /* =======================================================
     STATUS
     ======================================================= */

   --success: #09a141;
   --success-bg: rgba(34, 197, 94, 0.199);

   --warning: #F59E0B;
   --warning-bg: rgba(245, 158, 11, 0.10);

   --danger: #EF4444;
   --danger-bg: rgba(239, 68, 68, 0.10);
   --danger-bg-hover: rgba(220, 38, 38, 0.274);

   --info: #3B82F6;
   --info-bg: rgba(59, 130, 246, 0.10);

   /* =======================================================
     OVERLAYS
     ======================================================= */

   --overlay: rgba(0, 0, 0, 0.42);
   --overlay-heavy: rgba(0, 0, 0, 0.72);

   /* =======================================================
     FOCUS
     ======================================================= */

   --focus-ring:
      0 0 0 3px rgba(212, 175, 55, 0.22);

   --loader-border-top: #A97912;

}

[data-theme="light"] {

   ::selection {
      background: #000000;
      color: #FFFFFF;
   }

   /* =======================================================
     BACKGROUNDS
     ======================================================= */

   --bg-primary: #F3F5F7;
   --bg-secondary: #ECEFF2;
   --bg-tertiary: #E5E8EC;
   --bg-quaternary: #DDE1E6;

   --bg-elevated: #FFFFFF;

   /* =======================================================
     SURFACES / CARDS
     ======================================================= */

   --surface-primary: rgb(255, 255, 255);
   --surface-secondary: rgba(255, 255, 255, 0.58);
   --surface-tertiary: rgba(255, 255, 255, 0.44);

   --surface-hover: rgba(255, 255, 255, 0.86);
   --surface-active: rgba(211, 207, 189, 0.822);

   --surface-solid: #FFFFFF;

   /* =======================================================
     GLASS
     ======================================================= */

   --glass-bg: rgba(233, 233, 233, 0.589);
   --glass-bg-strong: rgba(255, 246, 232, 0.651);
   --glass-bg-subtle: rgba(107, 106, 104, 0.678);

   --glass-border: rgba(255, 255, 255, 0.82);
   --glass-border-hover: rgba(199, 147, 36, 0.34);

   /* =======================================================
     HEADER
     ======================================================= */

   --header-bg: rgba(243, 245, 247, 0.68);

   --header-border: rgba(0, 0, 0, 0.07);

   --header-shadow:
      0 10px 35px rgba(30, 35, 42, 0.08);

   --header-border: rgb(0, 0, 0);

   /* =======================================================
     FOOTER
     ======================================================= */

   --footer-bg: #E7EAEE;
   --footer-surface: rgba(255, 255, 255, 0.42);
   --footer-border: rgba(0, 0, 0, 0.07);

   /* =======================================================
     TYPOGRAPHY
     ======================================================= */

   --text-primary: #111318;
   --text-secondary: #363A42;
   --text-muted: #69717C;
   --text-subtle: #8A929D;
   --text-disabled: #ADB3BB;

   --text-inverse: #FFFFFF;
   --text-sec-inverse: #101010;

   /* =======================================================
     BRAND / GOLD ACCENT
     ======================================================= */

   --accent-primary: #000000;
   --accent-hover: #111111;
   --accent-active: #000000;

   --accent-bright: #2b2b2b;
   --accent-soft: #4d4d4d;

   --accent-subtle: rgba(0, 0, 0, 0.08);
   --accent-light: rgba(0, 0, 0, 0.15);
   --accent-medium: rgba(0, 0, 0, 0.25);
   --accent-strong: rgba(0, 0, 0, 0.45);

   --highlight-primary: #C79A24;

   /* =======================================================
     BUTTONS — PRIMARY
     ======================================================= */

   --btn-primary-bg: #1a1400;
   --btn-primary-hover: #110d00;
   --btn-primary-active: #1a1919;
   --btn-primary-disabled-bg: rgba(0, 0, 0, 0.20);
   --btn-primary-text: #FFFFFF;
   --btn-primary-shadow: rgba(12, 12, 11, 0.815);

   /* =======================================================
     BUTTONS — SECONDARY
     ======================================================= */

   --btn-secondary-bg: rgb(212, 211, 211);
   --btn-secondary-hover: rgba(255, 255, 255, 0.82);

   --btn-secondary-border: rgba(0, 0, 0, 0.09);
   --btn-secondary-border-hover: rgba(199, 154, 36, 0.34);

   --btn-secondary-text: #15171B;

   /* =======================================================
     BUTTONS — GHOST
     ======================================================= */

   --btn-ghost-bg: transparent;
   --btn-ghost-hover: rgba(0, 0, 0, 0.045);
   --btn-ghost-text: #17191E;

   /* =======================================================
     BORDERS - Primary
     ======================================================= */

   --border-primary: rgba(0, 0, 0, 0.699);
   --border-secondary: rgba(0, 0, 0, 0.115);

   --border-subtle: rgba(0, 0, 0, 0.397);

   --border-hover: rgba(0, 0, 0, 0.18);
   --border-accent: rgba(199, 154, 36, 0.36);

   --border-focus: #000000;

   /* =======================================================
     BORDERS - Black
     ======================================================= */

   --border-black-primary: rgba(0, 0, 0, 0.075);
   --border-black-secondary: rgba(0, 0, 0, 0.115);

   --border-black-subtle: rgba(0, 0, 0, 0.045);

   --border-black-hover: rgba(0, 0, 0, 0.18);
   --border-black-accent: rgba(37, 28, 2, 0.473);

   --border-black-focus: #000000;

   /* =======================================================
     INPUTS
     ======================================================= */

   --input-bg: rgba(255, 255, 255, 0.60);
   --input-bg-focus: rgba(255, 255, 255, 0.88);

   --input-border: rgba(0, 0, 0, 0.085);
   --input-border-hover: rgba(0, 0, 0, 0.15);
   --input-border-focus: #C79A24;

   --input-placeholder: #8C949F;
   --input-text: #8A929D;

   /* =======================================================
     SKELETON LOADERS
     ======================================================= */

   --skeleton-base: #D9DEE5;
   --skeleton-highlight: #F5F7F9;
   --skeleton-border: #C4CBD4;
   /* Dashboard surfaces */
   --dashboard-card: #FDFCF9;
   --dashboard-card-hover: #F5F0E5;
   --dashboard-card-border: rgba(0, 0, 0, 0.18);
   --dashboard-icon-surface: #EAE3D4;
   --dashboard-upgrade-start: #DED4BF;
   --dashboard-upgrade-end: #F8F5EE;
   --dashboard-upgrade-text: #16120A;
   --dashboard-shadow: 0 14px 34px rgba(20, 20, 20, 0.13);

   /* =======================================================
     DIVIDERS
     ======================================================= */

   --divider: rgba(0, 0, 0, 0.065);
   --divider-strong: rgba(0, 0, 0, 0.11);


   /* =======================================================
     SHADOWS — Primary
     ======================================================= */

   --shadow-xs:
      0 0 6px rgb(14, 11, 1);

   --shadow-sm:
      0 0 12px rgb(14, 11, 1);

   --shadow-md:
      0 0 22px rgb(14, 11, 1);

   --shadow-lg:
      0 0 34px rgb(14, 11, 1);


   /* =======================================================
     SHADOWS — Secondary
     ======================================================= */

   --shadow-sec-xs:
      0 0 6px rgb(211, 165, 14);

   --shadow-sec-sm:
      0 0 12px rgb(211, 165, 14);

   --shadow-sec-md:
      0 0 22px rgb(212, 175, 55);

   --shadow-sec-lg:
      0 0 34px rgb(194, 152, 13);


   /* =======================================================
     SHADOWS — BLACK
     ======================================================= */
     
   --shadow-black-xs:
      0 0px 6px rgba(25, 30, 38, 0.05);

   --shadow-black-sm:
      0 0px 12px rgba(25, 30, 38, 0.075);

   --shadow-black-md:
      0 0px 22px rgba(25, 30, 38, 0.10);

   --shadow-black-lg:
      0 0px 34px rgba(25, 30, 38, 0.14);

   /* =======================================================
     SHADOWS — GOLD
     ======================================================= */

   --shadow-gold-xs:
      0 0 6px rgb(211, 165, 14);

   --shadow-gold-sm:
      0 0 12px rgb(211, 165, 14);

   --shadow-gold-md:
      0 0 22px rgb(212, 175, 55);

   --shadow-gold-lg:
      0 0 34px rgb(194, 152, 13);


   /* =======================================================
     STATUS
     ======================================================= */

   --success: #15803D;
   --success-bg: rgba(21, 128, 60, 0.322);

   --warning: #B45309;
   --warning-bg: rgba(180, 83, 9, 0.09);

   --danger: #DC2626;
   --danger-bg: rgba(220, 38, 38, 0.08);
   --danger-bg-hover: rgba(220, 38, 38, 0.274);

   --info: #2563EB;
   --info-bg: rgba(37, 99, 235, 0.08);

   /* =======================================================
     OVERLAYS
     ======================================================= */

   --overlay: rgba(10, 12, 16, 0.28);
   --overlay-heavy: rgba(10, 12, 16, 0.52);

   /* =======================================================
     FOCUS
     ======================================================= */

   --focus-ring:
      0 0 0 3px rgba(199, 154, 36, 0.20);

   /* =======================================================
       LOADER (DARK MODE)
       Variables used for loader components when dark theme is active
       ======================================================= */

   --loader-border-top: #000000;
}


body {
   font-family: var(--primary-font);
   max-width: 1600px;
   margin: 0 auto;
}

::-webkit-scrollbar {
   width: 10px;
   height: 10px;
}

::-webkit-scrollbar-track {
   background: var(--surface-active);
   border-radius: 10px;
}

::-webkit-scrollbar-thumb {
   background: var(--accent-active);
   border-radius: 10px;
}

/* Generall */
/* Main Progress Bar */
.mainProgressbar {
   position: fixed;
   top: 0;
   left: 0;
   width: 0%;
   z-index: 1100;
   height: 2px;
   border-radius: 20px;
   background: linear-gradient(180deg, var(--accent-primary), var(--accent-active));
   opacity: 0;
   pointer-events: none;
}

.mainProgressbar::after {
   content: "";
   position: absolute;
   right: 0;
   width: 100px;
   height: 100%;
   box-shadow: 0 0 10px 1px var(--secondary-color), 0 0 10px 1px var(--secondary-color);
   opacity: 1;
}

a {
   text-decoration: none;
   color: var(--accent-active);
   font-weight: 600;
}

strong {
   color: var(--accent-active);
   font-weight: 600;
}

.toolSeoArticle {
   max-width: 1050px;
   margin: 70px auto;
   padding: 48px 24px;
   color: var(--text-primary);
   line-height: 1.75;
}

.toolSeoHeader {
   margin-bottom: 34px;
}

.toolSeoEyebrow {
   display: inline-block;
   margin-bottom: 12px;
   color: var(--accent-primary);
   font-size: 14px;
   font-weight: 800;
   text-transform: uppercase;
}

.toolSeoHeader h2 {
   margin-bottom: 16px;
   color: var(--text-primary);
   font-size: 36px;
   line-height: 1.2;
}

.toolSeoHeader p,
.toolSeoSection p,
.toolSeoList,
.toolSeoFaq p {
   color: var(--text-secondary);
   font-size: 17px;
}

.toolSeoSection {
   margin-top: 30px;
}

.toolSeoSection h3 {
   margin-bottom: 12px;
   color: var(--text-primary);
   font-size: 26px;
   line-height: 1.25;
}

.toolSeoFaq h4 {
   margin: 20px 0 8px;
   color: var(--text-primary);
   font-size: 20px;
}

.toolSeoList {
   padding-left: 24px;
}

.toolSeoList li {
   margin-bottom: 10px;
}

/* HumberIcon */
.hamburgericon {
   display: none;
}

/* Heading Wrapper Styling */
.line-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 5px;
   margin-bottom: 12px;
   width: 100%;
}

.fline {
   width: 40px;
   height: 5px;
   background-color: var(--highlight-primary);
   border-radius: 5px;
}

.dot {
   width: 20px;
   height: 20px;
   background-color: var(--highlight-primary);
   border-radius: 50%;
}

.lline {
   width: 40px;
   height: 5px;
   background-color: var(--highlight-primary);
   border-radius: 5px;
}

/* Stylish Heading */
.stylishHeading {
   padding: 20px 10px;
}

.stylishHeading>h3 {
   text-align: center;
   font-size: 36px;
}

.stylishHeading>p {
   font-size: 18px;
   color: var(--text-secondary);
   line-height: 25px;
   text-align: center;
}

/* Highlighted Text in Website */
.highlight {
   font-weight: 700;
   color: var(--highlight-primary);
}

/* Heading Dot Line Media Query */
@media (max-width: 450px) {

   .fline {
      width: 30px;
      height: 5px;
   }

   .line-wrapper>.dot {
      width: 20px;
      height: 20px;
      background-color: var(--accent-primary);
   }

   .lline {
      width: 30px;
      height: 5px;
   }
}