/*************************
Theme Main Css File

It Includes All the styles of Elements Used In This Theme
0. Root Variables
1.Common Elements
2.Preloader
3. Main Header
4.Banner Slider Section
5.Know About Us Section
6.Why Use Solar Section
7.What We Provide Section
8.Why Choose Us Section
9.Testimonial Section
10.Send Us Enquiry Now Section
11.Main Footer

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



/**************************************
This is Base Colors Of MBank App Theme For Easy to use
    
    Yellow: #e8ba00;
    Black: #333333;
    Text Color: #6b6b6b;

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

/**************************************
Common Elements
**************************************/
html{
    overflow-x: hidden;
}
body{
    font-family: 'Alegreya Sans', 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;
}
/****************
Links
*****************/
a{
    color: #fff;
    transition: all ease-in-out 0.4s;
}
a:hover{
    color: #e8ba00;
    text-decoration: none;
}
/****************
Basic color & background classes for direct use
*****************/
.bc-txt{
    color: #e8ba00;
}
.bc-bg{
    background-color: #e8ba00;
}
.sc-txt{
    color: #333333;
}
.sc-bg{
    background-color: #333333;
}
.grad-bg{
    background: radial-gradient( #ffffff, #fff4c5);
}
/****************
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: #e8ba00;
    border-radius: 2px;
}
.section-title.center-title::after{
    left: 50%;
    transform: translateX(-50%);
}
.section-title h5 {
    color: #e8ba00;
    margin-bottom: 5px;
}
.section-title h2 {
    font-weight: 800;
    font-size: 2.6rem;
}
/****************
Buttons Style
*****************/
button, button:focus, button:hover{
    outline: none;
    border: none;
}
.theme-btn{
    position: relative;
    background: #e8ba00;
    padding: 8px 30px;
    color: #333333 !important;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.7;
    border-radius: 30px;
    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: #333333;
    color: #fff !important;
}
.theme-btn > i {
    margin-left: 8px;
}
.theme-btn.lg-btn > i {
    margin-left: 12px;
}
.theme-btn:hover{
    background-color: #333333;
    color: #fff !important;
}
.theme-btn.alt-btn:hover{
    background: #e8ba00;
    color: #333333 !important;
}
.theme-btn.alt-btn::before{
    border: 2px solid #333333;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
.theme-btn::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-6deg) skewX(15deg) scale(0);
    border: 2px solid #e8ba00;
    border-top-color: transparent;
    border-bottom-color: transparent;
    width: 100%;
    height: 75%;
    border-radius: 40px;
    z-index: -1;
    transition: all cubic-bezier(0.7, 0.29, 0.5, 1.04) 0.4s;
}
.theme-btn:hover::before{
    transform: translate(-50%, -50%) rotate(-6deg) skewX(15deg) scale(1.08);
}
/****************
Common Social Bar
*****************/
.social-bar{
    margin-left: -10px;
}
.social-bar > li {
    margin-right: 10px !important;
}
.social-bar > li > a{
    padding: 5px 10px;
}
/****************
Owl Carousel Styles
*****************/
.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 {
    width: 35px;
    display: block;
    height: 35px;
    line-height: 30px;
    border: 2px solid #333333;
    border-radius: 50%;
}
.owl-nav .owl-next span:hover,
.owl-nav .owl-prev span:hover {
    background-color: #e8ba00;
    border-color: #e8ba00;
}

/**************************************
Preloader 
**************************************/
.preloader {
    position: fixed;
    background-color: #ffffff;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}
  
.preloader .lds-ripple {
    position: relative;
    width: 64px;
    height: 64px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.preloader .lds-ripple div {
    position: absolute;
    border: 4px solid #e8ba00;
    opacity: 1;
    border-radius: 50%;
    -webkit-animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
            animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.preloader .lds-ripple div:nth-child(2) {
    -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s;
}

/****************
Preloader Keyframes
*****************/
@-webkit-keyframes lds-ripple {
    0% {
        top: 28px;
        left: 28px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: -1px;
        left: -1px;
        width: 58px;
        height: 58px;
        opacity: 0;
    }
}

@keyframes lds-ripple {
    0% {
        top: 28px;
        left: 28px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: -1px;
        left: -1px;
        width: 58px;
        height: 58px;
        opacity: 0;
    }
}

/**************************************
Main Header
**************************************/
.top-bar{
    width: 100%;
    background-color: #333333;
    padding-top: 8px;
    padding-bottom: 8px;
}
.contact-bar li{
    margin-left: 15px;
}
.contact-bar li > a{
    display: inline-flex;
    align-items: center;
}
.contact-bar li > a > i{
    color: #e8ba00;
    margin-right: 10px;
}
.navbar-brand > img{
    width: 185px;
    height: auto;
}
/****************
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%);
    }
}
.main-header{
    width: 100%;
}
.main-header .navbar{
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
    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: 700;
}
.main-header li.nav-item a.nav-link::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 8%;
    width: 84%;
    height: 2px;
    background-color: #e8ba00;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    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: 700;
}
.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 30px;
}
.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: #333333;
    color: #fff;
}

/**************************************
Banner Slider
**************************************/
.banner-slider {
    padding: 80px 0 90px;
    border-radius: 0 0 70px 70px;
    box-shadow: inset 0px -5px 5px #f3e9c0;
}
.banner-subtitle{
    color: #e8ba00;
}
.banner-slider .owl-theme .owl-nav {
    display: inline-block;
    position: absolute;
    margin-top: 0;
    left: 10px;
    bottom: -35px;
}
.banner-slider .owl-theme .owl-dots{
    position: absolute;
    right: 10px;
    bottom: -30px;
}
.banner-imgs{
    max-width: 90%;
    margin: 0 auto;
}
.banner-slider .owl-stage-outer{
    padding: 0 15px;
}

/**************************************
About Us Section 
**************************************/
section.about-cont {
    box-shadow: 0px 6px 5px #f3e9c0;
    border-radius: 0 0 70px 70px;
    position: relative;
    z-index: 2;
    background-color: #fff;
}
.data-boxes{
    border: 1px solid #333333;
    padding: 0 15px 15px; 
    margin-top: 25px;
    border-radius: 5px;
}
.data-boxes h5 > i {
    position: absolute;
    width: 35px;
    height: 35px;
    background: #e8ba00;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    left: -1px;
    top: 0px;
    color: #333333;
}
.data-boxes h5 {
    position: relative;
    background: #333333;
    float: left;
    color: #fff;
    padding: 5px 15px 5px 45px;
    border-radius: 20px;
    margin-top: -16px;
}

/**************************************
Why Use Solar Section 
**************************************/
.why-solar-cont{
    border-radius: 0 0 70px 70px;
    box-shadow: inset 0px -5px 5px #f3e9c0;
}
.why-solar-cont::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100px;
    top: -100px;
    left: 0;
    background-color: #fff4c5;
    z-index: -1;
}
.why-boxes {
    text-align: center;
    padding: 20px 15px;
    border: 1px solid #333333;
    border-radius: 5px;
    transition: all ease-in-out 0.4s;
    margin-bottom: 30px;
}
.why-boxes:hover{
    border-color: #e8ba00;
    box-shadow: 0px 2px 10px #ffe787;
    transform: translateY(-5px);
}
.why-boxes .icon-box img{
    width: 65px;
    height: auto;
}
.why-boxes h5 {
    position: relative;
    margin-top: 15px;
    margin-bottom: 18px;
    font-weight: 600;
    transition: all ease-in-out 0.4s;
    /* color: #e8ba00; */
}
.why-boxes:hover h5{
    color: #e8ba00;
}
.why-boxes h5::after {
    content: '';
    position: absolute;
    width: 45px;
    height: 2px;
    bottom: -10px;
    left: 50%;
    border-radius: 2px;
    transform: translateX(-50%);
    background-color: #e8ba00;
}
.why-boxes p {
    margin-bottom: 0px;
}

/**************************************
What We Provide Section 
**************************************/
.services-boxes {
    padding: 20px;
    border: 1px solid #333333;
    border-radius: 5px;
    margin-bottom: 30px;
    transition: all ease-in-out 0.4s;
}
.services-boxes:hover{
    border-color: #e8ba00;
    box-shadow: 0px 2px 10px #ffe787;
    transform: translateY(-5px);
}
.service-img {
    padding: 20px;
    border: 2px solid #e8ba00;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}
.service-img img{
    width: 100%;
    height: auto;
}
.service-txt h5{
    position: relative;
    margin-bottom: 18px;
    font-weight: 600;
}
.service-txt h5::after {
    content: '';
    position: absolute;
    width: 45px;
    height: 2px;
    border-radius: 2px;
    background-color: #e8ba00;
    bottom: -10px;
    left: 0;
}
.service-txt h5.right-side::after {
    right: 0;
    left: auto;
}

/**************************************
Why Choose Us Section
**************************************/
.why-choose-cont{
    filter: drop-shadow(0px 0px 5px #bfa950);
}
.why-choose-inner{
    background-color: #fff4c5;
}
.svg-waves{
    width: 100%;
    height: 175px;
    display: block;
    position: relative;
    overflow: hidden;
    transform: scaleX(-1);
}
.svg-waves img {
    width: 100%;
    position: absolute;
    bottom: 0;
    height: auto;
}
.svg-waves img:last-child {
    bottom: -15px;
}
ul.choose-list {
    list-style: none;
    padding-left: 0;
    line-height: 36px;
}
ul.choose-list li {
    display: flex;
    align-items: baseline;
}
ul.choose-list li i {
    color: #e8ba00;
    font-size: 12px;
    margin-right: 8px;
}

/**************************************
Testimonial Section
**************************************/
.testimonial-cont{
    box-shadow: 0px 6px 5px #f3e9c0;
    border-radius: 0 0 70px 70px;
    z-index: 3;
    position: relative;
    background: #fff;
}
.testi-box {
    padding: 20px;
    border: 1px solid #333333;
    border-radius: 5px;
}
.testi-img img {
    max-width: 75px;
    border-radius: 50%;
    border: 2px solid #e8ba00;
}
.testimonial-cont .owl-stage{
    padding-top: 60px;
    padding-bottom: 20px;
}
.testi-img {
    margin-top: -55px;
    margin-bottom: 15px;
}
.testi-person{
    position: relative;
}
.testi-person h5 {
    font-weight: 600;
}
.testi-person h6 {
    opacity: 0.65;
    /* font-style: italic; */
}
.testi-person span.fa-quote-right {
    position: absolute;
    top: 0px;
    right: 0;
    font-size: 24px;
    color: #e8ba00;
}

/**************************************
Send Enquiry Now Section 
**************************************/
.quote-cont{
    position: relative;
}
.quote-cont::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100px;
    top: -100px;
    left: 0;
    background-color: #fff4c5;
    z-index: -1;
}
.quote-cont::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: -100px;
    left: 0;
    background-color: #fff4c5;
    z-index: -1;
}
/* .quote-box{
    background: #fff;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #b5b1a0;
} */
.map-box{
    border: 2px solid #e8ba00;
    border-radius: 10px;
    overflow: hidden;
}
.form-control {
    margin-bottom: 30px;
    border-radius: 3px;
    border: 1px solid #afafaf;
}
.form-control:focus {
    border: 1px solid #e8ba00;
    box-shadow: 0 0 0 0.2rem rgb(244 197 12 / 30%);
}


/**************************************
Footer 
**************************************/
.main-footer{
    padding: 50px 0;
    background-color: #212121;
    color: #b9b9b9;
    border-radius: 40px 40px 0 0;
}
footer .widget-title {
    position: relative;
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 25px;
}
footer .widget-title::after {
    content: '';
    position: absolute;
    width: 45px;
    height: 2px;
    border-radius: 2px;
    background-color: #e8ba00;
    bottom: -14px;
    left: 0;
}
ul.widget-list {
    list-style: none;
    padding-left: 0;
    line-height: 36px;
}
ul.widget-list li {
    display: flex;
    align-items: baseline;
}
ul.widget-list li i {
    color: #e8ba00;
    font-size: 15px;
    margin-right: 8px;
}
footer .theme-btn:hover{
    background-color: #fff;
    color: #333333 !important;
}
.footer-copy {
    padding: 15px 0;
    background: #151515;
    color: #fff;
}

/************************************
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;
    left: 25px;
    z-index: 99;
    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){
    .h1, h1 {
        font-size: 2rem;
        font-weight: 800;
    }
    .h5, h5 {
        font-size: 1.15rem;
    }
    .form-control {
        margin-bottom: 20px;
    }
    .section-title h2 {
        font-size: 1.8rem;
    }
    .contact-bar{
        text-align: center;
    }
    .contact-bar li{
        margin-left: 0;
    }
    .navbar-brand > img {
        width: 140px;
    }
    .banner-slider {
        padding: 60px 0 90px;
        border-radius: 0 0 40px 40px;
    }
    .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: 10px;
        bottom: -55px;
    }

    section.about-cont, .why-solar-cont, .testimonial-cont {
        border-radius: 0 0 40px 40px;
    }
    .data-boxes h5 > i {
        width: 32px;
        height: 32px;
        line-height: 32px;
    }
    .service-txt h5.right-side::after {
        right: initial;
        left: 0;
    }
    .svg-waves {
        height: 85px;
    }
    .why-choose-inner {
        padding: 50px 0;
    }
    .map-box{
        margin-bottom: 30px;
    }
    .map-box iframe{
        height: 300px;
    }
    .main-footer {
        border-radius: 30px 30px 0 0;
        padding: 60px 0;
    }
    footer .widget-title {
        font-size: 1.3rem;
    }
    .two-values-row{
        flex-direction: column;
    }
    .whatsapp-chat-bot {
        display: none;
    }
}


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

@media only screen and (min-width: 692px) and (max-width: 991px){
    .h1, h1 {
        font-size: 2.5rem;
        font-weight: 800;
    }
    .h5, h5 {
        font-size: 1.15rem;
    }
    .section-title h2 {
        font-weight: 800;
        font-size: 2.2rem;
    }
    .form-control{
        margin-bottom: 15px;
    }
    .navbar-brand > img {
        width: 165px;
    }
    .main-header .navbar {
        padding-left: 30px;
        padding-right: 30px;
    }
    .sm-show-img {
        width: 70%!important;
    }
    .banner-slider .owl-theme .owl-dots {
        right: initial;
        left: 10px;
        bottom: -45px;
    }
    .banner-slider, section.about-cont, .why-solar-cont, .testimonial-cont {
        border-radius: 0 0 50px 50px;
    }
    .svg-waves{
        height: 130px;
    }
    .service-img{
        margin: 0 auto;
    }
    .why-choose-inner {
        padding: 20px 0;
    }
    ul.choose-list {
        line-height: 28px;
    }
    .main-footer {
        border-radius: 35px 35px 0 0;
    }
    .whatsapp-chat-bot {
        display: none;
    }
}

/**************************************
For All Device Less Then 991px
**************************************/
@media (max-width: 991px) {
    .theme-btn {
        padding: 5px 30px;
        font-size: 17px;
        line-height: 1.7;
    }
    .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: #e8ba00;
        color: #333333;
    }
    .main-header button.navbar-toggler:hover,
    .main-header button.navbar-toggler:active,
    .main-header button.navbar-toggler:focus{
        border-color: #e8ba00;
        background-color: #e8ba00;
    }
    .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;
    }
}