@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* #region main */
:root {
  --blue: #3B67F5;
  --blue-contrast: #5688ED;
  --black: #000;
  --gray: #636363;
  --small: 32px;
  --medium: 48px;
  --large: 64px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  display: block;
}

body {
  margin: 0;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  color: var(--gray);
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 135%;
}

body.hamburger-menu--active {
  overflow: hidden;
}


a {
  color: var(--blue);
  text-decoration-line: underline;
}

blockquote {
  color: var(--black);
  text-align: center;
  font-family: Rubik, sans-serif;
  font-size: 42px;
  font-style: normal;
  font-weight: 700;
  line-height: 135%;
  margin-bottom: 0;
}

blockquote p {
  margin-bottom: 0;
}

h2,
h3,
h4 {
  color: var(--black);
  font-family: Rubik, sans-serif;
  font-style: normal;
  font-weight: 600;
  line-height: 115%;
  margin-bottom: 10px;
  margin-top: 0px;
}


h2 {
  font-size: 42px;
}

h2 strong {
  color: var(--blue);
  font-style: normal;
  font-weight: 600;
}

h3 {
  font-size: 32px;
  font-weight: 400;
  margin-top: 10px;
  margin-bottom: var(--small);
}

h4 {
  font-size: 28px;
  font-weight: 500;
  line-height: 110%;
  margin-top: 24px;
}

ul {
  margin: 0;
}

li p {
  margin: 0;
}

/* #endregion */

/* #region layout */
header {
  z-index: 9999;
}

.site-container {
  width: 100%;
  max-width: 1095px;
  margin: 0 auto;
  padding: 0 var(--small);
}

.site-header__inner {
  display: flex;
  justify-content: space-between;
  gap: var(--medium);
  padding-top: var(--large);
}

.logo {
  display: flex;
  margin-right: var(--large);
  z-index: 2;
}

.header-lottie-player {
  width: 124px;
  height: 158px;
}

.main-nav {
  display: flex;
  justify-content: flex-start;
  gap: var(--medium);
  color: #000;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  align-self: flex-start;
}

.hamburger-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 50px;
  padding-top: 200px;
  box-sizing: border-box;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

.hamburger-nav a {
  display: block;
  margin-bottom: var(--medium);
  color: #000;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  text-align: center;
  text-decoration: none;
}

.hamburger-nav .hamburger-dots-container {
  justify-content: center;
  display: flex;
  margin-top: var(--large);
}

.hamburger-menu--active .hamburger-nav {
  display: block;
}

.main-nav a {
  transition: color 0.2s ease;
  white-space: nowrap;
  color: #000;
  text-decoration: none;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--blue);
  font-size: 24px;
  font-style: normal;
  line-height: 110%;
}

.header-image {
  display: flex;
}

.header-home-image {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
}

.hamburger-menu--active .menu-toggle {
  display: flex;
  align-items: center;
}

.hamburger {
  display: block;
  width: 40px;
  height: 32px;
  cursor: pointer;
  -webkit-touch-callout: none;
}

.hamburger span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: var(--blue-contrast);
  border-radius: 3px;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}

.hamburger span:first-child {
  transform-origin: 0% 0%;
}

.hamburger span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

.hamburger-menu--active .hamburger span {
  opacity: 1;
  transform: rotate(45deg) translate(1px, 0px);
}

.hamburger-menu--active .hamburger span:nth-last-child(2) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

.hamburger-menu--active .hamburger span:nth-last-child(1) {
  transform: rotate(-45deg) translate(-4px, 0px);
}

main {
  padding-bottom: var(--medium);
}

.contact {
  margin-top: var(--large);
}

.contact__info a {
  text-decoration: none;
}

.contact__info strong {
  color: #000;
  font-size: 24px;
  font-weight: 600;
}

.contact__info img {
  margin: auto;
}

.contact__content {
  margin-top: var(--large);
}

.contact__partners {
  margin-top: var(--large);
}

.site-footer-container {
  overflow: hidden;
  margin-bottom: -250px;
}

.site-footer {
  margin-top: var(--large);
  background: linear-gradient(180deg, rgba(125, 184, 226, 0.11) 0%, rgba(57, 101, 245, 0.11) 100%);
  transform: rotate(-178deg);
  flex-shrink: 0;
}

.site-footer__inner {
  transform: rotate(178deg);
  display: flex;
  flex-direction: column;
  padding-top: var(--medium);
  padding-bottom: 20px;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: var(--large);
}

.footer-logo__image {
  flex: 1 1 33.333%;
  max-width: 360px;
  height: auto;
  box-sizing: border-box;
}

.footer-dots {}

.footer-contact {
  font-size: 21px;
  font-style: normal;
  font-weight: 400;
  line-height: 134%;
}

.footer-contact strong {
  color: #000;
  font-size: 24px;
  font-weight: 600;
  box-sizing: border-box;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--medium);
  font-size: 16px;
  color: var(--gray);
}

.site-footer a {
  color: var(--gray);
  text-decoration: none;
}

.site-footer a:hover {
  color: #374151;
}

/* #endregion */
/* #region color dots */
.color-dots {
  display: inline-flex;
  gap: 6px;
}

.color-dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.color-dots span:nth-child(1) {
  background: #f472b6;
}

.color-dots span:nth-child(2) {
  background: #fb923c;
}

.color-dots span:nth-child(3) {
  background: #6ee7b7;
}

.color-dots span:nth-child(4) {
  background: #60a5fa;
}

.color-dots span:nth-child(5) {
  background: #a78bfa;
}

/* #endregion */
/* #region templates */
.home {
  max-width: 700px;
  padding: 50px 0 0px;
  margin-bottom: 150px;
}

.blog {
  padding: 50px 0 0px;
  margin-bottom: var(--large);
}

.section__intro {
  text-align: center;
  max-width: 530px;
  margin: 0 auto 20px;
}

.section__intro h2,
.section__intro h3 {
  font-size: 2rem;
  color: var(--blue);
  margin: 8px 0;
}

.section__intro h2 {
  margin-top: var(--small);
}

.section__intro p {
  color: #4b5563;
  margin: 0;
}

/* Cards: either 3-in-row or stacked 1-column (never 2-in-row) */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  /* default: stacked */
  gap: 24px;
  margin-top: var(--medium);
  margin-bottom: var(--medium);
}

/* visual/card internals */
.cards article {
  display: block;
  background: var(--card-bg, #fff);
  overflow: hidden;
}

.cards--extra-space article {
  margin-bottom: var(--small);
}

/* make images responsive */
.cards .card__visual img,
.cards article img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.card__body p {
  color: #636363;
  font-size: 21px;
  font-style: normal;
  font-weight: 400;
  line-height: 135%;
  margin: 16px 0;
}

.card__link {
  color: #E47F73;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 135%;
  text-transform: uppercase;
  text-decoration: none;
}

.clients {
  margin: var(--large) 10px;
}

.clients__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  text-transform: uppercase;
  color: #6b7280;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  transform: rotate(-3deg);
}

.testimonials {
  gap: 24px;
  margin-top: var(--medium);
  display: flex;
  align-items: stretch;
}

.swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  /* align-items: flex-start; */
  gap: 10px;
  /* flex: 1 0 0; */
  align-self: stretch;
  background: #F4F4F4;
  padding-bottom: 32px;
  width: 33%;
}

.testimonial-card img {
  width: 100%;
  /* align-self: stretch; */
}

.swiper-wrapper .swiper-slide {
  height: unset;
}

.swiper-wrapper {
  align-items: stretch;
}

.testimonial-card .quote-title {
  color: #3B67F5;
  font-family: Rubik;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
  margin-top: var(--small);
}

.testimonial-card p {
  color: #636363;
  font-size: 21px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

.quote {
  padding: 0 var(--small);
}

.testimonial-card .quote-name {
  color: #000;
  font-size: 21px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}

.testimonial-card .quote-tag_line {
  color: #000;
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

.two-column-layout {
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
  justify-content: space-between;
  grid-column-gap: 64px;
  margin-top: var(--medium);
  margin-bottom: 100px;
  width: 100%;
}

.two-column-layout__main {
  max-width: 50%;
  margin-bottom: var(--small);
}

.two-column-layout__image {
  margin-bottom: var(--large);
}

.two-column-layout__second h2 {
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
}

.feature-text {
  text-align: center;
  margin: auto;
  max-width: 780px;
  margin-bottom: var(--large);
}

.featured-training {
  margin-top: var(--medium);
  padding: var(--medium);
  padding-bottom: 12px;
  background: #E9EFF9;
  color: #000;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
}

.row {
  margin: 0;
}

.label {
  color: #6e6e6e;
  margin: 0;
}

.value {
  font-weight: 600;
  margin: 0;
}

.divider {
  width: 100%;
  height: 1px;
  background: #B3B3B3;
  background: linear-gradient(90deg, rgba(179, 179, 179, 1) 0%, rgba(255, 255, 255, 1) 100%);
  margin: 10px 0;
}

.cta {
  text-decoration: none;
  display: block;
  margin-top: 32px;
  background: #d97969;
  color: white;
  padding: 10px 10px;
  border: none;
  font-size: 21px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

.cta:hover {
  opacity: 0.9;
}

.subcta {
  text-decoration: none;
  display: block;
  margin-top: 24px;
  padding: 10px 10px;
  background: none;
  border: none;
  color: #d97969;
  font-weight: 500;
  font-size: 21px;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

.subcta:hover {
  opacity: 0.8;
}

/* #endregion */


@media (min-width: 820px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .cards.cards--blog {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact {
    overflow: hidden;
  }

  .contact__info {
    width: calc(50% - var(--large)/2);
    float: right;
  }

  .contact__content {
    width: calc(50% - var(--large)/2);
    float: left;
    margin-top: 0;
    margin-right: var(--large);
  }

  .contact__partners {
    width: calc(50% - var(--large)/2);
    float: right;
  }
}

@media (max-width: 990px) {
  .home {
    margin-bottom: var(--large);
  }

  .two-column-layout {
    margin-bottom: var(--large);
    flex-direction: column;
  }

  .two-column-layout__main {
    max-width: 100%;
  }

  .site-header {
    position: sticky;
    top: 0;
    background: transparent;
    /* transition: all 200ms ease;
    Gradients don't support transitions yet (although the current spec says they should support like gradient to like gradient transitions via interpolation.).

If you want a fade-in effect with a background gradient, you have to set an opacity on a container element and 'transition` the opacity. */
  }

  /* when scrolled add the gradient */
  .site-header.scrolled {
    background: linear-gradient(180deg, #FBFBFB 60%, rgba(251, 251, 251, 0.00) 100%);
  }

  .site-header__inner {
    grid-template-columns: 1fr auto;
    gap: 20px;
  }

  .site-header__inner {
    padding-top: 38px;
  }

  .header-image {
    display: none;
  }

  .header-lottie-player {
    width: 76px;
    height: 97px;
  }

  .header-home-image {
    width: 183px;
    height: 396px;
  }

  .main-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
  }

  .site-footer__top {
    flex-direction: column;
  }

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

  .footer-contact img {
    margin: auto;
  }

  .footer-meta {
    flex-direction: column;
    gap: 9px;
  }
}