/*************************
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.Simple Banner Section
5.About Us Section
6.Benefits Section
7.What We Do Section
8.Why Choose Us Section
9.Reviews Section
10.Brands Section
10.Send Message Section
11.Main Footer
12. Reponsive Media Queries

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



/**************************************
This is Base Colors Of Theme For Easy to use
    
    Green: #9bc400;
    Black: #2c2c2c;
    Light Bg: #edf3f1;
    Text Color: #626262;

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

/**************************************
Common Elements
**************************************/
html {
    overflow-x: hidden;
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #6b6b6b;
    font-size: 16px;
    line-height: 26px;
    overflow-x: hidden;
}

body.sticky-pad {
    padding-top: 76px;
}

/****************
Headings
*****************/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: 'Rubik', sans-serif;
    color: #2c2c2c;
}

.h1,
h1 {
    font-size: 3rem;
    line-height: 1.2;
    font-weight: 800;
}

/****************
Lists
*****************/
dl,
ol,
ul {
    margin-bottom: 0;
}

/****************
Links
*****************/
a {
    color: #fff;
    transition: all ease-in-out 0.4s;
    text-decoration: none;
}

a:hover {
    color: #9bc400;
    text-decoration: none;
}

/****************
Basic color & background classes for direct use
*****************/
.bc-txt {
    color: #9bc400 !important;
}

.bc-bg {
    background-color: #9bc400 !important;
}

.sc-txt {
    color: #2c2c2c !important;
}

.sc-bg {
    background-color: #2c2c2c !important;
}

.light-bg {
    background-color: #f2f7e2 !important;
}

/****************
Base Section Styles
(Common Paddings, Section Title, Text align, Image style)
*****************/
.main-content-wrap {
    width: 100%;
}

.section-pad {
    padding: 90px 0;
}

.section-title-2 {
    margin-bottom: 15px;
    position: relative;
}

.section-title-2 h5 {
    color: #9bc400;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.section-title-2 h2 {
    font-weight: 800;
    font-size: 2.4rem;
    line-height: 1.4;
    color: #2c2c2c;
}

.sepretor {
    display: block;
    width: 50px;
    height: 3px;
    background: #9bc400;
}

.text-justify {
    text-align: justify;
}

.theme-img {
    border-radius: 70% 45% 70% 55%;
    overflow: hidden;
    width: 95%;
    margin: 0 auto;
    border-style: dashed;
    border-width: 0px 8px 0px 10px;
    border-color: transparent #9bc400 transparent #2c2c2c;
}

/****************
Buttons Style
*****************/
button,
button:focus,
button:hover {
    outline: none;
    border: none;
}

.theme-btn {
    position: relative;
    background: #9bc400;
    padding: 10px 30px;
    color: #ffffff !important;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.7;
    text-transform: uppercase;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    transition: all ease-in-out 0.4s !important;
    z-index: 2;
    overflow: hidden;
    cursor: pointer;
}

.theme-btn.btn-sm {
    padding: 5px 22px;
    font-size: 16px;
    line-height: 1.5;
}

.theme-btn.alt-btn {
    background: #2c2c2c;
}

.theme-btn > i {
    margin-left: 8px;
}

.theme-btn.lg-btn > i {
    margin-left: 12px;
}

.theme-btn:hover {
    background-color: #333333;
}

.theme-btn.alt-btn:hover {
    background: #9bc400;
}

.theme-btn::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #2c2c2c;
    text-align: center;
    border-radius: 12px;
    transform: scale(0);
    transition: all ease-in-out 0.4s;
    z-index: -1;
}

.theme-btn.alt-btn::before {
    background: #9bc400;
}

.theme-btn:hover::before {
    transform: scale(1);
}

/****************
Card Style
*****************/
.card{
    border-radius: 12px;
}
.card-icon {
    font-size: 32px;
    width: 60px;
    height: 60px;
    background: #9bc400;
    color: #fff;
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
    margin: 0 auto;
}

/****************
Common Social Bar
*****************/
.social-bar > li {
    margin-right: 5px !important;
}

.social-bar > li > a {
    padding: 5px 10px;
}

.social-bar.style-2 > li > a {
    background: #9bc400;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 42px;
    display: block;
    padding: 0;
    color: #ffffff;
    text-align: center;
}

.social-bar.style-2 > li > a:hover {
    background: #ffffff;
    color: #2c2c2c;
}

/***************
Back To Top
************/
.back-to-top {
    background: #2c2c2c;
    color: #ffffff;
    padding: 8px 18px;
    border-radius: 40px 40px 0 0;
    position: absolute;
    right: 20px;
    top: -35px;
    cursor: pointer;
    font-size: 24px;
}

/****************
Owl Carousel Styles
*****************/
.owl-stage-outer { 
    overflow: visible !important;
}

.owl-item {
   opacity: 0;
   transition: opacity 500ms;
}
.owl-item.active {
  opacity: 1;
}
.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: 40px;
    display: block;
    height: 40px;
    line-height: 36px;
    border: 1px solid #d3d3d3;
    border-radius: 50%;
    font-size: 20px;
}

.owl-nav .owl-next span:hover,
.owl-nav .owl-prev span:hover {
    background-color: #9bc400;
    border-color: #9bc400;
}

.owl-nav .owl-next,
.owl-nav .owl-prev {
    position: absolute;
    top: 35%;
}

.owl-nav .owl-prev {
    left: -50px;
}

.owl-nav .owl-next {
    right: -50px;
}

/**************************************
Preloader 
**************************************/
.preloader {
    position: fixed;
    background-color: #ffffff;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}
.preloader-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.preloader-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #2c2c2c #2c2c2c transparent transparent;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}
.preloader-icon:after, .preloader-icon:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent #9bc400 #9bc400;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    -webkit-animation: rotationBack 0.5s linear infinite;
    animation: rotationBack 0.5s linear infinite;
    transform-origin: center center;
}
.preloader-icon:before {
    width: 40px;
    height: 40px;
    border-color: #2c2c2c #2c2c2c transparent transparent;
    -webkit-animation: rotation 1.5s linear infinite;
    animation: rotation 1.5s linear infinite;
}

/****************
Preloader Keyframes
*****************/
@-webkit-keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

/**************************************
Main Header
**************************************/
.top-bar {
    width: 100%;
    background-color: #2c2c2c;
    padding-top: 8px;
    padding-bottom: 8px;
}

.contact-bar li {
    margin-right: 15px !important;
}

.contact-bar li > a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.contact-bar li > a:hover {
    color: #ffffff;
}

.contact-bar li.highlight-item > a {
    font-weight: 600;
    color: #9bc400;
}

.contact-bar li > a > i {
    color: #9bc400;
    margin-right: 10px;
}

.navbar-brand > img {
    width: 160px;
    height: auto;
    transition: all ease-in-out 0.4s;
}

header.main-header.is-sticky .navbar-brand > img {
    width: 140px;
}

/****************
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: 20px;
    padding-bottom: 20px;
    animation-duration: 0.5s;
    animation-name: stickySlideUp;
}
.main-header .navbar.fixed-top{
    top: 42px;
}
header.main-header.scrolled nav.navbar {
    background-color: #fff;
    padding-top: 8px;
    padding-bottom: 8px;
    top: 0;
    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;
    z-index: 0;
}

.main-header li.nav-item a.nav-link::after {
        content: '';
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    height: 8px;
    opacity: 0.4;
    background-color: #9bc400;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: all cubic-bezier(0.7, 0.29, 0.5, 1.04) 0.4s;
    z-index: -1;
}

.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: 400;
}

.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;
}

/**************************************
Simple Banner
**************************************/
.slider-simple {
    padding: 180px 0;
    background-image: url(../img/banner/simple-slider.png), url(../img/banner/wave-2.svg), url(../img/banner/slider-lines-right-1.svg);
    background-size: 100% auto, 40% auto, 35% auto;
    background-position: bottom center, top left, center right;
    background-repeat: no-repeat, no-repeat, no-repeat;
}
/**************************************
About Us Section
**************************************/
.company-simple {
    background: url(../img/resource/lines-left.svg);
    background-size: 25% 100%;
    background-repeat: no-repeat;
    background-position: center left;
    padding-bottom: 70px;
}
.counter-box-2 {
    display: inline-flex;
    align-items: center;
}
.counter-box-2 .counter-txt {
    padding-left: 25px;
}

.counter-box-2 > i {
    color: #9bc400;
    font-size: 42px;
}

.counter-box-2 h3,
.counter-box-2 h3 span {
    font-size: 40px;
    color: #2c2c2c;
    font-weight: 600;
    margin-bottom: 0;
}

.counter-box-2 p {
    margin-bottom: 0;
    font-size: 18px;
    position: relative;
}
.counter-box-2 .counter-txt p::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 2px;
    background: #9bc400;
    left: 0;
    bottom: -10px;
}

/**************************************
Benefits Section
**************************************/
.benefit-simple {
    position: relative;
    padding: 150px 0;
}

.benefit-simple::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: #fff;
    border-radius: 0 0 50% 50%;
}

.benefit-simple::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: #fff;
    border-radius: 50% 50% 0 0;
}

.benefit-card-2 {
    margin-top: 30px;
}

.benefit-card-2 .benefit-img {
    margin: -25px auto 0;
    position: relative;
    background: #2c2c2c;
    border-radius: 50%;
}

.benefit-card-2 .benefit-img .inner-deco {
    padding: 18px;
    border: 2px dashed #a9d700;
    width: 85px;
    height: 85px;
    margin: 8px;
    border-radius: 50%;
}

/**************************************
Services Section
**************************************/
.services-simple {
    background: url(../img/resource/lines-right.svg);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    background-position: top right;
}

.service-card-2 {
    border-radius: 60px 15px 15px;
}

.service-card-2 .service-img {
    position: relative;
    max-width: 95px;
    margin-bottom: 20px;
    margin-top: -50px;
    padding: 20px;
    border-radius: 70% 70% 0% 70%;
    background: #9bc400;
}

/**************************************
Why Choose Section
**************************************/
.why-simple {
    background: url(../img/resource/wave-3.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

ul.icon-list {
    list-style: none;
    padding-left: 0;
}

ul.icon-list li {
    display: flex;
    align-items: baseline;
}

ul.icon-list li + li {
    margin-top: 15px;
}

ul.icon-list li i {
    color: #9bc400;
    font-size: 12px;
    margin-right: 8px;
}



/**************************************
Review Section
**************************************/
.review-simple {
    background: url(../img/resource/lines-left-2.svg);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    background-position: top left;
}

.review-simple .review-img img {
    max-width: 60px;
    border-radius: 50%;
    border: 2px solid #9bc400;
    margin: 15px auto 10px;
}

.review-simple .owl-stage {
    padding-top: 20px;
}

.review-content {
    position: relative;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 35px;
    background-color: #fff;
}
.review-simple .review-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 110px;
    background: #f2f7e2;
    z-index: 0;
    border-radius: 50% 50% 12px 12px;
}
.review-simple .person-info{
    z-index: 2;
    position: relative;
}
.review-content p {
    margin-bottom: 0;
}

.review-content span.fa-quote-right {
    position: absolute;
    top: -8px;
    right: 20px;
    font-size: 20px;
    color: #9bc400;
}

.review-person {
    position: relative;
}

.review-person p {
    margin-bottom: 0;
    font-size: 14px;
}

/**************************************
Brands Section
**************************************/
.brand-img img {
    filter: grayscale(1);
    transition: all ease-in-out 0.4s;
}

.brand-img:hover img {
    filter: grayscale(0);
}

/**************************************
Send Message Section 
**************************************/
.contact-cont {
    position: relative;
    padding-top: 150px;
}

.contact-cont::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: #fff;
    border-radius: 0 0 50% 50%;
}

.form-control {
    margin-bottom: 30px;
    border-radius: 8px;
    border: 1px solid #e7e7e7;
    line-height: 1.8rem;
}

.form-control:focus {
    border: 1px solid #2c2c2c;
    box-shadow: none;
}

.form-group label {
    position: absolute;
    top: 15px;
    left: 15px;
    line-height: 1;
    font-size: 14px;
    pointer-events: none;
    transition: all ease-in-out 0.4s;
}

.form-group {
    position: relative;
}

.form-control:focus + label,
label.filled {
    top: -18px;
    font-size: 12px;
}

.contact-card .card-icon {
    width: 50px;
    height: 50px;
    font-size: 24px;
    line-height: 50px;
}

/**************************************
Footer 
**************************************/
.main-footer {
    position: relative;
    padding: 40px 0;
    background-color: #2c2c2c;
    color: #b9b9b9;
    z-index: 100;
}

footer p {
    margin-bottom: 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: #9bc400;
    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: #9bc400;
    font-size: 15px;
    margin-right: 8px;
}

footer .theme-btn:hover {
    background-color: #fff;
    color: #333333 !important;
}

/**************************************
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;
    }

    .section-title-2 h2 {
        font-size: 1.8rem;
    }

    .section-title-2 .w-75 {
        width: 100% !important;
    }
    .theme-img {
        width: 90%;
        border-width: 0px 6px 0px 8px;
    }

    .contact-bar {
        text-align: center;
    }

    .contact-bar li {
        margin-left: 0;
    }

    .navbar-brand > img {
        width: 140px;
    }
    
    .main-header .navbar-collapse {
        top: 62px !important; 
    }

    .main-slider {
        padding: 60px 0 90px;
        border-radius: 0 0 40px 40px;
    }

   .slider-simple {
        padding: 150px 0 180px;
        background-size: 180% auto, 80% auto, 60% auto;
        background-position: bottom left, top left, center right;
    }
    
    .counter-box-2 h3, 
    .counter-box-2 h3 span{
        font-size: 26px;
    }
    
    .counter-box-2 > i {
        font-size: 36px;
    }
    
    .counter-box-2 p {
        font-size: 16px;
    }
    
    .benefit-card-2 .benefit-img .inner-deco {
        width: 80px;
        height: 80px;
    }
    
    .services-simple {
        background-size: 90% 100%;
    }
    
    .service-card-2 .service-img {
        max-width: 85px;
    }
    
    .review-simple {
        background-size: 80% 100%;
    }

    .main-footer {
        padding: 60px 0;
    }

    footer .widget-title {
        font-size: 1.3rem;
    }
}


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

@media only screen and (min-width: 692px) and (max-width: 991px) {

    .h1,
    h1 {
        font-size: 2.3rem;
        font-weight: 800;
    }

    .h5,
    h5 {
        font-size: 1.15rem;
    }

    .section-title-2 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;
    }
    
    .slider-simple {
        background-size: 100% auto, 60% auto, 45% auto;
    }
    
    .counter-box-2 h3, 
    .counter-box-2 h3 span{
        font-size: 32px;
    }
    
    .counter-box-2 > i {
        font-size: 38px;
    }
    
    .benefit-card-2 .benefit-img .inner-deco {
        width: 80px;
        height: 80px;
    }

    .service-card-2 .service-img {
        max-width: 85px;
    }
    
    .contact-cont{
        padding-bottom: 40px;
    }
    .contact-card {
        width: 50%;
        float: left;
        min-height: 115px;
    }
}

/**************************************
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: #9bc400;
        color: #333333;
    }

    .main-header button.navbar-toggler:hover,
    .main-header button.navbar-toggler:active,
    .main-header button.navbar-toggler:focus {
        border-color: #9bc400;
        background-color: #9bc400;
    }

    .main-header .navbar-collapse {
        position: absolute;
        top: 70px;
        background: rgb(255, 255, 255);
        width: 100%;
        left: 0px;
        padding: 0 15px 10px;
        z-index: 99;
        border-radius: 8px;
        box-shadow: 0px 2px 10px rgb(0 0 0 / 7%);
    }

    .main-header li.nav-item a.nav-link::after {
        visibility: hidden;
    }
    
    .main-header .navbar .navbar-nav li.nav-item{
        margin: 0;
    }

    .main-header .navbar .navbar-nav li.nav-item + li.nav-item {
        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;
    }
}