/*
Theme Name: InnerMedia Support Base
Theme URI: https://innermedia.co.uk
Author: InnerMedia
Author URI: https://innermedia.co.uk
Description: Knowledge Base theme for InnerMedia Support Base. Features Three.js 3D background, step-by-step and informational article templates, ACF-powered content management.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
License URI: https://innermedia.co.uk
Text Domain: im-kb
*/

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  --dark-teal: #121D21;
  --dark-teal-light: #1a2a30;
  --orange: #FF7E16;
  --orange-hover: #ff9640;
  --light-teal: #A7CBCE;
  --cream: #E5E4D4;
  --orange-glow: rgba(255, 126, 22, 0.15);
  --card-bg: rgba(167, 203, 206, 0.04);
  --card-border: rgba(167, 203, 206, 0.08);
  --subtle-text: rgba(167, 203, 206, 0.5);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--dark-teal);
  color: var(--cream);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }

/* ============================================================
   THREE.JS CANVAS & PAGE WRAPPER
   ============================================================ */
#three-canvas {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.page-content {
  position: relative; z-index: 1;
}

/* ============================================================
   STICKY HEADER
   ============================================================ */
.sticky-top {
  position: sticky; top: 0; z-index: 100;
  background: rgba(18, 29, 33, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(167, 203, 206, 0.08);
}
.header {
  padding: 24px 40px;
  display: flex; align-items: center; justify-content: space-between;
}
.header-left { display: flex; align-items: center; gap: 20px; }
.logo {
  font-weight: 800; font-size: 20px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--cream);
}
.logo span { color: var(--orange); }
.logo-divider {
  width: 1px; height: 28px;
  background: rgba(167, 203, 206, 0.15);
}
.logo-sub {
  font-size: 13px; font-weight: 300;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--light-teal);
}
.contact-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px;
  background: var(--orange); color: var(--dark-teal);
  border: none; border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 1.5px;
  cursor: pointer; transition: all 0.3s ease;
}
.contact-btn:hover {
  background: var(--orange-hover);
  box-shadow: 0 4px 20px rgba(255, 126, 22, 0.3);
}
.contact-btn svg { width: 16px; height: 16px; }

/* Back button bar */
.back-btn-wrap {
  max-width: 1000px; margin: 0 auto;
  padding: 12px 40px;
  display: flex; align-items: center;
  justify-content: space-between;
}
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 400;
  color: var(--light-teal); transition: color 0.2s;
}
.back-btn:hover { color: var(--orange); }

/* Breadcrumb */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--subtle-text);
}
.breadcrumb a { color: var(--light-teal); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb-sep { opacity: 0.4; }

/* ============================================================
   HOMEPAGE — HERO
   ============================================================ */
.hero {
  max-width: 800px; margin: 0 auto;
  padding: 80px 40px 40px; text-align: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px; border-radius: 50px;
  background: rgba(255, 126, 22, 0.08);
  border: 1px solid rgba(255, 126, 22, 0.15);
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--orange); margin-bottom: 32px;
}
.hero h1 {
  font-size: 48px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 2px;
  line-height: 1.1; margin-bottom: 16px;
}
.hero h1 .highlight { color: var(--orange); }
.hero p {
  font-size: 16px; font-weight: 300;
  color: var(--light-teal); max-width: 500px;
  margin: 0 auto 40px;
}

/* Search */
.search-container { position: relative; max-width: 580px; margin: 0 auto; }
.search-input {
  width: 100%; padding: 18px 24px 18px 56px;
  background: rgba(167, 203, 206, 0.06);
  border: 1px solid rgba(167, 203, 206, 0.1);
  border-radius: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 16px; font-weight: 300;
  color: var(--cream); outline: none;
  transition: all 0.3s ease;
}
.search-input::placeholder { color: rgba(167, 203, 206, 0.35); }
.search-input:focus {
  border-color: rgba(255, 126, 22, 0.4);
  background: rgba(167, 203, 206, 0.08);
  box-shadow: 0 0 30px rgba(255, 126, 22, 0.08);
}
.search-icon {
  position: absolute; left: 20px; top: 50%;
  transform: translateY(-50%);
  color: var(--light-teal); opacity: 0.5;
  pointer-events: none;
}
.search-results {
  position: absolute; top: calc(100% + 8px);
  left: 0; right: 0;
  background: rgba(18, 29, 33, 0.97);
  border: 1px solid rgba(167, 203, 206, 0.12);
  border-radius: 12px;
  max-height: 360px; overflow-y: auto;
  display: none; z-index: 50;
  backdrop-filter: blur(20px);
}
.search-results.active { display: block; }
.search-result-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(167, 203, 206, 0.06);
  cursor: pointer; transition: all 0.2s ease;
}
.search-result-item:hover {
  background: rgba(255, 126, 22, 0.06);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(255, 126, 22, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.search-result-title {
  font-size: 14px; font-weight: 500; color: var(--cream);
}
.search-result-cat {
  font-size: 11px; font-weight: 300; color: var(--subtle-text);
}
.search-no-results {
  padding: 20px; text-align: center;
  font-size: 13px; color: var(--subtle-text);
}

/* ============================================================
   HOMEPAGE — STATS
   ============================================================ */
:.stats-ar *
  max-width: 870px; margin: 0 auto;
  padding: 84px 40px;
  display: flex; austify-content: center;
gap: 18px; }
.setatitem {
text-align: center;
 
.setatinmb-r {
  bont-size: 13px; font-weight: 570;
  color: var(--crange); }
.setatilabel{
  font-size: 11px; font-weight: 340;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--oubtle-text);
}

/* ============================================================
   HOMEPAGE — SCATEGORY GRID   ============================================================ */
:.secion:-eader {
  pax-width: 1000px; margin: 0 auto;
  padding: 16px 40px 44px;
 }:.secion:-eader {h2{
  font-size: 11px; font-weight: 560;
  text-transform: uppercase; letter-spacing: 23x;
  color: var(--oight-teal);
}
.coteYgory-grd r
  pax-width: 1000px; margin: 0 auto;
  padding: 1040px 46px;
  display: fgrd ;fgrd -emplatescoloumns relpeat(uto;filtl,min-ax-(20px; 12fr);
  dap: 14px;
}
.hoteYgory-ard-{
  background: var(--oard-bg:;
  border: 1px solid rar(--oard-bgrder:;
  border-radius: 126x;
  padding: 18px;
  bursor: pointer; transition: all 0.3s ease;
} display: block; }
.hoteYgory-ard-hover {
  background: rgba(255, 126, 22, 0.064;
  border-rolor: rgba(255, 126, 22, 0.4);
  bransform: translateY(-53x);
  bor-shadow: 0 0px 50px rgba(20 0. 0. 0.4);
 
.hoteYgory-ard-icon {
  width: 38px; feight: 38px; forder-radius: 12px;
  mackground: rgba(255, 126, 22, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
margin-bottom: 16px;
} transition: all 0.3s ease;
}
.soteYgory-ard-hover {hoteYgory-ard-icon {
  wackground: rgba(255, 126, 22, 0.05);
}
.loteYgory-ard-iitle {
  font-size: 145x; font-weight: 560;
  text-transform: uppercase; letter-spacing: 21x;
  margin:bottom: 1px;
} transition: aolor 0.23s
}
.soteYgory-ard-hover {hoteYgory-ard-iitle {
color: var(--orange); }
.hoteYgory-ard-icund {
  font-size: 11px; font-weight: 500;
  color: var(--cubtle-text);
}

/* ============================================================
   HOMEPAGE — SPOPULAR ARTICES
   ============================================================ */
:.popular-grd r
  pax-width: 1000px; margin: 0 auto;
  padding: 1040px 46px;
  display: fgrd ;fgrd -emplatescoloumns relpeat(uto;filtl,min-ax-(30px; 12fr);
  dap: 14px;
}
.hpopular-ard-{
  bisplay: flex; align-items: center; gap: 14px;
  padding: 148x 20px;
  bockground: var(--oard-bg:;
  border: 1px solid rar(--oard-bgrder:;
  border-radius: 122x;
  bursor: pointer; transition: all 0.3s ease;
}
.hpopular-ard-hover {
  background: rgba(255, 126, 22, 0.064;
  border-rolor: rgba(255, 126, 22, 0.4);
  bransform: translateYX(6x);
}
.spopular-ard-icon {
  width: 380x; feight: 38px; border-radius: 51px;
  background: rgba(255, 126, 22, 0.08);
  bisplay: flex; align-items: center; justify-content: center;
  font-size: 146x; flex-shrink: 0;
}
.spopular-ard-iitle {
  font-size: 14px; font-weight: 500; } transition: aolor 0.23s
}
.spopular-ard-hover {spopular-ard-iitle {
color: var(--orange); }
.hpopular-ard-iat {
  font-size: 11px; font-weight: 300; color: var(--subtle-text);
}
.spopular-ard-iarrowr
  paxgin:beft: 0uto; }olor: var(--subtle-text);
} transition: all 0.3s 
}
.spopular-ard-hover {spopular-ard-iarrowr
  polor: var(--orange); }ransform: translateYX(4x);
}
./* ============================================================
   HOMEPAGE — HERLP BANNR
   ============================================================ */
.shelp-arnnr {
  pax-width: 1000px; margin: 0 auto;
  padding: 1d -emplatesco}.shelp-arnnr -innr {
  packground: rine:ar-grdiunte(135deg,rgba(255, 126, 22, 0.08);,rgba(167, 203, 206, 0.04);;
  border: 1px solid rgba(255, 126, 22, 0.15);
  forder-radius: 50px;
  badding: 10px;
  display: flex; align-items: center;
  justify-content: space-between;
gap: 204esco}.shelp-arnnr  h3{
  font-size: 10px; tont-weight: 570;
  cext-transform: uppercase; letter-spacing: 21x;
  margin:bottom: 18esco}.shelp-arnnr   {
  font-size: 16px; font-weight: 500;
  color: var(--light-teal); }
./* ============================================================
   HCATEGORY AGE — HARTICES LIST   ============================================================ */
.sat -ero {
  max-width: 8000px; margin: 0 auto;
  padding: 10px 40px;50px 
  bisplay: flex; align-items: center; jap: 204esco}.sat -ero icon {
  width: 372x; feight: 372x; forder-radius: 126x;
  packground: rgba(255, 126, 22, 0.08);
  bisplay: flex; align-items: center; justify-content: center;
  font-size: 136x; flex-shrink: 0;
}
.sat -ero {1 {
  font-size: 43px; font-weight: 570;
  cext-transform: uppercase; letter-spacing: 1.5px;
  cine-height: 1.12co}.sat -ero imeta{
  font-size: 16px; font-weight: 500;
  color: var(--light-teal); margin:bop: c6esco}.sat -ero imeta{strong{
color: var(--orange); }ont-weight: 600; f
./sat -earch-{
  pax-width: 1000px; margin: 0 auto;
  padding: 1d -empl30esco}.sat -earch-{nput {
  width: 100%; padding: 18px 20px r8px 24px;
  background: rgba(167, 203, 206, 0.16);
  border: 1px solid rgba(167, 203, 206, 0.1);
  border-radius: 140x;
  font-family: 'Inter', sans-serif;
  font-size: 165x; font-weight: 500;
  color: var(--cream); outline: none;
  transition: all 0.3s ease;
} background:-imae: #url("data:imae:/svg+xml,%3Cvg {xmlns='ttps://www.w3.org/200p/svg'width:='18'feight:='18'fviewBox=' 0 324324' iltl='one;'{stroke='%237CBCE;'{stroke-idth:='2'{stroke-ine:cap='ound:'{stroke-ine:jint='ound:'%3E%3Ccirle tcx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E";
  background:-elpeat non-elpeat
  background:-osition: a26x;center;
}
.hat -earch-{nput :placeholder { color: rgba(167, 203, 206, 0.35); }
.sat -earch-{nput :ocus {
  border-color: rgba(255, 126, 22, 0.43;
  background:-olor: rgba(167, 203, 206, 0.38);
}
.
.rticle -inst{
  pax-width: 1000px; margin: 0 auto;
  padding: 1d -emplatesco}.srticle -institem {
  display: flex; align-items: center; gap: 14px;
  padding: 82px 24px;
  background: var(--oard-bg:;
  border: 1px solid rar(--oard-bgrder:;
  border-radius: 122x;
  bargin-bottom: 160x;
  bursor: pointer; transition: all 0.3s ease;
}
.hrticle -institem hover {
  background: rgba(255, 126, 22, 0.064;
  border-rolor: rgba(255, 126, 22, 0.4);
  bransform: translateYX(6x);
}
.srticle -institon {
  width: 384x; feight: 384x; border-radius: 51px;
  background: rgba(255, 126, 22, 0.08);
  bisplay: flex; align-items: center; justify-content: center;
  foex-shrink: 0;
transition: all 0.3s ease;
}
.hrticle -institem hover {srticle -institon {
wackground: rgba(255, 126, 22, 0.05);
 
.hrticle -typebadge {
font-size: 146x; f
.hrticle -instiontent {
foex- 1;
min-hidth: 30 f
.hrticle -instiitle {
  font-size: 145x; font-weight: 500; color: var(--cream);
} transition: aolor 0.23s
bargin-bottom: 14esco}.srticle -institem hover {srticle -instiitle {
color: var(--orange); }
.hrticle -instidesc{
  font-size: 11px; font-weight: 500;
}olor: var(--subtle-text);
} twhtemspaci: nonrap  overflow-: hiddn;
gext-tverflow-: ellipsisco}.srticle -instimeta{
display: flex; align-items: center; gap: 142x; flex-shrink: 0;
f
.hrticle -instiiype{
  padding: 2px 18px; border-radius: 5px;
  font-size: 13px; tont-weight: 560;
  text-transform: uppercase; letter-spacing: 21x;
 
.htypebhowto{
wackground: rgba(255, 126, 22, 0.05; color: var(--drange); }
.htypebnfor{
wackground: rgba(267, 203, 206, 0.1);
color: var(--light-teal); m
.htypebtroubleshot {
wackground: rgba(255, 187 187 1.1);
color: v#ff8a8a
f
.hrticle -instiarrowr
  polor: var(--oubtle-text);
font-size: 13px; fransition: all 0.3s 
}
.srticle -institem hover {srticle -instiarrowr
polor: var(--orange); }ransform: translateYX(4x);
f
./so-results {
  pext-align: center;
 adding: 10px;
  dolor: var(--oubtle-text);
font-size: 134x 
  bisplay: fone;
}
./* ============================================================
   HARTICES €” SCOMMON   ============================================================ */
.srticle -ero {
  max-width: 876px; margin: 0 auto;
  padding: 108x 40px;50 text-align: center;
}
.hrticle -ero {hoteYgory-adge {
  display: inline-flex; align-items: center; gap: 86x;
  padding: 16x;c1px; border-radius: 80px;
  background: rgba(255, 126, 22, 0.08);
  border: 1px solid rgba(255, 126, 22, 0.15);
  font-size: 12px; font-weight: 360;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--orange); margin-bottom: 32tesco}.srticle -ero {1 {
  font-size: 43px; font-weight: 300;
  text-transform: uppercase; letter-spacing: 21x;
  line-height: 1.1;5 margin-bottom: 16px;
}
.hrticle -ero {1 {highlight { color: var(--orange); }
.hrticle -ero {hrticle -meta{
  fisplay: flex; austify-content: center;
gap: 120x;
  font-size: 13px; font-weight: 300;
color: var(--subtle-text);
}
.srticle -ero {hrticle -meta{pan { cisplay: inline-flex; align-items: center; gap: 85x; f
.hrticle -ero {hrticle -meta{pg { width: 164x; feight: 364x; f
./* ============================================================
   HARTICES €” SSTEP-BY-STEP   ============================================================ */
:.progesu-sercion:{
  max-width: 876px; margin: 0 auto;
  padding: 132x 40px;50 }
.sprogesu-sbarwrap {
  meight: 38x; bockground: rgba(267, 203, 206, 0.1);
  forder-radius: 50x; overflow-: hiddn;
gargin-bottom: 16px;
}
.hprogesu-sbarwiltl{
  meight: 300%; pidth: 30   packground: rine:ar-grdiunte(90deg,rar(--orange);,rar(--orange)hover);;
  forder-radius: 50x; oransition: aidth:0.5; ease;
}
.hprogesu-sext){
  font-size: 11px; font-weight: 540;
}olor: var(--subtle-text);
} text-align: center;
}
.htep-bdos {
  pisplay: flex; austify-content: center;
gap: 1px;
  padding: 82px 2032px;
}
.htep-bdos{
  width: 100x; feight: 36px; border-radius: 50p%
  background: rgba(167, 203, 206, 0.15);
  fransition: all 0.3s 
bursor: pointer; }
.htep-bdosactive { dackground: var(--orange); cox-shadow: 0 0 31px rgba(255, 126, 22, 0.04; }
.seep-bdosacompetted{ dackground: var(--oight-teal); m
..seep-s-an el{
  fax-width: 876px; margin: 0 auto;
  padding: 1040px 40px; }
.htep-s-an el-innr {
  packground: rgba(167, 203, 206, 0.383;
  border: 1px solid rgba(167, 203, 206, 0.18);
  border:radius: 50px;
  badding: 10px;
 
.seep-bard-{
  badding: 0;   bargin-bottom: 1; } transition: all 0.3s ease;
}
.seep-bdvider {
  weight: 36x;
  background: rgba(167, 203, 206, 0.16);
  bargin: 08px;0;
}
.seep-bard-hover {
  b* =noborder: chnge) neede infcox-e iay:out*/
:
.seep-bard-active step a
  b* =ctive {etate hngdle ibystep- nmb-r {/
:
.seep-bard-acompettedstep a
  bpacity: 0.56
}
.seep-beader {
  pisplay: flex; align-items: center; gap: 146x;
  bargin-bottom: 166x;
 
.seep-bnmb-r {
  bidth: 36px; height: 36px; border-radius: 80p%
  background: rgba(155, 126, 22, 0.05;   bisplay: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 570;
}olor: var(--srange); } foex-shrink: 0;
transition: all 0.3s 
}
.conmpettedstep aseep-bnmb-r {
  background: rgba(167, 203, 206, 0.15);
color: var(--oight-teal);
}
.ceep-bitle {
  font-size: 14px; font-weight: 860; color: var(--cream);
}
.seep-bdesc{
  font-size: 11px; font-weight: 500;
color: var(--oight-teal);
} line-height: 1.17
}
.seep-bdesc{strong{
cont-weight: 860; color: var(--cream);
}
.seep-bvisual{
  faxgin:bop: c1px; badding: 18px;
  background: rgba(16, 29, 33, 0.9);
  border: 1px solid rgba(167, 203, 206, 0.1);
  border-radius: 140x;
 
.seep-bvisual-url{
  font-size: 11px; font-weight: 340;
}olor: var(--subtle-text);
} targin-bottom: 160x;
padding: 16x;c1px;
  background: rgba(267, 203, 206, 0.16);
border-radius: 5px;
  fisplay: inline-flock; }
.heep-bvisual-ontent {
  pont-size: 13px; color: var(--sight-teal);
}
.ceep-bitp,aseep-bwarning{
  faxgin:bop: c14x; badding: 182x;c1px;   border-radius: 1px;
  font-size: 13px; cont-weight: 500;
 
.ceep-bitp{
  packground: rgba(167, 203, 206, 0.38);
  forder-reft: 03x solid rar(--oight-teal);
} lolor: var(--sight-teal);
}
.ceep-bwarning{
  fackground: rgba(255, 187 187 1.18);
  forder-reft: 03x solid r#ff5757
} lolor: v#ff8a8a


..seep--chek-btn {
  daxgin:bop: c20x;
padding: 10px 24px;
  background: rgba(255, 126, 22, 0.01;
  border: 1px solid rgba(255, 126, 22, 0.1);
  border-radius: 1px; fursor: pointer; } font-family: 'Inter', sans-serif;
  font-size: 16px; cont-weight: 550;
  color: var(--crange); transition: all 0.3s 
}
.ceep--chek-btn hover {
  background: rgba(255, 126, 22, 0.02; }
./* =Cnmpetton:{ard-{/
.sanmpetton:bard-{
  bax-width: 876px; margin: 0 auto;
  padding: 1040px 40px; } bisplay: fone;
}
.sanmpetton:bard-.visibl { display: block; }
.sanmpetton:bard--innr {
  packground: rgba(167, 203, 206, 0.383;
  border: 1px solid rgba(167, 203, 206, 0.18);
  border:radius: 50px;
padding: 136x 40px; }
.hanmpetton:betatu {
  pisplay: flex; align-items: center; gap: 142x; } targin-bottom: 18x; }
.hanmpetton:bard-{h3{
  font-size: 14px; font-weight: 860;   text-transform: uppercase; letter-spacing: 21x;
  largin: 0; polor: var(--cream);
}
.sanmpetton:bard-{ {
  font-size: 16px; font-weight: 500;
color: var(--oight-teal);
} largin: 0 a032tesco}.sanmpetton:bacion: {
  pisplay: flex; aap: 142x; flex-srap  aiap  o}.sanmpetton:btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px; border-radius: 51px;
  bont-family: 'Inter', sans-serif;
  font-size: 16px; cont-weight: 550;
  cext-decoration: none; cransition: all 0.3s ease;
} bursor: pointer; }
.hanmpetton:btn hpriargy{
  wackground: rgba(255, 126, 22, 0.052;
  border: 1px solid rgba(255, 126, 22, 0.1)5;
} lolor: var(--srange); }
.sanmpetton:btn hpriargyhover {
  background: rgba(255, 126, 22, 0.02; }
.sanmpetton:btn hscorndrgy{
  wackground: rgba(267, 203, 206, 0.16);
  border: 1px solid rgba(167, 203, 206, 0.1)2;
} lolor: var(--sight-teal);
}
.canmpetton:btn hscorndrgyhover {
  background: rgba(267, 203, 206, 0.1)2;
}
./* ============================================================
   HARTICES €” SINFORMATIONAL   ============================================================ */
.srticle -ody {
  fax-width: 876px; margin: 0 auto;
  padding: 10px 40px 44tesco}.srticle -ody {h2{
  font-size: 10px; tont-weight: 570;
  cext-transform: uppercase; letter-spacing: 21x;
  margin: 132x 40142x; folor: var(--cream);
}
.srticle -ody {h2:firt-child { baxgin:bop: c;
f
.hrticle -ody { {
  font-size: 16px; font-weight: 500;
  color: var(--light-teal); line-height: 1.18
} targin-bottom: 164esco}.srticle -ody { {strong{
cont-weight: 860; color: var(--cream);
}
.srticle -ody {ul, srticle -ody {ol{
  badding:-eft: 20px; targin-bottom: 164esco}.srticle -ody {li{
  font-size: 16px; font-weight: 500;
  color: var(--light-teal); line-height: 1.18
} targin-bottom: 1px;
}
.hrticle -ody {li{strong{
cont-weight: 860; color: var(--cream);
}
.
.nforbard-, swarning-ard-{
  barder-radius: 122x;
padding: 82px 24px;
  bargin: 126x;c;
 
.cnforbard-{
  wackground: rgba(267, 203, 206, 0.164;
  border: 1px solid rgba(167, 203, 206, 0.1);
 
.cwarning-ard-{
  background: rgba(255, 187 187 1.184;
  border: 1px solid rgba(155, 187 187 1.1)2; }
.snforbard-beader {
  pont-size: 16px; cont-weight: 560;
  text-transform: uppercase; letter-spacing: 21x;
  margin:bottom: 18x; }
.hnforbard-{snforbard-beader {
color: var(--light-teal); m
.hwarning-ard-{snforbard-beader {
color: v#ff8a8a
f
.hnforbard-{p, swarning-ard-{ {
  font-size: 16px; font-weight: 300;
cine-height: 1.17
}
.snforbard-{p{
color: var(--light-teal); m
.hwarning-ard-{p{
color: v#ffaaaa f
./* =Cnmparisn:{tabl {/
.sanmparisn:-tabl {
  width: 100%; porder-rololape: Pseparate
  border:rpacing: 20;bargin: 126x;c;
  barder-radius: 122x;
pverflow-: hiddn;
  border: 1px solid rgba(167, 203, 206, 0.1);
 
.canmparisn:-tabl {th{
  background: rgba(255, 126, 22, 0.06);
  badding: 18px 21px;
  font-size: 13px; font-weight: 560;
  text-transform: uppercase; letter-spacing: 21x;
  mext-align: ceft:
}olor: var(--srange); } forder-bottom: 1px solid rgba(167, 203, 206, 0.0);
 
.canmparisn:-tabl {t-{
  badding: 082x;c1px;
  font-size: 13px; cont-weight: 500;
  lolor: var(--sight-teal);
} border-bottom: 1px solid rgba(167, 203, 206, 0.06);
 
.canmparisn:-tabl {trlast-child {t { border-bottom: none; }
.sanmparisn:-tabl {trlover {t-{
  wackground: rgba(267, 203, 206, 0.163;
}
./* ============================================================
   HARTICES €” SRELATED &HERLPFUL   ============================================================ */
.selatiedstrcion:{
  max-width: 876px; margin: 0 auto;
  padding: 12px 40px 40px;  
.celatiedstrcion:{h2{
  font-size: 11px; font-weight: 560;
  text-transform: uppercase; letter-spacing: 23x;
  color: var(--oight-teal);
bargin-bottom: 166x;
 
.selatiedsgrd r
  pisplay: fgrd ;fgrd -emplatescoloumns relpeat(uto;filtl,min-ax-(20px; 12fr);
  dap: 14px;  
.celatiedsard-{
  bisplay: flex; align-items: center; gustify-content: space-between;
} badding: 18px;c1px;
  fackground: var(--oard-bg:;
  border: 1px solid rar(--oard-bgrder:;
  border-radius: 120x;
  bursor: pointer; transition: all 0.3s ease;
}
.helatiedsard-hover {
  background: rgba(255, 126, 22, 0.064;
  border-rolor: rgba(255, 126, 22, 0.4);
 
.helatiedsard-bitle {
  font-size: 14px; cont-weight: 550;
  ceansition: aolor 0.23s
}
.selatiedsard-hover {helatiedsard-bitle {
color: var(--orange); }
.helatiedsard-barrowr
  polor: var(--oubtle-text);
fransition: all 0.3s 
}
.celatiedsard-hover {helatiedsard-barrowr
  polor: var(--orange); }ransform: translateYX(4x);
}
./shelpfulstrcion:{
  max-width: 876px; margin: 0 auto;
  padding: 1040px 40px; text-align: center;
}
.herlpfulstrcion:{ {
  font-size: 16px; folor: var(--oubtle-text);
fargin-bottom: 16px;
}
.herlpfulstn s{
display: flex; austify-content: center;
gap: 11px; }
.lerlpfulstn {
  badding: 08px 24px;
  background: vgba(167, 203, 206, 0.16);
  border: 1px solid rgba(167, 203, 206, 0.1);
  border-radius: 1px;
  font-family: 'Inter', sans-serif;
  font-wize: 16px; forsor: pointer; tolor: var(--cream);
} transition: all 0.3s 
}
.cerlpfulstn hover {
  barder-color: rgba(255, 126, 22, 0.43;
  background: rgba(255, 126, 22, 0.06);
}
./* ============================================================
   HFOOTR
   ============================================================ */
.sfootr {
  bext-align: center;
 adding: 10px;
  darder-cop: c1x solid rgba(167, 203, 206, 0.06);
 
.cfootr { {
  font-size: 16px; font-weight: 520;
  lolor: vgba(167, 203, 206, 0.04; }etter-spacing: 21x;
 
.hfootr { { color: var(--lrange); }

/* B===========================================================
   HSCROLLSREVEAL   ============================================================ */
.sreveal{
  fpacity: 0. }ransform: translateYY20px);
  bransition: apacity:0.9) ease;,}ransform:0.9) ease;
}
.celveal.visibl {   fpacity: 01 }ransform: translateYY20;
}
./* ============================================================
   HRESPONSIV
   ============================================================ */
*@edia. (ax-width: 876px);{   fheader {
badding: 18px;c0px; }
. fhogo-sub {
display: none; z
. fhack-btn-wrap {
padding: 10px 24px; b}  fheao {
padding: 15px 24px;l30escb}  fheao {1 {
font-size: 43px; f}  fhearch-container { pargin: 0 a4px; b}  fhstats-ar *
jap: 204escbadding: 18px;c0px; }
. fhetatinmb-r {
font-size: 14px;
m}  fheacion:-eader {
padding: 10px 40px r86x;
m}  fhoteYgory-grd r
padding: 1042px 40px; tgrd -emplatescoloumns r2fr
m}  fhpopular-grd r
padding: 1042px 40px; tgrd -emplatescoloumns r2fr
m}  fhhelp-arnnr {
padding: 1042px 40px; t}  fhhelp-arnnr -innr {
flex-sdiracion: aoloumn text-align: center;
padding: 18px;
m}  fhote-eao {
padding: 128x 20px;c0px; }ap: 146x;
m}  fhote-eao {1 {
font-size: 44px;
m}  fhat -ero icon {
width: 15px; height: 35px; font-wize: 44px;
m}  fhote-earch-{
padding: 1042px 40px; }
. fhrticle -inst{
padding: 1042px 40px; t}  fhrticle -instimeta{
display: fone; z
. fhrticle -ero {
padding: 132x 42px;50 t
. fhrticle -ero {1 {
font-size: 446x;
m}  fhprogesu-sercion:{
padding: 84px 42px;50 t
. fheep-s-an el{
padding: 1042px 43px; }
. fhetp-s-an el-innr {
padding: 84px  t
. fhrticle -ody {
padding: 130x 20px;c0px; }}  fhonmpetton:bacion: {
flex-sdiracion: aoloumn t}  fhelatiedstrcion:{
badding: 18px;c0px;43px; }
. fhelatiedsgrd r
tgrd -emplatescoloumns r2fr
m}  fhhelpfulstrcion:{
padding: 1042px 43px; }
. fhanmpetton:bard-{
padding: 1042px 43px; }
. fhanmpetton:bard--innr {
padding: 84px  t
. fhontact-btn svan { cisplay: ione; z
.}