.metaverse {
  background-color: black;
  color: white; }
  .metaverse .section1 {
    height: unset; }
    .metaverse .section1 .background {
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: cover;
      object-fit: cover;
      object-position: center;
      min-width: 100%;
      height: 70vh;
      background-image: url(../../assets/metaversebg1.png); }
  .metaverse .section2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10rem 0px 12rem;
    text-align: center; }
    .metaverse .section2 .section-header {
      width: 100% !important;
      padding: 0px;
      font-family: AvenirMedium;
      font-weight: 500;
      font-size: 2rem;
      margin-bottom: .5rem; }
    .metaverse .section2 .text {
      font-size: 1.25rem;
      width: 50%; }
  .metaverse .section3 {
    width: 85%;
    margin: auto;
    padding-bottom: 14rem; }
    .metaverse .section3 .image-section {
      border-top: solid .1rem #7E7E7E;
      display: grid;
      grid-template-columns: 50% 50%;
      padding: 2rem 0 8rem; }
      .metaverse .section3 .image-section .left {
        width: calc(100% - 2 * 4rem);
        display: flex;
        flex-direction: column;
        padding: 2rem 0; }
        .metaverse .section3 .image-section .left .title {
          font-family: AvenirMedium;
          font-size: 1.75rem;
          margin-bottom: .5rem;
          text-transform: uppercase; }
      .metaverse .section3 .image-section .right .image-container .carousel {
        width: 100%;
        height: 550px;
        position: relative; }
        .metaverse .section3 .image-section .right .image-container .carousel .slide {
          position: absolute;
          inset: 0;
          opacity: 0; }
          .metaverse .section3 .image-section .right .image-container .carousel .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center; }
        .metaverse .section3 .image-section .right .image-container .carousel .slide[data-active] {
          opacity: 1; }
        .metaverse .section3 .image-section .right .image-container .carousel .carousel-button {
          width: 3rem;
          height: 2rem;
          position: absolute;
          z-index: 2;
          background: none;
          border: none;
          font-size: 4rem;
          top: calc(100% + 1rem + 10px);
          transform: translateY(-50%);
          filter: brightness(0) saturate(100%) invert(100%) sepia(49%) saturate(1192%) hue-rotate(187deg) brightness(115%) contrast(98%);
          cursor: pointer;
          border-radius: .25rem;
          transition: 1s; }
          .metaverse .section3 .image-section .right .image-container .carousel .carousel-button img {
            width: 100%;
            height: 100%; }
          @media screen and (max-width: 991px) {
            .metaverse .section3 .image-section .right .image-container .carousel .carousel-button {
              width: 5rem;
              height: 4rem;
              transform: translateY(-20%); }
              .metaverse .section3 .image-section .right .image-container .carousel .carousel-button .prev {
                right: 2rem; } }
        @media screen and (max-width: 991px) {
          .metaverse .section3 .image-section .right .image-container .carousel .prev {
            right: 7rem !important; } }
        .metaverse .section3 .image-section .right .image-container .carousel .carousel-button:hover {
          filter: brightness(0) saturate(100%) invert(82%) sepia(94%) saturate(3365%) hue-rotate(75deg) brightness(110%) contrast(104%); }
        .metaverse .section3 .image-section .right .image-container .carousel .carousel-button.prev {
          right: 5rem; }
        .metaverse .section3 .image-section .right .image-container .carousel .carousel-button.next {
          right: 1rem; }
        .metaverse .section3 .image-section .right .image-container .carousel .carousel-button:hover, .metaverse .section3 .image-section .right .image-container .carousel .carousel-button:focus {
          color: var(--green); }
        .metaverse .section3 .image-section .right .image-container .carousel .carousel-button:focus {
          outline: 1px solid white; }
        .metaverse .section3 .image-section .right .image-container .carousel ul {
          margin: 0;
          padding: 0;
          list-style: none; }
  @media screen and (max-width: 991px) {
    .metaverse .section1 .background {
      height: 40vh; }
    .metaverse .section2 {
      padding: 5rem 0; }
      .metaverse .section2 .text {
        width: 70%; }
    .metaverse .section3 {
      padding-bottom: 5rem; }
      .metaverse .section3 .image-section {
        grid-template-columns: 100%; }
        .metaverse .section3 .image-section .left {
          width: 100%; } }