.clg-page-min-height {
  min-height: 100vh;
}

.clg-header {
  position: sticky;
  top: 0;
  z-index: 1010;
}

.clg-header,
.clg-hero-container,
.clg-container,
#clg-footer {
  box-sizing: border-box;
}

.clg-container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1280px) {
  .clg-container {
    flex-direction: row; /* xl screens */
  }
}

.clg-footer-inner-wrapper {
  box-sizing: content-box;
}

.clg-hero-container {
  width: 100%;
  padding-left: 0.5rem /* 8px */;
  padding-right: 0.5rem /* 8px */;
  grid-column: span 8 / span 8;
}

.clg-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  align-self: stretch;
  border-radius: 1.25rem;

  height: 376px;
}

.clg-hero-image {
  background-image: linear-gradient(
      180deg,
      rgba(51, 58, 68, 0.6) 0%,
      rgba(51, 58, 68, 0.54) 0.01%,
      rgba(51, 58, 68, 0.24) 100%
    ),
    url("/assets/img/hero_home.jpg");
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: lightgray;
  background-blend-mode: multiply, normal;
}

.clg-hero-horizontal-container {
  margin-left: auto;
  margin-right: auto;
}

.clg-hero-horizontal {
  max-width: 1280px;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-direction: column;
  width: 100%;

  margin-bottom: 4rem;
}

.clg-hero-horizontal-orders {
  margin-bottom: 1.25rem;
}

.clg-svg-color-clg-primary {
  /* color of #2E3A49 */
  filter: invert(20%) sepia(20%) saturate(719%) hue-rotate(173deg) brightness(94%) contrast(91%);
}

.clg-brand-selection {
  justify-content: flex-end;
}

.clg-brand-selection-columns {
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(224 227 233 / 1); /* clg-gray-200 */
  box-shadow: 0px 20px 80px -4px rgba(51, 58, 68, 0.16);
  padding-bottom: 1.5rem;
}

.clg-brand-selection-rows {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  align-items: center;
  font-weight: 600;
}

.clg-brand-selection-headline-img {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
}

.clg-brand-selection-headline-text {
  display: inline-block;
  /* text-body-small */
  font-size: 0.875rem /* 14px */;
  line-height: 1.5rem /* 24px */;
}

.clg-brand-selection-container {
  padding-left: 2rem;
  padding-right: 2rem;
}

.clg-brand-selection-items {
  gap: 0.75rem /* 12px */;
  display: flex;
  flex-wrap: wrap;
}

.clg-brand-selection-button {
  display: inline-block;
  background-color: transparent;
  border-radius: 0.75rem;
  border-width: 0;

  transition-property: all;
  transition-timing-function: ease-out;
  transition-duration: 300ms;

  /* outline-none */
  outline: 2px solid transparent;
  outline-offset: 2px;
  width: 3rem;
  height: 3rem;
}

.clg-brand-selection-button img {
  width: 100%;
  height: 100%;
}

.clg-brand-selection-button:hover {
  background-color: #e5ecf4; /*  bg-clg-secondary */
}

.clg-hero-content {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 0.5rem;
  justify-content: flex-end;
}

.clg-hero-content h1 {
  margin: 0;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2.25rem;
}

.clg-hero-content p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.clg-px-indent {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.clg-footer-top-margin {
  margin-top: 0;
}

.clg-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.clg-min-margin {
  width: calc(100vw - 56px);
}

.clg-hero-horizontal {
  width: calc(100vw - 80px);
}

.clg-min-margin-vertical {
  margin: 48px 20px 56px;
}

.clg-footer-margin {
  margin-top: 0;
}

html {
  color: #333a44;
  font-family: Manrope;
  font-weight: 400;
}

body {
  background-color: #f6f7f8;
  overflow-x: hidden !important;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: column;
  margin: 0;
}

::selection {
  text-shadow: none;
  background-color: #2e3a49;
  color: #ffffff;
}

::-moz-selection {
  text-shadow: none;
  background-color: #2e3a49;
  color: #ffffff;
}

.clg-min-margin {
  margin-left: auto;
  margin-right: auto;
}

.clg-inner-container {
  min-height: 400px;
  border-radius: 20px;
  margin-left: auto;
  margin-right: auto;
}

.clg-footer-inner-wrapper {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.clg-footer-inner-wrapper-links {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.clg-footer-button > li {
  display: inline-flex;
}

.clg-footer-link > li {
  display: inline-flex;
}

.clg-footer-inner-wrapper > img {
  padding-top: 0;
  padding-bottom: 0;
}

[id="clg-footer"] {
  width: 100%;
  display: block;
}

.clg-footer-wrapper {
  background-color: #ffffff;
  max-width: 100%;
  height: auto;
  padding: 1.5rem;
}

.clg-footer-button > li > a {
  text-decoration: none;
  color: #333a44;
}

.clg-footer-button > li > a:hover {
  color: #555f6e;
  cursor: pointer;
}

.clg-link-faq {
  width: 27px;
  height: 24px;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
}

.clg-question-mark {
  width: 24px;
  height: 24px;
  filter: invert(20%) sepia(5%) saturate(1985%) hue-rotate(176deg) brightness(91%) contrast(86%);
  padding-right: 12px;
  cursor: pointer;
}

.clg-question-mark:hover {
  filter: brightness(0) saturate(100%) invert(36%) sepia(7%) saturate(1111%) hue-rotate(177deg) brightness(94%)
    contrast(86%);
}

.clg-link-contact {
  width: 54px;
  height: 24px;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
}

.clg-speak-bubble {
  width: 24px;
  height: 24px;
  filter: invert(20%) sepia(5%) saturate(1985%) hue-rotate(176deg) brightness(91%) contrast(86%);
  padding-right: 12px;
  cursor: pointer;
}

.clg-speak-bubble:hover {
  filter: brightness(0) saturate(100%) invert(36%) sepia(7%) saturate(1111%) hue-rotate(177deg) brightness(94%)
    contrast(86%);
}

.clg-footer-link > li > a {
  text-decoration: none;
  color: #7d8798;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
}

.clg-footer-link > li > a:hover {
  box-shadow: inset 0 -1px 0 #7d8798;
  cursor: pointer;
}

.clg-link-faq {
  display: flex;
  justify-content: center;
  align-items: center;
}

.clg-link-contact {
  display: flex;
  justify-content: center;
  align-items: center;
}

.clg-footer-link,
.clg-footer-button {
  display: flex;
  align-self: stretch;
  row-gap: 1rem;
  column-gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

/* MD Breakpoint */
@media only screen and (min-width: 640px) {
  .clg-hero-horizontal {
    gap: 2.5rem;
  }

  .clg-brand-selection-rows {
    gap: 1.25rem;
    padding: 1.25rem;
  }

  .clg-footer-top-margin {
    margin-top: 40px;
  }

  .clg-brand-selection-headline-text {
    /* text-body-base */
    font-size: 1rem /* 16px */;
    line-height: 1.75rem /* 28px */;
  }

  .clg-brand-selection-items {
    gap: 1rem /* -16px */;
  }

  .clg-px-indent {
    padding-left: 1.5rem /* 24px */;
    padding-right: 1.5rem /* 24px */;
  }

  .clg-hero-container {
    font-family: Manrope;
    padding-left: 1rem /* 16px */;
    padding-right: 1rem /* 16px */;
  }

  .clg-hero-content h1 {
    font-size: 1.75rem;
    line-height: 2.5rem;
  }

  .clg-hero {
    height: 376px;
  }

  .clg-min-margin-vertical {
    margin: 56px 40px 64px;
  }

  .clg-min-margin,
  .clg-hero-horizontal {
    width: calc(100vw - 95px);
  }

  .clg-inner-container {
    margin-left: auto;
    margin-right: auto;
  }

  .clg-footer-wrapper {
    font-family: Manrope;
    padding: 2rem 3rem;
  }

  .clg-footer-inner-wrapper {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    padding: 16px 0;
    column-gap: 0;
  }

  .clg-footer-inner-wrapper-links {
    max-width: 100%;
    height: auto;
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
  }

  .clg-footer-link {
    margin: 0;
    padding: 0;
  }

  .clg-footer-inner-wrapper > img {
    padding-top: 6.5px;
    padding-bottom: 6.5px;
  }
}

/* LG Breakpoint */
@media only screen and (min-width: 1024px) {
  .clg-brand-selection-rows {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    align-items: center;
  }

  .clg-brand-selection-items {
    gap: 0.75rem /* 12px */;
  }

  .clg-brand-selection-button {
    width: 4rem;
    height: 4rem;
  }

  .clg-px-indent {
    padding-left: 2rem /* 32px */;
    padding-right: 2rem /* 32px */;
  }

  .clg-inner-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: auto;
    margin-right: auto;
  }

  .clg-min-margin,
  .clg-hero-horizontal {
    width: calc(100vw - 160px);
  }

  .clg-min-margin-vertical {
    margin: 80px 80px 96px;
  }

  .clg-footer-wrapper {
    padding: 0;
  }

  .clg-footer-inner-wrapper {
    padding: 16px 80px;
  }

  .clg-footer-inner-wrapper-links {
    padding: 1rem 5rem;
  }

  .clg-footer-link {
    padding: 2px 0 0 0;
    margin: 0;
  }

  .clg-hero-horizontal-orders {
    gap: 0;
    flex-direction: row;
    margin-bottom: 4rem;
  }
}

/* XL Breakpoint */
@media only screen and (min-width: 1280px) {
  .clg-px-indent {
    padding-left: min(48px);
    padding-right: min(48px);
  }

  .clg-hero-container {
    grid-column: span 12 / span 12;
  }

  .clg-hero-content h1 {
    font-size: 2rem;
    line-height: 3rem;
  }
}

/* 2XL Breakpoint */
@media only screen and (min-width: 1440px) {
  .clg-hero {
    height: 328px;
  }

  .clg-min-margin-vertical {
    margin-top: 80px;
    margin-bottom: 96px;
  }

  .clg-inner-container {
    max-width: 1280px;
  }

  .clg-footer-inner-wrapper,
  .clg-footer-inner-wrapper-links {
    max-width: 1280px;
  }
}