:root {
  --spacing-small: 10px;
  --spacing-medium: 20px;
  --spacing-medium-2: 40px;
  --spacing-large: 60px;
  --spacing-extra-large: 100px;
  --neg-spacing-large: -80px;
  --hero-height: 650px;
  /* colours */
  --primary: #6D60AA;
  /* purple */
  --secondary: #1781C5;
  /* blue */
  --accent: #5FCBEA;
  /* lt blue */
  --light: #f2f8fc;
  /* lt lt blue */
  --text: #202124;
  /* black */
  --dkblue: #25408F;
  /* dark blue */
  /* fonts */
  --font1: 'Roboto Slab';
  --font2: 'Mulish';
  --font3: 'Mulish';
}
/* Text sizes - with CLAMP to make fluid */
/* dont forget to install CLAMP*/
/* body */
.text-container p {
  text-wrap: pretty;
  font-size: clamp(16px, 3vw, 20px);
  font-family: var(--font2);
}
/* body link text*/
.text-container p a {
  color: var(--accent);
}
.text-container p a:hover {
  color: var(--primary);
}
/* clip text to gradient */
.text-container .section-title h1 {
  font-size: clamp(4em, 8vw, 6em);
  font-weight: 900;
  background-image: linear-gradient(to right, #99DBF9, #FFF);
  -webkit-background-clip: text;
  /* For WebKit browsers like Chrome, Safari */
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* For WebKit browsers */
  color: transparent;
  /* For other browsers */
}
/* font-size: clamp(1.875rem, 1.25205rem + 2.62295vw, 3.875rem); */
.text-container h1 {
  font-size: clamp(2.5em, 8vw, 4em);
  font-family: var(--font1);
  font-weight: 500;
  color: var(--dkblue);
  padding-bottom: 36px;
}
span.emph {
  color: var(--primary);
  border-bottom: solid 8px ;
}
.text-container h2 {
  font-size: clamp(2em, 6vw, 3em);
  font-family: var(--font1);
  font-style: normal;
  font-weight: 500;
  color: var(--primary);
  padding-bottom: var(--spacing-medium);
}
.text-container h3 {
  font-size: clamp(1.3em, 4vw, 2.2em);
  font-family: var(--font1);
  color: var(--primary);
  padding-bottom: 0px;
  line-height: 1.3;
}
.text-container h4 {
  font-size: clamp(1.2em, 4vw, 2em);
  font-family: var(--font1);
  color: var(--secondary);
  padding-bottom: 0px;
  line-height: 1.3;
}
.text-container h5 {
  font-size: clamp(1.2em, 4vw, 2em);
  font-family: var(--font1);
  color: var(--dkblue);
  padding-bottom: 0px;
  line-height: 1.3;
}
.text-container h6 {
  font-size: clamp(1.2em, 4vw, 2em);
  font-family: var(--font1);
  color: var(--secondary);
  padding-bottom: 0px;
  text-transform: uppercase;
  margin: 0;
}
/* sidebar navigation sticky*/
.text-container .sidebar-menu {
  position: sticky;
  top: 104px;
}
/* assigned to two-columns for backgr*/
.blue-bg {
  background-color: var(--light);
  border-radius: 50px;
  margin: 20px;
  width: 98%;
}
/* clip text to gradient */
.text-container .number-feature h2 {
  font-size: 6em;
  font-weight: 800;
  background-image: linear-gradient(to right, #6D60AA, #5FCBEA);
  -webkit-background-clip: text;
  /* For WebKit browsers like Chrome, Safari */
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* For WebKit browsers */
  color: transparent;
  /* For other browsers */
}
.photocaption p {
  font-size: 12px;
  margin: 0px;
}
.photocredit p {
  font-size: 12px;
  text-transform: uppercase;
}
.callout p {
  text-wrap: pretty;
  font-size: clamp(1rem, 1.25rem, 1.25rem);
  font-family: var(--font2);
  margin-top: var(--spacing-medium);
  margin-bottom: var(--spacing-medium);
  padding: var(--spacing-medium);
  border-radius: 20px;
  border: 6px solid var(--accent);
}
.text-container .footer-text {
  font-size: 14px;
}
/* header with squares */
.bg-header {
  min-height: 100px;
  margin-top: -100px;
}
/* title box  - photo in bg */
.title-box {
  min-height: 180px;
}
/* title text - hold text  */
.title-text h3 {
  font-size: clamp(1.5rem, 4.25rem, 2.5rem);
  color: var(--secondary);
  text-transform: uppercase;
}
/* for bullets */
/* for bullets - indent */
.text-container .left-column .elementor-widget-text-editor ul,
.text-container .full-column .elementor-widget-text-editor ul {
  margin-top: 0px;
  margin-bottom: 0px;
  display: inline-block;
  list-style: inside none;
  margin-left: 0px;
  text-indent: -20px;
  margin-bottom: 10px;
}
/* bullet */
.text-container .left-column .elementor-widget-text-editor ul li::before,
.text-container .full-column .elementor-widget-text-editor ul li::before {
  font-family: var(--font1);
  font-weight: 900;
  content: "•";
  color: var(--primary);
  padding-right: 15px;
}
/* li */
.text-container .left-column .elementor-widget-text-editor ul li,
.text-container .full-column .elementor-widget-text-editor ul li {
  font-family: var(--font2);
  font-size: clamp(1rem, 1.25rem, 1.25rem);
  padding-bottom: 10px;
  color: var(--primary);
}
.arrow-up,
.arrow-down,
.arrow-top {
  font-family: var(--font1);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 20px;
  border-radius: 50px;
  color: var(--secondary);
  background-color: var(--accent);
  padding: 5px 10px 5px 10px;
}
.arrow-up:hover,
.arrow-down:hover,
.arrow-top:hover {
  color: var(--accent);
  background-color: var(--secondary);
}
/* reverse type  */
.text-container .white h1,
.text-container .white h2,
.text-container .white h3,
.text-container .white h4,
.text-container .white p,
.text-container .left-column .elementor-widget-text-editor.white ul li {
  color: white;
}
.text-container .left-column .elementor-widget-text-editor.white ul > li::before {
  font-family: var(--font1);
  font-weight: 900;
  content: "•";
  color: #FFF;
  padding-right: 15px;
}
/* layout containers - classes applied in ele */
.spacer {
  height: var(--spacing-extra-large);
}
.text-container {
  padding: 0px;
}
.text-container-top {
  padding: 0px;
  padding-top: var(--spacing-large);
}
.two-columns {
  padding-left: var(--spacing-large);
}
.full-column {
  width: 100%;
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
}
.left-column {
  width: 66%;
  padding-top: var(--spacing-large);
  padding-bottom: var(--spacing-large);
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
}
.left-column-top {
  width: 66%;
  padding-top: 0;
  padding-bottom: var(--spacing-medium);
  padding-left: var(--spacing-large);
}
.right-column {
  width: 33%;
  padding-top: var(--spacing-large);
  padding-bottom: var(--spacing-large);
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
}
.right-column-top {
  padding-top: 0;
  padding-bottom: var(--spacing-medium);
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
}
.column-title {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
}
.four-column {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--spacing-medium-2);
  padding-right: var(--spacing-medium-2);
}
.small-column {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
}
.hero {
  padding: 0px;
}
.hero-overlay {
  width: 42%;
  margin-top: var(--spacing-large);
  margin-bottom: var(--spacing-large);
  margin-right: var(--spacing-large);
}
.page-title {
  padding: 0px;
}
.page-title-overlay {
  width: 42%;
  margin-top: var(--spacing-large);
  margin-bottom: -60px;
  margin-right: var(--spacing-large);
  margin-left: var(--spacing-large);
  padding-top: var(--spacing-large);
  padding-bottom: var(--spacing-large);
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
}
/* gradient fill*/
.gradient-fill {
  background: #6D60AA;
  background: linear-gradient(90deg, #6d60aa 0%, #5fcbea 100%);
}
/* above footer graphic */
.bg-graphic-feature-top {
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 50%;
  background-image: url('https://dev.asbareports.ca/wp-content/uploads/2025/08/bg-squares.svg');
}
.bg-graphic-feature-bottom {
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: 50%;
  background-image: url('https://dev.asbareports.ca/wp-content/uploads/2025/08/bg-squares.svg');
}
.bg-graphic-feature-right {
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: 200%;
  background-image: url('https://dev.asbareports.ca/wp-content/uploads/2025/08/bg-squares.svg');
}
/* exec image container */
.exec-photo {
  padding: 0px;
  border-radius: 20px;
  overflow: hidden;
  width: 200px;
  height: 240px;
}
/* feature image container - place image as background */
.image-feature {
  border-radius: 20px;
  overflow: hidden;
  padding: 0px;
}
/* feature images */
.image-container {
  padding-bottom: var(--spacing-medium);
  width: 100%;
}
.image-container img {
  border-radius: 20px;
  width: 100%;
}
/* feature button ----------------------------*/
.button1 a {
  font-family: var(--font1);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 28px;
  border-left: solid 12px black;
}
.button1 a:hover {
  background: var(--accent);
  border-left: solid 0px black;
  border-right: solid 12px black;
}
/* feature button rounded ----------------------------*/
.button2 a {
  font-family: montserrat;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 28px;
  border-radius: 50px;
  background-color: var(--accent);
}
.button2 a:hover {
  background-color: var(--secondary);
}
/* logos */
/* SPONSOR LOGOS - assigned to container*/
.sponsor-logo-level-2 {
  width: 100%;
}
/* SPONSOR LOGOS - assigned to container*/
/* ANIMATIONS - base*
Add class .animation-element to any element to be animated only in window/

/* Code to add 'in-view' class in code snippets
JS to detect on page elements is in JS widget on the page 
*/
@keyframes entry-fade-up {
  0% {
    transform: translate(0px, 30px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes entry-fade-down {
  0% {
    transform: translate(0px, -60px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes entry-fade-right {
  0% {
    transform: translate(-60px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes entry-fade-right-long {
  0% {
    transform: translate(-500px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes entry-fade-right-map {
  0% {
    transform: translate(-60px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes entry-fade-left {
  0% {
    transform: translate(60px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes entry-fade-left-long {
  0% {
    transform: translate(500px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes entry-fade-left-map {
  0% {
    transform: translate(60px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes entry-fade-in {
  0% {
    transform: translate(0px, 20px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes entry-default {
  0% {
    transform: translate(0px, 20px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
/* CALL animations. 
Add .animated-element class to element that will animate
Then add animation type to element. In ele css class: 
animation-element entry-fade-up
*/
/* The default entrance animation assigned to sections */
.entry-default.in-view {
  animation-name: entry-default;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 00ms;
}
.entry-fade-up.in-view {
  animation-name: entry-fade-up;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 500ms;
}
.entry-fade-down.in-view {
  animation-name: entry-fade-down;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 500ms;
}
.entry-fade-right.in-view {
  animation-name: entry-fade-right;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 200ms;
}
.entry-fade-right-long.in-view {
  animation-name: entry-fade-right;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 500ms;
}
.entry-fade-right-500.in-view {
  animation-name: entry-fade-right;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 500ms;
}
.entry-fade-left.in-view {
  animation-name: entry-fade-left;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 500ms;
}
.entry-fade-left-long.in-view {
  animation-name: entry-fade-left;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 500ms;
}
.entry-fade-left-1000.in-view {
  animation-name: entry-fade-left;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 500ms;
}
.entry-fade-left-1000.in-view {
  animation-name: entry-fade-left;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 1000ms;
}
.entry-fade-in.in-view {
  animation-name: entry-fade-in;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
.entry-fade-in-500.in-view {
  animation-name: entry-fade-in;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 500ms;
}
.entry-fade-in-1000.in-view {
  animation-name: entry-fade-in;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 1000ms;
}
/* anchor offsets */
#box1,
#box2,
#box3,
#box4,
#box5,
#box6,
#box7,
#box8,
#box9,
#box10 {
  display: block;
  position: relative;
  top: -100px;
}
/* MENU */
.elementor-menu-toggle {
  padding-top: 20px;
}
.elementor-menu-toggle .eicon-menu-bar:before {
  font-family: "Mulish";
  font-weight: 900;
  content: "MENU";
}
.elementor-menu-toggle.elementor-active i:before {
  font-family: "Mulish";
  font-weight: 900;
  content: 'CLOSE';
}
.elementor-nav-menu__container {
  width: 300px;
}
.elementor-nav-menu--dropdown .elementor-nav-menu__container {
  width: 300px;
}
@media (max-width: 1300px) {
  :root {
    /* add spacing to column containers for smaller screens */
    --spacing-small: 20px;
    --spacing-large: 20px;
    --spacing-medium-2: 0px;
    /* adjust left col spacing*/
    --spacing-extra-large: 60px;
    --neg-spacing-large: -40px;
    --hero-height: 500px;
    --spacing-extra-large: 100px;
  }
}
@media (max-width: 768px) {
  :root {
    /* add spacing to column containers for smaller screens */
    --spacing-small: 10px;
    /* make single column */
  }
  :root .right-column {
    width: 100%;
  }
  :root .left-column {
    width: 100%;
  }
  /* SPONSOR LOGOS - assigned to container*/
}
@media (max-width: 800px) {
  .bg-graphic-feature-right {
    background-image: none;
  }
}