/*************************
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.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
    
    Yellow: #ffc700;
    dark green: #005739;
    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: #222222;
}

.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: #ffc700;
    text-decoration: none;
}

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

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

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

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

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

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

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

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

.section-title h5 {
    color: #222;
    margin-bottom: 5px;
    display: inline-block;
    background: #ffc700;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 6px;
}

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

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

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

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

.theme-btn {
    position: relative;
    background: #ffc700;
    padding: 8px 30px;
    color: #333333 !important;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.7;
    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: #005739;
    color: #fff !important;
}

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

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

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

.theme-btn.alt-btn:hover {
    background: #ffc700;
    color: #333333 !important;
}

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

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

.theme-btn:hover::before {
    top: 0;
}

/****************
Card Style
*****************/
.card{
    border-radius: 12px;
}
.card-icon {
    font-size: 32px;
    width: 60px;
    height: 60px;
    background: #ffc700;
    color: #222;
    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: #ffc700;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 42px;
    display: block;
    padding: 0;
    color: #222222;
    text-align: center;
}

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

/***************
Back To Top
************/
.back-to-top {
    background: #005739;
    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: #ffc700;
    border-color: #ffc700;
}

.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: #005739 #005739 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 #ffc700 #ffc700;
    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: #005739 #005739 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: #005739;
    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: #ffc700;
}

.contact-bar li > a > i {
    color: #ffc700;
    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;
}

header.main-header.is-sticky nav.navbar {
    position: fixed;
    z-index: 999;
    background-color: #fff;
    padding-top: 8px;
    padding-bottom: 8px;
    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;
    z-index: 0;
}

.main-header li.nav-item a.nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 85%;
    background-color: #ffc700;
    border-radius: 8px;
    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;
}

/**************************************
Banner Slider
**************************************/
.main-slider {
    padding: 60px 0 80px;
    background: url(../img/resource/lines-right.svg), url(../img/resource/blob-left.svg);
    background-size: 35% 100%, contain;
    background-repeat: no-repeat, no-repeat;
    background-position: top right, top left;
}

.banner-subtitle {
    color: #ffc700;
}

.main-slider .owl-theme .owl-dots {
    position: absolute;
    left: 10px;
    bottom: -20px;
}

.banner-imgs {
    margin: 0 auto;
    max-width: 95%;
}

.main-slider .owl-stage-outer {
    padding: 0 15px;
}

/**************************************
About Us Section
**************************************/
.company-cont {
    background: url(../img/resource/blob-right.svg), url(../img/resource/lines-left.svg);
    background-size: 35% 100%, 30% 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: top right, top left;
    padding-top: 40px;
}

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

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

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

.benefit-carousel .owl-stage-outer {
    padding-bottom: 20px;
}

.benefit-card .benefit-img {
    max-width: 65px;
    margin: 0 auto;
    padding-top: 20px;
    position: relative;
    z-index: 2;
}

.benefit-img::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 15px;
    width: 95%;
    height: 70%;
    background: #ffc700;
    border-radius: 70% 50% 70% 45%;
    z-index: -1;
    opacity: 0.8;
}

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

.service-card {
    box-shadow: -20px 5px 35px rgba(0, 0, 0, 0.05);
}

.service-card .service-img {
    position: relative;
    max-width: 95px;
    margin-bottom: 20px;
    padding: 20px;
    border: 2px solid #ffc700;
    border-radius: 70% 70% 70% 0%;
}

/**************************************
Why Choose Section
**************************************/
.why-cont {
    background: url(../img/resource/wave-2.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: #ffc700;
    font-size: 12px;
    margin-right: 8px;
}

.counter-box {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
}

.counter-box > i {
    color: #ffc700;
    font-size: 42px;
    margin-bottom: 15px;
}

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

.counter-box p {
    margin-bottom: 0;
    font-size: 18px;
}

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

.review-img img {
    max-width: 60px;
    border-radius: 50%;
    border: 2px solid #ffc700;
}

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

.review-content {
    position: relative;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 35px;
    background-color: #fff;
}

.review-content::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 20px;
    border-top: 20px solid #fff;
    border-left: 6px solid transparent;
    border-right: 15px solid transparent;
    filter: drop-shadow(0px 8px 5px rgb(128 128 128 / 20%));
}

.review-content p {
    margin-bottom: 0;
}

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

.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 100% 0;
}

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

.form-control:focus {
    border: 1px solid #005739;
    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: #005739;
    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: #ffc700;
    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: #ffc700;
    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 h2 {
        font-size: 1.8rem;
    }

    .section-title .w-75 {
        width: 100% !important;
    }

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

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

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

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

    .main-slider .owl-stage-outer {
        padding: 0;
    }
    
    .main-slider .owl-stage-outer .owl-item .item {
        padding: 0 15px;
    }
    
    .main-slider .owl-theme .owl-dots {
        right: initial;
        left: 10px;
        bottom: -55px;
    }
    
    .company-cont {
        background-size: 90% 100%, 70% 100%;
    }
    
    .card-icon {
        margin: 20px 0 0;
    }
    
    .benefit-card .benefit-img {
        margin: 0 0 0 15px;
    }
    
    .services-cont {
        background-size: 80% 100%;
    }
    
    .review-cont {
        background-size: 80% 100%;
    }
    
    .counter-box h3, 
    .counter-box h3 span{
        font-size: 26px;
    }
    
    .counter-box p {
        font-size: 16px;
    }
    
    .counter-box > i {
        font-size: 36px;
    }
    
    .contact-card .card-icon {
        margin: 0;
    }
    
    .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 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;
        margin: 0 auto;
    }

    .main-slider .owl-theme .owl-dots {
        left: 50%;
        bottom: -50px;
        transform: translateX(-50%);
    }

    .service-img {
        margin: 0 auto;
    }
    ul.icon-list li{
        justify-content: center;
    }
    .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: #ffc700;
        color: #333333;
    }

    .main-header button.navbar-toggler:hover,
    .main-header button.navbar-toggler:active,
    .main-header button.navbar-toggler:focus {
        border-color: #ffc700;
        background-color: #ffc700;
    }
    
    .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;
    }
}