@layer utilities {
/* Colour utilities */
.text-dark    { color: var(--dark); }
.text-light   { color: var(--light); }
.text-indigo  { color: var(--indigo); }
.text-sky     { color: var(--sky); }
.text-emerald { color: var(--emerald); }
.bg-dark    { background: var(--dark); }
.bg-light   { background: var(--light); }
.bg-white   { background: #fff; }
.bg-navy      { background: var(--navy); }
.bg-navy-100  { background: var(--navy-100); }
.bg-navy-200  { background: var(--navy-200); }
.bg-navy-300  { background: var(--navy-300); }
.bg-navy-400  { background: var(--navy-400); }
.bg-navy-500  { background: var(--navy-500); }
.bg-navy-900  { background: var(--navy-900); }
.bg-card    { background: var(--bg-card); }
.bg-gradient         { background: var(--grad); }
.bg-gradient-reverse { background: var(--grad-reverse); }

/* Radial glow blobs — combine freely e.g. glow-tl glow-br */
.glow-tl, .glow-tr, .glow-bl, .glow-br { position: relative; overflow: hidden; }

.glow-tl::before, .glow-tr::before {
  content: '';
  position: absolute;
  width: 350px; height: 350px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(129,140,248,.18) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.glow-tl::before { top: -80px; left:  -80px; }
.glow-tr::before { top: -80px; right: -80px; }

.glow-bl::after, .glow-br::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(52,211,153,.15) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.glow-bl::after { bottom: -80px; left:  -60px; }
.glow-br::after { bottom: -80px; right: -60px; }

/* Buttons */
.btn, .brxe-button, .ff-btn {
  display: inline-flex;
  padding: .75em 1.75em;
  border-radius: 10px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid var(--light-30);
  background: transparent;
  color: inherit;
  transition: .4s ease-in-out;
}
.btn--gradient {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 0 30px rgba(129, 140, 248, .3);
}
.btn--small{
  font-size: var(--fs--1); padding: .5em  1.5em;
}
.btn:hover, .brxe-button:hover { opacity: .85; box-shadow: 0 0 15px  var(--sky)}

/* Gradient text */
.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Caption / section label */
.caption {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--indigo);
}
.caption::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 1px;
  background: var(--indigo);
}
.caption--center::after {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 1px;
  background: var(--indigo);
}

  .error{
    color: red;
    background: white;
    padding: 2px;
    font-weight: 600;
  }
  /*column styles*/
  .columns {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .columns>* {
    display: flex;
    flex-direction: column;
  }

  @media only screen and (min-width: 992px) {

    /*Column styles desktop*/
    /*column utilties*/
    .columns {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
    }

    .columns>* {
      display: flex;
    }

    .columns--even > * {
      display: flex;
      flex: 1 1 300px;
    }

    .columns--centered > * {
      align-items: center;
      justify-content: center;
    }

    .columns--sidebar-left>*:first-child {
      display: flex;
      flex: 1 1 30%;
      min-width: 220px;
    }

    .columns--sidebar-left>*:last-child {
      display: flex;
      flex: 1 1 60%;
    }

    /*Sidebar right*/
    .columns--sidebar-right>*:first-child {
      display: flex;
      flex: 1 1 70%;
    }

    .columns--sidebar-right>*:last-child {
      display: flex;
      flex: 1 1 25%;
      min-width: 220px;
    }

    .sidebar__container {
      display: flex;
      flex-direction: column;
      padding: var(--space-l);
      border-radius: var(--btn-radius);
      gap: var(--space-l);
    }
  }

  /*clickable parents*/
  .clickable-parent {
    position: relative;
  }
  .clickable-parent a {
    z-index: 5;
    /* Ensure the link is on top for clicking */
  }

  .clickable-parent a::before {
    position: absolute;
    content: '';
    inset: 0;
    z-index: 100;
  }

  /* remove list style from list */
  .no-list-style,
  .no-list-style ul,
  .no-list-style li {
    margin: unset;
    padding: unset;
    list-style: none;
  }

  /* overlay */
  /* Overlay Classes — 2 lines per shade, use dark-overlay-10 / light-overlay-10 */
  [class*="dark-overlay-"],
  [class*="light-overlay-"] { position: relative; }

  [class*="dark-overlay-"]::before,
  [class*="light-overlay-"]::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: var(--_ov);
  }

  .dark-overlay-10  { --_ov: var(--dark-10); }
  .dark-overlay-20  { --_ov: var(--dark-20); }
  .dark-overlay-30  { --_ov: var(--dark-30); }
  .dark-overlay-40  { --_ov: var(--dark-40); }
  .dark-overlay-50  { --_ov: var(--dark-50); }
  .dark-overlay-60  { --_ov: var(--dark-60); }
  .dark-overlay-70  { --_ov: var(--dark-70); }
  .dark-overlay-80  { --_ov: var(--dark-80); }
  .dark-overlay-90  { --_ov: var(--dark-90); }
  .dark-overlay-100 { --_ov: var(--dark-100); }

  .light-overlay-10  { --_ov: var(--light-10); }
  .light-overlay-20  { --_ov: var(--light-20); }
  .light-overlay-30  { --_ov: var(--light-30); }
  .light-overlay-40  { --_ov: var(--light-40); }
  .light-overlay-50  { --_ov: var(--light-50); }
  .light-overlay-60  { --_ov: var(--light-60); }
  .light-overlay-70  { --_ov: var(--light-70); }
  .light-overlay-80  { --_ov: var(--light-80); }
  .light-overlay-90  { --_ov: var(--light-90); }
  .light-overlay-100 { --_ov: var(--light-100); }
/* gradient utilities */
  .dark-overlay-vignette { --_ov: linear-gradient(to bottom, var(--dark), var(--dark-60) 50%, var(--dark)); }
  .dark-overlay-to-top { --_ov: linear-gradient(to top, var(--dark), transparent); }

  .dark-overlay-10 .content,
  .light-overlay-10 .content,
  [class*="dark-overlay-"] .content,
  [class*="light-overlay-"] .content { z-index: 2; }

/* ============ BACKGROUND IMAGE ================ */
  .bg-img {
    position: relative;
    overflow: hidden;
  }

    .bg-img__img {
      position: absolute;
      height: 100%;
      width: 100%;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }
        .bg-img img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
        .bg-img--contain img{
          object-fit: contain;
        }

.bg-img .content {
    position: relative;
    z-index: 2
}
  /* Vertical divider between 2 text elements */
  .divider {
    --gap: var(--space-m);
    gap: var(--gap);
  }

  .divider>*:first-child::after {
    content: '';
    display: block;
    width: 15em;
    max-width: 70%;
    height: 3px;
    background: var(--light--70);
    transform: translateY(calc(var(--gap) / 2));
  }

  .divider--accent>*:first-child::after {
    background: var(--col-accent);
  }

  /* Double heading */
  .h-double {
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: left;
  }
  .h-double>* {
    margin: 0;
    /*reset browser styles*/
    line-height: 1.2;
  }
  .h-double--reverse {
    flex-direction: column-reverse;
  }

  .h-double--left {
    text-align: left;
    align-items: start;
  }
    .h-double--center {
    text-align: center;
    align-items: center;
  }
  /* text shadow */
  .text-shadow-dark{
    text-shadow: 0 0 10px var(--dark);
  }
  .text-shadow-light{
    text-shadow: 0 0 10px var(--light);
  }
  .no-text-decoration,
  .no-text-decoration *{
    text-decoration: none;
  }
  .no-link-style,
  .no-link-style a{
    text-decoration: none;
    color: inherit;
  }
  /* Hover animations */
  .transition {
    transition: .4s ease-in-out;
  }

  .hover-up-s:hover {
    transform: translateY(calc(var(--space-s) * -1));
  }

  .hover-right-s:hover {
    transform: translateX(var(--space-s));
  }

  /* Section Padding */
  .p-section {
    padding-left: var(--px-section);
    padding-right: var(--px-section);
    padding-bottom: var(--py-section);
    padding-top: var(--py-section);
  }

  .px-section {
    padding-left: var(--px-section);
    padding-right: var(--px-section);
  }

  .py-section {
    padding-bottom: var(--py-section);
    padding-top: var(--py-section);
  }

  .pt-section {
    padding-top: var(--py-section);
  }

  .pb-section {
    padding-bottom: var(--py-section);
  }

  .pl-section {
    padding-left: var(--px-section);
  }

  .pr-section {
    padding-right: var(--px-section);
  }
/* ===== SWAPPER DESKTOP ====== */
/* swap order dynamically */
@media only screen and (min-width:999px) {

  .swapper.columns:nth-of-type(2n) > *:last-child,
  .swapper:nth-of-type(2n) .columns > *:last-child  {
    order: -1;
  }
  /* swapper content wrapper */
  .swapper:nth-of-type(2n)  .columns> *:has(.swapper__content){
    align-items: end;
  }

}
/* alternating colour section */

.alternating-dark:nth-of-type(2n -1):nth-of-type(2n -1){
  background: var(--dark-90);
}


@layer bricks-utilties{
  .nav--wrap nav > ul{
    flex-wrap: wrap;
  }

}
  @layer theme-utilties{
    /* Border utility styles */
    .border-light-50   { border:        1px solid var(--light-50); }
    .border-light-20   { border:        1px solid var(--light-20); }
    .border-t-light    { border-top:    1px solid var(--light); }
    .border-b-light    { border-bottom: 1px solid var(--light); }
    .border-t-light-20 { border-top:    1px solid var(--light-20); }
    .border-b-light-20 { border-bottom: 1px solid var(--light-20); }

    .border-gradient {position: relative;}
    .border-t-gradient::before {
      content: '';
      position: absolute;
      inset: -2px 0 auto 0;
      height: 2px;
      border-radius: inherit;
      background: var(--grad);
    }
    .border-t-gradient::after {
      content: '';
      position: absolute;
      inset: auto 0 -2px 0;
      height: 2px;
      border-radius: inherit;
      background: var(--grad);
    }

    .list--code {
      list-style: none;
    }
      .list--code li {
        position: relative;
      }

      .list--code li + li {
        margin-top: 0.45em;
      }

      .list--code li::before {
        content: '';
        position: absolute;
        left: -1.5em;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        width: 1.1em;
        height: 1em;
        color: var(--sky);
        background-color: currentColor;
        mask-image: url("data:image/svg+xml,%3Csvg width='20' height='19' viewBox='0 0 20 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.88592 15.3337L0 10.8374V9.26942L5.88592 4.77306V6.64078L0.775218 10.3993V9.70752L5.88592 13.466V15.3337Z' fill='black'/%3E%3Cpath d='M6.95464 19L11.8069 0H13.0559L8.20361 19H6.95464Z' fill='black'/%3E%3Cpath d='M14.1141 15.3337V13.466L19.2248 9.70752V10.3993L14.1141 6.64078V4.77306L20 9.26942V10.8374L14.1141 15.3337Z' fill='black'/%3E%3C/svg%3E");
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='20' height='19' viewBox='0 0 20 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.88592 15.3337L0 10.8374V9.26942L5.88592 4.77306V6.64078L0.775218 10.3993V9.70752L5.88592 13.466V15.3337Z' fill='black'/%3E%3Cpath d='M6.95464 19L11.8069 0H13.0559L8.20361 19H6.95464Z' fill='black'/%3E%3Cpath d='M14.1141 15.3337V13.466L19.2248 9.70752V10.3993L14.1141 6.64078V4.77306L20 9.26942V10.8374L14.1141 15.3337Z' fill='black'/%3E%3C/svg%3E");
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
      }
  }
}