/*************************
MBank Mobile App Template Version 1.1

This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.

This files table contents are outlined below>>>>>

******************************************* 
0. Root Variables
1.Common Elements
2.Preloader
3. Main Header
4.Banner Slider Section
5.Key Features Section
6.App Screenshot Section
7.Get Our App Now Section
8.Reviews & Comments Section
9.Counter Section 
10.Send Us Enquiry Now Section
11.Main Footer
12.Whatsapp Floating Button
13.Media Queries For Responsive

******************/




/**************************************
This is Base Colors Of MBank App Theme For Easy to use

Blue : #3093e8;
Black : #333333;
Yellow : #fa9f1d;
text color : #6b6b6b;

**************************************/


/**************************************
Common Elements
**************************************/
html{
    overflow-x: hidden;
}
body{
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    font-weight: 400;
    color: #6b6b6b;
    font-size: 17px;
    overflow-x: hidden;
}
body.sticky-pad{
    padding-top: 76px;
}
/****************
Headings
*****************/
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
    color: #333333;
}
.h1, h1{
    font-size: 3rem;
    font-weight: 800;
}
/****************
Lists
*****************/
dl, ol, ul{
    margin-bottom: 0;
}
ul.icon-list {
    list-style: none;
    padding-left: 0;
    line-height: 36px;
}
ul.icon-list li {
    display: flex;
    align-items: baseline;
}
ul.icon-list li i {
    color: #fa9f1d;
    font-size: 12px;
    margin-right: 8px;
}
/****************
Links
*****************/
a{
    color: #fff;
    transition: all ease-in-out 0.4s;
}
a:hover{
    color: #3093e8;
    text-decoration: none;
}
/****************
Basic color & background classes for direct use
*****************/
.bc-txt{
    color: #3093e8;
}
.bc-bg{
    background-color: #3093e8;
}
.bg-lb{
    background-color: #e7f4ff;
}
.sc-txt{
    color: #333333;
}
.sc-bg{
    background-color: #333333;
}
/****************
Base Section Styles
(Common Paddings, Section Title)
*****************/
.main-content-wrap{
    width: 100%;
}
.section-pad{
    padding: 90px 0;
}
.section-title {
    margin-bottom: 28px;
    position: relative;
}
.section-title.center-title{
    text-align: center;
}
.section-title::after{
    content: '';
    width: 75px;
    height: 2px;
    position: absolute;
    bottom: -14px;
    left: 0;
    background-color: #3093e8;
    border-radius: 2px;
}
.section-title.center-title::after{
    left: 50%;
    transform: translateX(-50%);
}
.section-title h5 {
    color: #3093e8;
    margin-bottom: 5px;
    font-weight: 400;
}
.section-title h2 {
    font-weight: 600;
    font-size: 2.6rem;
}
/****************
Buttons Styles
*****************/
button, button:focus, button:hover{
    outline: none;
    border: none;
}
.theme-btn{
    position: relative;
    background: transparent;
    padding: 8px 30px;
    color: #3093e8 !important;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    border: 2px solid #3093e8;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    transition: all ease-in-out 0.4s;
    z-index: 2;
}
.theme-btn.btn-sm {
    padding: 5px 22px;
    font-size: 16px;
    line-height: 1.5;
}
.theme-btn.alt-btn{
    background: #3093e8;
    border-color: #3093e8;
    color: #fff !important;
}
.theme-btn > i {
    margin-left: 8px;
}
.theme-btn.lg-btn > i {
    margin-left: 12px;
}
.theme-btn:hover{
    background-color: #3093e8;
    color: #fff !important;
    border: 2px solid #3093e8;
}
.theme-btn.alt-btn:hover{
    background: transparent;
    color: #3093e8 !important;
}
/****************
Common Social Bar
*****************/
.social-bar{
    margin-left: -10px;
}
.social-bar > li {
    margin-right: 10px !important;
    margin-top: 2px;
}
.social-bar > li > a{
    padding: 5px 10px;
    color: #333333;
}
/****************
Owl Carousel Styles
*****************/
.owl-theme .owl-nav {
    width: 100%;
    position: absolute;
    margin-top: 0;
    left: 50%;
    bottom: 55%;
    transform: translate(-50%, -50%);
}
.owl-theme .owl-nav [class*=owl-]:hover {
    background: transparent !important;
    color: initial !important;
    text-decoration: none !important;
}
.owl-nav .owl-next span,
.owl-nav .owl-prev span {
    display: block;
    font-size: 30px;
    line-height: 30px;
}
button.owl-prev {
    left: -45px;
    position: absolute;
}
button.owl-next {
    right: -45px;
    position: absolute;
}

/****************
Bubble Images Styles
*****************/
.bubble-img{
    position: relative;
}
.bubble-img img {
    padding: 20px 0;
    max-width: 50%;
    margin: 0 auto;
    filter: drop-shadow(0px 0px 8px #5d778e);
}
.bubble-img::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 95%;
    background: #c2e3ff;
    border-radius: 50% 75% 45% 70%;
    z-index: -1;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 5px #95bfe4;
}
.bubble-img::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 90%;
    background: #a0d4ff;
    border-radius: 65% 75% 60% 75%;
    z-index: -1;
    transform: translate(-50%, -50%) rotate(51deg);
    border: 2px solid #3093e8;
}
.bubble-img.color-op-2::after {
    background: #ecf7ff;
    box-shadow: 0px 0px 5px #c8dff3;
}
.bubble-img.color-op-2::before {
    background: #d1eaff;
}
/****************
Background SVG Circles
*****************/
.svg-circles svg {
    position: absolute;
}
.svg-circles svg:first-child {
    top: 10%;
    left: -4%;
}
.svg-circles svg:nth-child(2) {
    bottom: 3%;
    right: 3%;
}
.svg-circles svg:nth-child(3) {
    bottom: 50%;
    left: 50%;
}
.svg-circles svg circle {
    fill: #c2e3ff;
    stroke: #abd3f5;
}
/****************
Z index to container when use svg circles in bg
*****************/
.z-upper{
    z-index: 3;
    position: relative;
}


/**************************************
Preloader 
**************************************/
.preloader {
    width:100%;
    height:100%;  
    position:fixed;
    top: 0;
    left: 0;
    z-index:99999;
    background:#f9f9f9;
}
.loader {
    display: inline-block;
    width: 40px;
    height: 40px;
    position: absolute;
    z-index:99999;
    border: 3px solid #3093e8;
    top: 50%;
    left: calc(50% - 20px);
    animation: loader 2s infinite ease;
}
.loader-inner {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: #3093e8;
    animation: loader-inner 2s infinite ease-in;
}
/****************
Preloader Keyframes
*****************/
@keyframes loader {
    0% {transform: rotate(0deg);}
    25% {transform: rotate(180deg);}
    50% {transform: rotate(180deg);}
    75% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}
@keyframes loader-inner {
    0% {height: 0%;}
    25% {height: 0%;}
    50% {height: 100%;}
    75% {height: 100%;}
    100% {height: 0%;}
}

/**************************************
Main Header
**************************************/
.top-bar{
    width: 100%;
    background-color: #fbfbfb;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e0e0e0;
}
.contact-bar li{
    margin-left: 15px;
}
.contact-bar li > a{
    display: inline-flex;
    align-items: center;
    color: #333333;
}
.contact-bar li > a > i{
    color: #fa9f1d;
    margin-right: 10px;
}
/****************
Sticky Nav Keyframes
*****************/
@keyframes stickySlideDown {
    0% {
        opacity: 0.7;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes stickySlideUp {
    0% {
        opacity: 0.7;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}
/***** Logo Size ****/
.navbar-brand > img{
    width: 155px;
    height: auto;
}
.main-header{
    width: 100%;
}
.main-header .navbar{
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #fff;
    animation-duration: 0.5s;
    animation-name: stickySlideUp;
}
header.main-header.is-sticky nav.navbar {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0px 2px 5px #cacaca;
    animation-name: stickySlideDown;
}
.main-header .navbar .navbar-nav li.nav-item {
    margin: 0 10px;
}
.main-header li.nav-item a.nav-link{
    position: relative;
    color: #333333;
    font-weight: 400;
}
.main-header li.nav-item a.nav-link::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 60%;
    height: 2px;
    background-color: #3093e8;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: all cubic-bezier(0.7, 0.29, 0.5, 1.04) 0.4s;
}
.main-header li.nav-item a.nav-link:hover::after{
    transform: scaleX(1);
}
/* .main-header li.nav-item.active a.nav-link{
    color: #333333;
    font-weight: 600;
} */
.main-header li.nav-item.btn-nav-item .nav-link::after{
    visibility: hidden;
}
.main-header li.nav-item.btn-nav-item .nav-link {
    color: #333333;
    padding: 8px 20px;
    font-weight: 500;
    font-size: 17px;
}
.main-header li.nav-item.btn-nav-item .theme-btn > i {
    margin-left: 0px;
    margin-right: 8px;
}
.main-header li.nav-item.btn-nav-item .theme-btn:hover{
    background-color: #3093e8;
    color: #fff;
}

/**************************************
Banner Slider
**************************************/
.banner-slider {
    padding: 70px 0 80px;
    background-color: #dcefff;
    position: relative;
}
.banner-subtitle{
    color: #3093e8;
}
.banner-slider .owl-theme .owl-dots{
    position: absolute;
    left: 10px;
    bottom: 0px;
}
.banner-imgs{
    max-width: 38%;
    margin: 0 auto;
}
.banner-slider .owl-stage-outer{
    padding: 0 15px;
}

/**************************************
Key Features Section
**************************************/

/******features Tab css***/
.features-tabs{
    z-index: 2;
    position: relative;
}
.features-tabs .nav-link {
    border-radius: 10px;
    font-weight: 500;
    color: #3093e8;
    background: transparent;
    border: 1px solid #3093e8;
    margin: 0 10px;
    padding: 5px 20px;
}
.features-tabs .nav-link.active {
    background: #3093e8;
    transform: scale(1.1);
}
.feature-box {
    margin-bottom: 18px;
}
.icon-box {
    width: 45px;
    height: 45px;
    padding: 9px;
    border: 2px solid #3093e8;
    margin-bottom: 5px;
    border-radius: 15px;
    box-shadow: 0 0 8px rgb(154 180 208 / 50%);
    line-height: 1;
}
.icon-box.right-icon{
    margin-left: auto;
}
.icon-box img {
    width: 100%;
}
.feature-box p {
    margin-bottom: 0;
}
.features-mid-img{
    width: 100%;
}

/**************************************
App Screenshot Section
**************************************/
.app-screen-cont {
    padding-bottom: 80px;
}
.ss-carousel .owl-item:not(.center){
    transform: scale(0.8);
}
.ss-carousel .owl-item {
    padding: 25px 0;
}
.ss-carousel .owl-item.active.center img {
    filter: drop-shadow(0px 0px 5px #cccccc);
    color: #cccccc;
    transform: scale(1.1);
}
.ss-carousel .owl-dots{
    margin-top: 20px !important;
}

/**************************************
Get Our App Now Section
**************************************/
.get-app-cont {
    background: linear-gradient(-20deg, #52a3ea, #e7f4ff);
}
.column-pad{
    padding: 90px 0;
}
.download-app-btn > a> img {
    width: auto;
    height: 55px;
    margin-right: 15px;
}
.download-right-img{
    overflow: hidden;
}
.download-right-img img{
    filter: drop-shadow(0px 0px 3px #5d778e);
}
.download-img{
    height: 100%;
    width: inherit;
}


/**************************************
Reviews & Comments Section
**************************************/
.testimonial-cont{
    z-index: 3;
    position: relative;
    background: #fff;
}
.testi-content > p {
    padding: 20px;
    border: 1px solid #cecece;
    border-radius: 5px;
    position: relative;
}
.testi-content > p::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 28px;
    border-top: 12px solid white;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    filter: drop-shadow(0px 1px #cecece);
}
.testi-img img {
    max-width: 75px;
    border-radius: 50%;
    border: 2px solid #3093e8;
}
.testimonial-cont .owl-stage{
    padding-top: 20px;
    padding-bottom: 20px;
}
.testi-img {
    margin-right: 15px;
}
.testi-person {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 30px;
}
.testi-person h5 {
    font-weight: 600;
}
.testi-person h6 {
    opacity: 0.65;
    /* font-style: italic; */
}
.testi-person span.ti-quote-right {
    position: absolute;
    top: 0px;
    right: 0;
    font-size: 36px;
    color: #3093e8;
}

/**************************************
Counter Section 
**************************************/
.counter-box {
    text-align: center;
    border: 1px solid #c0e2ff;
    padding: 20px;
    border-radius: 10px;
}
.counter-icon i {
    font-size: 32px;
    color: #fa9f1d;
    width: 70px;
    height: 70px;
    line-height: 60px;
    display: block;
    margin: 0 auto 15px;
    border: 2px solid #3093e8;
    border-radius: 50%;
    text-align: center;
}
.counter-box h2 {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 5px;
}
.counter-box > p {
    font-size: 18px;
    margin-bottom: 0;
    color: #3093e8;
}

/**************************************
Send Enquiry Now Section 
**************************************/
.quote-cont{
    position: relative;
}
.map-box{
    border: 1px solid #3093e8;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 8px #e4e4e4;
}
.contact-box {
    padding: 20px;
    border-radius: 10px;
    margin-top: 25px;
    border: 1px solid #3093e8;
    box-shadow: 0px 0px 8px #e4e4e4;
}
ul.address-list {
    list-style: none;
    padding-left: 0;
    line-height: 36px;
}
ul.address-list li {
    display: flex;
    align-items: baseline;
}
ul.address-list li i {
    color: #3093e8;
    font-size: 12px;
    margin-right: 8px;
}
.form-control {
    margin-bottom: 20px;
    border-radius: 3px;
    border: 1px solid #afafaf;
}
.form-control:focus {
    border: 1px solid #3093e8;
    box-shadow: 0 0 0 0.2rem rgb(244 197 12 / 30%);
}


/**************************************
Footer 
**************************************/
.footer-copy {
    padding: 25px 0;
    background-color: #e7f4ff;
    z-index: 15;
    position: relative;
}
.footer-logo{
    width: 180px;
}
/******Back To Top***/
.back-to-top{
    background: #e7f4ff;
    color: #3093e8 !important;
    padding: 10px 12px;
    border-radius: 40px 40px 0 0;
    position: absolute;
    right: 25px;
    top: -35px;
    line-height: 1;
    cursor: pointer;
}

/************************************
Whatsapp Floating Button
*********************************/
@keyframes shake {
    0% {transform: translateX(0)}
    1% {transform: translateX(-4px)}
    2% {transform: translateX(6px)}
    3% {transform: translateX(-9px)}
    4% {transform: translateX(9px)}
    5% {transform: translateX(-6px)}
    6% {transform: translateX(4px)}
    7% {transform: translateX(0)}
}
.whatsapp-chat-bot {
    background-color: rgba(13,193,82,1);
    color: #fff;
    border-radius: 20px;
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 10;
    font-size: 15px;
    line-height: 36px;
    transform: translateX(0);
    animation-name: shake;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.61, 0.02, 1, 1);
    display: none;
}
.whatsapp-chat-bot > a {
    color: #fff;
    display: flex;
    padding: 0px 18px;
    align-items: center;
}
.whatsapp-chat-bot > a > i {
    font-size: 18px;
    margin-right: 8px;
}


/**************************************
Mobile Responsive Media Queries 
**************************************/

/**************************************
For All Mobiles
**************************************/
@media only screen and (min-width: 300px) and (max-width: 691px){
    /****** Common Element*****/
    .h1, h1 {
        font-size: 1.9rem;
    }
    .h5, h5 {
        font-size: 1.1rem;
    }
    ul.icon-list li{
        text-align: justify;
    }
    /****** Bubble Images *****/
    .bubble-img::before {
        height: 95%;
        width: 75%;
    }
    .bubble-img::after {
        height: 90%;
        width: 75%;
    }
    .bubble-img img{
        max-width: 45%;
        padding: 5px 0;
    }
    /****** Forms *****/
    .form-control {
        margin-bottom: 20px;
    }
    /****** Section Title *****/
    .section-title h2 {
        font-size: 1.7rem;
    }
    .section-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    /****** Top Bar *****/
    .contact-bar{
        text-align: center;
        font-size: 15px;
    }
    .contact-bar li{
        margin-left: 0;
    }
    /****** Main Menu *****/
    .navbar-brand > img {
        width: 140px;
    }
    /****** Banner Slider *****/
    .banner-slider {
        padding: 60px 0 90px;
    }
    .banner-slider .owl-stage-outer {
        padding: 0;
    }
    .banner-slider .owl-stage-outer .owl-item .item{
        padding: 0 15px;
    }
    .banner-slider .owl-theme .owl-dots {
        right: initial;
        left: 50%;
        transform: translateX(-50%);
        bottom: -55px;
    }
    /****** Features Tabs *****/
    .features-tabs .nav-pills{
        flex-direction: column;
    }
    .features-tabs li.nav-item {
        width: calc(100% - 10px);
        margin: 8px auto;
        text-align: center;
    }
    .feature-box {
        text-align: center;
    }
    .icon-box.right-icon,
    .icon-box.left-icon {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
    }
    /****** Download App *****/
    .column-pad{
        padding: 90px 15px 60px;
    }
    .download-app-btn > a> img {
        height: 42px;
        margin-right: 8px;
    }
    .download-mob-img{
        width: 100%;
    }
    /****** Review & Comments *****/
    .testimonial-cont .owl-stage{
        padding-top: 10px;
    }
    .testi-content > p{
        text-align: center;
    }
    .testi-content > p::after{
        left: 45%;
    }
    .testi-person {
        justify-content: center;
    }
    /****** Counter Box *****/
    .counter-box h2 {
        font-size: 2.5rem;
    }
    /****** Enquiry Section *****/
    .map-box{
        margin-bottom: 30px;
    }
    .map-box iframe{
        height: 300px;
    }
    .two-values-row{
        flex-direction: column;
    }
    /****** Footer *****/
    .footer-logo{
        width: 150px;
    }
    /****** Whatsapp Floating Btn *****/
    .whatsapp-chat-bot {
        display: none;
    }
}


/**************************************
For All Medium Devices (Tablet, phablet etc.)
**************************************/

@media only screen and (min-width: 692px) and (max-width: 991px){
    /****** Common Element*****/
    .h1, h1 {
        font-size: 2.1rem;
        font-weight: 800;
    }
    .h5, h5 {
        font-size: 1.15rem;
    }
    /****** Section Title *****/
    .section-title h2 {
        font-size: 1.9rem;
    }
    /****** Bubble Images *****/
    .bubble-img img{
        max-width: 55%;
    }
    .bubble-img.color-op-2 img {
        max-width: 90%;
    }
    .bubble-img.color-op-2::after {
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%) rotate(18deg);
    }
    .bubble-img.color-op-2::before {
        width: 85%;
        height: 100%;
        transform: translate(-50%, -50%) rotate(27deg);
    }
    /****** Forms *****/
    .form-control{
        margin-bottom: 15px;
    }
    /****** Main Menu *****/
    .navbar-brand > img {
        width: 165px;
    }
    .main-header .navbar {
        padding-left: 30px;
        padding-right: 30px;
    }
    /****** Banner Slider *****/
    .banner-slider .owl-theme .owl-dots {
        right: initial;
        left: 10px;
        bottom: -45px;
    }

    /****** Features Tab *****/
    .feature-box {
        text-align: center;
    }
    .icon-box.right-icon,
    .icon-box.left-icon {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
    }
    .features-mid-img{
        width: 70%;
        margin: 0 auto;
        display: block;
    }
    /****** Download App *****/
    .get-app-cont .section-title::after{
        left: 50%;
        transform: translateX(-50%);
    }
    .download-mob-img{
        width: 75%;
        margin: 0 auto;
    }
    .column-pad {
        padding: 90px 0 50px;
    }
    /****** Counter Box*****/
    .counter-box h2{
        font-size: 2.8rem;
    }
    /****** Enquiry Section *****/
    .map-box iframe{
        height: 200px;
    }
    .two-values-row{
        flex-direction: column;
    }
    /****** Footer *****/
    .main-footer {
        border-radius: 35px 35px 0 0;
    }
    /****** Whatsapp Floating Btn *****/
    .whatsapp-chat-bot {
        display: none;
    }
}

/**************************************
For All Device Less Then 991px
**************************************/
@media (max-width: 991px) {
    /****** Theme Btn *****/
    .theme-btn {
        padding: 5px 30px;
        font-size: 17px;
        line-height: 1.7;
    }
    /****** Main Menu *****/
    .main-header .navbar {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .main-header button.navbar-toggler {
        padding: 6px 8px;
        font-size: 18px;
        line-height: 0.8;
        border-color: #3093e8;
        color: #333333;
    }
    .main-header button.navbar-toggler:hover,
    .main-header button.navbar-toggler:active,
    .main-header button.navbar-toggler:focus{
        border-color: #3093e8;
        background-color: #3093e8;
        color: #fff;
    }
    .main-header li.nav-item a.nav-link::after{
        visibility: hidden;
    }
    .main-header .navbar .navbar-nav li.nav-item {
        margin: 0;
        border-top: 1px solid #e4e4e4;
    }
    .main-header li.nav-item.btn-nav-item .theme-btn{
        padding: 2px 15px;
        margin: 12px 0 10px;
        font-size: 16px;
    }
}