/*=========================================================
Template Name:paints-Real Estate & Property HTML5 Template
https://www.templatemonster.com/authors/techtime/
Description: Description
Version: 1.0.0
Text Domain: paints
Tags: 	agency, Business Agency, Business Consultant, business optimization, company website, consultancy, paintsng, paintsng Firm, corporate solutions, digital agency, financial analysis, market trends analysis, Strategic insights
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. paints Header Top Menu Area Css
02. paints Nav Menu Area Css 
03. paints Slider Area Css
04. paints Section Title Css
05. paints Service Area css
06. paints About Area Css
07. paints Counter Area Css
08. paints Testimonial Area Css
09. paints Process Area Css
10. paints Team Area Css
11. paints Faq Area Css
12. paints Call Do Section Css
13. paints Form Box Css
14. paints Blog Area Css
15. paints footer Area Css
16. paints Subscribe Area Css
17. paints Prossess Ber Css
18. paints Scrollup Section
19. paints Breadcumb Area Css
20. paints abouts_areas Css
21. paints Pricing Section Css
22. paints Contact  US Css
23. paints Blog Sidber Widget CSS
24. paints Search Box Css
25. paints Loader Css
=======================*/




/*==================================================
 <-- paints Header Top Menu Area Css-->
===================================================*/

.topbar-area {
    padding: 20px 0;
    background: #a3c914;
    position: relative;
}

.topbar-items ul {
    list-style: none;
}

.topbar-items ul li {
    display: inline-block;
    margin-right: 53px;
}

.topbar-items ul li a {
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    font-family: "Raleway";
}

.topbar-items ul li i {
    margin-right: 5px;
    font-size: 18px;
    color: #FFF;
}

.topbar-social {
    text-align: right;
}

.topbar-social h4 {
    display: inline-block;
    margin-right: 20px;
    font-size: 20px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Raleway";
}

.topbar-social ul {
    list-style: none;
    display: inline-block;
}

.topbar-social ul li {
    display: inline-block;
    margin-right: 11px;
}

.topbar-social ul li a {
    transition: .5s;
    width: 30px;
    height: 30px;
    background: #fff;
    line-height: 38px;
    text-align: center;
    display: inline-block;
    border-radius: 3px;
}

.topbar-social ul li a:hover {
    color: #a3c914;
}


/*==================================================
 <-- paints Header Area Css-->
===================================================*/

.header-area {
    position: relative;
    background: #fff;
    z-index: 9;
}

.header-area::before {
    position: absolute;
    content: "";
    width: 31%;
    height: 124px;
    background: url(../image/header-shape.png);
    background-repeat: no-repeat;
    left: -90px;
    bottom: -24px;
    z-index: -1;
}

.logo {
    margin-left: -110px;
    margin-top: -70px;
}

.header-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-menu ul {
    list-style: none;
    display: inline-block;
}

.header-menu ul li {
    display: inline-block;
    margin-right: 48px;
}

.header-menu ul li a {
    font-size: 18px;
    color: #273e47;
    font-weight: 500;
    position: relative;
    transition: .5s;
    padding: 36px 0;
    text-decoration: none;
    font-family: 'Cambay', sans-serif;
    display: inline-block;
}

.header-menu ul li a:hover {
    color: #a3c914;
}

.header-menu ul li a i {
    font-size: 20px;
    position: relative;
    top: 3px;
    left: -6px;
}


/* sticky menu css */

.sticky-nav {
    left: 0;
    margin: auto;
    top: 0;
    right: 0;
    width: 100%;
    position: fixed !important;
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
    -webkit-animation: 300ms running fadeInDown;
    animation: 500ms running fadeInUp;
    -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    transition: 0.5s !important;
    background: #FFF !important;
    z-index: 9999 !important;
    animation: fadeInDown 1s both 0.2s;
    padding: 0 30px;
}

.sticky-nav .logo {
    margin-top: 0;
}


/* sub menu */

.header-menu ul .sub-menu {
    background: #fff;
    position: absolute;
    top: 125%;
    border-radius: 5px;
    width: 250px;
    text-align: left;
    margin: 0;
    -webkit-box-shadow: 0px 1px 3px rgb(0 0 0 / 30%);
    transition: .5s;
    visibility: hidden;
    border-top: 2px solid #a3c914;
    opacity: 0;
    z-index: 11;
}

.header-menu ul .sub-menu ul li {
    display: inline-block;
    margin-left: 0;
    width: 100%;
}

.header-menu ul .sub-menu ul li a {
    padding: 8px 12px;
    text-align: left;
    width: 100%;
    display: inline-block;
    visibility: inherit !important;
    color: #003d4d;
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}

.header-menu ul .sub-menu ul li a:hover {
    color: #fff;
    background: #a3c914;
}

.header-menu ul .sub-menu ul li a::before {
    display: none;
}

.header-menu ul li:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    top: 99%;
}

/* mobile menu */

.mobile-menu-area {
    display: none;
}


/*==================================================
 <-- paints All Btn Css-->
===================================================*/

.paints-btn {
    display: inline-block;
}

.paints-btn a {
    display: inline-block;
    font-size: 18px;
    color: #ffffff;
    font-family: "Raleway";
    background: #a3c914;
    text-decoration: none;
    padding: 16px 27px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.paints-btn a::before {
    position: absolute;
    content: '';
    top: 0;
    left: -30px;
    width: 0;
    height: 100%;
    background: #212529;
    transition: .5s;
    transform: skew(35deg, 0deg) scale(1.7);
    z-index: -1;
    transition: 0.5s;
}

.paints-btn a:hover:before {
    width: 100%;
}

/* slider btn */

.paints-btn.slider1{
    position: relative;
    display: block;
    overflow: hidden;
	opacity: 0;
    -webkit-transform: perspective(400px) rotateX(20deg) translateY(80px);
    -ms-transform: perspective(400px) rotateX(20deg) translateY(80px);
    transform: perspective(400px) rotateX(20deg) translateY(80px);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 1000ms ease;
    -ms-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
}

.active .paints-btn.slider1{
	opacity: 1;
    -webkit-transform: perspective(400px) rotateX(0deg) translateY(0px);
    -ms-transform: perspective(400px) rotateX(0deg) translateY(0px);
    transform: perspective(400px) rotateX(0deg) translateY(0px);
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -ms-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;    
}

/* explore btn */

.paints-btn.explore a {
    background: #FFF;
    color: #a3c914;
}

.paints-btn.explore a:hover{
    color: #fff;
}

/*==================================================
 <-- paints Banner Area Css-->
===================================================*/
.banner-section {
    position: relative;
    display: block;
    background-attachment: fixed;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 1;
}

.banner-carousel .slide-item {
    position: relative;
    overflow: hidden;
    min-height: 792px;
}

.banner-carousel .slide-item .image-layer {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
	-webkit-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
    transition: all .8s ease-in-out .4s;
}

.banner-carousel .slide-item .image-layer:before{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.20);
    content: "";
    z-index: -1;
}

.banner-carousel .active .slide-item .image-layer {
	-webkit-transform:scale(1.05);
	-ms-transform:scale(1.05);
	transform:scale(1.05);
}

.slider-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45%;
    left: 11%;
}

.slider-sub-icon {
    display: inline-block;
    position: relative;
    top: 4px;
}

.slider-sub-title {
    margin-bottom: 17px;
    position: relative;
    padding: 0 30px;
}

.slider-sub-title::before {
    position: absolute;
    content: "";
    height: 1px;
    width: 26px;
    background: #fff;
    left: 0;
    top: 50%;
    -webkit-transform: perspective(400px) rotateX(20deg) translateY(80px);
    -ms-transform: perspective(400px) rotateX(20deg) translateY(80px);
    transform: perspective(400px) rotateX(20deg) translateY(80px);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 1000ms ease;
    -ms-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
}

.active .slider-sub-title::before{
	opacity: 1;
    -webkit-transform: perspective(400px) rotateX(0deg) translateY(0px);
    -ms-transform: perspective(400px) rotateX(0deg) translateY(0px);
    transform: perspective(400px) rotateX(0deg) translateY(0px);
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -ms-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;    
}


.slider-sub-title h4 {
    margin-left: 12px;
    font-size: 24px;
    font-weight: 500;
    line-height: 82px;
    color: #ffffff;
    font-family: "Raleway";
    position: relative;
    display: block;
    overflow: hidden;
    opacity: 0;
    -webkit-transform: perspective(400px) rotateX(20deg) translateY(80px);
    -ms-transform: perspective(400px) rotateX(20deg) translateY(80px);
    transform: perspective(400px) rotateX(20deg) translateY(80px);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 1000ms ease;
    -ms-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
}

.active .slider-sub-title h4{
	opacity: 1;
    -webkit-transform: perspective(400px) rotateX(0deg) translateY(0px);
    -ms-transform: perspective(400px) rotateX(0deg) translateY(0px);
    transform: perspective(400px) rotateX(0deg) translateY(0px);
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -ms-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;    
}

.slider-main-title{
    position: relative;
    display: block;
	opacity: 0;
    -webkit-transform: perspective(400px) rotateY(20deg) translateY(80px);
    -ms-transform: perspective(400px) rotateY(20deg) translateY(80px);
    transform: perspective(400px) rotateY(20deg) translateY(80px);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 1000ms ease;
    -ms-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
}

.slider-main-title h1 {
    font-size: 72px;
    line-height: 82px;
    color: #ffffff;
    font-weight: 700;
} 

.active .slider-main-title{
	opacity: 1;
    -webkit-transform: perspective(400px) rotateY(0deg) translateY(0px);
    -ms-transform: perspective(400px) rotateY(0deg) translateY(0px);
    transform: perspective(400px) rotateY(0deg) translateY(0px);
    -webkit-transition-delay: 1000ms;
    -moz-transition-delay: 1000ms;
    -ms-transition-delay: 1000ms;
    -o-transition-delay: 1000ms;
    transition-delay: 1000ms;    
}

.slider-main-title h1 {
    font-size: 72px;
    line-height: 82px;
    color: #ffffff;
    font-weight: bold;
}

.slider-discription{
    position: relative;
    display: block;
	opacity: 0;
    -webkit-transform: perspective(400px) rotateY(20deg) translateY(80px);
    -ms-transform: perspective(400px) rotateY(20deg) translateY(80px);
    transform: perspective(400px) rotateY(20deg) translateY(80px);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 1000ms ease;
    -ms-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
}

.slider-discription:before{
    position: absolute;
    top: 14px;
    left: 0;
    bottom: 21px;
    width: 10px;
    content: "";
} 

.active .slider-discription{
	opacity: 1;
    -webkit-transform: perspective(400px) rotateY(0deg) translateY(0px);
    -ms-transform: perspective(400px) rotateY(0deg) translateY(0px);
    transform: perspective(400px) rotateY(0deg) translateY(0px);
    -webkit-transition-delay: 1000ms;
    -moz-transition-delay: 1000ms;
    -ms-transition-delay: 1000ms;
    -o-transition-delay: 1000ms;
    transition-delay: 1000ms;    
}

.slider-discription p {
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 400;
    margin: 30px 0 56px;
    width: 85%;
}


/* video area css */

.video-area {
    height: 1000px;
    position: relative;
}

.video-area {
    height: 1000px;
    position: relative;
}

video.video-background {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
}

/*==================================================
 <-- paints Section title Css-->
===================================================*/

.section-sub-titile h4 {
    font-size: 24px;
    color: #a3c914;
    font-weight: 500;
    font-family: "Raleway";
    margin-bottom: 30px;
    padding: 0 60px;
    position: relative;
    display: inline-block;
}

.section-sub-titile h4::before {
    position: absolute;
    content: "";
    width: 40px;
    height: 3px;
    background: #a3c914;
    left: 0;
    top: 50%;
}

.section-main-title h2 {
    font-size: 48px;
    color: #3c3531;
    font-weight: 800;
    font-family: "Raleway";
    margin-bottom: 42px;
}

/* about section title */

.section-main-title.about h2 {
    margin-bottom: 24px;
}

/* team section title */

.section-main-title.team h2 {
    margin-bottom: 114px;
}

/* projects section title */

.section-main-title.porjects h2 {
    color: #fff;
}

/*==================================================
 <-- paints About Area Css-->
===================================================*/

.about-area {
    padding: 96px 0 123px;
}

/* about thumb */

.about-images {
    margin-left: -41px;
}

.about-thumb {
    position: relative;
}

.about-text {
    position: absolute;
    top: 50%;
    transform: rotate(-90deg);
    left: -19%;
}

.about-text h4 {
    font-size: 36px;
    color: #ffffff;
    font-weight: 700;
}

.about-counter {
    position: absolute;
    top: -26px;
    right: 80px;
    width: 113px;
    height: 119px;
    background-color: #a3c914;
    text-align: center;
    padding: 20px 0;
}

.about-counter h4 {
    font-size: 36px;
    color: #ffffff;
    font-weight: 700;
    display: inline-block;
}

.about-counter span {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
}

.about-counter h5 {
    font-size: 22px;
    line-height: 38px;
    color: #ffffff;
    font-weight: 700;
}

.about-shape {
    position: absolute;
    top: -26px;
    right: 55px;
}

.about-discription p {
    font-size: 16px;
    line-height: 24px;
    color: #505050;
    font-weight: 400;
    font-family: "Raleway";
    margin-bottom: 38px;
}

/* about itmes box */

.row.about-line {
    border-bottom: 1px solid #ebebeb;
    padding: 0px 0 8px;
    margin-bottom: 60px;
}

.about-icon {
    float: left;
    margin-right: 18px;
    margin-bottom: 18px;
}

.about-items-content h4 {
    font-size: 24px;
    line-height: 24px;
    color: #1c2d33;
    font-weight: 600;
    margin-bottom: 15px;
}

.about-items-content p {
    font-size: 16px;
    line-height: 24px;
    color: #505050;
    font-weight: 400;
}


/*==================================================
 <-- paints Feature Area Css-->
===================================================*/

.feature-area{
    padding: 0px 0 120px;
}

.feature-single-box {
    filter: drop-shadow(0 0 20px rgba(0,0,0,0.08));
    background-color: #ffffff;
    padding: 36px 26px 38px;
    overflow: hidden;
}

.feature-icon {
    width: 85px;
    height: 85px;
    border: 1px dashed #a3c914;
    border-radius: 5px;
    text-align: center;
    line-height: 83px;
    margin-bottom: 36px;
    position: relative;
    z-index: 1;
}

.feature-icon::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 0;
    background: #a3c914;
    border-radius: 5px;
    right: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: -1;
    transition: 0.5s;
}

.feature-single-box:hover .feature-icon::before{
    width: 100%;
    left: 0;
}

.feature-icon img{
    transition: 0.5s;
}

.feature-single-box:hover .feature-icon img{
    filter: brightness(0)invert(1);
}

.feature-content h4 a {
    font-size: 24px;
    color: #3c3531;
    font-weight: 600;
    font-family: "Raleway";
    text-decoration: none;
    transition: 0.5s;
}

.feature-single-box:hover .feature-content h4 a{
   color: #a3c914;
}

.feature-content p {
    font-size: 16px;
    line-height: 25px;
    color: #505050;
    font-weight: 400;
    margin: 15px 0 30px;
}

.feature-btn a {
    font-size: 19px;
    color: #a3c914;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    display: inline-block;
    left: 100px;
    transition: 0.5s;
}

.feature-single-box:hover .feature-btn a {
    left: 0;
}

.feature-btn a::before {
    position: absolute;
    content: "";
    width: 85px;
    height: 1px;
    background: #a3c913;
    left: -100px;
    top: 10px;
    transition: 0.5s;
}

.feature-single-box:hover .feature-btn a::before {
    opacity: 0;
}


/*==================================================
 <-- paints Service Area Css-->
===================================================*/

.service-area{
    background: #f9f9f9;
    padding: 120px 0 120px;
}

.service-thumb {
    position: relative;
}

.service-content {
    position: absolute;
    bottom: 30px;
    height: 190px;
    filter: drop-shadow(0 0 13px rgba(0,0,0,0.15));
    background-color: #ffffff;
    width: 90%;
    padding: 0 30px 0;
    left: 40px;
    transition: 0.5s;
}

.service-single-box:hover .service-content{
    left: 0;
}

.service-icon {
    width: 92px;
    height: 92px;
    background-color: #a3c913;
    text-align: center;
    line-height: 92px;
    border-radius: 50px 50px 0px 0px;
    position: relative;
    top: -60px;
    margin-bottom: -28px;
}

.service-icon img{
    transition: 0.5s;
}

.service-single-box:hover .service-icon img {
    transform: rotate(-360deg);
}

.service-text h4 a {
    font-size: 24px;
    color: #3c3531;
    font-weight: 700;
    text-decoration: none;
    transition: 0.5s;
}

.service-single-box:hover .service-content{
   color:#a3c913;
}

.service-text p {
    font-size: 16px;
    line-height: 24px;
    color: #3c3531;
    font-weight: 400;
    margin: 10px 0 0;
}


/*==================================================
 <-- paints Counter Area Css-->
===================================================*/

.counter-area{
    background: url(../image/counter-bg.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 110px 0 110px;
}

.counter-single-box {
    text-align: center;
}

.counter-icon {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: #3c3531;
    text-align: center;
    line-height: 130px;
    display: inline-block;
}

.counter-content h4 {
    font-size: 48px;
    color: #ffffff;
    font-weight: 600;
    margin: 30px 0 15px;
}

.counter-content p {
    font-size: 24px;
    color: #ffffff;
    font-weight: 600;
}

/*==================================================
 <-- paints Team Area Css-->
===================================================*/
.team-area {
    padding: 120px 0 122px;
}

.team-single-box {
    background: #f1f1f1;
    padding: 0 15px 28px;
}

.team-thumb {
    position: relative;
    top: -68px;
    margin-bottom: -55px;
}

.team-social-icon {
    position: absolute;
    top: 30px;
    right: 30px;
}

.team-social-icon ul {
    list-style: none;
    background: #f3efec;
    padding: 7px 8px 9px;
}

.team-social-icon ul li {
    margin-top: 2px;
}

.team-social-icon ul li a {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    display: block;
    text-align: center;
    font-size: 20px;
    line-height: 45px;
    color: #a3c914;
    position: relative;
    transition: 0.5s;
    z-index: 1;
}

.team-social-icon ul li a:hover{
    color: #ffff;
}

.team-social-icon ul li a::before {
    position: absolute;
    content: "";
    height: 0;
    width: 100%;
    background: #a3c914;
    right: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: -1;
    transition: 0.5s;
}

.team-social-icon ul li a:hover::before{
    height: 100%;
    top: 0;
}

.team-content h4 a {
    font-size: 28px;
    line-height: 63px;
    color: #a3c914;
    font-weight: 700;
    font-family: "Raleway";
    text-decoration: none;
}

.team-content p {
    font-size: 16px;
    color: #3c3531;
    font-weight: 400;
}

/*==================================================
 <-- paints Projects Area Css-->
===================================================*/

.project-area {
    background: url(../image/project-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 118px 0 110px;
}

.project-area .container{
    max-width: 1650px;
}

.project-discription p {
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 400;
    width: 87%;
}

.project-single-box {
    margin: 10px;
}

.project-thumb {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.project-thumb::before {
    position: absolute;
    content: "";
    opacity: 0.580;
    width: 368px;
    height: 415px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #000000;
    z-index: 1;
    -webkit-transform: scaleY(0) translateZ(100px);
    -ms-transform: scaleY(0) translateZ(100px);
    transform: scaleY(0) translateZ(100px);
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease;
    transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease;
    visibility: hidden;
}

.project-single-box:hover .project-thumb::before{
    -webkit-transform: scaleY(1) translateZ(0px);
    -ms-transform: scaleY(1) translateZ(0px);
    transform: scaleY(1) translateZ(0px);
    visibility: visible;
}

.project-thumb img{
    transition: all 2s ease;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    overflow: hidden;
}

.project-single-box:hover .project-thumb img{
    transform: scale(1.15);
}

.project-content {
    position: absolute;
    top: 50%;
    left: -50%;
    right: 0;
    margin: auto;
    text-align: center;
    transform: translateY(-50%);
    z-index: 9;
    opacity: 0;
    transition: all 2s ease;
}

.project-single-box:hover .project-content{
    left: 0;
    opacity: 1;
}

.project-content h4 a {
    font-size: 24px;
    line-height: 60px;
    color: #ffffff;
    font-weight: 700;
    font-family: "Raleway";
    text-decoration: none;
}

.project-content span {
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
}

.project-icon {
    position: absolute;
    bottom: 0;
    right: 25px;
    z-index: 9;
    opacity: 0;
    transition: all 3s ease;
}

.project-single-box:hover .project-icon{
    bottom: 20px;
    opacity: 1;
}

.project-icon a {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #a3c914;
    text-align: center;
    line-height: 60px;
    color: #a3c914;
    font-size: 20px;
    transition: 0.5s;
}

.project-icon a:hover{
    background:#a3c914;
    color: #ffff;
}

/* owl nav css */

.project-area .owl-nav {
    position: absolute;
    top: -115px;
    right: 18px;
    display: inline-flex;
}

.project-area .owl-prev i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    font-size: 20px;
    margin-right: 15px;
    transition: 0.5s;
}

.project-area .owl-prev:hover i{
    background: #a3c914;
}

.project-area .owl-next i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    font-size: 20px;
    transition: 0.5s;
}

.project-area .owl-next:hover i{
    background: #a3c914;
}

/*==================================================
 <-- paints Pricing Area Css-->
===================================================*/

.pricing-area{
    padding: 120px 0 120px;
}

.pricing-single-box {
    filter: drop-shadow(0 0 20px rgba(0,0,0,0.08));
    background-color: #ffffff;
    position: relative;
    top: 0;
    z-index: 1;
    padding: 0 20px 42px;
    transition: 0.5s;
}

.pricing-single-box:hover{
    top: -10px;
}

.pricing-single-box::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 150px;
    background: url(../image/pricing-thumb.png);
    background-position: center center;
    background-repeat: no repeat;
    background-size: cover;
    top: 0;
    left: 0;
    z-index: -1;
}

.pricing-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 25px 76px;
}

.pricing-title h4 {
    font-size: 24px;
    line-height: 60px;
    color: #ffffff;
    font-weight: 700;
}

.pricing-title span {
    font-size: 20px;
    color: #ffffff;
    font-weight: 400;
}

.pricing-list {
    border: 1px solid #f8efea;
    padding: 30px 30px 7px;
    margin-bottom: 40px;
}

.pricing-list span {
    display: block;
    font-size: 18px;
    color: #505050;
    font-weight: 500;
    margin-bottom: 24px;
}

.pricing-list span i{
    color: #a3c914;
    margin-right: 5px;
}

.pricing-btn a {
    width: 100%;
    height: 61px;
    border-radius: 5px;
    background-color: #a3c914;
    display: inline-block;
    text-align: center;
    font-size: 22px;
    line-height: 66px;
    color: #ffffff;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    z-index: 1;
}

.pricing-btn a::before {
    position: absolute;
    content: "";
    left: 0;
    height: 100%;
    width: 0;
    top: 0;
    background: #3c3531;
    border-radius: 5px 0px 0px 5px;
    z-index: -1;
    transition: 0.5s;
}

.pricing-single-box:hover .pricing-btn a::before{
    width: 50%;
}

.pricing-btn a::after {
    position: absolute;
    content: "";
    right: 0;
    height: 100%;
    width: 0;
    top: 0;
    background: #3c3531;
    border-radius: 0px 5px 5px 0px;
    z-index: -1;
    transition: 0.5s;
}

.pricing-single-box:hover .pricing-btn a::after{
    width: 50%;
}

/*==================================================
 <-- paints Call Do Area Css-->
===================================================*/

.call-do-area {
    background: url(../image/call-do-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 586px;
    margin-bottom: -150px;
}

.video-icon a {
    width: 83px;
    height: 83px;
    background-color: #f7f7f7;
    display: inline-block;
    line-height: 100px;
    font-size: 50px;
    color: #a3c914;
    position: relative;
    transition: 0.5s;
}

.video-icon a:hover{
    background:#a3c914;
    color: #fff;
}

.video-icon a::before {
    content: "";
    border: 4px solid #ffffff;
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    margin: auto;
    transform: translate(-50%, -50%);
    display: block;
    width: 200px;
    height: 200px;
    -webkit-animation: zoombig 3.25s linear infinite;
    animation: zoombig 3.25s linear infinite;
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
}
 
.video-icon a::after {
    content: "";
    border: 4px solid #ffffff;
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 200px;
    height: 200px;
    -webkit-animation: zoombig 3.25s linear infinite;
    animation: zoombig 3.25s linear infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

@-webkit-keyframes zoombig {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
        border-width: 3px;
    }

    40% {
        opacity: .5;
        border-width: 3px;
    }

    65% {
        border-width: 2px;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
        border-width: 2px;
    }
}

@keyframes zoombig {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
        border-width: 3px;
    }

    40% {
        opacity: .5;
        border-width: 3px;
    }

    65% {
        border-width: 2px;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
        border-width: 2px;
    }
}

/*==================================================
 <-- paints Explore Area Css-->
===================================================*/

.row.explore {
    background: url(../image/explore-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 240px;
    padding: 70px 0 0;
}

.call-do-content h4 {
    font-size: 30px;
    color: #ffffff;
    font-weight: 500;
}



/*==================================================
 <-- paints Work Process Area Css-->
===================================================*/

.work-process-area {
    padding: 120px 0 96px;
}

.work-process-single-box {
    text-align: center;
    padding: 0 45px 0;
    position: relative;
}

.work-process-single-box::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    right: -50%;
    top: -60px;
    background: url(../image/work-shape.png);
    background-repeat: no-repeat;
    background-position: center center;
}

.work-process-single-box.inner::before {
    display: none;
}

.work-process-icon {
    height: 150px;
    width: 150px;
    display: inline-block;
    text-align: center;
    border: 3px solid #a3c914;
    line-height: 150px;
    border-radius: 50%;
    position: relative;
    transition: all 2s ease;
}

.work-process-single-box:hover .work-process-icon{
    transform: rotate(360deg);
}

.work-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 41px;
    height: 41px;
    border-radius: 50%;
    background-color: #a3c914;
    padding: 4px 0;
}

.work-text h4{
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 600;
}

.work-content h4 {
    font-size: 24px;
    line-height: 60px;
    color: #3c3531;
    font-weight: 600;
    margin: 15px 0 0;
    transition: 0.5s;
}

.work-process-single-box:hover .work-content h4{
    color: #a3c914;
}

.work-content p {
    font-size: 18px;
    line-height: 26px;
    color: #505050;
    font-weight: 400;
}

/*==================================================
 <-- paints Contact Us Area Css-->
===================================================*/

.contact-us-area {
    padding: 170px 0 120px;
    background: #f9f9f9;
}

.contact-us-content h2 {
    font-size: 48px;
    line-height: 30px;
    color: #3c3531;
    font-weight: 700;
    margin-bottom: 23px;
}

.contact-us-content p {
    font-size: 18px;
    line-height: 30px;
    color: #5b5858;
    font-weight: 400;
}

/* contact form */

.form-box.inner {
    position: relative;
}

.form-box.inner input {
    background: none;
    border-bottom: 1px solid #b5c3c6;
    padding: 0 30px;
    border-radius: 0;
    outline: 0;
}

.form-box.inner input::placeholder{
    font-size: 16px;
    color: #5b5858;
    font-weight: 400;
}

.form-box.inner textarea {
    background: none;
    border-bottom: 1px solid #b5c3c6;
    padding: 18px 30px;
    height: 100px;
    border-radius: 0;
    outline: 0;
    margin-bottom: 50px;
}

.form-box.inner textarea::placeholder{
    font-size: 16px;
    color: #5b5858;
    font-weight: 400;
}

.form-box.inner i {
    position: absolute;
    right: 0;
    top: 19px;
    font-size: 20px;
}

.checkbox-box input {
    height: 20px;
    width: 20px;
    border: 1px solid #b5c3c6;
    background: #b5c3c6;
    position: relative;
    top: 5px;
}

.checkbox-box label {
    padding-left: 5px;
    font-size: 15px;
    color: #5b5858;
    font-weight: 400;
}

/* contact thumb */

.contact-us-thumb {
    position: relative;
    z-index: 1;
    margin-left: 40px;
}

.contact-us-shape {
    position: absolute;
    top: -50px;
    left: 50px;
    z-index: -1;
}

/*==================================================
 <-- paints Blog Area Css-->
===================================================*/
.blog-area {
    padding: 120px 0 196px;
}

.blog-single-box {
    position: relative;
}

.blog-thumb{
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.blog-thumb::before{
    position: absolute;
    content: "";
    opacity: 0.580;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: rgba(163,201,20,0.5);
    z-index: 1;
    -webkit-transform: scaleY(0) translateZ(100px);
    -ms-transform: scaleY(0) translateZ(100px);
    transform: scaleY(0) translateZ(100px);
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease;
    transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease;
    visibility: hidden;
}

.blog-single-box:hover .blog-thumb::before {
    -webkit-transform: scaleY(1) translateZ(0px);
    -ms-transform: scaleY(1) translateZ(0px);
    transform: scaleY(1) translateZ(0px);
    visibility: visible;
}

.blog-thumb img {
    transition: all 2s ease;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.blog-single-box:hover .blog-thumb img {
    transform: scale(1.15);
}

.blog-content {
    position: absolute;
    width: 383px;
    height: 237px;
    border-radius: 3px;
    filter: drop-shadow(0.5px 0.866px 25.5px rgba(0,0,0,0.08));
    background-color: #ffffff;
    bottom: -70px;
    left: 0;
    right: 0;
    margin: auto;
    padding: 32px 35px 0;
    z-index: 9;
}

.blog-meta {
    margin: 0 20px 11px;
}

.blog-meta span {
    opacity: 0.902;
    font-size: 16px;
    line-height: 34px;
    color: #505050;
    font-weight: 400;
    margin-right: 20px;
}

.blog-meta span i {
    margin-right: 5px;
    font-size: 20px;
    color: #a3c914;
}

.blog-title {
    border-bottom: 1px dashed #a3c914;
    padding: 0 0 20px;
    margin-bottom: 18px;
}

.blog-title h4 a {
    font-size: 24px;
    line-height: 34px;
    color: #3c3531;
    font-weight: 700;
    font-family: "Raleway";
    text-decoration: none;
    transition: 0.5s;
}

.blog-single-box:hover .blog-title h4 a {
    color: #a3c914;
}

.blog-button {
    text-align: center;
}

.blog-button a {
    font-size: 18px;
    line-height: 34px;
    text-decoration: underline;
    color: #a3c914;
    font-weight: 500;
}


/*==================================================
 <-- paints Footer Area Css-->
===================================================*/

.footer-area {
    padding: 100px 0 0px;
    background: #171717;
    position: relative;
    z-index: 1;
}

.footer-area::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 280px;
    background: url(../image/footer-shape.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    left: 0;
    z-index: -1;
} 


.footer-widget-content h4 {
    font-size: 34px;
    line-height: 44px;
    color: #ffffff;
    font-weight: 700;
}

/* footer form */

.form-field {
    position: relative;
}

.form-field input {
    width: 100%;
    height: 64px;
    background-color: #ffffff;
    border: 0;
    outline: 0;
    padding: 0 20px;
}

.form-field input::placeholder {
    font-size: 16px;
    color: #939393;
    font-weight: 400;
}

.form-field button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    outline: none;
}

.form-field button i {
    width: 54px;
    height: 54px;
    background-color: #a3c914;
    display: inline-block;
    line-height: 54px;
    color: #fff;
    font-size: 20px;
    transition: 0.5s;
}

.form-field button:hover i{
    background: #fff;
    color: #a3c914;
    border: 1px solid #a3c914;
}


/* footer widget */

.footer-wiget-text h4 {
    margin: 25px 0 22px;
    font-size: 16px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 400;
}

.footer-wiget-title h4 {
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    line-height: 34px;
    font-weight: 600;
    padding: 0 0 18px;
    transition: .5s;
}

.footer-wiget-title h4 {
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 34px;
    padding: 0 0 27px;
    position: relative;
}

.footer-wiget-title h4::before {
    position: absolute;
    content: "";
    width: 100px;
    height: 1px;
    background: #a3c914;
    bottom: 17px;
}

.footer-socilal-title h4 {
    opacity: 0.800;
    font-size: 22px;
    line-height: 34px;
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 16px;
    padding: 0 20px;
    position: relative;
}

.footer-socilal-title h4::before {
    position: absolute;
    content: "";
    width: 3px;
    height: 30px;
    background: #a3c914;
    left: 0px;
}

/* footer social */

.footer-social ul li {
    list-style: none;
    display: inline-block;
    margin-right: 7px;
}

.footer-social ul li a i {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    display: inline-block;
    border: 1px dashed #1a3851;
    font-size: 16px;
    color: #FFF;
    transition: .5s;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.footer-social ul li a:hover i {
    color: #a3c914;
    border: 1px dashed #a3c914;
}

.footer-social ul li a i::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 0px;
    height: 100%;
    content: "";
    bottom: 0;
    background: #FFF;
    z-index: -1;
    transition: .5s;
    margin: auto;
}

.footer-social ul li a i:hover::after {
    width: 100%;
    left: 0;
}


.footer-wiget-menu ul {
    list-style: none;
}

.footer-wiget-menu ul li {
    list-style: none;
    margin-top: 0px;
}

.footer-wiget-menu ul li a {
    display: inline-block;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    transition: .5s;
    margin: 0;
    line-height: 50px;
    color: #ffffff;
}

.footer-wiget-menu ul li a:hover {
    color: #a3c914;
    margin-left: 10px;
}

.footer-wiget-menu ul li a i {
    color: #a3c914;
}

/* footer widget photo */

.footer-widget-photo ul {
    margin-top: 16px;
}

.footer-widget-photo ul li {
    list-style: none;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.footer-widget-photo ul li img {
    width: 100%;
    transition: all 2s ease;
}

.footer-widget-photo ul li img:hover {
    transform: scale(1.15);
}

.footer-widget-photo ul li::before {
    position: absolute;
    left: 0;
    content: "";
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(163,201,20,0.9);
    z-index: 1;
    opacity: 0.5;
    -webkit-transform: scaleY(0) translateZ(100px);
    -ms-transform: scaleY(0) translateZ(100px);
    transform: scaleY(0) translateZ(100px);
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease;
    transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease, -webkit-transform 700ms ease;
    visibility: hidden;
}

.footer-widget-photo ul li:hover::before {
    -webkit-transform: scaleY(1) translateZ(0px);
    -ms-transform: scaleY(1) translateZ(0px);
    transform: scaleY(1) translateZ(0px);
    visibility: visible;
}



.row.line {
    border-top: 1px dotted #a3c914;
    padding: 18px 0 8px;
}

.copyright-text {
    margin-top: 15px;
    text-align: center;
}

.copyright-text p {
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
}

.copyright-text p a {
    color: #a3c914;
}




/*===============================================================
<-- All Inner Page Css-->
=================================================================*/
/* breatcome area css */


.breatcome-area {
    background: url(../image/bretcome-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 154px 0;
}

.breatcome-content {
    position: relative;
}

.breatcome-discription p {
    text-align: center;
    font-size: 28px;
    line-height: 27px;
    color: #ffffff;
    font-weight: 400;
}

.breatcome-title h1 {
    color: #fff;
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 19px;
    text-align: center;
}

.bratcome-text {
    position: absolute;
    left: 0;
    bottom: -173px;
    background: #a3c914;
    padding: 23px 35px;
    border-radius: 5px 5px 0 0;
}

.bratcome-text ul {
    list-style: none;
}

.bratcome-text ul li {
    display: inline-block;
    margin-right: 12px;
    font-size: 22px;
    color: #ffffff;
    font-weight: 500;
    line-height: 27px;
    font-weight: 500;
}

.bratcome-text ul li a {
    display: inline-block;
    font-size: 22px;
    line-height: 27px;
    color: #ffffff;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: .5s;
}

.bratcome-text ul li a:hover {
    color: #a3c914;
}

.bratcome-text ul li a::before {
    position: absolute;
    content: "/";
    left: 62px;
}

/*==================================================
 <-- About Inner Page Css-->
===================================================*/

/* about area */

.about-area.inner-page {
    padding: 146px 0 123px;
}

/*==================================================
 <-- Service Inner Page Css-->
===================================================*/

/* feature area */

.feature-area.inner-page {
    padding: 120px 0 120px;
}


/*==================================================
 <-- Service Details Inner Page Css-->
===================================================*/
.service-details-area {
    padding: 120px 0 72px;
}

/* widget catagories box */

.widget-categories-box {
    margin-bottom: 30px;
}

.widget-categories-menu ul li {
    list-style: none;
    padding: 15px;
    position: relative;
    margin-bottom: 17px;
    background: #f8f6f1;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.widget-categories-menu ul li::after {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    transition: all 0.5s linear 0s;
    background-color: #a3c914;
    content: "";
    z-index: -1;
}

.widget-categories-menu ul li:hover::after {
    width: 100%;
}

.widget-categories-menu ul li a {
    display: block;
    overflow: hidden;
    text-decoration: none;
    font-size: 22px;
    line-height: 27px;
    color: #003d4d;
    font-weight: 500;
    transition: .5s;
}

.widget-categories-menu ul li:hover a {
    color: #fff;
}

.widget-categories-menu ul li a span {
    float: right;
}

/* widget contact box */

.widget-contact-box {
    background: url(../image/widget-s-thumb.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    padding: 63px 30px 57px;
    margin-bottom: 40px;
}

.widget-contact-title h4 {
    font-size: 36px;
    line-height: 48px;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 27px;
}

.widget-contact-icon {
    width: 81px;
    height: 81px;
    display: inline-block;
    background: #fff;
    line-height: 75px;
    text-align: center;
    border-radius: 50%;
    margin-bottom: 34px;
}

.widget-contact-content h6 {
    font-size: 16px;
    line-height: 48px;
    color: #ededed;
    font-weight: 400;
}

.widget-contact-content h4 {
    font-size: 30px;
    line-height: 48px;
    color: #ededed;
    font-weight: 600;
}

/* widget pdf btn */

.widget-download-btn a {
    font-size: 24px;
    color: #ffffff;
    font-weight: 600;
    background: #a3c914;
    text-decoration: none;
    padding: 22px 76px;
    transition: .5s;
}

.widget-download-btn a:hover {
    background: #003d4d;
}

.widget-download-btn a i {
    font-size: 38px;
    position: relative;
    top: 4px;
}

/* service details right bar */

.service-details-thumb {
    overflow: hidden;
    margin-bottom: 33px;
}

.service-details-thumb img {
    width: 100%;
    transition: all 2s ease;
}

.service-details-thumb img:hover {
    transform: scale(1.15);
}

.service-details-title h4 {
    font-size: 40px;
    color: #3c3531;
    font-weight: 600;
    margin-bottom: 12px;
}

.service-detials-discription {
    margin-bottom: 32px;
}

.service-detials-discription p {
    font-size: 16px;
    line-height: 24px;
    color: #3c3531;
    font-weight: 400;
}

.service-list-title h4 {
    font-size: 24px;
    color: #3c3531;
    font-weight: 600;
    margin-bottom: 12px;
    border-bottom: 1px solid #d5d5d5;
    padding: 0px 0 19px;
}

.service-detials-list span {
    font-size: 16px;
    line-height: 32px;
    color: #3c3531;
    font-weight: 500;
    padding: 0 28px 0;
    display: block;
    position: relative;
}

.service-detials-list span::before {
    position: absolute;
    content: "";
    width: 14px;
    height: 14px;
    background-color: #1585b5;
    left: 0;
    top: 9px;
}

/*==================================================
 <-- Team Details Inner Page Css-->
===================================================*/

.team-details-area {
    padding: 122px 0 0;
}

.team-author-thumb img {
    width: 100%;
}

/* progress bar  */

.team-details-area .process-ber-plugin {
    margin: 50px 60px 0;
}

.team-details-area .barfiller {
    margin-bottom: 40px;
}


/* progress bar */


.barfiller {
    width: 368px;
    height: 8px;
    position: relative;
    margin-bottom: 16px;
    margin-top: 21px;
    background-color: #f2f2f2;
}

.barfiller .fill {
    display: block;
    position: relative;
    width: 0px;
    height: 100%;
    z-index: 1;
}

.barfiller .tip {
    font-size: 18px;
    color: #252638;
    font-weight: 500;
    top: -42px;
    padding: 1px 6px;
    left: 0px;
    position: absolute;
}

.stat-bar:nth-of-type(1) .stat-bar-rating {
    animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}

span.fill {
    background: #a3c914 !important;
    border-radius: 0px 15px 15px 0px;
}


/* author info */

.row.author-info {
    background: #f8f6f1;
    padding: 35px 40px 25px;
    margin-top: -200px;
}

.team-author-exprience ul li {
    list-style: none;
    margin-bottom: 17px;
}

.team-author-exprience ul li span {
    font-size: 20px;
    color: #888888;
    font-weight: 400;
    line-height: 45px;
}

.team-author-exprience ul li h4 {
    font-size: 24px;
    color: #3c3531;
    font-weight: 600;
}

.team-author-socila {
    text-align: center;
    margin-right: -76px;
    margin-top: 24px;
}

.team-author-socila ul li {
    list-style: none;
    margin: 17px 0px 0;
}

.team-author-socila ul li a {
    display: inline-block;
    height: 40px;
    width: 40px;
    background: #ffffff;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.team-author-socila ul li a::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #a3c914;
    border-radius: 50%;
    transform: scale(0);
    transition: .5s;
    z-index: -1;
}

.team-author-socila ul li a:hover::before {
    transform: scale(1);
}

.team-author-socila ul li a {
    transition: .5s;
}

.team-author-socila ul li a:hover i {
    color: #ffffff;
}

/*==================================================
 <-- Project Grid Inner Page Css-->
===================================================*/
.project-grid-area {
    padding: 120px 0 94px;
}

.project-grid-thumb {
    position: relative;
    overflow: hidden;
    margin-bottom: 29px;
}

.project-grid-thumb img {
    transition: all 2s ease;
}

.project-grid-thumb img:hover{
    transform: scale(1.15);
}

.project-grid-content {
    position: absolute;
    bottom: -100px;
    width: 554px;
    height: 128px;
    background-color: #ebebeb;
    padding: 20px 28px 0;
    left: 16px;
    border-radius: 0px 30px 0px 0px;
    opacity: 0;
    transition: .5s;
}

.project-grid-thumb:hover .project-grid-content{
    bottom: 10px;
    opacity: 1;
}

.project-grid-content h4 a {
    font-size: 26px;
    line-height: 52px;
    color: #3c3531;
    font-weight: 600;
    text-decoration: none;
    transition: .5s;
}

.project-grid-content h4 a:hover{
    color: #a3c914;
}

.project-grid-content p {
    font-size: 18px;
    font-weight: 400;
}

.project-grid-icon {
    position: absolute;
    top: -50px;
    right: 20px;
    opacity: 0;
    transition: all 2s ease;
}

.project-grid-thumb:hover .project-grid-icon {
    top: 20px;
    opacity: 1;
}

.project-grid-icon a {
    color: #fff;
    font-size: 32px;
    width: 90px;
    height: 90px;
    background-color: #a3c914;
    line-height: 90px;
    text-align: center;
    border-radius: 30px 0px 0px 0px;
    transition: .5s;
    display: inline-block;
}

.project-grid-icon a:hover{
    background: #fff;
    color: #a3c914;
}

/*==================================================
 <-- Project Details Inner Page Css-->
===================================================*/

.project-detials-area {
    padding: 120px 0 100px;
}

.project-details-thumb {
    margin-bottom: 55px;
    overflow: hidden;
}

.project-details-thumb img {
    width: 100%;
    transition: all 2s ease;
}

.project-details-thumb img:hover{
    transform: scale(1.15);
}

.project-details-title h4 {
    font-size: 30px;
    color: #3c3531;
    font-weight: 600;
}

.porject-detials-discription {
    margin: 25px 0 57px;
}

.porject-detials-discription p {
    font-size: 16px;
    line-height: 24px;
    color: #434141;
    font-weight: 400;
}

.porject-detials-discription.inner {
    margin: -14px 0 0;
}

/*===============================================================
<-- Blog Details Inner page Css-->
=================================================================*/

.blog-details-area {
    padding: 122px 0 120px;
}

.blog-details-thumb img {
    width: 100%;
}

.blog-details-meta {
    margin: 29px 0 26px;
}

.blog-details-meta span {
    opacity: 0.902;
    font-size: 16px;
    line-height: 34px;
    color: #4d4e4f;
    font-weight: 400;
    margin-right: 27px;
}

.blog-details-meta span i {
    font-size: 22px;
    position: relative;
    top: 4px;
    margin-right: 12px;
}

.blog-details-content {
    margin-bottom: 42px;
}

.blog-details-content h4 {
    font-size: 40px;
    line-height: 28px;
    color: #3c3531;
    font-weight: 600;
    margin-bottom: 35px;
}

.blog-details-content p {
    font-size: 16px;
    line-height: 28px;
    color: #3c3531;
    font-weight: 400;
}

.blog-details-tag h6 {
    font-size: 24px;
    color: #3c3531;
    font-weight: 500;
    display: inline-block;
    margin-right: 60px;
}

.blog-details-tag {
    border: 1px solid #a3c914;
    padding: 24px 38px;
    margin-bottom: 55px;
}

.blog-details-tag h6 {
    font-size: 24px;
    color: #3c3531;
    font-weight: 500;
    display: inline-block;
    margin-right: 32px;
}

.blog-details-tag a {
    font-size: 16px;
    color: #a3c914;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    margin-right: 10px;
    border: 1px solid #eceae5;
    padding: 4px 22px;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.blog-details-tag a:hover {
    color: #FFf;
}

.blog-details-tag a:before {
    position: absolute;
    content: "";
    left: -2px;
    top: 0px;
    height: 102%;
    width: 0%;
    right: 0;
    margin: auto;
    background: #a3c914;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.blog-details-tag a:hover::before {
    width: 100%;
}

.blog-team-thumb {
    float: left;
    margin-right: 30px;
}

.blog-team-content h4 a {
    font-size: 24px;
    color: #3c3531;
    font-weight: 600;
    text-decoration: none;
}

.blog-team-content p {
    font-size: 20px;
    line-height: 30px;
    color: #3c3531;
    font-weight: 400;
    margin: 15px 0 9px;
}

.ba-blog-details-social-icons.two h6 {
    font-size: 18px;
    color: #3c3531;
    font-weight: 400;
    display: inline-block;
    margin-right: 14px;
}

.ba-blog-details-social-icons.two a {
    font-size: 16px;
    margin-right: 10px;
}

.blog-team-thumb {
    float: left;
    margin-right: 30px;
    margin-top: -12px;
}

.row.blog-item {
    padding: 20px 68px 20px;
    border-top: 1px solid #a3c914;
    border-bottom: 1px solid #a3c914;
}

.blog-item-content h4 {
    font-size: 20px;
    color: #a3c914;
    font-weight: 500;
}

.blog-details-item.two {
    margin-left: 90px;
}

.blog-details-area .owl-nav {
    display: none;
}

/* blog details comment */

.blog-details-comment {
    margin-top: 36px;
}

.blog-details-comment h5 {
    font-size: 30px;
    line-height: 28px;
    color: #292930;
    font-weight: 500;
    position: relative;
    margin-bottom: 36px;
}

.blog-details-comment h5::after {
    position: absolute;
    bottom: -10px;
    width: 70px;
    height: 3px;
    background: #a3c914;
    content: "";
    left: 0;
}

.blog-comment-list ul li {
    list-style: none;
    margin-bottom: 0;
}

.blog-comment-box {
    position: relative;
}

.blog-comment-box::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background: #E4E4E4;
    bottom: -30px;
}

.blog-comment-box.inner {
    margin-left: 50px;
}

.blog-comment-box.inner::before {
    display: none;
}

.blog-comment-thumb {
    float: left;
    margin-right: 24px;
    margin-top: 12px;
}

.blog-comment-thumb img {
    border-radius: 4px;
}

.blog-comment-list .title {
    margin-bottom: 5px;
    margin-left: -12px;
}

.blog-comment-list h6.title {
    color: #18191D;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}

.blog-comment-list span.date {
    margin-left: -13px;
}

.content-main p {
    color: #747474;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    margin: 10px 0 0;
}

.text-sm-end a {
    display: inline-block;
    text-decoration: none;
    padding: 7px 13px;
    background: #EFEFEF;
    border-radius: 3px;
    color: #102039;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    position: relative;
    transition: .5s;
    z-index: 1;
}

.text-sm-end a:hover {
    color: #fff;
}

.text-sm-end a::before {
    position: absolute;
    content: "";
    left: -2px;
    top: 0px;
    height: 102%;
    width: 0%;
    right: 0;
    margin: auto;
    background: #a3c914;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.text-sm-end a:hover::before {
    width: 100%;
}

/* blog contact box */

.blog-contact-box {
    background: #eff5f4;
    padding: 20px 30px 20px;
}

.blog-contact-title h4 {
    color: #18191D;
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 54px;
    position: relative;
}

.blog-contact-title h4::before {
    position: absolute;
    bottom: -10px;
    width: 70px;
    height: 3px;
    background: #a3c914;
    content: "";
    left: 0;
}

/* contact form */

.form-box input {
    width: 100%;
    height: 64px;
    background: #ffffff;
    border: none;
    border-radius: 3px;
    padding: 0 17px;
    margin-bottom: 25px;
}

.form-box input::placeholder {
    color: #525459;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.form-box textarea {
    width: 100%;
    height: 145px;
    background: #ffff;
    border: none;
    border-radius: 3px;
    padding: 5px 17px;
    margin-bottom: 25px;
}

.form-box textarea::placeholder {
    color: #525459;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.form-box-button button {
    width: 210px;
    height: 60px;
    border-radius: 3px;
    background-color: #a3c914;
    border: 0;
    outline: 0;
    font-size: 19px;
    font-weight: 500;
    color: #fff;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.form-box-button button::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    transform: scale(0.0, 1);
    opacity: 0;
    border-radius: 3px;
    z-index: -1;
    transition: .5s;
}

.form-box-button button:hover::before {
    background: #18191D;
    opacity: 1;
    transform: scale(1, 1);
}

.form-box-button.inner {
    text-align: center;
}

/* widget search box */

.widget_search.box {
    margin-bottom: 30px;
}

.widget_search form {
    position: relative;
}

.widget_search input {
    border-radius: 4px;
    padding-left: 20px;
    height: 60px;
    width: 100%;
    position: relative;
    color: #606060;
    font-weight: 400;
    background: #f8f6f1;
    border: none;
    outline: 0;
}

.widget_search input::placeholder {
    font-size: 16px;
    line-height: 28px;
    color: #868686;
    font-weight: 400;
}

button.icons {
    border: 0;
    font-size: 18px;
    color: #fff;
    padding: 1px 15px;
    position: absolute;
    right: 0;
    top: 0;
    height: 60px;
    width: 60px;
    background: #a3c914;
    border-radius: 0 3px 3px 0;
}

/* widget recent box */

.widget-recent-box {
    background: #f8f6f1;
    padding: 50px 35px 55px;
    margin-bottom: 30px;
}

.widget-recent-title h4 {
    font-size: 30px;
    color: #a3c914;
    font-weight: 600;
    margin-bottom: 40px;
    border-bottom: 1px solid #ece6e6;
    padding: 0 0 14px;
}

.sidber-widget-recent-post {
    background: #ffffff;
    border-radius: 5px;
    padding: 16px 20px;
}

.recent-widget-thumb {
    float: left;
    margin-right: 20px;
    margin-top: 10px;
    overflow: hidden;
}

.recent-widget-thumb img {
    transition: all 2s ease;
}

.sidber-widget-recent-post:hover .recent-widget-thumb img {
    transform: scale(1.15);
}

.recent-widget-meta span {
    font-size: 14px;
    color: #4d4e4f;
    font-weight: 400;
}

.recent-widget-meta span i {
    color: #a3c914;
    font-size: 12px;
    margin-right: 8px;
}

.recent-widget-title h4 a {
    font-size: 20px;
    color: #3c3531;
    font-weight: 600;
    text-decoration: none;
    transition: .5s;
}

.sidber-widget-recent-post:hover .recent-widget-title h4 a {
    color: #a3c914;
}

/* widget recent menu */
.widget-recent-menu ul li {
    list-style: none;
    margin-bottom: 26px;
    position: relative;
    z-index: 1;
    transition: .5s;
    border-bottom: 1px solid #dddddd;
    padding: 0px 0 10px;
}

.widget-recent-menu ul li::before {
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
    transition: all 0.5s linear 0s;
    background-color: #a3c914;
    content: "";
    z-index: -1;
}

.widget-recent-menu ul li:hover::before {
    width: 100%;
    right: auto;
    left: 0;
}

.widget-recent-menu ul li a {
    display: block;
    overflow: hidden;
    font-size: 16px;
    color: #4d4e4f;
    font-weight: 400;
    text-decoration: none;
    transition: .5s;
}

.widget-recent-menu ul li a:hover {
    color: #a3c914;
}

.widget-recent-menu ul li a span {
    float: right;
}

/* widget tags */

.widget-tags a {
    display: inline-block;
    text-decoration: none;
    padding: 7px 13px;
    background: #fff;
    border-radius: 3px;
    font-size: 17px;
    color: #4d4e4f;
    font-style: normal;
    margin: 11px 5px;
    font-weight: 400;
    position: relative;
    transition: .5s;
    z-index: 1;
}

.widget-tags a:hover {
    color: #fff;
}

.widget-tags a:before {
    position: absolute;
    content: "";
    left: -2px;
    top: 0px;
    height: 102%;
    width: 0%;
    right: 0;
    margin: auto;
    background: #a3c914;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}

.widget-tags a:hover:before {
    width: 104%;
}

/*===============================================================
<-- Contact Area Css-->
=================================================================*/
.contact-area {
    padding: 120px 0 110px;
}

.row.contact {
    filter: drop-shadow(0px 1px 25.5px rgba(0, 0, 0, 0.15));
    background-color: #eff5f4;
    padding: 110px 35px 70px;
}

.contact-single-box {
    background: #a3c914;
    padding: 60px 18px 30px;
}

.contact-title h4 {
    font-size: 36px;
    line-height: 60px;
    color: #ffffff;
    font-weight: 600;
    border-bottom: 1px solid #a3c914;
    padding: 0 0 7px;
    margin-bottom: 30px;
}

.contact-items {
    margin-bottom: 30px;
    background: #fff;
    padding: 26px 15px;
}

.contact-icon {
    float: left;
    margin-right: 20px;
    width: 55px;
    height: 59px;
    background-color: #a3c914;
    display: inline-block;
    text-align: center;
    line-height: 59px;
}

.contact-icon i {
    color: #fff;
    font-size: 26px;
}

.contact-content h4 {
    font-size: 24px;
    color: #a3c914;
    font-weight: 500;
}

.contact-content h6 {
    font-size: 15px;
    line-height: 34px;
    color: #757575;
    font-weight: 400;
}

/* contact box title */

.contact-box-title h4 {
    font-size: 48px;
    line-height: 60px;
    color: #a3c914;
    font-weight: 600;
    margin-bottom: 35px;
}

/*===============================================================
<-- Faq Area Css-->
=================================================================*/

.faq-area {
    padding: 120px 0 100px;
}


/* accrodion css */

.accordion li {
    list-style: none;
    position: relative;
    z-index: 1;
    margin-bottom: -7px;
    border-radius: 3px;
}

.accordion li a {
    display: block;
    cursor: pointer;
    padding: 12px 34px 12px;
    text-decoration: none;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f4f4f9;
}

.accordion li a span {
    font-size: 20px;
    color: #a3c914;
    font-weight: 600;
}

.accordion li a i {
    width: 36px;
    height: 36px;
    background: #a3c914;
    display: inline-block;
    text-align: center;
    line-height: 38px;
    color: #fff;
}

.accordion a.active {
    background: #f4f4f9;
    border: none;
}

.accordion a.active i {
    color: #fff;
    background: #a3c914;
    border: none;
    margin-bottom: 0;
    transform: rotate(90deg);
}

.accordion li p {
    display: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #434141;
    background: #f4f4f9;
    padding: 11px 38px 28px;
    width: 100%;
    margin: 0;
    position: relative;
    top: -24px;
}

.accordion a.active:before {
    display: none;
}

a.active {
    color: #1c1632;
}

ul.accordion ul li a span {
    color: #fff;
}

/*===============================================================
<-- Error Area Css-->
=================================================================*/

.error-area {
    padding: 120px 0 110px;
}

.faq-thumb {
    text-align: center;
}

.paints-btn.error {
    margin-left: 160px;
}

/*===============================================================
<-- paints Sidebar Css-->
=================================================================*/

.sidebar-textwidget .contact-info ul {
    padding: 0;
}

.sidebar-group .widget-heading {
    position: absolute;
    top: 55px;
    right: 32px;
}

.sidebar-group .sidebar-widget {
    position: fixed;
    right: -100%;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 480px;
    z-index: 999999;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #171717;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}

.sidebar-group.isActive .sidebar-widget {
    opacity: 1;
    visibility: visible;
    right: 0;
}

.sidebar-textwidget {
    padding: 40px 32px;
}

.close-side-widget i {
    color: #fff;
    font-size: 30px;
    display: block;
}

.sidebar-widget-container {
    position: relative;
    top: 150px;
    opacity: 0;
    visibility: hidden;
    /*-webkit-transition: all 0.3s ease-in 0.3s;
    -o-transition: all 0.3s ease-in 0.3s;
    transition: all 0.3s ease-in 0.3s;*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sidebar-group.isActive .sidebar-widget-container {
    top: 0px;
    opacity: 1;
    visibility: visible;
    /*-webkit-transition: all 1s ease-out 1.2s;
    -o-transition: all 1s ease-out 1.2s;
    transition: all 1s ease-out 1.2s;*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sidebar-logo {
    margin: 0 0 50px;
}

.sidebar-textwidget .sidebar-logo a img {
    width: 50%;
}

.sidebar-group .about-box h2 {
    color: #fff;
    font-size: 26px;
    font-weight: 600;
}

.sidebar-group .about-box p {
    display: inline-block;
    color: #fff;
    padding: 15px 0 0;
}

.sidebar-group .contact-info {
    margin-top: 60px;
}

.sidebar-group .contact-info h2 {
    color: #fff;
    font-size: 26px;
    margin-bottom: 15px;
    font-weight: 600;
}

.sidebar-group ul.list-style-one li {
    display: block;
    list-style: none;
    color: #fff;
    margin-top: 8px;
    overflow: hidden;
}

.sidebar-group ul.list-style-one li i {
    font-size: 20px;
    font-weight: 600;
    color: #a3c914;
    margin: 0 10px 0 0px;
}

.sidebar-group ul.social-box {
    margin: 58px 0 0;
    padding: 0;
}

.sidebar-group ul.social-box li {
    display: inline-block;
    list-style: none;
    margin: 0 6px 0 0;
}

.sidebar-group ul.social-box li a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 36px;
    text-align: center;
    background: #fff;
    color: var(--primary-color);
    text-decoration: none;
    transition: .5s;
    font-size: 18px;
    border-radius: 3px;
}

.sidebar-group ul.social-box li a:hover {
    background: var(--primary-color);
    color: #a3c914;
}


/* sidebar menu */

.sidebar-menu {
    position: absolute;
    right: 27px;
    top: 23px;
    display: none;
}

.sidebar-menu a {
    width: 52px;
    height: 52px;
    line-height: 52px;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-size: 26px;
}

.sidebar-widget-menu {
    position: relative;
}

.sidebar-widget-menu ul li {
    list-style: none;
    margin-top: 10px;
    padding: 0 0 14px;
}

.sidebar-widget-menu ul li .home-menu-title h4 {
    text-align: center;
    margin-top: 10px;
}

.sidebar-widget-menu ul li .home-menu-title h4 a {
    font-size: 20px;
    padding: 0px 0;
    font-weight: 500;
    color: #171717;
}

.sidebar-widget-menu ul li .home-menu-title h4 a:hover {
    color: #a3c914;
}

.sidebar-widget-menu ul li .home-menu-title h4 a::before {
    display: none;
}



/*
<!-- ============================================================== -->
<!-- paints Scrollup Section -->
<!-- ============================================================== -->*/
.prgoress_scrollup {
    position: fixed;
    right: 55px;
    bottom: 80px;
    height: 48px;
    width: 48px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(0, 119, 249, 0.2);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transform: translateY(15px) !important;
    transition: all 200ms linear !important;
}

.prgoress_scrollup.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) !important;
}

.prgoress_scrollup::after {
    position: absolute;
    content: "\F286";
    font-family: bootstrap-icons;
    text-align: center;
    line-height: 46px;
    font-size: 16px;
    color: #a3c914;
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    font-weight: 900;
    z-index: 1;
    transition: all 200ms linear !important;
}

.prgoress_scrollup:hover::after {
    color: #a3c914;
}

.prgoress_scrollup svg path {
    fill: none;
}

.prgoress_scrollup svg.progress-circle path {
    stroke: #a3c914;
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear !important;
}




@-webkit-keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3)
    }

    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}

@keyframes ripple-blue {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3)
    }

    100% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0)
    }
}


@keyframes loader {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/*===========================
<-- paints Loader Css -->
=============================*/


.loader_bg {
    position: fixed;
    z-index: 999;
    background: #1f1f1f;
    width: 100%;
    height: 100%;
}

.loader {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    position: absolute;
    top: calc(50vh - 75px);
    left: calc(50vw - 75px);
}

.loader:before,
.loader:after {
    content: '';
    border: 1em solid #a3c914;
    border-radius: 50%;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    animation: loader 2s linear infinite;
    opacity: 0;
}

.loader:before {
    animation-delay: .5s;
}