/* ==========================================================================
   About Us
   Scope: body.page-{slug} (.page-about | .page-about-us | .page-aboutus)
          + .almax-page-about | .editor-styles-wrapper (block editor)
   ========================================================================== */

:is(.almax-page-about, .page-about, .page-about-us, .page-aboutus, .editor-styles-wrapper) {
  .about-info-block {
    background-image: url(../images/about-info-block.png);    
    background-position: center;
    background-repeat: no-repeat;
    padding: 12px 18px;
    width: 365px;
    height: 135px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;    font-size: 12px;
    line-height: 17px;
    color: var(--text-secondary);
    margin-top: 15px;
    margin-left: -32px;
  }
  .about-info1 {
    font-size: 18px;
    line-height: 18px;
    color: var(--text-primary);
    font-weight: 700;
    padding: 47px 25px 25px 25px;
    background: #f4f4f1;
    border-radius: 8px;
    margin-top: 76px;
    margin-right: 18px;
    max-width: 450px;
  }
  .about-info1-wrap{
    justify-content: flex-end;
    align-items: flex-start;
    display: flex;
  }

  .about-info2 h2 {
    font-family: var(--font-display, "Barlow Condensed", "Barlow", system-ui, sans-serif);
    font-size: 42px;
    line-height: 42px;
    font-weight: 700;
    letter-spacing: var(--track-display, 0.02em);
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 10px;
    max-width: 360px;
    margin-top: 15px;
    margin-left: -30px;
  }
  .about-info2 h3{
    font-size: 28px;
    line-height: 30px;
    font-weight: 500;
    color: var(--text-primary);
    margin-top: 53px;
    margin-left: -13px;
    margin-bottom: 10px;
  }
  .about-capabilities-text {
    position: relative;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 17px;
    margin-left: -13px;
    max-width: 420px;
  }

  .about-capabilities-text::before {
    content: "";
    position: absolute;
    width: 322px;
    height: 196px;
    background: url(../images/line-item-bg4.png) no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
    bottom: -210px;
    left: 35px;
  }
  /* Timeline */
  .alx-timeline {
    position: relative;
    width: 100%;
    padding: 48px 24px 72px;
    color: var(--color-text);
  }

  .alx-timeline__inner {
    position: relative;
    width: min(100%, 1100px);
    margin: 0 auto;
    padding-top: 0px;
  }

  .alx-timeline__items {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 42px;
  }

  .alx-timeline__item {
    position: relative;
    box-sizing: border-box;
  }

  .alx-timeline__item::after {
    content: "";
    position: absolute;
    width: 27px;
    height: 42px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 27px 42px;
    pointer-events: none;
    z-index: 1;
  }

  .alx-timeline__item--left {
    width: calc(50% + 15px);
    align-self: flex-start;
    margin-right: auto;
    text-align: right;
    padding-right: 18px;
    border-right: 1px solid #bdb9b6;
  }

  .alx-timeline__item--left::after {
    bottom: -42px;
    right: -1px;
    background-image: var(--alx-timeline-before);
  }

  .alx-timeline__item--right {
    width: calc(50% - -12px);
    align-self: flex-end;
    margin-left: auto;
    text-align: left;
    padding-left: 18px;
    border-left: 1px solid #bdb9b6;
  }

  .alx-timeline__item--right::after {
    left: -1px;
    bottom: -42px;
    background-image: var(--alx-timeline-after);
  }

  .alx-timeline__item--has-bg::before {
    content: "";
    position: absolute;
    bottom: -22px;
    width: 100%;
    height: 100%;
    background-image: var(--alx-timeline-item-bg);
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
  }

  .alx-timeline__item--left.alx-timeline__item--has-bg::before {
    left: -22px;
    background-position: left bottom;
  }

  .alx-timeline__item--right.alx-timeline__item--has-bg::before {
    right: -10px;
    background-position: right bottom;
  }

  .alx-timeline__dot {
    position: absolute;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: #F26722;
    z-index: 2;
    transform-origin: center center;
    transition: width 0.22s ease, height 0.22s ease, margin-top 0.22s ease;
  }

  .alx-timeline__dot.is-focus {
    width: 12px;
    height: 12px;
    margin-top: -3px;
  }

  .alx-timeline__item--left .alx-timeline__dot {
    right: 0;
    transform: translateX(50%);
  }

  .alx-timeline__item--right .alx-timeline__dot {
    left: 0;
    transform: translateX(-50%);
  }

  .alx-timeline__card {
    position: relative;
    min-height: 125px;
    padding: 8px 4px 8px;
    z-index: 1;
  }

  .alx-timeline__year {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted, #4d4d4d);
  }

  .alx-timeline__title {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 600;
    line-height: 30px;
    color: var(--color-accent, #F26722);
  }

  .alx-timeline__text {
    margin: 0;
    font-size: 12px;
    line-height: 17px;
    color: var(--text-secondary);
  }

  .alx-timeline__text p {
    margin: 0 0 0.75em;
  }

  .alx-timeline__text p:last-child {
    margin-bottom: 0;
  }
}

html[data-prc-theme="dark"] :is(.almax-page-about, .page-about, .page-about-us, .page-aboutus) .about-info1 {
  background: var(--bg-raised);
  color: var(--text-primary);
}

@media (max-width: 860px) {
  :is(.almax-page-about, .page-about, .page-about-us, .page-aboutus, .editor-styles-wrapper) {
    .alx-timeline {
      padding: 32px 16px 48px;
    }

    .alx-timeline__items {
      gap: 40px;
    }

    .alx-timeline__item,
    .alx-timeline__item--left,
    .alx-timeline__item--right {
      width: 100%;
      align-self: stretch;
      margin: 0;
      text-align: left;
      padding: 0 0 0 40px;
    }

    .alx-timeline__item--left::after,
    .alx-timeline__item--right::after {
      bottom: -42px;
      left: -1px;
      right: auto;
    }

    .alx-timeline__item--left.alx-timeline__item--has-bg::before,
    .alx-timeline__item--right.alx-timeline__item--has-bg::before {
      left: -22px;
      right: auto;
      bottom: -22px;
      background-position: left bottom;
    }

    .alx-timeline__item--left .alx-timeline__dot,
    .alx-timeline__item--right .alx-timeline__dot {
      left: 20px;
      right: auto;
      transform: translateX(-50%);
    }
  }
}