.section--content {
  position: relative;
}

.about-container {
  overflow-x: clip;
  position: relative;
}

/* type2  video */

.video--wrap {
  position: relative;
}

.video--wrap::before {
  content: "";
  position: absolute;
  background-color: var(--c-primary);
  inset: 1rem 0 6rem 1rem;
  transform: rotateX(180deg);
  pointer-events: none;
  z-index: -1;
  pointer-events: none;
}

.video__inner {
  position: relative;
}

.content--video-btn {
  position: absolute;
  top: 0;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;

  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.3rem;
  padding: 1rem 6rem;
  color: var(--c-primary);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: 0.3s var(--ease2);
  white-space: nowrap;
}

.content--video-btn:hover {
  color: var(--c-dark);
}

.content--video-btn i {
  font-size: 2.8rem;
}

.play .content--video-btn i::before {
  content: "\e917";
}

.video__poster {
  width: 100%;
  height: 100%;
}

.video__abs {
  position: absolute;
  inset: 0;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.spinner-video {
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
  z-index: 2;
  width: 8rem;
  height: 8rem;
  position: absolute;
  left: calc(50% - 4rem);
  top: calc(50% - 4rem);
  display: none;
}

@-webkit-keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.spinner-video .path {
  stroke: var(--c-primary);
  opacity: 0.8;
  stroke-linecap: round;
  -webkit-animation: dash 1.5s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite;
}

@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

/* feature */

/* type 2 */
.about-img-wrapper {
  display: flex;
  position: relative;
  justify-content: center;
  flex-direction: column;
}

.about-img {
  flex: none;
}

.about-img img {
  position: relative;
  z-index: 2;
}



.btns__about {
  justify-content: center;
}

.about-wrapper {
  position: relative;
  z-index: 3;
  color: var(--c-white);
  overflow: hidden;
}

.content__editor {
  font-size: var(--fs-editor);
  line-height: 2.4;
}

/* .mobile .about-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../../img/content-bg-mobile.webp);
  background-size: cover;
} */
.about-text__bg {
  position: absolute;
  z-index: -1;
  inset: 0;
}



.about-text__bg .img {
  position: absolute;
  will-change: transform;
  content-visibility: auto;
  width: 50rem;
  left: 3rem;
  filter: brightness(3.5);
  bottom: 0;
  pointer-events: none;
}

.about-text__bg::before {
  content: "";
  position: absolute;
  background-image: url(../../img/about-lights.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 50rem;
  height: 100%;
  left: 0;
  bottom: 0;
  pointer-events: none;
}

.about-text__bg .img1 {
  -webkit-animation: move-lines 8s linear infinite forwards;
  animation: move-lines 8s linear infinite forwards;
}

.about-text__bg .img2 {
  -webkit-animation: move-lines 8s 6s linear infinite forwards;
  animation: move-lines 8s 6s linear infinite forwards;
}

.about-text__bg .img3 {
  -webkit-animation: move-lines 8s 3s linear infinite forwards;
  animation: move-lines 8s 3s linear infinite forwards;
}

.about-text__bg .img4 {
  -webkit-animation: move-lines 8s 4s linear infinite forwards;
  animation: move-lines 8s 4s linear infinite forwards;
}

@keyframes move-lines {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* .about-text__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../../img/content-bg.webp);
  background-size: cover;
} */


.about-container>.container {
  position: relative;
}

.content__subtitle.subtitle {
  color: var(--c-secondary);
  font-weight: 600;
}

/**************************/
/* ABOVE 1200px */
/**************************/
@media (min-width: 1024px) {
  .about-img img {
    width: 82%;
  }

  .videocontent-container {
    display: flex;
    align-items: center;
    gap: 4.4rem;
  }

  .about-wrapper {
    display: flex;
    align-items: end;
    gap: 3rem;
  }

  .video--wrap {
    width: 57%;
    flex: none;
  }

  .about-img-wrapper {
    width: 50rem;
    flex: none;
  }

  .about-text {
    flex: 1;
    padding: 4rem;
  }

  .has-img .about-text {
    padding: 9.5rem 6rem 9.5rem 0;
  }

  .btns__about {
    justify-content: unset;
  }

  .about-text {
    position: relative;
  }

  .has-img .about-text__bg {
    inset: 0 0 0 -53rem;
  }

  .about-text__bg {
    overflow: hidden;
    background: linear-gradient(45deg, #130a33, #0a002f);
    inset: 0;
    border-radius: 4rem;
  }


  .about-text__bg::after {
    content: "";
    position: absolute;
    width: 35rem;
    height: 35rem;
    background-color: #29166f9c;
    border-radius: 50%;
    right: -2rem;
    top: -2rem;
    filter: blur(70px);
    pointer-events: none;
    z-index: -1;
  }
}

@media (max-width: 1023.9px) {
  .about-wrapper::after {
    content: "";
    position: absolute;
    width: 35rem;
    height: 35rem;
    background-color: #29166f9c;
    border-radius: 50%;
    right: -2rem;
    top: -2rem;
    filter: blur(70px);
    pointer-events: none;
    z-index: -1;
  }


  .video--wrap,

  .about-img-wrapper {
    max-width: 56%;
    margin: auto;
  }


  .btns__content {
    justify-content: center;
  }


  .about-text {
    padding: 3rem 2rem;
  }


  .about-wrapper {
    background: linear-gradient(45deg, #130a33, #0a002f);
    border-radius: 4rem;
    overflow: hidden;
  }


  .about-text__bg {
    width: 100%;
    height: 50%;
    bottom: 0;
    left: 0;
  }


  .about-text__bg .img {
    width: 100%;
    left: 0;
  }
}