/* ============================================================
   BRILLIANT HARMONY SKIN — design tokens
   ============================================================ */
:root{
  --paper:      #F3ECDC;
  --paper-deep: #E9DEC5;
  --cream-white:#FFFDF8;
  --ink:        #2B2118;
  --ink-soft:   #5A4C3E;
  --clay:       #A85D3B;
  --clay-deep:  #8B4730;
  --clay-tint:  #E9C9AE;
  --sage:       #5C6B4C;
  --sage-deep:  #414C36;
  --sage-tint:  #DCE3D0;
  --blush:      #E7C6AE;
  --line:       rgba(43,33,24,0.14);

  --font-display: "Fraunces", serif;
  --font-body: "Work Sans", sans-serif;
  --font-mono: "Space Mono", monospace;

  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --ease: cubic-bezier(.22,.68,.32,1);
  --shadow-soft: 0 18px 40px -20px rgba(43,33,24,0.35);
  --shadow-card: 0 10px 30px -14px rgba(43,33,24,0.28);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; outline: none;}
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ margin:0; font-family: var(--font-display); font-weight:600; color:var(--ink); }
p{ margin:0; }
.mono{ font-family: var(--font-mono); letter-spacing:.02em; }

div, ul, h1, h2, h3, h4, h5, li, p, img, form, input, textarea {
	margin: 0;
	padding: 0;
}
header, section, footer, aside, nav, main, article, figure {
	float:left;
    width: 100%;
}
table, tr, td {border: 0;}

a:hover {
	outline: none;
	text-decoration: none;
}
img {border: none; max-width:100%; vertical-align:middle; height:auto;}
li {list-style: none;}
* {box-sizing: border-box;}
.clearall {
	clear: both;
	font-size: 1px;
	line-height: 1px;
	height: 1px;
}

/*-----------------------
MAIN CSS START
------------------------*/
.container {
	/*width: 1172px;
	margin: 0 auto;
	padding: 0;
	position: relative;*/
}
.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 clamp(15px, 3vw, 32px);
}

.eyebrow{
  display:block;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color: var(--clay-deep);
  margin-bottom:14px;
}
.center{ text-align:center; margin-left:auto; margin-right:auto; }

.display-xl{
    font-size: clamp(30px, 6vw, 54px);
    line-height: clamp(40px, 6vw, 64px);
    font-weight:500;
    letter-spacing:-.01em;
    text-transform: capitalize;
}
.display-xl em{ font-style:italic; color: var(--clay); font-weight:500; }
.display-lg{
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: clamp(34px, 4.4vw, 52px);
    font-weight:500;
    max-width: 720px;
    text-transform: capitalize;
}
.display-lg em {font-style: italic;color: var(--clay);font-weight: 500;}

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--delay, 0s);
}
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight:600;
  font-size:.92rem;
  border:1.5px solid transparent;
  cursor:pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  white-space:nowrap;
}
.btn svg{ transition: transform .35s var(--ease); }
.btn-clay{
  background: var(--clay);
  color: var(--cream-white);
  box-shadow: var(--shadow-card);
}
.btn-clay:hover{
  background: var(--clay-deep);
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -12px rgba(139,71,48,0.5);
}
.btn-clay:hover svg{ transform: translateX(4px); }
.btn-ghost{
  background:transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover{
  border-color: var(--ink);
  transform: translateY(-3px);
}
.btn-sm{ padding:10px 20px; font-size:.82rem; width:100%; justify-content:center; }

/* ============================================================
   Header
   ============================================================ */
.site-header{
    position: relative;
    z-index:100;
    background: rgba(243,236,220,0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
    height: clamp(50px, 6vw, 79px);
    top: clamp(50px, 6vw, 79px);
    margin-top: clamp(-79px, -6vw, -50px);
    display: flex;
    align-items: center;
}
.site-header.scrolled{
  border-color: var(--line);
  box-shadow: 0 8px 24px -18px rgba(43,33,24,.5);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
}
/*.logo{ display:flex; align-items:center; gap:10px; }
.logo-mark{ color: var(--clay); display:flex; }
.logo-mark svg{ width:28px; height:28px; }
.logo-text{ font-family: var(--font-display); font-size:1.15rem; font-weight:600; letter-spacing:.01em; }
.logo-text em{ font-style:italic; color: var(--clay); }
.logo-text.light{ color: var(--cream-white); font-size:1.3rem; }
.logo-text.light em{ color: var(--blush); }*/

.main-nav{ display:flex; gap:34px; justify-content: center;}
.main-nav a{
  position:relative;
  font-size:.94rem;
  font-weight:500;
  color: var(--ink-soft);
  padding: 4px 0;
  transition: color .3s;
}
.main-nav a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:1.5px; background: var(--clay);
  transition: right .35s var(--ease);
}
.main-nav a:hover{ color: var(--ink); }
.main-nav a:hover::after{ right:0; }

.menu-rgt {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.cart-link{
  display:flex; align-items:center; gap:8px;
  font-size:.9rem; font-weight:600;
  padding:clamp(5px,1vw, 9px) clamp(10px, 2vw, 16px);
  border:1.5px solid var(--line);
  border-radius:999px;
  transition: border-color .3s, transform .3s var(--ease);
}
.cart-link:hover{ border-color: var(--clay); transform: translateY(-2px); color: var(--clay-deep); }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none; border:none; cursor:pointer;
  padding:6px;
}
.nav-toggle span{
  width:22px; height:2px; background:var(--ink);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   Hero
   ============================================================ */
.hero{
    position:relative;padding: clamp(30px, 6vw, 76px) 0 clamp(30px, 7vw, 90px);overflow:hidden;
    background: radial-gradient(ellipse 900px 600px at 82% 10%, var(--blush) 0%, transparent 60%), var(--paper);
    text-align: left;
    
}
.hero-botanical{
  position:absolute; inset:0;
  color: var(--sage);
  opacity:.5;
  pointer-events:none;
  right:-10%;
  z-index:0;
}
.hero-botanical svg{ height:100%; width:100%; }

.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(10px, 2vw, 40px);
  align-items:center;
}
.hero-sub{
    margin-top:clamp(12px, 2vw, 22px);
    max-width: 480px;
    font-size: clamp(15px, 3vw, 17px);
    line-height: clamp(22px, 4vw, 28px);
    color: var(--ink-soft);
}
.hero-cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:34px; align-items: center;}

.hero-stats{
    display:flex;
    gap: clamp(15px, 3vw, 40px);
    margin-top: clamp(30px, 4vw, 52px);
    padding-top: clamp(15px, 3vw, 28px);
    border-top:1px solid var(--line);
    max-width:480px;
}
.stat{ display:flex; flex-direction:column; gap:4px; font-size: clamp(12px, 3vw, 15px);text-align: center;}
.stat img {display: block;width: clamp(45px, 5vw, 70px); margin: 0 auto 10px;}
.stat-num{ font-size:1.5rem; color:var(--clay-deep); font-weight:700; }
.stat-label{ font-size:.78rem; color:var(--ink-soft); }

/* Hero product illustration */
.hero-art{ position:relative; display:flex; justify-content:center; }
.bottle-cluster{ position:relative; width:100%; max-width:480px; height:600px; }

.bottle{ position:absolute; bottom:30px; filter: drop-shadow(0 30px 40px rgba(43,33,24,.28)); }
.bottle-back{ left:0; z-index:1; opacity:.92; }
.bottle-back img {max-width: 320px;}
.bottle-front{ right: -140px;z-index: 2;bottom: 40px; }
.bottle-front img {max-width: 530px;}

.bottle-body{
  width:120px; height:190px;
  background: linear-gradient(160deg, var(--clay) 0%, var(--clay-deep) 100%);
  border-radius: 14px;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:18px;
  position:relative;
}
.bottle-body--tall{ width:130px; height:260px; }
.bottle-label{ color: var(--cream-white); font-size:.62rem; text-align:center; line-height:1.5; opacity:.92; }
.bottle-neck{ width:36px; height:26px; background: var(--paper-deep); margin:0 auto; border-radius:4px 4px 0 0; }
.bottle-cap{ width:56px; height:34px; background: var(--ink-soft); border-radius:8px 8px 4px 4px; margin: 0 auto -2px; }
.bottle-pump{ width:14px; height:60px; background: linear-gradient(180deg,#cfcabf,#9c968a); border-radius:6px; margin: 0 auto -6px 42px; transform: rotate(-8deg); }
.bottle-front .bottle-neck{ margin-left:auto; margin-right:auto; }

.badge-chip{
  position:absolute;
  background: var(--cream-white);
  border:1px solid var(--line);
  border-radius: 999px;
  padding:9px 16px;
  font-size:.68rem;
  box-shadow: var(--shadow-card);
  z-index:3;
  animation: float 5s ease-in-out infinite;
}
.chip-1{ bottom: 46%; left:0; animation-delay:.2s; }
.chip-2{ bottom:14%; right:0; animation-delay:1.1s; }

.drip{
  position:absolute; left:44%; top:38%;
  width:3px; height:70px;
  background: linear-gradient(var(--clay), transparent);
  opacity:.5;
  border-radius:3px;
}

@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* ============================================================
   Intro / pillars
   ============================================================ */
.intro{ padding: clamp(30px, 7.5vw, 90px) 0 clamp(30px, 7vw, 90px); }
.intro-inner{ max-width:640px; }
.intro-copy{ margin-top:18px; color: var(--ink-soft); font-size: clamp(15px, 3vw, 17px);line-height: clamp(22px, 4vw, 28px); }

.divider{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin: 20px auto 0;
  color: var(--clay);
}
.divider span{ width:60px; height:1px; background: var(--line); }

.pillars{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: clamp(25px, 5vw, 64px);
}
.pillar{
  background: var(--cream-white);
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(20px, 5vw, 34px) clamp(15px, 5vw, 28px);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.pillar:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: var(--clay-tint);
}
.pillar-icon{ color: var(--clay); margin-bottom:18px; }
.pillar-icon svg{ width:34px; height:34px; }
.pillar h3{ font-size:1.1rem; margin-bottom:10px; }
.pillar p{ color: var(--ink-soft); font-size:.94rem; line-height:1.6; }

/* ============================================================
   Ethos strip
   ============================================================ */
.ethos{
  background: var(--sage);
  color: var(--cream-white);
  padding: 30px 0;
}
.ethos-inner{
  display:flex;
  flex-wrap:wrap;
  gap: 20px clamp(7px, 1.5vw, 48px);
  justify-content:center;
}
.ethos-item{
    display:flex; align-items:center; gap:12px;
    font-weight:500;
    font-size:clamp(13px, 3vw, 15px);
    line-height: clamp(19px, 3vw, 20px);
}
.ethos-item svg{ flex-shrink:0; }

/* ============================================================
   Collection
   ============================================================ */
.collection{ padding:clamp(40px, 7.5vw, 90px) 0 clamp(40px, 8.5vw, 110px); }
.product-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 58px;
}
.product-card{
  background: var(--cream-white);
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 20px 26px;
  position:relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  display:flex; flex-direction:column;
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1.4px);
  background-size: 10px 100%;
  background-repeat: repeat-x;
  background-position: top 0 left 14px;
}
.product-card:hover{
  transform: translateY(-8px) rotate(-.4deg);
  box-shadow: var(--shadow-soft);
  border-color: var(--clay-tint);
}
.card-code{
  font-size:.66rem;
  color: var(--ink-soft);
  opacity:.7;
  margin-bottom:12px;
}
.product-visual{
  display:flex; align-items:flex-end; justify-content:center;
  margin-bottom:18px;
}
.jar{ flex-direction:column; align-items:center; gap:0; }
.jar-lid{ width:78px; height:20px; background: var(--ink-soft); border-radius:6px; }
.jar-body{
  width:88px; height:88px;
  background: linear-gradient(160deg, var(--clay) 0%, var(--clay-deep) 100%);
  border-radius: 8px;
  display:flex; align-items:center; justify-content:center;
  padding:8px;
}
.jar-body span{ color: var(--cream-white); font-size:.52rem; text-align:center; line-height:1.4; }

.tube{ flex-direction:column; align-items:center; gap:0; }
.tube-cap{ width:16px; height:16px; background: var(--ink-soft); border-radius:3px; margin:0 auto; }
.tube-body{
  width:60px; height:110px;
  background: linear-gradient(180deg, var(--clay-deep) 0%, var(--clay) 100%);
  border-radius: 0 0 24px 24px;
  clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%);
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:14px;
}
.tube-body span{ color: var(--cream-white); font-size:.46rem; text-align:center; line-height:1.4; }

.bottle-sm{ flex-direction:column; align-items:center; gap:0; }
.bottle-sm-cap{ width:26px; height:16px; background: var(--ink-soft); border-radius:4px 4px 2px 2px; margin:0 auto; }
.bottle-sm-body{
  width:70px; height:120px;
  background: linear-gradient(160deg, var(--clay) 0%, var(--clay-deep) 100%);
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  padding:8px;
}
.bottle-sm-body span{ color: var(--cream-white); font-size:.48rem; text-align:center; line-height:1.4; }

.pump-bottle{ flex-direction:column; align-items:center; gap:0; }
.pump-head{ width:14px; height:44px; background: linear-gradient(180deg,#cfcabf,#9c968a); border-radius:6px; margin: 0 auto -4px 20px; transform: rotate(-10deg); }
.pump-body{
  width:76px; height:100px;
  background: linear-gradient(160deg, var(--sage) 0%, var(--sage-deep) 100%);
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  padding:8px;
}
.pump-body span{ color: var(--cream-white); font-size:.48rem; text-align:center; line-height:1.4; }

.product-card h3{ font-size:1rem; margin-bottom:6px; }
.price{ color: var(--clay-deep); font-size:.85rem; margin-bottom:16px; }

/* ============================================================
   Routine
   ============================================================ */
.routine{ padding:clamp(40px, 7.5vw, 90px) 0; position: relative;}
.routine-model {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    opacity: 0.15;
    z-index: -1;
}
.routine-grid{
  display:grid;
  grid-template-columns: .85fr 1fr;
  gap: 64px;
  align-items:center;
}
.routine-art{ position:relative; height:460px; }
.portrait-blob{
  position:absolute; inset:0;
  border-radius: 50% 50% 44% 56% / 55% 48% 52% 45%;
  background: linear-gradient(150deg, var(--blush) 0%, var(--clay-tint) 55%, var(--sage-tint) 100%);
  box-shadow: var(--shadow-soft);
}
.routine-mini-cluster{
  position:absolute; bottom:8%; left:50%; transform: translateX(-50%);
  display:flex; align-items:flex-end; gap:14px;
}
.mini-jar{ width:52px; height:46px; background: var(--cream-white); border:1px solid var(--line); border-radius:8px; box-shadow: var(--shadow-card); }
.mini-tube{ width:34px; height:70px; background: var(--clay); border-radius: 0 0 14px 14px; clip-path: polygon(15% 0,85% 0,100% 100%,0 100%); box-shadow: var(--shadow-card); }
.mini-bottle{ width:42px; height:58px; background: var(--sage); border-radius:8px; box-shadow: var(--shadow-card); }

.routine-copy > p{  max-width:460px;  }

.steps{ margin-top:clamp(30px, 3vw, 40px); display:flex; flex-direction:column; gap:26px; }
.steps li{ display:flex; gap:20px; align-items:flex-start; }
.step-num{
  flex-shrink:0;
  width:46px; height:46px;
  border-radius:50%;
  border:1.5px solid var(--clay);
  color: var(--clay-deep);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem;
}
.steps h4{ font-size: clamp(16px, 3vw, 18px);margin-bottom: 7px;text-transform: capitalize;}
.steps p{ color: var(--ink-soft); font-size:.92rem; line-height:1.55; }
.routine-copy .btn{ /*margin-top:40px;*/ }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background: var(--ink); color: var(--paper); padding-top: clamp(40px, 6vw, 70px); }
.footer-top{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(30px, 4vw, 48px);
  padding-bottom: clamp(30px, 4vw, 50px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand p{ margin-top:16px; color: rgba(243,236,220,.65); font-size: clamp(13px, 3vw, 15px);line-height: clamp(18px, 3vw, 20px); }
.footer-links h5, .footer-pay h5{
  font-family: var(--font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color: var(--blush);
  margin-bottom:18px;
}
.footer-links{ display:flex; flex-direction:column; gap:12px; }
.footer-links a{ color: rgba(243,236,220,.75); font-size: clamp(13px, 3vw, 15px);line-height: clamp(18px, 3vw, 20px); transition: color .3s, padding-left .3s; }
.footer-links a:hover{ color: var(--cream-white); padding-left:4px; }

.pay-badges{ display:flex; flex-wrap:wrap; gap:10px; }
.pay-badge{
  font-family: var(--font-mono);
  font-size:.66rem;
  border:1px solid rgba(243,236,220,.3);
  border-radius:6px;
  padding:8px 10px;
  color: rgba(243,236,220,.8);
}

.footer-disclaimer{ padding: 34px 0; }
.footer-disclaimer p{ font-size:.76rem; line-height:1.7; color: rgba(243,236,220,.45); }

.footer-bottom{ padding: 22px 0 30px; text-align:center; border-top:1px solid rgba(255,255,255,.08); }
.footer-bottom p{ font-size:.82rem; color: rgba(243,236,220,.55); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px){
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px){
    .hero-grid{ grid-template-columns: 1fr; }
    .hero-art{ order:-1; margin-bottom: 12px; }
    .bottle-cluster{min-height: 410px;height: 100%; }
    .bottle-back{bottom: -10px;}
    .bottle-back img {max-width: 230px;}
    .bottle-front{bottom: 0;}
    .bottle-front img {max-width: 460px;}
    .routine-grid{ grid-template-columns: 1fr; gap: 40px; }
    .routine-art{ height:320px; display: none}
    .footer-top{ grid-template-columns: 1fr 1fr; }
    .footer-brand{ grid-column: 1 / -1; }
}

@media (max-width: 760px){
  
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction:column;
    gap:0;
    max-height:0;
    overflow:hidden;
    transition: max-height .4s var(--ease);
  }
  .main-nav.open{ max-height: 320px; }
  .main-nav a{ padding: 16px 22px; border-bottom:1px solid var(--line); }
  .main-nav a::after{ display:none; }
  .nav-toggle{ display:flex; }
  .cart-link span{ display:none; }

  .pillars{ grid-template-columns: 1fr; }
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
  .hero-stats{ justify-content: space-between;}
  .ethos-inner{ justify-content:flex-start; }
}

@media (max-width: 520px){
    .site-header{backdrop-filter:unset; flex-wrap: wrap;align-items: flex-end;}


    .display-xl{  }
    .display-lg{  }
    .ethos-item{width:49%}
    .hero-cta-row{ flex-direction:column; align-items:stretch; }
    .hero-cta-row .btn{ justify-content:center; }
    .product-grid{ grid-template-columns: 1fr; gap:16px; }
    .product-card{ padding: 16px 14px 20px; }
    .footer-top{ grid-template-columns: 1fr; }
    .intro{ }
    .collection{ }
    .routine{ }
}
/*-------------------------
CSS FOR TOP LOGO BAR
--------------------------*/
.blue-strip {
	float: left;
	width: 100%;
	background: #000000;
	padding: 5px 0;	
}
.bluestrip-txt{
	font-size:18px;
	line-height:22px;
	color:#fff;
	text-align:center;
}

/*-------------------------
CSS FOR TOP LOGO BAR
--------------------------*/
.top-bar {
	float: left;
	width: 100%;
	/*background: #fff;*/
	height: clamp(50px, 6vw, 79px);
    top: clamp(50px, 6vw, 79px);
	margin-top: clamp(-79px, 6vw, 50px);
	position: relative;
	
	padding:12px 0;
}
.top-sec {
	float: left;
	width: 100%;
	margin-bottom: clamp(50px, 6vw, 79px);
}
/*----------------
MENU BAR CSS
-----------------*/
.logo{
    float: left;
    max-width: clamp(80px, 10vw, 120px);
    display: flex;
    align-items: center;
}
.menu-bar {
	margin: 20px 0 0 0;
    float: right;
}
.menu-bar li {
	float: left;
	position:relative;
}
.menu-bar li a {
	float: left;
	color: #2d2d2d;
	font-size: 18px;
	line-height: 18px;
	padding:0px 12px;
}
.menu-bar li:after {
	content: '';
	position: absolute;
	width: 1px;
	height: 17px;
	background: #000000;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.menu-bar li:last-child:after{
	display:none;
}
.menu-bar li a:hover, .menu-bar li a.active {
	color: #000;
	text-decoration: none;
}
a.cart-top{
	float: right;
    font-size: 18px;
    line-height: 16px;
    color: #2d2d2d;
    margin-top: 10px;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px #d2d2d2;
}

.site-header.fixed-nav {
	position: fixed;
	z-index: 99999999;
	top: 0;
	-webkit-transition: margin .3s ease-out;
	transition: margin .3s ease-out;
	margin-top: 0;
	border-bottom: 1px solid #efede7;
}
		
/*-------------------------
CSS FOR BANNER
--------------------------*/

/*-============================================
CSS FOR INNER PAGE
============================================-*/
.innrBreadcrm {
    float: left;
    width: 100%;
    color: var(--cream-white);
    font-size: clamp(11px, 2vw, 13px);
    text-align: right;
    background: var(--sage);
    padding: clamp(10px, 2vw, 20px) 0;
    text-transform: uppercase;
}
.innrBreadcrm a, .innrBreadcrm a:hover {color: #fff;}
.innrBreadcrm span{color: #fff;}
.prd-sec-1 {
    float: left;
    width: 100%;
    padding: clamp(30px, 7.5vw, 90px) 0;
}
.prd-sec-1 .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 60px);
}
.prd-s1-lft {
        background: var(--cream-white);
    padding: clamp(20px, 3vw, 40px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    display: flex;
    justify-content: center;
    align-items: center;
}
.prd-slide-1{
	    display: inline-block;
    vertical-align: middle;
    max-width: 100%;}
.prd-lft-prc-box{
	float: left;
    width: 100%;
	margin:28px 0 0;
}
.prd-lft-row{
	float: left;
    width: 100%;
	padding:0 18px 0 0;
}
.prd-s1-lft-p1{
	float: left;
    color: #2d2d2d;
    font-size: 18px;
    line-height: 35px;
	text-align:left;
	position:relative;
	padding-left:65px;
	text-transform:uppercase;
}
.prd-s1-ic-1{
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
}
.prd-s1-lft-p2{
	float: right;
    color: #0d5896;
    font-size: 22px;
    line-height: 35px;
	text-align:right;
	font-weight:500;
}
.prd-s1-hr{
	float: left;
    width: 100%;
	border:none;
	height:1px;
	background-color:#d2daea;
	margin:15px 0;
}
.prd-s1-rit {
    float: right;
    width: 100%;
    text-align: left;
}
.txt-box {
    float: left;
    width: 100%;
}
.prd-s1-p1 {
    float: left;
    width: 100%;
    color: #000000;
    font-size: 30px;
    line-height: 40px;
    font-weight: 500;
}
.prd-s1-p1 span {
    display: block;
    width: 100%;
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    line-height: 30px;
}
.s1-p2 span{
	display:block;
	font-size:23px;
	font-weight:700;
	}
.pric-box {
    float: left;
    width: 100%;
    padding-left: 0;
}
.prd-strength-row, .prd_quantity {
    width: 100%;
    margin: 0px 0 20px 0;
    float: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.prd-strength-p1 {
    font-size: clamp(16px, 3vw, 18px);
    color: var(--clay);
    font-family: var(--font-mono);
}
.prd-strength-row .option-field {
    height: 60px;
    width: 330px;
    font-size: clamp(14px, 3vw, 16px);
    line-height: 20px;
    color: var(--clay);
    text-align: left;
    padding: 10px 13px;
    outline: none;
    border: 1px solid var(--line);
    border-radius: 5px;
    font-family: inherit;
}
.pric-box .price {
    font-size: clamp(20px, 4vw, 32px);
    margin: 0;
    float: left;
    width: 100%;
    font-weight: 700;
}
.pric-box .hero-cta-row {
    margin-top: 20px;
}
.add-to-cart, .prd-cards {
    margin: 0px 20px 0 0;
}

.prd-txt1 {
    float: left;
    width: 100%;
    font-size: 25px;
    line-height: 38px;
    color: #161d25;
    font-weight: bold;
    margin-top: 0px;
}
.prd-list {
    float: left;
    width: 100%;
    padding: 2px 0 18px;
}
.prd-list li {
    float: left;
    width: 100%;
    margin: 8px 0 0;
    position: relative;
    text-align: left;
    padding-left: 20px;
    font-size: 18px;
    line-height: 27px;
    color: #000000;
    font-weight: 400;
}
.prd-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 9px;
    height: 9px;
    background: #000;
    border-radius: 50px;
}
.prd-list li span {
    float: left;
    margin-right: 10px;
    font-weight: 700;
    font-size: 16px;
    width: 41%;
}
a.add-to-cart.shop-btn {  display: inline-block;
    vertical-align: top;
   background-image: linear-gradient(#b45128, #c27150);
    border-radius: 5px;
    width: 200px;
    height: 39px;
    font-size: 15px;
    line-height: 39px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    font-weight: bold;
    margin-top:0px;
    position: relative;
    border: 1px solid #000;}

.prd-faq-box{
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-sm);
    padding: 25px 20px;
    grid-column: 1 / -1;
    background: var(--paper-deep);
}
.accordion {
    float: left;
    width: 100%;
    padding: 0px 20px 15px 0px;
    font-size: 28px;
    line-height: 30px;
    color: #253f5f;
    cursor: pointer;
    position: relative;
    font-weight: 500;
    text-align: left;
    position: relative;
}
.acdn-heading.accordion-open {border-bottom:1px solid #253f5f;}
.accordion:after{
	content: '';
    position: absolute;
    right: 25px;
    top: 50%;
    height: 17px;
    width: 17px;
    background: url(../images/faq-plus.png) no-repeat right center;
    transition: transform 0.375s linear;
	margin-top:-8px;
}
.acdn-heading.accordion-open:after {transform: rotate(135deg);}
.acdn-content {
	float: left;
	width: 100%;
	text-align: left;
}
.acdn-content p{
    padding: 6px 0;
    float: left;
    width: 100%;
    font-size: clamp(14px, 3vw, 16px);
    line-height: clamp(22px, 3vw, 26px);
    color: var(--ink-soft);
}
.acdn-content p.blue-fnt{color:#0d5896;}
.acdn-content p span{
	font-size: clamp(16px, 3vw, 18px);
    color: var(--clay);
    font-family: var(--font-mono);
}
.certi-50-div{
	width:46%;
	text-align:center;
}
.prd-mbg-block{
	float:left;
	width:100%;
	padding-left:125px;
	position:relative;
}
.prd-mbg{
	position:absolute;
	left:0;
	top:10px;
	width:110px;
}
.lab-ana-p1{
	float:left;
	width:100%;
    font-size: 20px;
    line-height: 26px;
    font-weight:600;
	color:#0d5896;
	margin:8px 0 15px;
}
.lab-300-dtls{
	display:inline-block;
	max-width:100%;
	margin-bottom:6px;
}
.revw-row{
	float: left;
    width: 100%;
    padding: 0 0 0 73px;
    text-align: left;
    position: relative;
	margin:6px 0;
}
.rvw-nm {
    position: absolute;
    left: 0;
    top: 0;
    width: 55px;
    height: 55px;
    font-size: 25px;
    line-height: 52px;
    border: 1px solid #d3d3d3;
    background: #e3e3e3;
    border-radius: 50%;
    text-align: center;
    color: #23262d;
    font-weight: 500;
    text-transform: uppercase;
}
.rev-star{
	float: left;
    max-width: 100%;
	margin:8px 0 0;
}
.revw-tik {
    position: absolute;
    left: 37px;
    top: 35px;
}
.revw-p1, .revw-p2{
	float: left;
    width: 100%;
    font-size: 20px;
    line-height: 25px;
    color: #0d5896;
    font-weight: 500;
}
.revw-p2{
    color: #282828;
    font-weight: 500;
	margin-top:2px;
	font-size: 18px;
}
.revw-p2 span{
	color:#6b6b6b;
	font-weight:400;
	font-size:16px;
}
.revw-hr{
	float: left;
    width: 100%;
    background: #e1e1e1;
    height: 1px;
	border:none;
    margin: 8px 0;
    }
.prd-dtl-vari-cust{
	display:inline-block;
	vertical-align:middle;
	margin-left:5px;
    }
/*-============================================
CSS FOR SHOP PAGE
============================================-*/
.shop-sec-1{
	float: left;
    width: 100%;
	background:#fff;
    padding: 40px 0 50px 0;
    }
.shop-sec-1 .s2-price-div{margin-top: 0;}
.shops2-hding{background:none;margin:0;}
.s1-p2{
	color: var(--ink-soft);
    font-size: clamp(15px, 3vw, 17px);
    line-height: clamp(22px, 4vw, 28px);
    text-align: left;
    float: left;
    width: 100%;
    margin: 20px 0;
    }
.shop-prc{
	font-weight:bold;
	font-size:40px;
	line-height:46px;
	text-align:left;
	margin:20px 0 0 0;
    }
.shop-line{
	margin:15px 0;
	height:1px;
	background:#ccc;
    }
.txt-box {
    float: left;
    width: 100%;
}
.pric-box {
    float: right;
    width: 100%;
    /* border-left: 1px solid #f5f5f5; */
    padding-left: 0;
}
.pric-box .s1-btn-bx{ margin-top:10px;}
/*-============================================
CSS FOR ABOUT PAGE
============================================-*/
.in-pg-cont .s1-p1{
	font-size: 45px;
    line-height: 50px;
}
.abt-sec-1{
	float: left;
    width: 100%;
    padding: 45px 0 70px;
}
.abt-s1-lft{
	float: left;
    width: 550px;
	text-align:left;
}
.abt-s1-lft .s4-p1{
    font-size: 23px;
    color: #2d2d2d;
}
.pad-3{padding:5px 0 12px;}
.abt-s1-ul{
	float: left;
    width: 100%;
	margin:30px 0 38px;
}
.abt-s1-ul li {
    float: left;
    background: url(../images/s2-line.png) no-repeat right bottom;
	text-align:center;
	padding:0 30px;
}
.abt-s1-ul li:last-child {background: none;}
.abt-s1-ul li:nth-child(1){padding-left:0;}
.abt-s1-ic-1{
	display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
	height: 44px;
}
.abt-s1-p1 {
    display: inline-block;
    font-size: 16px;
    line-height:18px;
    color: #2d2d2d;
}
.abt-s1-img{
	position:absolute;
	right:0;
	top:0;
}
/*-------------------------
CSS FOR SECTION 2
--------------------------*/
.abt-sec-2{
	float: left;
    width: 100%;
    padding: 50px 0;
	background:#f1f5f9;
}
.abt-s2-ul{
	float: left;
    width: 100%;
	padding:35px 95px 0;
}
.abt-s2-ul li{
	float: left;
    width: 300px;
	border:1px solid #cccccc;
	background:#fff;
	padding-bottom:20px;
}
.abt-s2-ul li:nth-child(2){margin:0 35px;}
.abt-s2-img-1{
	display:inline-block;
	max-width:100%;
	vertical-align:middle;
}
.abt-s2-p1{
	float: left;
    width: 100%;
    font-size: 25px;
    line-height: 28px;
    color: #0d5896;
    font-weight: 500;
}
.pad-4{padding:15px 5px 15px;}
.abt-s2-p-minht{
	min-height:216px;
	margin-bottom:15px;
}
.abt-s2-p2{
	float: left;
    width: 100%;
    font-size: 16px;
    line-height: 20px;
    color: #636363;
    font-weight: 400;
	padding:5px 5px 0;
}
.abt-s2-ul li .s4-p2{padding:0 11px;}
/*-------------------------
CSS FOR SECTION 3
--------------------------*/
.abt-sec-3{
	float: left;
    width: 100%;
    padding: 50px 0 90px;
}
.abt-sec-3 .shop-btn{margin-top:55px;}
.abt-s3-lft {
    float: left;
    width: 609px;
    text-align: left;
}
.abt-s3-lft .s4-p2{width:90%;}
.abt-s3-img {
    position: absolute;
    right: 70px;
    top: 0;
}
/*-============================================
CSS FOR FAQ PAGE
============================================-*/
.faq-block{
	float: left;
    width: 100%;
	padding:10px 70px 0;
}
.faq-block .acdn-content p{
	font-size: 20px;
    line-height: 28px;
    color: #1e1e1e;
	padding:2px 0 20px;
}
.faq-block .acdn-content {padding: 0 20px;}
.faq-block .accordion {
    font-size: 22px;
    line-height: 28px;
    color: #014979;
    border-top:none;
	padding: 12px 50px 12px 20px;
	background:#f0f0f0;
	margin:9px 0;
}
.faq-block .acdn-heading.accordion-open {border-bottom: none;}
.faq-block .accordion:after {
    background: url(../images/faq-plus-new.png) no-repeat right center;
	height: 21px;
    width: 22px;
	margin-top: -10px;
}
/*-============================================
CSS FOR LAB PAGE
============================================-*/
.lab-sec-1 {
    float: left;
    width: 100%;
    padding:40px 0 60px;
}
.lab-row{
	float:left;
	width:100%;
	margin:30px 0 0;
}
.lab-btl-300{
	display:inline-block;
	max-width:100%;
	vertical-align:middle;
}
.lab-box{
	display:inline-block;
	width:540px;
	margin:0 25px;
	vertical-align:middle;
}
.lab-ul{
	float:left;
	width:100%;
	margin:20px 0 0;
}
.lab-ul li{
	display:inline-block;
	padding:0 25px;
	background: url(../images/s2-line.png) no-repeat right center;
}
.lab-ul li:last-child{background:none;}
.lab-s1-ic{
	display:inline-block;
	max-width:100%;
}
.lab-s1-p1{
	display:inline-block;
    color: #2d2d2d;
    font-size: 18px;
    line-height: 23px;
    font-weight:400;
    text-transform: uppercase;
}
.lab-ul li .s4-p2{
	color:#0d5896;
	font-weight:normal;
	line-height:23px;
	float:none;
	display:inline-block;
}
.lab-row .lab-300-dtls{
	vertical-align:middle;
	margin:0;
}
.lab-box .s4-p1{
	color:#154369;
	font-weight:bold;
}
.lab-hr{
	float:left;
	width:100%;
	height:1px;
	background:#e1e1e1;
	border:none;
	margin:50px 0 15px;
}
/*-============================================
CSS FOR REVEW PAGE
============================================-*/
.revw-container{
	float:left;
	width:100%;
	padding:30px 70px 0;
}
.revw-block{
	float:left;
	width:100%;
}
.revw-lft{
	float:left;
	width:300px;
	position:relative;
	padding:0 0 0 95px;
	text-align:left;
	background: url(../images/revw-lft-line.png) no-repeat right center;
}
.r-y-stars{
	float:left;
	max-width:100%;
	margin:5px 0 7px;
}
.marg-3{margin:5px 0;}
.revw-right{
	float:left;
	width:698px;
	position:relative;
	padding-left:42px;
	margin-left:28px;
	text-align:left;
}
.blue-clr{color:#154369;}
.marg-4{margin-bottom:4px;}
.rev-coat{
	position:absolute;
	left:0;
	top:3px;
}
.revw-container .lab-hr {margin: 30px 0;}
/*-============================================
CSS FOR CONTACT PAGE
============================================-*/
.cont-sec-1{
	float:left;
	width:100%;
	padding:clamp(30px, 7.5vw, 90px) 0;
}
.cont-box{
    float: left;
    width: 100%;
    -webkit-box-shadow: var(--shadow-card);
    box-shadow: var(--shadow-card);
    border: 1px solid #e6e6e6;
    background: var(--paper-deep);
    border-radius: var(--radius-md);
    position: relative;
}
.cont-lft{
	float: left;
    width: 685px;
    padding: 35px 12px 35px 35px;
    text-align: left;
}
.cont-right{
	float: right;
}
.rgt-cont-img{
        opacity: 0.2;
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    z-index: 0;
	}
.cont-p1{
	    float: left;
    width: 100%;
    font-size: 40px;
    line-height: 40px;
    font-weight: 500;
    color: #000000;
    margin-bottom: 12px;
    text-align: center;
}
.cont-ul{
	float: left;
    width: 100%;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
	margin-top:10px;
}

.cont-ul li{
	float: left;
    width: 100%;
    padding: 0 0 0 62px;
    position: relative;
    line-height: 26px;
}
.cont-ul li .s4-p2{
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
    color: var(--clay-deep);
    font-family: var(--font-mono);
}
.cont-ic-1{
	    position: absolute;
    left: 0;
    top: 4px;
    filter: grayscale(1);
}
p.s4-p1 {
    float: left;
    width: 100%;
    font-size: 14px;
    line-height: 24px;
    color: var(--ink-soft);
}
.cont-frm-box{
	float: left;
    width: 100%;
}
.cont-input-box{
	float: left;
    width: 100%;
    height: 50px;
    text-align: left;
    background-color: #ffffff;
    outline: none;
    margin: 15px 0;
    position: relative;
}
.cont-hlf{width: 46%;}
.cont-frm-ic-1 {
    position: absolute;
    left: 8px;
    top: 50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
}
.cont-field-all, .cont-input-box textarea {
    float: left;
    width: 100%;
	border:none;
    border-bottom: 1px solid #24334a;
    outline: none;
    height: 100%;
    color: #333333;
    font-size: 18px;
    font-weight: 400;
    padding: 0 0px 0 49px;
}
.cont-btn {
    -webkit-appearance: none;
    border: none;
    outline: none;
    margin: 30px 0 0;
    padding: 0;
    background: #547398;
	color: #fff;
    font-size: 24px;
	line-height:56px;
	padding:0 27px;
	float:left;
	border-radius:30px;
	 cursor:pointer;
}
/*===========CART_DRAWER_PAGE============*/
.drawer {
	width: 300px;
	right: 0;
	border-left: 1px solid #e5e5e5;

	-ms-transform: translateX(300px);
	-webkit-transform: translateX(300px);
	transform: translateX(300px);

	position: fixed;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	top: 0;
	bottom: 0;
	padding: 0 10px 10px;
	z-index: 22;
	color: #000000;
	background-color: #ffffff;
	transition: all ease 0.5s;
	}
.cart_open .drawer{
	-ms-transform: translateX(0);
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
.shifter_page{transition: all ease 0.5s;}
.cart_open .shifter_page{
	-ms-transform: translateX(-300px);
	-webkit-transform: translateX(-300px);
	transform: translateX(-300px);
}	
.drawer__header {
	float:left;
	height: 70px;
	width: 100%;
	padding-top:30px;
	border-bottom: 1px solid #e5e5e5;
	}
.table-cell {
	float:left;
	width: 50%;
	font-size:18px;
	color:#2d2d2d;
	text-align:left;
	}
.cart-icon{
	float:left;
	margin:3px 10px 0 0;
	}
.cross-icon{
	float:right;
	cursor:pointer;
	width:16px;
	margin-top:4px;
	}
.drawer_row{
	float:left;
	width:100%;
	padding:20px 0 20px;
	border-bottom:1px solid #d0d0d0;
	}
.drawer-prod-lft{
	float:left;
	width:60px;
	height:60px;
	border:1px solid #d8d8d8;
	border-radius:5px;
	text-align:center;
	background:#f9f9f9;
	position:relative;
	}
.drawer-prod{
	display:inline-block;
	vertical-align:middle;
	margin-top:13px;
	max-width:80%;
	}
.drawer-prod-lft span{
	position:absolute;
	width:20px;
	height:20px;
	right:-10px;
	top:-10px;
	background:#104775;
	border-radius:50%;
	text-align:center;
	font-size:16px;
	color:#ffffff;
	line-height:17px;
	}
.drawer-prod-rght{
	float:right;
	width:200px;
	text-align:left;
	}
.drwer-prod-name{
	float:left;
	width:100%;
	font-size:14px;
	line-height:16px;
	color:#1e1e1e;
	font-weight:600;
	}
.drwer-txt1{
	float:left;
	width:100%;
	font-size:13px;
	line-height:18px;
	color:#1e1e1e;
	font-weight:400;
	}
.drwer-txt2{
	float:left;
	width:100%;
	font-size:16px;
	line-height:20px;
	color:#104775;
	font-weight:500;
	}
.drwer-txt2 a{
	float:right;
	font-size:14px;
	color:#959595;
	font-weight:400;
	}
.sub-total{
	float:left;
	width:100%;
	font-size:19px;
	line-height:27px;
	color:#1e1e1e;
	font-weight:600;
	margin-top:10px;
	text-align:left;
	}
.sub-total span{float:right;}
a.chk-btn{
    float: left;
    width: 100%;
    background: #24334a;
    color: #ffffff;
    font-size: 21px;
	line-height:21px;
    text-decoration: none;
    padding: 18px 0;
	text-align:center;
	border-radius:5px;
	margin-top:20px;
	}
a.chk-btn img{
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
	margin-top:-3px;
	}
.cards-img{
	display:inline-block;
	vertical-align:middle;
	margin-top:10px;
	max-width:100%;
}
.qsn-popup{
	position:absolute;
	right:8px;
	top:16px;
	background:#0d5896;
	color:#fff;
	text-align:center;
	border-radius:50%;
	width:20px;
	font-size:14px;
	height:20px;
	}
.qsn-popup a{ color:#fff;}
.toltip-content{
	position:absolute;
	right:-30px;
	width:500px;
	top:55px;
	background:#0d3353;
	z-index:99;
	padding:12px;
	color:#fff;
	border-radius:5px;
	text-align:left;
	font-size:14px;
	font-weight:400;
	line-height:20px;
	letter-spacing:0.5px;
	box-shadow: 0px 0 25px -5px rgba(0,0,0,0.5);
	}
.toltip-content:after{
	content:'';
	position:absolute;
	top:-11px;
	right:40px;
	border-left: 11px solid transparent;
	border-right: 11px solid transparent;
	border-bottom: 11px solid #0d3353;
	}
.close-ttp{
	position:absolute;
	right:0px;
	top:0;
	width:20px;
	height:20px;
	background:#0d5896;
	border-radius:0 5px 0 5px;
	cursor:pointer;
	line-height:20px;
	text-align:center;
	font-size:10px;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
}
/*================checkout_section===============*/
.checkout_section{
	float:left;
	width:100%;
	padding:50px 0;
	background:#ffffff;
	}
.chk-container-box{
	display:inline-block;
	vertical-align:middle;
	width:100%;
	max-width:1030px;
	}
.chk-left{
	float:left;
	width:62%;
	}
.steps-chk{
	float:left;
	width:50%;
	text-align:center;
	border:1px solid #d7d7d7;
	font-size:20px;
	line-height:20px;
	color:#1e1e1e;
	font-weight:400;
	background:#f6f6f6;
	padding:15px 0;
	border-radius:5px 5px 0 0;
	}
.steps-chk.actv{
	background:#0d5896;
	color:#fff;
	font-weight:500;
	}
.frmBox {
	float: left;
	width: 100%;
	padding:25px 24px;
	border:1px solid #d7d7d7;
	border-radius:0 0 5px 5px;
	text-align:left;
	border-top:none;
	}
.input-box {
	float: left;
	width: 100%;
	height: 44px;
	border: 1px solid #cfcfcf;
	text-align: left;
	padding: 0 0px 0 40px;
	border-radius: 3px;
	background-color: #ffffff;
	outline: none;
	margin:7px 0;
	position: relative;
	}
.input-box.hlf {width: 48%;}
.input-box.fr {float: right;}
.input-box.payfld {padding:0 0 0 15px;}
.fldicon {
	position: absolute;
	left: 12px;
	top: 12px;
	}
.field-all {
	float: left;
	width: 100%;
	border: none;
	outline: none;
	height: 100%;
	color: #000;
	font-size: 16px;
	padding: 0 10px 0 5px;
	font-family: inherit;
	border-radius:0 3px 3px 0;
	}
.dwn-arw {
	position: absolute;
	right: 4px;
	top: 0px;
	}
.input-box select {
	-webkit-appearance: none;
	background: url(../images/dwn-arw.jpg) no-repeat right center;
	padding: 3px 42px 0 5px;
	}
a.continue-btn{
	float:left;
	width:355px;
	max-width:100%;
	font-size: 22px;
    line-height: 50px;
    color: #24334a;
	margin-top:25px;
    letter-spacing: 1px;
    border: 2px solid #24334a;
    border-radius: 5px;
    text-align: center;
    font-weight: 500;
    padding-bottom: 3px;
    position: relative;
    transition: all ease 0.2s;
	}
a.continue-btn i {
    margin: -1px 0 0 9px;
    vertical-align: middle;
    font-size: 13px;
	}
a.continue-btn:hover{
	color:#fff;
	background:#24334a;
	transition:all ease 0.2s;
	}
.cvv-img{
	float:left;
	margin:10px;
	}
/*==================*/
.chk-right{
	float:right;
	width:36%;
	background:#f7f7f7;
	padding:15px;
	}
.order-smry-hdng{
	float:left;
	width:100%;
	font-size:23px;
	line-height:26px;
	color:#104775;
	font-weight:500;
	padding-bottom:15px;
	border-bottom:1px solid #d0d0d0;
	text-align:left;
	}
.prc-p1{
	float:left;
	width:75%;
	text-align:left;
	font-size:18px;
	line-height:24px;
	color:#1e1e1e;
	margin-top:20px;
	}
.prc-p1 span{ 
	color:#4e4e4e;
	font-size:16px;
	font-weight:400;
	}
.prc-p2{
	float:right;
	width:25%;
	text-align:right;
	font-size:18px;
	line-height:24px;
	color:#1e1e1e;
	margin-top:20px;
	}
.rvw-hr {
    float: left;
    width: 100%;
    height: 1px;
    border: none;
    background: #d0d0d0;
	margin-top:20px;
	margin-bottom:0;
	}
.mrgn-10{ margin-top:12px;}
/*================Payment-section===========*/
.frmBox2{padding:20px 30px;	}
.fieldToggle {
	display:inline-block;
	vertical-align:middle;
    color: #363636;
    font-size: 18px;
    line-height: 22px;
    margin:5px 0;
    cursor: pointer;
    padding-left: 30px;
    position: relative;
	text-align:left;
	}
.fieldToggle input[type=checkbox]{
	position:absolute;
	opacity:0;
	}
.fieldToggle input[type=checkbox] + span,
.protectionHeading label input[type=checkbox] + span{
	display:inline-block;
	vertical-align:middle;
	margin-right:5px;
	width:18px;
	height:18px;
	border:1px solid #808080;
	border-radius:2px;
	position:relative;
	}
.fieldToggle input[type=checkbox] + span{position:absolute; left:0; top:3px;}
.fieldToggle input[type=checkbox]:checked + span:after{
	position:absolute;
	content:'';
	width:13px;
	height:13px;
	background:url(../images/tik-blk.png) no-repeat center center;
	background-size:100%;
	left:1px;
	top:1px;
	}
a.whats-dis {
    float: left;
    color: #257d20;
    font-size: 19px;
    margin: 17px 0 0 20px;
    text-decoration: underline;
}
.card-accept {
    float: left;
    width: 100%;
    margin: 10px 0;
    color: #2d2d2d;
    font-size: 16px;
    text-align: left;
}
.card-accept img {
    display: inline-block;
    vertical-align: middle;
}
/*****************************/
/*TERMS- PRIVACY*/

.tems_bg {
	float: left;
	width: 100%;
	padding: 40px 0;
}
.trm-bx {
    width: 100%;
    float: left;
    text-align: left;
    color: var(--ink-soft);
    font-size: clamp(14px, 3vw, 16px);
    line-height: clamp(22px, 4vw, 26px);

}
.trm-bx h1 {
	line-height: 30px;
    color: #000000;
    margin: 0;
    padding: 0px 0 10px;
    font-size: 22px;
    float: left;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 20px;
    font-weight: 700;
    border-bottom: 5px solid #000000;
}
.trm-bx h3 {
	line-height: 28px;
	text-align: left;
	font-size: 24px;
	float: left;
	width: 100%;
	margin: 0px 0 15px;
	color: #000;
	font-weight: 500;
}
.trm-bx li {
	font-size: 16px;
    line-height: 24px;
    float: left;
    width: 100%;
    list-style: decimal;
}
.trm-bx ol li {list-style: lower-roman;}
.trm-bx li ol li {list-style: lower-alpha;}
.trm-bx strong {text-transform: capitalize;}
.trm-bx span {
	text-transform: capitalize;
    display: block;
    font-weight: 700;
    margin-bottom: 5px;
}
.trm-bx p {
	color: var(--ink-soft);
    font-size: clamp(14px, 3vw, 16px);
    line-height: clamp(22px, 4vw, 26px);
	float: left;
	width: 100%;
	margin-bottom: 10px;
	font-weight: 400;
}
.trm-bx h4, .trm-bx h5 {
	font-size: 22px;
    float: left;
    width: 100%;
    margin: 0px 0 10px;
    font-weight: 500;
    line-height: 30px;
}
.ingr-lst h4 {text-align: center;}
.ingr-lst img {
    display: block;
    margin: 0 auto 10px;
    max-width: 630px;
    width: 100%;
}
.trm-bx h5 {
	font-size: 20px;
	font-weight: 500;
}
.privacy-list {padding: 0 0 0 30px;}
.privacy-list li {font-weight: bold;}
.privacy-list li p {
	font-weight: normal;
	margin-top: 10px;
}
.mrg-tp {
	margin: 15px 0 !important;
	float: left;
	width: 100%
}
.trm-txt {
	float: left;
	width: 100%;
	background: #fff;
	padding: 20px 20px
}
.disclr-bx {
	border: 2px solid #000;
	padding: 10px;
	font-weight: 500;
	float: left;
	width: 100%;
	margin: 0;
}
.disclr-bx p {
	margin-bottom: 0;
	font-weight: bold;
}
.trm-bx ol, .trm-bx ul {
	margin-bottom: 20px;
    float: left;
    width: 100%;
    font-weight: 400;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
}
.trm-bx .disclmr {width: 100% !important;}
.thank-pg {
        float: left;
    width: 100%;
    text-align: center;
    padding: clamp(30px, 7.5vw, 90px) 0
}
.thank-pg .s1-p2{
font-size: 18px;
    line-height: 28px;
    text-align: center;
    float: left;
    width: 100%;
    margin: 5px 0
}
.thank-hdg {
    float: left;
    width: 100%;
    font-size: 25px;
    margin: 10px 0;
}
.trm-bx table td, .trm-bx table th {
    padding: 14px;
    border: 1px solid #ccc;
}
.trm-bx table {
    float: left;
    width: 100%;
    border-collapse: collapse;
}


/*********************************/
.age-pop-overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0
}
.pop-up-bg {
	    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    z-index: 9999600;
    border: 0px;
    opacity: 0.3;
    background: #000;
}
.pop-up-bg-in {
	position: fixed;
    bottom: 0px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    background: #000;
    transition: left 1s ease 0s;
    z-index: 10000010;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    text-align: center;
    display: flex;
    justify-content: center;
}
.pop-up-left {
	width: 100% ;
	height: 100% ;
	position: fixed ;
	left: 0px ;
	top: 0px ;
	border: 0px;
	background-color: rgb(0, 0, 0) ;
	display: none ;
	opacity: 0.8 ;
	z-index: 10000001 ;
}
.pop-up-left-txt {
	font-size: 16px;
    box-sizing: initial;
    overflow-wrap: break-word;
    transition: left 1s ease 0s;
    display: flex;
    text-align: left;
    padding: 20px;
    line-height: 24px;
    color: #fff;
    float: left;
    width: 100%;
    justify-content: center;
    align-items: center;
    max-width: 1000px;
	flex-wrap: wrap;
}
.pop-innr {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 200px);
}
.pop-btn {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
}
.pop-up-left-txt span{
	font-weight: 700;
    font-size: 24px;
    margin-bottom: 15px;
    display: block;
	}
.pop-up-left-txt a{ text-decoration:underline;     display: inline-block; color: #fff}
.yes-btn, .no-btn {
    cursor: pointer;
    margin-top: 10px;
    height: 40px;
    color: var(--clay-tint);
    font-size: 16px;
    text-align: center;
    font-weight: 700;
    outline: none;
    box-shadow: none;
    background: var(--clay-deep);
    appearance: none;
    transition: left 1s ease 0s;
    display: inline-block;
    padding: 10px 20px;
    line-height: 16px;
    border-radius: 5px;
    border: none;
}
.no-btn {
    background: #333;
}
.error-sec{ float:left; width:100%;text-align:center;}
.card-error {
    max-width: 250px;
    margin: 0 auto 20px;
}