/*
Theme Name: Btheme one
Theme URI: https://hostbank.in
Author: Abhay Kumar
Author URI: https://hostbank.in
Description: Blog Theme for MilesWeb.
Version: 1.0.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Blog theme One
Tags: Blog theme one
*/

/*reset*/

/* variables */

/* variables */

@-webkit-keyframes circle {
    0%,
    40% {
        opacity: 1
    }
    to {
        width: 200%;
        height: 200%;
        opacity: 0
    }
}

@keyframes circle {
    0%,
    40% {
        opacity: 1
    }
    to {
        width: 200%;
        height: 200%;
        opacity: 0
    }
}

:root {
    --ttl_clr: #123455;
    --sub_ttl_clr: #394E63;
    --secondary_clr: #505B86;
    --light_clr: #D2D2DC;
    --input_clr: #B3CDDF;
    --btn_clr: #597BF2;
    --box_bg: #EDEFFF;
    --bg_gradient: #007fff;
    --bg_gradient_cat: linear-gradient(117.79deg, #EAF8FF 21.3%, #C5E2FF 93.11%);
    --bg_gradient_single: linear-gradient(117.79deg, #2F77E2 21.3%, #4158CF 93.11%);
    --heading_fz: 40px;
    --sub_heading_fz: 18px;
    --ttl_fz: 18px;
    --sub_ttl_fz: 16px;
    --head_three: 22px;
    --head_three_lg: 30px;
    --h20-size: 20px;
    --p14-size: 14px;
    --aclr_color: #4066E3;
    --box_1_clr: #D0D0FF;
    --box_2_clr: #C9E5FF;
    --box_3_clr: #6E6EA4;
    --box_4_clr: #8585D9;
    --box_5_clr: #f4f3ff;
    --link_clr: #597BF2;
    --p_25: 25px;
    --pt_120: 120px;
    --pb_120: 120px;
    --pt_90: 90px;
    --pb_90: 90px;
    --pt_60: 60px;
    --pb_60: 60px;
    --pt_45: 45px;
    --pb_45: 45px;
    --pt_30: 30px;
    --pb_30: 30px;
    --pr_30: 30px;
    --pr_45: 45px;
    --pl_30: 30px;
    --pt_22: 22px;
    --pb_22: 22px;
    --pr_22: 22px;
    --pl_22: 22px;
    --pt_16: 16px;
    --pb_16: 16px;
    --pr_16: 16px;
    --pl_16: 16px;
    --pt_10: 10px;
    --pb_10: 10px;
    --pr_10: 10px;
    --pl_10: 10px;
    --pt_6: 6px;
    --pb_6: 6px;
    --pr_6: 6px;
    --pl_6: 6px
}

@media (max-width:1180px) {
    :root {
        --heading_fz: 35px;
        --sub_heading_fz: 16px;
        --sub_ttl_fz: 14px;
        --p_25: 18px;
        --pt_90: 60px;
        --pb_90: 60px;
        --pt_60: 40px;
        --pb_60: 40px;
        --pt_30: 25px;
        --pb_30: 25px;
        --pr_30: 25px;
        --pl_30: 25px
    }
}

@media (max-width:950px) {
    :root {
        --heading_fz: 28px;
        --sub_heading_fz: 15px;
        --ttl_fz: 16px;
        --head_three: 20px;
        --head_three_lg: 26px;
        --h20-size: 18px;
        --pt_90: 45px;
        --pb_90: 45px;
        --pt_60: 30px;
        --pb_60: 30px;
        --pt_30: 20px;
        --pb_30: 20px;
        --pr_30: 20px;
        --pr_45: 25px;
        --pl_30: 20px;
        --pt_22: 16px;
        --pb_22: 16px;
        --pr_22: 18px;
        --pl_22: 18px;
        --pt_16: 10px;
        --pb_16: 10px;
        --pr_16: 10px;
        --pl_16: 10px;
        --pt_10: 6px;
        --pb_10: 6px;
        --pr_10: 6px;
        --pl_10: 6px
    }
}

@media (max-width:768px) {
    :root {
        --head_three_lg: 18px;
        --head_three: 16px;
        --p_25: 13px;
        --pt_90: 35px;
        --pb_90: 35px;
        --pt_60: 25px;
        --pb_60: 25px;
        --pt_45: 25px;
        --pb_45: 25px;
        --pr_45: 0px
    }
}

@media (max-width:450px) {
    :root {
        --heading_fz: 22px
    }
}

*,
body {
    font-family: "DM Sans", sans-serif
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    font-size: 15px;
    color: var(--sub_ttl_clr);
    line-height: 1.4
}

a {
    display: inline-block;
    text-decoration: none;
    color: var(--ttl_clr)
}

.aclr {
    color: #4066e3
}

.aclr:hover {
    text-decoration: underline
}

li {
    list-style: none
}

.img-fluid,
img {
    max-width: 100%;
    height: auto
}

.wv-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px
}

.wv-flex {
    display: flex
}

.wv-inline-block {
    display: inline-block
}

.wv-h2,
.wv-h2 a {
    font-size: var(--heading_fz);
    font-weight: 700;
    margin: auto;
    color: var(--ttl_clr)
}

.wv-p,
.wv-p p {
    color: var(--sub_ttl_clr);
    font-size: var(--sub_heading_fz);
    padding-top: 15px;
    margin: auto
}

.wv-h4 {
    font-weight: 800
}

.wv-h4,
.wv-h4 a {
    font-size: var(--ttl_fz)
}

.wv-h4,
.wv-h4 a,
.wv-p14,
.wv-p14 a,
.wv-p14 p {
    color: var(--ttl_clr);
    margin: 0
}

.wv-h4 a {
    font-weight: 500
}

.wv-p14,
.wv-p14 a,
.wv-p14 p {
    font-size: var(--p14-size);
    font-weight: 400
}

.wv-h20 {
    font-size: var(--h20-size);
    font-weight: 600;
    color: var(--ttl_clr)
}

.wv-h4-p,
.wv-h4-p a {
    color: var(--sub_ttl_clr);
    font-size: var(--sub_ttl_fz);
    margin: 0;
    font-weight: 400
}

.wv-h3,
.wv-h3 a,
.wv-h3-lg {
    font-weight: 600;
    font-size: var(--head_three);
    color: var(--ttl_clr);
    margin: 0
}

.wv-h3-lg {
    font-weight: 700;
    font-size: var(--head_three_lg)
}

.mb-row,
.wv-row {
    display: flex;
    flex-wrap: wrap
}

.wv-col-7 {
    width: 58.33%;
    padding: 0 10px
}

.wv-col-5,
.wv-col-6 {
    width: 41.66%;
    padding: 0 10px
}

.wv-col-6 {
    width: 50%
}

.wv-col-3,
.wv-col-4 {
    width: 25%;
    padding: 0 10px
}

.wv-col-4 {
    width: 33.33%
}

.wv-col-8,
.wv-col-9 {
    width: 66.66%;
    padding: 0 10px
}

.wv-col-9 {
    width: 75%
}

.p-25 {
    padding: var(--p_25)
}

.pt-120 {
    padding-top: var(--pt_120)
}

.pt-90 {
    padding-top: var(--pt_90)
}

.pt-60 {
    padding-top: var(--pt_60)
}

.pt-45 {
    padding-top: var(--pt_45)
}

.pt-30 {
    padding-top: var(--pt_30)
}

.pt-22 {
    padding-top: var(--pt_22)
}

.pt-16 {
    padding-top: var(--pt_16)
}

.pt-10 {
    padding-top: var(--pt_10)
}

.pt-6 {
    padding-top: var(--pt_6)
}

.pb-120 {
    padding-bottom: var(--pb_120)
}

.pb-90 {
    padding-bottom: var(--pb_90)
}

.pb-60 {
    padding-bottom: var(--pb_60)
}

.pb-45 {
    padding-bottom: var(--pb_45)
}

.pb-30 {
    padding-bottom: var(--pb_30)
}

.pb-22 {
    padding-bottom: var(--pb_22)
}

.pb-16 {
    padding-bottom: var(--pb_16)
}

.pb-10 {
    padding-bottom: var(--pb_10)
}

.pb-6 {
    padding-bottom: var(--pb_6)
}

.pr-45 {
    padding-right: var(--pr_45)
}

.pr-30 {
    padding-right: var(--pr_30)
}

.pr-22 {
    padding-right: var(--pr_22)
}

.pr-16 {
    padding-right: var(--pr_16)
}

.pr-10 {
    padding-right: var(--pr_10)
}

.pr-6 {
    padding-right: var(--pr_6)
}

.pl-30 {
    padding-left: var(--pl_30)
}

.pl-22 {
    padding-left: var(--pl_22)
}

.pl-16 {
    padding-left: var(--pl_16)
}

.pl-10 {
    padding-left: var(--pl_10)
}

.pl-6 {
    padding-left: var(--pl_6)
}

.ml0 {
    margin-left: 0
}

.mr0 {
    margin-right: 0
}

.m0 {
    margin: 0
}

.m-auto {
    margin: 0 auto
}

.input_clr,
.input_clr::placeholder {
    color: var(--aclr_color)
}

.btn_clr {
    color: var(--btn_clr)
}

.mb-img-hover figure,
.pos-relative {
    position: relative
}

.box_1_clr {
    background: var(--box_1_clr)
}

.box_2_clr {
    background: var(--box_2_clr)
}

.box_3_clr {
    background: var(--box_3_clr)
}

.box_4_clr {
    background: var(--box_4_clr)
}

.box_5_clr {
    background: var(--box_5_clr) !important
}

.secondary_clr,
.secondary_clr a,
.secondary_clr p {
    color: var(--secondary_clr)
}

.bg_gradient,
.ub-articles-list li:after {
    background: var(--bg_gradient)
}

.bg_gradient_cat {
    background: var(--bg_gradient_cat)
}

.bg_gradient_single {
    background: var(--bg_gradient_single)
}

.wv_br_10 {
    border-radius: 10px
}

.ub-col-sticky {
    position: sticky;
    top: 115px
}

.p_0 {
    padding: 0
}

.fw_500 {
    font-weight: 500 !important
}

.mw-row-align {
    align-items: center
}

.sections-space {
    padding: 45px 0
}

.title-center {
    text-align: center;
    margin: 0 auto
}

.title-right {
    text-align: right
}

.title-left {
    text-align: left
}

.fff {
    color: #fff !important
}

.wv-row-center {
    justify-content: center
}

.mw-btn-wrapr {
    margin: 40px 0 10px;
    padding: 0 15px
}

.mw-btn,
.mw-btn2 {
    cursor: pointer;
    font-size: 18px;
    border-radius: 7px;
    font-weight: 500;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 18px 75px;
    transition: all .3s ease-in-out
}

.mw-btn {
    background: #007fff;
    color: #fff
}

.mw-btn:hover {
    transform: translate(0, -4px);
    background: #007fff
}

.mw-btn2 {
    background: #fff;
    color: #007fff
}

.mw-btn2:hover {
    background: #fff;
    transform: translate(0, -4px)
}

.mx-950 {
    max-width: 950px
}

.wide-p30 {
    padding: 30px !important
}

@media (max-width:1024px) {
    .wv-col-4 {
        width: 50%;
        margin-bottom: 18px
    }
}

@media (max-width:950px) {
    .wv-h2 {
        max-width: 610px
    }
}

@media (max-width:768px) {
    .mw-btn-wrapr {
        margin: 20px 0 10px
    }
    .mw-btn,
    .mw-btn2 {
        padding: 16px 48px
    }
    .wv-p,
    .wv-p p {
        padding-top: 5px
    }
    .sections-space {
        padding: 25px 0
    }
    .wv-col-3,
    .wv-col-5,
    .wv-col-6,
    .wv-col-7,
    .wv-col-8,
    .wv-col-9 {
        width: 100%
    }
    .pb-md-25 {
        padding-bottom: 25px
    }
    .mb-md-25 {
        margin-bottom: 25px
    }
}

@media (max-width:550px) {
    .wv-col-4 {
        width: 100%
    }
    .mw-btn,
    .mw-btn2 {
        padding: 12px 18px
    }
    .pb-md-25 {
        padding-bottom: 20px
    }
    .mb-md-25 {
        margin-bottom: 20px
    }
}

@media (min-width:1600px) {
    .wv-container {
        max-width: 1550px
    }
    .wv-container-min {
        max-width: 1400px;
        margin: 0 auto
    }
}

.ub-plugins-box {
    flex: 1
}

.ub-plugins>.wv-container>.wv-row>.wv-col-9,
.ub-plugins>.wv-container>.wv-row>.wv-col-9>.wv-row>.wv-col-6 {
    padding-left: 0;
    padding-right: 32px
}

.ub-plugins>.wv-container>.wv-row>.wv-col-3 {
    padding-right: 0
}

.ub-help-box {
    box-shadow: rgba(100, 100, 111, .2)0 7px 29px 0;
    max-width: 292px;
    margin: 0 0 0 auto
}

.ub-help-box>.wv-h4 {
    font-weight: 500
}

.ub-help-box>.wv-row {
    max-width: 252px;
    margin: auto
}

.ub-help-box-form .navsrch-form input {
    padding-right: 23px
}

@media (max-width:991px) {
    .ub-plugins>.wv-container>.wv-row>.wv-col-9 {
        padding: 0
    }
    .ub-plugins>.wv-container>.wv-row>.wv-col-9>.wv-row>.wv-col-6 {
        padding-right: 20px
    }
    .ub-help-box {
        padding: 22px 12px
    }
}

@media (max-width:768px) {
    .ub-plugins-row .wv-col-6 {
        width: 50%;
        padding-inline: 15px !important;
        padding-bottom: 40px
    }
    .ub-categories .wv-col-4 {
        margin: 0
    }
    .ub-plugins>.wv-container>.wv-row>.wv-col-3 {
        display: none
    }
}

@media (max-width:530px) {
    .ub-plugins-row .wv-col-6 {
        width: 100%;
        margin: 0
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .ub-plugins>.wv-container>.wv-row>.wv-col-3 {
        width: 32%
    }
    .ub-plugins>.wv-container>.wv-row>.wv-col-9 {
        width: 68%
    }
}

.page-numbers,
.paginate-links {
    display: flex;
    justify-content: center
}

.paginate-links {
    max-width: 300px;
    margin: 20px auto
}

.page-numbers {
    padding: 18px 14px;
    color: var(--ttl_clr);
    border: 0;
    margin: 0 6px;
    border-radius: 100%;
    background: #ececec;
    width: 37px;
    height: 37px;
    align-content: center;
    align-items: center
}

.current {
    color: #fff;
    background: #007fff
}

.next {
    padding: 8px 30px;
    border-radius: 0;
    color: var(--ttl_clr);
    font-size: var(--sub_ttl_fz)
}

.next:hover {
    opacity: .8
}

.next,
.prev.page-numbers {
    background: 0 0
}

@media (max-width:550px) {
    .page-numbers {
        margin: 0 4px
    }
    .next {
        padding: 8px 10px
    }
}

.ub-banner {
    color: #fff
}

.ub-banner .wv-row {
    padding-inline: 0
}

.ub-banner p {
    color: #fff;
    padding-top: 12px
}

.ub-articles-box {
    box-shadow: rgba(100, 100, 111, .2)0 7px 29px 0;
    padding: 45px 42px;
    max-width: 1068px
}

.ub-articles-list li {
    width: 33.33%;
    padding-inline: 14px 32px;
    margin-bottom: 36px;
    color: var(--sub_ttl_clr);
    font-size: var(--p14-size);
    position: relative
}

.ub-articles-list li:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    border-radius: 20px;
    transition: all .6s ease-in-out;
    max-height: 0
}

.ub-articles-list li:hover:after {
    bottom: 0;
    max-height: 100px
}

.ub-articles-list li a {
    color: var(--sub_ttl_clr);
    font-size: var(--sub_ttl_fz);
    font-weight: 400
}

.ub-articles-btn span {
    transition: all .3s ease-in-out
}

.ub-articles-btn:hover span {
    transform: translate(4px, 0)
}

.mb-img-hover figure::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    content: "";
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, .2);
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0
}

.mb-img-hover figure:hover::before {
    -webkit-animation: circle .75s;
    animation: circle .75s
}

.bu-subscribe-input {
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 5px;
    padding: 26px 30px;
    font-size: 15px;
    width: 100%
}

.ub-subscribe-btn {
    border: 0
}

.ub-categories-box {
    border: 1px solid #e7e7e7;
    background: #fff;
    padding: 56px 28px;
    transition: all .3s ease-in-out
}

.ub-categories-box:hover {
    border-color: #afafaf
}

.ub-deals-box {
    overflow: hidden;
    position: relative;
    padding-inline: 80px;
    border-radius: 40px
}

.ub-deals-box:after,
.ub-deals-box:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0
}

.ub-deals-box:before {
    background: url(../../uploads/2024/blog-images/exciting-deals.png)no-repeat;
    z-index: -2;
    width: 484px;
    height: 484px
}

.ub-deals-box:after {
    left: 0;
    bottom: 0;
    z-index: -4;
    background: #007fff
}

@media (max-width:991px) {
    .ub-banner .wv-row {
        padding-inline: 20px
    }
    .ub-articles-box {
        margin-right: 15px;
        padding: 35px 26px
    }
    .ub-articles-list li {
        padding-right: 20px;
        width: 50%
    }
    .ub-deals-box {
        padding-inline: 28px 14px
    }
}

@media (max-width:768px) {
    .ub-banner .wv-row {
        padding: 48px 30px 5px
    }
    .ub-articles-box,
    .ub-categories .wv-col-4 {
        margin: 0
    }
    .ub-categories-box {
        padding: 30px 22px
    }
    .bu-subscribe-input {
        padding: 20px 24px
    }
}

@media (max-width:350px) {
    .ub-banner .wv-row {
        padding: 36px 15px 10px
    }
}

.pagination-prime {
    display: flex;
    justify-content: center;
    align-items: center
}

.in-author-img img {
    border-radius: 50%
}

.post-edit-link-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2000;
    transform: rotate(-90deg);
    transform-origin: left top
}

.post-edit-link-wrapper a {
    display: block;
    color: #fff;
    background: #069877;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 5px;
    letter-spacing: 1px
}

.mb-themes-img img,
.ub-banner-img img {
    border-radius: 10px
}

.ub-categories-box-a,
.wv-p14 {
    position: relative
}

.ub-categories-box-a:after,
.wv-p14:after {
    content: "";
    position: absolute;
    left: 0;
    background: var(--bg_gradient);
    bottom: -2px;
    height: 2px;
    border-radius: 20px;
    transition: all .6s ease-in-out;
    max-width: 0;
    width: 100%
}

.mw-side-cat:hover .wv-p14:after,
.ub-categories-box:hover .ub-categories-box-a:after {
    bottom: -2px;
    max-width: 100%
}

.main-article ol,
.main-article ul,
.wp-block-list {
    padding-bottom: 10px
}

.kb-post-quote-prim {
    background: #d5eaff;
    padding: 30px 35px;
    position: relative;
    z-index: 5;
    border-radius: 13px;
    margin-bottom: 15px
}

@media screen and (max-width:700px) {
    .kb-post-quote-prim {
        padding: 15px
    }
}

/* 404 */

.fzf-banner {
    color: #fff
}

.dh-search-btn {
    border: 0;
    height: 60px;
    padding: 20px 55px;
    margin-left: 4px
}

.dh-ban-input {
    border: 1px solid #bcbad7;
    background: no-repeat;
    padding: 22px 24px;
    height: 60px;
    width: 100%;
    max-width: 735px;
    border-radius: 7px;
    font-size: 16px;
    color: #fff
}

.dh-ban-input:focus {
    outline: unset;
    border-color: #fff
}

.dh-ban-input::placeholder {
    color: #fff
}

.type_ {
    color: #fff;
    font-size: 18px;
    padding: 30px 0
}

.Bk_btn {
    border: 1px solid #fff
}

@media (max-width:950px) {
    .dh-search-btn {
        margin-top: 10px
    }
}

@media (max-width:600px) {
    .dh-search-btn {
        height: 44px;
        padding: 13px 34px
    }
}

.elvn-author2,
.elvn-author2 a {
    color: var(--secondary_clr);
    font-weight: 400;
    font-size: 14px
}

@media (max-width:1100px) {
    .ca-col-1 .wv-col-3 {
        width: 50%;
        margin-bottom: 20px;
        padding-left: 20px
    }
}

@media (max-width:991px) {
    .ub-plugins>.wv-container>.wv-row>.wv-col-3 {
        padding-left: 30px
    }
}

@media (max-width:768px) {
    .ca-col-1 .wv-col-3 {
        width: 100%
    }
}

/* search.php  */

@keyframes warning-blink {
    0%,
    30%,
    70%,
    to {
        opacity: 1
    }
    50% {
        opacity: 0
    }
}

@keyframes mzrt-scroll {
    0%,
    to {
        top: 10%
    }
    50% {
        top: 90%
    }
}

.dh-search-btn {
    border: 0;
    height: 60px;
    padding: 20px 55px;
    margin-left: 4px
}

.dh-search-btn,
.dh-search-btn:hover {
    background: #fff;
    color: #007fff
}

.dh-ban-input {
    border: 1px solid #bcbad7;
    background: no-repeat;
    padding: 22px 24px;
    height: 60px;
    width: 100%;
    max-width: 735px;
    border-radius: 7px;
    font-size: 16px;
    color: #bcbad77a
}

.dh-ban-input:focus {
    outline: unset;
    border-color: #fff
}

.dh-ban-input::placeholder {
    color: #bcbad77a
}

@media (max-width:950px) {
    .dh-search-btn {
        margin-top: 10px
    }
}

@media (max-width:600px) {
    .dh-search-btn {
        height: 44px;
        padding: 13px 34px
    }
}

.nores-container {
    margin: 60px 0-50px
}

.nores-wrapr {
    max-width: 525px;
    margin: 0 auto
}

.nores-graphic {
    max-width: 290px;
    margin: 0 auto 20px;
    position: relative
}

.nores-warning {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%
}

.nores-excl {
    position: absolute;
    top: 44%;
    left: 44%;
    width: 12%;
    z-index: 5;
    animation: warning-blink 3s infinite linear
}

.nores-text {
    text-align: center
}

.nores-text p {
    font-size: 25px;
    margin-bottom: 15px;
    line-height: 1.3
}

.nores-text p a {
    color: var(aclr_color);
    text-decoration: underline
}

.nores-text p:last-child {
    margin-bottom: 0
}

.nores-line {
    padding: 20px 5px 10px
}

.nores-line div {
    width: 14px;
    height: 115px;
    margin: 0 auto;
    border: 1px solid #434343;
    border-radius: 5px;
    position: relative
}

.nores-line div:after {
    content: "";
    position: absolute;
    top: 10%;
    left: 3px;
    width: 8px;
    height: 8px;
    background: #434343;
    border-radius: 50%;
    animation: mzrt-scroll 2.5s infinite linear
}

.elvn-date {
    padding-left: 4px
}

/* Pagination css  */

.pagination-prime {
    display: flex;
    align-items: center;
    justify-content: center
}

@media (max-width:1100px) {
    .ca-col-1 .wv-col-3 {
        width: 50%;
        margin-bottom: 20px;
        padding-left: 20px
    }
}

@media (max-width:991px) {
    .ub-plugins>.wv-container>.wv-row>.wv-col-3 {
        padding-left: 30px
    }
}

@media (max-width:768px) {
    .ca-col-1 .wv-col-3 {
        width: 100%
    }
}

.elvn-title,
.mw-ttl-hover {
    transition: all ease-in .3s
}

.elvn-title:hover,
.mw-ttl-hover:hover {
    color: #007fff
}

.mb-img-hover,
.mb-themes-img,
.ub-banner-img {
    position: relative;
    overflow: hidden
}

.mb-img-hover::before,
.mb-themes-img::before,
.ub-banner-img::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, .3) 100%);
    transform: skewX(-25deg)
}

.mb-img-hover:hover::before,
.mb-themes-img:hover::before,
.ub-banner-img:hover::before {
    animation: shine 1s
}

@keyframes shine {
    100% {
        left: 125%
    }
}