/*# sourceMappingURL=custom.css.map */

section.cards .cards-list {
    display: flex !important;
    margin-top: 10px !important;
}

.header-fixed .hero { 
    background: #4C1164;
    background: linear-gradient(183deg, #280d33 0%, #070109 100%);
}

.modular-features .frame-box  {
    margin: -3rem -1.4rem 3rem;
    padding: 1rem 1rem;
    background: #fff;
    box-shadow: 0 0 75px 0 rgba(69, 77, 93, 0.1);
}

#header.scrolled .navbar-brand.inverted img{
    filter: none !important;
}

/* Occivue feature card — match screenshot */
.occi-feature-card{
  position:relative;
  text-align:center;
  padding:28px 18px 22px;
  background:transparent;        /* no border box in the screenshot */
}

.occi-feature-card .icon-bg{
  line-height:1;
  margin-bottom:10px;
}

.occi-feature-card .icon-bg i{
  font-size:110px;               /* big, like screenshot */
  color:#cfd6df;                 /* light grey */
  opacity:1;                     /* keep solid but pale via color */
  display:inline-block;
}

.occi-feature-card h4{
  margin-top:-6px;               /* tuck into icon a bit */
  margin-bottom:10px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#3f5fb5;                 /* blue title as in shot */
}

.occi-feature-card p{
  max-width:320px;
  margin:0 auto;
  font-size:15px;
  line-height:1.55;
  color:#7f8aa3;                 /* muted paragraph */
}

/* spacing between rows on mobile/tablet */
.features-grid.columns{
  --gap: 1.75rem;
}

/* Toggle (Personal / Business) */
.occi-plan-toggle { margin: .25rem 0 1.5rem; }
.occi-plan-toggle .toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .9rem; border:1px solid #e6eaf2; background:#fff;
  border-radius:999px; font-size:.9rem; color:#62718a; margin:0 .25rem;
}
.occi-plan-toggle .toggle.is-active{ background:#f2f5ff; color:#334db6; border-color:#dfe6ff; }

/* Card shell */
.occi-plan{
  position:relative;
  height:100%;
  background:#fff;
  border:1px solid #e9edf3;
  border-radius:18px;
  box-shadow:0 8px 24px rgba(31,45,61,.06);
  padding:22px 22px 16px;
  display:flex; flex-direction:column; gap:16px;
}
.occi-plan.is-highlight{
  background: #f4f6ff;
  border-color:#dfe6ff;
}

/* “NEW” pill */
.occi-plan .pill{
  position:absolute; top:14px; right:14px;
  background:#4F1A64; color:#fff; font-size:.7rem; letter-spacing:.4px;
  padding:.25rem .5rem; border-radius:999px;
}

/* Header */
.occi-plan .head{ display:flex; flex-direction:column; gap:.5rem; }
.occi-plan .plan{ margin:0; font-size:1.05rem; font-weight:700; color:#1f2d3d; }
.occi-plan .price{ display:flex; align-items:baseline; gap:.35rem; }
.occi-plan .price .currency{ color:#8a95ab; }
.occi-plan .price .amount{ font-size:2.1rem; font-weight:800; color:#1f2d3d; }
.occi-plan .price .suffix{ color:#8a95ab; font-size:.9rem; }

/* Buttons */
.occi-plan .btn{
  width:100%; border-radius:999px; padding-bottom: 1rem; font-weight:700;
  border:1px solid #e4e8f0; background:#fff; color:#7a869b;
}
.occi-plan .btn.is-disabled{ opacity:.7; cursor:not-allowed; }
.occi-plan .btn.is-primary{ background:#4F1A64; color:#fff; border-color:#4F1A64; }
.occi-plan .btn.is-dark{ background:#111; color:#fff; border-color:#111; }

/* Feature list */
.occi-plan .features{
  list-style:none; padding-left:0; margin:4px 0 0;
  display:flex; flex-direction:column; gap:.55rem; color:#5e6b86; font-size:.95rem;
}
.occi-plan .features li{
  position:relative; padding-left:22px;
}
.occi-plan .features li::before{
  content: "";
  width: 14px; height: 14px;
  position: absolute; left: 0; top: .25rem;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%238e99ff' d='M6.2 12.5L1.7 8l1.4-1.4L6.2 9.7l6.7-6.7L14.3 4 6.2 12.5z'/%3E%3C/svg%3E") no-repeat center/contain;
}
/* Footnote */
.occi-plan .foot{ margin-top:auto; color:#8a95ab; }
.occi-plan .foot small a{ color:#4F1A64; }

/* Accents (optional per-card hues) */
.occi-plan[data-accent="dark"] .btn.is-dark{ background:#000; border-color:#000; }
.occi-plan[data-accent="pro"] .btn.is-dark{ background:#0f172a; border-color:#0f172a; }

/* Responsive tweaks */
@media (max-width: 1215px){
  .occi-plan .amount{ font-size:1.9rem; }
}


.mar{
    margin-top: 5px;
}


.modular-row {
    max-width: 70% !important; 
    margin: auto;
}
.title-h1h2 h1{
  font-weight: 500 !important;
}