/*************************************
This is critical css needed to for
rendering pages.
It has:
- initialized fonts
- defined all sizes of tags for text
- spacing & layout settings
**************************************/
/* TODO */
/* Replace everywhere with proper color constants. */
/* Replace everywhere with constant fonts. */

/* ! Font Families */
:root {
  --theme-font-family-dm-serif: "DM Serif Text", serif;
  --theme-font-family-roboto: "Roboto", sans-serif;
  --theme-font-family-open-sans: "Open Sans", sans-serif;
  --theme-font-family-inter: "Inter", sans-serif;
  --theme-font-family-georgia: Georgia, serif;
  --theme-font-family-inria: "Inria Serif", serif;

  --theme-font-weight-200: 200;
  --theme-font-weight-300: 300;
  --theme-font-weight-400: 400;
  --theme-font-weight-500: 500;
  --theme-font-weight-600: 600;
  --theme-font-weight-700: 700;
  --theme-font-weight-800: 800;
  --theme-font-weight-900: 900;
}

/* Major font */
body,
body *,
.ff-inter,
.ff-inter * {
  font-family: var(--theme-font-family-inter);
}

.ff-roboto,
.ff-roboto * {
  font-family: var(--theme-font-family-roboto);
}

/* Minor fonts */
/* .ff-open-sans, */
.ff-open-sans,
.ff-open-sans * {
  font-family: var(--theme-font-family-open-sans);
}

.ff-dm-serif,
.ff-dm-serif * {
  font-family: var(--theme-font-family-dm-serif);
}

/* Fonts Variations */
.ff-open-sans-600,
.ff-open-sans-600 * {
  font-family: var(--theme-font-family-open-sans);
  font-weight: var(--theme-font-weight-600) !important;
}

.ff-open-sans-700,
.ff-open-sans-700 * {
  font-family: var(--theme-font-family-open-sans);
  font-weight: var(--theme-font-weight-700) !important;
}

/* Fonts Variations */
.ff-inter-300,
.ff-inter-300 * {
  font-family: var(--theme-font-family-inter);
  font-weight: var(--theme-font-weight-300) !important;
}

.ff-inter-400,
.ff-inter-400 * {
  font-family: var(--theme-font-family-inter);
  font-weight: var(--theme-font-weight-400) !important;
}

.ff-inter-500,
.ff-inter-500 * {
  font-family: var(--theme-font-family-inter);
  font-weight: var(--theme-font-weight-500) !important;
}

.ff-inter-600,
.ff-inter-600 * {
  font-family: var(--theme-font-family-inter);
  font-weight: var(--theme-font-weight-600) !important;
}

.ff-inter-700,
.ff-inter-700 * {
  font-family: var(--theme-font-family-inter);
  font-weight: var(--theme-font-weight-700) !important;
}

.ff-inter-800,
.ff-inter-800 * {
  font-family: var(--theme-font-family-inter);
  font-weight: var(--theme-font-weight-800) !important;
}

/* Fonts Variations */
.ff-georgia,
.ff-georgia * {
  font-family: var(--theme-font-family-georgia);
}

/* Reset: Indigo Pink + default angular font family -> set to inherit */
:root {
  --mdc-typography-font-family: inherit;
  --mdc-typography-body1-font-family: inherit;
  --mdc-typography-body2-font-family: inherit;

  --mdc-typography-headline1-font-family: inherit;
  --mdc-typography-headline2-font-family: inherit;
  --mdc-typography-headline3-font-family: inherit;
  --mdc-typography-headline4-font-family: inherit;
  --mdc-typography-headline5-font-family: inherit;
  --mdc-typography-headline6-font-family: inherit;

  --mdc-typography-subtitle1-font-family: inherit;
  --mdc-typography-subtitle2-font-family: inherit;

  --mdc-typography-caption-font-family: inherit;

  --mdc-typography-button-font-family: inherit;

  --mdc-snackbar-supporting-text-font: inherit !important;
  --mdc-dialog-subhead-font: inherit !important;
  --mdc-dialog-supporting-text-font: inherit !important;
  --mdc-slider-label-label-text-font: inherit !important;
  --mdc-list-list-item-label-text-font: inherit !important;
  --mdc-plain-tooltip-supporting-text-font: inherit !important;
  --mdc-list-list-item-trailing-supporting-text-font: inherit !important;
}

.mat-stepper-vertical,
.mat-stepper-horizontal,
.mat-expansion-panel-header,
.mat-calendar,
.mat-button-toggle,
.mat-badge-content,
.mat-bottom-sheet-container,
.mat-expansion-panel-content,
.mat-calendar,
.mat-bottom-sheet-container,
.mdc-list-group__subheader {
  font-family: inherit !important;
}

/* [Color guides] */
:root {
  /* Green */
  --theme-color-green-50: #d7f1df;

  /* Red */
  --theme-color-red-100: #9c4f4f;
  --theme-color-red-75: #fd7878;
  --theme-color-red-50: #ffb1b2;
  --theme-color-red-25: #ffe5e5;

  /* Black */
  --sl-black: #00324b;
  --theme-color-black-65: #53656d;
  --theme-color-black-35: #a6b7c0;
  --theme-color-black-10: #e5ebed;
  --theme-color-black-4: #f5f7f8;

  /* Blue */
  /*--theme-color-blue-150: #0065a5;*/
  /*--theme-color-darker-blue: #0065a5;*/
  /*--sl-secondary-light-one: #1caacf;*/
  /*--theme-color-blue-50: #8cdeff;*/
  /*--theme-color-blue-20: #d2eef5;*/
  /*--theme-color-blue-10: #f1fbfe;*/

  /* Graph */
  --theme-color-graph-green: #45d686;
  --theme-color-graph-blue: #3998e9;
  --theme-color-graph-purple: #a260d6;
  --theme-color-graph-orange: #ff9900;

  /* White */
  --theme-color-pure-white: #fff;
  --theme-color-off-white: #f0f0f0;

  /* Colors For pricing */
  --theme-color-asset-up: #10a603;
  --theme-color-green-up: #0c8501;
  --theme-color-asset-down: #ff5257;
}

/*
    [Screen Sizes] (SASS)
    [Color guides]
*/
:root {
  --theme-screen-size-desktop: 1320px;
  --theme-screen-size-tablet-large: 1100px;
  --theme-screen-size-tablet-medium: 1024px;
  --theme-screen-size-mobile: 767px;
}

/* Sizes */
:root {
  /* Sizes of the screen */
  --theme-size-4px: 4px;
  --theme-size-8px: 8px;
  --theme-size-16px: 16px;
  --theme-size-24px: 24px;
  --theme-size-32px: 32px;
  --theme-size-40px: 40px;
  --theme-size-48px: 48px;
  --theme-size-56px: 56px;
  --theme-size-64px: 64px;
  --theme-size-72px: 72px;
  --theme-size-96px: 96px;
  --theme-size-120px: 120px;
  --theme-size-128px: 128px;
  --theme-size-152px: 152px;
  --theme-size-156px: 156px;
  --theme-size-256px: 256px;
}

/*************************************
Overall styling
**************************************/

/* colors */
.color-black-100 {
  color: var(--sl-black);
}

.color-black-35 {
  color: var(--theme-color-black-35);
}

.color-black-65 {
  color: var(--theme-color-black-65);
}

.color-blue-100 {
  color: var(--sl-secondary-light-one);
}

.color-blue-150 {
  color: var(--theme-color-blue-150);
}

.color-green-asset-up {
  color: var(--theme-color-asset-up);
}

.color-pure-white {
  color: var(--theme-color-pure-white);
}

.color-outline-blue-100 {
  outline-color: var(--sl-secondary-light-one);
}

.color-red-75 {
  color: var(--theme-color-red-75);
}

.color-red-50 {
  color: var(--theme-color-red-50);
}

.color-pure-white {
  color: var(--theme-color-pure-white);
}

/* bg colors */

.bg-color-black-100 {
  background-color: var(--sl-black);
}

.bg-color-blue-150 {
  background-color: var(--theme-color-blue-150);
}

.bg-color-blue-20 {
  background-color: var(--theme-color-blue-20);
}

.bg-color-blue-10 {
  background-color: var(--theme-color-blue-10);
}

.bg-color-black-35 {
  background-color: var(--theme-color-black-35);
}

.bg-color-black-10 {
  background-color: var(--theme-color-black-10);
}

.bg-color-black-4 {
  background-color: var(--theme-color-black-4);
}

/*****************/
/** Font-sizing **/
/****************/

.tt-nowrap {
  white-space: nowrap;
}

/* titles */
.title-0 {
  font-style: normal;
  font-weight: 700;
  font-size: 96px;
  line-height: 1.25em;
}

.title-1 {
  font-size: var(--theme-size-72px);
  font-weight: 700;
  line-height: 115%;
}

.title-2 {
  font-size: var(--theme-size-72px);
  font-weight: 500;

  line-height: 1.25em;
}

.title-3 {
  font-size: var(--theme-size-64px);
  font-weight: 500;
  line-height: 1.25em;
}

.title-4 {
  font-size: var(--theme-size-48px);
  font-weight: 700;

  line-height: 1.25em;
}

.title-5 {
  font-size: var(--theme-size-40px);
  font-weight: 700;

  line-height: 1.25em;
}

.title-6,
.title-6-half {
  font-size: var(--theme-size-48px);
  font-weight: 400;

  line-height: 1.25em;
}

.title-6-half {
  font-size: 44px;
}

.title-7 {
  font-size: var(--theme-size-40px);
  font-weight: 500;

  line-height: 1.25em;
}

.title-8 {
  font-size: var(--theme-size-32px);
  font-weight: 500;

  line-height: 1.25em;
}

.title-9 {
  font-size: 28px;
  line-height: 1.25em;
}

.title-10 {
  font-size: 36px;
  line-height: 1.25em;
}

/*
    texts
    Body font => Open sans
*/

.w-b-all {
  word-break: break-all;
}

.w-b-over-wrap {
  overflow-wrap: anywhere;
}

.text-align-center {
  text-align: center;
}

.text-align-right {
  text-align: right;
}

.text-0 {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
}

.text-1 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}

.text-2 {
  font-size: 18px;
  font-weight: 500;
}

.text-3 {
  font-size: var(--theme-size-24px);
  font-weight: 800;
  line-height: 120%;
}

.text-3-open-sans {
  font-size: var(--theme-size-24px);
  font-weight: 800;
  line-height: 120%;
}

.text-3-400 {
  font-size: var(--theme-size-24px);
  font-weight: 400;
}

.text-4 {
  font-size: 16px;
  font-weight: 700;
}

.text-5 {
  font-weight: 400;
  font-size: 12px;

  line-height: 20px;
  letter-spacing: normal;
}

.text-6 {
  font-size: 12px;

  font-weight: 700;
  line-height: 20px;
}

.text-7 {
  font-size: 16px;
  font-weight: 400;
}

.text-8 {
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
}

.text-9 {
  font-size: 15px;
}

.text-10 {
  font-size: 14px;
  font-weight: 400;
}

.text-11 {
  font-size: 11px;
  font-weight: 400;
}

.text-12 {
  font-size: 13px;
  font-weight: 400;
}

.text-13 {
  font-size: 36px;
  font-weight: var(--theme-font-weight-300);
}

/* Font Weight */
.font-weight-900 {
  font-weight: 900;
}

.font-weight-700 {
  font-weight: 700;
}

.font-weight-400 {
  font-weight: 400;
}

.font-weight-300 {
  font-weight: 300;
}

.text-f-letter-uppercase {
  text-transform: capitalize;
}

/* links */
.remove-text-decoration a,
.remove-text-decoration {
  text-decoration: none;
}

.hover-style-1 a:hover,
a.hover-style-1:hover,
.active-link {
  color: var(--sl-black);
  outline-color: var(--sl-black);
}

.cursor-pointer {
  cursor: pointer;
}

/* Layout styles */

body {
  background-color: var(--theme-color-pure-white);

  /* prevent from scrolling body horizontally. */
  overflow-x: hidden;
}

.fixed-center {
  display: block;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
}

/* alignment */

.h-100-percent {
  height: 100%;
}

.h-90-percent {
  height: 90%;
}

.h-95-percent {
  height: 95%;
}

.h-80-percent {
  height: 80%;
}

.h-70-percent {
  height: 70%;
}

.h-95-px {
  height: 95px;
}

.h-130-px {
  height: 130px;
}

.w-5-percent {
  width: 5%;
}

.w-10-percent {
  width: 10%;
}

.w-15-percent {
  width: 15%;
}

.w-20-percent {
  width: 20%;
}

.w-25-percent {
  width: 25%;
}

.w-30-percent {
  width: 30%;
}

.w-40-percent {
  width: 40%;
}

.w-45-percent {
  width: 45%;
}

.w-50-percent {
  width: 50%;
}

.w-55-percent {
  width: 55%;
}

.w-60-percent {
  width: 60%;
}

.w-65-percent {
  width: 65%;
}

.w-70-percent {
  width: 70%;
}

.w-75-percent {
  width: 75%;
}

.w-80-percent {
  width: 80%;
}

.w-90-percent {
  width: 90%;
}

.w-95-percent {
  width: 95%;
}

.w-100-percent {
  width: 100%;
}

.w-fill-available {
  width: -webkit-fill-available;
}

/* for tables */
.w-20-px {
  width: 20px;
}
.w-min-20-px {
  width: 20px;
  min-width: 20px;
}

.w-25-px {
  width: 25px;
}

.w-50-px {
  width: 50px;
}
.w-min-50-px {
  width: 50px;
  min-width: 50px;
}

.w-60-px {
  width: 60px;
}

.w-min-60-px {
  width: 60px;
  min-width: 60px;
}

.w-75-px {
  width: 75px;
  min-width: 75px;
}
.w-min-75-px {
  width: 75px;
  min-width: 75px;
}

.w-80-px {
  width: 80px;
  min-width: 80px;
}
.w-min-80-px {
  width: 80px;
  min-width: 80px;
}

.w-100-px {
  width: 100px;
  min-width: 100px;
}
.w-min-100-px {
  width: 100px;
  min-width: 100px;
}

.w-125-px {
  width: 125px;
  min-width: 125px;
}
.w-min-125-px {
  width: 125px;
  min-width: 125px;
}

.w-150-px {
  width: 150px;
  min-width: 150px;
}

.w-min-150-px {
  width: 150px;
  min-width: 150px;
}
.w-175-px {
  width: 175px;
  min-width: 175px;
}
.w-min-175-px{
  width: 175px;
  min-width: 175px;
}

.w-177-px{
  width: 177px;
}
.w-min-177-px{
  width: 177px;
  min-width: 177px;
}

.w-180-px {
  width: 180px;
}

.w-190-px {
  width: 190px;
}

.w-200-px {
  width: 200px;
  min-width: 200px;
}
.w-min-200-px {
  width: 200px;
  min-width: 200px;
}

.w-225-px {
  width: 225px;
  min-width: 225px;
}

.w-min-225-px {
  width: 225px;
  min-width: 225px;
}

.w-250-px {
  width: 250px;
  min-width: 250px;
}
.w-min-250-px {
  width: 250px;
  min-width: 250px;
}

.w-275-px {
  width: 275px;
  min-width: 275px;
}

.w-300-px {
  width: 300px;
  min-width: 300px;
}

.w-325-px {
  width: 325px;
  min-width: 325px;
}

.w-400-px {
  width: 400px;
  min-width: 400px;
}

.w-425-px {
  width: 425px;
  min-width: 425px;
}

.w-450-px {
  width: 450px;
  min-width: 450px;
}

.w-438-px {
  width: 438px;
}

.w-500-px {
  width: 500px;
  min-width: 500px;
}

.w-600-px {
  width: 600px;
  min-width: 600px;
}
.w-min-300-px {
  width: 300px;
  min-width: 300px;
}

.w-350-px {
  width: 350px;
  min-width: 350px;
}
.w-min-350-px {
  width: 350px;
  min-width: 350px;
}

.space-m-bottom-56px {
  margin-bottom: var(--theme-size-56px);
}

/* Flexbox rules. */

.disp-flex {
  display: flex;
}

.f-direction-row {
  flex-direction: row;
}

.f-direction-row-reverse {
  flex-direction: row-reverse;
}

.f-direction-col {
  flex-direction: column;
}

.f-justify-center {
  justify-content: center;
}

.f-justify-space-between {
  justify-content: space-between;
}

.f-justify-space-around {
  justify-content: space-around;
}

.f-justify-space-evenly {
  justify-content: space-evenly;
}

.f-justify-evenly {
  justify-content: space-evenly;
}

.f-justify-start {
  justify-content: flex-start;
}

.f-justify-end {
  justify-content: flex-end;
}

.f-justify-self-flex-end {
  justify-self: flex-end;
}

.f-align-start {
  align-items: flex-start;
}

.f-align-content-start {
  align-content: flex-start;
}

.f-align-center {
  align-items: center;
}

.f-align-end {
  align-items: flex-end;
}

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

.f-align-self-flex-end {
  align-self: flex-end;
}

.f-equal > * {
  flex: 1;
}

/* gaps */

.f-gap-2px {
  gap: 2px;
}

.f-gap-4px {
  gap: var(--theme-size-4px);
}

.f-gap-8px {
  gap: var(--theme-size-8px);
}

.f-gap-12px {
  gap: var(--theme-size-16px);
}

.f-gap-16px {
  gap: var(--theme-size-16px);
}

.f-gap-24px {
  gap: var(--theme-size-24px);
}

.f-gap-32px {
  gap: var(--theme-size-32px);
}

.f-gap-40px {
  gap: var(--theme-size-40px);
}

.f-gap-56px {
  gap: var(--theme-size-56px);
}

.f-gap-72px {
  gap: var(--theme-size-56px);
}

.f-gap-120px {
  gap: var(--theme-size-120px);
}

.f-gap-128px {
  gap: var(--theme-size-128px);
}

.f-gap-152px {
  gap: var(--theme-size-152px);
}

.f-gap-156px {
  gap: var(--theme-size-156px);
}

.f-gap-256px {
  gap: var(--theme-size-256px);
}

.flex-item {
  flex: 0 calc(50% - 8px);
}

.flex-wrap {
  flex-wrap: wrap;
}

/* percentages */
.f-item-1 {
  flex: 1;
}

/* mg- margin */
.mg-l-auto {
  margin-left: auto;
}

.mg-r-auto {
  margin-right: auto;
}

.mg-lr-auto {
  margin-left: auto;
  margin-right: auto;
}

/*************************************
Visual Effects
**************************************/

.sticky-section-top-100px {
  position: sticky;
  top: 100px;
}

/* V shape section (apply to div and put inside div) */
/* Style for the section container */

.v-bottom-shape-blue-20:before {
  background-color: var(--theme-color-blue-20);
}

.v-bottom-shape:before {
  border-top: 100px solid white;
  border-left: 50vw solid transparent;
  border-right: 49vw solid transparent;
  content: "";
  position: absolute;
  z-index: 1;
}

.dashed-underline-pure-white {
  border-bottom: 1px dashed var(--theme-color-pure-white);
}

.dashed-underline-black-100 {
  border-bottom: 1px dashed var(--sl-black);
}

/* Add to element that goes after v-bottom-shape */
.v-bottom-shape + .next-element {
  margin-top: 100px;
}

/*************************************
Custom Elements
**************************************/

.br-mobile {
  display: none;
}

.horizontal-divider {
  width: 100%;
  height: 1px;
  background-color: var(--theme-color-black-35);
}

.horizontal-divider-black-10 {
  width: 100%;
  height: 1px;
  background-color: var(--theme-color-black-10);
}

.vertical-divider {
  height: 100%;
  width: 1px;
  background-color: var(--theme-color-black-35);
}

/* Scaling */

.scale-el-0_4 {
  scale: 0.4;
}

.scale-el-0_5 {
  scale: 0.5;
}

.scale-el-0_6 {
  scale: 0.6;
}

.scale-el-0_7 {
  scale: 0.7;
}

.scale-el-0_8 {
  scale: 0.8;
}

.scale-el-0_9 {
  scale: 0.9;
}

.scale-el-1 {
  scale: 1;
}

.scale-el-2 {
  scale: 2;
}

.scale-el-3 {
  scale: 3;
}

/*************************************
This part of file defines desktop styling.
**************************************/

.hide-element {
  display: none;
}

/* Default page container */
.default-section {
  max-width: var(--theme-screen-size-desktop);

  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
}

.w-f-c {
  width: fit-content;
}

.mx-w-fit-content {
  max-width: fit-content;
}

.mx-h-fit-content {
  height: fit-content;
  max-height: fit-content;
}

/* buttons */

.btn-clear-styling {
  padding: 0px;
  margin: 0px;
  border: none;
  background-color: transparent;
}

.btn-type-1 {
  font-size: 26px;
  font-weight: bolder;

  padding: 16px 32px;

  border-radius: 32px;

  transition: background-color 0.3s;
  cursor: pointer;
}

.btn-type-2 {
  font-size: 24px;
  font-weight: 500;

  padding: 8px 48px;

  display: flex;
  align-items: center;

  gap: 8px;

  transition: background-color 0.3s;
  cursor: pointer;
}

.btn-type-3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;

  padding: 8px 48px;

  transition: background-color 0.3s;

  cursor: pointer;

  &.reduce-back-button {
    padding-left: 32px;
    padding-right: 32px;
    width: max-content;
  }
}

.btn-style-1 {
  background-color: transparent;
  color: var(--theme-color-pure-white);
  border: 2px solid var(--theme-color-pure-white);

  display: flex;
  justify-content: center;
}

.btn-style-1:hover {
  background-color: var(--theme-color-pure-white);
  color: var(--sl-black);
  border-color: var(--theme-color-pure-white);
}

.btn-style-2 {
  background-color: var(--theme-color-pure-white);
  color: var(--sl-black);
  border: 2px solid var(--theme-color-pure-white);

  display: flex;
  justify-content: center;
}

.btn-style-2:hover {
  background-color: var(--sl-secondary-light-one);
  color: var(--theme-color-pure-white);
  border-color: var(--sl-secondary-light-one);
}

.btn-style-3:hover {
  font-weight: 700;
}

.btn-style-4 {
  background-color: var(--sl-secondary-light-one);
  color: var(--theme-color-pure-white);
  border: 1px solid var(--sl-secondary-light-one);
}

.btn-style-4:hover {
  background-color: var(--theme-color-pure-white);
  color: var(--sl-secondary-light-one);
  border-color: var(--sl-secondary-light-one);
}

.btn-style-4-no-border {
  background-color: var(--sl-secondary-light-one);
  color: var(--theme-color-pure-white);
  border: none;
}

.btn-style-4-no-border:hover {
  background-color: var(--theme-color-pure-white);
  color: var(--sl-secondary-light-one);
}

.btn-style-4:disabled {
  background-color: var(--theme-color-black-35);
  color: var(--theme-color-black-10);
  border-color: var(--theme-color-black-35);
}

.btn-style-5 {
  background-color: var(--sl-black);
  color: var(--theme-color-pure-white);
  border: 1px solid var(--sl-black);

  transition: all 0.3s ease-in-out;
}

.btn-style-5:hover {
  background-color: var(--theme-color-pure-white);
  color: var(--sl-black);
  border-color: var(--sl-black);
}

.btn-style-6 {
  background-color: var(--theme-color-pure-white);
  color: var(--theme-color-black-65);
  border: 1px solid var(--theme-color-black-65);
}

.btn-style-6:hover {
  background-color: var(--theme-color-black-65);
  color: var(--theme-color-pure-white);
}

.btn-style-7 {
  background-color: var(--theme-color-red-75);
  color: var(--theme-color-pure-white);
  border: 1px solid var(--theme-color-red-75);
  transition: all 0.3s ease-in-out;
}

.btn-style-7:hover {
  background-color: var(--theme-color-pure-white);
  color: var(--theme-color-red-75);
}

.btn-style-8:hover {
  background-color: var(--sl-primary-dark);
  color: var(--theme-color-pure-white);
  transition: all 0.3s ease-in-out;

  cursor: pointer;
}

.t-a-03 {
  transition: all 0.3s ease-in-out;
}

.border-r-8px {
  border-radius: 8px;
}

.border-r-16px {
  border-radius: 16px;
}

.border-r-32px {
  border-radius: 32px;
}

/* Footer */
.footer-section {
  padding-top: 35px;
  padding-bottom: 16px;
}

/*************************************
This part of file defines tablet styling.
**************************************/

@media only screen and (max-width: 1100px) {
  .default-section {
    padding-left: 32px;
    padding-right: 32px;
    max-width: calc(100vw - 64px);
  }
}

@media only screen and (max-width: 1024px) {
  .default-section {
    padding-left: var(--theme-size-32px);
    padding-right: var(--theme-size-32px);
    max-width: calc(100vw - var(--theme-size-64px));
  }
}

/*************************************
This part of file defines mobile
styling.
**************************************/

@media only screen and (max-width: 767px) {
  .default-section {
    padding-left: var(--theme-size-24px);
    padding-right: var(--theme-size-24px);
    max-width: calc(100vw - var(--theme-size-48px));
  }

  /* Titles */
  .title-1,
  .title-2,
  .title-3 {
    font-size: var(--theme-size-40px);
    font-weight: 700;
    line-height: 1.1em;
  }

  .title-4 {
    font-size: 36px;
  }

  .title-5 {
    font-size: 32px;
  }

  /* Text */
  .text-1,
  .text-2 {
    font-size: var(--theme-size-16px);
    line-height: 1.5em;
    font-weight: 400;
  }

  .text-3 {
    font-size: 20px;
  }

  /* Custom styling: remove br on mobile */
  .remove-mobile-br br {
    display: none;
  }

  /* Flexbox */
  .f-gap-56px {
    gap: var(--theme-size-32px);
  }

  /* Spacing */

  .space-m-bottom-56px {
    margin-bottom: var(--theme-size-32px);
  }

  .br-mobile {
    display: unset;
  }
}

.calendly-inline-widget {
  border-radius: 8px;
}

/* Remove autofill color in browser */

/* Attempt to neutralize autofill styles */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: var(--sl-black);
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px var(--theme-color-blue-10);
}

/****************************/
/******** Animation *****/
/****************************/

.default-shadow {
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.1);
}

/****************************/
/******** Printing settings *****/
/****************************/
@media print {
  .hide-screen-content-during-print {
    display: none;
  }
  .display-hidden-during-print {
    width: 100%;
    overflow: auto;
    display: block;
    position: static;
    background-color: #fff;
  }

  /* Simple unlock-icon print rules */
  .unlock-icon,
  #unlock-icon {
    width: 22px !important;
    height: 22px !important;
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Ensure unlock-icon is visible in cloned content - very specific selectors */
  sl-dynamic-html-wrapper .unlock-icon,
  sl-dynamic-html-wrapper #unlock-icon,
  .cloned-content .unlock-icon,
  .cloned-content #unlock-icon,
  div[class*="article-"] .unlock-icon,
  div[class*="article-"] #unlock-icon,
  svg.unlock-icon,
  svg#unlock-icon {
    width: 22px !important;
    height: 22px !important;
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    position: relative !important;
    z-index: 1000 !important;
    margin: 0 0.5rem !important;
  }
}

@media screen {
  .display-hidden-during-print {
    display: none;
  }
}

.sl-overlay-pane {
  -webkit-backdrop-filter: blur(
    5px
  ); /* Add this line first, it fixes blur for Safari*/
  backdrop-filter: blur(10px);
}

.ck-content {
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: calc(27 / 17);
}

.ck-content *,
.single-seciton-content * {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.outlet-container {
  width: 100%;
}

.box-shadow-default {
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}