/* ================================================================
   PLUS JAKARTA SANS — Variable Font
   Place both .woff2 files in your theme's fonts/ directory and
   add this block near the top of notech-custom.css (or in a
   dedicated _fonts.css partial loaded before everything else).
   ================================================================ */

/* Upright (normal) — covers weights 200–800 via font-weight range */
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/PlusJakartaSans-VariableFont_wght.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* Italic — covers weights 200–800 via font-weight range */
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/PlusJakartaSans-Italic-VariableFont_wght.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

:root {
    --notech-font-sans-serif: "Plus Jakarta Sans", sans-serif;
    --notech-font-heading-family: "Plus Jakarta Sans", sans-serif;
}

/* Gradient Styles for Bootstrap Badges */
.bg-cool-blue {
  background: linear-gradient(90deg, #1e3a8a, #3b82f6);
  color: white;
}

.bg-ocean-breeze {
  background: linear-gradient(90deg, #2563eb, #4ade80);
  color: white;
}

.bg-skyline {
  background: linear-gradient(90deg, #0ea5e9, #93c5fd);
  color: white;
}

.bg-royal-blue {
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  color: white;
}

.bg-frosted-glacier {
  background: linear-gradient(90deg, #3b82f6, #67e8f9);
  color: white;
}

/* Purple Gradient Styles for Bootstrap Badges */
.bg-lavender-dreams {
  background: linear-gradient(90deg, #6a0dad, #b57edc);
  color: white;
}

.bg-mystic-violet {
  background: linear-gradient(90deg, #8e44ad, #9b59b6);
  color: white;
}

.bg-royal-plum {
  background: linear-gradient(90deg, #5d3fd3, #8b5cf6);
  color: white;
}

.bg-amethyst-glow {
  background: linear-gradient(90deg, #7f00ff, #e100ff);
  color: white;
}

.bg-plum-blossom {
  background: linear-gradient(90deg, #9c27b0, #e040fb);
  color: white;
}

/* Orange Gradient Styles for Bootstrap Badges */
.bg-sunset-blaze {
  background: linear-gradient(90deg, #ff7f50, #ff4500);
  color: white;
}

.bg-mandarin-glow {
  background: linear-gradient(90deg, #ff8c00, #ffa500);
  color: white;
}

.bg-amber-rush {
  background: linear-gradient(90deg, #f39c12, #e67e22);
  color: white;
}

.bg-peach-fusion {
  background: linear-gradient(90deg, #ff9a76, #ff6f61);
  color: white;
}

.bg-coral-flame {
  background: linear-gradient(90deg, #ff7043, #ff3d00);
  color: white;
}

/* Yellow Gradient Styles for Bootstrap Badges */
.bg-sunburst {
  background: linear-gradient(90deg, #fdda0d, #fbbf24);
  color: black;
}

.bg-lemon-zest {
  background: linear-gradient(90deg, #ffe600, #ffdd33);
  color: black;
}

.bg-golden-glow {
  background: linear-gradient(90deg, #ffd700, #f7c600);
  color: black;
}

.bg-honey-radiance {
  background: linear-gradient(90deg, #ffc300, #ffba08);
  color: black;
}

.bg-daffodil-shine {
  background: linear-gradient(90deg, #ffea00, #ffd54f);
  color: black;
}

/* Green Gradient Styles for Bootstrap Badges */
.bg-emerald-breeze {
  background: linear-gradient(90deg, #2ecc71, #27ae60);
  color: white;
}

.bg-mint-leaf {
  background: linear-gradient(90deg, #00c853, #64dd17);
  color: white;
}

.bg-forest-glow {
  background: linear-gradient(90deg, #228b22, #32cd32);
  color: white;
}

.bg-lime-splash {
  background: linear-gradient(90deg, #a8e063, #56ab2f);
  color: white;
}

.bg-jade-radiance {
  background: linear-gradient(90deg, #00a884, #26de81);
  color: white;
}

/* Black Gradient Styles for Bootstrap Badges */
.bg-midnight-black {
  background: linear-gradient(90deg, #000000, #434343);
  color: white;
}

.bg-charcoal-glow {
  background: linear-gradient(90deg, #2c2c2c, #595959);
  color: white;
}

.bg-steel-shadow {
  background: linear-gradient(90deg, #1a1a1a, #4d4d4d);
  color: white;
}

.bg-onyx-sheen {
  background: linear-gradient(90deg, #0f0f0f, #3d3d3d);
  color: white;
}

.bg-ebony-mist {
  background: linear-gradient(90deg, #111111, #333333);
  color: white;
}

/* White Gradient Styles for Bootstrap Badges */
.bg-snowy-white {
  background: linear-gradient(90deg, #ffffff, #f9f9f9);
  color: black;
}

.bg-pearl-sheen {
  background: linear-gradient(90deg, #ffffff, #eaeaea);
  color: black;
}

.bg-ivory-glow {
  background: linear-gradient(90deg, #ffffff, #f4f4f4);
  color: black;
}

.bg-cloud-mist {
  background: linear-gradient(90deg, #ffffff, #ececec);
  color: black;
}

.bg-silver-dream {
  background: linear-gradient(90deg, #ffffff, #dcdcdc);
  color: black;
}

/* Milk Gradient Styles for Bootstrap Badges */
.bg-creamy-milk {
  background: linear-gradient(90deg, #fffaf0, #fef5e7);
  color: black;
}

.bg-vanilla-silk {
  background: linear-gradient(90deg, #fdf6e3, #fff8e7);
  color: black;
}

.bg-almond-cream {
  background: linear-gradient(90deg, #faf0e6, #fef1e6);
  color: black;
}

.bg-soft-cotton {
  background: linear-gradient(90deg, #fdfbf8, #fcf7f2);
  color: black;
}

.bg-warm-porcelain {
  background: linear-gradient(90deg, #fefcfb, #f7f4f1);
  color: black;
}

/* Cool Blue and White Gradient Styles for Bootstrap Badges */
.bg-icy-sky {
  background: linear-gradient(90deg, #d8eefe, #ffffff);
  color: black;
}

.bg-arctic-breeze {
  background: linear-gradient(90deg, #cce7ff, #ffffff);
  color: black;
}

.bg-frosty-mist {
  background: linear-gradient(90deg, #b3daff, #e6f7ff);
  color: black;
}

.bg-crystal-wave {
  background: linear-gradient(90deg, #99ccff, #ffffff);
  color: black;
}

.bg-snowy-horizon {
  background: linear-gradient(90deg, #a0d8f1, #ffffff);
  color: black;
}

/* Milk, Chocolate, and Black Gradient Styles for Bootstrap Badges */
.bg-mocha-latte {
  background: linear-gradient(90deg, #fffaf0, #d2691e, #000000);
  color: white;
}

.bg-cocoa-cream {
  background: linear-gradient(90deg, #f5e4d7, #8b4513, #1a1a1a);
  color: white;
}

.bg-caramel-swirl {
  background: linear-gradient(90deg, #fef5e7, #a0522d, #2e2e2e);
  color: white;
}

.bg-dark-truffle {
  background: linear-gradient(90deg, #e8d5c4, #3e2723, #000000);
  color: white;
}

.bg-vanilla-mocha {
  background: linear-gradient(90deg, #f8ede3, #b5651d, #333333);
  color: white;
}

/* Milk and Chocolate Gradient Styles for Bootstrap Badges */
.bg-creamy-cocoa {
  background: linear-gradient(90deg, #fffaf0, #d2691e);
  color: white;
}

.bg-vanilla-choco {
  background: linear-gradient(90deg, #fef5e7, #8b4513);
  color: white;
}

.bg-cappuccino-dream {
  background: linear-gradient(90deg, #f8ede3, #a0522d);
  color: white;
}

.bg-chocolate-milk {
  background: linear-gradient(90deg, #f5e4d7, #6b4226);
  color: white;
}

.bg-caramel-latte {
  background: linear-gradient(90deg, #fdf6e3, #b5651d);
  color: white;
}

/* Navy Gradient Styles for Bootstrap Badges */
.bg-deep-ocean {
  background: linear-gradient(90deg, #001f3f, #003366);
  color: white;
}

.bg-midnight-navy {
  background: linear-gradient(90deg, #002244, #004080);
  color: white;
}

.bg-steel-navy {
  background: linear-gradient(90deg, #001a33, #2a4d69);
  color: white;
}

.bg-indigo-wave {
  background: linear-gradient(90deg, #00204a, #364f6b);
  color: white;
}

.bg-royal-navy {
  background: linear-gradient(90deg, #001833, #2c3e50);
  color: white;
}

/* Hunter Green Gradient Styles for Bootstrap Badges */
.bg-forest-hunter {
  background: linear-gradient(90deg, #355e3b, #2e4d32);
  color: white;
}

.bg-deep-woods {
  background: linear-gradient(90deg, #2c4f2e, #1f3b24);
  color: white;
}

.bg-emerald-hunter {
  background: linear-gradient(90deg, #3a6b41, #2f5234);
  color: white;
}

.bg-shadow-hunter {
  background: linear-gradient(90deg, #3b5d45, #2a4636);
  color: white;
}

.bg-dark-ivy {
  background: linear-gradient(90deg, #2b4d3a, #203c2f);
  color: white;
}

/* Hot Pink Gradient Styles for Bootstrap Badges */
.bg-electric-pink {
  background: linear-gradient(90deg, #ff1493, #ff69b4);
  color: white;
}

.bg-fuchsia-flare {
  background: linear-gradient(90deg, #ff1493, #ff85c0);
  color: white;
}

.bg-magenta-rush {
  background: linear-gradient(90deg, #e0115f, #ff1493);
  color: white;
}

.bg-neon-blush:
  background: linear-gradient(90deg, #ff5c8a, #ff1493);
  color: white;
}

.bg-rose-dazzle {
  background: linear-gradient(90deg, #ff4782, #ff1493);
  color: white;
}

/* Chocolate Gradient Styles for Bootstrap Badges */
.bg-dark-chocolate {
  background: linear-gradient(90deg, #4b2e19, #3e1f0f);
  color: white;
}

.bg-milk-chocolate {
  background: linear-gradient(90deg, #8b4513, #a0522d);
  color: white;
}

.bg-cocoa-brown {
  background: linear-gradient(90deg, #6b4226, #8b5742);
  color: white;
}

.bg-caramel-chocolate {
  background: linear-gradient(90deg, #b5651d, #8b4513);
  color: white;
}

.bg-truffle-brown {
  background: linear-gradient(90deg, #3e2723, #5d4037);
  color: white;
}


/* Strawberry Gradient Styles for Bootstrap Badges */
.bg-strawberry-splash {
  background: linear-gradient(90deg, #ff4b5c, #ff748c);
  color: white;
}

.bg-berry-blush {
  background: linear-gradient(90deg, #ff5e78, #ffa1b3);
  color: white;
}

.bg-sweet-strawberry {
  background: linear-gradient(90deg, #ff3b3f, #ff6f73);
  color: white;
}

.bg-strawberry-cream {
  background: linear-gradient(90deg, #ff6f8e, #ffe4e1);
  color: black;
}

.bg-ripe-strawberry {
  background: linear-gradient(90deg, #ff2e4c, #ff738d);
  color: white;
}

/* Mango Gradient Styles for Bootstrap Badges */
.bg-ripe-mango {
  background: linear-gradient(90deg, #ffc107, #ff9800);
  color: black;
}

.bg-mango-sunset:
  background: linear-gradient(90deg, #ffd54f, #ff5722);
  color: black;
}

.bg-golden-mango {
  background: linear-gradient(90deg, #ffcc80, #ffa726);
  color: black;
}

.bg-mango-delight {
  background: linear-gradient(90deg, #ffe082, #ffb74d);
  color: black;
}

.bg-tropical-mango {
  background: linear-gradient(90deg, #ffeb3b, #ffa000);
  color: black;
}

/* Cool Gray Gradient Styles for Bootstrap Badges */
.bg-silver-mist {
  background: linear-gradient(90deg, #d3d3d3, #b0b0b0);
  color: black;
}

.bg-smoke-gray {
  background: linear-gradient(90deg, #e0e0e0, #a9a9a9);
  color: black;
}

.bg-graphite-glow {
  background: linear-gradient(90deg, #9e9e9e, #696969);
  color: white;
}

.bg-steel-gray {
  background: linear-gradient(90deg, #bcbcbc, #808080);
  color: black;
}

.bg-charcoal-mist {
  background: linear-gradient(90deg, #a0a0a0, #505050);
  color: white;
}

/* Additional Graphite Gradient Styles for Bootstrap Badges */
.bg-deep-graphite {
  background: linear-gradient(90deg, #434343, #232323);
  color: white;
}

.bg-soft-graphite {
  background: linear-gradient(90deg, #757575, #4b4b4b);
  color: white;
}

.bg-graphite-steel {
  background: linear-gradient(90deg, #595959, #383838);
  color: white;
}

.bg-shadowed-graphite {
  background: linear-gradient(90deg, #2f2f2f, #1c1c1c);
  color: white;
}

.bg-metallic-graphite {
  background: linear-gradient(90deg, #6c6c6c, #404040);
  color: white;
}

/* Cherry Gradient Styles for Bootstrap Badges */
.bg-cherry-blush {
  background: linear-gradient(90deg, #d2042d, #f44336);
  color: white;
}

.bg-dark-cherry {
  background: linear-gradient(90deg, #8b0000, #b22222);
  color: white;
}

.bg-sweet-cherry {
  background: linear-gradient(90deg, #e0115f, #ff4b5c);
  color: white;
}

.bg-rosy-cherry {
  background: linear-gradient(90deg, #ff616d, #f06292);
  color: white;
}

.bg-ripe-cherry {
  background: linear-gradient(90deg, #c21807, #e53935);
  color: white;
}

/* Lavender Gradient Styles for Bootstrap Badges */
.bg-soft-lavender {
  background: linear-gradient(90deg, #e6e6fa, #d8bfd8);
  color: black;
}

.bg-lavender-bliss:
  background: linear-gradient(90deg, #dda0dd, #c8a2c8);
  color: white;
}

.bg-misty-lavender {
  background: linear-gradient(90deg, #e0bbe4, #d1c4e9);
  color: black;
}

.bg-lilac-dream {
  background: linear-gradient(90deg, #d8bfd8, #b39ddb);
  color: white;
}

.bg-royal-lavender {
  background: linear-gradient(90deg, #967bb6, #836fa9);
  color: white;
}

/* Black and Blue Gradient Styles for Bootstrap Badges */
.bg-midnight-blue {
  background: linear-gradient(90deg, #000000, #001f3f);
  color: white;
}

.bg-abyssal-blue {
  background: linear-gradient(90deg, #0a0a0a, #003366);
  color: white;
}

.bg-electric-night {
  background: linear-gradient(90deg, #000000, #00509e);
  color: white;
}

.bg-stormy-sky {
  background: linear-gradient(90deg, #1c1c1c, #3b82f6);
  color: white;
}

.bg-shadow-blue {
  background: linear-gradient(90deg, #111111, #1e90ff);
  color: white;
}

/* Sea Blue with Glow Gradient Styles for Bootstrap Badges */
.bg-aqua-glow {
  background: linear-gradient(90deg, #0077b6, #00b4d8, #caf0f8);
  color: white;
}

.bg-deep-sea-glow {
  background: linear-gradient(90deg, #023e8a, #0077b6, #90e0ef);
  color: white;
}

.bg-neon-reef {
  background: linear-gradient(90deg, #03045e, #0077b6, #48cae4);
  color: white;
}

.bg-ocean-light {
  background: linear-gradient(90deg, #001f54, #0353a4, #70d6ff);
  color: white;
}

.bg-glowing-tide {
  background: linear-gradient(90deg, #1d3557, #457b9d, #a8dadc);
  color: white;
}

/* Red and Hot Pink with Glow Gradient Styles for Bootstrap Badges */
.bg-fiery-glow {
  background: linear-gradient(90deg, #ff0000, #ff1493, #ff69b4);
  color: white;
}

.bg-rose-flame {
  background: linear-gradient(90deg, #e0115f, #ff477e, #ffa3b1);
  color: white;
}

.bg-blazing-blush {
  background: linear-gradient(90deg, #ff4b5c, #ff1493, #ff85c0);
  color: white;
}

.bg-crimson-radiance {
  background: linear-gradient(90deg, #dc143c, #ff007f, #ff5e78);
  color: white;
}

.bg-magenta-fire {
  background: linear-gradient(90deg, #ff006e, #ff385c, #ff7f94);
  color: white;
}

/* Hunter Green and Green with Lime Glow Gradient Styles for Bootstrap Badges */
.bg-forest-glow {
  background: linear-gradient(90deg, #355e3b, #4caf50, #a8e063);
  color: white;
}

.bg-jungle-glow {
  background: linear-gradient(90deg, #2c4f2e, #388e3c, #bef264);
  color: white;
}

.bg-mossy-lime {
  background: linear-gradient(90deg, #3a6b41, #66bb6a, #b9fbc0);
  color: white;
}

.bg-deep-emerald {
  background: linear-gradient(90deg, #2e4d32, #43a047, #dcedc1);
  color: white;
}

.bg-lime-radiance {
  background: linear-gradient(90deg, #3b5d45, #4caf50, #d4fc79);
  color: white;
}

/* Milk Color with Shiny Glow Gradient Styles for Bootstrap Badges */
.bg-creamy-shine {
  background: linear-gradient(90deg, #fffaf0, #fefae0, #ffffff);
  color: black;
}

.bg-milk-glow {
  background: linear-gradient(90deg, #fdf6e3, #fafafa, #ffffff);
  color: black;
}

.bg-vanilla-gleam {
  background: linear-gradient(90deg, #faf3e0, #f8f9fa, #ffffff);
  color: black;
}

.bg-almond-glow {
  background: linear-gradient(90deg, #fdf4e3, #fef9e7, #ffffff);
  color: black;
}

.bg-porcelain-shimmer {
  background: linear-gradient(90deg, #f9f6f2, #fcfcfc, #ffffff);
  color: black;
}

/* Black with Dark Gray or Graphite Glow Gradient Styles for Bootstrap Badges */
.bg-shadow-glow {
  background: linear-gradient(90deg, #000000, #2c2c2c, #434343);
  color: white;
}

.bg-charcoal-glow {
  background: linear-gradient(90deg, #1a1a1a, #3d3d3d, #595959);
  color: white;
}

.bg-graphite-shimmer {
  background: linear-gradient(90deg, #000000, #343434, #4d4d4d);
  color: white;
}

.bg-obsidian-light {
  background: linear-gradient(90deg, #0f0f0f, #2e2e2e, #505050);
  color: white;
}

.bg-smoky-black {
  background: linear-gradient(90deg, #111111, #2b2b2b, #3e3e3e);
  color: white;
}