.phn-btn {
    padding: 0 25px 0 20px;
    gap: 10px;
    display: none;
}

.phn-btn:focus,
.phn-btn:hover{
    color: #fff;
    opacity: 0.8;
}

.phn-btn:after {
    display: none;
}

.phn-btn i{
    animation: oscillate-rotation 1s infinite ease-in-out;
}

@keyframes oscillate-rotation {
    0% {
        transform: rotate(0) scale(1) skew(0deg);
    }

    10% {
        transform: rotate(-25deg) scale(1) skew(0deg);
    }

    20% {
        transform: rotate(25deg) scale(1) skew(0deg);
    }

    30% {
        transform: rotate(-25deg) scale(1) skew(0deg);
    }

    40% {
        transform: rotate(25deg) scale(1) skew(0deg);
    }

    50% {
        transform: rotate(0) scale(1) skew(0deg);
    }

    100% {
        transform: rotate(0) scale(1) skew(0deg);
    }
}


/* Media Query */
@media(max-width: 767px){
    .phn-btn{
        display: flex;
    }

    .hero .container {
        text-align: center;
    }

    .hero .content {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .hero h1 span{
        font-family: var(--heading-font);
        padding: 5px 10px;
        display: inline-block;
        margin-right: 7px;
        border-radius: 40px;
        background: #041709;
        background: linear-gradient(0deg, rgba(4, 23, 9, 1) 0%, rgba(29, 57, 35, 1) 100%);
    }

    .hero .theme li {
        justify-content: center;
    }

    .hero .theme li:before{
        opacity: 60%;
    }
}

@media(max-width: 381px){
    section.hero .theme-heading h1 {
        font-size: 29px;
    }
}