/*
===================================================
Table of Content
===================================================
1) reset css
2) global css
3) table css
4) button css
5) form css
6) keyframes css
7) header
8) hero css
9) inner-hero css
10) cureency section css
11) about section css
12) package section css
13) choose us section css
14) profit calculator section css
15) how work section css
16) testimonial section css
17) team section css
18) data section css
19) top investor section css
20) cta section css
21) payment brand section css
22) blog section css
23) blog-details-section css
24) subscribe section css
25) account section css
26) contact-wrapper css
27) dashboard section css
28) sidebar css
29) footer
*/
/* reset css start */
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600;700&family=Exo&family=Playfair+Display&display=swap");

/* Avenir Black */
@font-face {
  font-family: "Avenir";
  src: url("../fonts/Avenir-Black-03.woff2") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* Avenir Light */
@font-face {
  font-family: "Avenir";
  src: url("../fonts/Avenir-Light-07.woff2") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Avenir Light Oblique */
@font-face {
  font-family: "Avenir";
  src: url("../fonts/Avenir-LightOblique-08.woff2") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Avenir Medium */
@font-face {
  font-family: "Avenir";
  src: url("../fonts/Avenir-Medium-09.woff2") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

/* Using a CSS variable for dynamic header heights */
:target {
  scroll-margin-top: var(--header-height, 120px);
}
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        :root {
            --bg: linear-gradient(289deg, #2b1a00, #120900);
            --btn: #2b1a00;
            --btn-hover: #b78b36;
            --gold: #956e36;
            --gold-pale: #F0E6B2;
            --cream: #F7F3EC;
            --ink: #1A1612;
  --ink-mid: #3D3630;
  --ink-light: #6B625A;
  --ink-xlight: #A09890;
            --white: #FFFFFF;
            --border: rgba(184,150,12,0.14);
  --border-mid: rgba(184,150,12,0.28);
            --green: #16a34a;
            --red: #dc2626;
            --radius: 4px;
        }

        body {
            font-family: "Avenir", sans-serif !important;
            background: var(--bg);
            color: var(--white);
            font-size: 16px;
            line-height: 1.75;
            text-rendering: optimizeSpeed;
        }

.section{
    content-visibility:auto;
    contain-intrinsic-size:1px 1000px;
}


/* ── NAV ── */
/* nav {
  background: var(--ink);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}
.nav-logo {
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: 0.05em;
}
.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-link { font-size: 12px; color: rgba(255,255,255,0.45); text-decoration: none; }
.nav-book {
  background: var(--gold);
  color: #fff;
  border: none;
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
} */

/* ── PAGE HEADER ── */
.page-header {
  /* background: #120a00 !important; */
  padding: 36px 40px 0;
}
.breadcrumb {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb a { color: var(--white); text-decoration: none; }
.breadcrumb a:hover { color: var(--btn-hover) !important; }
.breadcrumb .cur { color: var(--gold); }
.page-title {
  font-size: 38px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1.1;
}
.page-title em { font-style: italic; color: var(--gold-light); }
.page-subtitle {
  font-size: 13px;
  color: var(--white);
  font-weight: 300;
  margin-bottom: 32px;
  line-height: 1.6;
}

/* sub-tabs */
.sub-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.sub-tabs::-webkit-scrollbar { display: none; }
.stab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 13px 20px;
  
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.38);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.stab:hover { color: rgba(255,255,255,0.7); }
.stab.active { color: var(--gold-light); border-bottom-color: var(--gold); }
.stab .n {
  margin-left: 6px;
  font-size: 10px;
  background: rgba(184,150,12,0.15);
  color: var(--gold);
  padding: 1px 6px;
  border-radius: 8px;
}
.stab.active .n { background: rgba(184,150,12,0.28); color: var(--gold-light); }

/* ── TOOLBAR ── */
.toolbar {
  background: #2b1a00;
  border-bottom: 1px solid var(--border);
  padding: 12px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 12px;
}
.toolbar-left { display: flex; align-items: center; gap: 10px; }
.result-pill {
  background: #2b1a00;
  border: 1px solid var(--btn-hover);
  padding: 6px 14px;
  font-size: 12px;
  color: var(--white);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.result-pill .dot { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }

.search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap svg {
  position: absolute; left: 10px;
  color: var(--white); width: 13px; height: 13px;
  pointer-events: none;
}
.search-input {
  border: 1px solid var(--btn-hover);
  background: #2b1a00;
  padding: 7px 12px 7px 30px;
  font-size: 12px;
  color: var(--white);
  width: 220px;
  outline: none;
}
.search-input:focus { border-color: var(--gold); }
.search-input::placeholder { color: var(--white); }

/* Toolbar inline Clear Filters button */
.toolbar-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(212,175,55,0.45);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--gold);
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all 0.18s;
  white-space: nowrap;
}
.toolbar-clear-btn svg { flex-shrink: 0; }
.toolbar-clear-btn:hover {
  background: rgba(212,175,55,0.1);
  border-color: var(--gold);
  color: var(--btn-hover);
}




.sort-sel {
  border: 1px solid var(--btn-hover);
  background: #2b1a00;
  padding: 7px 28px 7px 10px;
  font-size: 12px;
  color: var(--white);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23B8960C'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}


.toolbar-right { display: flex; align-items: center; gap: 8px; }
.layout-toggle {
  display: flex;
  border: 1px solid var(--btn-hover);
  overflow: hidden;
}
.ltbtn {
  background: transparent;
  border: none;
  padding: 7px 11px;
  cursor: pointer;
  font-size: 14px;
  color: var(--white);
  transition: all 0.15s;
  line-height: 1;
}
.ltbtn.active { background: var(--btn-hover); color: var(--gold-light); }
.compare-btn {
  background: transparent;
  border: 1px solid var(--btn-hover);
  padding: 7px 14px;
  
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--white);
  cursor: pointer;
  transition: all 0.15s;
}
.compare-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ── LAYOUT ── */
.layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  margin-bottom: 60px;
}

/* ── SIDEBAR ── */
.sidebar {
  background: #2b1a00;
  border-right: 1px solid var(--border);
  padding: 24px 20px;
  position: sticky;
  top: 45px;
  align-self: start;
  max-height: calc(100vh - 45px);
  overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-mid); }

.sf-section { margin-bottom: 24px; }
.sf-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}

.sf-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12px;
  color: var(--white);
  cursor: pointer;
  transition: color 0.15s;
}
.sf-item:hover { color: var(--white); }
.sf-item.on { color: var(--white); font-weight: 500; }
.sf-item input[type=checkbox] { accent-color: var(--gold); margin-right: 7px; width: 12px; height: 12px; cursor: pointer; }
.sf-n {
  font-size: 10px;
  background: var(--cream-dark);
  color: var(--white);
  padding: 1px 7px;
  border-radius: 8px;
}
.sf-item.on .sf-n { background: var(--gold-pale); color: var(--gold); }

.sf-range { padding: 4px 0; }
.sf-range input[type=range] {
  width: 100%;
  accent-color: var(--gold);
  margin: 6px 0 2px;
}
.sf-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--white);
}

.sf-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sf-chip {
  background: transparent;
  border: 1px solid var(--border-mid);
  padding: 4px 10px;
  font-size: 10px;
  
  font-weight: 500;
  color: var(--white);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.03em;
}
.sf-chip:hover { border-color: var(--gold); color: var(--gold); }
.sf-chip.on { background: var(--ink); color: var(--gold); border-color: var(--btn-hover); }

.clear-all {
  background: none;
  border: none;
  
  font-size: 11px;
  color: var(--white);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  display: block;
  margin-top: 16px;
}
.clear-all:hover { color: var(--gold); }

/* ── MAIN ── */
.main { padding: 28px 36px 72px; }

/* Category intro strip */
.cat-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  background: #2b1a00;
  border: 1px solid var(--border);
  padding: 22px 26px;
  margin-bottom: 28px;
}
.cat-intro-left {}
.cat-intro-tag {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cat-intro-tag::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
}
.cat-intro-title {
  
  font-size: 22px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 6px;
}
.cat-intro-desc {
  font-size: 12px;
  color: var(--white);
  font-weight: 300;
  line-height: 1.6;
  max-width: 520px;
}
.cat-intro-stats {
  display: flex;
  gap: 28px;
  flex-shrink: 0;
}
.cs { text-align: right; }
.cs-val {
  
  font-size: 26px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  display: block;
}
.cs-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-xlight);
  display: block;
  margin-top: 3px;
}

/* active filters bar */
.active-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.af-label { font-size: 11px; color: var(--ink-xlight); }
.af-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--ink);
  color: var(--gold-light);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  cursor: pointer;
}
.af-tag:hover { background: #2D2620; }
.af-tag span { opacity: 0.6; font-size: 11px; }

/* ── PRODUCT GRID ── */
.pgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  /* background: var(--border-mid); */
  /* border: 1px solid var(--border-mid); */
  margin-bottom: 1px;
}

.pcard {
  background: #2b1a00;
  padding: 20px 18px 16px;
  cursor: pointer;
  transition: background 0.18s;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 152px;
}
.pcard:hover { background: #2d1b0199; }
.pcard::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.pcard:hover::after { transform: scaleX(1); }

/* featured dark card */
.pcard.feat {
  background: var(--ink);
}
.pcard.feat:hover { background: #231E18; }
.pcard.feat::after { background: var(--gold-light); }

.pcard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ptag {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.feat .ptag { color: rgba(212,175,55,0.55); }

.rank-badge {
  font-size: 9px;
  letter-spacing: 0.06em;
  font-weight: 500;
  padding: 2px 7px;
  background: var(--gold-pale);
  color: var(--gold);
  flex-shrink: 0;
}
.feat .rank-badge { background: rgba(184,150,12,0.15); color: var(--gold-light); }

.pname {
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.3;
  flex: 1;
  margin-bottom: 14px;
}
.feat .pname { color: var(--white); }

.pcard-bottom {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(184,150,12,0.1);
}
.feat .pcard-bottom { border-top-color: rgba(255,255,255,0.07); }

.preturn {}
.preturn-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--white);
  display: block;
  margin-bottom: 2px;
}
.feat .preturn-label { color: rgba(255,255,255,0.3); }
.preturn-val {
  
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  line-height: 1;
}
.feat .preturn-val { color: var(--gold-light); }
.preturn-val sub {
  font-size: 11px;
  
  font-weight: 300;
  vertical-align: baseline;
  color: var(--ink-light);
}
.feat .preturn-val sub { color: rgba(255,255,255,0.35); }

.paction {
  font-size: 10px;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.03em;
  opacity: 0;
  transition: opacity 0.18s;
  flex-shrink: 0;
}
.pcard:hover .paction { opacity: 1; }
.feat .paction { color: var(--gold-light); }

/* compare checkbox */
.compare-check {
  position: absolute;
  top: 14px;
  right: 14px;
  display: none;
}
.pcard:hover .compare-check { display: block; }
.compare-check input {
  accent-color: var(--gold);
  width: 13px; height: 13px;
  cursor: pointer;
}



/* ── PAGINATION ── */
.pag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 28px;
}
.pag-info { font-size: 12px; color: var(--white); }
.pag-btns { display: flex; gap: 4px; }
.pbtn {
  width: 34px; height: 34px;
  border: 1px solid var(--border-mid);
  background: transparent;
  font-size: 12px;
  
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.pbtn:hover { border-color: var(--gold); color: var(--gold); }
.pbtn.active { background: var(--btn-hover); color: var(--gold-light); border-color: var(--btn); }

/* ── STICKY COMPARE BAR (appears when items checked) ── */
.compare-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #2b1a00;
  border: 1px solid rgba(212,175,55,0.25);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
  z-index: 500;
  animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.compare-bar-text { font-size: 13px; color: rgba(255,255,255,0.9); }
.compare-bar-text strong { color: var(--gold); }
.compare-go {
  background: #916416;
  color: var(--white);
  border: none;
  padding: 10px 22px;
  
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.compare-clear {
  background: none;
  border: none;
  
  font-size: 11px;
  color: rgba(255,255,255,0.80);
  cursor: pointer;
  text-decoration: underline;
}
.compare-clear:hover { color: rgba(255,255,255,0.6); }

/* AJAX Loading States */
.pgrid, .pag {
  transition: opacity 0.25s ease-in-out;
}
.pgrid.loading, .pag.loading {
  opacity: 0.4;
  pointer-events: none;
}

/* ── MOBILE FILTER TOGGLE BUTTON ── */
.mobile-filter-toggle {
  display: none; /* hidden on desktop */
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--btn-hover);
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--white);
  cursor: pointer;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: all 0.18s;
  flex-shrink: 0;
}
.mobile-filter-toggle:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ── MOBILE SIDEBAR BACKDROP ── */
.sidebar-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 149;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.sidebar-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── TABLET (≤1024px) ── */
@media (max-width: 1024px) {
  .page-header { padding: 28px 24px 0; }
  .page-title { font-size: 30px; }
  .toolbar { padding: 10px 24px; }
  .layout { grid-template-columns: 180px 1fr; }
  .main { padding: 22px 24px 60px; }
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .cat-intro { flex-direction: column; gap: 16px; }
  .cat-intro-stats { justify-content: flex-start; }
  .cs { text-align: left; }
}

/* ── SMALL TABLET (≤768px) ── */
@media (max-width: 768px) {
  /* Page header */
  .page-header { padding: 20px 16px 0; }
  .page-title { font-size: 26px; }
  .page-subtitle { font-size: 12px; margin-bottom: 20px; }
  .breadcrumb { font-size: 10px; gap: 6px; margin-bottom: 12px; }

  /* Toolbar stacks */
  .toolbar {
    padding: 10px 16px;
    flex-wrap: wrap;
    gap: 8px;
    position: sticky;
    top: 0;
  }
  .toolbar-left {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .search-wrap {
    flex: 1;
    min-width: 0;
  }
  .search-input {
    width: 100%;
    font-size: 13px;
  }
  .result-pill { display: none; } /* Hidden on mobile — count shown in subtitle */

  /* Show mobile filter button */
  .mobile-filter-toggle { display: inline-flex; }

  /* Layout: sidebar becomes off-canvas drawer */
  .layout {
    display: block; /* single column */
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    max-width: 85vw;
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    z-index: 10000;
    padding: 24px 20px 80px;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    border-right: 1px solid var(--border-mid);
    box-shadow: 4px 0 24px rgba(0,0,0,0.35);
  }
  .sidebar.open { left: 0; }

  /* Show paction View link on mobile/tablet */
  .paction { opacity: 1; }

  /* Add a close button inside sidebar header on mobile */
  .sidebar-close {
    display: flex;
  }

  /* Main content fills full width */
  .main {
    padding: 16px 16px 60px;
  }

  /* Grid: 2 columns on tablet */
  .pgrid { grid-template-columns: repeat(2, 1fr); }

  /* Category intro strip */
  .cat-intro {
    padding: 16px;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
  }
  .cat-intro-title { font-size: 18px; }
  .cat-intro-desc { font-size: 11px; max-width: 100%; }
  .cat-intro-stats { gap: 20px; }
  .cs-val { font-size: 20px; }

  /* Pagination wraps */
  .pag {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .pag-btns { flex-wrap: wrap; }

  /* Toolbar clear button text hidden — show icon only */
  .toolbar-clear-btn span { display: none; }
}

/* ── MOBILE (≤480px) ── */
@media (max-width: 480px) {
  .page-header { padding: 16px 12px 0; }
  .page-title { font-size: 22px; }
  .toolbar { padding: 8px 12px; gap: 6px; }
  .search-input { font-size: 13px; }

  /* Grid: single column on small phones */
  .pgrid { grid-template-columns: 1fr; }

  .pcard { min-height: 130px; padding: 16px 14px 12px; }
  .pname { font-size: 14px; }
  .preturn-val { font-size: 17px; }

  .main { padding: 12px 12px 60px; }

  .cat-intro { padding: 14px; }
  .cat-intro-title { font-size: 16px; }

  /* Pagination: tighter */
  .pbtn { width: 30px; height: 30px; font-size: 11px; }
  .pag-info { font-size: 11px; }
}

/* ── SIDEBAR CLOSE BUTTON (mobile only) ── */
.sidebar-close {
  display: none; /* hidden on desktop */
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  padding: 6px;
  line-height: 1;
  font-size: 18px;
  transition: color 0.15s;
}
.sidebar-close:hover { color: var(--gold); }