/* font Family */
:root {
  --main-color: #ddf892;
  --main-hover: #c9ee65;
  --Secondary-color: #4baf52;
  --bg-color-1: #f5fff9;
  --bg-color-2: #f5f5f5;
  --bg-color-3: #e2e2e2;
  --bg-color-4: #efebdc;
  --bg-color-5: #f8f8e5c2;
  --bg-color-6: #e4d7a3;
  --bg-color-7: #fffff5cc;
  --bg-color-8: #fdfde9;
  --bg-color-9: #efebdc;
  --bg-color-10: #282923;
  --bg-color-11: #abe0c5;
  --bg-color-12: #ecfffc;
  --bg-color-13: #e0bcab;
  --bg-color-14: #c3abe0;
  --bg-color-15: #abc8e0;
  --bg-color-16: #ddf892;

  --heading-color: #000000;
  --para-color: #5a5a5a;
  --sub-para: #dbdbdb;

  --border-color-1: #e5e7eb;
  --border-color-2: #d1d5db;
  --border-color-3: #4b5563;
  --border-color-4: #cccccc;
  --border-color-5: #7e7e7e;
  --border-color-6: #ccc9bd;
  --border-color-7: #ccc9bd00;
  --border-color-8: #e5e5dc;
  --border-color-9: #e5e7eb;
  --border-color-10: #e4e4c2;
  --border-color-11: #e2e2cc;
  --border-color-12: #efead5;
  --border-color-13: #ddc9ff;

  --white: #ffffff;
  --black: #000000;
  --footer-links: #8e8e8e;
  --footer-color-1: #191a1c;
  --footer-color-2: #dfdfdf;

  --footer-border: #434446;
  --footer-bg: #2f2f2f;

  --white-t-1: #ffffff40;
  --white-t-2: #ffffff00;

  --black-t-1: #000000ba;
  --black-t-2: #00000021;
  --black-t-3: #000000e6;
  --black-t-4: #00000099;
  --black-t-5: #0000007c;
  --black-t-6: #0000001a;
  --black-t-7: #00000000;

  --card-overlay: #02172699;
  --card-overlay-1: #021726ab;
  --not-found: #dcdcb88f;

  --remove: #ff4b3138;
  --star-fill: #cfc8d8;

  --instock: #37ad37;
  --stock: #667f08;
  --stock-bg: #eaf6b9;
  --box-shadow-cr: #8550fa;

  --red: #e00101;
  --erroe-text: #ffcbcb;
  --info: #e8f4fd;
  --info-text: #0d47a1;
  --badge-o: #de9644;
  --badge-r: #eb4a4a;
  --badge-b: #129aff;
  --badge-g: #2ca63b;
  --badge-g2: #79762e;
  --badge-g3: #9d9a25;
  --badge-p: #ba30ce;
  --badge-m: #c22d24;
  --badge-pc: #ff0da9;
  --main-font: "Poppins", sans-serif;
  --head-font: "Archivo", sans-serif;
  --boot-icons: "bootstrap-icons";

  /* Star rating */
  --wc-star-active: #ffb714;

  /* Rating filter colors */
  --rating-1: #ff4545;
  --rating-2: #ffa534;
  --rating-3: #ffe234;
  --rating-4: #b7dd29;
  --rating-5: #57e32c;

  --blog-num-1: #129aff;
  --blog-num-2: #bdb926;
  --blog-num-3: #f26b95;
  --blog-num-4: #f3bd29;
  --blog-num-5: #b626bd;
  --blog-num-6: #21b021;

  --ico-facebook: #1877f2;
  --ico-twitter: #1da1f2;
  --ico-instagram: #e4405f;
  --ico-linkedin: #0a66c2;
  --ico-youtube: #ff0000;
  --ico-pinterest: #e60023;
  --ico-snapchat: #fffc00;
  --ico-whatsapp: #25d366;
  --ico-telegram: #0088cc;
  --ico-reddit: #ff4500;
  --ico-github: #181717;
  --ico-dribbble: #ea4c89;
  --ico-discord: #5865f2;
  /*
  font sizes base 16px
  scale ratio 1.2
  */

  /* fluid scaling: min (mobile), preferred (tab), max (desktop) */

  --font-xs: clamp(10px, 0.85vw, 11px);
  --font-sm: clamp(12px, 1vw, 13px);
  --font-base: clamp(14px, 1.1vw, 16px);
  /* base font size */
  --font-lg: clamp(16px, 1.3vw, 19px);
  /* h6 */
  --font-xl: clamp(18px, 1.6vw, 23px);
  /* h5 */
  --font-2xl: clamp(22px, 2vw, 28px);
  /* h4 */
  --font-3xl: clamp(26px, 2.5vw, 33px);
  /* h3 */
  --font-4xl: clamp(32px, 3vw, 40px);
  /* h2 */
  --font-5xl: clamp(38px, 3.8vw, 48px);
  /* h1 */

  /* Optional display sizes (for hero sections) */
  --font-display-sm: clamp(44px, 5vw, 60px);
  --font-display-md: clamp(52px, 6vw, 72px);
  --font-display-lg: clamp(60px, 7vw, 84px);
  --font-display-xl: clamp(72px, 8vw, 96px);
}

/* html[data-color-mode="dark"] {
  --main-color: #DDF892;
  --main-hover: #C9EE65;
  --Secondary-color: #4baf52;
  --bg-color-1: #121212;
  --bg-color-2: #1e1e1e;
  --bg-color-3: #2c2c2c;
  --bg-color-4: #3a3a3a;
  --bg-color-5: #444444;
  --heading-color: #ffffff;
  --para-color: #b3b3b3;
  --sub-para: #4d4d4d;
  --border-color-1: #333333;
  --border-color-2: #4b4b4b;
  --border-color-3: #cccccc;
  --border-color-4: #666666;
  --light-grey: #444444;
  --dark-grey: #777777;
  --gray-light: #3a3a3a;
  --white: #000000;
  --black: #ffffff;
} */

body,
body p,
body span,
body a,
body li {
  font-family: var(--main-font);
}

body p {
  margin-bottom: 0;
  color: var(--para-color);
}

.elementor-element p {
  color: inherit;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: var(--head-font);
  font-weight: 700;
}

h1 {
  font-size: var(--font-5xl);
}

h2 {
  font-size: var(--font-4xl);
}

h3 {
  font-size: var(--font-3xl);
}

h4 {
  font-size: var(--font-2xl);
}

h5 {
  font-size: var(--font-xl);
}

h6 {
  font-size: var(--font-lg);
}