main .hero {
    display: flex;
    position: relative;
}

main .hero .hero-title {
    max-width: 50%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:30px;
    padding: 0 20px;
}

main .hero .hero-title img {
    max-width: 96.74px;
    width: 100%;
    height: 104px;
    transition: all .5s;
}

main .hero .hero-title img:hover {
    -webkit-animation: flip-vertical-right 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: flip-vertical-right 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

/*animation flip-vertical-right*/

@-webkit-keyframes flip-vertical-right {
    0% {
      -webkit-transform: rotateY(0);
              transform: rotateY(0);
    }
    100% {
      -webkit-transform: rotateY(180deg);
              transform: rotateY(180deg);
    }
}

@keyframes flip-vertical-right {
    0% {
      -webkit-transform: rotateY(0);
              transform: rotateY(0);
    }
    100% {
      -webkit-transform: rotateY(180deg);
              transform: rotateY(180deg);
    }
}

main .hero .hero-title p {
    text-align: center;
    font-family: Mali;
    font-weight: 500;
    font-size: 2.5em;
    line-height: 59px;
    max-width: 402px;
    width: 100%;
}

main .hero .hero-title p strong {
    color: var(--btn);
}

main .hero .hero-title a {
    background-color: #25A710;
    font-size: 1.2em;
}

main .hero .hero-title a:hover {
    filter: drop-shadow(1px 1px 3px rgb(64, 131, 25)) ;
}

main .hero .hero-pic {
    margin: 61px 20px 0;
    background-image: url(../img/hero/bg-hero.jpeg);
    background-size: cover;
    max-width: 530px;
    width: 100%;
    height: 530px;
    border-radius: 50%;
    position: relative;
}

main .hero .hero-pic::before {
    content: " ";
    max-width: 127px;
    width: 100%;
    height: 127px;
    border-radius: 50%;
    background-color: var(--yellow);
    position: absolute;
    bottom: 0;
    transition: all .3s;
} 

main .hero .hero-pic:hover::before {
    background-color: var(--btn);
}

main .hero .hero-pic::after {
    content: " ";
    max-width:78px;
    width: 100%;
    height: 78px;
    border-radius: 50%;
    background-color: var(--btn);
    position: absolute;
    bottom: -10px;
    left: 70px;
    transition: all .3s;
} 

main .hero .hero-pic:hover:hover::after {
    background-color: var(--yellow);
}