/*
<!-- Dark/Light area start -->
<div class="mode_switcher my_switcher">
    <button class="light align-items-center">
        <i class="icofont-brand-whatsapp"></i>
    </button>
</div>
<!-- Dark/Light area end -->
*/

.mode_switcher.my_switcher {
    position: fixed;
    left: 36px;
    bottom: 36px;
    height: 46px;
    line-height: 46px;
    width: 46px;
    z-index: 9999999;
    transition: 0.3s all ease;
    cursor: pointer;
}
.mode_switcher.my_switcher.second{
    bottom: 90px;
}
.mode_switcher.my_switcher.second a{
    background: #704739;
}
.mode_switcher.my_switcher.third{
    bottom: 144px;
}
.mode_switcher.my_switcher.third a{
    background: #d28513;
}

@media screen and (max-width: 991px) {
    .mode_switcher.my_switcher {
        left: 24px;
        bottom: 24px;
        height: 40px;
        width: 40px;
        line-height: 40px;
    }
    .mode_switcher.my_switcher a{
        font-size: 20px!important;
    }

    .mode_switcher.my_switcher.second{
        bottom: 70px;
    }
    .mode_switcher.my_switcher.third{
        bottom: 116px;
    }
}

.mode_switcher.my_switcher a {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    background: #25D366;
    padding: 10px;
    line-height: 20px;
    border-radius: 10px;
    box-shadow: 0 6px 34px rgba(215, 216, 222, 0.15);
    border: none;
}

.mode_switcher.my_switcher button svg,
.mode_switcher.my_switcher button i{

}