/*=========================
Icon-box-style-1
=============================*/
.powerhour-icon-box-style-1 {
    display: block;
    padding: 42px;
    background: var(--color-theme-primary-light);
    position: relative;
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.powerhour-icon-box-style-1:hover {
    background: var(--color-theme-primary);
}

.powerhour-icon-box-style-1 .icon-box {
    border: none;
    background: var(--global-body-lightbg);
    text-align: center;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: one-animated 10s infinite;
    margin-bottom: 16px;
}

.powerhour-icon-box-style-1 .icon-box svg {
    height: auto;
}

.powerhour-icon-box-style-1 .icon-box-title,
.powerhour-icon-box-style-1 .icon-box-desc,
.powerhour-icon-box-style-1 .icon-box-title:before {
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.powerhour-icon-box-style-1 .icon-box-title {
    display: inline-block;
    margin-bottom: 16px;
    font-style: italic;
    color: var(--color-theme-primary);
    position: relative;
    font-family: var(--second-font-family);
}

.powerhour-icon-box-style-1 .icon-box-title:before {
    content: "";
    width: 100%;
    height: 1px;
    background: var(--color-theme-primary);
    position: absolute;
    left: 0;
    bottom: 5px;
    transform: translate(0, -50%);
}

.powerhour-icon-box-style-1:hover .icon-box-title {
    color: var(--color-theme-primary-light);
}

.powerhour-icon-box-style-1:hover .icon-box-title:before {
    background: var(--color-theme-primary-light);
}

.powerhour-icon-box-style-1:hover .icon-box-desc {
    color: var(--color-theme-grey);
}



@keyframes one-animated {
    0% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }

    25% {
        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
    }

    50% {
        border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
    }

    75% {
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }

}

@keyframes two-animated {
    0% {
        border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
    }

    25% {
        border-radius: 40% 80% 30% 90% / 72% 65% 35% 28%;
    }

    50% {
        border-radius: 65% 35% 45% 55% / 22% 48% 52% 78%;
    }

    75% {
        border-radius: 24% 76% 10% 90% / 44% 68% 32% 56%;
    }

}

@keyframes three-animated {
    0% {
        border-radius: 12% 88% 40% 40% / 20% 15% 85% 80%;
    }

    25% {
        border-radius: 72% 28% 30% 90% / 15% 46% 54% 85%;
    }

    50% {
        border-radius: 12% 88% 40% 40% / 20% 15% 85% 80%;
    }

    75% {
        border-radius: 18% 82% 10% 90% / 24% 68% 32% 76%;
    }

}


/*=========================
Icon-box-style-2
=============================*/
.powerhour-icon-box-style-2 {
    display: flex;
    align-items: center;
    background: transparent;
}

.powerhour-icon-box-style-2 .icon-box {
    margin-right: 30px;
    border: none;
    background: var(--color-theme-primary-light);
    text-align: center;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    position: relative;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: one-animated 10s infinite;
}

.powerhour-icon-box-style-2 .icon-box svg {
    height: 30px;
}

.powerhour-icon-box-style-2 .icon-box-content {
    flex: 1;
}

/*=============
responsive
===================*/

@media (max-width: 1400px) and (min-width: 1025px) {
    .powerhour-icon-box-style-2 .icon-box {
        height: 60px;
        width: 60px;
    }
}

@media (max-width: 359px) {
    .powerhour-icon-box-style-2 {
        display: block;
    }

    .powerhour-icon-box-style-2 .icon-box-content {
        margin-top: 15px;
    }
}

/*=========================
Icon-box-style-3
=============================*/
.powerhour-icon-box-style-3 {
    display: block;
    text-align: center;
}

.powerhour-icon-box-style-3 .icon-box {
    border: none;
    background: var(--color-theme-primary-light);
    text-align: center;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: one-animated 10s infinite;
    margin: 0 auto;
}

.powerhour-icon-box-style-3 .icon-box svg {
    width: 65px;
}

.powerhour-icon-box-style-3 .icon-box-title {
    margin-top: 16px;
    color: var(--color-theme-primary);
}


/*=========================
Icon-box-style-4
=============================*/
.powerhour-icon-box-style-4 {
    display: block;
    padding: 32px;
    background: var(--color-theme-primary-light);
    position: relative;
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.powerhour-icon-box-style-4:hover {
    background: var(--color-theme-primary);
}

.powerhour-icon-box-style-4 .icon-box {
    border: none;
    background: var(--global-body-lightbg);
    text-align: center;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: one-animated 10s infinite;
    margin-bottom: 16px;
}

.powerhour-icon-box-style-4 .icon-box svg {
    height: auto;
}

.powerhour-icon-box-style-4 .icon-box-title,
.powerhour-icon-box-style-4 .icon-box-desc,
.powerhour-icon-box-style-4 .icon-box-title .highlighted-text:before {
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.powerhour-icon-box-style-4 .icon-box-title {
    display: inline-block;
    color: var(--global-font-title);
    position: relative;
    font-family: var(--highlight-font-family);
}

.powerhour-icon-box-style-4 .icon-box-title span.highlighted-text {
    position: relative;
    display: inline-block;
    font-family: var(--second-font-family);
    font-style: italic;
    font-weight: var(--font-weight-medium);
}

.powerhour-icon-box-style-4 .icon-box-title span.highlighted-text:before {
    content: "";
    width: 100%;
    height: 1px;
    background: var(--global-font-title);
    position: absolute;
    left: 0;
    bottom: 5px;
    transform: translate(0, -50%);
}

.powerhour-icon-box-style-4:hover .icon-box-title {
    color: var(--color-theme-white);
}

.powerhour-icon-box-style-4:hover .icon-box-title span.highlighted-text:before {
    background: var(--color-theme-white);
}

/*=========================
Icon-box-style-5
=============================*/
.powerhour-icon-box-style-5 {
    display: block;
    position: relative;
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

.powerhour-icon-box-style-5 .icon-box {
    display: flex;
    align-content: center;
    margin-bottom: 10px;
}

.powerhour-icon-box-style-5 .icon-box .icon {
    border: none;
    background: var(--color-theme-primary-light);
    text-align: center;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    position: relative;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: one-animated 10s infinite;
    margin-right: 8px;
}

.powerhour-icon-box-style-5 .icon-box svg {
    height: 20px;
}

.powerhour-icon-box-style-5 .icon-box-title {
    display: inline-block;
    font-style: italic;
    color: var(--global-font-title);
    position: relative;
    font-family: var(--second-font-family);
}

.powerhour-icon-box-style-5 .icon-box-title:before {
    content: "";
    width: 100%;
    height: 1px;
    background: var(--global-font-title);
    position: absolute;
    left: 0;
    bottom: 1px;
    transform: translate(0, -50%);
}

@media (max-width: 767px) {
    .powerhour-icon-box-style-4 {
        text-align: center;
    }

    .powerhour-icon-box-style-4 .icon-box {
        margin: 0 auto;
    }
}