.img_border{
    border: 2px solid var(--color-mp-green-transparent);
    padding: 5px;
}



.hero .hero-image .shape-1,
.hero .hero-image .shape-2,
.hero .hero-image .shape-3,
.hero .hero-image .shape-4{
    position: absolute;
    border-radius: 100% 100% 100% 100%/100% 100% 100% 100%;
    z-index: initial;
}

.hero .hero-image .shape-1 {
    width: 605px;
    height: 605px;
    background-color: color-mix(in srgb, var(--color-mp-green), transparent 90%);
    top:  10px;
    right:  10px;
    animation: morphOvalOne 40s linear infinite reverse;
}

.hero .hero-image .shape-2 {
    width: 602px;
    height: 602px;
    background-color: color-mix(in srgb, var(--color-mp-brown), transparent 95%);
    bottom: 10px;
    left: 10px;
    animation: morphOvalTwo 35s linear infinite reverse;
}

.hero .hero-image .shape-3 {
    width: 302px;
    height: 302px;
    background-color: color-mix(in srgb, var(--color-mp-green), transparent 95%);
    top: 100px;
    left: -150px;
    animation: morphOvalChaos 50s linear infinite reverse;
}

.hero .hero-image .shape-4 {
    width: 272px;
    height: 272px;
    background-color: color-mix(in srgb, var(--color-mp-olive), transparent 91%);
    bottom: 40px;
    right: -70px;
    animation: morphOvalTwo 25s linear infinite reverse;
}

/* Media  */

@media (max-width: 1399px) {
    .hero .hero-image .shape-1 {
        width: 495px;
        height: 495px;
        top:  20px;
        right: 20px;
    }

    .hero .hero-image .shape-2 {
        width: 510px;
        height: 510px;
        bottom: 15px;
        left: 15px;
    }

    .hero .hero-image .shape-3 {
        width: 202px;
        height: 202px;
        top: 100px;
        left: -150px;
    }

    .hero .hero-image .shape-4 {
        width: 172px;
        height: 172px;
        bottom: 40px;
        right: -70px;

    }
}

@media (max-width: 1199px) {
    .hero .hero-image .shape-1 {
        width: 404px;
        height: 404px;
        top:  30px;
        right: 30px;
    }

    .hero .hero-image .shape-2 {
        width: 415px;
        height: 415px;
        bottom: 25px;
        left: 25px;
    }

    .hero .hero-image .shape-3 {
        width: 160px;
        height: 160px;
        top: 120px;
        left: -80px;
    }

    .hero .hero-image .shape-4 {
        width: 132px;
        height: 132px;
        bottom: 30px;
        right: -50px;

    }
}

@media (max-width: 991px) {
    .hero .hero-image .shape-1 {
        width: 645px;
        height: 645px;
        top:  10px;
        right:  10px;
    }

    .hero .hero-image .shape-2 {
        width: 652px;
        height: 652px;
        bottom: 10px;
        left: 10px;
    }

    .hero .hero-image .shape-3 {
        width: 302px;
        height: 302px;
        top: 100px;
        left: -150px;
    }

    .hero .hero-image .shape-4 {
        width: 272px;
        height: 272px;
        bottom: 40px;
        right: -70px;
    }
}

@media (max-width: 768px) {
    .hero .hero-image .shape-1 {
        width: 465px;
        height: 465px;
        top:  20px;
        right: 20px;
    }

    .hero .hero-image .shape-2 {
        width: 470px;
        height: 470px;
        bottom: 15px;
        left: 15px;
    }

    .hero .hero-image .shape-3 {
        width: 202px;
        height: 202px;
        top: 100px;
        left: -150px;
    }

    .hero .hero-image .shape-4 {
        width: 172px;
        height: 172px;
        bottom: 40px;
        right: -70px;

    }
}

@media (max-width: 430px) {
    .hero .hero-image .shape-1 {
        width: 350px;
        height: 350px;
        top:  20px;
        right: 20px;
    }

    .hero .hero-image .shape-2 {
        width: 365px;
        height: 365px;
        bottom: 15px;
        left: 15px;
    }

    .hero .hero-image .shape-3 {
        width: 102px;
        height: 102px;
        top: 100px;
        left: -30px;
    }

    .hero .hero-image .shape-4 {
        width:122px;
        height: 122px;
        bottom: 40px;
        right: -40px;

    }
}


@keyframes morphOvalOne {
    0% {
        transform: scale(1, 1) rotate(0deg);
    }
    12.5% {
        transform: scale(1.01, 0.99) rotate(20deg);
    }
    25% {
        transform: scale(0.99, 1.01) rotate(40deg);
    }
    37.5% {
        transform: scale(1.01, 0.99) rotate(80deg);
    }
    50% {
        transform: scale(0.99, 1.01) rotate(160deg);
    }
    62.5% {
        transform: scale(1.01, 0.99) rotate(220deg);
    }
    75% {
        transform: scale(0.99, 1.01) rotate(290deg);
    }
    87.5% {
        transform: scale(1.01, 0.99) rotate(330deg);
    }
    100% {
        transform: scale(1, 1) rotate(360deg);
    }
}

@keyframes morphOvalTwo {
    0% {
        transform: scale(1, 1) rotate(0deg);
    }
    10% {
        transform: scale(0.98, 1.02) rotate(35deg);
    }
    25% {
        transform: scale(1.02, 0.98) rotate(15deg);
    }
    35% {
        transform: scale(0.97, 1.03) rotate(60deg);
    }
    50% {
        transform: scale(1.03, 0.97) rotate(135deg);
    }
    65% {
        transform: scale(0.99, 1.01) rotate(100deg);
    }
    75% {
        transform: scale(1.01, 0.99) rotate(220deg);
    }
    90% {
        transform: scale(0.98, 1.02) rotate(280deg);
    }
    100% {
        transform: scale(1, 1) rotate(360deg);
    }
}

@keyframes morphOvalChaos {
    0% {
        transform: scale(1, 1) rotate(0deg);
    }
    10% {
        transform: scale(0.96, 1.04) rotate(35deg);
    }
    25% {
        transform: scale(1.04, 0.96) rotate(15deg);
    }
    35% {
        transform: scale(0.94, 1.06) rotate(60deg);
    }
    50% {
        transform: scale(1.06, 0.94) rotate(135deg);
    }
    65% {
        transform: scale(0.98, 1.02) rotate(100deg);
    }
    75% {
        transform: scale(1.02, 0.98) rotate(220deg);
    }
    90% {
        transform: scale(0.96, 1.04) rotate(280deg);
    }
    100% {
        transform: scale(1, 1) rotate(360deg);
    }
}