@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

:root {
  /* Main colors */
  --card-background: #E0EFD2;
  --card-text-color: #2c2c2c;
  --background-color: #fff;
  --foreground-color: #2c2c2c;
  --theme-color: #036eb7;
  --btn-foreground: #fff;
  --btn-background: #036eb7;
  --overlay: #036eb7;
  --overlay-percentage: 70%;
  /* Text Elements */
  --body-font: "Nunito Sans", sans-serif;
  /* --body-font-size: 16px; */
  /* --body-letter-spacing: .02em; */
  /* --body-line-height: 1.5; */
  --body-font-weight: 300;
  /* --text-shadow: 1px 1px 3px hsla(0, 0%, 0%, .6); */

  /* --paragraph-margin-block-end: .72em; This is for lists and paragraphs  */

  /* --h1-font: inherit; */
  /* --h1-font-size: 2em; */
  --h1-font-weight: 400;
  /* --h1-font-letter-spacing: .02em; */
  /* --h1-margin-block-end: .5rem; */

  /* --h2-font: inherit; */
  /* --h2-font-size: 1.5em; */
  --h2-font-weight: 400;
  /* --h2-font-letter-spacing: .02em; */
  /* --h2-margin-block-end: .5rem; */

  /* --h3-font: inherit; */
  /* --h3-font-size: 1.17em; */
  --h3-font-weight: 400;
  /* --h3-font-letter-spacing: .02em; */
  /* --h3-margin-block-end: .5rem; */

  /* --h4-font: inherit; */
  /* --h4-font-size: inherit; */
  --h4-font-weight: 400;
  /* --h4-font-letter-spacing: .02em; */
  /* --h4-margin-block-end: .5rem; */

  /* --title-font: inherit; */
  /* --title-font-size: clamp(1.625em, 3vw, 2.4em) */
  --title-font-weight: 400;
  /* --title-font-letter-spacing: .02em; */
  /* --title-font-transform: unset; */
  --title-margin-block-end: .3em;

  /* --subtitle-font: inherit; */
  --subtitle-font-weight: 400;
  --subtitle-font-size: 1rem;
  /* --subtitle-font-letter-spacing: .2em; */
  --subtitle-font-transform: uppercase;
  --subtitle-margin-block-end: .2em;

  /* events, bio, teams, carousel do you want this as a class? */
  /* --secondary-header-font-size: 0.875em; */
  /* --secondary-header-font-weight: 300 */
  /* --secondary-font-letter-spacing: .1em; */
  /* --secondary-header-transform: uppercase; */

  /* Links */
  /* --link-icon-dimension: 1em; */

  /* buttons */
  --btn-icon-dimension: 1.25em;

  /* Social Media Icons */
  /* --social-icon-padding-Y: .5em; */
  /* --social-icon-padding-X: .5em; */
  /* --social-icon-border-width: 1px; */
  /* --social-icon-border-radius: 0; */

  /* Media */
  /* --iframe-aspect-ratio: 16 / 9; */

  /* A11y Focus Outline */
  /* --outline-style: solid; */
  /* --outline-width: 2px; */
  /* --outline-color: currentColor; */

  /* Section padding */
  /* --content-width: 1100px; */
  /* --section-block-padding: clamp(40px, 5vw, 60px); */

  /* Grid */
  --grid-gap-block: 2em;
  --grid-gap-inline: 2em;

  /* Disclaimer class="container--disclaimer" */
  /* --disclaimer-font-size: .875rem; */
  /* --disclaimer-top-padding: 2.8em; */

  /* Form Elements */
  /* --input-font-size: 1em; */
  /* --input-padding-inline: .9em; */
  /* --input-padding-block: .9em; */
  --input-border-radius: 4px;
  /* --input-border-width: 2px; */
  /* --input-border-style: solid; */

  /* Card Style */
  --card-padding-block: 32px;
  /* --card-padding-block: 16px; Desktop Padding */
  --card-border-style: solid;
  --card-border-width: 2px;
  /* --card-border-radius: unset; */
  /* --global-box-shadow-x: 0; */
  --global-box-shadow-y: 0;
  --global-box-shadow-blur: 0;
  --global-box-shadow-spread: 0;
  --global-box-shadow-color-percent: 0;

  /* Navigation */
  /* --header-block-padding: 14px; */
  /* --header-inline-padding: 25px; */
  /* --navigation-logo-width: 245px; */
  /* --navigation-toggle-width: 2em; */
  /* --navigation-toggle-height: 1.5em; */
  /* --navigation-toggle-line-height: 4px; */
  /* --navigation-toggle-line-radius: 4px; */
  /* --navigation-dropdown-icon-width: .6em; */
  /* --navigation-dropdown-icon-height: .6em; */
  /* --navigation-font-size: inherit; */
}

section,
footer,
header {
  /* --h1-color: var(--foreground-color, #000); */
  /* --h2-color: var(--foreground-color, #000); */
  /* --h3-color: var(--foreground-color, #000); */
  /* --h4-color: var(--foreground-color, #000); */

  /* --title-color: var(--theme-color, #000); */
  /* --subtitle-color: var(--foreground-color, #000); */

  /* Links */
  /* --link-color: var(--theme-color, #000); */

  /* --social-icon-border-color: color-mix(in srgb, var(--theme-color, #000) 20%, transparent); */
  /* --social-icon-background: transparent; */

  /* Media */
  /* --icon-color: var(--foreground-color, #000); */

  /* Disclaimer class="container--disclaimer" */
  /* --disclaimer-color: color-mix(in srgb, var(--foreground-color, #000) 80%, var(--background-color, #fff)); */

  /* Form Elements */
  --input-border-color: color-mix(in srgb, var(--foreground-color, #000) 90%, transparent);
  --input-background-color: #fff;
  /* --input-color: var(--foreground-color, #000); */

  /* Card Style */
  --card-border-width:0;
  --global-box-shadow-color: transparent;
}

.mode--dark {
  --background-color: color-mix(in srgb, var(--theme-color) 20%, #FFF);
}

.mode--color {
  --foreground-color: #fff;
  --background-color: #036eb7;
  --theme-color: #fff;
  --btn-foreground: #036eb7;
  --btn-background: #fff;

  [data-col-style="card"] .col,
  .content--card {
    --foreground-color: #2c2c2c;
    --theme-color: #036eb7;
    --btn-foreground: #fff;
    --btn-background: #036eb7;
    --input-border-color: color-mix(in srgb, var(--foreground-color, #000) 60%, transparent);
  }
}

.background--media.overlay {
  --foreground-color: #fff;
  --theme-color: #fff;

  &::before {
    backdrop-filter: grayscale(70%);
  }
}

.btn {
  font-family: inherit;
  font-weight: 300;
  word-spacing: inherit;
  letter-spacing: .02em;
  padding-block: .6em;
  padding-inline: 2em;
  border-style: solid;
  border-width: 3px;
  border-radius: 50px;
  border-color: var(--btn-border-color, transparent);
  transition: all var(--animation-speed, 240ms) ease-in;

  &:hover,
  &:focus {
    --btn-foreground: var(--theme-color);
    --btn-border-color: var(--theme-color);
    --btn-background: color-mix(in srgb, var(--theme-color) 8%, transparent);
  }
}

.col:has(>.corner-link) {

  .corner-link {
    padding: 10px;
    cursor: pointer;
    color: var(--btn-foreground);
    background-color: var(--theme-color);
  }
}

[data-col-style="1"] .col,
.col-style-1 {
  position: relative;
  padding: 1em 2em;
}

.col:has(blockquote) {
  --header-font-weight: 400;
  --quote-font-size: 1.875rem;
  --line-height: 1.2;
  --quote-icon-dimensions: 45px;
  text-align: center;

  .container--icon {

    svg {
      fill: var(--theme-color);
    }
  }
}

/* Hero Slider */
.section--hero {
  .container--viewport,
  .container--col,
  .col,
  img {
    min-height: inherit;
   }


  .col:not(.container--media) {
    padding-block:75px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;

    @container (width<=649px) {
      padding-block: 75px 25px;
    }
  }

  .container--col {
    background-color: color-mix(in srgb, var(--theme-color) 20%, transparent);
  }

  .background--transparent {

    .subtitle {
      color: #000;
      background: color-mix(in srgb, var(--background-color) 65%, transparent);
      text-shadow: none;
      backdrop-filter: blur(4px);
    }
  }

  .container--content {
    padding-inline: max(16px, 50vw - var(--content-width, 1100px) / 2);

    * {
      max-width: 60ch;
    }
  }

  .col:not(.container--media) {

    &:is(:first-child) {
      padding-inline-start: 40px;

      @container (width <=650px) {
        padding-inline: 16px;
      }

      @container (width >=650px) {
        max-width: 45ch;
        justify-self: end;
      }
    }

    &:is(:last-child) {
      padding-inline-end: 40px;

      @media (width <=700px) {
        padding-inline: 16px;
      }

      @container (width >=650px) {
        max-width: 45ch;
      }
    }
  }

  .slick-controls {
    top: 20px;

    button {
      width: 35px;
      height: 35px;
      border-radius: 5px;
      background: var(--btn-background);
      color:var(--btn-foreground);
      transition: var(--animation-speed, 240ms) ease-in;
      backdrop-filter: blur(4px);
      border: 2px solid var(--btn-background);
      outline-color:var(--btn-background);


      &:hover,
      &:focus {
        background: color-mix(in srgb, var(--btn-background) 20%, #FFF);

        svg {
          fill:var(--btn-background);
        }
      }

      svg {
        fill: #fff;
        width: 20px;
        height: 20px;
        transition: var(--animation-speed, 240ms) ease-in;
      }
    }
  }

  .slick-dots {

    li {
      opacity: 0.75;
      width: 4%;

      &:hover,
      &:focus {
        opacity: 1
      }

      &.slick-active {
        opacity: 1;
      }

      button {
        background: #fff;
        height: 6px;
        border: 1px solid var(--theme-color, #000);
      }
    }
  }

  .slick-arrow {
    top: 37px;
    width: 35px;
    height: 35px;
    border-radius: 5px;
    background: var(--btn-background);
    color:var(--btn-foreground);
    backdrop-filter: blur(4px);
    border: 2px solid var(--btn-background);
    outline-color:var(--btn-background);

    @media (width >=1050px) {
      top: 50%;
      transform: translateY(-50%);
    }

    &:hover,
    &:focus {
      background: color-mix(in srgb, var(--btn-background) 20%, #FFF);

      svg {
        fill: var(--btn-background);
      }

    }


    &.slick-prev {
      transform: translateY(-50%) rotate(180deg);
      left: max(102px, (50vw - 1325px / 2) + 198px);

      @media (width >=1050px) {
        left: max(16px, 50vw - var(--content-width, 1100px) / 2);
      }
    }

    &.slick-next {
      left: max(144px, (50vw - 1325px / 2) + 240px);

      @media (width >=1050px) {
        left: unset;
        right: max(16px, 50vw - var(--content-width, 1100px) / 2);
      }
    }

    svg {
      fill: #fff;
      width: calc(var(--slider-button-icon-width, 20px) * .8);
      height: calc(var(--slider-button-icon-height, 20px) * .8);
    }
  }
}

/* Slick Carousel Buttons */

.container--carousel {

  .slick-prev,
  .slick-next {
    width: 35px;
    height: 35px;
    border-radius: 5px;
    background: var(--btn-background);
    backdrop-filter: blur(4px);

    &.slick-disabled {
      opacity: .3;
    }

    &:hover,
    &:focus {
      background: color-mix(in srgb, var(--theme-color), transparent 20%);

      .container--icon {
        svg {
          fill: var(--btn-foreground);
        }
      }
    }

    .container--icon {
      height: 1em;
      width: 1em;

      svg {
        fill: var(--btn-foreground);
        width: 1em;
        height: 1em;
      }
    }
  }
}

[data-design="tabs"] {

  a,
  [tabindex="0"] {

    &:focus {
      outline-offset: -6px;
    }
  }

  .slick-prev,
  .slick-next {
    height: 100%;
  }

.slide-list {
  .slick-list {
    margin-inline-start: 2.3em;
    margin-inline-end: 2.3em;
    background-color: var(--card-background);
    box-shadow: var(--global-box-shadow-x, 0) var(--global-box-shadow-y, 10px) var(--global-box-shadow-blur, 30px) var(--global-box-shadow-spread, -10px) color-mix(in srgb, var(--global-box-shadow-color, #212326) var(--global-box-shadow-color-percent, 30%), transparent);
  }
}

  .slide-content {
    padding: 1em 2em;
    color: var(--foreground-color);
    background-color: var(--card-background);
    border-right: 1px solid color-mix(in srgb, var(--foreground-color) 25%, transparent);
  }

  .slick-current .slide-content {
    color: var(--btn-foreground);
    background-color: var(--btn-background);
  }
}

[data-design="carousel--links"],
[data-design="carousel--tabs"] {

  .slide-list {
    padding-block-start: 3em;
  }

  .slick-prev,
  .slick-next {
    border-radius: 5px;
    top: 0;
    background-color: var(--btn-background);
    transform: none;

    svg {
      fill: var(--btn-foreground);
    }
  }

  .slick-prev {
    right: 48px;
  }
}

/* accordion */

details {
  border-bottom: 1px solid color-mix(in srgb, var(--foreground-color) 25%, transparent);
  padding-block: .6em;
}

summary {
  font-weight: 600;
  font-size: 1.25em;
  padding-block-end: .6em;
}

/* Blog */
.blog--top-controls {

  .btn[type="submit"] {
    border-radius: 5px;
  }
}

/* Custom some Sections */

.statistic--title {

  .count,
  .match-count {
    font-size: clamp(1.25em, 4vw, 3em);
  }
}