:root{
  --line1:#37302c; /* requested line1 */
  --line2:#958277; /* requested line2 */
  --primary:#37302c;
  --accent:#ff9800;
  --accent-dark:#ce7f07;
  --main-red:#dc3545;
  --main-green:#16a34a;
  --bucket-bg:#f4f4f4; /* requested Heavy Duty/In focus/Bestsellers back color */
  --radius-37:37px;
  --text:#ffffff; /* requested radius */
  --bs-body-font-size: clamp(10px, 0.95vw + 0.6rem, 14px);
   --chip-size: 140px;          /* circle size */
    --chip-bg: #ffffff;
    --chip-ring: rgba(0,0,0,.06); /* dotted rings */
    --chip-shadow: 0 10px 20px rgba(0,0,0,.06);
    --brand: #034ab5;

--bucket-bg-dark:#d5d4d4; 
--footer-bg: #37302c;        /* deep navy */
  --footer-bg-alt: #0b1522;
  --footer-text: #cfd6e4;
  --footer-muted: #9fb0c9;
  --footer-heading: #ffffff;
  --footer-link: #e6edf7;
  --footer-link-hover: #ffd166; /* accent */
  --footer-border: rgba(255,255,255,0.08);

  --radius-xl: 1.25rem;
  --space-1: .375rem;
  --space-2: .625rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --maxw: 1280px;
  --col-gap: 1.25rem;

  --brand:#37302c;
--bg:linear-gradient(135deg,#f9fafb,#f4f5f7);
}

  body{ background:var(--bg); }

.bg-main{
  background-color: var(--line1);
  color: var(--bucket-bg);
}
.bg-second{
  background-color: var(--line2);
  color: var(--text);
}

.bg-accent{
  background-color: var(--accent);
  color: var(--text);
}
.text-main{
  color: var(--line1);
}
.rounded-start{
  border-top-left-radius: var(--radius-37) !important;
  border-bottom-left-radius: var(--radius-37) !important;
}


.btn-main {
  color: #fff; /* White text color for primary button */
  background-color: var(--line1); /* Bootstrap's default blue for primary */
  border-color: var( --line2); /* Matching border color */
}

.btn-main:hover {
  background-color: var(--accent); /* Darker blue on hover */
  border-color: var(--accent);
}


.btn-accent {
  color: #fff; /* White text color for primary button */
  background-color: var(--accent); /* Bootstrap's default blue for primary */
  border-color: var( --accent-dark); /* Matching border color */
}

.btn-accent:hover {
  background-color: var(--accent-dark); /* Darker blue on hover */
  border-color: var(--accent);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 .2rem rgba(3,74,181,.25) !important;
  outline: 0 !important;
}

.navbar {
      --bs-navbar-padding-y: .5rem;
        color: var(--bucket-bg);
    }
    .navbar-secondary {
   
      height: 35px;
      color: var(--text);
    }
    .navbar-secondary a{
        color: var(--text);
    }
    .navbar-secondary .dropdown a{
        color: var(--text);
    }
    .navbar-secondary .dropdown-menu a{
        color: var(--primary);
    }
    .navbar-brand img {
      height: 38px; /* adjust to your logo */
    }
    .search-input .form-control {
      border-radius: 2rem 0 0 2rem;
    }
    .search-input .btn {
      border-radius: 0 2rem 2rem 0;
    }
    .btn-icon {
      width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
      border-radius: 50%;
    }

    /* ---- Mega menu (desktop) ---- */
    .dropdown-mega { position: static; }
    .dropdown-mega .dropdown-menu {
      left: 0; right: 0; margin-top: .25rem; border-top: 3px solid var(--brand);
    }
   

    /* Sticky shadow */
    .navbar.sticky-top { box-shadow: 0 2px 10px rgba(0,0,0,.06); }

.bucket{
  padding: 10px;
  border-radius: 10px;
  background-color: var(--bucket-bg);
  color: var(--text);
}
.bucket:hover{
  padding: 10px;
  border-radius: 10px;
  background-color: var(--bucket-bg-dark);
  color: var(--text);
}
#hero .carousel-inner {
  aspect-ratio: 20 / 7;          /* keeps the same shape as width changes */
  max-height: 480px;             /* optional safety cap */
  border-radius: .5rem;
  overflow: hidden;
}

#hero .carousel-item,
#hero .carousel-item picture,
#hero .carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
#hero .carousel-control-prev,
#hero .carousel-control-next {
  z-index: 5;              /* on top */
  opacity: .95;            /* visible */
}

/* SIZE + ICONS (data-URI) */
#hero .carousel-control-prev-icon,
#hero .carousel-control-next-icon {
  display: inline-block;   /* ensure it renders */
  width: 2.5rem;
  height: 2.5rem;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent !important;  /* remove any mask paint */
}

/* ---- Change color by editing the %23HEX below ---- */
#hero .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23034ab5'%3E%3Cpath d='M11.354 1.646a.5.5 0 010 .708L6.707 7l4.647 4.646a.5.5 0 01-.708.708l-5-5a.5.5 0 010-.708l5-5a.5.5 0 01.708 0z'/%3E%3C/svg%3E");
}
#hero .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23034ab5'%3E%3Cpath d='M4.646 1.646a.5.5 0 000 .708L9.293 7l-4.647 4.646a.5.5 0 10.708.708l5-5a.5.5 0 000-.708l-5-5a.5.5 0 00-.708 0z'/%3E%3C/svg%3E");
}




/* ===== Footer main ===== */
footer {
  background: var(--footer-bg);
}

gtt-page-bottom {
  background: var(--footer-bg);
  color: var(--footer-text);
}

/* ===== Brand ribbon (top of footer) ===== */
.footer-brand {
  background: var(--footer-bg-alt);
  border-top: 1px solid var(--footer-border);
  border-bottom: 1px solid var(--footer-border);
}

.gtt-bottombrand {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-4) var(--space-3);
}

.brandshow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(120px, 1fr);
  gap: var(--col-gap);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: .25rem;
}
.brandshow::-webkit-scrollbar { height: 8px; }
.brandshow::-webkit-scrollbar-thumb {
  background: var(--footer-border);
  border-radius: 999px;
}

/* If your endpoint injects logos inside .brandshow > a > img */
.brandshow a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--footer-border);
  border-radius: var(--radius-xl);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.brandshow a:hover { transform: translateY(-2px); background: rgba(255,255,255,0.06); }
.brandshow img { max-height: 36px; width: auto; }

/* ===== Footer main ===== */
footer {
  background: var(--footer-bg);
}

.footer-container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-6) var(--space-3) var(--space-5);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(12, 1fr);
}

/* 4 content columns (stack -> 2 cols -> 4 cols) */
.footer-container .content_1,
.footer-container .content_2,
.footer-container .content_3,
.footer-container .content_4 {
  grid-column: span 12;
}





@media (max-width: 575.98px){
  #hero .carousel-control-prev-icon,
  #hero .carousel-control-next-icon {
    transform: scale(0.9);
  }
}


 .cat-swiper .swiper-wrapper { align-items: stretch; }
  .cat-chip {
    display: grid;
    place-items: center;
    gap: .5rem;
    text-align: center;
    color: var(--text);
    height: auto;
  }
  .cat-blob{
    width: var(--chip-size);
    height: var(--chip-size);
    border-radius: 50%;
    background:
      radial-gradient(circle at center, transparent 58%, rgba(0,0,0,0) 59%),
      radial-gradient(circle at center, var(--chip-ring) 1px, transparent 1px) 0 0/6px 6px,
      radial-gradient(circle at center, var(--chip-ring) 1px, transparent 1px) 3px 3px/6px 6px;
    background-color: var(--chip-bg);
    display: grid;
    place-items: center;
    box-shadow: var(--chip-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .cat-chip:hover .cat-blob{ transform: translateY(-4px); box-shadow: 0 14px 26px rgba(0,0,0,.12); }
  .cat-icon{ width: 100%; height: 100%; object-fit: contain; }
  .cat-label{
    max-width: calc(var(--chip-size) + 12px);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.2;
  }
/* PRODUCT CARD */
.product-card{ border:0; border-radius:1rem; overflow:hidden; }
.product-card .pc-img{
  position: relative;
  border-radius: .1rem;     /* <- small rounded corners */
  overflow: hidden;         /* <- keeps the image inside the rounded frame */
  background: #f7f8fa;      /* optional soft bg */
}

.cat-swiper-products .swiper-slide { height: auto; }

/* If you had this earlier, keep it — it’s fine */
.cat-swiper-products .swiper-wrapper { align-items: stretch; }
/* Remove Bootstrap's card-img-top rounding if present */
.product-card .pc-img img,
.product-card img.card-img-top{
  border-radius: 0 !important;
}

/* Make the img fill the ratio box */
.product-card .pc-img > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.product-card .pc-img.fit-cover > img{
  object-fit: cover;        /* fills the box, may crop */
}

/* 2) Show full product (no crop, may letterbox) */
.product-card .pc-img.fit-contain > img{
  object-fit: contain;      /* keeps entire product visible */
  background: #fff;         /* optional for transparent PNGs */
  padding: .6rem;           /* optional breathing room */
}
product-card .pc-sale,
.product-card .pc-like{
  position: absolute; z-index: 2;
}
.product-card .pc-sale{ top: .5rem; left: .5rem; }
.product-card .pc-like{ top: .5rem; right: .5rem; }

.product-card .pc-brand{ width:22px; height:22px; object-fit:contain; }

.product-card .card-body{ padding:.95rem; }
.product-card .pc-price{ overflow-wrap:anywhere; word-break:break-word; }

/* Title: EXACTLY two lines, then ellipsis */
.product-card .pc-title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis; min-height:2.8em; line-height:1.4;
  font-weight:600; color:#212529;
}

/* Soft badges */
.bg-soft{ background:#eef2f7; color:#475569; }
.bg-soft-success{ background:#eaf7ed; color:#1f7a25; }
.product-card .pc-flags .badge{ padding:.45rem .6rem; font-weight:500; }

/* Hover delight */
.hover-up{ transition:transform .18s ease, box-shadow .18s ease; }
.hover-up:hover{ transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
/* Optional: subtle gradient at bottom for text overlays */


 @media (min-width: 992px) {
      /* open category menu on hover (desktop only) */
      .dropdown-mega:hover > .dropdown-menu { display: block; }
      .dropdown-menu.show-on-hover { display: block; }
    }

    /* Smaller top bar on very small screens */
    @media (max-width: 575.98px) {
      .navbar-brand img { height: 32px; }
      .search-input { order: 3; width: 100%; margin-top: .5rem; }

      .product-card .card-body{ padding:.8rem; }
  .product-card .pc-img img{ padding:.7rem; }
  .product-card .pc-flags .badge{ font-size:.78rem; }
  .product-card .btn{ padding:.55rem .9rem; }

    }

.btn-primary{ background:var(--primary); border-color:var(--primary); }
.btn-primary:hover{ background:var(--accent); border-color:var(--accent-dark); filter:brightness(.95); }


.btn-secondary{ background:var(--accent); border-color:var(--accent); }
.btn-secondary:hover{ background:var(--line2);  filter:brightness(.95); }


    @media (min-width: 576px) {
  .btn-lg-sm { padding: .6rem 1rem; font-size: 1rem; }
}


@media (min-width: 640px) {
  .footer-container .content_1,
  .footer-container .content_2,
  .footer-container .content_3,
  .footer-container .content_4 { grid-column: span 6; }
}
@media (min-width: 992px) {
  .footer-container .content_1,
  .footer-container .content_2,
  .footer-container .content_3,
  .footer-container .content_4 { grid-column: span 3; }
}

.footer-container h4 {
  color: var(--footer-heading);
  font-size: 1rem;
  letter-spacing: .02em;
  margin: 0 0 var(--space-3);
}

.footer-container a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--footer-link);
  text-decoration: none;
  font-size: .95rem;
  line-height: 1.6;
  padding: .25rem 0;
  transition: color .15s ease, opacity .15s ease;
}
.footer-container a:hover,
.footer-container a:focus {
  color: var(--footer-link-hover);
  outline: none;
}

/* ===== Contact block ===== */
.address-div {
  display: grid;
  gap: .35rem;
  margin-bottom: var(--space-4);
}
.inline-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--footer-text);
  opacity: .95;
}
.inline-link img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(.85);
}
.inline-link span { color: inherit; }
.inline-link:hover { color: var(--footer-link-hover); }

/* ===== Follow us (icons) ===== */
.follow-div {
  display: grid;
  grid-template-columns: repeat(6, minmax(36px, 1fr));
  gap: .75rem;
  margin-top: .5rem;
}
.follow-div .inline-link {
  justify-content: center;
  padding: .35rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--footer-border);
  border-radius: .75rem;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.follow-div .inline-link:hover {
  transform: translateY(-2px) scale(1.02);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}
.bottom-social-div { width: 28px; height: 28px; display: grid; place-items: center; }
.bottom-social-div img { width: 100%; height: 100%; object-fit: contain; }

/* ===== Bottom terms & copyright ===== */
.footer-design {
  border-top: 1px solid var(--footer-border);
  background: var(--footer-bg-alt);
}
.footer-terms,
.footer-design-txt {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-3) var(--space-3);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.footer-terms {
  border-bottom: 1px solid var(--footer-border);
}
.footer-terms .inline-link {
  color: var(--footer-muted);
  font-size: .9rem;
  padding: .25rem .5rem;
}
.footer-terms .inline-link:hover { color: var(--footer-link-hover); }

.footer-design-txt p {
  color: var(--footer-muted);
  font-size: .9rem;
  margin: 0;
}

/* ===== Mobile bottom menu backdrop (optional) ===== */
.mob-bottom-menu-bgdiv {
  position: fixed;
  inset: auto 0 0 0;
  height: 64px;
  background: linear-gradient(180deg, rgba(14,26,42,0) 0%, rgba(14,26,42,0.85) 65%, rgba(14,26,42,1) 100%);
  pointer-events: none;
  z-index: 5;
}

/* ===== Utilities ===== */
.footer-container .content_1 a,
.footer-container .content_2 a,
.footer-container .content_3 a {
  display: block; /* vertical lists */
}

.footer-container .content_4 h4 + .address-div { margin-top: .5rem; }

/* Reduce motion friendly */
@media (prefers-reduced-motion: reduce) {
  .brandshow a,
  .follow-div .inline-link {
    transition: none;
  }
}


.cart-tile{background:var(--bucket-bg-dark);border:1px solid var(--bucket-bg);border-radius:18px;padding:12px;display:flex;gap:12px;align-items:flex-start}
  .cart-img{width:84px;height:84px;object-fit:cover;border-radius:12px;background:var(--chip-bg)}
  .cart-title{font-weight:600;line-height:1.25}
  .cart-attrs{font-size:.85rem;color:var(--footer-bg)}
  .price-now{font-weight:700}
  .price-old{color:var(--bucket-bg-dark);text-decoration:line-through;margin-left:.5rem}
  .qty-stepper{display:flex;align-items:center;gap:.5rem;border:1px solid var(--bucket-bg-dark);border-radius:12px;padding:.2rem .5rem}
  .qty-btn{width:28px;height:28px;border:0;border-radius:8px;background:var(--chip-bg)}
  .qty-input{width:36px;text-align:center;border:0;background:var(--chip-bg);font-weight:600}
  .remove-btn{color:var(--main-red)}
  .summary-card{position:sticky;top:1rem;border-radius:18px}
  .badge-free{background:var(--main-green)}
  .sticky-checkout{position:sticky;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #eee;padding:.75rem;z-index:999}
  @media (min-width: 992px){
    .sticky-checkout{display:none}
  }
  .empty-illustration{width:220px;max-width:70%}


  .auth-wrap { min-height:100vh; display:grid; grid-template-columns:1fr; }
    @media (min-width:992px){ .auth-wrap{ grid-template-columns: 1.2fr 1fr; } }
    .auth-hero {
      background: linear-gradient(135deg,var(--line2), var(--line1));
      color:#fff; display:flex; align-items:center; justify-content:center; padding:48px;
    }
    .auth-hero .brand { font-weight:700; font-size:2rem; letter-spacing:.3px }
    .auth-card {
      display:flex; align-items:center; justify-content:center; padding:32px;
    }
    .card.auth { width:100%; max-width: 420px; border:0; box-shadow:0 6px 28px rgba(0,0,0,.08); border-radius:20px; }
    .btn-brand { background:var(--brand); color:#fff; }
    .btn-brand:hover { background: var(--line1); color:#fff; }
    .link-muted { color:#6c757d; text-decoration:none; }
    .link-muted:hover { color:#111; text-decoration:underline; }


.btn-main{background:var(--line1);border-color:var(--line1);color:#fff}
.btn-main:hover{background:var(--accent);border-color:var(--accent)}
.addr-tile{transition:box-shadow .15s ease, border-color .15s ease}
.addr-tile.active{border-color:var(--primary)!important;box-shadow:0 0 0 .2rem rgba(55,48,44,.15)}
.sticky-summary{position:sticky;top:1rem}
.form-check-lg .form-check-input{width:1.2em;height:1.2em;margin-top:.3em}
.name-clip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}





    .orders-layout{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: var(--space-4) var(--space-3);
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--col-gap);
  }
  @media (max-width: 991.98px){
    .orders-layout{
      grid-template-columns: 1fr;
      padding: var(--space-3) var(--space-2);
    }
  }

  /* ---------- SIDEBAR MENU ---------- */
  .orders-sidebar{
    background: var(--card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    padding: var(--space-3);
    position: sticky;
    top: var(--space-3);
    height: fit-content;
  }
  .orders-nav{
    list-style: none;
    margin: 0; padding: 0;
    display: grid; gap: .25rem;
  }
  .orders-nav a{
    display: flex; align-items: center; gap: .6rem;
    padding: .65rem .75rem;
    border-radius: .75rem;
    color: var(--ink);
    text-decoration: none;
    transition: background .15s ease, transform .08s ease;
  }
  .orders-nav a:hover{ background: #f2f2f2; transform: translateX(2px); }
  .orders-nav a.active{
    background: #efeae6;
    color: var(--primary);
    font-weight: 600;
    border: 1px solid #e7dfd9;
  }

  /* ---------- CONTENT WRAPPER ---------- */
  .orders-content{
    min-width: 0;
  }

  /* ---------- ORDER CARD (list page) ---------- */
  .order-card{
    background: var(--card);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: var(--space-3);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    border: 1px solid rgba(0,0,0,.04);
  }
  .order-card + .order-card{ margin-top: var(--space-2); }
  .order-card:hover{ border-color: rgba(0,0,0,.08); }

  .order-head{
    display:flex; flex-wrap:wrap; gap:.5rem .75rem; align-items:center;
  }
  .order-no{
    font-weight: 700; color: var(--primary);
  }
  .order-date{
    color: var(--muted); font-size: .9em;
  }
  .amount{
    font-weight: 700; color: var(--ink);
  }

  .meta-chips{
    display:flex; flex-wrap:wrap; gap:.4rem;
    margin-top:.5rem;
  }
  .chip{
    background:#f7f7f7;
    border:1px dashed rgba(0,0,0,.08);
    padding:.35rem .55rem;
    border-radius:999px;
    color:#444; font-weight:600; font-size:.85em;
  }

  .order-actions{
    display:flex; align-items:center; gap:.5rem;
  }
  .btn-view{
    border-radius: 999px;
    border: 2px solid var(--primary);
    color: var(--primary);
    background: transparent;
    padding: .45rem .9rem;
    font-weight: 700;
    transition: all .15s ease;
  }
  .btn-view:hover{
    background: var(--primary);
    color: #fff;
  }

  /* ---------- STATUS BADGES ---------- */
  .badge-status{
    border-radius: 999px;
    padding: .35rem .65rem;
    font-weight: 700;
    font-size: .8rem;
    border: 1px solid transparent;
  }
  .badge-pending{    background:#fff6e5; color:#a15b00; border-color:#ffd89a; }
  .badge-confirmed{  background:#eef7ff; color:#0b3a7a; border-color:#bcdcff; }
  .badge-out{        background:#fff0f0; color:#9f1d2d; border-color:#ffc7ce; }
  .badge-delivered{  background:#e9fbef; color:#0f6a2b; border-color:#b9efcd; }
  .badge-deleted{    background:#fdecec; color:#8b1d28; border-color:#f5b5bb; }

  /* ---------- VIEW PAGE: TIMELINE ---------- */
  .timeline{
    position: relative;
    margin: var(--space-3) 0;
    padding-left: 32px;
  }
  .timeline::before{
    content:"";
    position:absolute; left:12px; top:0; bottom:0;
    width:3px;
    background: linear-gradient(var(--line1), var(--line2));
    border-radius: 2px;
    opacity:.85;
  }
  .tl-item{
    position: relative;
    padding: .5rem 0 .9rem 0;
  }
  .tl-bullet{
    position:absolute; left:-2px; top:.4rem;
    width: 22px; height:22px; border-radius:50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    border: 3px solid var(--line2);
  }
  .tl-title{
    font-weight: 700; color: var(--primary);
  }
  .tl-sub{
    color: var(--muted); font-size: .9em;
  }

  /* ---------- ORDER SUMMARY BOX (view page) ---------- */
  .order-summary{
    background: var(--card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    padding: var(--space-3);
    border: 1px solid rgba(0,0,0,.05);
  }
  .summary-row{
    display:flex; justify-content:space-between; align-items:center;
    padding: .35rem 0;
  }
  .summary-row + .summary-row{
    border-top:1px dashed rgba(0,0,0,.08);
  }

  /* ---------- UTILITIES ---------- */
  .muted{ color: var(--muted); }
  .title{
    font-weight: 800; color: var(--primary);
    margin-bottom: .75rem;
  }
  .section{
    margin-bottom: var(--space-3);
  }
  .soft-divider{
    height:1px; background:linear-gradient(90deg,transparent,rgba(0,0,0,.12),transparent);
    margin: .75rem 0;
  }