/* Clickable Parent Link */
.clickable-parent {
  position: relative;
}
.clickable-parent:not(a), .clickable-parent:not(a) a, .clickable-parent.button, .clickable-parent.a {
  position: static !important;
}
.clickable-parent:not(a) > a::after, .clickable-parent.button::after, .clickable-parent.a::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: pointer !important;
  display: flex;
  z-index: 1;
}
/* Acessibility
---------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.hide:not(.bricks-draggable-handle) {
  display: none;
}
/* Background Color
---------------------------------------------------------------------------- */
/*Backgrounds white
--------------------------------------------- */
.bg--white {
  background-color: #fff;
}
.bg--white-alt {
  background-color: var(--white-alt);
}
/*Backgrounds black
--------------------------------------------- */
.bg--black {
  background-color: #000;
}
.bg--black-alt {
  background-color: var(--black-alt);
}
/*Background gray
--------------------------------------------- */
.bg--gray {
  background-color: var(--gray);
}
/* Algins
---------------------------------------------------------------------------- */
/*Center
--------------------------------------------- */
.center--all {
  display: flex;
  justify-content: center;
  align-items: center;
}
.center--self {
  margin-left: auto;
  margin-right: auto;
}
/* Grid
---------------------------------------------------------------------------- */
.grid--3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1024px) {
  .grid--3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .grid--3 {
    grid-template-columns: 1fr;
  }
}
/* Function to make the calculations of Clamp automatically (will mimic this calculator https://websemantics.uk/tools/fluid-responsive-property-calculator/) */
:root {
  --font-size-h1: clamp(42px, calc(2.625rem + ((1vw - 4.8px) * 4.21875)), 96px);
  --font-size-h2: clamp(36px, calc(2.25rem + ((1vw - 4.8px) * 2.5)), 68px);
  --font-size-h3: clamp(32px, calc(2rem + ((1vw - 4.8px) * 1.875)), 56px);
  --font-size-h4: clamp(24px, calc(1.5rem + ((1vw - 4.8px) * 0.625)), 32px);
  --font-size-h5: clamp(20px, calc(1.25rem + ((1vw - 4.8px) * 0.3125)), 24px);
  --font-size-text-lg: clamp(18px, calc(1.125rem + ((1vw - 4.8px) * 0.15625)), 20px);
  --font-size-text-md: clamp(16px, calc(1rem + ((1vw - 4.8px) * 0.15625)), 18px);
  --font-size-text-sm: clamp(14px, calc(0.875rem + ((1vw - 4.8px) * 0.15625)), 16px);
  --font-size-text-xs: clamp(12px, calc(0.75rem + ((1vw - 4.8px) * 0.15625)), 14px);
  --font-size-label: clamp(20px, calc(1.25rem + ((1vw - 4.8px) * 0.3125)), 24px);
  --font-size-button: clamp(20px, calc(1.25rem + ((1vw - 4.8px) * 0.3125)), 24px);
  --font-size-link: clamp(18px, calc(1.125rem + ((1vw - 4.8px) * 0.15625)), 20px);
  --font-family-primary: "Khand";
  --font-family-secondary: "Hind";
  --font-heading: var(--font-family-primary), Sans-serif;
  --font-body: var(--font-family-secondary), Sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --weight-heading: var(--font-weight-bold);
  --weight-body: var(--font-weight-regular);
  --font-line-height-h1: 1.1;
  --font-line-height-h2: 1.05;
  --font-line-height-h3: 1.14;
  --font-line-height-h4: 1.25;
  --font-line-height-h5: 1.33;
  --font-line-height-text-lg: 1.5;
  --font-line-height-text-md: 1.5;
  --font-line-height-text-sm: 1.5;
  --font-line-height-text-xs: 1.5;
  --font-line-height-label: 1.5;
  --font-line-height-button: 1.5;
  --font-letter-spacing-h1: 0;
  --font-letter-spacing-h2: 0;
  --font-letter-spacing-h3: 0;
  --font-letter-spacing-h4: 0;
  --font-letter-spacing-h5: 0;
  --font-letter-spacing-text-lg: 0;
  --font-letter-spacing-text-md: 0;
  --font-letter-spacing-text-sm: 0;
  --font-letter-spacing-text-xs: 0;
  --font-letter-spacing-label: 3px;
  --font-letter-spacing-button: 0.5px;
}
/* SCSS
--------------------------------------------- */
.text-h1 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--weight-heading);
  line-height: var(--font-line-height-h1);
}
.text-h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--weight-heading);
  line-height: var(--font-line-height-h2);
}
.text-h3 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--weight-heading);
  line-height: var(--font-line-height-h3);
}
.text-h4 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--weight-heading);
  line-height: var(--font-line-height-h4);
}
.text-h5 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h5);
  font-weight: var(--weight-heading);
  line-height: var(--font-line-height-h5);
}
.text-h6 {
  font-family: var(--font-heading);
  font-size: var(--font-size-text-lg);
  font-weight: var(--weight-heading);
  line-height: var(--font-line-height-h6);
}
.text-lg {
  font-family: var(--font-body);
  font-size: var(--font-size-text-lg);
  font-weight: var(--weight-body);
  line-height: var(--font-line-height-text-lg);
}
.text-md {
  font-family: var(--font-body);
  font-size: var(--font-size-text-md);
  font-weight: var(--weight-body);
  line-height: var(--font-line-height-text-md);
}
.text-sm {
  font-family: var(--font-body);
  font-size: var(--font-size-text-sm);
  font-weight: var(--weight-body);
  line-height: var(--font-line-height-text-sm);
}
.text-xs {
  font-family: var(--font-body);
  font-size: var(--font-size-text-xs);
  font-weight: var(--weight-body);
  line-height: var(--font-line-height-text-xs);
}
.text-label {
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-label);
  letter-spacing: var(--font-letter-spacing-label);
  color: var(--color-main-primary, #163279);
  text-transform: uppercase;
}
/* Default Headings Tags
--------------------------------------------- */
:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
}
h1 {
  font-size: var(--font-size-h1);
  line-height: var(--font-line-height-h1);
}
h2 {
  font-size: var(--font-size-h2);
  line-height: var(--font-line-height-h2);
}
h3 {
  font-size: var(--font-size-h3);
  line-height: var(--font-line-height-h3);
}
h4 {
  font-size: var(--font-size-h4);
  line-height: var(--font-line-height-h4);
}
h5 {
  font-size: var(--font-size-h5);
  line-height: var(--font-line-height-h5);
}
h6 {
  font-size: var(--font-size-text-lg);
  line-height: var(--font-line-height-text-lg);
}
/* Default Body Font
--------------------------------------------- */
body {
  font-family: var(--font-family-secondary), Sans-serif;
}
/* All links and buttons have default transition */
a, button {
  transition: 0.3s;
}
/* Remove default margin from paragraphs and re-add only on subsequent */
p {
  margin: 0;
}
p + p {
  margin-top: 1em;
}
/* Sections */
:where(section:not(section section)) {
  padding-block: var(--section-padding-block);
  padding-inline: var(--gutter);
}
/* Container fix inside Bricks only */
.brx-draggable.brxe-container {
  width: var(--container-width, 1760px) !important;
}
/* Default GAP for sections and Containers */
.brxe-section {
  gap: var(--space-56-40, 56px);
}
.brxe-container {
  gap: var(--space-32-32, 32px);
}
