:root {
  --active-bg: #ffc68b;
  --active-txt: #ffc68b;

  --base-bg: #121416;
  --base-txt: #e2e2e5;

  --cta-button-bg: #333537;
  --cta-button-border: rgb(84 68 52 / 0.2);
  --cta-button-active-border: rgb(255 198 139 / 0.5);
  --cta-button-icon-send: #00e3d9;
  --cta-button-icon-smiley: #d69e37;

  --details-txt: #dac2ae;

  --footer-bg: #0c0e10;
  --footer-border: rgb(84 68 52 / 0.2);
  --footer-copyright-border: rgb(84 68 52 / 0.1);

  --header-bg: rgb(30 32 34 / 0.9);
  --header-border: rgb(84 68 52 / 0.3);

  --header-feature-analysis: green;
  --header-feature-comparison: orange;
  --header-feature-drawings: white;
  --header-feature-validation: red;

  --header-lang-button-hover-bg: rgb(255 255 255 / 0.05);
  --header-lang-picker-bg: #282a2c;
  --header-lang-picker-border: rgb(84 68 52 / 0.3);
  --header-lang-picker-shadow: rgb(0 0 0 / 0.25);
  --header-lang-selection-hover-bg: rgb(255 198 139 / 0.1);

  --label-no-problem: green;
  --label-problem-detechted: red;

  --main-feature-container-border: rgb(84 68 52 / 0.2);
  --main-feature-container-even-bg: #1e2022;
  --main-feature-container-odd-bg: #353638;
  --main-feature-container-shadow: rgba(0, 0, 0, 0.6);
  --main-feature-pre-headline-bg: rgb(255 159 28 / 0.2);
  --main-feature-pre-headline-border: rgb(255 159 28 / 0.3);
  --main-feature-intro-headline-txt: #e2e2e5;
  --main-feature-dummy-image-bg: black;
  --main-feature-img-toggle-even-bg: #333537;
  --main-feature-img-toggle-odd-bg: #5f6062;

  --scrollbar-thumb: #888888;
  --scrollbar-thumb-hover: #a9a9a9;

}

body {
  background-color: var(--base-bg);
  color: var(--base-txt);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  -webkit-border: none;
  border: none;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background-color: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background-color: var(--scrollbar-thumb);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

header {
  background-color: var(--header-bg);
  border-bottom-width: 1px;
  border-color: var(--header-border);
  box-shadow: 0 0.25em 0.5rem 0.15rem rgb(0 0 0 / 60%);
}

.header-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 90rem;
  padding: 0.25rem 0.5rem;
}

.header-title-container {
  display: flex;
  align-items: start;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: stretch;
}

.header-title {
  flex: 1;

  display: flex;
  align-items: baseline;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: start;
}

.header-title-name {
  font-weight: 700;
  font-size: x-large;
}

.header-title-slogan {
  color: var(--details-txt);
  font-weight: 500;
  opacity: 0.7;
}

.header-lang-container {
  position: relative;
  font-size: smaller;
}

.header-lang-container.header-lang-picker-visible {
  color: var(--active-txt);
}

.header-lang-main-button {
  position: relative;

  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 0.5rem;

  border-radius: 0.5rem;
  color: var(--details-txt);
  padding: 0.2rem;

  cursor: pointer;
}

.header-lang-main-button:hover {
  background-color: var(--header-lang-button-hover-bg);
}

.header-lang-container.header-lang-picker-visible>.header-lang-main-button {
  color: var(--active-txt);
}

.header-lang-main-button-title {
  font-weight: 700;
}

.header-lang-main-button-caret {
  font-size: smaller;
}

.header-lang-container.header-lang-picker-visible>.header-lang-main-button>.header-lang-main-button-caret {
  transform: rotate(90deg);
}

.header-lang-picker {
  position: absolute;
  left: auto;
  right: 0;
  top: 100%;
  bottom: auto;

  background-color: transparent;
  opacity: 0;
  padding-top: 0.5rem;
  visibility: hidden;

  transition-duration: 200ms;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.header-lang-container.header-lang-picker-visible>.header-lang-picker {
  opacity: 1;
  visibility: visible;
}

.header-lang-picker-content {
  background-color: var(--header-lang-picker-bg);
  border: 1px solid var(--header-lang-picker-border);
  border-radius: 0.75rem;
  box-shadow: 0 1rem 2rem -1rem var(--header-lang-picker-shadow);
  padding: 0.5rem;
}

.header-lang-picker-selection {
  padding: 0.5rem 1rem;
}

.header-lang-picker-selection:hover {
  background-color: var(--header-lang-selection-hover-bg);
  color: var(--active-txt);
}

.header-nav-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;

  padding-top: 0.5rem;
}

.header-nav-button {
  flex: 1;

  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: stretch;

  color: var(--details-txt);

  cursor: pointer;
}

.header-nav-button:hover>.header-nav-button-title {
  color: var(--active-txt);
}

.header-nav-button-icon {
  font-size: larger;
  text-align: center;
}

.header-nav-button-icon-analysis {
  color: var(--header-feature-analysis);
}

.header-nav-button-icon-comparison {
  color: var(--header-feature-comparison);
}

.header-nav-button-icon-drawings {
  color: var(--header-feature-drawings);
}

.header-nav-button-icon-validation {
  color: var(--header-feature-validation);
}

.header-nav-button-title {
  font-size: smaller;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

main {
  padding: 1rem;
}

.main-feature-container {
  position: relative;

  border: 1px solid var(--main-feature-container-border);
  border-radius: 1rem;
  filter: drop-shadow(0px 10px 20px var(--main-feature-container-shadow));
  margin-bottom: 1rem;
  padding: 1rem;
}

.main-feature-container-analysis {
  z-index: 40;
}

.main-feature-container-comparison {
  z-index: 10;
}

.main-feature-container-drawings {
  z-index: 20;
}

.main-feature-container-validation {
  z-index: 30;
}

.main-feature-container-order-even {
  background-color: var(--main-feature-container-even-bg);
  margin-left: auto;
}

.main-feature-container-order-odd {
  background-color: var(--main-feature-container-odd-bg);
  margin-right: auto;
}

.main-feature-container-arrow {
  position: absolute;
  top: 100%;
  bottom: auto;

  display: none;

  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-top: 1.75rem solid;
}

.main-feature-container-order-even>.main-feature-container-arrow {
  border-top-color: var(--main-feature-container-even-bg);
  left: auto;
  right: 15%;
}

.main-feature-container-order-odd>.main-feature-container-arrow {
  border-top-color: var(--main-feature-container-odd-bg);
  left: 15%;
  right: auto;
}

.main-feature-container-single-picture {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.main-feature-content {
  overflow-x: hidden;
}

.main-feature-intro {
  flex: 1;
}

.main-feature-intro>*:last-child {
  margin-bottom: 0;
}

.main-feature-pre-headline>* {
  display: inline-block;
  background-color: var(--main-feature-pre-headline-bg);
  border: 1px solid var(--main-feature-pre-headline-border);
  border-radius: 100rem;
  color: var(--active-txt);
  font-size: smaller;
  padding: 0.25rem 1rem;
}

.main-feature-headline {
  font-size: x-large;
}

.main-feature-details {
  color: var(--details-txt);
  line-height: 1.6;
}

.main-feature-intro>* {
  margin-bottom: 1rem;
  text-align: center;
}

.main-feature-details-list {
  margin: 0;
  padding-left: 1.5rem;
  text-align: left;
}

.lbl-no-problem {
  color: var(--label-no-problem);
}

.lbl-problem-detected {
  color: var(--label-problem-detechted);
}

.main-feature-images-container {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 2rem;

  margin-top: 1.5rem;
}

.main-feature-container-single-picture .main-feature-images-container {
  margin-top: 0;
}

.main-feature-image {
  aspect-ratio: 1;
  background-color: transparent;
  border: none;
  max-width: 360px;
  outline: none;
  width: 100%;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.dummy-image {
  animation: shimmer 3s infinite linear;
  border-radius: 1rem;
}

.dummy-image:nth-of-type(2),
.dummy-image:nth-of-type(3) {
  display: none;
}

*:not(.main-feature-container-single-picture)>.main-feature-images-container .dummy-image {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0) 85%);
  background-size: 200% 100%;
}

.main-feature-container-single-picture>.main-feature-images-container .dummy-image {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 85%);
  background-size: 200% 100%;
}

.real-image {
  display: none;
  opacity: 0;
}

@keyframes animation-smooth-reveal {
  0% {
    width: 0;
    opacity: 0;
  }

  100% {
    width: 100%;
    opacity: 1;
  }
}

.real-image-visible,
.real-image-visible-1>.main-feature-images-container>.real-image:nth-of-type(1),
.real-image-visible-2>.main-feature-images-container>.real-image:nth-of-type(2),
.real-image-visible-3>.main-feature-images-container>.real-image:nth-of-type(3) {
  display: initial;
  animation: animation-appear 2s ease 0s forwards;
}

.real-image-smooth-reveal {
  display: initial;
  animation: animation-smooth-reveal 2s ease 0s forwards;
}

.main-feature-image-toggles-container {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.5rem;

  margin-top: 1rem;
  opacity: 0;
}

.main-feature-image-toggle {
  background-color: var(--main-feature-img-toggle-even-bg);
  border-radius: 100rem;
  height: 0.5rem;
  width: 0.5rem;

  cursor: pointer;
}

.main-feature-container-order-odd .main-feature-image-toggle {
  background-color: var(--main-feature-img-toggle-odd-bg);
}

.real-image-visible-1>.main-feature-image-toggles-container>.main-feature-image-toggle:nth-of-type(1),
.real-image-visible-2>.main-feature-image-toggles-container>.main-feature-image-toggle:nth-of-type(2),
.real-image-visible-3>.main-feature-image-toggles-container>.main-feature-image-toggle:nth-of-type(3) {
  background-color: var(--active-bg);
}

.cta-section {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;

  margin-top: 5rem;
  margin-bottom: 3rem;
}

.cta-section-button {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  gap: 1rem;

  background-color: var(--cta-button-bg);
  border: 1px solid var(--cta-button-border);
  border-radius: 100rem;
  box-shadow: 0 0.15em 0.5rem 0.25rem rgb(0 0 0 / 60%);
  padding: 1rem;

  cursor: pointer;
}

.cta-section-button:hover {
  border: 1px solid var(--cta-button-active-border);
  color: var(--active-txt);
}

.cta-section-button-icon-send {
  color: var(--cta-button-icon-send);
}

.cta-section-button-icon-smiley {
  color: var(--cta-button-icon-smiley);
}

.cta-section-button-title {
  flex: 1;
  text-align: center;
}

.cta-section-details {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
}

.cta-section-details-point {
  display: inline-block;

  background-color: var(--active-bg);
  border-radius: 100rem;
  height: 0.5rem;
  width: 0.5rem;
}

footer {
  background-color: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
}

.footer-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 90rem;
  padding: 1rem 1rem 0 1rem;
}

.footer-nav-container {
  display: flex;
  align-items: start;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

.footer-nav-header {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-nav-header-contact {
  color: var(--active-txt);
}

.footer-nav-bar {
  display: flex;
  align-items: start;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: center;

  color: var(--details-txt);
}

.footer-nav-bar>* {
  cursor: pointer;
}

.footer-nav-bar>button {
  color: var(--details-txt);
}

.footer-copyright {
  color: var(--details-txt);
  border-top: 1px solid var(--footer-copyright-border);
  font-size: smaller;
  margin-top: 1rem;
  padding: 0.5rem 0;
  text-align: center;
}

/* Medium devices: Large Tablets / iPads (768px and up) */
@media (min-width: 768px) {
  .header-content {
    max-width: 90rem;
    padding: 0.5em 1rem;
  }

  .header-title-container {
    gap: 1rem;
  }

  .header-title {
    gap: 1rem;
  }

  .header-nav-bar {
    gap: 4rem;
  }

  .header-nav-button-title {
    font-size: initial;
  }

  main {
    margin-left: auto;
    margin-right: auto;
    max-width: 90rem;
    padding: 1rem 2rem;
  }

  .main-feature-container {
    border-radius: 3rem;
    max-width: 92.5%;
    margin-bottom: 2rem;
    padding: 3rem;
  }

  .main-feature-pre-headline>* {
    font-size: initial;
  }

  .main-feature-container-arrow {
    display: initial;
  }

  .main-feature-intro>* {
    margin-bottom: 1.5rem;
  }

  .main-feature-container-arrow {
    border-left: 2.5rem solid transparent;
    border-right: 2.5rem solid transparent;
    border-top: 4rem solid;
  }

  .cta-section {
    gap: 2rem;
    margin-top: 8rem;
    margin-bottom: 5rem;
  }

  .cta-section-button {
    font-size: x-large;
  }

  .footer-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 90rem;
    padding: 2rem 2rem 0 2rem;
  }

  .footer-nav-container {
    gap: 3rem;
  }
}

/* Large devices: Laptops / Small Desktops (1024px and up) */
@media (min-width: 1024px) {
  header {
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .main-feature-container-single-picture {
    flex-direction: row;
    align-items: start;
    gap: 3rem;
  }

  .main-feature-container-reversed-order {
    flex-direction: row-reverse;
  }

  .main-feature-container-single-picture .main-feature-pre-headline,
  .main-feature-container-single-picture .main-feature-headline,
  .main-feature-container-single-picture .main-feature-details {
    text-align: left;
  }

  .main-feature-container-single-picture>.main-feature-images-container>.main-feature-image {
    width: 360px;
    max-width: 100%;
  }

  .dummy-image:nth-of-type(2),
  .dummy-image:nth-of-type(3) {
    display: initial;
  }

  .real-image-visible-2>.main-feature-images-container>.real-image:nth-of-type(2),
  .real-image-visible-3>.main-feature-images-container>.real-image:nth-of-type(3) {
    display: initial;
    animation: animation-smooth-reveal 1s ease 0s forwards;
  }

  .real-image-visible-2>.main-feature-images-container>.real-image:nth-of-type(1),
  .real-image-visible-3>.main-feature-images-container>.real-image:nth-of-type(1),
  .real-image-visible-3>.main-feature-images-container>.real-image:nth-of-type(2) {
    display: initial;
    opacity: 1;
  }

  .main-feature-image-toggles-container {
    display: none;
  }
}

/* Extra Large devices: Large Desktops (1280px and up) */
@media (min-width: 1280px) {
  .header-title-name {
    font-size: xx-large;
  }

  .header-title-slogan {
    font-size: larger;
  }

  .main-feature-pre-headline>* {
    font-size: larger;
  }

  .main-feature-headline {
    font-size: xx-large;
  }

  .main-feature-details {
    font-size: larger;
  }
}