<template>
    <section class="the-impact">
        <div class="container">

            <div class="wrap">
				<img class="impact-cloud" src="@/assets/images/the-impact-fund-cloud.png" alt="Cloud">
				<img class="img-text" src="@/assets/images/the-impact-fund-title.svg" alt="Title-Cloud">
			</div>
            <div class="map-home">
                <img src="@/assets/images/map.svg" class="the-impact__map">
                <div class="map-home-toltip">
                    <img class="burst" src="@/assets/images/impact/burst.png">
                    <span class="value">25 <br>ETH</span>
                    <span class="text">raised</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="the-impact__imgs">
                        <img src="@/assets/images/cloud-right.png" class="the-cloud-other">
                        <img src="@/assets/images/cloud-right.png" class="the-cloud">
                        <div class="the-dogs-stone">
                            <img class="the-puppets" src="@/assets/images/FrenchBulldog2000x2000base.svg">
                            <img class="the-stone" src="@/assets/images/impact/mountain.png" alt="Mountain">
                        </div>
                        <img src="@/assets/images/cloud-left.png" class="the-cloud-two-other">
                        <img src="@/assets/images/cloud-left.png" class="the-cloud-two">
                    </div>
                </div>
                <div class="col-md-6" style="position:relative; z-index:9;">
                    <p class="the-impact__description pd-mobile">The Impact Fund receives 50% of Cuddle Dog contributions to drive it's #1 goal – Impact (and cuddling). This can mean supporting change conscious medical research, dog shelters or even vets while eliminating middlemen to get them as much of the funds as possible. Plus the fund's model allows for its long-term sustainability. And we teach partners how to setup crypto donations so they're not dependent just on us!</p>
                    <div class="the-impact__btn pd-mobile"><a href="#" class="btn-global">Learn More</a></div>
                    <h4 class="the-impact__subtitle pd-mobile">We love our partners!</h4>
                    <ul class="partners pd-mobile">
                        <li><img src="@/assets/images/partner1.png" alt=""></li>
                        <li><img src="@/assets/images/partner2.png" alt=""></li>
                        <li><img src="@/assets/images/partner3.png" alt=""></li>
                    </ul>
                </div>
            </div>
            <div class="top-contributors pd-mobile">
                <h3 class="top-contributors__title">Top Contributors</h3>
                <ul class="top-contributors__list">
                    <li>
                        <p><span>25 ETH<img src="@/assets/images/eth.png"></span><strong>1HniQekC61SP6PjnEyyAw6bgegSj4z41k3</strong></p>
                        <img src="@/assets/images/eth.png">
                    </li>
                    <li>
                        <p><span>25 ETH<img src="@/assets/images/eth.png"></span><strong>1HniQekC61SP6PjnEyyAw6bgegSj4z41k3</strong></p>
                        <img src="@/assets/images/eth.png">
                    </li>
                    <li>
                        <p><span>25 ETH<img src="@/assets/images/eth.png"></span><strong>1HniQekC61SP6PjnEyyAw6bgegSj4z41k3</strong></p>
                        <img src="@/assets/images/eth.png">
                    </li>
                    <li>
                        <p><span>25 ETH<img src="@/assets/images/eth.png"></span><strong>1HniQekC61SP6PjnEyyAw6bgegSj4z41k3</strong></p>
                        <img src="@/assets/images/eth.png">
                    </li>
                    <li>
                        <p><span>25 ETH<img src="@/assets/images/eth.png"></span><strong>1HniQekC61SP6PjnEyyAw6bgegSj4z41k3</strong></p>
                        <img src="@/assets/images/eth.png">
                    </li>
                    <li>
                        <p><span>25 ETH<img src="@/assets/images/eth.png"></span><strong>1HniQekC61SP6PjnEyyAw6bgegSj4z41k3</strong></p>
                        <img src="@/assets/images/eth.png">
                    </li>
                </ul>
            </div>
        </div>
    </section>
</template>

<script>


export default {
    name: 'TheImpact',
}

</script>

<style lang="scss">

$black: #2E3240;
$pink: #D551AD;
$bg: #ffe2d1;
$green: #97D26F;

@keyframes floatStone {
    0%   {
        transform: translateY(-15px);
    }
    50%  {
        transform: translateY(0px);

    }
    100% {
        transform: translateY(-15px);

    }
}



.the-impact {
    position: relative;
    padding: 70px 0 60px;
    overflow: hidden;
    .map-home {
        position: relative;
        width: 827px;
        margin: 0 auto;
        &-toltip {
            position: absolute;
            width: 150px;
            top: 150px;
            right: -30px;
            top: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            z-index: 3;
            height: 150px;
        .burst {
          position: absolute;
          z-index: 1;
        }
        .value {
          font-size: 25px;
          line-height: 28px;
          color: #fff;
          position: relative;
          text-align: center;
          z-index: 2;
        }
        .text {
          font-family: 'filsonproregularregular';
          font-size: 16px;
          line-height: 23px;
          color: #fff;
          position: relative;
          z-index: 2;
        }
      }
    }
    /* .cloud-impact {
        position: absolute;
        top: 20px;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 70%;
        z-index: -1;
    } */

	.wrap {
		margin-bottom: 90px;
		@media(max-width: 992px){
          margin-bottom: 60px;
        }
	}

	.impact-cloud {
		position: absolute;
        /* top: -2px; */
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 70%;
		max-width: 964px;
        z-index: -1;

		@media(max-width: 992px){
          width: 100%;
        }
	}

    .img-text {
        margin: 0 auto;
        display: block;
        max-width: 964px;
		padding-top: 70px;
        @media(max-width: 992px){
          max-width: 60%;
          padding-top: 30px;
        }
    }
    &__imgs {
        position: relative;
        // .the-puppets {
        //     position: relative;
        //     top: -80px;
        //     animation: floatStone 3s ease infinite;
        // }
        .the-cloud {
            position: absolute;
            top: 30px;
            left: 90vw;
            width: 320px;
            animation: animate-cloud;
            animation-duration: 60s;
            animation-delay: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        .the-cloud-two {
            position: absolute;
            width: 380px;
            z-index: 1;
            left: 90vw;
            bottom: 280px;
            animation: animate-cloud;
            animation-duration: 60s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        .the-cloud-other{
            position: absolute;
            top: 30px;
            left: 90vw;
            width: 320px;
            animation: animate-cloud;
            animation-duration: 60s;
            animation-delay: 30s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        .the-cloud-two-other{
            position: absolute;
            width: 380px;
            z-index: 1;
            left: 90vw;
            bottom: 280px;
            animation: animate-cloud;
            animation-duration: 60s;
            animation-delay: 25s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

    }
    .the-dogs-stone{
        position: relative;
        width: 705px;
        height: 895px;
        display: flex;
        justify-content: center;
        align-content: center;
        animation: floatStone 3s ease infinite;

        .the-stone{
            width: 100%;
            position: absolute;
            bottom: 98px;
            z-index: 0;
        }
        .the-puppets{
            position: absolute;
            bottom: 0;
            width: 420px;
            top: -160px;
            z-index: 1;
        }

    }
    @media(max-width: 1200px) {
        .the-dogs-stone{
            width: 100%;
            height: 58.3vw;
            .the-stone{
                bottom: -25px;
            }
            .the-puppets{
                bottom: 26.5vw;
                top: initial;
                width: 71%;
            }
        }
    }
    @media(max-width: 768px){
        .the-dogs-stone{
            height: 140.3vw;
            flex-direction: column;
            .the-stone{
                position: relative;
                bottom: 23vw;
            }
            .the-puppets{
                position: relative;
                bottom: initial;
                top: initial;
                left: 50%;
                margin-left: -35.5%;

            }
        }
    }
    &__title {
        font-size: 100px;
        line-height: 100px;
        color: $pink;
        text-align: center;
        margin-bottom: 100px;
        text-transform: uppercase;
        span {
            font-size: 30px;
            line-height: 65px;
            display: block;
            text-transform: none;
        }
    }
    &__description {
        font-family: 'filsonproregularregular';
        font-size: 20px;
        line-height: 35px;
        color: $black;
        margin-bottom: 30px;
        margin-top: 70px;
    }
    &__btn {
        display: flex;
        margin-bottom: 45px;
    }
    &__subtitle {
        font-size: 30px;
        line-height: 50px;
        color: $black;
        margin-bottom: 30px;
    }
    &__map {
        width: 827px;
        margin: 0 auto;
        display: block;
    }
    .partners {
        padding: 0;
        margin: 0;
        display: flex;
        li {
            list-style: none;
            margin-right: 15px;
            width: 160px;
            height: 160px;
            background: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
                width: 80px;
            }
        }
    }
    .top-contributors {
        &__title {
            font-size: 40px;
            line-height: 65px;
            color: $pink;
            margin-bottom: 30px;
            margin-top: 30px;
        }
        &__list {
            margin: 0;
            padding: 0;
            li {
                list-style: none;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: #fff;
                border-radius: 23px;
                margin-bottom: 15px;
                p {
                    font-family: 'filsonproregularregular';
                    font-size: 20px;
                    line-height: 30px;
                    color: $black;
                    img {
                        display: none;
                    }
                    strong {
                        font-weight: normal;
                    }
                    span {
                        display: inline-block;
                        background: $pink;
                        border-radius: 23px;
                        width: 180px;
                        text-align: center;
                        height: 75px;
                        font-family: 'Fredoka One', cursive;
                        line-height: 75px;
                        font-size: 22px;
                        color: #fff;
                        margin-right: 20px;
                    }
                }
                img {
                    width: 48px;
                    margin-right: 15px;
                }
            }
        }
    }
}
@media (max-width:1200px) and (min-width: 767px){
    .the-impact .partners li{
        width: 15vw;
        height: 15vw;
    }
}
@media(max-width: 768px) {
    .the-impact {
        padding-bottom: 0;
    }
    .the-impact .map-home {
        max-width: 100%;
        overflow: hidden;
        img {
            width: 120%;
            max-width: 120%;
            display: block;
            margin-left: -10%;
        }
        .map-home-toltip {
            display: none;
        }
    }
    .the-impact__imgs .the-cloud-two {
        left: -150px;
        bottom: 130px;
    }
    .the-impact__description {
        font-size: 18px;
        line-height: 30px;
        margin-bottom: 30px;
        margin-top: 0;
    }
    .the-impact .partners {
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .the-impact .partners li {
        width: calc(50% - 30px);
        height: auto;
        margin: 0 15px 30px 15px;
        max-width: 100%;
        aspect-ratio: 1;
    }
    .the-impact .top-contributors__title {
        font-size: 32px;
    }
    .the-impact .top-contributors__list li {
        img {
            display: none;
        }
        p {
            font-size: 12px;
            line-height: 14px;
            width: 100%;
            img {
                display: block;
                width: 30px;
                border-radius: 50%;
                margin: 0;
            }
            strong {
                font-weight: normal;
                padding: 20px 20px;
                display: block;
                width: 100%;
            }
            span {
                font-size: 22px;
                line-height: 32px;
                width: 100%;
                height: auto;
                padding: 10px 20px;
                margin: 0;
                box-sizing: border-box;
                border-radius: 23px 23px 0 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
        }
    }
}

</style>
