:root {

  /* Typography */
  /* --text-xs: clamp(1.35rem, calc(0.96rem + 0.18vw), 1.5rem);
  --text-s: clamp(1.4rem, calc(1.14rem + 0.29vw), 1.6rem);
  --text-m: clamp(1.44rem, calc(1.35rem + 0.45vw), 1.76rem);
  --text-l: clamp(1.73rem, calc(1.59rem + 0.67vw), 2.20rem);
  --text-xl: clamp(2.07rem, calc(1.88rem + 0.96vw), 2.75rem);
  --text-2xl: clamp(2.49rem, calc(2.22rem + 1.35vw), 3.43rem);
  --text-3xl: clamp(2.99rem, calc(2.61rem + 1.86vw), 4.29rem);
  --text-4xl: clamp(3.58rem, calc(3.07rem + 2.54vw), 5.36rem);
  --text-5xl: clamp(4.30rem, calc(3.61rem + 3.44vw), 6.71rem); */

  /* Space & Gap */
  --space-3xs: clamp(0.25rem, calc(0.23rem + 0.09vw), 0.31rem);
  --space-2xs: clamp(0.50rem, calc(0.48rem + 0.09vw), 0.56rem);
  --space-xs: clamp(0.75rem, calc(0.71rem + 0.18vw), 0.88rem);
  --space-s: clamp(1.00rem, calc(0.96rem + 0.18vw), 1.13rem);
  --space-m: clamp(1.50rem, calc(1.45rem + 0.27vw), 1.69rem);
  --space-l: clamp(2.00rem, calc(1.93rem + 0.36vw), 2.25rem);
  --space-xl: clamp(3.00rem, calc(2.89rem + 0.54vw), 3.38rem);
  --space-2xl: clamp(4.00rem, calc(3.86rem + 0.71vw), 4.50rem);
  --space-3xl: clamp(6.00rem, calc(5.79rem + 1.07vw), 6.75rem);
  --space-4xl: clamp(8.00rem, calc(7.71rem + 1.43vw), 9.00rem);
  --space-5xl: clamp(10.00rem, calc(9.64rem + 1.79vw), 11.25rem);
  --space-6xl: clamp(12.00rem, calc(11.57rem + 2.14vw), 13.50rem);

  /* Grids */
  --grid-1: 1fr;
  --grid-2: repeat(2,1fr);
  --grid-3: repeat(3,1fr);
  --grid-4: repeat(4,1fr);
  --grid-5: repeat(5,1fr);
  --grid-6: repeat(6,1fr);
  --grid-7: repeat(7,1fr);
  --grid-8: repeat(8,1fr);
  --grid-9: repeat(9,1fr);
  --grid-10: repeat(10,1fr);
  --grid-11: repeat(11,1fr);
  --grid-12: repeat(12,1fr);

  /* Box Shadow */
  /* --shadow-1: 10px 15px -3px rgba(0,0,0,0.1);
  --shadow-2: 5px 5px -3px rgba(0,0,0,0.1);
  --shadow-3: 10px 5px -3px rgba(0,0,0,0.1);
  --shadow-4: 0 10px 5px -3px rgba(0, 0, 0, 0.1); */

  --shadow-1: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  --shadow-2: 0px 2px 8px 0px rgba(0, 0, 0, 0.2);

  /* Bricks Settings */
  --section-padding-inline: var(--space-l);
  --section-padding-block: var(--space-5xl);
  --container-width-m: 1000px;
  --container-width-s: 980px;

  /* Color: Primary */
  --pri: hsl(207, 61%, 26%);
  --pri-text: hsl(207, 61%, 100%);
  --pri-hover: hsl(207, 61%, 85%);
  --pri-hover-text: hsl(207, 61%, 25%);
  --pri-l1: hsl(207, 61%, 95%);
  --pri-l1-text: hsl(207, 61%, 25%);
  --pri-l2: hsl(207, 61%, 85%);
  --pri-l2-text: hsl(207, 61%, 25%);
  --pri-d1: hsl(207, 61%, 15%);
  --pri-d1-text: hsl(207, 61%, 100%);
  --pri-t1: hsla(207, 61%, 27%, 0.8);

  /* Color: Secondary (Action) */
  --sec: hsl(351, 80%, 51%);
  --sec-text: hsl(351, 80%, 100%);
  --sec-hover: hsl(351, 80%, 85%);
  --sec-hover-text: hsl(351, 80%, 25%);
  --sec-l1: hsl(351, 80%, 95%);
  --sec-l1-text: hsl(351, 80%, 25%);
  --sec-l2: hsl(351, 80%, 85%);
  --sec-l2-text: hsl(351, 80%, 25%);
  --sec-d1: hsl(351, 80%, 15%);
  --sec-d1-text: hsl(351, 80%, 100%);
  --sec-t1: hsla(351, 80%, 27%, 0.8);

  /* Color: Base */
  --base: hsl(0, 0%, 13%);
  --base-text: hsl(0, 0%, 100%);
  --base-hover: hsl(0, 0%, 95%);
  --base-hover-text: hsl(0, 0%, 20%);
  --base-l1: hsl(0, 0%, 95%);
  --base-l1-text: hsl(0, 0%, 20%);
  --base-l2: hsl(0, 0%, 85%);
  --base-l2-text: hsl(0, 0%, 20%);
  --base-d1: hsl(0, 0%, 15%);
  --base-d1-text: hsl(0, 0%, 100%);
  --base-t1: hsla(0, 0%, 13%, 0.8);
  --base-t2: hsla(0, 0%, 13%, 0.4);

  /* Color: Black & White */
  --white: hsl(0, 0%, 100%);
  --white-text: var(--base);
  --white-t1: hsl(0, 0%, 100%, 0.8);
  --white-t2: hsl(0, 0%, 100%, 0.5);

  --black: hsl(0, 0%, 0%);
  --black-l1: hsla(0, 0%, 90%);
  --black-d1: hsla(0, 0%, 10%);
  --black-t1: hsla(0, 0%, 0%, 0.6);

  /* Color: Border */
  --border-dark: hsl(0, 0%, 80%);
  --border-light: hsla(0, 0%, 100%, 0.1);

}

html {
  scroll-behavior: smooth;
}

/* You can use the link below to update the Typography and Space/Gap Tokens used above 

https://utopia.fyi/type/calculator/?c=320,16,1.2,1440,18,1.25,8,0,&s=0.75|0.5|0.25,1.5|2|3|4|6|8|10|12,s-l&g=s,l,xl,12
text-xs, text-s are tweaked above since they were too small

COLOR NAMING CONVENTION
-----------------------
Brand: Primary, Secondary, Tertiary, Quaternary, Quinary, Senary, Septenary, Octonary, Nonary, and Denary.
Blacks: Base
Neutral: White, Black
Status: Success, Error, Danger

L = Light
D = Dark
T = Transparent

*/


/* UTILITY CLASES 

*/

/* Background Colors */
.bg-pri {
  background-color: var(--pri);
  color: var(--pri-text);
}
.bg-sec {
  background-color: var(--sec);
  color: var(--sec-text);
}
.bg-base {
  background-color: var(--base);
  color: var(--base-text);
}
.bg-white {
  background-color: var(--white);
  color: var(--white-text);
}
.bg-shade-pri {
  background-color: var(--pri-l1);
  color: var(--pri-l1-text);
}
.bg-shade-sec {
  background-color: var(--sec-l1);
  color: var(--sec-l1-text);
}
.bg-shade-base {
  background-color: var(--base-l1);
  color: var(--base-l1-text);
}
.bg-trans-white {
  background-color: var(--white-t1);
  color: var(--base);
}
.bg-trans-black {
  background-color: var(--black-t1);
  color: var(--white);
}
.bg-trans-pri {
  background-color: var(--pri-t1);
  color: var(--white);
}

.bg-trans-sec {
  background-color: var(--sec-t1);
  color: var(--white);
}

.hover-bg-pri:focus-within,
.hover-bg-pri:hover {
  background-color: var(--pri);
  color: var(--pri-text);
}
.hover-bg-sec:focus-within,
.hover-bg-sec:hover {
  background-color: var(--sec);
  color: var(--sec-text);
}
.hover-bg-base:focus-within,
.hover-bg-base:hover {
  background-color: var(--base);
  color: var(--base-text);
}
.hover-bg-white:focus-within,
.hover-bg-white:hover {
  background-color: var(--white);
  color: var(--white-text);
}
.hover-bg-shade-pri:focus-within,
.hover-bg-shade-pri:hover {
  background-color: var(--pri-l1);
  color: var(--pri-l1-text);
}
.hover-bg-shade-sec:focus-within,
.hover-bg-shade-sec:hover {
  background-color: var(--sec-l1);
  color: var(--sec-l1-text);
}
.hover-bg-shade-base:focus-within,
.hover-bg-shade-base:hover {
  background-color: var(--base-l1);
  color: var(--base-l1-text);
}



/* Font Sizes */
.text-xs {
  font-size: var(--text-xs);
  line-height: 1.3;
}
.text-s {
  font-size: var(--text-s);
  line-height: 1.3;
}
.text-m {
  font-size: var(--text-m);
  line-height: 1.3;
}
.text-l {
  font-size: var(--text-l);
  line-height: 1.2;
}
.text-xl {
  font-size: var(--text-xl);
  line-height: 1.2;
}
.text-2xl {
  font-size: var(--text-2xl);
  line-height: 1.1;
}
.text-3xl {
  font-size: var(--text-3xl);
  line-height: 1.1;
}
.text-4xl {
  font-size: var(--text-4xl);
  line-height: 1.1;
}
.text-5xl {
  font-size: var(--text-5xl);
  line-height: 1.1;
}


/* Text Colors */
.text-pri {
  color: var(--pri);
}
.text-sec {
  color: var(--sec);
}
.text-base {
  color: var(--base);
}
.text-white {
  color: var(--white);
}
.text-shade-pri {
  color: var(--pri-hover-text);
}
.text-shade-sec {
  color: var(--sec-hover-text);
}

.hover-text-pri:focus-within a,
.hover-text-pri:hover a {
  color: var(--pri);
}
.hover-text-sec:focus-within a,
.hover-text-sec:hover a {
  color: var(--sec);
}
.hover-text-base:focus-within a,
.hover-text-base:hover a {
  color: var(--base);
}
.hover-text-white:focus-within a,
.hover-text-white:focus-within a  {
  color: var(--white);
}
.hover-text-shade-pri-text:focus-within a,
.hover-text-shade-pri-text:hover a {
  color: var(--pri-hover);
}
.hover-text-shade-sri-text:focus-within a,
.hover-text-shade-sri-text:hover a {
  color: var(--sec-hover);
}


/* Border Colors */
.border-pri {
  border-color: var(--pri);
}
.border-sec {
  border-color: var(--sec);
}
.border-base {
  border-color: var(--base);
}
.border-white {
  border-color: var(--white);
}
.border-shade-pri {
  border-color: var(--pri-hover);
}
.border-shade-sec {
  border-color: var(--sec-hover);
}

.hover-border-pri:hover a {
  border-color: var(--pri);
}
.hover-border-sec:hover a {
  border-color: var(--sec);
}
.hover-border-base:hover a {
  border-color: var(--base);
}
.hover-border-white {
  border-color: var(--white);
}
.hover-border-shade-pri {
  border-color: var(--pri-hover);
}
.hover-border-shade-sec {
  border-color: var(--sec-hover);
}


/* Position */
.position-relative {
  position: relative; 
}
.position-absolute {
  position: absolute; 
}

.position-bottom {
  bottom: 0; 
}
.position-left {
  left: 0; 
}
.position-right {
  right: 0; 
}
.position-top {
  top: 0; 
}


/* Test Transformation */
.text-transform-uppercase {
  text-transform: uppercase;
}
.text-align-left {
  text-align: left;
}
.text-align-center {
  text-align: center;
}
.text-align-right {
  text-align: center;
}
.text-decoration-underline {
  text-decoration: underline;
}
.hover-text-decoration-underline:focus-within a,
.hover-text-decoration-underline:hover a {
  text-decoration: underline;
}
.hover-text-decoration-none:hover {
  text-decoration: none;
}


/* Font Weight */
.font-weight-100 {
  font-weight: 100;
}
.font-weight-200 {
  font-weight: 200;
}
.font-weight-300 {
  font-weight: 300;
}
.font-weight-400 {
  font-weight: 400;
}
.font-weight-500 {
  font-weight: 500;
}
.font-weight-600 {
  font-weight: 600;
}
.font-weight-700 {
  font-weight: 700;
}
.font-weight-800 {
  font-weight: 800;
}
.font-weight-900 {
  font-weight: 900;
}



/* Flex */
.flex-row {
  flex-direction: row;
}
.flex-column {
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}

.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-between {
  align-items: space-between;
}
.items-around {
  align-items: space-around;
}
.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.self-end {
  align-self: flex-end;
}


/* Sizing */
.width-25 {
  width: 25%;
}
@media (max-width: 767px) {
  .width-25 {
    width: 100%;
  }
}

.width-30 {
  width: 30%;
}
@media (max-width: 767px) {
  .width-30 {
    width: 100%;
  }
}

.width-35 {
  width: 35%;
}
@media (max-width: 767px) {
  .width-35 {
    width: 100%;
  }
}

.width-40 {
  width: 40%;
}
@media (max-width: 767px) {
  .width-40 {
    width: 100%;
  }
}

.width-45 {
  width: 45%;
}
@media (max-width: 767px) {
  .width-45 {
    width: 100%;
  }
}

.width-50 {
  width: 50%;
}
@media (max-width: 767px) {
  .width-50 {
    width: 100%;
  }
}

.width-55 {
  width: 55%;
}
@media (max-width: 767px) {
  .width-55 {
    width: 100%;
  }
}

.width-60 {
  width: 60%;
}
@media (max-width: 767px) {
  .width-60 {
    width: 100%;
  }
}

.width-65 {
  width: 65%;
}
@media (max-width: 767px) {
  .width-65 {
    width: 100%;
  }
}

.width-70 {
  width: 70%;
}
@media (max-width: 767px) {
  .width-70 {
    width: 100%;
  }
}

.width-75 {
  width: 75%;
}
@media (max-width: 767px) {
  .width-75 {
    width: 100%;
  }
}

.width-80 {
  width: 80%;
}
@media (max-width: 767px) {
  .width-80 {
    width: 100%;
  }
}

.width-85 {
  width: 85%;
}
@media (max-width: 767px) {
  .width-85 {
    width: 100%;
  }
}

.width-90 {
  width: 90%;
}
@media (max-width: 767px) {
  .width-90 {
    width: 100%;
  }
}

.width-95 {
  width: 95%;
}
@media (max-width: 767px) {
  .width-95 {
    width: 100%;
  }
}

.width-100 {
  width: 100%;
}

.height-100 {
  height: 100%;
}


/* Spacing */
.row-gap-3xs {
  row-gap: var(--space-3xs);
}
.row-gap-2xs {
  row-gap: var(--space-2xs);
}
.row-gap-xs {
  row-gap: var(--space-xs);
}
.row-gap-s {
  row-gap: var(--space-s);
}
.row-gap-m {
  row-gap: var(--space-m);
}
.row-gap-l {
  row-gap: var(--space-l);
}
.row-gap-xl {
  row-gap: var(--space-xl);
}
.row-gap-2xl {
  row-gap: var(--space-2xl);
}
.row-gap-3xl {
  row-gap: var(--space-3xl);
}
.row-gap-4xl {
  row-gap: var(--space-4xl);
}
.row-gap-5xl {
  row-gap: var(--space-5xl);
}
.row-gap-6xl {
  row-gap: var(--space-6xl);
}

.column-gap-3xs {
  column-gap: var(--space-3xs);
}
.column-gap-2xs {
  column-gap: var(--space-2xs);
}
.column-gap-xs {
  column-gap: var(--space-xs);
}
.column-gap-s {
  column-gap: var(--space-s);
}
.column-gap-m {
  column-gap: var(--space-m);
}
.column-gap-l {
  column-gap: var(--space-l);
}
.column-gap-xl {
  column-gap: var(--space-xl);
}
.column-gap-2xl {
  column-gap: var(--space-2xl);
}
.column-gap-3xl {
  column-gap: var(--space-3xl);
}
.column-gap-4xl {
  column-gap: var(--space-4xl);
}
.column-gap-5xl {
  column-gap: var(--space-5xl);
}
.column-gap-6xl {
  column-gap: var(--space-6xl);
}



/* MISC */
.overflow-hidden {
  overflow: hidden;
}
.overflow-clip {
  overflow: clip;
}
.ul {
  padding-left: 0;
  margin: 0;
}
.circle {
  border-radius: 50rem;
}
.svg {
  fill: currentcolor;
}
.max-content {
  width: max-content;
}
.order--1 {
  order: -1;
}
.isolation-isolate {
  isolation: isolate;
}
.outline {
  --border-width: 1px;
  --border-style: solid;
  --border-color: var(--border-dark);
  border: var(--border-style) var(--border-width) var(--border-color);
}
.bg-dark .outline {
  --border-width: 1px;
  --border-style: solid;
  --border-color: var(--border-light);
  border: var(--border-style) var(--border-width) var(--border-color);
}
.margin-top-auto {
  margin-top: auto;
}
.inset {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

/* Image Aspect Ratio */
.img-32 {
  width: 100%;
  aspect-ratio: 3/2;
}
.img-23 {
  width: 100%;
  aspect-ratio: 2/3;
}
.img-169 {
  width: 100%;
  aspect-ratio: 16/9;
}
.img-916 {
  width: 100%;
  aspect-ratio: 9/16;
}
.img-43 {
  width: 100%;
  aspect-ratio: 4/3;
}
.img-34 {
  width: 100%;
  aspect-ratio: 3/4;
}
.img-56 {
  width: 100%;
  aspect-ratio: 5/6;
}
.img-65 {
  width: 100%;
  aspect-ratio: 6/5;
}



/* GLOBAL CSS */

h1 {
  font-size: var(--text-2xl);
  line-height: 1.1;
}
h2 {
  font-size: var(--text-xl);
  line-height: 1.1;
}
h3 {
  font-size: var(--text-l);
  line-height: 1.2;
}
h4 {
  font-size: var(--text-l);
  line-height: 1.3;
}
h5 {
  font-size: var(--text-m);
  line-height: 1.3;
}
h6 {
  font-size: var(--text-s);
  line-height: 1.3;
}



/* Interaction */
body.bricks-is-frontend :focus {
  outline: none;
}
body.brx-body.bricks-is-frontend :focus-visible {
  outline: 0.25rem solid var(--primary);
  outline-offset: 0.25rem;
}
.focus-visible.body.brx-body.bricks-is-frontend :focus-visible {
  outline: 0.25rem solid var(--primary);
  outline-offset: 0.25rem;
}
body.brx-body.bricks-is-frontend .bgpri :focus-visible {
  outline: 0.25rem solid var(--white);
  outline-offset: 0.25rem;
}
.focus-visible.body.brx-body.bricks-is-frontend .bgpri :focus-visible {
  outline: 0.25rem solid var(--white);
  outline-offset: 0.25rem;
}
.clickable-parent a:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.focus-parent {
  position: relative !important;
  z-index: 2;
}
.focus-parent:focus-within {
  outline: 0.25rem solid var(--primary);
  outline-offset: 0.25rem;
}
.focus-parent:focus-within :focus {
  outline: none !important;
  box-shadow: none !important;
}
.hover-transform-scale:focus-within img,
.hover-transform-scale:hover img {
  --value: 1.05;
  transform: scale(var(--value), var(--value)) !important;
}
.hover-transform-scale img {
  transition: transform 0.3s ease-in-out;
}

.outline-none :focus {
  outline: none !important;
}


/* Brick Global Styling Over-ride */
:where(p:last-of-type)+h1,
:where(p:last-of-type)+h2,
:where(p:last-of-type)+h3,
:where(p:last-of-type)+h4,
:where(p:last-of-type)+h5,
:where(p:last-of-type)+h6 {
  margin-top: 0;
}



/* Image Overlay */
.img-overlay--gradient-trans-pri {
  background:hsla(216, 92%, 27%, 0.8);
  background: linear-gradient(0deg, hsla(216, 92%, 27%, 0.8) 30%, rgba(0,0,0,0) 100%);
}
.img-overlay--gradient-trans-pri > *,
.img-overlay--gradient-trans-pri + * {
  color: var(--white);
}

.img-overlay--gradient-trans-base {
  background: rgba(0,0,0,0.8);
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0) 100%);
}
.img-overlay--gradient-trans-base > *,
.img-overlay--gradient-trans-base + * {
  color: var(--white);
}