<template>
  <div>
   
      <section class="hero-cloud-pg">
        <div class="container">
            <img class="cloud-impact" src="@/assets/images/cloud.png" alt="Cloud">
            <h3 class="hero-cloud-pg__title">Zorro’s story</h3>
            <img src="@/assets/images/cloud-right.png" class="the-cloud">
        </div>
      </section>
      <section class="zorro-doggos-pg">
        <div class="container">
          <div class="row reverse-mobile">
            <div class="col-md-7">
              <h2 class="zorro-doggos__title">Lonely. Abandoned. Sick.</h2>
              <p class="zorro-doggos-pg__description">That was Zorro before he committed himself to fight on behalf of all his fellow doggos that don't have a beautiful life...yet.</p>
            </div>
            <div class="col-md-5">
              <img class="zorro" src="@/assets/images/ZorroActionPose1alterado(2).svg" alt="">
            </div>
          </div>
          <div class="row">
              <div class="col-md-6">
                  <p class="zorro-doggos-pg__text">Zorro chose 3,000 doggos from 8 countries all around the world that are looking for you to adopt them and make their life a better one!</p>
                  <p class="zorro-doggos-pg__text">Some of them come from shelters where there aren't enough kind-hearted souls to adopt them. Others are sick with no financial resources to pay for their medical care.</p>
                  <p class="zorro-doggos-pg__text">This is where your journey begins. We care, so we share. And we know you do too. Because in doggos we trust.</p>
                  <p class="zorro-doggos-pg__text">The key is a joint effort by all of us. Become part of Cuddle Dogs, and help Zorro fulfill his mission by adopting a doggo NFT, which will be released as a limited edition of 3000 unique works of cuddly art.</p>
                  <p class="zorro-doggos-pg__text">Let's leave no doggo behind without a caring and loving owner like you!!</p>
                  <p class="zorro-doggos-pg__text">Zorro believes every single one of us can become an active part of the project. The first Cuddle Dog series contains dogs with different nationalities, breeds, traits and features, but also a variety of personalities and clothing – every single Doggo is original – just like in real life.</p>
              </div>
              <div class="col-md-6">
                  <p class="zorro-doggos-pg__text">There is more on this long journey. We will design more collections that will fuel real-world impact, which we will of course share with our growing community in the future.</p>
                  <p class="zorro-doggos-pg__text">Zorro decided that over 50% of the funds must be used to support impact-driving projects & causes. We're working directly with organizations, shelters and vets taking care of sick and abandoned animals, while bringing them into this one-of-a-kind NFT adventure.</p>
                  <p class="zorro-doggos-pg__text">On top of that, we're identifying projects focused on innovative medical research that can have a life-changing impact (literally) on fatal diseases such as FIP in cats and cancer – a leading killer of dogs, cats and humans globally.</p>
                  <p class="zorro-doggos-pg__text">Let's make these doggies smile again. Because even with NFTs, we can.</p>
              </div>
          </div>
        </div>
      </section>
  </div>
</template>

<script>
export default {
  name: "OpenData",
  created: function () {
    document.title = this.$route.name + " - Cuddle";
  },
};
</script>

<style lang="scss">
$black: #2e3240;
$pink: #d551ad;
$bg: #ffe2d1;
$green: #97d26f;

.hero-cloud-pg {
  position: relative;
  padding: 140px 0 240px;
  margin-bottom: -1px;
  .cloud-impact {
      position: absolute;
      top: 60px;
      left: -110px;
      width: 790px;
      z-index: -1;
  }
  .the-cloud {
      position: absolute;
      top: 30px;
      right: 30px;
      width: 540px;
  }
  &__title {
      font-size: 75px;
      line-height: 85px;
      color: $pink;
      text-align: left;
      position: relative;
      z-index: 9;
  }
  &:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 6vw;
    background: url('../assets/images/grass-curve-top.svg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding-top: 4vw;
    background-position-x: center;
    background-position-y: top;
    z-index: 2;
  }
  &:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background: $green;
    width: 100%;
    padding-top: 7vw;
    z-index: 1;
  }
}

.zorro-doggos-pg {
    position: relative;
    background: $green;
    padding-bottom: 313px;
    margin-bottom: -130px;
    .zorro {
        position: absolute;
        right: 0;
        top: -340px;
        z-index: 9;
    }
    &__title {
        font-size: 40px;
        line-height: 65px;
        margin-bottom: 20px;
        color: #fff;
    }
    &__description {
        font-family: 'filsonproregularregular';
        font-size: 25px;
        line-height: 45px;
        color: $black;
        width: 1000px;
        max-width: 100%;
        margin-bottom: 80px;
    }
    &__text {
        font-family: 'filsonproregularregular';
        font-size: 20px;
        line-height: 35px;
        color: $black;
        margin-bottom: 15px;
    }
}

@media(max-width:768px) {
  .hero-cloud-pg .the-cloud {
    position: absolute;
    top: 215px;
    right: -30px;
    width: 520px;
  }
  .reverse-mobile {
    flex-direction: column-reverse;
  }
  .zorro-doggos-pg .zorro {
    position: relative;
    top: 0;
    margin-top: -280px;
  }
  .hero-cloud-pg__title {
    font-size: 42px;
    line-height: 52px;
  }
  .hero-cloud-pg {
    position: relative;
    padding: 75px 15px 360px;
  }
  .hero-cloud-pg .cloud-impact {
    position: absolute;
    top: 26px;
    left: -100px;
    width: 790px;
    z-index: -1;
    max-width: 500px;
  }
  .zorro-doggos-pg {
    padding: 0 15px 170px;
  }
  .zorro-doggos-pg__description {
    font-size: 22px;
    line-height: 36px;
    margin-bottom: 30px;
  }
}

@media(min-width:769px) and (max-width:1200px) {
    .hero-cloud-pg {
        padding: 140px 30px 240px;
    }
    .zorro-doggos-pg {
      padding: 0 30px 170px;
    }
}
</style>
