/*** Override Bootstrap colors */
/* stylelint-disable-next-line scss/no-global-function-names */
/* stylelint-disable-next-line selector-class-pattern */
.experience-assets-QandAsection {
  width: 100%;
  margin-top: 65px;
}

.qa-container {
  text-align: center;
  padding-top: 130px;
}

.qa-subheading {
  font-size: 18px;
  line-height: 1.44;
  font-weight: 300;
  padding-top: 10px;
  padding-bottom: 110px;
}

.heading-part {
  font-size: 60px;
  line-height: 1.09;
  letter-spacing: -1.5px;
  bottom: 8%;
  padding-top: 30px;
}

.q-text,
.a-text,
.and-text {
  font-size: 210px;
  line-height: 0.83;
}

.q-text-container,
.a-text-container {
  display: flex;
  align-items: self-end;
  position: absolute;
  top: 3.2%;
  z-index: 1;
}

.a-text-container {
  top: -14%;
}

.fade-right {
  float: left;
  position: absolute;
  opacity: 0;
}

.fade-left {
  float: right;
  position: absolute;
  opacity: 0;
}

.and-text-container {
  display: flex;
  align-items: self-start;
  position: absolute;
  top: -12%;
  z-index: 1;
  right: 0;
}

.and-section {
  position: relative;
}

.a-section {
  position: relative;
}

@media only screen and (min-width: 544px) {
  .qa-img {
    max-width: 601px;
  }
  .heading-part {
    margin: auto;
    padding-top: 25px;
  }
  .q-text-container {
    top: 7%;
  }
  .qa-subheading {
    padding-top: 20px;
    padding-bottom: 86px;
  }
}
@media only screen and (min-width: 992px) {
  .qa-img {
    max-width: 822px;
  }
  .and-heading {
    left: 2%;
  }
  .q-text,
  .a-text,
  .and-text {
    font-size: 350px;
  }
  .img-head-container {
    position: relative;
  }
  .heading-part {
    position: absolute;
    font-size: 70px;
    padding-top: 0;
  }
  .a-heading {
    right: 2%;
  }
  .q-heading {
    right: 6%;
  }
  .q-text-container {
    top: 5%;
  }
  .a-text-container {
    top: -20%;
  }
  .and-text-container {
    top: -20%;
  }
  .qa-subheading {
    padding-top: 20px;
    padding-bottom: 120px;
  }
}
@media only screen and (min-width: 1992px) and (max-width: 1200px) {
  .qa-subheading {
    max-width: 620px;
    padding-top: 42px;
  }
}
@media only screen and (min-width: 1200px) {
  .qa-img {
    max-width: 100%;
  }
  .and-heading {
    left: -7%;
  }
  .a-heading {
    right: 5%;
  }
  .q-heading {
    right: 3%;
  }
  .a-text-container {
    top: -14.5%;
  }
  .q-text-container {
    top: 4.5%;
  }
  .and-text-container {
    top: -12%;
  }
}
@media only screen and (max-width: 543px) {
  .a-text,
  .and-text,
  .q-text {
    font-size: 210px;
    line-height: 1;
    min-width: 185px;
    width: auto;
    display: inline-block;
  }
  .q-text,
  .a-text {
    text-align: left;
  }
  .and-text {
    text-align: right;
  }
}