<template>
  <div class="intro-container">
    <h1 class="title">
      <img
        src="@/assets/img/about/gameWeb_aboutP1_title.png"
        alt="Background"
      />
    </h1>
    <p class="description">
      Counter Fire is the
      <span class="highlight">highly-anticipated blockchain-based game</span> to
      offer a unique combination of MOBA and Battle Royale gameplay. With
      funding from over 13 institutional investors, Players can choose from a
      range of unique characters and battle it out in a highly competitive
      arena.
    </p>
    <div class="line"></div>
    <p class="description">
      The game leverages the power of
      <span class="highlight">blockchain technology</span> to offer secure,
      decentralized gameplay, where players can own and trade in-game assets.
      With an in-game economy, regular tournaments, and a range of other
      features,Counter Fire offers an immersive and engaging gaming experience
      for players who enjoy action-packed battles and competitive gameplay.
    </p>
    <img
      class="background-image"
      src="@/assets/img/about/gameWeb_aboutP1_bg1.png"
      alt="Background"
    />
  </div>
</template>

<script>
export default {
  name: "CounterFireIntro",
};
</script>

<style lang="scss" scoped>
.intro-container {
  width: 100%;
  position: relative;
  height: 100%;
  padding-top: 84px;
  padding-left: 215px;
  z-index: 1;
  color: #fff;

  .title {
    font-size: 36px;
    text-align: left;
    margin-top: 51px;
    font-weight: bold;
    img{
      width: 596px;
    }
  }

  .description {
    width: 845px;
    margin: 20px 0;
    padding: 10px;
    padding-right: 0px;
    border-radius: 0px 20px 0px 20px;
    font-size: 26px;
    font-family: "Poppins-Regular";
    font-weight: 400;
    color: #f3f0ff;
    line-height: 36px;
    text-align: left;
    .highlight {
      color: #BB7FFF;
      font-weight: bold;
    }
  }
  .line {
    width: 845px;
    height: 3px;
    background: #4A415C;
  }

  .background-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}
</style>
