/* About us Page */
body.page-template-about-us {
  background-color: var(--color-gray-secondary);
  background-image: linear-gradient(var(--color-gray-third-50) 2px, transparent 2px), linear-gradient(90deg, var(--color-gray-third-50) 2px, transparent 2px), linear-gradient(rgba(175, 175, 175, 0.20) 1px, transparent 1px), linear-gradient(90deg, rgba(175, 175, 175, 0.20) 1px, transparent 1px);
  background-size: 150px 150px, 150px 150px, 30px 30px, 30px 30px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

.au-head {
  position: relative;
  background: var(--color-gray-secondary);
  background: radial-gradient(circle, transparent 0%, var(--color-gray-secondary) 75%), linear-gradient(180deg, transparent 50%, var(--color-gray-secondary) 100%);
}

.au-head .container {
  min-height: 50vh;
  position: relative;
  padding-block: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.au-head img {
  max-height: calc(100vh - 80px);
  max-width: 100%;
}


body.notif-bar .au-head img {
  max-height: calc(100vh - 80px - var(--notif-h));
}

.au-head h1 {
  position: absolute;
  font-size: var(--t-hg);
  font-variation-settings: "wght" var(--w-blk), "dots" 2;
  font-weight: var(--w-blk);
  offset: center;
  bottom: 0;
  color: var(--color-dark-royal);
  line-height: initial;
  margin: 0;
}

.au-sec1,
.au-sec2 {
  background: linear-gradient(180deg, var(--color-gray-secondary)25%, transparent 50%, var(--color-gray-secondary)75%);
}

.au-sec3 {
  background: var(--color-gray-secondary);
  background: radial-gradient(circle, transparent 90%, var(--color-gray-secondary) 95%), linear-gradient(180deg, var(--color-gray-secondary) 25%, transparent 100%);
}

body.page-template-about-us .content-container {
  display: flex;
  gap: var(--md);
  padding: var(--md) var(--tn);
}

.au-flex-box-r,
.au-flex-box-l {
  width: 50%;
  position: relative;
}

.au-sec1 .au-flex-box-l::before,
.au-sec2 .au-flex-box-r::before,
.au-sec3 .au-flex-box-l::before {
  content: "";
  background: linear-gradient(180deg, var(--color-gray-secondary)5%, transparent 50%, var(--color-gray-secondary) 95%);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.au-sec3 .au-flex-box-l::before {
  background: linear-gradient(180deg, var(--color-gray-secondary)5%, transparent 50%);
}

body.page-template-about-us h2 {
  font-size: var(--t-xm);
  font-variation-settings: "wght" var(--w-bld), "dots" 2;
  font-weight: var(--w-bld);
  color: var(--color-dark-royal);
  margin-block: var(--sm);
}

.au-content {
  background: var(--color-gray-secondary-50);
  padding: var(--tn);
  color: var(--color-dark-secondary);
  text-align: justify;
  font-size: var(--t-sm);
  border-radius: var(--tn);
}

.au-content ul {
  padding-right: var(--tn);
  margin-right: var(--sm);
}

.au-content li {
  list-style: disclosure-closed;
}

body.page-template-about-us .content-container img {
  max-width: 800px;
  width: 100%;
}

@media (max-width: 767px) {
  body.page-template-about-us .content-container {
    padding-block: var(--sm);
    flex-direction: column;
  }

  body.page-template-about-us .au-sec2 .content-container {
    flex-direction: column-reverse;
  }

  .au-flex-box-r,
  .au-flex-box-l {
    width: 100%;
  }

  .au-sec1 .au-flex-box-l::before,
  .au-sec2 .au-flex-box-r::before {
    content: "";
    background: linear-gradient(180deg, transparent 50%, var(--color-gray-secondary) 90%);
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }

}