/* theme variables */
.pos-theme-light {
  --card-border-gradient-from: #e2e8f0;
  --card-border-gradient-to: #ffffff;
  --card-border-color: #f3eeee;
  --card-bg-color-from: #f7f8fa;
  --card-bg-color-to: #ffffff;

  /* TODO: remove when its in pos-config.css */
  --subtitle-gradient-from: #2173c4;
  --subtitle-gradient-to: #0f7b0a;
}

.pos-theme-dark {
  --card-border-gradient-from: #282929;
  --card-border-gradient-to: #000000;
  --card-border-color: #131313;
  --card-bg-color-from: #141414;
  --card-bg-color-to: #000000;

  /* TODO: remove when its in pos-config.css */
  --subtitle-gradient-from: #3a8dde;
  --subtitle-gradient-to: #38d430;
}

.card-gradient {
  border: 1px solid transparent;
  background: linear-gradient(
        to bottom right,
        var(--card-bg-color-from),
        var(--card-bg-color-to)
      )
      padding-box,
    linear-gradient(
        to bottom right,
        var(--card-border-gradient-from) 0%,
        var(--card-border-gradient-to) 90%
      )
      border-box;
}
.card-gradient2 {
  border: 1px solid transparent;
  background: linear-gradient(
        to bottom ,
        var(--card-bg-color-from),
        var(--card-bg-color-to)
      )
      padding-box,
    linear-gradient(
        to bottom ,
        var(--card-border-gradient-from) 0%,
        var(--card-border-gradient-to) 90%
      )
      border-box;
}
/* icon color */
.about-main-container svg path:not(:first-child) {
  stroke: var(--pos-color-graphic);
}

/* icon background color */
.about-main-container svg path:first-child {
  fill: var(--pos-color-panel-background);
}

.gradient-box {
  background-color: var(--pos-color-page-background);
}

.gradient-header h2 {
  color: var(--pos-color-prominent);
}

.gradient-header p {
  color: var(--pos-color-normal);
}

.about-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 1440px;
  padding: 0px var(--pos-gap-page-content-x-margin);
  align-items: center;
  align-self: stretch;
  margin: 0 auto;
}

.about-main-container {
  display: flex;
  flex-direction: column;
  background-color: var(--pos-color-page-background);
}

.about-main-container section {
  padding-bottom: var(--pos-gap-section-section);
}

.about-main-container .about-us {
  padding-bottom: 80px;
}

.about-container .main {
  display: flex;
  max-width: 1031px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  align-self: stretch;
}

.about-container header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: none;
}

.section-content-container {
  display: flex;
  flex-direction: column;
  gap: var(--pos-gap-section-elements);
}

#bg-ellipse-right {
  background-image: url("../../../images/about-us/bg-ellipse-right.avif");
  background-repeat: no-repeat;
  background-position: right top -120px;
  background-size: 800px 1400px;
}

#bg-ellipse-left {
  background-image: url("../../../images/about-us/bg-ellipse-left.avif");
  background-repeat: no-repeat;
  background-position: left top 20px;
  background-size: 1000px 1400px;
}

@media (min-width: 3000px) {
  #bg-ellipse-left {
    background-image: none;
  }

  #bg-ellipse-right {
    background-image: none;
  }
}