/* basic.css */
:root {
    /* Wrapper Size */
    --wrapper-size: 80%;
    
    /* Base Margin */
    --base-margin: 0.5rem;
    /* Base Padding */
    --base-padding: 0.5rem;
}

/* FOR WRAPPER SIZE */
@media screen and (min-width: 0px) and (max-width: 1024px) {
    :root {
      /* Wrapper Size */
      --wrapper-size: 92.5%;
    }  
}
@media screen and (min-width: 1025px) and (max-width: 1499px) {
    :root {
      /* Wrapper Size */
      --wrapper-size: 95%;
    }  
}
@media screen and (min-width: 1500px) {
    :root {
      /* Wrapper Size */
      --wrapper-size: 90rem;
    }  
}


html, body {
	margin: 0rem;
  font-family: var(--font-family-primary), sans-serif;
  color: var(--color-text);
}
body {
  padding-top: 6rem;
}

/* NO SELECT */
.no-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

/* NO SCROLL */
.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* ANCHOR */
a {
	text-decoration: none;
	color: inherit;
  cursor: pointer;
}
a.anchor-underline {
	text-decoration: none !important;
}
a.anchor-underline:hover {
	text-decoration: underline !important;
}

a.primary {
  color: var(--color-primary);
}
a.secondary {
  color: var(--color-secondary);
  text-decoration: underline;
}

/* BREADCRUMB

  <div class="breadcrumb mb2">
      <a class="breadcrumb-item">Home</a>
      <a class="separator">/</a>
      <a class="breadcrumb-item breadcrumb-item-selected">Do What's Healthier</a>
  </div>

*/
.breadcrumb {
  font-size: 0.8rem;
  font-weight: 400;
  display: flex;
  align-items: center;
	gap: 0.3rem;
}
.breadcrumb .breadcrumb-item {
  text-decoration: none;
  transition: color 0.3s ease;
	color: var(--color-text-tertiary) !important;
}
.breadcrumb a.breadcrumb-item:hover {
  text-decoration: underline;
}
.breadcrumb .separator {
	opacity: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;
	color: var(--color-text-tertiary) !important;
}
.breadcrumb .breadcrumb-item-selected {
	font-weight: 500;
	color: var(--color-primary) !important;
}

/* AUTO MARGIN UTILITIES */
/* All sides auto */
.m-auto { margin: auto; }

/* Horizontal auto (center blocks) */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Vertical auto */
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

/* Individual sides */
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* Margin bottom utility classes */
.mb0 { margin-bottom: calc(var(--base-margin) * 0); }
.mb1 { margin-bottom: calc(var(--base-margin) * 1); }
.mb2 { margin-bottom: calc(var(--base-margin) * 2); }
.mb3 { margin-bottom: calc(var(--base-margin) * 3); }
.mb4 { margin-bottom: calc(var(--base-margin) * 4); }
.mb5 { margin-bottom: calc(var(--base-margin) * 5); }
.mb6 { margin-bottom: calc(var(--base-margin) * 6); }
.mb7 { margin-bottom: calc(var(--base-margin) * 7); }
.mb8 { margin-bottom: calc(var(--base-margin) * 8); }
.mb9 { margin-bottom: calc(var(--base-margin) * 9); }
.mb10 { margin-bottom: calc(var(--base-margin) * 10); }
.mb11 { margin-bottom: calc(var(--base-margin) * 11); }
.mb12 { margin-bottom: calc(var(--base-margin) * 12); }
.mb13 { margin-bottom: calc(var(--base-margin) * 13); }
.mb14 { margin-bottom: calc(var(--base-margin) * 14); }
.mb15 { margin-bottom: calc(var(--base-margin) * 15); }
.mb16 { margin-bottom: calc(var(--base-margin) * 16); }
.mb17 { margin-bottom: calc(var(--base-margin) * 17); }
.mb18 { margin-bottom: calc(var(--base-margin) * 18); }
.mb19 { margin-bottom: calc(var(--base-margin) * 19); }
.mb20 { margin-bottom: calc(var(--base-margin) * 20); }

/* Margin top utility classes */
.mt0 { margin-top: calc(var(--base-margin) * 0); }
.mt1 { margin-top: calc(var(--base-margin) * 1); }
.mt2 { margin-top: calc(var(--base-margin) * 2); }
.mt3 { margin-top: calc(var(--base-margin) * 3); }
.mt4 { margin-top: calc(var(--base-margin) * 4); }
.mt5 { margin-top: calc(var(--base-margin) * 5); }
.mt6 { margin-top: calc(var(--base-margin) * 6); }
.mt7 { margin-top: calc(var(--base-margin) * 7); }
.mt8 { margin-top: calc(var(--base-margin) * 8); }
.mt9 { margin-top: calc(var(--base-margin) * 9); }
.mt10 { margin-top: calc(var(--base-margin) * 10); }
.mt11 { margin-top: calc(var(--base-margin) * 11); }
.mt12 { margin-top: calc(var(--base-margin) * 12); }
.mt13 { margin-top: calc(var(--base-margin) * 13); }
.mt14 { margin-top: calc(var(--base-margin) * 14); }
.mt15 { margin-top: calc(var(--base-margin) * 15); }
.mt16 { margin-top: calc(var(--base-margin) * 16); }
.mt17 { margin-top: calc(var(--base-margin) * 17); }
.mt18 { margin-top: calc(var(--base-margin) * 18); }
.mt19 { margin-top: calc(var(--base-margin) * 19); }
.mt20 { margin-top: calc(var(--base-margin) * 20); }

/* Margin right utility classes */
.mr0 { margin-right: calc(var(--base-margin) * 0); }
.mr1 { margin-right: calc(var(--base-margin) * 1); }
.mr2 { margin-right: calc(var(--base-margin) * 2); }
.mr3 { margin-right: calc(var(--base-margin) * 3); }
.mr4 { margin-right: calc(var(--base-margin) * 4); }
.mr5 { margin-right: calc(var(--base-margin) * 5); }
.mr6 { margin-right: calc(var(--base-margin) * 6); }
.mr7 { margin-right: calc(var(--base-margin) * 7); }
.mr8 { margin-right: calc(var(--base-margin) * 8); }
.mr9 { margin-right: calc(var(--base-margin) * 9); }
.mr10 { margin-right: calc(var(--base-margin) * 10); }
.mr11 { margin-right: calc(var(--base-margin) * 11); }
.mr12 { margin-right: calc(var(--base-margin) * 12); }
.mr13 { margin-right: calc(var(--base-margin) * 13); }
.mr14 { margin-right: calc(var(--base-margin) * 14); }
.mr15 { margin-right: calc(var(--base-margin) * 15); }
.mr16 { margin-right: calc(var(--base-margin) * 16); }
.mr17 { margin-right: calc(var(--base-margin) * 17); }
.mr18 { margin-right: calc(var(--base-margin) * 18); }
.mr19 { margin-right: calc(var(--base-margin) * 19); }
.mr20 { margin-right: calc(var(--base-margin) * 20); }

/* Margin left utility classes */
.ml0 { margin-left: calc(var(--base-margin) * 0); }
.ml1 { margin-left: calc(var(--base-margin) * 1); }
.ml2 { margin-left: calc(var(--base-margin) * 2); }
.ml3 { margin-left: calc(var(--base-margin) * 3); }
.ml4 { margin-left: calc(var(--base-margin) * 4); }
.ml5 { margin-left: calc(var(--base-margin) * 5); }
.ml6 { margin-left: calc(var(--base-margin) * 6); }
.ml7 { margin-left: calc(var(--base-margin) * 7); }
.ml8 { margin-left: calc(var(--base-margin) * 8); }
.ml9 { margin-left: calc(var(--base-margin) * 9); }
.ml10 { margin-left: calc(var(--base-margin) * 10); }
.ml11 { margin-left: calc(var(--base-margin) * 11); }
.ml12 { margin-left: calc(var(--base-margin) * 12); }
.ml13 { margin-left: calc(var(--base-margin) * 13); }
.ml14 { margin-left: calc(var(--base-margin) * 14); }
.ml15 { margin-left: calc(var(--base-margin) * 15); }
.ml16 { margin-left: calc(var(--base-margin) * 16); }
.ml17 { margin-left: calc(var(--base-margin) * 17); }
.ml18 { margin-left: calc(var(--base-margin) * 18); }
.ml19 { margin-left: calc(var(--base-margin) * 19); }
.ml20 { margin-left: calc(var(--base-margin) * 20); }

/* Padding top utility classes */
.pt0 { padding-top: calc(var(--base-padding) * 0); }
.pt1 { padding-top: calc(var(--base-padding) * 1); }
.pt2 { padding-top: calc(var(--base-padding) * 2); }
.pt3 { padding-top: calc(var(--base-padding) * 3); }
.pt4 { padding-top: calc(var(--base-padding) * 4); }
.pt5 { padding-top: calc(var(--base-padding) * 5); }
.pt6 { padding-top: calc(var(--base-padding) * 6); }
.pt7 { padding-top: calc(var(--base-padding) * 7); }
.pt8 { padding-top: calc(var(--base-padding) * 8); }
.pt9 { padding-top: calc(var(--base-padding) * 9); }
.pt10 { padding-top: calc(var(--base-padding) * 10); }
.pt11 { padding-top: calc(var(--base-padding) * 11); }
.pt12 { padding-top: calc(var(--base-padding) * 12); }
.pt13 { padding-top: calc(var(--base-padding) * 13); }
.pt14 { padding-top: calc(var(--base-padding) * 14); }
.pt15 { padding-top: calc(var(--base-padding) * 15); }
.pt16 { padding-top: calc(var(--base-padding) * 16); }
.pt17 { padding-top: calc(var(--base-padding) * 17); }
.pt18 { padding-top: calc(var(--base-padding) * 18); }
.pt19 { padding-top: calc(var(--base-padding) * 19); }
.pt20 { padding-top: calc(var(--base-padding) * 20); }

/* Padding bottom utility classes */
.pb0 { padding-bottom: calc(var(--base-padding) * 0); }
.pb1 { padding-bottom: calc(var(--base-padding) * 1); }
.pb2 { padding-bottom: calc(var(--base-padding) * 2); }
.pb3 { padding-bottom: calc(var(--base-padding) * 3); }
.pb4 { padding-bottom: calc(var(--base-padding) * 4); }
.pb5 { padding-bottom: calc(var(--base-padding) * 5); }
.pb6 { padding-bottom: calc(var(--base-padding) * 6); }
.pb7 { padding-bottom: calc(var(--base-padding) * 7); }
.pb8 { padding-bottom: calc(var(--base-padding) * 8); }
.pb9 { padding-bottom: calc(var(--base-padding) * 9); }
.pb10 { padding-bottom: calc(var(--base-padding) * 10); }
.pb11 { padding-bottom: calc(var(--base-padding) * 11); }
.pb12 { padding-bottom: calc(var(--base-padding) * 12); }
.pb13 { padding-bottom: calc(var(--base-padding) * 13); }
.pb14 { padding-bottom: calc(var(--base-padding) * 14); }
.pb15 { padding-bottom: calc(var(--base-padding) * 15); }
.pb16 { padding-bottom: calc(var(--base-padding) * 16); }
.pb17 { padding-bottom: calc(var(--base-padding) * 17); }
.pb18 { padding-bottom: calc(var(--base-padding) * 18); }
.pb19 { padding-bottom: calc(var(--base-padding) * 19); }
.pb20 { padding-bottom: calc(var(--base-padding) * 20); }

/* Gap utility classes */
.gap1 { gap: calc(var(--base-padding) * 1); }
.gap2 { gap: calc(var(--base-padding) * 2); }
.gap3 { gap: calc(var(--base-padding) * 3); }
.gap4 { gap: calc(var(--base-padding) * 4); }
.gap5 { gap: calc(var(--base-padding) * 5); }
.gap6 { gap: calc(var(--base-padding) * 6); }
.gap7 { gap: calc(var(--base-padding) * 7); }
.gap8 { gap: calc(var(--base-padding) * 8); }
.gap9 { gap: calc(var(--base-padding) * 9); }
.gap10 { gap: calc(var(--base-padding) * 10); }
.gap11 { gap: calc(var(--base-padding) * 11); }
.gap12 { gap: calc(var(--base-padding) * 12); }
.gap13 { gap: calc(var(--base-padding) * 13); }
.gap14 { gap: calc(var(--base-padding) * 14); }
.gap15 { gap: calc(var(--base-padding) * 15); }
.gap16 { gap: calc(var(--base-padding) * 16); }
.gap17 { gap: calc(var(--base-padding) * 17); }
.gap18 { gap: calc(var(--base-padding) * 18); }
.gap19 { gap: calc(var(--base-padding) * 19); }
.gap20 { gap: calc(var(--base-padding) * 20); }

/* FLEXBOX CLASSES */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-1 { flex: 1; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-1 { flex-shrink: 1; }
.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.align-items-center { align-items: center; }
.align-items-baseline { align-items: baseline; }
.align-items-stretch { align-items: stretch; }
.align-content-start { align-content: flex-start; }
.align-content-end { align-content: flex-end; }
.align-content-center { align-content: center; }
.align-content-between { align-content: space-between; }
.align-content-around { align-content: space-around; }
.align-content-stretch { align-content: stretch; }

/* CONTAINER */
.container {
	width: var(--wrapper-size);
}

/* DIV CENTER */
.centered-div {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Overlay */
.overlay {
  width: 100%;
  height: 100%;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  inset: 0;
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(0.15rem);
  -webkit-backdrop-filter: blur(0.15rem);
  display: none;
}

/* ACCORDION */
.accordion {
}

/* ACCORDION TOP */
.accordion .accordion-top {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-background-light-xlll);
  transition: 0.2s;
  cursor: pointer;
  font-size: 0.95rem;
}
.accordion .accordion-top:hover {
  background-color: var(--color-background-light-xll);
}
.accordion .accordion-top .icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ACCORDION BOTTOM */
.accordion .accordion-bottom {
  padding: 1rem;
  font-size: 0.95rem;
  line-height: 1.5rem;
}
.accordion .accordion-bottom.closed {
  display: none;
}
.accordion .accordion-bottom.open {
  display: block;
}

/* TEXT UNDERLINE */
.text-underline {
  text-decoration: underline;
}

/* GLOBAL PAGES CONTENT HEADER */
.global-pages-content-header-wrapper {
  width: 100%;
}
.global-pages-content-header-wrapper .global-pages-content-header {
  padding: 2rem;
  padding-top: 15rem;
  background-color: var(--color-primary);
  position: relative;
  overflow: hidden;
}

.global-pages-content-header-wrapper .global-pages-content-header .global-pages-content-image-wrapper {
  width: 100%;
  height: 100%;
  
  position: absolute;

  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.global-pages-content-header-wrapper .global-pages-content-header .global-pages-content-image-wrapper .global-pages-content-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  z-index: 1;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.45) 30%,
    rgba(0,0,0,0.15) 60%,
    rgba(0,0,0,0) 100%
  );
}
.global-pages-content-header-wrapper .global-pages-content-header .global-pages-content-image-wrapper .global-pages-content-image {
  width: 100%;
  height: 100%;
  
  object-fit: cover;
}

.global-pages-content-header-wrapper .global-pages-content-header .global-pages-content-title {
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--color-text-secondary);

  z-index: 1;
  position: relative;
}

/* DISPLAY */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.none { display: none; }

.grid { display: grid; }
.inline-grid { display: inline-grid; }

.table { display: table; }
.table-row { display: table-row; }
.table-cell { display: table-cell; }

/* SEPERATING LINE */
.seperating-line {
  width: 100%;
  height: 0.1rem;
  background-color: var(--color-background-light-xll);
}

/* SEO CONTENT GREY */
.seo-content-grey-background {
    background-color: rgb(247, 247, 247);
    width: 100%;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.seo-content-grey-background h6,
.seo-content-grey-background p {
    font-size: 0.70rem;
}

/* typography.css */
/* =========================
   FONT FACES
========================= */

/* Inter Regular Variable Font */
@font-face {
  font-family: 'Inter';
  src: url('https://cdn.lorfin.in/vitabowl/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Inter Italic Variable Font */
@font-face {
  font-family: 'Inter';
  src: url('https://cdn.lorfin.in/vitabowl/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Grottel Fonts */
@font-face {
  font-family: 'Grottel';
  src: url('https://cdn.lorfin.in/vitabowl/fonts/Grottel/Grottel-ExtraBold.ttf');
  font-weight: 700;
}

@font-face {
  font-family: 'Grottel';
  src: url('https://cdn.lorfin.in/vitabowl/fonts/Grottel/Grottel-Bold.ttf');
  font-weight: 600;
}

@font-face {
  font-family: 'Grottel';
  src: url('https://cdn.lorfin.in/vitabowl/fonts/Grottel/Grottel-Medium.ttf');
  font-weight: 500;
}

@font-face {
  font-family: 'Grottel';
  src: url('https://cdn.lorfin.in/vitabowl/fonts/Grottel/Grottel-Regular.ttf');
  font-weight: 400;
}

@font-face {
  font-family: 'Grottel';
  src: url('https://cdn.lorfin.in/vitabowl/fonts/Grottel/Grottel-Light.ttf');
  font-weight: 300;
}


/* =========================
   FONT FAMILY
========================= */

.font-inter {
  font-family: 'Inter', sans-serif;
}

.font-grottel {
  font-family: 'Grottel', sans-serif;
}


/* =========================
   FONT WEIGHT
========================= */

.fw900 { font-weight: 900; }
.fw800 { font-weight: 800; }
.fw700 { font-weight: 700; }
.fw600 { font-weight: 600; }
.fw500 { font-weight: 500; }
.fw400 { font-weight: 400; }
.fw300 { font-weight: 300; }
.fw200 { font-weight: 200; }
.fw100 { font-weight: 100; }


/* =========================
   FONT SIZE (REM SCALE)
========================= */

.fs-xs  { font-size: 0.66rem; }
.fs-sm  { font-size: 0.875rem; }
.fs-md  { font-size: 1rem; }
.fs-lg  { font-size: 1.125rem; }
.fs-xl  { font-size: 1.25rem; }
.fs-2xl { font-size: 1.5rem; }
.fs-3xl { font-size: 1.875rem; }
.fs-4xl { font-size: 2.25rem; } 
.fs-5xl { font-size: 3rem; }  
.fs-6xl { font-size: 3.75rem; }


/* =========================
   LINE HEIGHT
========================= */

.lh-none   { line-height: 1; }
.lh-tight  { line-height: 1.2; }
.lh-snug   { line-height: 1.35; }
.lh-normal { line-height: 1.5; }
.lh-relaxed{ line-height: 1.7; }
.lh-loose  { line-height: 2; }


/* =========================
   LETTER SPACING
========================= */

.ls-tight  { letter-spacing: -0.02em; }
.ls-normal { letter-spacing: 0; }
.ls-wide   { letter-spacing: 0.04em; }
.ls-wider  { letter-spacing: 0.08em; }


/* =========================
   TEXT ALIGN
========================= */

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }


/* =========================
   TEXT TRANSFORM
========================= */

.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }


/* =========================
   TEXT WRAP
========================= */

.text-nowrap { white-space: nowrap; }
.text-wrap   { white-space: normal; }


/* =========================
   HEADING DEFAULT SCALE
========================= */

h1 { font-size: 2.5rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.875rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }

p  { font-size: 1rem; line-height: 1.6; }


/* =========================
   TEXT TRUNCATION
========================= */

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* alerts.css */
.alert-wrapper {
    
}
.alert-wrapper .alert {
    padding: 1rem;
    border-left-style: solid;
    border-left-width: 0.2rem;
    background-color: var(--color-background-light-xlll);
}
.alert-wrapper .alert .alert-title {
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
.alert-wrapper .alert .alert-content {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text-tertiary);
    margin-bottom: 0.5rem;
}

.alert-wrapper .alert.primary {
    border-left-color: var(--color-primary);
}
.alert-wrapper .alert.success {
    border-left-color: var(--color-success);
}
.alert-wrapper .alert.danger {
    border-left-color: var(--color-danger);
}

.alert-wrapper .alert .alert-title .icon {
}
.alert-wrapper .alert.primary .alert-title .icon {
    color: var(--color-primary);
}
.alert-wrapper .alert.success .alert-title .icon {
    color: var(--color-success);
}
.alert-wrapper .alert.danger .alert-title .icon {
    color: var(--color-danger);
}

/* buttons.css */
.button-group {
    display: flex;
    flex-wrap: wrap;
}

button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.85rem 1.5rem 0.85rem 1.5rem;
    cursor: pointer;
    font-family: var(--font-family-primary);
    font-weight: 600;
    font-size: 1rem;
    gap: 0.25rem;

    border-radius: 0.5rem;
    border: solid;
    border-width: 0.01rem;

    transition: 0.2s;
}
button.full-width {
    width: 100%;
}

button.primary {
    background-color: var(--color-secondary);
}
button.secondary {
    background-color: var(--color-primary);
    color: var(--color-text-secondary);
}
button.transparent {
    color: var(--color-text-secondary);
}
button.success {
    background-color: var(--color-success);
    color: var(--color-text-secondary);
}
button.danger {
    background-color: var(--color-danger);
    color: var(--color-text-secondary);
}
button.disabled {
    opacity: 0.8;
    cursor: default;
}
button:hover {
    opacity: 0.8;
}
button.primary {
    border-color: var(--color-border);
}

/* Version 1 */
button.primary-v1 {
    background-color: var(--color-background-light-xlll);
    border: none;

    transition: 0.1s;
}
button.primary-v1:hover {
    background-color: var(--color-primary);
    color: var(--color-text-secondary);

    opacity: 1;
}


button.circular-button {
    width: 2rem;
    height: 2rem;

    padding: 0rem;

    border-radius: 50%;
}

button .text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
}

/* cards.css */

/* inputs.css */
.input-group {
    display: flex;
    justify-content: start;
    align-items: start;
    gap: var(--spacing-sm);
}

.input-wrapper {
    width: 100%;
    position: relative;
}

.input-wrapper .input-floating {
    width: calc(100% - 2rem);
    padding: 0.9rem;
    font-family: var(--font-family-primary);
    font-size: 1rem;
    font-weight: 500;
    border: 0.1rem solid var(--color-border);
    outline: none;
    background: white;
    transition: 0.2s;

    border-radius: 0.5rem;
}

.input-wrapper .input-floating-placeholder-text {
    position: absolute;
    top: 1rem;
    left: 0.9rem;
    font-size: 1rem;
    color: var(--color-text);
    transition: all 0.2s ease;
    pointer-events: none;
    line-height: 1;
}

.input-wrapper:has(.input-floating:focus) .input-floating-placeholder-text,
.input-wrapper:has(.input-floating:not(:placeholder-shown)) .input-floating-placeholder-text {
    top: -0.35rem;
    left: 0.7rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--color-primary);
    background-color: white;
    padding: 0 0.3rem;
}

.input-wrapper .input-floating:focus {
    border-color: var(--color-primary);
}

.input-wrapper .input-floating[disabled] {
    background-color: var(--color-background-light-xll);
}

.input-wrapper.danger:has(.input-floating:focus) .input-floating-placeholder-text,
.input-wrapper.danger:has(.input-floating:not(:placeholder-shown)) .input-floating-placeholder-text {
    color: var(--color-danger);
}
.input-wrapper.danger .input-floating {
    border-color: var(--color-danger);
}
.input-wrapper.success:has(.input-floating:focus) .input-floating-placeholder-text,
.input-wrapper.success:has(.input-floating:not(:placeholder-shown)) .input-floating-placeholder-text {
    color: var(--color-success);
}
.input-wrapper.success .input-floating {
    border-color: var(--color-success);
}

.input-wrapper .input-floating-info-text {
    color: var(--color-text-tertiary);
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 0.5rem;
    display: block;
}
.input-wrapper .input-floating-danger-text {
    display: none;
    color: var(--color-danger);
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 0.65rem;
}
.input-wrapper .input-floating-success-text {
    display: none;
    color: var(--color-success);
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 0.65rem;
    gap: 0.2rem;
}

.input-wrapper:has(.input-floating:focus) .input-floating {
    box-shadow: 0px 0px 0px 0.2rem rgba(0, 136, 184, 0.3);
    -webkit-box-shadow: 0px 0px 0px 0.2rem rgba(0, 136, 184, 0.3);
    -moz-box-shadow: 0px 0px 0px 0.2rem rgba(0, 136, 184, 0.3);
}
.input-wrapper.success:has(.input-floating:focus) .input-floating {
    box-shadow: 0px 0px 0px 0.2rem rgba(16, 100, 47, 0.3);
    -webkit-box-shadow: 0px 0px 0px 0.2rem rgba(16, 100, 47, 0.3);
    -moz-box-shadow: 0px 0px 0px 0.2rem rgba(16, 100, 47, 0.3);
}
.input-wrapper.danger:has(.input-floating:focus) .input-floating {
    box-shadow: 0px 0px 0px 0.2rem rgba(239, 68, 68, 0.3);
    -webkit-box-shadow: 0px 0px 0px 0.2rem rgba(239, 68, 68, 0.3);
    -moz-box-shadow: 0px 0px 0px 0.2rem rgba(239, 68, 68, 0.3);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* CHECKBOX */
.checkbox-container {
    display: flex;
    justify-content: start;
    gap: 0.75rem; /* give some spacing */
    cursor: pointer;
    user-select: none;
}
.checkbox-container.center {
    align-items: center;
}
.checkbox-container.start {
    align-items: start;
}

.checkbox-container input {
    height: 0;
    width: 0;
    opacity: 0;
    position: absolute; /* take it out of flow */
}

.checkbox-container .checkmark {
    width: 1.25rem;
    height: 1.25rem;
    border: 0.1rem solid var(--color-border);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 0rem 0.2rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    color: white;
}

/* change background when input is checked */
.checkbox-container input:checked + .checkmark {
    background-color: var(--color-primary);
}

.checkbox-container .label {
    width: 90%;
    font-size: 0.85rem;
}

/* RADIO */
.radio-container {
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 0.75rem; /* give some spacing */
    cursor: pointer;
    user-select: none;
}

.radio-container input {
    height: 0;
    width: 0;
    opacity: 0;
    position: absolute; /* take it out of flow */
}

.radio-container .dot {
    width: 1.25rem;
    height: 1.25rem;
    border: 0.1rem solid var(--color-border);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 0rem 0.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    color: white;
}

/* change background when input is checked */
.radio-container input:checked + .dot {
    background-color: var(--color-primary);
}

.radio-container .label {
    width: 90%;
    font-size: 0.85rem;
}

/* === BUTTON STYLE RADIO GROUP (isolated) === */
.radio-button-group {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* Each button wrapper */
.radio-button {
  position: relative;
  cursor: pointer;
  user-select: none;
}

/* Hide native input */
.radio-button input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Label styled as button */
.radio-button .radio-btn-label {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  border: 0.1rem solid var(--color-border);
  font-size: 0.9rem;
  font-weight: 500;
  background: white;
  transition: all 0.2s ease;
  font-family: var(--font-family-primary);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 0rem 0.2rem;
}

/* Checked state */
.radio-button input:checked + .radio-btn-label {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  box-shadow: 0px 0px 0px 0.2rem rgba(0, 136, 184, 0.3);
}

/* Hover */
.radio-button .radio-btn-label:hover {
}

/* Disabled */
.radio-button input:disabled + .radio-btn-label {
  background-color: var(--color-background-light-xll);
  color: var(--color-text-light);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Wrapper */
.radio-button-group-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Title */
.radio-button-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-family-primary);
}

.radio-button-title span {
  color: var(--color-primary);
}

/* Bordered Checkbox and Radio */
.checkbox-container-bordered,
.radio-container-bordered {
    padding: 1rem;
    border: 0.1rem solid var(--color-border);
    border-radius: var(--radius-md);
    transition: 0.2s;
}

.checkbox-container-bordered:has(input:focus),
.checkbox-container-bordered:has(input:checked),
.radio-container-bordered:has(input:focus),
.radio-container-bordered:has(input:checked) {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, var(--color-primary) 0px 0px 0px 3px;
}

@media screen and (min-width: 0px) and (max-width: 1024px) {
    .input-group {
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }
}
@media screen and (min-width: 1025px) and (max-width: 1499px) {
}
@media screen and (min-width: 1500px) {
}

/* Chrome, Safari, Edge, Opera */
.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.no-spin[type=number] {
  -moz-appearance: textfield;
}

/* loader.css */
/* SPINNER */
.loader {
  border: 0.15rem solid #f3f3f3; /* Light grey */
  border-top: 0.15rem solid var(--color-primary); /* Blue */
  border-radius: 50%;
  width: 0.8rem;
  height: 0.8rem;
  animation: spin 2s linear infinite;
  display: none;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* SHIMMER */
.shimmer {
  width: 100%; /* flexible width, adjust as needed */
  background: linear-gradient(
    90deg,
    #f3f3f3 0%,
    #e0e0e0 20%,
    #f3f3f3 40%,
    #f3f3f3 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* marquee.css */
.marquee {
    width: auto;
    overflow: hidden;

    position: relative;
}

.marquee .marquee-track {
    display: flex;
    width: max-content;

    will-change: transform;
}

.marquee .marquee-track .marquee-wrapper {
    display: flex;
    align-items: center;

    gap: 1.5rem;

    white-space: nowrap;

    padding-right: 1.5rem;
}

/* FADE EFFECT */
.fade-div-marquee::before,
.fade-div-marquee::after {
    content: "";

    position: absolute;
    top: 0;

    width: 80px;
    height: 100%;

    z-index: 2;

    pointer-events: none;
}

.fade-div-marquee::before {
    left: 0;

    background: #ffffff;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.fade-div-marquee::after {
    right: 0;

    background: #ffffff;
    background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

/* misc-components.css */
.badge {
    padding: 0.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    
    background-color: rgba(23, 120, 185, 0.2);
    color: var(--color-primary);

    border-radius: 0.25rem;

    font-weight: 400;

    display: table;

}
.badge .badge-text {
    font-size: 0.8rem;
}

/* modals.css */
/* POPUP MODALS */
.popup-modal {
    height: calc(100% - 2rem);
    background-color: white;
    position: fixed;
    right: 0;
    top: 0rem;
    z-index: 999;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 2rem;
    display: none;
    overflow: scroll;
}
.popup-modal .popup-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 500;
}
.popup-modal .close-btn {
    width: 2rem;
    height: 2rem;
    color: var(--color-text);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.5rem;
}

@media screen and (min-width: 0px) and (max-width: 400px) {
    .popup-modal {
        width: calc(100% - 4rem) !important;
    }
}
@media screen and (min-width: 400px) and (max-width: 600px) {
    .popup-modal {
        width: calc(90% - 4rem) !important;
    }
}

/* MODALS */
.modal-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.modal-wrapper .modal {
    padding: 1rem;
    background-color: var(--color-secondary);
    border-style: solid;
    border-width: 0.1rem;
    border-color: var(--color-border);
    box-shadow: var(--shadow-modal);
    word-break: break-word;
}

/* MODALS - SEPERATOR */
.modal-wrapper .modal .modal-seperator {
    width: 100%;
    height: 0.1rem;
    background-color: var(--color-border);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* MODALS - TITLE */
.modal-wrapper .modal .modal-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-wrapper .modal .modal-title .modal-title-main {
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.modal-wrapper .modal .modal-title .modal-title-main .modal-title-step-circle {
    font-weight: 500;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-text-secondary);
    border-radius: 50%;
}

.modal-wrapper .modal .modal-title .modal-title-secondary {
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
}

/* MODALS - CONTENT */
.modal-wrapper .modal .modal-content {
    
}

/* header.css */
/* Fake top bar for iOS translucent effect */
.ios-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: env(safe-area-inset-top); /* respects notch */
  background-color: #ff6600; /* color you want */
  z-index: 9999;
}

/* Show Overlay */
.sub-menu-overlay {
  z-index: 10;
}

/* Header Tag */
header {
    position: fixed;
    width: 100%;
    top: 0rem;
    z-index: 11;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

/* Announcement Bar */
header .top-header-announcement-bar-wrapper {
    width: 100%;
    background-color: var(--color-primary);
    color: var(--color-text-secondary);
    text-align: center;
    font-size: 0.70rem;
    font-weight: 400;
}
header .top-header-announcement-bar-wrapper .top-header-announcement-bar {
    height: 2.5rem;
}
header .top-header-announcement-bar-wrapper .top-header-announcement-bar .announcement-bar-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2rem;
}

/* Top Desktop Header Wrapper */
header .desktop-top-header-wrapper {
    width: 100%;
    background-color: white;
    border-bottom-style: solid;
    border-bottom-width: 0.1rem;
    border-bottom-color: rgba(218, 218, 218, 0.2);
    z-index: 6; 
    position: relative;
}
header .desktop-top-header-wrapper .container {
    display: flex;
    justify-content: space-between;
    position: relative;
}
header .desktop-top-header-wrapper .container .left-wrapper {
    display: flex;
    justify-content: start;
    align-items: stretch;
}
header .desktop-top-header-wrapper .container .middle-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
header .desktop-top-header-wrapper .container .right-wrapper {
    display: flex;
    justify-content: start;
    align-items: stretch;
}

header .desktop-top-header-wrapper .container .middle-wrapper .logo {
    height: 1.8rem;
}
header .desktop-top-header-wrapper .container .navigation-item {
    border-bottom-style: solid;
    border-bottom-width: 0.15rem;
    border-bottom-color: transparent;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text);
}
header .desktop-top-header-wrapper .container .navigation-item.bordered-anim:hover {
    border-bottom-style: solid;
    border-bottom-width: 0.15rem;
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
}
header .desktop-top-header-wrapper .container .navigation-item .bx-chevron-down {
    transition: 0.2s;
    transform: rotate(0deg);
    margin-left: 0.5rem;
    font-size: 1rem;
}
header .desktop-top-header-wrapper .container .navigation-item:hover .bx-chevron-down {
    transform: rotate(180deg);
}
header .desktop-top-header-wrapper .container .navigation-item.icon {
    font-size: 1.2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

header .desktop-top-header-wrapper .container .navigation-item.active {
    border-bottom-style: solid;
    border-bottom-width: 0.15rem;
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
}
header .desktop-top-header-wrapper .container .navigation-item.active .bx-chevron-down {
    transform: rotate(180deg);
}
/* Cart Icon*/
header .desktop-top-header-wrapper .container .navigation-item.cart-icon {
}
header .desktop-top-header-wrapper .container .navigation-item.cart-icon .cart-counter {
    background-color: var(--color-primary);
    color: var(--color-text-secondary);
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
}

/* Top Mobile Header Wrapper */
header .mobile-top-header-wrapper {
    width: 100%;
    border-bottom-style: solid;
    border-bottom-width: 0.1rem;
    border-bottom-color: rgba(218, 218, 218, 1);
    background-color: white;
    position: relative;
    display: none;
    z-index: 1;
}
header .mobile-top-header-wrapper .container {
    display: flex;
    justify-content: space-between;
}
header .mobile-top-header-wrapper .container .left-wrapper {
    display: flex;
    justify-content: start;
    align-items: stretch;
}
header .mobile-top-header-wrapper .container .right-wrapper {
    display: flex;
    justify-content: start;
    align-items: stretch;
}

header .mobile-top-header-wrapper .container .middle-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
header .mobile-top-header-wrapper .container .middle-wrapper .logo {
    height: 2rem;
}
header .mobile-top-header-wrapper .container .middle-wrapper .navigation-item {
    padding: 0rem;
}
header .mobile-top-header-wrapper .container .middle-wrapper .navigation-item:hover {
    border-bottom-color: transparent;
}
header .mobile-top-header-wrapper .container .navigation-item {
    border-bottom-style: solid;
    border-bottom-width: 0.2rem;
    border-bottom-color: transparent;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
}
header .mobile-top-header-wrapper .container .navigation-item.bordered-anim:hover {
    border-bottom-style: solid;
    border-bottom-width: 0.2rem;
    border-bottom-color: var(--color-primary);
}
header .mobile-top-header-wrapper .container .navigation-item .bx-chevron-down {
    transition: 0.2s;
    transform: rotate(0deg);
    margin-left: 0.5rem;
    font-size: 1rem;
}
header .mobile-top-header-wrapper .container .navigation-item:hover .bx-chevron-down {
    transform: rotate(180deg);
}
header .mobile-top-header-wrapper .container .navigation-item.icon {
    font-size: 1.5rem;
}

/* Desktop Submenu */
header .submenu-centered {
    display: flex;
    justify-content: center;
    align-items: center;
}
header .desktop-header-submenu-wrapper {
    width: 100%;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
    background-color: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    z-index: 5;
    display: none;
    position: absolute;
}
header .desktop-header-submenu-wrapper .submenu-group-flex {
    display: flex;
    justify-content: start;
    align-items: stretch;
    gap: 4rem;
}
header .desktop-header-submenu-wrapper .submenu-group {
    display: flex;
    justify-content: start;
    align-items: stretch;
    gap: 0.5rem;
}
header .desktop-header-submenu-wrapper .submenu-group .submenu-hyperlink-table {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 0.4rem;
}
header .desktop-header-submenu-wrapper .submenu-group .submenu-hyperlink-table .primary-link-heading {
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
    margin-bottom: 0.4rem;
}
header .desktop-header-submenu-wrapper .submenu-group .submenu-hyperlink-table .primary-link-anchor {
    font-size: 1.5rem;
    font-weight: 400;
}

header .desktop-header-submenu-wrapper .submenu-group .submenu-hyperlink-table {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 0.4rem;
}
header .desktop-header-submenu-wrapper .submenu-group .submenu-hyperlink-table .secondary-link-heading {
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
    margin-bottom: 0.4rem;
}
header .desktop-header-submenu-wrapper .submenu-group .submenu-hyperlink-table .secondary-link-anchor {
    font-size: 0.8rem;
    font-weight: 500;
}

header .desktop-header-submenu-wrapper .submenu-group-block-wrapper {
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 1rem;
}

/* v01 Submenu */
header .desktop-header-submenu-wrapper .submenu-group-v01-wrapper {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;

    gap: 3.5rem;
}
header .desktop-header-submenu-wrapper .submenu-group-v01-wrapper .submenu-group-v01-block {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    flex-wrap: wrap;

    min-width: 15.5rem;
}

header .desktop-header-submenu-wrapper .submenu-group-v01-wrapper .submenu-group-v01-block .submenu-title {
    margin-bottom: 1rem;
}
header .desktop-header-submenu-wrapper .submenu-group-v01-wrapper .submenu-group-v01-block .submenu-group-anchor-list {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    flex-wrap: wrap;

    gap: 0.5rem;
}
header .desktop-header-submenu-wrapper .submenu-group-v01-wrapper .submenu-group-v01-block .submenu-group-anchor-list .submenu-group-anchor {
    color: var(--color-text-tertiary);
}

/* Mobile Menu */
header .mobile-main-menu {
    width: 100%;
    height: 100vh; /* full viewport height */
    position: fixed;
    top: 0rem;
    left: 0rem;
    background-color: white;
    z-index: 1000;
    display: none;
    overflow-y: auto; /* enable vertical scrolling */
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
    display: none;
}

/* Mobile Menu - Top Wrapper */
header .mobile-main-menu .top-wrapper {
    border-bottom-style: solid;
    border-bottom-width: 0.1rem;
    border-bottom-color: var(--color-border);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
header .mobile-main-menu .top-wrapper .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .mobile-main-menu .top-wrapper .left-wrapper {
    display: flex;
    justify-content: start;
    align-content: center;
}
header .mobile-main-menu .top-wrapper .right-wrapper {
    display: flex;
    justify-content: end;
    align-content: center;
    gap: 1rem;
}

header .mobile-main-menu .top-wrapper .left-wrapper .main-menu-logo {
    width: 6rem;
    height: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
header .mobile-main-menu .top-wrapper .left-wrapper .main-menu-logo img {
    width: 100%;
}

header .mobile-main-menu .top-wrapper .right-wrapper .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}
header .mobile-main-menu .top-wrapper .right-wrapper .main-menu-close-icon {
    width: 3rem;
    height: 3rem;
}

/* Mobile Menu - Middle Wrapper */
header .mobile-main-menu .middle-wrapper {
    padding-top: 1rem;
    padding-bottom: 1rem;
    max-height: calc(100vh - 6rem); /* subtract top wrapper height */
    overflow-y: auto;
}
header .mobile-main-menu .middle-wrapper .navigation-accordions-wrapper {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: 1rem;
}

header .mobile-main-menu .middle-wrapper .navigation-accordions-wrapper {
    width: 100%;
}

header .mobile-main-menu .middle-wrapper .navigation-accordions-wrapper .navigation-accordion {
    width: 100%;
}
header .mobile-main-menu .middle-wrapper .navigation-accordions-wrapper .navigation-accordion .navigation-accordion-title {
    font-size: 1.5rem;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
header .mobile-main-menu .middle-wrapper .navigation-accordions-wrapper .navigation-accordion .navigation-accordion-title .icon {
    font-size: 1rem;
    color: var(--color-primary);
}
header .mobile-main-menu .middle-wrapper .navigation-accordions-wrapper .navigation-accordion .navigation-accordion-content {
    width: calc(100% - 2rem);
    padding: 1rem;
    border-left-style: solid;
    border-left-width: 0.15rem;
    border-left-color: var(--color-border);
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 1.5rem;
    display: none;
}

header .mobile-main-menu .middle-wrapper .navigation-accordions-wrapper .navigation-accordion .navigation-accordion-content .navigation-hyperlink-group {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 0.5rem;
}
header .mobile-main-menu .middle-wrapper .navigation-accordions-wrapper .navigation-accordion .navigation-accordion-content .navigation-hyperlink-group .navigation-hyperlink-group-title {
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
}
header .mobile-main-menu .middle-wrapper .navigation-accordions-wrapper .navigation-accordion .navigation-accordion-content .navigation-hyperlink-group .navigation-hyperlink-group-hyperlinks {
    font-size: 1rem;
    color: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
}

header .mobile-main-menu .middle-wrapper .navigation-hyperlink {
    font-size: 1.5rem;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 0.25rem;
}




@media screen and (min-width: 0px) and (max-width: 1024px) {

    /* Announcement Bar */
    header .top-header-announcement-bar-wrapper {
        font-size: 0.4;
    }

    /* Top Desktop Header Wrapper */
    header .desktop-top-header-wrapper {
        display: none;
    }

    header .mobile-top-header-wrapper .container .navigation-item {
        padding-left: 0rem;
        padding-right: 0rem;
    }

    /* Top Mobile Header Wrapper */
    header .mobile-top-header-wrapper {
        display: block;
    }

}

/* Search Wrapper - Shimmer */
header .search-bar-shimmer {
    width: 100%;
    display: none;
}
header .search-bar-shimmer .shimmer-001 {
    height: 1rem;
}
header .search-bar-shimmer .shimmer-002 {
    height: 0.8rem;
}
header .search-bar-shimmer .shimmer-003 {
    height: 0.5rem;
}
header .search-bar-shimmer-content {
    width: 100%;
}

/* Search Wrapper */
header .search-overlay {
    z-index: -1;
}

header .search-wrapper {
    width: 100%;
    position: absolute;
    background-color: white;
    display: none;
}

header .search-wrapper .search-wrapper-container {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}

header .search-wrapper .search-wrapper-container .compartment {
    width: 100%;
}
header .search-wrapper .search-wrapper-container .compartment .title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-tertiary);
}

/* Search Wrapper - Keywords */
header .search-wrapper .search-wrapper-container .compartment .keywords-wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}
header .search-wrapper .search-wrapper-container .compartment .keywords-wrapper .keyword {
    padding: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text);
    background-color: var(--color-background-light-xlll);
    cursor: pointer;
    transition: 0.2s;
}
header .search-wrapper .search-wrapper-container .compartment .keywords-wrapper .keyword:hover {
    background-color: var(--color-background-light-xll);
}

/* Search Wrapper - Products */
header .search-wrapper .search-wrapper-container .compartment .products-wrapper {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;
    gap: 1rem;
}

header .search-wrapper .search-wrapper-container .compartment .products-wrapper .product {
    width: calc(100% / 3 - 0.666rem);
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 0.5rem;
}
header .search-wrapper .search-wrapper-container .compartment .products-wrapper .product .thumbnail {
    width: 100%;
    height: 13rem;
    overflow: hidden;
}
header .search-wrapper .search-wrapper-container .compartment .products-wrapper .product .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
header .search-wrapper .search-wrapper-container .compartment .products-wrapper .product .title {
    font-weight: 500;
    color: var(--color-text);
    line-height: 1rem;
}
header .search-wrapper .search-wrapper-container .compartment .products-wrapper .product .subtitle {
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
}
header .search-wrapper .search-wrapper-container .compartment .products-wrapper .product .price-wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}
header .search-wrapper .search-wrapper-container .compartment .products-wrapper .product .price-wrapper .sale-price {
    color: var(--color-text);
}
header .search-wrapper .search-wrapper-container .compartment .products-wrapper .product .price-wrapper .striked-price {
    color: var(--color-text-tertiary);
    text-decoration: line-through;
}

header .search-wrapper .search-wrapper-container .compartment .products-wrapper .product {
    cursor: pointer;
}
header .search-wrapper .search-wrapper-container .compartment .products-wrapper .product:hover {
    text-decoration: underline;
}

/* Search Wrapper - Keywords */
header .search-wrapper .search-wrapper-container .compartment .search-keywords-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
}

/* Search Wrapper - Trending */
header .search-wrapper .search-wrapper-container .trending-search {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}
/* Search Wrapper - Search Results */
header .search-wrapper .search-wrapper-container .compartment.search-results {
    display: none;
}

@media screen and (min-width: 0px) and (max-width: 600px) {

    header .search-wrapper .search-wrapper-container {
        width: var(--wrapper-size);
    }
    header .search-wrapper .search-wrapper-container .compartment .products-wrapper {
        flex-wrap: wrap;
    }
    header .search-wrapper .search-wrapper-container .compartment .products-wrapper .product {
        width: calc(100% / 2 - 0.5rem);
    }

}

/* footer.css */
/* FAQ's Footer Mix */
.faqs-footer-mix-wrapper {
    background-color: var(--color-primary);
    
    position: relative;

    padding-top: 6rem;
    padding-bottom: 6rem;
}

.faqs-footer-mix-wrapper .faqs-footer-mix-flexbox {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.faqs-footer-mix-wrapper .faqs-footer-mix-flexbox .left-pane {
    max-width: 35%;
    display: block;
    position: sticky;
    top: 8rem;
}
.faqs-footer-mix-wrapper .faqs-footer-mix-flexbox .right-pane {
    width: 60%;
    display: block;
}

.faqs-footer-mix-wrapper .faqs-footer-mix-flexbox .right-pane .accordion {
    margin-bottom: 1rem;
}
.faqs-footer-mix-wrapper .faqs-footer-mix-flexbox .right-pane .accordion .accordion-top {
    background-color: transparent;
    color: var(--color-text-secondary);

    border-bottom-style: solid;
    border-bottom-width: 0.15rem;
    border-bottom-color: rgba(255, 255, 255, 0.2);

    padding-left: 0rem;
    padding-right: 0rem;

    padding-top: 0rem;
}
.faqs-footer-mix-wrapper .faqs-footer-mix-flexbox .right-pane .accordion .accordion-bottom {
    padding-left: 0rem;
    padding-right: 0rem;

    color: var(--color-text-secondary);
}

.faqs-footer-mix-wrapper .gradient-bottom-border {
    width: 100%;
    height: 0.2rem;

    background-color: #FDEE00;
    background-image: linear-gradient(319deg, #FDEE00 0%, #ff8243 37%, #f94d00 100%);
    
    position: absolute;
    bottom: 0rem;
}

@media screen and (max-width: 600px) {
    
    .faqs-footer-mix-wrapper {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .faqs-footer-mix-wrapper .faqs-footer-mix-flexbox {
        display: flex;
        justify-content: space-between;
        align-items: start;

        flex-wrap: wrap;
        gap: 2rem;
    }

    .faqs-footer-mix-wrapper .faqs-footer-mix-flexbox .left-pane {
        width: 100%;
        max-width: 100%;

        position: relative;
        top: 0rem;
    }
    .faqs-footer-mix-wrapper .faqs-footer-mix-flexbox .right-pane {
        width: 100%;
    }
    
}

footer {
    background-color: var(--color-primary);
    padding-top: 3.5rem;
    padding-bottom: 2rem;
}

/* Tagline */
footer .tagline-wrapper {
    padding-top: 7rem;
    padding-bottom: 7rem;
}
footer .tagline-wrapper .tagline {
    display: block;
    font-size: 3.2rem;
    font-weight: 300;
    color: var(--color-text-secondary);
    text-align: center;
}
footer .tagline-wrapper .tagline .r-symbol {
    font-size: 2rem;
}

/* Navigation Wrapper */
footer .navigation-wrapper {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 3rem;
    margin-bottom: 2.5rem;
}
footer .navigation-wrapper .left-wrapper {
    width: 30%;
}
footer .navigation-wrapper .right-wrapper {
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 2rem;
}

footer .navigation-wrapper .left-wrapper .footer-logo {
    width: 7rem;
    height: 5rem;
    overflow: hidden;
    display: block;
}
footer .navigation-wrapper .left-wrapper .footer-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

footer .navigation-wrapper .left-wrapper .footer-text {
    color: var(--color-text-secondary);
    opacity: 0.8;
}

footer .navigation-wrapper .left-wrapper .icon-wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
    color: var(--color-text-secondary);
    gap: 0.5rem;
}
footer .navigation-wrapper .left-wrapper .icon-wrapper.first {
    margin-top: 4rem;
}

footer .navigation-wrapper .right-wrapper .navigation-blocks-wrapper {
    width: 100%;
}

footer .navigation-wrapper .right-wrapper .navigation-blocks-wrapper .navigation-block {
    display: block;
    margin-bottom: 2rem;
}
footer .navigation-wrapper .right-wrapper .navigation-blocks-wrapper .navigation-block .title {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}
footer .navigation-wrapper .right-wrapper .navigation-blocks-wrapper .navigation-block .seperator {
    width: 100%;
    height: 0.1rem;
    background-color: rgba(255, 255, 255, 0.15);
}
footer .navigation-wrapper .right-wrapper .navigation-blocks-wrapper .navigation-block .navigation-link {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
    font-size: 0.90rem;
}
footer .navigation-wrapper .right-wrapper .navigation-blocks-wrapper .navigation-block .navigation-link:hover {
    text-decoration: underline;
    color: rgba(255, 255, 255, 1);
}

/* Seperator */
footer .seperator {
    width: 100%;
    height: 0.1rem;
    background-color: rgba(255, 255, 255, 0.15);
}

/* FDA Statement */
footer .fda-statement-wrapper {
    margin-top: 1rem;
}
footer .fda-statement-wrapper .text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    display: block;
}

/* Responsive Media Queries */
@media screen and (min-width: 0px) and (max-width: 900px) {

    /* Footer */
    footer {
        padding: 0rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* Footer - Tagline */
    footer .tagline-wrapper {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    footer .tagline-wrapper .tagline {
        font-size: 2.5rem;
        font-weight: 300;
        text-align: start;
        display: block;
        text-align: left;
    }
    footer .tagline-wrapper .tagline .r-symbol {
        font-size: 0.9rem;
    }

    /* Footer - Navigation Wrapper */
    footer .navigation-wrapper {
        flex-wrap: wrap;
        margin-bottom: 1rem;
        gap: 0rem;
    }
    footer .navigation-wrapper .left-wrapper {
        width: 100%;
    }
    footer .navigation-wrapper .right-wrapper {
        width: 100%;
        flex-wrap: wrap;
    }

}

/* theme.css */
/* =========================================================
   THEME ROOT VARIABLES
========================================================= */

:root {

  /* =====================================================
     BRAND COLORS
  ===================================================== */

  --color-primary: #1178b9;
  --color-primary-hover: #0e6da8;
  --color-primary-dark: #007EA7;
  --color-primary-darker: #003459;

  --color-secondary: #ffffff;

  /* =====================================================
     BACKGROUND SYSTEM
  ===================================================== */

  --color-background-primary: rgba(17, 120, 185, 0.1);
  --color-background: #aaaaaa;

  --color-background-light: rgba(197,197,197,1);
  --color-background-light-xl: rgba(197,197,197,0.8);
  --color-background-light-xll: rgba(197,197,197,0.4);
  --color-background-light-xlll: rgba(197,197,197,0.2);
  --color-background-light-xllll: rgba(197,197,197,0.1);
  --color-background-light-xlllll: rgba(197,197,197,0);

  /* Surface elements (cards, panels) */
  --color-surface: #003459;
  --color-surface-light: #ffffff;
  --color-surface-dark: #001f33;

  /* =====================================================
     TEXT COLORS
  ===================================================== */

  --color-text: #000000;
  --color-text-secondary: #ffffff;
  --color-text-tertiary: #696969;
  --color-text-muted: #9ca3af;

  /* =====================================================
     BORDER SYSTEM
  ===================================================== */

  --color-border: rgba(163,163,163,0.3);
  --color-border-light: rgba(0,0,0,0.08);
  --color-border-strong: rgba(0,0,0,0.2);

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

  --color-success: #10642f;
  --color-success-light: #22c55e;

  --color-danger: #ef4444;
  --color-danger-light: #f87171;

  --color-warning: #f59e0b;
  --color-warning-light: #fbbf24;

  --color-info: #3b82f6;
  --color-info-light: #60a5fa;

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

  --font-family-primary: 'Inter', sans-serif;
  --font-family-secondary: 'Fira Code', monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-xll: 1.875rem;
  --font-size-xlll: 2.25rem;
  --font-size-display: 3rem;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* =====================================================
     SPACING SCALE
  ===================================================== */

  --spacing-xxs: 0.125rem;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xll: 3rem;
  --spacing-xlll: 4rem;

  /* =====================================================
     BORDER RADIUS
  ===================================================== */

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-xll: 1.25rem;
  --radius-xlll: 1.5rem;
  --radius-xllll: 2rem;
  --radius-round: 9999px;

  /* =====================================================
     SHADOW SYSTEM
  ===================================================== */

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 10px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 20px rgba(0,0,0,0.12);
  --shadow-xl: 0 15px 40px rgba(0,0,0,0.2);

  --shadow-modal: rgba(149,157,165,0.2) 0px 8px 24px;

  /* =====================================================
     TRANSITIONS
  ===================================================== */

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* =====================================================
     Z-INDEX SYSTEM
  ===================================================== */

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 500;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-tooltip: 1100;

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

  --container-width: 80rem;
  --content-width: 60rem;
  --text-width: 42rem;

  /* =====================================================
     OPACITY
  ===================================================== */

  --opacity-disabled: 0.5;
  --opacity-muted: 0.7;
  --opacity-subtle: 0.85;

  /* =====================================================
     GRADIENTS
  ===================================================== */

  --gradient-primary: linear-gradient(135deg, #1178b9, #007EA7);
  --gradient-dark: linear-gradient(135deg, #003459, #001f33);

}

/* TEXT COLOR CLASSES */
.text-primary { color: var(--color-primary); }
.text-primary-dark { color: var(--color-primary-dark); }
.text-primary-darker { color: var(--color-primary-darker); }

.text-secondary { color: var(--color-secondary); }

.text-main { color: var(--color-text); }
.text-muted { color: var(--color-text-tertiary); }

.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }

/* BACKGROUND COLOR CLASSES */
.bg-primary { background-color: var(--color-primary); }
.bg-primary-dark { background-color: var(--color-primary-dark); }
.bg-primary-darker { background-color: var(--color-primary-darker); }

.bg-secondary { background-color: var(--color-secondary); }

.bg-surface { background-color: var(--color-surface); }

.bg-background { background-color: var(--color-background); }
.bg-background-light { background-color: var(--color-background-light); }

.bg-success { background-color: var(--color-success); }
.bg-danger { background-color: var(--color-danger); }

/* BORDER COLOR CLASSES */.border-primary { border-color: var(--color-primary); }
.border-secondary { border-color: var(--color-secondary); }

.border-default { border-color: var(--color-border); }

.border-success { border-color: var(--color-success); }
.border-danger { border-color: var(--color-danger); }

/* marquee.css */
.marquee {
    width: auto;
    overflow: hidden;

    position: relative;
}

.marquee .marquee-track {
    display: flex;
    width: max-content;

    will-change: transform;
}

.marquee .marquee-track .marquee-wrapper {
    display: flex;
    align-items: center;

    gap: 1.5rem;

    white-space: nowrap;

    padding-right: 1.5rem;
}

/* FADE EFFECT */
.fade-div-marquee::before,
.fade-div-marquee::after {
    content: "";

    position: absolute;
    top: 0;

    width: 80px;
    height: 100%;

    z-index: 2;

    pointer-events: none;
}

.fade-div-marquee::before {
    left: 0;

    background: #ffffff;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

.fade-div-marquee::after {
    right: 0;

    background: #ffffff;
    background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

/* anims.css */
/* BOTTOM FADE IN BASE STATE */
.bottom-fade-in {
    opacity: 0;
}

/* Animation trigger class */
.bottom-fade-in.animate {
    animation: fadeInBottom 0.95s forwards;
}

/* Stagger delays */
.bottom-fade-in.animate:nth-child(1) { animation-delay: 0.2s; }
.bottom-fade-in.animate:nth-child(2) { animation-delay: 0.4s; }
.bottom-fade-in.animate:nth-child(3) { animation-delay: 0.6s; }
.bottom-fade-in.animate:nth-child(4) { animation-delay: 0.8s; }
.bottom-fade-in.animate:nth-child(5) { animation-delay: 1s; }

@keyframes fadeInBottom {
    from {
        transform: translateY(1.5rem);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}