/*===============================================
Template Name: Consalt - Financ & Business Consluting HTML5 Template
Author:  https://themeforest.net/user/dreamit-solution
Description: Description
Version: 1.0.0
Text Domain: Consalt
Tags: consulting, finance, corporate, business, consultant, multipurpose, technology, it-solution, software, agency, company, portfolio, bangking, insurance, digital-agency, digital-marketing.
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. Consalt Header Area Css
02. Sater Css Hero Area
03. Sater Css Brand Area
04. Sater Css Section Title
05. Sater Css Feature Area
06. Sater Css Service Area
07. Sater Css Marquee Area
08. Sater Css About Area
09. start consalt button css
10. Start consalt Counter Area CSS
11. Start consalt Steps Area CSS
12. Start consalt Pricing Area CSS
13. Start consalt Case study Area CSS
14. Start consalt Team Area CSS
15. Start consalt Testimonial Area CSS
16. Start consalt Blog Area CSS
17. Start consalt Footer Area CSS
18. Start consalt Topber CSS
19. Start consalt Hero Area Style Two CSS
20. Start consalt Counter Area Style Two CSS
21. Start consalt About Area Style Two CSS
22. Start consalt Service Area Style Two CSS
23. Start consalt Skill Area CSS
24. Start consalt Call  Area CSS
25. Start consalt Testimonial Area Style Two CSS
26. Start consalt CaseStudy Area Style Two CSS
27. Start consalt Pricing Area Style Two CSS
28. Start consalt Call Area Style Two CSS
30. Start consalt Blog Area Style Two CSS
31. Start consalt Call  Area Style Three CSS
32. Start consalt footer Area Style Two CSS
33. Start consalt Consalt Topber Area Style Two CSS
34. Start consalt Consalt Header Area Style Three CSS 
35. Start consalt Hero Area Style Three CSS
36. Start consalt About Area Style Three CSS
37.Start consalt marquee Area Style Two CSS
38. Start consalt Service Area Style Three CSS
39. Start consalt Why Choose Area CSS
40. Start consalt Team Area Style Two CSS
41. Start consalt Testimonial Area Style Three CSS
42. Start consalt Counter Area Style Three CSS
43. Start consalt Contact Area CSS
44. Start consalt Blog Area Style Three CSS
45. Start consalt Footer Area Style Three CSS
46. Start Consalt Inner page Breadcumb Area
47. Start Inner Page Team Area
48. Start Inner Page Portfolio Details
49. Start Inner Page Conatct Area
50. Start Feature area css
51. Start Service Details css
52. Start Error area css
53. All Animation CSS
=======================*/

/*---=====================================================
   <!--Consalt Header Area Css-->
=========================================================---*/
.consalt-header-area {
    position: relative;
    z-index: 3;
    margin-bottom: -86px;
    margin-top: 30px;
}
.header-menu {
    display: flex;
    align-items: center;
    justify-content: center;
}
.consalt-header-area  ul {
    display: inline-block;
}
.header-menu ul li {
    display: inline-block;
    margin: 0 18px 0;
    position: relative;
    z-index: 1;
}
.header-menu ul li a {
    display: inline-block;
    padding: 9px 0 21px;
    font-size: 16px;
    color: #063232;
    font-weight: 400;
}
.header-menu ul li span {
    font-size: 13px;
    color: #063232;
    margin-left: 5px;
    position: relative;
    top: -1px;
}


/*** Sub Menu Style ***/
.header-menu ul .sub_menu {
    position: absolute;
    left: 0;
    top: 130%;
    width: 225px;
    text-align: left;
    background: #fff;
    margin: 0;
    z-index: 1;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    transition: .5s;
    visibility: hidden;
    border-top: 2px solid #366B2A;
    opacity: 0;
}

.header-menu ul li:hover>.sub_menu {
    visibility: visible;
    top: 100%;
    opacity: 1;
}

.header-menu ul .sub_menu li {
    position: relative;
    margin: 0;
    display: block;
}
.header-menu ul .sub_menu li a {
    display: block;
    padding: 12px 20px;
    margin: 0;
    line-height: 1.3;
    letter-spacing: normal;
    transition: .1s;
    visibility: inherit !important;
    color: #063232 !important;
    font-size: 16px;
    font-weight: 500;
}
.header-menu ul .sub_menu li:hover>a {
    background: #28963d;
    color: #fff !important;
}
/* sub menu style two */
.consalt-header-area.style_two .header-menu ul .sub_menu li a {
    display: block;
    padding: 12px 20px;
}
.sticky .sub_menu li a {
    padding: 12px 20px !important;
}

/* header button */

.header-button {
    display: inline-block;
}
.header-button a {
    display: inline-block;
    border-radius: 8px;
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
}

/* dack light */

.dark-light {
    display: inline-block;
    margin-left: 30px;
}
span.bi.bi-sun {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    color: #ffff;
    font-size: 18px;
    height: 35px;
    line-height: 36px;
    width: 35px;
    text-align: center;
    border-radius: 51%;
}
/* sticky */
.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    background: #366B2A!important;
    transition: .5s;
    z-index: 9;
}
.sticky .header-menu ul li a {
    padding: 30px 0 30px;
    color: #fff;
}
.sticky .header-menu ul li a i {
    color: #000;
}
.sticky .col-lg-2.pt-10 {
    padding-top: 0 !important;
}
.sticky .row.topber_upper {
    display: none !important;
}
/*===========================================
<-- Sater Css Hero Area -->
==============================================*/
section.hero_area {
    background: url(../images/home_one/banner.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    height: 830px;
    position: relative;
    z-index: 1;
}
.hero_content {
    margin-top: 42px;
}
.hero_content h1 {
    font-size: 56px;
    line-height: 70px;
    color: #ffffff;
    font-weight: 600;
}
.hero_content p {
    color: #a3b7b7;
    width: 85%;
    margin: 18px 0 33px;
}

/* hero btn */
.slider_button {
    display: flex;
    align-items: center;
}

.hero_btn a {
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 17px;
    padding-bottom: 17px;
    border-radius: 30px;
    display: inline-block;
    background-color: #28963d;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border: none;
}
.hero_btn span {
	position: absolute;
	z-index: -1;
	width: 0;
	height: 0;
	display: block;
	border-radius: 30px;
	background-color: #ffff;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
}
.hero_btn a:hover, .hero_btn a:focus {
	color: #28963d;
}
.hero_btn a:hover span, .hero_btn a:focus span {
	width: 200%;
	height: 500px;
}
.hero_btn a:before {
    position: absolute;
    content: "";
    left: 40px;
    bottom: 17px;
    background-color: rgba(255,255,255,0.5019607843137255);
    z-index: -1;
    width: 24px;
    height: 2px;
    transition: .5s;
}
.hero_btn a:hover:before {
    width: 120px;
    background: #28963d;
    z-index: 1;
}
/* .hero_btn {
    margin-right: 30px;
} */
.slider_info a {
    display: inline-block;
    color: #ffffff;
    font-weight: 500;
    margin-left: 20px;
}
.slider_info span {
    color: #fff;
}

/* hero thumb */
.hero-thumb {
    position: relative;
    z-index: 1;
    top: 42px;
}
.video-icon {
    position: absolute;
    left: -6%;
    top: 46%;
}
.video-icon a {
    width: 90px;
    height: 90px;
    border-radius: 45px;
    background-color: #28963d;
    display: inline-block;
    color: #fff;
    text-align: center;
    line-height: 90px;
    font-size: 35px;
}
.hero_shape {
    position: absolute;
    top: 19%;
    right: 0;
    left: -7%;
    margin: auto;
    text-align: center;
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    background-position: center center;
}
@keyframes rotateme {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
/*===========================================
<-- Sater Css  boxed -->
==============================================*/
.boxed {
    position: relative;
    width: calc(100% - 40px);
    margin: 20px;
    height: 100%;
    left: 0;
    z-index: 5
}


/*===========================================
<-- Sater Css Brand Area -->
==============================================*/
section.brand_area {
    padding: 67px 0 92px;
}
h2.brand_title {
    font-size: 18px;
    color: #063232;
    font-weight: 400;
    text-align: center;
    position: relative;
    z-index: 1;
}
h2.brand_title:before {
    position: absolute;
    z-index: -1;
    content: "";
    height: 2px;
    width: 50px;
    background: #42ba3d;
    top: 29%;
    left: 0;
    right: 0;
    margin: auto;
}
.single-brand-item {
    text-align: center;
}
.brand-thumb img {
    width: inherit !important;
}
.owl-carousel .owl-item img {
    display: inline-block !important;
}
section.brand_area.style_two {
    background: #0B204A;
    padding: 65px 0 65px;
    z-index: 1;
}
/*===========================================
<-- Sater Css Section Title  -->
==============================================*/
.section_title.text-center {
    margin-bottom: 53px;
}
.section_title h4 {
    font-size: 16px;
    color: #28963d;
    font-weight: 500;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}
.section_title h1 {
    font-size: 42px;
    line-height: 42px;
    color: #063232;
    font-weight: 600;
}
.section_title.style_two h1 {
    color: #ffff;
}
.section_title.style_two h4 {
    color: #e0f1df;
}
.section_title.text-center p {
    width: 49%;
    text-align: center;
    margin: 23px auto 0;
}
.section_title p {
    width: 89%;
    margin: -25px 0 34px;
}
.section_title.left {
    margin-bottom: 50px;
}
.section_title.style_three {
    position: relative;
    z-index: 1;
}
.section_title.style_three:before {
    position: absolute;
    left: 0;
    bottom: 33%;
    background: url(../images/home_3/hero_border.png);
    height: 15px;
    width: 100%;
    content: "";
    z-index: -1;
    background-repeat: no-repeat;
}
.section_title.style_four:before {
    left: 0;
    bottom: -32%;
    height: 15px;
    width: 11%;
    right: 0;
    margin: auto;
    text-align: center;
}
.section_title.style_three p {
    margin: 48px 0 20px;
}
.section_title.style_four {
    margin-bottom: 82px;
}
/* consalt right */
.conslat_right p {
    width: 75%;
    margin-bottom: 0;
}
/*===========================================
<-- Sater Css Feature Area -->
==============================================*/
section.feature_area {
    padding: 100px 0 163px;
    background: url(../images/home_one/service-bg2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
}
.feature_area.boxed {
    margin: 20px 20px 0px 20px;
}
.feature_item {
    background: url(../images/home_one/feature_shape.png);
    background-repeat: round;
    background-size: cover;
    padding: 40px 25px 30px 36px;
    position: relative;
    z-index: 1;
    transition: .5s;
    margin-bottom: 30px;
}
.feature_item.upper {
    margin-top: 30px;
}
.feature_item:hover {
    background: url(../images/home_one/feature_itm.png);
    background-repeat: round;
    background-size: inherit;
}
.feature_item:before {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #28963d;
    position: absolute;
    content: "";
    left: 0;
    bottom: 5px;
    right: 0;
    margin: auto;
    transition: .5s;
    opacity: 0;
}
.feature_item:after {
    width: 1px;
    height: 25px;
    background-color: #28963d;
    position: absolute;
    content: "";
    left: 1px;
    bottom: -12px;
    right: 0;
    margin: auto;
    transition: .5s;
    opacity: 0;
}
.feature_item:hover:before, .feature_item:hover:after {
    opacity: 1;
}
.feature_content h3 {
    font-size: 20px;
    line-height: 30px;
    color: #063232;
    font-weight: 500;
    margin-bottom: 16px;
    margin-top: 20px;
}
.feature_number {
    position: absolute;
    bottom: -7px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    transition: .5s;
}
h6.feature_no {
    font-size: 17px;
    line-height: 26px;
    color: #28963d;
    font-weight: 400;
}
.feature_item:hover .feature_number {
    bottom: -38px;
}

.feature_shape {
    position: absolute;
    top: 12%;
    right: 21%;
}
/*===========================================
<-- Sater Css Service Area -->
==============================================*/
section.service_area {
    background: #063232;
    padding: 179px 0 89px;
    position: relative;
    top: -75px;
    z-index: 1;
}
section.service_area.boxed {
    margin: 0 20px 20px 20px;
}
.service_single_item {
    position: relative;
    transition: .5s;
    display: inline-block;
    padding: 40px 0 0 40px;
    margin-bottom: 30px;
    z-index: 1;
}
.service_single_item:before {
    position: absolute;
    top: 0;
    background: #0a4b4b;
    width: 100%;
    content: "";
    height: 316px;
    z-index: -1;
    left: 0;
    border-radius: 20px;
    transition: .5s;
}
.service_single_item:hover:before {
    background: #28963d;
}
.service_thumb img {
    width: 100%;
}
.service_content {
    border-radius: 0 0 20px 20px;
    background-color: #0a4b4b;
    transition: .5s;
    text-align: left;
    padding: 34px 40px 27px;
    position: relative;
    z-index: 1;
}
.service_content:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    background: url(../images/home_one/ser_shape.png);
    height: 100%;
    width: 0%;
    z-index: -1;
    transition: .5s;
    border-radius: 0 0 20px 20px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    opacity: 0;
}
.service_single_item:hover .service_content:before{
    width: 100%;
    opacity: 1;
}
.service_content h3 {
    font-size: 23px;
    line-height: 32px;
    color: #ffffff;
    font-weight: 500;
    margin-top: 0;
}
.service_single_item:hover .service_content h3 {
    color: #063232;
}
/* ====Service Button====== */
.service_btn {
    margin-top: 15px;
}
.service_btn a {
    transition: .5s;
    display: inline-block;
    letter-spacing: -6px;
    font-size: 14px;
    line-height: 32px;
    text-transform: uppercase;
    color: #0a4b4b;
    font-weight: 500;
}
.service_btn a i {
    margin-left: -8px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}
/* all hover */
.service_single_item:hover .service_btn a {
    letter-spacing: 0;
}
.service_single_item:hover .service_btn a i {
    margin-left: 8px;
    color: #0a4b4b;
}
.service_shape {
    position: absolute;
    bottom: -3%;
    left: 0;
    margin: 0;
}
.service_shape img {
    width: 100%;
}
.service_fuor {
    position: absolute;
    top: 2%;
    left: 3px;
    width: 97px;
    height: 97px;
    border-radius: 49px;
    background-color: #28963d;
    line-height: 97px;
    text-align: center;
    right: 0;
    margin: auto;
}
/*===========================================
<-- Sater Css Marquee Area -->
==============================================*/
.marquee_area {
    background: #fff;
    padding: 15px 0 75px;
}
.marquee {
    position: relative;
    --duration: 40s;
    --gap: 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    gap:0;
}
.marquee-block h3 {
    margin: 0;
}
.marquee-block {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    gap:0px;
    min-width: 100%;
    -webkit-animation: scroll 30s linear infinite;
    animation: scroll 30s linear infinite;
}

  @-webkit-keyframes scroll {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(calc(-100% - var(--gap)));
      transform: translateX(calc(-100% - var(--gap)));
    }
  }
  @keyframes scroll {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(calc(-100% - var(--gap)));
      transform: translateX(calc(-100% - var(--gap)));
    }
  }
  .marquee.style2 .marquee-block h3 {
    font-size: 120px;
    font-weight: 700;
    margin: 0 50px 0 50px;
    -webkit-background-clip: text;
    letter-spacing: 0;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #28963d;
    color: transparent;
    -webkit-mask-image: linear-gradient(-75deg, #28963d 50%, #28963d 50%, #28963d);
    -webkit-mask-size: 200%;
    animation: shine 3s infinite;
    transition: .5s;
}
.marquee.style2 .marquee-block span {
    color: #28963d;
    font-size: 120px;
    font-weight: 700;
}

/*===========================================
<-- Sater Css About Area -->
==============================================*/
section.about_area {
    padding: 105px 0 120px;
    border-radius: 20px;
    background: #f0f7ef;
    position: relative;
    z-index: 1;
}
.about_thumb {
    position: relative;
}
.about_play {
    position: absolute;
    top: 0%;
    right: 13%;
}
/*animation circle*/
.text-inner {
    animation: circle 15s linear infinite;
    animation: circle 15s linear infinite;
    position: relative;
    z-index: 22;
    fill: transparent;
}
.text-inner svg {
width: 100px;
max-width: 100%;
height: auto;
overflow: visible;
word-spacing: 10px;
transform: rotate(0) scaleX(1) scaleY(1);
position: relative;
}
.text-inner:before {
    position: absolute;
    content: "";
    top: 44%;
    left: 0%;
    height: 16px;
    width: 16px;
    background: #fff!important;
    right: 0;
    margin: auto;
    text-align: center;
    border-radius: 50%;
}
.text-inner text {
fill: #ffffff;
direction: ltr;
transition: 0.3s stroke, 0.3s stroke-width, 0.3s fill;
font-size: 30px;
font-weight: 500;
position: relative;
z-index: 2;
}
a.banner-play-btn {
width: 142px;
height: 142px;
border-radius: 71px;
background-color: #28963d!important;
overflow: hidden;
line-height: 142px;
text-align: center;
position: relative;
display: inline-block;
}
.like {
position: absolute;
top: 52%;
transform: translate(-50%, -50%);
left: 50%;
}
@keyframes circle {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(-360deg);
    }
  }
  .circle {
      animation: circle 15s linear infinite;
  }
  .right {
    animation: right 15s linear infinite;
  }
  .spin2 {
    animation: spin2 15s linear infinite;
  }
  @keyframes right {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes animate-positive {
    0% {
      width: 0;
    }
  }

.about_content {
    position: relative;
    z-index: 1;
}
.about_content h3 {
    font-size: 16px;
    color: #28963d;
    font-weight: 500;
    margin-bottom: 3px;
    display: inline-block;
}
.about_content h1 {
    font-size: 28px;
    line-height: 38px;
    color: #063232;
    font-weight: 500;
    margin-bottom: 20px;
}
/* ====== About List====== */

.about_list ul li {
    font-size: 18px;
    line-height: 38px;
    color: #063232;
    font-weight: 500;
}
.about_list ul li i {
    font-size: 22px;
    top: 3px;
    position: relative;
    margin-right: 15px;
}

/* ======= Hero button ========== */

.about_button {
    display: flex;
    align-items: center;
    margin-top: 30px;
}
.about_btn a {
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 30px;
    display: inline-block;
    background-color: #28963d;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border: none;
}
.about_btn span {
    position: absolute;
    z-index: -1;
    width: 0;
    height: 0;
    display: block;
    border-radius: 30px;
    background-color: #063232;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
}
.about_btn a:hover, .about_btn a:focus {
	color: #ffff;
}
.about_btn a:hover span, .about_btn a:focus span {
	width: 200%;
	height: 500px;
}
.about_btn a:before {
    position: absolute;
    content: "";
    left: 40px;
    bottom: 17px;
    background-color: #ffffffa1;
    z-index: -1;
    width: 12%;
    height: 2px;
    transition: .5s;
}
.about_btn a:hover:before {
    width: 105px;
    background-color: #ffff;
    z-index: 1;
}
.about_btn {
    margin-right: 30px;
}
.about_info a {
    display: inline-block;
    margin-left: 10px;
    font-size: 16px;
    color: #28963d;
    font-weight: 500;
}
.about_info span {
    color: #28963d;
    position: relative;
    top: -5px;
}
/* about shape */
.about_shape {
    position: absolute;
    bottom: -9%;
    right: -8%;
}

/* =================================
  <--- start consalt button css --->
=============================== */
.consalt_btn {
    text-align: right;
}
.consalt_btn a {
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 30px;
    display: inline-block;
    background-color: #28963d;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border: none;
}
.consalt_btn span {
    position: absolute;
    z-index: -1;
    width: 0;
    height: 0;
    display: block;
    border-radius: 30px;
    background-color: #fff;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
}
.consalt_btn a:hover, .consalt_btn a:focus {
	color: #28963d;
}
.consalt_btn a:hover span, .consalt_btn a:focus span {
	width: 200%;
	height: 500px;
}
.consalt_btn a:before {
    position: absolute;
    content: "";
    left: 40px;
    bottom: 17px;
    background-color: #ffffffa1;
    z-index: -1;
    width: 12%;
    height: 2px;
    transition: .5s;
}
.consalt_btn a:hover:before {
    width: 105px;
    background-color: #28963d;
    z-index: 1;
}

/* =====================================
  <--- Start consalt Counter Area CSS --->
========================================= */
section.counter_area {
    background: #063232;
    border-radius: 30px;
    padding: 67px 0 42px;
}
.counter_upper {
    border-bottom: 2px solid rgba(12,110,109,0.4);
    padding-bottom: 34px;
    margin-bottom: 27px;
}
.counter-single-item {
    margin-bottom: 30px;
}
.counter-content {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}
.counter-content:before {
    position: absolute;
    content: "";
    top: 20px;
    left: -86px;
    height: 100%;
    width: 100%;
    background: url(../images/home_one/star_icon.png);
    z-index: -1;
    background-repeat: no-repeat;
}
.counter-content.none:before {
    display: none;
}
.counter-_number h1 {
    display: inline-block;
    font-size: 60px;
    line-height: 52px;
    color: #e0f1df;
    font-weight: 600;
}
.counter-_number span {
    display: inline-block;
    font-size: 60px;
    line-height: 52px;
    color: #e0f1df;
    font-weight: 600;
}
.counter_title {
    margin-left: 40px;
    position: relative;
}
.counter_title:before {
    position: absolute;
    content: "";
    left: -22px;
    top: 20px;
    width: 1px;
    height: 30px;
    background-color: rgba(255,255,255,0.30196078431372547);
}
.counter_title h5 {
    font-size: 15px;
    line-height: 24px;
    text-transform: uppercase;
    color: #a3b7b7;
    font-weight: 400;
}

/* =========================================================
  <--- Start consalt Steps Area CSS --->
============================================================ */

section.steps_area {
    background: #E0F1DF;
    border-radius: 20px 20px 0 0;
    padding: 105px 0 112px;
}
.steps-single-item {
    margin-bottom: 30px;
    padding: 40px 40px 31px;
    background: url(../images/home_one/steps_bg.png);
    background-repeat: no-repeat;
    border-radius: 10px;
    background-size: cover;
    position: relative;
}
.steps-single-item:before {
    position: absolute;
    top: 20px;
    right: 59px;
    width: 30px;
    height: 1px;
    background-color: #28963d;
    content: "";
}
h3.steps_number {
    position: absolute;
    right: 30px;
    top: 0;
    font-size: 18px;
    color: #28963d;
    font-weight: 400;
}
.steps_icon {
    width: 76px;
    height: 76px;
    border-radius: 38px;
    background-color: #e0f1df;
    line-height: 76px;
    text-align: center;
    transition: .5s;
}
.steps-single-item:hover .steps_icon {
    background: #28963d;
}
.steps_icon img {
    transition: .5s;
}
.steps-single-item:hover .steps_icon img {
    filter: brightness(0) invert(1);
}
.steps-content h3 {
    font-size: 20px;
    color: #002c2a;
    font-weight: 500;
    margin: 25px 0 16px;
}
.steps_btn a {
    color: #28963d;
    display: inline-block;
    margin-top: 4px;
    font-size: 16px;
}

/* =======Pagination ========= */
.pagination {
    text-align: center;
    justify-content: center;
    margin-top: 2px;
}
.pagination span {
    font-size: 15px;
    line-height: 26px;
    color: #063232;
    font-weight: 500;
}
.pagination a {
    display: inline-block;
    color: #0D6E6D;
    font-weight: 500;
    text-decoration: underline;
}

/* =========================================================
  <--- Start consalt Pricing Area CSS --->
============================================================ */
section.pricing-area {
    background-color: #063232;
    padding: 158px 0 90px;
    border-radius: 0 0 20px 20px;
    margin-top: -20px;
}
section.pricing-area .section_title p {
    margin: 28px 0 40px;
    color: #fff9;
}
.pricing-single-items {
    position: relative;
    z-index: 1;
    padding: 50px 30px 21px;
    border-radius: 10px;
    margin-bottom: 30px;
    background: url(../images/home_one/price-bg1.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.pricing-single-items.upper {
    margin-top: -40px;
}
.pricing-single-items:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 0%;
    width: 100%;
    background: url(../images/home_one/pricing-hover.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    border-radius: 10px;
    transition: .5s;
}
.pricing-single-items:hover:after {
    height: 100%;
}
 .pricing_inner {
    display: flex;
    align-items: center;
}
.pricing_icon {
    float: left;
    margin-right: 20px;
    width: 76px;
    height: 76px;
    border-radius: 38px;
    background-color: #e0f1df;
    line-height: 76px;
    text-align: center;
    transition: .5s;
}
.pricing-single-items:hover .pricing_icon {
    background: #ffff;
}
.pricing-title h3 {
    font-size: 24px;
    color: #063232;
    font-weight: 500;
    margin: 0;
}
.pricing-title span {
    font-size: 16px;
    color: #6b7a7a;
    font-weight: 400;
}

/* pricing body */
.pricing-body {
    margin-top: 36px;
}
.pricing-feature ul li {
    margin-bottom: 12px;
    transition: .5s;
    font-size: 16px;
    line-height: 26px;
    color: #6b7a7a;
    font-weight: 400;
    border-bottom: 1px dashed #1717173d;
    padding-bottom: 12px;
}

.pricing-feature ul li img {
    margin-right: 12px;
    position: relative;
    margin-top: -2px;
}

/* ====Price item ===*/

.pricing-item-text {
    position: relative;
    margin: 39px 0 32px;
    z-index: 1;
}
.pricing-item-text span.tk {
    font-size: 46px;
    color: #28963d;
    font-weight: 600;
    margin-left: 20px;
}
.pricing-item-text span.currency {
    font-size: 22px;
    color: #28963d;
    font-weight: 500;
    position: absolute;
    top: -6px;
}

/* consalt button */

.consalt_btn.style_two {
    text-align: left;
}
.consalt_btn.style_two a:before {
    display: none;
}
.consalt_btn.style_two a {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid rgba(12,110,109,0.3);
    background: transparent;
    color: #28963d;
}
.consalt_btn.style_two a:hover {
    color: #ffff;
}
.consalt_btn.style_two span {
    background-color: #28963d;

}

/* consalt button style three  */
.consalt_btn.style_three a {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 10px;
    border: 0;
    background: #28963d;
    color: #fff;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: #28963d;
    line-height: 80px;
}
.consalt_btn.style_three a:hover {
    color: #28963d;

}
.consalt_btn.style_three span {
    background-color: #ffff;

}
.consalt_btn.style_three a i {
    display: inline-block;
    transform: rotate(-45deg);
    font-size: 20px;
    font-weight: 700;
}
/* =========================================================
  <--- Start consalt Case study Area CSS --->
============================================================ */

section.case-study-area {
    padding: 85px 0 35px;
}

.case-study-thumb {
    position: relative;
    overflow: hidden;
}
.case-study-thumb {
    position: relative;
    overflow: hidden;
    background: #28963d;
    padding: 0;
    border-radius: 10px;
    transition: all 500ms linear;
    height: 520px;
}
.case-study-thumb:hover {
    padding: 20px;
}
.case-study-thumb::before {
    background: rgba(12,109,109, 0.6);
    bottom: 0;
    content: "";
    left: 50%;
    position: absolute;
    right: 51%;
    top: 0;
    opacity: 1;
    pointer-events: none;
    transition: all 500ms linear;
    z-index: 1;
}
.service_thumb:hover:before {
    left: 10%;
    right: 10%;
    opacity: 0;
    transition: all 500ms linear;
}
.case-study-content {
    width: 75%;
    background: #28963d;
    padding: 30px 30px 10px;
    position: absolute;
    bottom: -16%;
    border-radius: 0 5px 5px 5px;
    z-index: 1;
    transition: .5s;
    opacity: 0;
}
.case-study-thumb:hover .case-study-content {
    bottom: 0%;
    opacity: 1;
}
.case-study-thumb img {
    width: 100% !important;
    transition: .5s;
    border-radius: 10px;
}
.case-study-content h3 {
    font-size: 22px;
    color: #ffffff;
    font-weight: 500;
    margin: 0;
}
.case-study-content p {
    font-size: 15px;
    color: #e0f1df;
    font-weight: 400;
    margin-top: 5px;
}

.single_portfolio_icon {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    transform: translateY(-50%);
    z-index: 1;
    opacity: 0;
    transition: .5s;
}
.case-study-single-box:hover .single_portfolio_icon {
    opacity: 1;
    top: 50%;
}
.single_portfolio_icon a {
    background: #e0f1df;
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    line-height: 60px;
    color: #095a59;
    transform: rotate(-45deg);
}
/* =========================================================
  <--- Start consalt Team Area CSS --->
============================================================ */

section.team_area {
    padding: 50px 0 90px;
}
.single-team_item {
    transform: translateY(0px);
    transition: .5s;
    margin-bottom: 30px;
}
.single-team_item:hover {
    transform: translateY(30px);
}
.single-team_item.style_upper {
    transform: translateY(30px);
}
.team-content {
    text-align: center;
    padding: 9px 0 0;
    margin: 0 35px 30px 0;
}
.team-content h3 a {
    font-size: 24px;
    color: #063232;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 8px;
}

/* =========================================================
  <--- Start consalt Testimonial Area CSS --->
============================================================ */

.testimonial_area {
    background: #0C6D6D;
    padding: 30px 0 30px;
    position: relative;
    border-radius: 30px;
}
.tesimonial_img {
    margin-left: -254px;
    position: relative;
}
.testi_icon img {
    width: inherit !important;
}
/* testimonial star rating */
.testi-star-rating {
    display: flex;
    align-items: center;
    position: absolute;
    right: 12%;
    bottom: 3%;
}
.testimonial_star i {
    text-align: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #ff9c00;
    line-height: 40px;
    color: #fff;
    font-size: 14px;
    margin-right: 15px;
}
.testi-star-rating h4 {
    font-size: 22px;
    color: #ffffff;
    font-weight: 500;
    margin: 0;
}
/* testi star */
.testi-star i {
    font-size: 16px;
    color: #ff9c00;
    margin: 30px 5px 18px 0;
}
.testimonial-content p {
    font-size: 24px;
    line-height: 38px;
    color: #ffffff;
    font-weight: 400;
    font-style: italic;
}
.tesit-auothor {
    display: flex;
    align-items: center;
    margin-top: 49px;
}
.tesit-auothor .bio {
    margin-left: 20px;
}
.tesit-auothor .bio h4.name {
    font-size: 20px;
    color: #ffffff;
    font-weight: 500;
    margin: 0;
}
.tesit-auothor .bio h5.designation {
    font-size: 15px;
    color: #e0f1df;
    font-weight: 400;
}
.testi_shape {
    position: absolute;
    right: 7%;
    top: 16%;
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    background-position: center center;
}
@keyframes rotateme {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}



/* =========================================================
  <--- Start consalt Blog Area CSS --->
============================================================ */
.blog_area {
    padding: 85px 0 172px;
}
.single-blog-thumb{
    position: relative;
}
.single-blog-thumb:before {
    background: rgba(12,110,109);
    position: absolute;
    height: 0;
    width: 100%;
    left: 0;
    top: 0;
    -moz-transition: all .6s ease-out 0s;
    -webkit-transition: all .6s ease-out 0s;
    -ms-transition: all .6s ease-out 0s;
    -o-transition: all .6s ease-out 0s;
    transition: all .6s ease-out 0s;
    content: "";
    z-index: 2;
    opacity: .4;
    border-radius: 10px;
}
.single-blog-thumb:after {
    position: absolute;
    content: "";
    background: rgba(12,110,109);
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    z-index: 3;
    -moz-transition: all .6s ease-out 0s;
    -webkit-transition: all .6s ease-out 0s;
    -ms-transition: all .6s ease-out 0s;
    -o-transition: all .6s ease-out 0s;
    transition: all .6s ease-out 0s;
    border-radius: 10px;
}
.single-blog-box:hover .single-blog-thumb:before {
    height: 100%;
    opacity: .1
}

.single-blog-box:hover .single-blog-thumb:after {
    height: 0;
    opacity: .2
}
.single-blog-thumb img {
    border-radius: 10px;
    width: 100%;
}
.blog-content {
    background: #F7F9F8;
    padding: 35px 13px 20px 30px;
    border-radius: 0 0 5px 5px;
}
.meta-blog {
    margin-bottom: 19px;
}
.meta-blog p {
    font-size: 16px;
    color: #6b7a7a;
    font-weight: 400;
}
.meta-blog p span {
    background-color: #28963d;
    display: inline-block;
    font-size: 14px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 500;
    text-align: center;
    border-radius: 0 30px 30px 0;
    padding: 3px 18px;
    position: relative;
    margin-right: 38px;
}
/* .meta-blog p span:before {
    position: absolute;
    content: "";
    right: -26px;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #28963d;
} */
.blog-title h3 a {
    font-size: 22px;
    line-height: 32px;
    color: #063232;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 14px;
}

.blog_btn a {
    transition: .5s;
    display: inline-block;
    letter-spacing: -6px;
    font-size: 14px;
    line-height: 32px;
    text-transform: uppercase;
    color: #F7F9F8;
    font-weight: 500;
}
.blog_btn a i {
    margin-left: -8px;
    font-size: 15px;
    font-weight: 600;
    color: #0a4b4b;
}
/* all hover */
.single-blog-box:hover .blog_btn a{
    letter-spacing: 0;
    color: #0a4b4b;
}
.single-blog-box:hover .blog_btn a i {
    margin-left: 8px;
    color: #0a4b4b;
}
/* owl dots */

.blog_list .owl-dots {
    position: absolute;
    bottom: -15%;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}

.blog_list .owl-dot {
    display: inline-block;
    margin-left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #B5D3D1 !important;
}

.blog_list .owl-dot.active {
    background: #28963d !important;
    width: 12px;
    border-radius: 50%;
    height: 12px;
}

/* =========================================================
  <--- Start consalt Footer Area CSS --->
============================================================ */
.footer_area {
    background: #063232;
    padding: 120px 0 30px;
    border-radius: 30px;
}
p.footer_desc {
    font-size: 15px;
    line-height: 24px;
    color: #a3b7b7;
    font-weight: 400;
    margin: 37px 0 34px;
    width: 81%;
}
.subscribe_form {
    border-bottom: 1px solid rgba(255,255,255,0.30196078431372547);
    position: relative;
}
.subscribe_form input {
    background: transparent;
    border: none;
    width: 100%;
    outline: 0;
    height: 50px;
    color: #fff !important;
}
.subscribe_form input::placeholder {
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
}
.subscribe_form input:focus {
    outline: 0;
    background: transparent;
    box-shadow: none;
}
button.btn {
    width: 119px;
    height: 36px;
    border-radius: 18px;
    background-color: #28963d;
    font-size: 14px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 500;
    position: absolute;
    top: 0;
    right: 0;
}
button.btn:hover {
    background: #fff;
    color: #063232;
}
.footer-widget-title h4 {
    font-size: 22px;
    color: #ffffff;
    font-weight: 500;
    margin-bottom: 34px;
}
.footer-widget-menu ul li a {
    font-size: 15px;
    color: #a3b7b7;
    font-weight: 400;
    display: inline-block;
    margin-left: -15px;
    margin-bottom: 9px;
}
.footer-widget-menu ul li a:hover{
    margin-left: .0;
    color: #ffff;
}

.footer-widget-menu ul li a i {
    font-size: 12px;
    opacity: 0;
    transition: .5s;
}
.footer-widget-menu ul li a:hover i {
    opacity: 1;
}
.footer-widget-address.style_two {
    border-bottom: 1px dashed #ffffff78;
    padding-bottom: 12px;
}
.footer-widget-address {
    margin-bottom: 20px;
}
.footer_widget_icon.style_upper {
    top: 7px;
    position: relative;
}
.footer_widget_icon i {
    width: 25px;
    height: 25px;
    border-radius: 13px;
    background-color: #28963d;
    font-size: 9px;
    color: #fff;
    line-height: 25px;
    text-align: center;
    float: left;
    margin-right: 10px;
}
.footer-widget-address_text {
    overflow: hidden;
}
.footer-widget-address_text p {
    font-size: 15px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 400;
    margin: 0;
}
.footer-widget-address_text span {
    font-size: 15px;
    line-height: 24px;
    color: #ffffff99;
    font-weight: 400;
}
/* footer bottom */
.row.add-border {
    position: relative;
    padding-top: 30px;
    margin-top: 71px;
}
.row.add-border:before {
    position: absolute;
    top: 0;
    left: 12px;
    height: 1px;
    width: 98%;
    background: rgba(255,255,255,0.30196078431372547);
    content: "";
}
.footer-bottom-content-copy p {
    font-size: 15px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 400;
    margin: 0;
}
.footer-bottom-content.right {
    text-align: right;
}
.footer-bottom-menu {
    text-align: right;
}
.footer-bottom-menu ul li {
    display: inline-block;
    margin-right: 20px;
}
.footer-bottom-menu ul li a {
    display: inline-block;
    font-size: 15px;
    color: #bdd3d3;
    font-weight: 400;
}
.footer-bottom-menu ul li a:hover {
    color: #fff;
}


/* <--================Start Home Two CSS===============--> */


/* =========================================================
  <--- Start consalt Topber CSS --->
============================================================ */
.consalt-header-area.style_two {
    margin-bottom: -132px;
    margin-top: 0;
}
.header-address-info p {
    color: #a3b7b7;
    margin: 12px 0;
}
.header-address-info span {
    font-size: 15px;
    color: #ffffff;
    font-weight: 400;
}
span.right_info {
    margin-left: 28px;
}
.topber_right_social {
    text-align: right;
}
.topber_right_social ul li {
    display: inline-block;
    margin-left: 20px;
}
.topber_right_social ul li a {
    display: inline-block;
    color: #fff;
    font-size: 15px;
}
.consalt-header-area.style_two .row.style_bg {
    border-radius: 5px;
    background-color: #42ba3d;
    margin: 0;
    padding: 0 2px 0 19px;
}
.consalt-header-area.style_two .header-menu ul li a {
    display: inline-block;
    padding: 28px 0 28px;
    color: #ffff;
}
.consalt-header-area.style_two .header-menu ul li span {
    color: #fff;
}

/* cibsakt header right */

.consalt_header-right {
    text-align: right;
}
.consalt_header-right .header-button a {
    border-radius: 0;
    padding: 28px 33px;
    border-left: 1px solid rgba(255,255,255,0.2);
    border-right: 1px solid rgba(255,255,255,0.2);
}

.sidebar-btn {
    display: inline-block;
}
.nav-btn span i {
    display: inline-block;
    text-align: center;
    color: #fff;
    font-size: 30px;
    transform: rotate(180deg);
}
.header-search-button.search-box-outer {
    padding: 0px 28px 0 0;
    display: inline-block;
}
.header-search-button.search-box-outer a {
    color: #fff;
    display: inline-block;
    font-size: 15px;
}
.sticky.consalt-header-area.style_two .row.style_bg {
    background: transparent;
}

/* =========================================================
  <--- Start consalt Hero Area Style Two CSS --->
============================================================ */
section.hero_area.style_two {
    background: url(../images/home_two/banner_2.png);
    height: 900px;
}
section.hero_area.style_two .hero_content {
    margin-top: 135px;
}
.hero_content h4 {
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
    position: relative;
    z-index: 1;
    margin-bottom: 23px;
    padding-left: 12px;
}
.hero_content h4:before {
    content: "";
    left: 0;
    top: -6px;
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #28963d;
    z-index: -1;
}
.hero_area.style_two .hero_content p {
    margin: 24px 0 38px;
}
.hero_btn.style_two a:before {
    display: none;
}
.home_two_button {
    display: flex;
    align-items: center;
}
.hero_btn a i {
    margin-right: 8px;
}
.hero_video_btn a {
    color: #fff;
    display: inline-block;
}
.hero_video_btn span {
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
    margin-left: 4px;
}
.hero_area.style_two .hero-thumb {
    position: relative;
    z-index: 1;
    top: 109px;
}
/* hero shape home two */
.hero_shape_2 {
    position: absolute;
    left: 4%;
    top: 45%;
}
.hero_shape_3 {
    position: absolute;
    bottom: 10%;
    transform: translate(-50%, -50%);
    left: 44%;
}
.hero_shape_4 {
    position: absolute;
    right: 17%;
    top: 25%;
}
/* =========================================================
  <--- Start consalt Counter Area Style Two CSS --->
============================================================ */

.counter_area.style_two {
    background: transparent;
    padding: 0;
    border-bottom: 1px solid #e6eaea;
}
.counter-single-item.style_two {
    margin: 0;
    padding: 45px 50px 52px;
}
.counter-single-item.style_two.second {
    background: #f3f8f8;
}
.counter-single-item.style_two .counter-_number h1 {
    color: #063232;
}
.counter-single-item.style_two .counter-_number span {
    color: #063232;
}
.counter-single-item.style_two .counter_title h5 {
    font-size: 18px;
    line-height: 24px;
    text-transform: unset;
    color: #6b7a7a;
    font-weight: 400;
}
h5.title_two {
    margin-top: 5px;
}
.counter-single-item.style_two .counter_title {
    margin-left: 23px;
    position: relative;
}
.counter-star i {
    color: #ffb608;
    font-size: 15px;
}

/* =========================================================
  <--- Start consalt About Area Style Two CSS --->
============================================================ */
section.about_area.style_two {
    background: #ffff;
    position: relative;
    padding: 198px 0 120px;
}
.about_play.style_two {
    top: -15%;
}
.about_play.style_two a.banner-play-btn {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background-color: #f3f8f8 !important;
    line-height: 180px;
}
.about_play.style_two .text-inner text {
    fill: #063232;
}
.about_play.style_two .text-inner:before {
    display: none;
}
.about_play.style_two .text-inner svg {
    width: 66%;
}
.about_area.style_two .section_title p {
    width: 88%;
    margin: 23px 0 24px;
}
.like {
    position: absolute;
    top: 49%;
    transform: translate(-50%, -50%);
    left: 50%;
}
.about_icon {
    margin-right: 20px;
}
.about-icon_box {
    display: flex;
    align-items: center;
    padding: 0 0 0 15px;
}
.about_icon {
    margin-right: 20px;
    position: relative;
    top: 18px;
    z-index: 1;
}
.about_icon:before {
    position: absolute;
    top: -13px;
    left: -15px;
    height: 50px;
    width: 50px;
    background: #EDF4F4;
    content: "";
    z-index: -1;
    border-radius: 5px;
}
.about_content.style_two h3 {
    font-size: 20px;
    color: #063232;
    line-height: 30px;
    margin-bottom: 0;
}
.about_button.style_upper {
    border-top: 1px solid #e6eaea;
    padding-top: 35px;
    margin-top: 36px;
}
.about_btn.style_two {
    margin-right: 20px;
}
.about_btn.style_two a  {
    padding-left: 42px;
    padding-right: 42px;
    padding-top: 17px;
    padding-bottom: 17px;
}
.about_btn.style_two a:before {
    display: none;
}
.about_btn.style_two a i {
    margin-right: 10px;
}
.about_info.style-two span a i {
    transform: rotate(-45deg);
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    margin-left: 5px;
}

.about_shape.two {
    top: 21%;
    right: 0%;
    position: absolute;
    z-index: -1;
}

/* =========================================================
  <--- Start consalt Service Area Style Two CSS --->
============================================================ */

.container-fluid.custom_container {
    margin: 0 0 0 290px;
}

.service_area.style_two {
    background: #F4F8F9;
    position: relative;
    z-index: 1;
    padding: 105px 0 120px;
    top: 0;
}
.service_single_item.style_two {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background: transparent;
    margin-bottom: 0;
}
.service_single_item.style_two:before {
    display: none;
}
.service_single_item.style_two .service_content {
    background: #fff;
    padding: 42px 0 28px 40px;
    border-radius: 5px;
}
.service_single_item.style_two:hover .service_content:before {
   display: none;
}
.style_two.service_single_item .service_content h4 {
    color: #28963d;
    font-size: 15px;
    font-weight: 400;
    margin: 36px 0 20px;
    position: relative;
}
.service_single_item.style_two .service_content h3 {
    color: #063232;
    font-size: 20px;
}
.service_single_item.style_two .service_content h3 {
    color: #063232;
    font-size: 20px;
    margin: 0 0 10px;
}
.service_single_item.style_two .service_btn {
    margin-top: 26px;
}
.service_single_item.style_two .service_btn a {
    color: #fff;
}
.service_single_item.style_two:hover .service_btn a {
    color: #0a4b4b;
}
.service_single_item.style_two .service_btn a i {
    color: #0a4b4b;
    font-size: 16px;
    transform: rotate(-45deg);
    display: inline-block;
}
.service_single_item.style_two:hover .service_btn a i {
    transform: rotate(0deg);
}
.style_two.service_single_item .service_thumb img {
    width: inherit;
}

.service_list.owl-carousel .owl-item img {
    display: block;
     width: inherit;
}


.service_list .owl-nav {
    position: absolute;
    top: -37%;
    right: 34%;
    display: block;
}
.service_list button.owl-prev i {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid rgba(6,50,50,0.2);
    display: inline-block;
    line-height: 61px;
    transition: .5s;
    font-size: 25px;
    transform: rotate(45deg);
    margin-right: 15px;
}
.service_list button.owl-next i {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid rgba(6,50,50,0.2);
    display: inline-block;
    line-height: 61px;
    transition: .5s;
    font-size: 25px;
    transform: rotate(-45deg);
}
.service_list button.owl-prev i, .service_list button.owl-next i:hover {
    background: #42ba3d;
    color: #fff;
}

/* ======Service Shape========== */

.service_shape.style_two {
    position: absolute;
    top: 17%;
    left: -1%;
    z-index: -1;
}

.service_shape_three {
    position: absolute;
    top: 46%;
    left: 4%;
    z-index: 1;
    margin: auto;
    text-align: center;
}

/* =========================================================
  <--- Start consalt Skill Area CSS --->
============================================================ */

section.skills_area {
    position: relative;
    padding: 100px 0 0;
    overflow: hidden;
}
/* prossess ber plugin */

.prossess-ber-plugin {
    margin-top: 27px;
}

.prossess-ber-plugin span {
    margin-top: 11px;
    font-size: 16px;
    color: #063232;
    font-weight: 400;
}
.barfiller {
    position: relative;
    margin-bottom: 24px;
    margin-top: 4px;
    width: 100% !important;
    height: 10px;
    border-radius: 5px;
    background-color: rgba(12,110,109,0.14901960784313725);
}
span.fill {
    background-color: #28963d !important;
}
.barfiller .fill {
    display: block;
    position: relative;
    width: 0px;
    height: 100%;
    background: #333;
    z-index: 1;
    border-radius: 5px;
}
.barfiller .tip {
    margin-top: -35px;
    position: absolute;
    font-size: 18px;
    color: #1b1b1b;
    font-weight: 400;
    left: 0;
}

/* skills author */
.skills_author {
    display: flex;
    align-items: center;
    margin-top: 40px;
}
.skills_author-thumb {
    margin-right: 20px;
}
.skills_author_text {
    margin-left: 20px;
}
.sskills_author_text h3 {
    font-size: 20px;
    line-height: 26px;
    color: #063232;
    font-weight: 500;
    margin: 0 0 5px;
}
.skills_author_text span {
    margin-top: 12px;
    font-size: 14px;
    color: #484747;
    display: inline-block;
}
.author_siganature {
    margin-left: 60px;
}

/* ====Skills Shape======== */
.skill_shape {
    position: absolute;
    top: 15%;
    right: 8%;
    z-index: -1;
}
.skill_shape.style_two {
    top: 53%;
    right: -45px;
    z-index: -1;
}

/* =========================================================
  <--- Start consalt Call  Area CSS --->
============================================================ */

section.call_area {
    background: #28963d;
    position: relative;
    padding: 33px 0 40px;
    z-index: 1;
}
.call-do-content h4 {
    font-size: 16px;
    color: #e0f1df;
    font-weight: 500;
    margin-bottom: 16px;
}
.call-do-content h2 {
    font-size: 34px;
    color: #ffffff;
    font-weight: 500;
}
/* call rigit */
.call-right {
    display: flex;
    justify-content: space-between;
}
.call-do-action-info {
    display: flex;
    align-items: center;
    justify-content: center;
}

.call-do-social_icon  i {
    cursor: pointer;
    height: 55px;
    width: 55px;
    line-height: 55px;
    border: 2px solid #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 20px;
    color: #fff;
    margin-right: 20px;
}

.call_info p {
    opacity: 0.702;
    font-size: 15px;
    color: #ffffff;
    font-weight: 500;
    margin: 0;
}
.call_info h3 {
    font-size: 20px;
    color: #ffffff;
    font-weight: 500;
    margin: 7px 0 0;
}

.consalt_btn.style_four a {
    border: 1px solid #ffffff91;
    color: #fff;
    padding: 15px 43px 15px;
}
.consalt_btn.style_four a:hover {
    color: #42ba3d;
}
.consalt_btn.style_four a i {
    margin-right: 10px;
}
.consalt_btn.style_four span {
    background: #fff;
}
.call_shape {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    transform: translateY(-50%);
    z-index: -1;
}

/* =========================================================
  <--- Start consalt Testimonial Area Style Two CSS --->
============================================================ */
section.testimonial_area.style_two {
    background: #063232;
    border-radius: 0;
    padding: 120px 0 117px;
}
.testimonial_area.style_two .section_title p {
    margin: 26px 0 22px;
    color: #a3b7b7;
    width: 77%;
}
.counter-single-item.style_three {
    padding: 0;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 22px;
}
.counter-single-item.style_three .counter-_number h1 {
    font-size: 56px;
    color: #ffffff;
    font-weight: 500;
}
.counter-single-item.style_three .counter_title {
    margin-left: 38px;
}
.counter-single-item.style_three .counter_title:before {
    top: 9px;
    height: 45px;
    background: rgba(255,255,255,0.2);
}
.counter-single-item.style_three .counter_title h5 {
    color: #a3b7b7;
}

/* === testimonial item style two === */

.testimonial_item.style_two {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.testimonial_item.style_two .testi-author-thumb {
    flex-shrink: 0;
}
.testimonial_item.style_two .testimonal-content {
    padding: 0 30px 0;
}
.testimonial_item.style_two .testi-star i {
    font-size: 16px;
    color: #ff9c00;
    margin: 20px 5px 22px 0;
}
.testimonial_item.style_two .tesit-auothor {
    margin-top: 25px;
}
.testimonial_item.style_two .tesit-auothor .bio {
    margin-left: 0;
}
.testimonial_item.style_two .tesit-auothor .bio h4.name {
    color: #063232;
    margin: 0;
}
.testimonial_item.style_two .tesit-auothor .bio h5.designation {
    color: #6b7a7a;
}

.testi_list .owl-nav {
    position: absolute;
    top: 50%;
    right: -3%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
}
.testi_list .owl-prev i {
    width: 45px;
    height: 45px;
    border-radius: 23px;
    background-color: #ffffff;
    border: 1px solid rgba(6,50,50,0.2);
    display: inline-block;
    line-height: 45px;
    margin-bottom: 10px;
    transition: .5s;
    text-align: center;
}
.testi_list .owl-next i {
    width: 45px;
    height: 45px;
    border-radius: 23px;
    background-color: #ffffff;
    border: 1px solid rgba(6,50,50,0.2);
    display: inline-block;
    line-height: 45px;
    transition: .5s;
    text-align: center;
}
.testi_list .owl-prev i, .testi_list .owl-next i:hover {
    background: #42ba3d;
    color: #fff;
}
/* ====== Brand style Uppwer ===== */
.row.brand_upper {
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 90px;
    margin: 120px 0 0;
}

/* =========================================================
  <--- Start consalt CaseStudy Area Style Two CSS --->
============================================================ */
section.case-study-area.style_two {
    padding: 105px 0 107px;
    background: #F4F8F9;
}

.case-study_box {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 30px;
}
.case-study_box .case-study-single-box {
    margin-bottom: 30px;
}
.case-study_box .case-study-single-box.upper {
    margin-top: 87px;
}
.case-study_box .case-study-thumb {
    position: relative;
    height: inherit;
    background: none;
}
.case-study_box .case-study-thumb:hover {
    padding: 0;
}
.case-study_box .case-study-thumb::before {
    display: none;
}
.case-study_box .case-study-thumb::after {
    border-radius: 5px;
    background-color: rgba(12,110,109,0.9490196078431372);
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 0;
    transition: .5s;
}
.case-study_box .case-study-thumb:hover::after {
    opacity: 1;
}
.case-study_box .case-study-thumb img {
    border-radius: 5px;
}
.case-study_box .case-study-single-box:hover .case-study-thumb img {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}
.case-study_box .case-study-content {
    width: 100%;
    background: transparent;
    padding: 33px 40px 0;
    position: absolute;
    top: -23%;
    border-radius: 5px;
    z-index: 2;
    transition: .5s;
    opacity: 0;
}
.case-study_box .case-study-thumb:hover .case-study-content {
    top: 0%;
    opacity: 1;
}
.case-study_box .case-study-content h3 {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
}
.case-study_box .case-study-content p {
    margin: 0 0 5px;
    color: #e0f1df;
    font-size: 15px;
}
.case-study_box .case-study-content p.case_text {
    font-size: 16px;
    color: #fff;
    margin-top: 12px;
}
.case-study_box .consalt_btn {
    position: absolute;
    bottom: 10%;
    opacity: 0;
    transition: .5s;
}
.case-study_box .case-study-thumb:hover .consalt_btn {
    opacity: 1;
}
.case-study_box .case-study-single-box .consalt_btn a {
    background: #e0f1df;
    color: #063232;
    padding: 7px 25px 7px;
}
.case_box-shape {
    position: absolute;
    bottom: 10%;
    right: 20%;
    z-index: 2;
    opacity: 0;
    transition: .5s;
}
.case-study_box .case-study-thumb:hover .case_box-shape {
    bottom: 20%;
    right: 23%;
    opacity: 1;
}

/* =========================================================
  <--- Start consalt Pricing Area Style Two CSS --->
============================================================ */
section.pricing-area.style_two {
    position: relative;
    background: #ffff;
    z-index: 1;
}
.pricing-area.style_two .section_title p {
    margin: 28px 0 20px;
    color: #6b7a7a;
    width: 92%;
}
/* pricing list */

.pricing_list {
    display: inline-block;
    margin-right: 48px;
}
.pricing_list ul li img {
    margin-right: 6px;
}
.pricing_list ul li {
    font-size: 16px;
    color: #063232;
    font-weight: 500;
}
.consalt_btn.five {
    margin-top: 36px;
}
.consalt_btn.five a {
    border: 1px solid #ffffff91;
    color: #fff;
    padding: 15px 42px 15px;
    background: #28963d;
}
.consalt_btn.five span {
    background: #fff;
}
/* pricing style two */
.pricing-single-items.style_two {
    background: #F4F8F9;
    padding: 35px 30px 25px;
    z-index: 2;
    overflow: hidden;
}
.pricing-single-items.style_two:after {
    background: #28963d;
}
.pricing-single-items.style_two:before {
    position: absolute;
    content: "";
    bottom: -100%;
    right: -38%;
    height: 100%;
    width: 100%;
    background: url(../images/home_two/pricing_shape2.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
    -webkit-animation: dance3 5s alternate infinite;
    animation: dance3 5s alternate infinite;
    opacity: 0;
    transition: .5s;
}
@keyframes dance3 {
    0% {
        -webkit-transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
    }
}
.pricing-single-items.style_two:hover:before { 
    opacity: 1;
    bottom: -62%;
}
.pricing-single-items.style_two .pricing_icon {
    background: #fff;
    transition: .5s;
}
.pricing-single-items.style_two:hover .pricing_icon {
    background: #129695;
}
.pricing-single-items.style_two .pricing_icon img {
    filter: brightness(1) invert(0);
    transition: .5s;
}
.pricing-single-items.style_two:hover .pricing_icon img {
    filter: brightness(0) invert(1);
}
.pricing-single-items.style_two .pricing-title h3 {
    transition: .5s;
}
.pricing-single-items.style_two

.pricing-title span {
    transition: .5s;
}
.pricing-single-items.style_two:hover .pricing-title span {
    color: #fff;
}
.pricing-single-items.style_two:hover .pricing-title h3 {
    color: #fff;
}
.pricing-single-items.style_two .pricing-feature ul li {
    transition: .5s;
}
.pricing-single-items.style_two:hover .pricing-feature ul li {
    color: #fff;
    border-bottom: 1px dashed #e2cece;
}
.pricing-single-items.style_two .pricing-feature ul li img {
    transition: .5s;
}
.pricing-single-items.style_two:hover .pricing-feature ul li img {
    filter: brightness(0) invert(1);
}
.pricing-single-items.style_two .pricing-item-text span {
    transition: .5s;
}
.pricing-single-items.style_two:hover .pricing-item-text span {
    color: #E3F1E2;
}
.pricing-single-items.style_two:hover .consalt_btn a {
    background: #119695;
    color: #fff;
}
.pricing_shape {
    position: absolute;
    top: 23%;
    left: 0;
    z-index: -1;
}

/* =========================================================
  <--- Start consalt Call Area Style Two CSS --->
============================================================ */
section.call_area.style_two {
    background: url(../images/home_two/call_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 112px 0 112px;
}
section.call_area.style_two .call-do-content h2 {
    font-size: 42px;
    color: #ffffff;
    font-weight: 600;
}
.call-do-content p {
    color: #a3b7b7;
    width: 80%;
    margin: 20px 0 0;
}

.form-box {
    position: relative;
    margin-bottom: 20px;
}
.form-box input {
    width: 100%;
    height: 56px;
    border-radius: 5px;
    background-color: #ffffff;
    border: 0;
    outline: 0;
    padding: 0 25px;
}
.form-box i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}
.form-box input::placeholder {
    font-size: 15px;
    color: #6b7a7a;
    font-weight: 400;
}
.contact-form button {
    width: 100%;
    height: 56px;
    border-radius: 5px;
    background: #28963d;
    border: 0;
    outline: 0;
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    transition: .5s;
}
.contact-form button:hover {
    background: #ffff;
    color: #28963d;
}
/* call shape  */
.call_shape_two {
    position: absolute;
    top: 33%;
    left: 2%;
}
.call_shape_three {
    position: absolute;
    top: 20%;
    right: 6%;
}

/* =========================================================
  <--- Start consalt Blog Area Style Two CSS --->
============================================================ */

section.blog_area.style_two {
    background: url(../images/home_two/blod_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 85px 0 90px;
}
section.blog_area.style_two .section_title.style_four:before {
    bottom: -27%;
}
.blog_area.style_two  .single-blog-box {
    margin-bottom: 30px;
}
.blog_area.style_two .single-blog-thumb img {
    width: 100%;
}
.blog_area.style_two .blog-content {
    background: #fff;
}

/* =========================================================
  <--- Start consalt Call  Area Style Three CSS --->
============================================================ */
.call_area.style_three .call-do-action-info {
    justify-content: left;
}
.call_area.style_three .call_info p {
    opacity: 1;
    font-size: 15px;
    color: #ffffff;
    font-weight: 400;
    margin: 0;
}
.call_area.style_three .call-do-social_icon  i {
    line-height: 60px;
    border: 0;
    width: 60px;
    height: 60px;
    background-color: rgba(255,255,255,0.2);
}
.call_area.style_three .footer_logo {
    text-align: center;
    border-left: 2px solid rgba(255,255,255,0.10196078431372549);
    border-right: 2px solid rgba(255,255,255,0.10196078431372549);
    padding: 8px 0 8px;
}
/* call social icon */
.call_social_icon {
   text-align: right;
}
.call_social_icon ul li {
    display: inline-block;
    margin-right: 8px;
}
.call_social_icon ul li a {
    line-height: 48px;
    text-align: center;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.14901960784313725);
    display: inline-block;
    color: #fff;
    width: 48px;
}

/* =========================================================
  <--- Start consalt footer Area Style Two CSS --->
============================================================ */
section.footer_area.style_two {
    border-radius: 0;
    background: #053131;
    position: relative;
}
.footer_area.style_two button.btn {
    background-color: #28963d;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 12px;
}
/*recent post image*/

.recent-post-item {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.recent-post-item.upper {
    margin-top: 43px;
}

.recent-post-text {
    flex: 1;
}
.recent-post-text h6 {
    margin: 0;
}
.recent-post-text a {
    transition: .5s;
    overflow: hidden;
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 500;
    display: inline-block;
}
.recent-post-text span {
    padding: 0 0 0 20px;
    display: inline-block;
    line-height: 26px;
    font-size: 14px;
    color: #a3b7b7;
    font-weight: 400;
    position: relative;
    z-index: 1;
}
.recent-post-text span:before {
    position: absolute;
    z-index: 1;
    content: "";
    left: 0px;
    top: 11px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #28963d;
}

/* ================= Start Home Three Css================= */

/* =========================================================
  <--- Start consalt Consalt Topber Area Style Two CSS --->
============================================================ */
.topber_area.style_two {
    background: #063232;
    position: relative;
    z-index: 1;
}
.topber_area.style_two:before {
    position: absolute;
    content: "";
    left: -24px;
    height: 100%;
    width: 53%;
    background: #28963d;
    z-index: -1;
    transform: skew(-34deg);
}
.topber_area.style_two:after {
    position: absolute;
    content: "";
    right: 0;
    left: 85px;
    margin: auto;
    background: #28963d;
    width: 5px;
    height: 100%;
    top: 0;
    transform: skew(-34deg);
}
.topber_area.style_two .header-address-info p {
    color: #ffffff;
    font-size: 15px;
}
.topber_area.style_two .header-address-info span i {
    font-size: 14px;
    margin-right: 6px;
}
.topber_right_social.style_two {
    display: flex;
    align-items: center;
    justify-content: right;
}
.topber_right_social.style_two h2 {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    margin: 4px 3px 0 0;
}

/* =========================================================
  <--- Start consalt Consalt Header Area Style Three CSS --->
============================================================ */

.consalt-header-area.style_three {
    margin-bottom: 0;
    margin-top: 0;
    
}
.consalt-header-area.style_three .header-menu ul li a {
    color: #063232;
}
.consalt-header-area.style_three .header-menu ul li span {
    color: #063232;
}
.consalt-header-area.style_three  .header-search-button.search-box-outer {
    padding: 0px 35px 0 0;
}
.consalt-header-area.style_three .header-search-button a {
    color: #063232;
    display: inline-block;
    font-size: 15px;
}
.header-button.style_two a {
    background: #28963d;
    padding: 15px 31px;
    border-radius: 5px;
    border: 1px solid transparent;
}
.header-button.style_two a i {
    margin-left: 5px;
}
.consalt-header-area.style_three  .nav-btn.navSidebar-button {
    top: 6px;
    margin: 0 0 0 16px;
}
.consalt-header-area.style_three .nav-btn span i {
    color: #28963d;
    width: 56px;
    height: 56px;
    border-radius: 4px;
    background-color: #f0f4f5;
    line-height: 60px;
}

/* Sticky */

.sticky.consalt-header-area.style_three {
    background: #ffffff !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center;
}
.sticky.consalt-header-area.style_three .header-menu ul li a {
    color: #000 !important;
}
.sticky.consalt-header-area.style_three .header-menu ul.sub_menu li a {
    color: #063232!important;
}
.sticky.consalt-header-area.style_three .header-menu ul.sub_menu li a:hover {
    color: #ffff!important;
}


.sticky.consalt-header-area.style_three .header-search-button a {
    color: #fff !important;
}
.sticky .header-button.style_two a {
    border: 1px solid #fff !important;
}
a.active_sticky {
    display: none;
}
.sticky a.active_sticky {
    display: block;
}
.sticky a.active_header {
    display: none;
}

/* =========================================================
  <--- Start consalt Hero Area Style Three CSS --->
============================================================ */

section.hero_area.style_three {
    background: url(../images/home_3/hero_3_bg.jpg);
    height: 750px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.hero_area.style_three .hero_content h4 {
    color: #28963d;
    margin-bottom: 18px;
    padding-left: 0;
}
.hero_area.style_three .hero_content h4:before {
    display: none;
}
.hero_area.style_three .hero_content h1 {
    color: #063232;
    position: relative;
}
.hero_area.style_three .hero_content h1:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: -19px;
    background: url(../images/home_3/hero_border.png);
    height: 12px;
    width: 100%;
    background-repeat: no-repeat;
}
.hero_area.style_three .hero_content p {
    margin: 40px 0 33px;
    color: #6b7a7a;
}
.hero_area.style_three .hero_video_btn a {
    color: #063232;
}
.hero_area.style_three .hero_video_btn span {
    color: #063232;
}
.hero_area.style_three .hero_btn a {
    border-radius: 5px;
}
.hero_area.style_three .hero-thumb {
    position: relative;
    z-index: 1;
    top: 18px;
}
.hero_thumb_shape {
    position: absolute;
    top: 14%;
    right: -10%;
    z-index: -1;
}
.powerful_box {
    background: #ffff;
    display: inline-block;
    padding: 20px 45px 20px 20px;
    position: absolute;
    bottom: 43%;
    right: -8%;
    border-radius: 5px;
}
.hero_power_check {
    height: 55px;
    width: 55px;
    line-height: 57px;
    background: #28963d;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    font-size: 25px;
    float: left;
    margin-right: 20px;
}
.hero_powerful_content {
    overflow: hidden;
}
.hero_powerful_content h4 {
    font-size: 18px;
    font-weight: 500;
    margin-top: 6px;
}
.hero_powerful_content p {
    margin: 3px 0 0;
    font-size: 14px;
}

/* =========================================================
  <--- Start consalt About Area Style Three CSS --->
============================================================ */

.about_area.style_three {
    padding: 192px 0 115px;
}
.about_area.style_three .about_thumb {
    position: relative;
    margin-left: -56px;
}
.about_play.style_three {
    top: -16%;
    right: 20%;
}
.about_play.style_three  a.banner-play-btn {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background-color: #F9EDDF!important;
    line-height: 190px;
    border: 5px solid #fff;
}
.about_play.style_three .text-inner text {
    fill: #063232;
    font-weight: 400;
    font-size: 30px;
    text-transform: uppercase;
}
.about_btn.style_three a {
    border-radius: 5px;
    padding: 15px 40px;
}

.about-icon_box.style_two .about_icon:before {
    display: none;
}
.about-icon_box.style_two .about_icon {
    top: 5px;
}
/* about shape */
.about_shape.style_five {
    right: 14%;
    top: 19%;
}
.about_shpe-three {
    position: absolute;
    right: 0%;
    bottom: 9%;
}
.about_shpe-four {
    position: absolute;
    bottom: 14%;
    right: 31%;
}

/* =========================================================
  <--- Start consalt marquee Area Style Two CSS --->
============================================================ */

.marquee_area.style_two {
    background: #28963d;
    padding: 43px 0 42px;
    position: relative;
    margin: 16px 0 16px;
}
.marquee_area.style_two:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #063232;
    z-index: -1;
    transform: rotate(-1deg);
}
.slide-har .box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-animation: slide-har 80s linear infinite;
      animation: slide-har 80s linear infinite;
  }
  @-webkit-keyframes slide-har {
    0% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
    100% {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }
  
  @keyframes slide-har {
    0% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
    100% {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }
  
  @-webkit-keyframes slide-har-revers {
    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
    0% {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }
  
  @keyframes slide-har-revers {
    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
    0% {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }
.slide-har .box .item h4 {
    margin: 0;
}
.slide-har .box .item h4 a {
    display: inline-block;
    font-size: 26px;
    line-height: 32px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 500;
}
.slide-har .box .item span.icon-img-50 {
    margin: 0 30px;
}
.slide-har .box .item img.marqee_img_left {
    margin-right: 30px;
}

/* =========================================================
  <--- Start consalt Service Area Style Three CSS --->
============================================================ */

section.service_area.style_three {
    background-image: linear-gradient(0deg, #ffffff 0%, #eff3f5 100%);
    padding: 105px 0 100px;
}
section.service_area.style_two.style_three.inner_page {
    background: #fff;
}
.service_area.style_two.style_three.inner_page .service_single_item.style_three {
    filter: drop-shadow(0px 10px 40px rgba(162,186,186,0.25));
    margin-bottom: 2px;
}
.service_single_item.style_three {
    display: block;
    background: #ffff;
    text-align: center;
    padding: 20px;
}
.service_single_item.style_three:before {
    display: block;
    top: inherit;
    width: 0%;
    bottom: 0px;
    height: 5px;
    border-radius: 2px;
    background-color: #28963d;
    left: 50%;
}
.service_single_item.style_three:hover:before {
    width: 100%;
    left: 0%;
}
.service_single_item.style_three:before {
    display: block;
}
.service_single_item.style_three .service_thumb {
    position: relative;
    overflow: hidden;
}
.service_single_item.style_three .service_thumb:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: url(../images/home_3/service_shpe.png);
    transition: 0.5s;
    right: 0;
    margin: auto;
    top: 0;
    opacity: 0;
    background-repeat: no-repeat;
}
.service_single_item.style_three:hover .service_thumb:before {
    opacity: 1;
}
.service_single_item.style_three .service_icon {
    position: absolute;
    top: 60%;
    transform: translate(-50%, -50%);
    left: 50%;
    opacity: 0;
    transition: .5s;
}
.service_single_item.style_three:hover .service_icon {
    top: 50%;
    opacity: 1;
}
.service_single_item.style_three .service_content {
    background: #fff;
    padding: 17px 20px 10px;
    border-radius: 5px;
    text-align: center;
    z-index: 1;
    overflow: hidden;
}
.service_single_item.style_three .service_content:before {
    background: url(../images/home_3/service_dot2.png);
    height: 100%;
    width: 100%;
    left: 83%;
    opacity: 0;
    background-repeat: no-repeat;
    top: 17%;
}
.service_single_item.style_three:hover .service_content:before {
    opacity: 1;
    display: block;
}
.service_single_item.style_three .service_content::after {
    position: absolute;
    content: "";
    left: 0%;
    bottom: 4%;
    background: url(../images/home_3/service_dot.png);
    height: 30px;
    width: 85px;
    z-index: -1;
    transition: .5s;
    border-radius: 0;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0;
}
.service_single_item.style_three:hover .service_content::after {
    opacity: 1;
}
.style_three.service_single_item .service_content h4 {
    color: #ffff;
    font-size: 14px;
    margin: 14px 0;
    background: #28963d;
    display: inline-block;
    padding: 3px 20px;
    line-height: 28px;
    border-radius: 3px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}
.style_three.service_single_item .service_content h4:before {
    position: absolute;
    content: "";
    left: 0;
    height: 100%;
    width: 0%;
    background: #28963d;
    top: 0;
    z-index: -1;
    border-radius: 3px;
    transition: .5s;
}
.style_three.service_single_item:hover .service_content h4:before {
    width: 100%;
}
.service_single_item.style_three .service_btn {
    margin-top: 17px;
}
.service_single_item.style_three .service_btn a {
    letter-spacing: 0px;
    color: #063232 !important;
    text-transform: capitalize;
    font-size: 15px;
}
.service_single_item.style_three:hover .service_btn a {
    color: #28963d !important;
}
.service_single_item.style_three .service_btn a i {
    font-size: 15px;
    transform: rotate(0deg);
    margin-left: 5px;
}
.service_single_item.style_three:hover .service_btn a i {
    color: #28963d !important;
}

/* === service all shape=== */

.service_shape_three.style_four {
    position: absolute;
    right: -64%;
    top: 13%;
    z-index: -1;
}
.service_shape_five {
    position: absolute;
    top: 35%;
    left: 6%;
}
.style_six {
    position: absolute;
    right: -45%;
    top: 13%;
}
.service_shape_seven {
    position: absolute;
    top: 13%;
    left: 23%;
}

/* owl dots */

.service_list2 .owl-dots {
    position: absolute;
    bottom: -13%;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}

.service_list2 .owl-dot {
    display: inline-block;
    margin-left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #B5D3D1 !important;
}

.service_list2 .owl-dot.active {
    background: #28963d !important;
    width: 12px;
    border-radius: 50%;
    height: 12px;
}

/* =========================================================
  <--- Start consalt Why Choose Area CSS --->
============================================================ */

section.why_choose_us {
    background: url(../images/home_3/choose_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 120px 0 120px;
}
.why_choose_us .section_title.style_three:before {
    bottom: 55%;
    margin-bottom: 14px;
}
.why_choose_us .section_title.style_three p {
    margin: 37px 0 20px;
    width: 88%;
}
.choose_thumb {
    position: relative;
    z-index: 1;
    margin-left: -67px;
}
.choose_thumb_shpae {
    position: absolute;
    top: 10%;
    right: 12%;
    z-index: -1;
}
.choose_thumb_shpae2 {
    position: absolute;
    bottom: -6%;
    left: 7%;
    z-index: -1;
}

/* choose right */
.choose_right {
    position: relative;
    z-index: 1;
}
.choose_one {
    position: absolute;
    top: -7%;
    right: -5%;
}
.choose_two {
    position: absolute;
    bottom: 7%;
    right: -18%;
    z-index: -1;
}
.choose_list {
    border-radius: 4px;
    filter: drop-shadow(0px 5px 20px rgba(189,202,202,0.3));
    background-color: #ffffff;
    padding: 20px 30px;
    margin-bottom: 30px;
}
.choose_list ul li {
    font-size: 16px;
    color: #063232;
    font-weight: 400;
}
.choose_list ul li i {
    margin-right: 10px;
}
.choose_right .about_button {
    margin-top: 10px;
}
.choose_right .hero_video_btn a {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-color: #28963d;
    line-height: 64px;
    font-size: 30px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.choose_right .hero_video_btn a:before {
    position: absolute;
    content: "";
    left: -14%;
    top: -12%;
    width: 77px;
    height: 77px;
    border-radius: 50%;
    background-color: rgba(12,110,109,0);
    border: 1px solid #28963d;
}
.choose_right .hero_video_btn span {
    margin-left: 4px;
    font-size: 16px;
    color: #063232;
    font-weight: 500;
    position: relative;
    top: -6px;
    margin-left: 30px;
}


/* =========================================================
  <--- Start consalt Team Area Style Two CSS --->
============================================================ */

.team_area.style_two {
    padding: 105px 0 90px;
    position: relative;
    z-index: 1;
}
.single-team_item.style_two {
    position: relative;
    z-index: 1;
}
.team_box_shape {
    position: absolute;
    bottom: 0%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    opacity: 0;
    transition: .5s;
    z-index: -1;
}
.single-team_item.style_two:hover .team_box_shape {
   opacity: 1;
   bottom: -9%;
}
.single-team_item.style_two:hover {
    transform: inherit;
}
.single-team_item.style_two .team_thumb {
    position: relative;
    z-index: 1;
}
.single-team_item.style_two .team_thumb:before {
    position: absolute;
    background-image: linear-gradient(0deg, #053131 0%, #074949 100%);
    top: 0;
    left: 0;
    content: "";
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 0;
    transition: .6s;
}
.single-team_item.style_two:hover .team_thumb::before {
    opacity: 0.4;
}
.single-team_item.style_two .team_thumb img {
   width: 100%;
}
.team-share {
    position: absolute;
    right: 7%;
    top: 7%;
    z-index: 1;
}
.team-share-icon span i {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #28963d;
    color: #fff;
    text-align: center;
    display: inline-block;
    font-size: 15px;
    transition: 0.5s;
    line-height: 42px;
}
.team-share-icon span i:hover {
    background: #fff;
    color: #28963d;
}
.team-social-icon {
    position: absolute;
    right: 25px;
    top: 73px;
    transition: .5s;
    z-index: 1;
}
.team-social-icon ul li {
    list-style: none;
    display: block;
    margin-left: 6px;
    margin-bottom: 0px;
}
.team-social-icon ul li a {
    display: inline-block;
    height: 36px;
    width: 35px;
    line-height: 36px;
    text-align: center;
    color: #28963d;
    border-radius: 50%;
    transition: 0.5s;
    transform: translateY(-50px);
    opacity: 0;
    visibility: hidden;
    font-size: 15px;
    background: #fff;
}
.team-social-icon.active ul li a {
    transform: translateY(0px);
    opacity: 1;
    overflow: hidden;
    visibility: visible;
}
.team-social-icon ul li:nth-child(1) a {
    transition-delay: 0s;
}
.team-social-icon ul li:nth-child(2) a {  
    transition-delay: 0.2s;
}
.team-social-icon ul li:nth-child(3) a {
    transition-delay: 0.4s;
}
.team-social-icon ul li a:hover {
    background: #28963d;
    color: #fff;
}
.single-team_item.style_two .team-content {
    padding: 8px 0 25px;
    filter: drop-shadow(0px 5px 40px rgba(189,202,202,0.35));
    background: #fff;
    margin: 0;
}
.single-team_item.style_two .team-content h3 a {
    font-size: 22px;
}

/* team all shape */
.shape_one {
    position: absolute;
    top: 4%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    z-index: -1;
}
.shape_two {
    position: absolute;
    top: 18%;
    left: 21%;
}
.shape_three {
    position: absolute;
    top: 19%;
    right: 21%;
}

/* =========================================================
  <--- Start consalt Testimonial Area Style Three CSS --->
============================================================ */
section.testimonial_area.style_three {
    background: url(../images/home_3/testi_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 104px 0 260px;
    overflow: hidden;
}
.counter-single-item.style_four {
    padding: 0 0 30px;
    border-top: 1px solid rgba(6,50,50,0.10196078431372549);
    padding-top: 22px;
    border-bottom: 1px solid rgba(6,50,50,0.10196078431372549);
    position: relative;
}
.counter-single-item.style_four .counter-_number h1 {
    color: #28963d;
}
.counter-single-item.style_four .counter_title:before {
    top: 9px;
    height: 45px;
    background: rgba(6,50,50,0.10196078431372549);
}
.counter_shape {
    position: absolute;
    bottom: 35%;
    right: 10%;
}
.testi-list ul li {
    font-size: 15px;
    line-height: 26px;
    color: #6b7a7a;
    margin-top: 16px;
}
.testi-list ul li i {
    height: 18px;
    width: 18px;
    line-height: 18px;
    background: #28963d;
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    font-size: 18px;
    margin-right: 10px;
    position: relative;
    top: 2px;
}
.testimonial_item.style_three {
    display: block;
    text-align: center;
    border-radius: 5px 80px 5px 5px;
    padding: 40px 0 18px;
    position: relative;
    z-index: 1;
}
.testimonial_item.second {
    border-radius: 80px 5px 5px 5px;
}
.testimonial_item.style_three:before {
    position: absolute;
    content: "";
    width: 0%;
    bottom: 0px;
    height: 5px;
    background-color: #28963d;
    left: 50%;
    transition: .5s;
    z-index: -1;
}
.testimonial_item.style_three:hover:before {
    left: 0%;
    width: 100%;
}
.testimonial_item.style_three .tesit-auothor {
    display: inline;
}
.testimonial_item.style_three .auothor {
    position: relative;
    z-index: 1;
}
.testi_quote {
    position: absolute;
    top: 57%;
    right: -20%;
    left: 0;
    text-align: center;
    margin: auto;
}
.testimonial_item.style_three .tesit-auothor .bio {
    margin-top: 20px;
    margin-bottom: 22px;
}
.testimonial_item.style_three .testi-star i {
    font-size: 14px;
    color: #ffb608;
    margin: 16px 5px 22px 0;
}
.testi_list2.owl-carousel .owl-item img {
    width: inherit;
}
.testi_item_shape {
    position: absolute;
    top: 14%;
    left: 12%;
}
.testi_item_shape2 {
    position: absolute;
    top: 14%;
    right: 12%;
}

/* owl dots */

.testi_list2 .owl-dots {
    position: absolute;
    bottom: -14%;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}

.testi_list2 .owl-dot {
    display: inline-block;
    margin-left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #B5D3D1 !important;
}

.testi_list2 .owl-dot.active {
    background: #28963d !important;
    width: 12px;
    border-radius: 50%;
    height: 12px;
}

/* testi all shape */
.testi_shape_two {
    position: absolute;
    left: -7%;
    top: 21%;
}
.testi_shape_three {
    position: absolute;
    bottom: 16%;
    right: 4%;
}
.testi_shape_four {
    position: absolute;
    top: 17%;
    right: 35%;
}

/* =========================================================
  <--- Start consalt Counter Area Style Three CSS --->
============================================================ */

.counter_area.style_three {
    border: 0;
    position: relative;
    margin-top: -100px;
}
.row.style_bg_two {
    background: url(../images/home_3/counter_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin: 0;
    padding: 63px 0 43px 67px;
    border-bottom: 0;
}
.counter-single-item.style_five .counter-_number h1 {
    color: #fff;
}
.counter-single-item.style_five .counter-_number span {
    color: #fff;
}
.counter-single-item.style_five .counter_title h5 {
    color: #fff;
}

/* =========================================================
  <--- Start consalt Contact Area CSS --->
============================================================ */

section.contact_area {
    padding: 118px 0 217px;
    position: relative;
    overflow: hidden;
}
.contact_thumb {
    position: relative;
}
.call-do-action-info.style_two {
    border-radius: 40px;
    background-color: rgba(255,255,255,0.2);
    border: 2px solid #ffffff45;
    position: absolute;
    bottom: 10%;
    padding: 18px 40px 20px 0;
    left: 10%;
}
.call-do-action-info.style_two .call-do-social_icon {
    position: relative;
    z-index: 1;
    margin-right: 30px;
}
.call-do-action-info.style_two .call-do-social_icon:before {
    position: absolute;
    top: -60%;
    left: -39%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #28963d;
    content: "";
    z-index: -1;
}
.call-do-action-info.style_two .call-do-social_icon:after {
    position: absolute;
    top: -88%;
    left: -61%;
    width: 103px;
    height: 103px;
    border-radius: 50%;
    border: 2px solid #28963d;
    content: "";
    z-index: -1;
}
.call-do-action-info.style_two .call-do-social_icon  i {
    height: 35px;
    width: 35px;
    line-height: 35px;
    font-size: 13px;
    margin-right: 20px;
}
.call-do-action-info.style_two .call_info h3 {
    font-size: 24px;
    color: #ffffff;
    font-weight: 500;
    margin: 0;
}
.contact_thumb_shape {
    position: absolute;
    bottom: 29%;
    left: 6%;
}
.contact-form-box.style_two {
    background: #fff;
    filter: drop-shadow(0px 5px 40px rgba(189,202,202,0.35));
    padding: 44px 50px 60px;
    position: relative;
    top: 100px;
}
.contact-form-box.style_two .section_title.style_four {
    margin-bottom: 62px;
}
.contact-form-box.style_two .section_title.style_four:before {
    width: 37%;
}
.contact-form-box.style_two .section_title h1 {
    font-size: 34px;
}
.contact-form-box.style_two .form-box input {
    height: 54px;
    background-color: #ffffff;
    border: 1px solid #e6eaea;
}
.form-box.message {
    margin-bottom: 8px;
}
.form-box textarea {
    width: 100%;
    height: 120px;
    border-radius: 4px;
    background-color: #ffffff;
    border: 1px solid rgba(6,50,50,0.1);
    padding: 15px 25px;
    outline: 0;
}
.form-box textarea::placeholder {
    font-size: 15px;
    color: #6b7a7a;
    font-weight: 400;
}
.checkbox {
    margin: 0 0 22px;
}
.checkbox label {
    font-size: 15px;
    color: #6b7a7a;
    font-weight: 400;
}
.contact-form-box.style_two .contact-form button {
    width: 46%;
    height: 56px;
    font-size: 16px;
    font-weight: 500;
}
.contact-form-box.style_two .contact-form button:hover {
    background: #28963d;
    color: #ffff;
}
.contact-form-box.style_two .contact-form i {
    margin-right: 5px;
}
.contact_shape {
    position: absolute;
    top: -11%;
    left: 21%;
}
.contact_shape1 {
    position: absolute;
    bottom: 4%;
    left: 7%;
    z-index: -1;
}
.contact_shape2 {
    position: absolute;
    right: 9%;
    bottom: 3%;
    z-index: -1;
}

/* =========================================================
  <--- Start consalt Blog Area Style Three CSS --->
============================================================ */

.blog_category {
    position: absolute;
    top: 7%;
    right: 5%;
}
.blog_category a {
    display: inline-block;
    background: #28963d;
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    padding: 5px 20px;
    border-radius: 5px;
    position: relative;
    z-index: 1;
}
.blog_category a:before {
    position: absolute;
    z-index: -1;
    height: 100%;
    width: 0%;
    background: #28963d;
    left: 0;
    top: 0;
    content: "";
    transition: .5s;
    border-radius: 5px;
}
.single-blog-box.style_three:hover .blog_category a:before {
    width: 100%;
}
.single-blog-box.style_three .blog-content {
    background: #fff;
    padding: 18px 35px 12px 35px;
}
.single-blog-box.style_three:hover .blog-title h3 a {
    text-decoration: underline;
}
.single-blog-box.style_three p.blog_text {
    margin: 0 0 31px;
}
.single-blog-box.style_three .blog-title h3 a {
    margin-bottom: 10px;
}
.meta-blog.style_two p {
    position: relative;
    padding-left: 20px;
}
.meta-blog.style_two p:before {
    position: absolute;
    content: "";
    left: 0;
    top: 7px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #28963d;
}
.meta-blog.style_two p span {
    display: inline-block;
    font-size: 16px;
    text-transform: capitalize;
    color: #6b7a7a;
    font-weight: 400;
    border-radius: 0;
    padding: 0;
    margin-right: 0;
    background: transparent;
}
.meta-blog.style_two p span:before {
    display: none;
}
.meta-blog.style_two span.solution {
    float: right;
}
.meta-blog.style_two p i {
    color: #28963d;
    font-size: 15px;
    margin-right: 2px;
}

/* =========================================================
  <--- Start consalt Footer Area Style Three CSS --->
============================================================ */

section.footer_area.style_three {
    background: url(../images/home_3/footer_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    padding: 105px 0 30px;
}
.footer-widget-content.style_two p.footer_desc {
    color: #6b7a7a;
}
.footer-widget-content.style_two .subscribe_form input {
    border-bottom: 1px solid rgba(6,50,50,0.30196078431372547);
    border-radius: 0;
    color: #0B7574 !important;
}
.footer-widget-content.style_two .subscribe_form input::placeholder {
    color: #063232;
}
.footer-widget-content.style_two .footer-widget-title h4 {
    margin-bottom: 34px;
    font-size: 24px;
    color: #063232;
}
.footer-widget-content.style_two .footer-widget-menu ul li a {
    color: #063232;
    line-height: 34px;
}
.footer-widget-content.style_two .footer-widget-menu ul li a:hover {
    color: #28963d;
}
.recent-post-text.style_two a {
    color: #063232;
}
.recent-post-text.style_two span {
    color: #6b7a7a;
}
/* footer all shape*/
.footer_shape_one {
    position: absolute;
    bottom: 33%;
    left: 3%;
}
.footer_shape_two {
    position: absolute;
    right: 5%;
    top: 23%;
}
/* copy right */
.row.add-border.style_two {
    margin-top: 84px;
}
.row.add-border.style_two:before {
    background: #0632326b;
}
.footer-bottom-content-copy.style_two p {
    color: #063232;
}
.footer-bottom-menu.style_two ul li a {
    color: #063232;
}
.footer-bottom-menu.style_two ul li a:hover {
    color: #063232;
}

/* ==============================================================
    <-- Start Consalt Home Page Four  Area -->
=================================================================*/
.consalt-header-area.style_four {
    background: #09162f;
    padding: 8px 50px 8px;
}
.sticky.consalt-header-area.boxed.box_two {
    height: 100px;
}
.consalt-header-area.style_four .header-menu ul li a {
    color: #fff;
}
.consalt-header-area.style_four .header-menu ul li span {
    color: #ffffffa8;
}
.search-containers {
    display: inline-block;
    position: relative;
}
  .search-containers input {
    padding: 0 15px;
    width: 100%;
    height: 46px;
    border-radius: 23px;
    background-color: rgba(255,255,255,0);
    border: 1px solid rgb(255 255 255 / 73%);
    color: #fff;
}
.search-containers input::placeholder {
    font-size: 15px;
    color: #9f9fac;
    font-weight: 400;
}
.search-containers button {
    position: absolute;
    top: 0;
    width: 46px;
    height: 46px;
    border-radius: 23px;
    background-color: rgba(240,243,249,0);
    border: 1px solid rgb(255 255 255 / 99%);
    line-height: 46px;
    color: #fff;
    font-size: 16px;
    margin-left: 15px;
}
.consalt-header-area.style_four .nav-btn span i {
    color: #fff;
    line-height: 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #4d44f8;
}
.consalt-header-area.style_four  .nav-btn.navSidebar-button {
    top: 3px;
    margin: 0 0 0 70px;
}


section.hero_area.style_four {
    background: url(../images/home-four/slider_bg.jpg);
    height: 800px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
section.hero_area.style_four.bannner_two {
    background: url("../images/home-four/banner2.png");
}
section.hero_area.style_four .hero_content {
    margin-top: 0;
}
.hero_content.style_four h1 {
    font-size: 56px;
    color: #ffffff !important;
    font-weight: 600;
    line-height: 74px;
}
.hero_area.style_four .hero_content h1:before {
    display: none;
}
.hero_area.style_four .hero_content p {
    margin: 16px 0 33px;
    font-size: 16px;
    color: #ffffff9e;
    font-weight: 400;
    width: 39%;
}
.hero_btn.home_four a {
    background: #4d44f8;
    display: inline-block;
    border-radius: 30px !important;
    padding: 17px 39px 17px;
}
.slider-btn a {
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
    display: inline-block;
}
.slider-btn a i {
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
    display: inline-block;
    transform: rotate(-64deg);
    transition: .5s;
}
.slider-btn a:hover i {
    transform: rotate(0deg);
}
/*section btn*/
.section-btn {
    position: relative;
}
#section09 a {
    position: absolute;
    left: 47%;
    bottom: -21px;
}

#section09 a span {
    position: absolute;
    bottom: -152px;
    left: 47%;
    width: 20px;
    height: 50px;
    margin-left: -15px;
    border: 2px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
}

#section09 a span::before {
    position: absolute;
    top: 17px;
    left: 50%;
    content: '';
    width: 2px;
    height: 12px;
    margin-left: -1px;
    background-color: #fff;
    border-radius: 100%;
    box-sizing: border-box;
}

#section09 a span::after {
    position: absolute;
    bottom: -14px;
    left: 50%;
    width: 8px;
    height: 8px;
    content: '';
    margin-left: -4px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    box-sizing: border-box;
}
.slider_list .owl-prev {
    position: absolute;
    top: 48%;
    color: #fff;
    left: 5%;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    border-radius: 35px;
    background-color: transparent;
    border: 2px solid rgba(255,255,255,0.2);
    line-height: 70px;
    text-align: center;
    transition: .5s;
}
.slider_list .owl-next {
    position: absolute;
    top: 48%;
    color: #fff;
    right: 5%;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    border-radius: 35px;
    background-color: transparent;
    border: 2px solid rgba(255,255,255,0.2);
    line-height: 70px;
    text-align: center;
    transition: .5s;
}
.slider_list .owl-prev:hover, .slider_list .owl-next:hover {
    background: #4d44f8;
}
/* ==============================================================
    <-- Start Consalt Feature Area Style Two Css-->
=================================================================*/
section.feature_area.style_two {
    background: #fff;
    padding: 105px 0 80px;
}
.feature_item.style_three {
    background: transparent;
    padding: 0;
}

.feature_item.style_three:before {
    display: none;
}
.feature_item.style_three .feature_icon {
    width: 100px;
    height: 100px;
    border-radius: 50px 0 50px 50px;
    background-color: #ffebeb;
    line-height: 100px;
    text-align: center;
    float: left;
    margin-right: 30px;
    position: relative;
    margin-top: 8px;
    transition: .5s;
}
.feature_item.style_three:hover .feature_icon {
    border-radius: 50px;
}
.feature_icon.two {
    background: #ebefff !important;
}
.feature_icon.three {
    background: #f7f2e2 !important;
}
.feature_item.style_three .feature_content {
    overflow: hidden;
}
.feature_item.style_three .feature_content p {
    font-size: 15px;
    margin: 0 0 12px;
}
.feature_item.style_three .feature_content h3 {
    margin: 0 0 15px;
    font-size: 22px;
    line-height: 26px;
    color: #09162f;
    font-weight: 500;
}
.feature_right a {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    display: inline-block;
    letter-spacing: -10px;
}
.feature_item.style_three:hover .feature_right a{
    letter-spacing: 0px;
    color: #09162f;
}
.feature_right a i {
    color: #09162f;
    font-weight: 600;
    display: inline-block;
    font-size: 19px;
    margin-left: 0px;
}
.feature_item.style_three:hover .feature_right a i {
    margin-left: 10px;
}

/* section title home style four */
.section_title.home_style_four h4 {
    margin-bottom: 20px;
    font-size: 16px;
    color: #4d44f8;
    font-weight: 500;
}
.section_title.home_style_four h1 {
    font-size: 42px;
    color: #09162f;
    font-weight: 600;
}

/* ==============================================================
    <-- Start Consalt About Area Style Four Css-->
=================================================================*/

section.about_area.style_four {
    padding: 0;
    background: #ECEFFF;
}
.about_container {
    background: #09162f;
    padding: 105px 0 0;
    border-radius: 0 0 150px 150px;
}
.about_content.style_two p {
    font-size: 16px;
    color: #9f9fac;
    font-weight: 400;
    width: 92%;
    margin: 18px 0 20px;
}
.about_content.style_two .about_list ul li {
    font-size: 18px;
    line-height: 38px;
    color: #ffffff;
    font-weight: 500;
}
.about_content.style_two .about_list ul li i {
    font-size: 18px;
}
.about_btn.home_four_two a {
    background: transparent;
    border: 1px solid #fff;
    padding: 12px 40px 16px;
    margin-top: 32px;
}
.about_btn.home_four_two a:hover, .about_btn a:focus {
    color: #4e4d4c;
}
.about_btn.home_four_two a:hover:before {
    background-color: #4e4d4c;
}
.about_btn.home_four_two span {
    background: #fff;
}
.about_area.style_four .about_thumb {
    position: relative;
    margin-bottom: -29%;
    margin-left: 8%;
}
/* about counter */
.about_counter {
    background: #ECEFFF;
}
.about_counter .counter-single-item.style_two {
    margin: 0;
    padding: 37px 0 32px;
}
.about_counter .counter-single-item.style_two .counter_title {
    margin-left: 40px;
    position: relative;
}
.about_counter .counter_title:before {
    position: absolute;
    content: "";
    left: -20px;
    top: 25px;
    width: 1px;
    height: 30px;
    background-color: #949BAF;
}
.about_counter .counter-single-item.style_two .counter-_number h1 {
    font-size: 50px;
    line-height: 28px;
    color: #09162f;
    font-weight: 600;
}
.about_counter .counter-single-item.style_two .counter-_number span {
    font-size: 50px;
    line-height: 28px;
    color: #09162f;
    font-weight: 600;
}
.about_counter .counter-single-item.style_two .counter_title h5 {
    text-transform: unset;
    font-size: 18px;
    line-height: 26px;
    color: #09162f;
    font-weight: 500;
}
.about_counter .counter_title p {
    font-size: 15px;
    color: #7e7e89;
    font-weight: 400;
    margin-top: 5px;
}
.about_shpae1 {
    position: absolute;
    bottom: 35%;
    left: 6%;
    right: 0;
    margin: auto;
    text-align: center;
}
.about_shpae2 {
    position: absolute;
    left: 0;
    right: -10%;
    text-align: center;
    top: 16%;
}

/* ==============================================================
    <-- Start Consalt Service Area Style Four Css-->
=================================================================*/

section.service_area.styel_four {
    background: #FFFFFF;
    padding: 84px 0 95px;
}
.styel_four .section_title.text-center {
    margin-bottom: 75px;
}
.service_single_item.style_four {
    text-align: center;
    display: block;
    background-color: rgba(255,235,235,0.5019607843137255);
    transition: .5s;
    transform: translateY(0px);
}
.service_single_item.style_four .service_content {
    padding: 40px 0 27px;
    border-radius: 5px;
    text-align: center;
    background: transparent;
}
.style_four.service_single_item .service_content h4 {
    margin: 31px 0 15px;
    position: relative;
    font-size: 15px;
    text-transform: uppercase;
    color: #09162f;
    font-weight: 400;
}
.style_four.service_single_item .service_content h4:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    bottom: -3px;
    width: 24px;
    height: 1px;
    background-color: #09162f;
    text-align: center;
    margin: auto;
}
.service_single_item.style_four .service_content h3 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #09162f;
}
.service_single_item.style_four .service_btn a i {
    color: #09162f;
    font-size: 22px;
    transform: rotate(-45deg);
    display: inline-block;
    margin-left: 0;
    transition: .5s;
}
.service_single_item.second {
    background: #09152F;
    transform: translateY(-10px);
}
.service_single_item.second .service_content h4  {
    color: #fff !important;
}
.style_four.service_single_item.second .service_content h4:before {
    background-color: #fff;
}
.service_single_item.second .service_content h3  {
    color: #fff !important;
}
.service_single_item.second .service_content p  {
    color: #9f9fac !important;
}
.service_single_item.style_four.third {
    background: #FBF8F0;
}
.service_single_item.end {
    background: #F1F9FC;
    transform: translateY(-20px);
}
.service_single_item.second .service_btn a i {
    color: #fff !important;
}
/* pagination  */
.pagination_btns {
    text-align: center;
    margin: 53px 0 0;
}
.pagination_btns p {
    font-size: 15px;
    color: #09162f;
    font-weight: 400;
}
.pagination_btns a {
    display: inline-block;
    color: #A5A1FB;
    font-size: 15px;
    margin: 0 9px 0;
    text-decoration: underline;
}

/* ==============================================================
    <-- Start Consalt Work Area  Css-->
=================================================================*/

section.work_area {
    background: #0A1630;
    padding: 105px 0 120px;
    z-index: 1;
}
.consalt_btn.home_four_three a {
    background: transparent;
    border: 1px solid #fff;
    padding: 12px 36px;
}
.consalt_btn.home_four_three a:before {
    left: 37px;
    bottom: 13px;
}
.work_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 21px 0 26px 0;
    transition: .5s;
    border-bottom: 1px solid rgba(255,255,255,0.10196078431372549);
    position: relative;
}
.work_item:before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    width: 150px;
    height: 2px;
    background-color: #4d44f8;
    content: "";
    transform: translateX(-50%);
    opacity: 0;
    transition: .5s;
}
.work_item:hover:before {
    left: -6%;
    opacity: 1;
}
.work_item:hover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0D2146;
    padding: 21px 30px 26px 70px;
    border: none;
}
.work_content h3 {
    font-size: 30px;
    color: #ffffff;
    font-weight: 500;
}
.work_content p {
    font-size: 15px;
    text-transform: uppercase;
    color: #9f9fac;
    font-weight: 400;
    margin: 9px 0 0;
}
.work_item:hover .work_btn a {
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background-color: #4d44f8;
    line-height: 56px;
    text-align: center;
    display: inline-block;
}
.work_btn a i {
    display: inline-block;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    transform: rotate(-45deg);
}
.work_item.border_none {
    border: none;
}

/* ==============================================================
    <-- Start Consalt Steps  Area Style Two Css-->
=================================================================*/

section.steps_area.style_two {
    padding: 105px 0 90px;
    border-radius: 0;
    background: #ECEFFF;
    z-index: 1;
}
.boxed.box_two {
    margin: 0 0 0 20px !important;
}
.steps-single-item.style_two {
    background: #fff;
}
.steps-single-item.style_two:before {
    top: 20px;
    background-color: #4e4d4c;
    opacity: 0;
    transition: .5s;
}
.steps-single-item.style_two:hover:before {
    top: 47px;
    opacity: 1;
}
.steps-single-item.style_two .steps_icon {
    background-color: #ECEFFF;
}
.steps-single-item.style_two:hover .steps_icon {
    background-color: #4e4d4c;
}
.steps-single-item.style_two h3.steps_number {
    color: #4D43F7;
    top: 0;
    opacity: 0;
    transition: .5s;
}
.steps-single-item.style_two:hover h3.steps_number {
    color: #4D43F7;
    top: 8%;
    opacity: 1;
}
.steps-single-item.style_two .steps-content h3 {
    color: #09162f;
}
.steps-single-item.style_two .steps_btn a {
    color: #4e4d4c;
}

/* ==============================================================
    <-- Start Consalt Marquee Area Style Three Css-->
=================================================================*/
.marquee_area.style_two.style_three {
    background: #4e4d4c;
    margin: 0;
    padding: 34px 0 32px;
    z-index: 1;
}
.style_three.marquee_area.style_two:before {
    display: none;
}

/* ==============================================================
    <-- Start Consalt Team Area Style four Css-->
=================================================================*/

section.team_area.style_four {
    background: #09162f;
}
.single-team_item.style_four {
    border: 2px solid #ffffff45;
    text-align: center;
    padding: 25px 0 22px;
    border-radius: 150px 150px 0 0;
    transition: .5s;
}
.single-team_item.style_four:hover {
    border: 2px solid #ffffff78;
}
.single-team_item.style_four .team_thumb:before {
   display: none;
}
.single-team_item.style_four .team_thumb img {
    width: inherit;
}
.single-team_item.style_four .team-content {
    text-align: center;
    padding: 18px 0 0;
    margin: 0 !important;
    background: transparent;
}
.single-team_item.style_four .team-content h3 a {
    color: #fff;
}
.single-team_item.style_four .team-content span {
    color: #9f9fac;
}
.team-social-four {
    margin: 0px 0 -18px;
    opacity: 0;
    transition: .5s;
}
.single-team_item.style_four:hover .team-social-four {
    margin: 17px 0 0;
    opacity: 1;
}
.team-social-four ul li {
    display: inline-block;
    margin: 0 8px 0;
}
.team-social-four ul li a {
    display: inline-block;
    color: #ffffff45;
    font-size: 15px;
}

/* ==============================================================
    <-- Start Consalt Testimonial Area Style four Css-->
=================================================================*/

section.testimonial_area.style_four {
    background: #F0F2FF;
    padding: 105px 0 20px;
    z-index: 1;
}
.testimonial_item.style_four {
    background: transparent;
}
.testimonial_item.style_four .testimonal-content {
    padding: 0 47px 0 35px;
}
.testimonial_item.style_four .testi-star i {
    margin: 29px 5px 20px 0;
}
.testimonial_item.style_four .testimonal-content p {
    font-size: 24px;
    line-height: 38px;
    color: #09162f;
    font-weight: 400;
    font-style: italic;
}
.testimonial_item.style_four .tesit-auothor {
    margin-top: 30px;
}
.testimonial_item.style_four .tesit-auothor .bio h4.name {
    color: #09162f;
    margin: 0;
    font-size: 24px;
}

.testi_list3 .owl-nav {
    display: flex;
    position: absolute;
    top: -39%;
    right: 0;
}
.testi_list3 .owl-prev i {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid rgba(6,50,50,0.2);
    line-height: 60px;
    margin-bottom: 10px;
    transition: .5s;
    text-align: center;
    font-weight: 600;
    display: inline-block;
    margin: 0 15px;
    transform: rotate(45deg);
}
.testi_list3 .owl-next i {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid rgba(6,50,50,0.2);
    line-height: 60px;
    margin-bottom: 10px;
    transition: .5s;
    text-align: center;
    font-weight: 600;
    display: inline-block;
    transform: rotate(-45deg);
}
.testi_list3 .owl-prev i, .testi_list3 .owl-next i:hover {
    background: #4e4d4c;
    color: #fff;
}
/* ==============================================================
    <-- Start Consalt Blog Area Style four Css-->
=================================================================*/

section.blog_area.style_four {
    background: #F0F2FF;
    padding: 85px 0 157px;
    z-index: 1;
}
section.blog_area.style_four .meta-blog p span {
    background: #4d44f8;
}
section.blog_area.style_four .meta-blog p span:before {
    background-color: #4d44f8;
}
section.blog_area.style_four .blog-title h3 a {
    color: #09162f;
}
section.blog_area.style_four .single-blog-box .blog_btn a i {
    color: #09162f;
}
section.blog_area.style_four .single-blog-box:hover .blog_btn a i {
    color: #4d44f8;
}
section.blog_area.style_four .single-blog-box:hover .blog_btn a{
    color: #4d44f8;
}
section.blog_area.style_four .blog_list .owl-dot {
    background: transparent !important;
    border: 1px solid rgba(9,22,47,0.3);
}
section.blog_area.style_four .blog_list .owl-dot.active {
    background: #4d44f8 !important;
}
section.blog_area.style_four .blog_list .owl-dots {
    bottom: -8%;
}

/* ==============================================================
    <-- Start Consalt Contact Area Style Two Css-->
=================================================================*/

section.contact_area.style_two {
    background: url("../images/home-four/contact_bg.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 105px 0 120px;
    z-index: 1;
}
.contact_main_info.style_two {
    background: transparent;
    padding: 0;
    margin-top: 45px;
}
.contact_main_info.style_two .call_info h3 {
    color: #fff;
}
.contact_main_info.style_two .call_info p {
    color: #ffffffb3;
    opacity: 1;
}
.contact_main_info.style_two .call-do-action-info .call-do-social_icon i {
    color: #fff;
    background: transparent;
    border: 2px solid rgba(255,255,255,0.2);
}
.contact_main_info.style_two .call-do-action-info:hover .call-do-social_icon i {
    background: transparent;
}
.contact-form-box.style_three {
    background: transparent;
    padding: 0;
    top: 0;
}
.contact-form-box.style_three .form-box {
    margin-bottom: 43px;
}
.contact-form-box.style_three .form-box input {
    height: 46px;
    background-color: transparent;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    border-radius: 0;
    color: #ffff;
    padding: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}
.contact-form-box.style_three .form-box input::placeholder {
    color: #fff;
}
.contact-form-box.style_three .form-box textarea {
    height: 89px;
    background-color: transparent;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    border-radius: 0;
    color: #ffff;
    padding: 9px 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;

}
.contact-form-box.style_three .form-box textarea::placeholder {
    color: #fff;
}
.contact-form-box.style_three .contact-form button {
    font-size: 16px;
    font-weight: 500;
    width: 182px;
    height: 56px;
    border-radius: 28px;
    border: 1.2px solid #ffffff;
    background: transparent;
}
.contact-form-box.style_three .contact-form button:hover {
    color: #fff;
    background: #4d44f8;
    border: 1.2px solid #ffffff;
}
section.footer_area.style_four {
    background: #09152F;
    border-radius: 0;
    z-index: 1;
}
button.btn.style_two {
    background: #4D43F7;
}
button.btn.style_two:hover {
    background: #fff;
    color: #4D43F7;
}
section.footer_area.style_four .footer_widget_icon i {
    background-color: #4e4d4c;
}


/* ==============================================================
    <-- Start Consalt Home Five Css-->
=================================================================*/
.consalt-header-area.style_five .row.style_bg {
    background: #fff;
    padding: 3px 6px 3px 56px;
    border-radius: 0 0 80px 80px;
}
.consalt-header-area.style_five .header-menu {
    justify-content: space-evenly;
    display: flex;
    align-items: center;
}
.consalt-header-area.style_five .header-menu ul li a {
    display: inline-block;
    padding: 28px 0 28px;
    color: #063232 ;
}
.consalt-header-area.style_five .header-menu ul li a span {
    color: #063232 ;
}
.consalt_header-right.style_two .header-search-button.search-box-outer {
    padding: 0px 16px 0 0;
    display: inline-block;
}
.consalt_header-right.style_two .header-button a {
    border-radius: 0;
    padding: 0;
    border-left: 0;
    border-right: 0;
    font-size: 16px;
    color: #28963d;
    font-weight: 500;
    display: inline-block;
    position: relative;
}
.consalt_header-right.style_two .header-button a:before {
    position: absolute;
    content: "";
    width: 20px;
    height: 2px;
    background-color: #28963d;
    bottom: 0px;
    display: inline-block;
    transition: .5s;
}
.consalt_header-right.style_two .header-button a:hover:before {
    width: 107px;
}
.consalt_header-right.style_two .header-search-button.search-box-outer a {
    color: #28963d;
    display: inline-block;
    font-size: 15px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: rgba(6,50,50,0.14901960784313725);
    line-height: 40px;
    text-align: center;
}
.sticky.consalt-header-area.style_five {
    background: transparent !important;
    border: none;
    box-shadow: none;
}
.sticky.consalt-header-area.style_five .row.style_bg {
    background: #fff;
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
}
.sticky.consalt-header-area.style_five .header-menu ul li a i {
    color: #063232 ;
}

/*
<!-- =======================================-->
 <!--start consalt slider area css-->
<!-- ======================================= -->*/
.consalt-slider-height {
    height: 935px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.consalt-slider-height-2 {
    height: 950px;
}
  
  .consalt-slider-bg {
    background: url(../images/home-five/banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

.consalt-slider-bg2 {
    background: url(../images/home-five/banner3.png);
}

.consalt-slider-bg3 {
    background: url(../images/home-five/slider2.png);
  }

  .consalt-slider-bg,
  .consalt-slider-bg2,
  .consalt-slider-bg3 {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: opacity 1500ms ease-in, -webkit-transform 7000ms ease;
    transition: opacity 1500ms ease-in, -webkit-transform 7000ms ease;
    transition: transform 9000ms ease, opacity 1500ms ease-in;
    transition: transform 9000ms ease, opacity 1500ms ease-in,
      -webkit-transform 9000ms ease;
  }
  
.consalt-slider-content {
    padding-top: 0;
    text-align: left;
}
h1.consalt-slider-title {
    margin-top: 15px;
    font-size: 56px;
    line-height: 70px;
    color: #063232;
    font-weight: 600;
}
p.consalt-slider-des {
    opacity: 0;
    z-index: 3;
    position: relative;
    transform: translateX(91px);
    font-size: 16px;
    line-height: 26px;
    color: #6b7a7a;
    font-weight: 400;
    width: 41%;
    transition: all 2500ms ease;
    margin: 0 0 30px;
}
.consalt-slider-height .slider_info a {
    color: #063232;
}
.consalt-slider-height .slider_info span {
    color: #063232;
}
  .consalt-slider-title-box {
    opacity: 0;
    z-index: 3;
    position: relative;
    transform: translateY(-150px);
  }
  .consalt-slider-btn {
    transform: translateY(150px);
    opacity: 0;
  }
  .consalt-slider-wrapper .swiper-slide.swiper-slide-active .consalt-slider-bg {
    -webkit-transform: scale(1.2);
    transform: scale(1.1);
  }
  .consalt-slider-wrapper
    .swiper-slide.swiper-slide-active
    .consalt-slider-bg2 {
    -webkit-transform: scale(1.2);
    transform: scale(1);
  }
.consalt-slider-wrapper .swiper-slide.swiper-slide-active .consalt-slider-title-box {
    opacity: 1;
    transform: translatey(-17px);
    transition: all 2500ms ease;
}
  .consalt-slider-wrapper
    .swiper-slide.swiper-slide-active
    .consalt-slider-btn {
    opacity: 1;
    transform: translatey(0px);
    transition: all 2500ms ease;
  }
  
.consalt-slider-wrapper
.swiper-slide.swiper-slide-active
p.consalt-slider-des {
    opacity: 1;
    z-index: 3;
    position: relative;
    transform: translateX(-0px);
 }
  .slider-dots .swiper-pagination-bullet {
    display: flex;
    border-radius: 50%;
    opacity: 1;
    margin: 0px 6px;
    transition: 0.3s;
    margin-bottom: 13px;
    width: 16px;
    height: 16px;
    background: transparent;
    border: 2px solid #4a4e56;
}
.consalt-slider-wrapper .swiper-pagination-bullet-active {
    background: #078588!important;
    border: 2px solid #078588!important;
}
.slider-dots {
    position: absolute;
    top: 37%;
    z-index: 1;
    right: 0;
}

/*
<!-- ================================================-->
 <!--start consalt Feature Area Style Four css-->
<!-- ============================================== -->*/

section.feature_area.style_four {
    padding: 0;
    background: transparent;
    margin-top: -187px;
}
.feature_item.style_four {
    border: none !important;
    transform: translateY(0px) !important;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 25px rgba(145,161,161,0.15)) !important;
    padding: 40px 50px 39px 35px !important;
}
.feature_item.style_four::before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: #006E6D;
    content: "";
    display: block !important;
    z-index: -1;
    border-radius: 10px;
}
.feature_item.style_four:hover:before{
    width: 100%;
    left: 0;
}
.feature_icon img {
    transition: .5s;
}
.feature_item.style_four:hover .feature_icon img {
    filter: brightness(0)  invert(1);
}
.feature_item.style_four .feature_content h3 {
    transition: .5s;
    font-size: 22px;
    color: #063232 !important;
    font-weight: 600;
    margin: 20px 0 13px;
}
.feature_content p {
    transition: .5s;
}
.feature_item.style_four:hover .feature_content h3 {
    color: #fff !important;
}
.feature_item.style_four:hover .feature_content p {
    color: #bdd3d3 !important;
}
.feature_btns {
    margin-top: 27px;
}
.feature_btns a {
    font-size: 16px;
    color: #ffff;
    font-weight: 500;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #078588;
    line-height: 40px;
    display: inline-block;
    text-align: center;
    overflow: hidden;
}
.feature_item.style_four:hover .feature_btns a {
    width: 132px;
    height: 40px;
    border-radius: 20px;
    background-color: #ffffff;
    color: #078588;
}
.feature_btns span {
    opacity: 0;
    margin-left: -86px;
    transition: .5s;
}
.feature_item.style_four:hover .feature_btns span {
    opacity: 1;
    margin-left: 0;
}
h4.feature_numbers {
    color: transparent;
    -webkit-text-stroke: #078588;
    -webkit-text-stroke-width: 1px;
    font-size: 55px;
    position: absolute;
    top: 17px;
    right: 35px;
}
section.about_area.style_five {
    padding: 80px 0 0;
}
.about_play.style_four {
    top: inherit;
    bottom: -2%;
    right: 5%;
}
.about_play.style_four a.banner-play-btn {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: url(../images/home-five/frend-shep.png);
    line-height: 180px;
}
.about_play.style_two .text-inner svg {
    width: 76%;
}
.about_play.style_four .text-inner text {
    fill: #282f3c;
    font-size: 28px;
    letter-spacing: 1px;
    font-weight: 700;
}
.about_box p {
    margin: 15px 0 0;
}
.about-icon_box.style_three {
    padding: 0;
}
.about-icon_box.style_three .about_icon {
    margin-right: 20px;
    width: 70px;
    height: 70px;
    border-radius: 5px;
    background-color: #EAF5F7;
    line-height: 70px;
    text-align: center;
    top: 0;
}
.about-icon_box.style_three .about_icon:before {
    display: none;
}
.about-icon_box.style_three .about_content.style_two h3 {
    font-size: 24px;
    color: #063232;
    font-weight: 500;
    margin: 0;
}
p.about_qute {
    border-top: 1px solid #0785882e;
    margin-top: 30px;
    padding-top: 25px;
    position: relative;
}
p.about_qute::before {
    position: absolute;
    content: "";
    left: 0;
    width: 50px;
    height: 1px;
    background-color: #007678;
    top: -1px;
    -webkit-animation: moveLeftBounces-two 15s linear infinite;
    animation: moveLeftBounces-two 15s linear infinite;
}
@keyframes moveLeftBounces-two {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    50% {
        -webkit-transform: translateX(530px);
        transform: translateX(530px);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

/* section title home five  */
.section_title.home_five h4 {
    position: relative;
    z-index: 1;
    display: inline-block;
}
.section_title.home_five h4:before {
    position: absolute;
    content: "";
    right: -59px;
    top: 7px;
    height: 4px;
    width: 50px;
    background: url(../images/home-five/sub_title-shpe.png);
    background-repeat: no-repeat;
    display: inline-block;
}

/* ========================================================
    <-- Start Consalt  Service Area Style Five -->
===========================================================*/

section.service_area.styel_five {
    background: url(../images/home-five/service_bg.png);
    padding: 238px 0 90px 0;
    top: 0;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    margin-top: -23px;
}
section.service_area.styel_five .section_title.text-center {
    margin-bottom: 153px;
}
.service_single_item.style_five {
    display: block;
    transition: .5s;
    margin-bottom: 30px;
}
.service_single_item.style_five:hover {
    transform: translateY(-30px);
}
.service_icons {
    position: absolute;
    right: 0;
    left: 0;
    top: -11%;
    text-align: center;
    transition: .5s;
    width: 90px;
    height: 83px;
    line-height: 90px;
    border-radius: 50%;
    background: #e9eaec;
    margin: auto;
}
.service_icon2 {
    width: 72px;
    height: 72px;
    border-radius: 36px;
    background-color: #ffffff;
    line-height: 72px;
    text-align: center;
    margin-left: 9px;
    transition: .5s;
}
.service_single_item.style_five:hover .service_icon2 img {
    filter: brightness(0) invert(1);
}
.service_single_item.style_five:hover .service_icon2 {
    background: #28963d;
}
.service_single_item.style_five .service_content {
    background: #fff;
    padding: 72px 20px 29px;
    border-radius: 15px;
    text-align: center;
}
.service_single_item.style_five .service_content h3 {
    color: #203535;
    font-size: 20px;
    margin: 0 0 32px;
    position: relative;
    display: inline-block;
    transition: .5s;
}
.service_single_item.style_five .service_content h3:hover {
    color: #006E6D;
}
.service_single_item.style_five .service_content h3:before {
    position: absolute;
    content: "";
    left: -26%;
    bottom: -5px;
    width: 20px;
    border-bottom: 2px solid #203535;
    border-left: 2px solid #203535;
    height: 20px;
    border-radius: 0 0 0 5px;
    transition: .5s;
}
.service_single_item.style_five .service_content h3::after {
    position: absolute;
    content: "";
    right: -26%;
    top: -5px;
    width: 20px;
    border-top: 2px solid #203535;
    border-right: 2px solid #203535;
    height: 20px;
    border-radius: 0 5px 0 0;
    transition: .5s;
}
.service_single_item.style_five .service_content h3:hover:before {
    border-bottom: 2px solid #28963d;
    border-left: 2px solid #28963d;
} 
.service_single_item.style_five .service_content h3:hover:after {
    border-top: 2px solid #28963d;
    border-right: 2px solid #28963d;
} 
.service_single_item.style_five .service_content:before {
    display: none !important;
}
.service_btns {
    margin-top: 37px;
}
.service_btns a {
    display: inline-block;
    background: #F1F9F9;
    padding: 7px 20px;
    font-size: 16px;
    color: #28963d;
    font-weight: 500;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.service_btns span {
    position: absolute;
    z-index: -1;
    width: 0;
    height: 0;
    display: block;
    border-radius: 30px;
    background-color: #063232;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
}
.service_btns a:hover, .service_btns a:focus {
	color: #ffff;
}
.service_btns a:hover span, .service_btns a:focus span {
	width: 300%;
	height: 500px;
}
.servoce_shape {
    transition: .5s;
    position: absolute;
    bottom: 0px;
    left: 0px;
    opacity: 0;
}
.service_single_item.style_five:hover .servoce_shape {
    bottom: -40px;
    opacity: 1;
}

/* ========================================================
    <-- Start Consalt  Counter Area Style Sixs -->
===========================================================*/

section.counter_area.style_sixs {
    background: #002E30;
    border-radius: 0;
    padding: 67px 0 53px;
}
section.counter_area.style_sixs .counter_upper {
    border-bottom: 1px solid rgba(12,110,109,0.4);
    margin-bottom: 39px;
}
section.counter_area.style_sixs .consalt_btn a {
    color: #0D4847;
    background-color: #DFF1DF;
}
section.counter_area.style_sixs .consalt_btn a:before {
    background-color: #0D4847;
}
.counter-single-item.style_sixs {
    display: flex;
    align-items: center;
}
.counter-single-item.style_sixs .counter-content {
    display: inline-block;
    background: #003939;
    padding: 16px 84px 33px;
    margin-left: -25px;
    width: 85%;
}
.counter-single-item.style_sixs .counter_icon {
    width: 90px;
    height: 90px;
    border-radius: 5px;
    background-color: #0d4847;
    text-align: center;
    line-height: 90px;
    z-index: 2;
}
.counter-single-item.style_sixs .counter-_number h1 {
    font-size: 55px;
    color: #e4f1df;
    font-weight: 600;
}
.counter-single-item.style_sixs .counter-_number span {
    font-size: 55px;
    color: #e4f1df;
    font-weight: 600;
}
.counter-single-item.style_sixs .counter_title {
    margin-left: 0;
}
.counter-single-item.style_sixs .counter_title:before {
    display: none;
}
.counter-single-item.style_sixs .counter_title h5 {
    font-size: 16px;
    color: #bdd3d3;
    font-weight: 400;
    text-transform: capitalize;
}

/* ========================================================
    <-- Start Consalt  Case Study Area Style Three -->
===========================================================*/

section.case-study-area.style_three {
    background: #E9EBED;
    padding: 105px 0 0;
}
.case-study-single-box.style_two .case-study-thumb {
    height: 400px;
    border-radius: 10px 10px 0 0;
}
.case-study-single-box.style_two .case-study-thumb img {
    border-radius: 0;
}
.case-study-single-box.style_two:hover .single_portfolio_icon {
    opacity: 1;
    top: 38%;
}

/* ========================================================
    <-- Start Consalt  Call Area Style Four -->
===========================================================*/

section.call_area.style_four {
    background: #002E30;
}
section.call_area.style_four .call-do-action-info {
    border-left: 1px solid #226C6B;
    border-right: 1px solid #226C6B;
    padding: 0 88px 0;
}
section.call_area.style_four .call-do-social_icon {
    margin-right: 20px;
}
section.call_area.style_four .call_info p {
    margin: 0 0 5px;
    font-size: 16px;
    line-height: 26px;
    color: #bdd3d3;
    font-weight: 400;
}
section.call_area.style_four .call_info h3 {
    margin: 0;
}

/* ========================================================
    <-- Start Consalt  Testimonal Style Five -->
===========================================================*/

section.testimonial_area.style_five {
    background: url(../images/home-five/testi_bg.png);
    border-radius: 0;
    padding: 120px 0 254px 291px;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
}
.testimonial_item.style_five {
    background: transparent;
    padding: 0;
}
.testimonial_item.style_five .testimonial-content {
    background: #fff;
    padding: 40px 2px 71px 30px;
    position: relative;
    border-radius: 10px;
}

.testimonial_item.style_five .testimonial-content p {
    font-size: 16px;
    line-height: 26px;
    color: #6b7a7a;
    font-weight: 400;
}
.testimonial_item.style_five .testimonial-content:before {
    content: "";
    position: absolute;
    right: 12%;
    top: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-top: 20px solid #fff;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    transition: .5s;
}
.testimonial_item.style_five:hover .testimonial-content:before {
    border-top: 20px solid #0D6E6C;
}
.testimonial_item.style_five .testimonial-content::after {
    position: absolute;
    content: "";
    right: 22px;
    background: url(../images/home-five/arrow.png);
    height: 50px;
    width: 62px;
    background-repeat: no-repeat;
}
.testimonial_item.style_five .testi-star {
    background-color: #0D6E6C;
    display: inline-block;
    padding: 12px 95px  10px 40px;
    position: absolute;
    clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);
    border-radius: 0 0 0 10px;
    bottom: 0;
    left: 0;
}
.testimonial_item.style_five .testi-star i {
    font-size: 14px;
    color: #E1F2E1;
    margin: 0;
}
.testimonial_item.style_five .tesit-auothor {
    margin-top: 35px;
    margin-left: 30px;
}
.testimonial_item.style_five .tesit-auothor .bio h4.name {
    margin: 0;
    font-size: 20px;
    color: #063232;
    font-weight: 500;
}
.testimonial_item.style_five .tesit-auothor .bio h5.designation {
    font-size: 16px;
    color: #6b7a7a;
    font-weight: 400;
}
section.testimonial_area.style_five .section_title p {
    width: 85%;
}
.consalt_btn.home_five {
    text-align: left;
}
.consalt_btn.home_five a:hover:before {
    width: 129px;
}
section.blog_area.style_five {
    background: #fff;
    padding: 0 0 0;
    margin-top: -32px;
}
section.blog_area.style_five .single-blog-box {
    margin-bottom: 30px;
    filter: drop-shadow(0px 10px 40px rgba(168,185,184,0.25));
    padding: 30px 30px 0;
    background: #fff;
    border-radius: 10px;
}
section.contact_form {
    padding-top: 90px;
}
.row.form_bg {
    background: #e9eaec;
    margin: 0;
    padding: 28px 70px 32px;
    border-radius: 20px;
}
.form_content h3 {
    font-size: 30px;
    color: #203535;
    font-weight: 600;
}
.form_content h5 {
    font-size: 14px;
    letter-spacing: 1px;
    color: #203535;
    font-weight: 500;
    margin: 25px 0 24px;
}
section.contact_form .consalt_btn.home_five {
    text-align: right;
}
section.contact_form .consalt_btn a:before {
    display: none;
}
section.footer_area.style_five {
    background: url(../images/home-five/footer_bg.png);
    border-radius: 0;
    padding: 245px 0 27px 0;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -15px;
}

/* ========================================================
    <-- Start Consalt  Home Page Six -->
===========================================================*/

/* Header area style six */

.consalt-header-area.style_sixs {
    padding: 4px 20px 4px 60px;
    position: relative;
    width: calc(100% - 40px);
    margin: 20px 20px 0;
    left: 0;
    background: #E9EBEC;
    border-radius: 20px 20px 0 0;
}
.consalt-header-area.style_sixs  .nav-btn.navSidebar-button {
    top: 6px;
    margin: 0 23px 0 0;
}
.consalt-header-area.style_sixs  .header-search-button.search-box-outer {
    padding: 0px 20px 0 0;
    border-right: 1px solid #00171c5c;
    margin-right: 20px;
}
.consalt-header-area.style_sixs .nav-btn span i {
    color: #00171C;
    width: inherit;
    height: inherit;
    border-radius: 4px;
    background-color: transparent;
    line-height: inherit;
}
.consalt-header-area.style_sixs .header-button.style_two a {
    background: #28963d;
    padding: 11px 42px;
    border-radius: 5px;
    border: 1px solid transparent;
}
.sticky.consalt-header-area.style_sixs {
    margin: 0;
    width: 100%;
    border-radius: 0;
}
/* ===============================
   Start Slider Area Style Sixs
==================================*/
section.hero_slider.style_sixs {
    background: url(../images/home-six/hero_bg.png);
    background-size: cover;
    background-position: center center;
    z-index: 0;
    border-radius: 0 0 20px 20px;
    margin: 0 20px 20px 20px;
    overflow: hidden;
}
.main_hero {
    height: 830px;
}
.main_hero .hero_btn a {
    border-radius: 5px;
}
/* Hero Slider Common Style */

.hero_slide_content h1 {
    font-size: 56px;
    line-height: 70px;
    color: #ffffff;
    font-weight: 600;
    opacity: 0;
    z-index: 3;
    position: relative;
    transform: translateY(-150px);
}
.hero_slide_content p {
    color: #a3b7b7;
    width: 85%;
    margin: 18px 0 33px;
}

.hero_slide_content>* {
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
}

.hero_slide_content>*:nth-child(1) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.hero_slide_content>*:nth-child(2) {
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
}

.hero_slide_content>*:nth-child(3) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
}

.hero_slide_content>*:nth-child(4) {
    -webkit-transition-delay: 1.4s;
    transition-delay: 1.4s;
}
.hero-thumbs {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
}
.hero-thumbs .video-icon {
    position: absolute;
    left: 1%;
    top: 0%;
}
.hero-thumbs .video-icon a {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #28963d;
    line-height: 120px;
    font-size: 18px;
    font-style: italic;
    -webkit-animation: ripple-white 1s linear infinite;
    animation: ripple-blue 1s linear infinite;
} 
@-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)
    }
}

/* Active Slide Animation */
.swiper-slide-active .hero_slide_content>* {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
}

.swiper-slide-active .hero-thumbs {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
}
.banner_list {
    margin-top: 35px;
}
.banner_list ul li {
    display: inline-block;
    font-size: 16px;
    line-height: 28px;
    color: #ffffffde;
}
.banner_list ul li i {
    color: #28963d;
    background-color: #fff;
    font-size: 18px;
    padding: 1px 4px;
    margin-right: 10px;
}
.banner_list ul li span {
    margin-right: 12px;
}

/* Swiper Pagination */
.slider-dotss .swiper-pagination-bullet {
    display: inline-block;
    border-radius: 50%;
    opacity: 1;
    margin: 0px 6px;
    transition: 0.3s;
    margin-bottom: 13px;
    width: 12px;
    height: 12px;
    background: #D1DFDF;
    position: relative;
}
section.hero_slider.style_sixs .swiper-pagination-bullet-active {
    background: #078588!important;
    height: 14px;
    width: 14px;
}
.slider-dotss .swiper-pagination-bullet:after {
    position: absolute;
    content: "";
    left: -3px;
    top: -3px;
    border: 1px dashed #078588;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    transform: scale(0);
    transition: .5s;
}
.slider-dotss .swiper-pagination-bullet-active.swiper-pagination-bullet:after {
    transform: scale(1);
}
.slider-dotss {
    position: absolute;
    bottom: -13px;
    z-index: 1;
    right: 0;
    left: 0;
    text-align: center;
}

/* ====================================================
<-- Start Consalt Feature Area Style Five  Area -->
========================================================*/

.feature_item.style_five {
    overflow: hidden;
}
.feature_item.style_five::before {
    background: url(../images/home-six/feature_img.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.feature_item.style_five:after {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    background: url(../images/home-six/feature_shape.png);
    height: 101px;
    width: 106px;
    display: block;
    opacity: 1;
    left: inherit;
}

/* ====================================================
<-- Start Consalt About Area Style six  Area -->
========================================================*/

section.about_area.style_sixs {
    background: #E9EBED;
    padding: 120px 0 120px;
}
.section_title.home_six h4 {
    padding: 0 10px;
}
.section_title.home_six h4:before {
    position: absolute;
    content: "";
    right: inherit;
    top: 0;
    width: 100%;
    background: transparent;
    background-repeat: no-repeat;
    display: inline-block;
    border-left: 1px solid #006E6D;
    height: 25px;
    border-bottom: 1px solid #006E6D;
    border-radius: 0 0 0 5px;
    left: 0;
}
.about_experience {
    position: absolute;
    top: 10%;
    left: -32px;
}
.about_experience_content h3 {
    font-size: 22px;
    color: #fff;
    font-weight: 400;
    background: #006E6D;
    display: inline-block;
    padding: 22px 30px;
    border-radius: 10px 10px 10px 0;
    position: relative;
}
.about_experience_content:before {
    content: "";
    position: absolute;
    left: 21px;
    top: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-top: 45px solid #003032;
    border-left: 40px solid transparent;
    transition: .5s;
}
.about_client {
    position: absolute;
    bottom: 1%;
    right: 16%;
    background: #fff;
    padding: 16px 42px 16px;
    border-radius: 20px;
}
.about_client h4 {
    color: #006E6D;
    font-size: 50px;
    font-weight: 500;
    margin-bottom: 5px;
}
.about_reviews {
    background: #F3F5F4;
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right: 38px;
    padding: 40px 35px 30px;
    border-radius: 10px;
    text-align: center;
}
.about_right {
    position: relative;
}
.about_list.style_sixs img {
    margin-right: 10px;
}
.review_title p {
    color: #282828;
    margin: 15px 0 0;
}
.review_title h4 {
    color: #282828;
    font-size: 30px;
    font-weight: 500;
}
.review_client a i {
    display: inline-block;
    height: 35px;
    width: 35px;
    background: #C4E0E1;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-left: -35px;
}
.about_btn {
    margin-right: 30px;
}
section.about_area.style_sixs .about_button {
    margin-top: 37px;
}

/* ====================================================
<-- Start Consalt Pricing Area Style Five  Area -->
========================================================*/
section.pricing_area.style_three {
    padding: 105px 0 70px;
}
.pricing-single-item {
    padding: 35px 0 16px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
    position: relative;
    background: #006E6D;
    border-radius: 10px;
    margin-bottom: 30px;
}
.pricing-single-item .pricing-title {
    position: absolute;
    top: 0;
    text-align: center;
    margin: auto;
    left: 0;
    right: 0;
}
.pricing-single-item .pricing-title h3 {
    font-size: 24px;
    color: #ffff;
    font-weight: 500;
    margin: 0;
    background: #007F7D;
    display: inline-block;
    padding: 11px 45px;
    border-radius: 0 0 10px 10px;
}
.pricing-single-item:before {
    position: absolute;
    content: "";
    bottom: 0;
    right: 0;
    height: 42%;
    width: 100%;
    background: #002E2D;
    transition: .5s;
    border-radius: 10px;
    animation: none;
}
.pricing-single-item:hover:before {
    height: 100%;
}
.pricing-single-item:after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    height: 0%;
    width: 100%;
    background: #006E6D;
    transition: .5s;
    border-radius: 10px;
}
.pricing-single-item:hover:after{
    height: 42%;
}
.pricing-single-item .pricing-item-text {
    position: relative;
    margin: 60px 0 30px;
    z-index: 1;
}
.pricing-single-item .pricing-item-text span.tk {
    font-size: 50px;
    color: #fff;
    margin-left: 0;
}
.pricing-single-item .pricing-item-text span.month {
    transition: .5s;
    display: block;
    font-size: 18px;
    color: #fff;
}
.pricing-single-item .pricing-feature {
    text-align: left;
    background: #fff;
    width: 90%;
    border-radius: 0 10px 10px;
    padding: 35px 0 20px 60px;
    position: relative;
    z-index: 1;
}
.pricing-single-item .pricing-feature ul li {
    margin-bottom: 0;
    color: #001d21;
    position: relative;
    border: none;
    z-index: 1;
}
li.list_line {
    text-decoration: line-through;
}
.pricing-single-item:hover .pricing-feature ul li {
    border: none;
    color: inherit;
}
.pricing-single-item .pricing-feature ul li:before {
    position: absolute;
    content: "";
    left: -23px;
    top: 8px;
    height: 8px;
    width: 8px;
    background: #006D6A;
    border-radius: 50%;
}
.pricing-single-item .pricing-feature ul li:after {
    position: absolute;
    content: "";
    left: -27px;
    top: 4px;
    height: 16px;
    width: 16px;
    background: #D6EAEB;
    border-radius: 50%;
    z-index: -1;
}
.pricing-single-item .consalt_btn.style_two {
    text-align: center;
    margin-top: 30px;
}
.pricing-single-item .consalt_btn.style_two a {
    border-radius: 5px;
    background: #006E6D;
    color: #fff;
    padding: 8px 40px;
}
.pricing-single-item:hover .consalt_btn.style_two a {
    border-radius: 10px;
    background: #fff;
    color: #006E6D;
}
.pricing-single-item .consalt_btn.style_two a:hover {
    color: #ffff;
}

/* === Tab === */

.tab {
    position: relative;
    -webkit-font-smoothing: antialiased;
    text-align: right;
}
.tabs {
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin: 0;
    background: #E9EBED;
    padding: 8px 11px;
    border-radius: 5px;
    margin-bottom: 0;
    top: -73px;
    text-align: right;
}
.tabs li {
    float: left;
    overflow: hidden;
    padding: 0;
    position: relative;
}
.tabs li a {
    outline: none;
    padding: 5px 20px;
    transition: all 0.2s ease-in-out;
    font-size: 16px;
    color: #006E6D;
    font-weight: 600;
    display: inline-block;
    border-radius: 5px;
}
.tabs_item {
    display: none;
    padding: 8px 0 0;
}
.tabs_item:first-child {
    display: block;
}
li.current a {
    background: #006E6D !important;
    color: #fff;
}

/* ====================================================
<-- Start Consalt Team Area Style Five  Area -->
========================================================*/

section.team_area.style_five {
    background: #002E2D;
    border-radius: 20px;
}
h5.team_des {
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    border-top: 1px solid #0381808c;
    padding-top: 36px;
    margin-top: 44px;
}
a.team_join {
    display: inline-block;
    color: #038180;
    font-size: 17px;
    text-decoration: underline;
    margin-top: 6px;
}
.single-team_item.style_five {
    border: none;
    text-align: center;
    padding: 10px 10px 10px;
    border-radius: 5px;
    transition: .5s;
    background: #003434;
}
.single-team_item.style_four:hover {
    border: none;
}
.single-team_item.style_five .team_thumb img {
    width: 100%;
}
.single-team_item.style_five .team-social-four ul li {
    display: inline-block;
    margin: 0 3px 0;
}
.single-team_item.style_five .team-social-four ul li a {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    height: 30px;
    width: 30px;
    line-height: 30px;
    border: 1px solid #00716D;
    border-radius: 50%;
}
.single-team_item.style_five .team-social-four ul li a:hover {
    background: #00716D;
}
.single-team_item.style_five .team-social-four {
    margin: 14px 0 13px !important;
    opacity: inherit;
    transition: .5s;
}
.single-team_item.style_five:hover .team-social-four {
    margin: inherit;
    opacity: inherit;
}
.team_shpe_arrow {
    position: absolute;
    bottom: 14%;
    left: 5%;
}
section.team_area.style_five .consalt_btn a {
    border-radius: 10px;
    padding: 14px 30px;
}
section.team_area.style_five .consalt_btn a:before {
    left: 29px;
}
section.team_area.style_five a:hover:before {
    width: 148px;
}
section.team_area.style_five.section_title p {
    width: 76%;
    margin: 28px 0 45px;
    color: #ffffffc4;
}


/* ====================================================
<-- Start Consalt Case Study Area Style Four  Area -->
========================================================*/

section.case-study-area.style_four {
    background: #fff;
    padding: 85px 0 40px;
}
.case-study-single-box.style_three .case-study-thumb {
    height: inherit;
    background: transparent;
}
.case-study-single-box.style_three .case-study-thumb::before{
    display: none;
}
.case-study-single-box.style_three .case-study-thumb:hover {
    padding: 0;
}
.case-study-single-box.style_three .case-study-content {
    width: inherit;
    background: transparent;
    padding: 30px 68px 10px;
    position: absolute;
    bottom: 0;
    z-index: 1;
    transition: .5s;
    opacity: 0;
}
.case-study-single-box.style_three:hover .case-study-content {
    bottom: 33px;
    opacity: 1;
}
.case-study-single-box.style_three .case-study-thumb::after {
    background: url(../images/home-six/case_shape.png);
    position: absolute;
    content: "";
    left: 50%;
    height: 100%;
    width: 0%;
    opacity: 0;
    transition: .5s;
}
.case-study-single-box.style_three .case-study-thumb:hover:after{
    left: 0;
    width: 100%;
    opacity: 0.7;
}
.case-study-single-box.style_three .case-study-content p {
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    position: relative;
}
.case-study-single-box.style_three .case-study-content p:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: -14px;
    width: 50px;
    height: 2px;
    background: #fff;
}
.case-study-single-box.style_three  .case-study-content h3 {
    font-size: 30px;
    color: #ffffff;
    font-weight: 600;
    margin: 33px 0 22px;
}
.case-study-single-box.style_three .case-study-content a {
    display: inline-block;
    font-weight: 600;
}
.case-study-single-box.style_three .consalt_btn a {
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 11px 30px;
}
.case-study-single-box.style_three .consalt_btn a i {
    font-weight: 600;
    font-size: 11px;
    transform: rotate(-45deg);
    display: inline-block;
}
.case-study-single-box.style_three .consalt_btn a:before {
    left: 31px;
    bottom: 15px;
}
.case-study-single-box.style_three a:hover:before {
    width: 105px;
}

/* ====================================================
<-- Start Consalt Blog Area Style Six  Area -->
========================================================*/

section.blog_area.style_sixs {
    background: url(../images/home-six/blog_bg.png);
    padding: 105px 0 120px;
    margin-top: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
section.blog_area.style_sixs .single-blog-box {
    margin-bottom: 0;
}
section.blog_area.style_sixs .blog-content {
    padding: 35px 13px 20px 0;
}
section.blog_area.style_sixs .meta-blog p span {
    border-radius: 5px;
}
.blog_list2 .owl-dots {
    position: absolute;
    bottom: -27%;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}
.blog_list2 .owl-dot {
    display: inline-block;
    margin-left: 10px;
    width: 25px;
    height: 8px;
    background: #E9EBED !important;
    border-radius: 20px;
}

.blog_list2 .owl-dot.active {
    background: #00716D !important;
    width: 25px;
    border-radius: 20px;
}
.footer_area.style_sixs {
    margin-top: 120px;
}

/* ====================================================
<-- Start Consalt Inner page Breadcumb Area -->
========================================================*/

.consalt-header-area.inner_page {
    background: #F4F8F9;
    padding: 8px 56px 8px;
}
.consalt-header-area.inner_page .header-button.style_two a {
    background: #28963d;
    padding: 15px 35px;
    border: 1px solid transparent;
    border-radius: 30px;
}
.consalt-header-area.inner_page .nav-btn span i {
    color: #28963d;
    width: inherit;
    height: inherit;
    border-radius: 0;
    background-color: transparent;
    line-height: inherit;
}
.sticky.consalt-header-area.inner_page .header-button.style_two a {
    border: 1px solid #fff;
}
.sticky.consalt-header-area.inner_page .nav-btn span i {
    color: #fff;
}

.breadcumb-area {
    background: url(../images/inner-img/breadcrumb_bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    padding: 182px 0 202px;
    position: relative;
}

.breadcumb-area.style_two {
    background: url(../images/inner-img/breadcumb2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    padding: 172px 0 192px;
    position: relative;
}
.breadcumb-area:before {
    position: absolute;
    content: "'";
    left: 0;
    top: 0;
    width: 100%;
    height: 400px;
    background: #F4F8F9;
    z-index: -1;
}

.breadcumb-title h4 {
    padding-bottom: 20px;
    font-size: 48px;
    color: #ffffff;
    font-weight: 600;
    position: relative;
    z-index: 1;
    display: inline-block;
}
.breadcumb-title h4:before {
    position: absolute;
    z-index: -1;
    content: "";
    left: 0;
    bottom: 11px;
    height: 12px;
    width: 66%;
    background: url(../images/inner-img/line_shape.png);
    background-repeat: no-repeat;
    margin: auto;
    text-align: center;
    right: 0;
}
.breadcumb-content.style_two span.category {
    background-color: #28963d;
    display: inline-block;
    font-size: 14px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 500;
    text-align: center;
    border-radius: 0 30px 30px 0;
    padding: 3px 18px;
    margin-bottom: 12px;
}
.breadcumb_meta-blog p span {
    font-size: 16px;
    line-height: 28px;
    color: #ffffff;
    font-weight: 500;
    margin-right: 31px;
    position: relative;
}
.breadcumb_meta-blog p span:before {
    position: absolute;
    content: "";
    left: -21px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #28963d;
}
.breadcumb-content ul li {
    display: inline-block;
    margin-right: 0;
    color: #fff;
}

.breadcumb-content ul li a {
    display: inline-block;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    position: relative;
}
.breadcumb-content ul li a i {
    margin-right: 4px;
}
.breadcumb-content ul li.rotates i {
    transform: rotate(-27deg);
    margin-right: 2px;
    display: inline-block;
    font-size: 14px;
}

/* =================================
   Start Inner Page Marquee Area
==================================== */

.marquee_area.inner_page {
    margin: 0;
}
.marquee_area.style_two.inner_page:before {
    display: none;
}
 

/* =================================
   Start Inner Page Team Area
==================================== */

.single-team_item.style_three .team_thumb {
    position: relative;
    z-index: 1;
}
.single-team_item.style_three .team-content {
    text-align: center;
    padding: 9px 0 0;
    margin: 0 35px 0 0;
}
.single-team_item.style_three .team-social-icon {
    position: absolute;
    top: 86%;
    left: 45%;
    transition: .5s;
    z-index: 1;
    margin: auto;
    text-align: center;
    transform: translate(-50%);
}
.single-team_item.style_three .team-social-icon ul li {
    display: inline-block;
}
.single-team_item.style_three .team-social-icon ul li a {
    height: 40px;
    width: 40px;
    line-height: 40px;
}
.single-team_item.style_three:hover .team-social-icon ul li a {
    transform: translateY(0px);
    opacity: 1;
    overflow: hidden;
    visibility: visible;
}
.team-social-icon ul li:nth-child(4) a {
    transition-delay: 0.5s;
}

/* =================================
   Start Inner Page Pricing Area
==================================== */

section.pricing-area.style_two.inner_page {
    padding: 105px 0 90px;
    margin-top: 0;
}
section.pricing-area.inner_page .pricing-single-items .pricing_icon {
    background: #e0f1df;
}
section.pricing-area.inner_page .pricing-single-items:hover .pricing_icon {
    background: #129695;
}

/* =================================
   Start Inner Page Faq Area
==================================== */
section.faq_area {
    background: #fff;
    padding: 105px 0 100px;
}

.tab_container {
    margin: 0 219px 0;
}
/*accordion*/
.accordion li {
    list-style: none;
    padding: 2px 0px 15px;
}
.accordion li a {
    position: relative;
    width: 100%;
    display: block;
    cursor: pointer;
    background: #f4f8f9;
    border: 0;
    padding: 25px 40px 25px;
    border-radius: 5px;
    z-index: 1;
    font-size: 22px;
    line-height: 24px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    color: #063232 !important;
}
.accordion li a:before {
    position: absolute;
    content: "";
    left: 4%;
    bottom: 0;
    height: 2px;
    width: 0%;
    background-color: rgba(12,110,109,0.10196078431372549);
    transition: .5s;
}
.accordion li a.active:before {
 width: 91%;

}
.accordion li p {
    display: none;
    font-size: 16px;
    color: #6b7a7a;
    padding: 24px 42px 33px 40px;
    margin: 0;
    filter: drop-shadow(0px 10px 40px rgba(12,110,109,0.1)) !important;
    background: #fff;
}
a.active {
    color: #063232 !important;
    background: #fff !important;
    filter: drop-shadow(0px 10px 100px rgba(12,110,109,0.1)) !important;
}
.accordion li a span {
    position: relative;
    z-index: 1;
}
.accordion li a i {
    font-size: 15px;
    color: #063232;
    transform: rotate(0deg);
}
.accordion li a.active i {
    transform: rotate(90deg);
}
.accordion li.ctive {
    background: #28963d !important;
}
/* ==========================================
   Start Inner Page Portfolio Area
============================================== */
.case-study-area {
    padding: 105px 0 77px;
}
.portfolio_menu ul {
    text-align: center;
    list-style: none;
    margin-bottom: 50px;
}
.portfolio_nav ul li {
    transition: all 0.5s ease 0s;
    cursor: pointer;
    padding: 5px 30px;
    display: inline-block;
    margin-left: 6px;
    position: relative;
    z-index: 1;
    font-size: 16px;
    line-height: 32px;
    color: #063232;
    font-weight: 500;
    background: #F3F8F8;
    border-radius: 30px;
}

.portfolio_nav ul li:hover {
    color: #fff;
}
.portfolio_menu ul li a {
    display: block;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    transition: .5s;
}
.portfolio_nav ul li:hover, .portfolio_nav ul li.current_menu_item {
    color: #fff;
    background: #28963d;
}

.portfilo_main_box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.portfolio_item {
    margin-bottom: 40px;
}
.portfolio_thumb img {
    width: 100%;
}
.portfolio_content {
    display: flex;
    padding: 27px 20px 30px;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: 2px solid rgba(12,110,109,0.10196078431372549);
}
.portfolio_content:before {
    position: absolute;
    left: 50%;
    bottom: 0;
    content: "";
    height: 2px;
    background: #063232;
    width: 0%;
    transition: .5s;
}
.portfolio_item:hover .portfolio_content::before {
    width: 100%;
    left: 0%;
}
.prot-text h3 a {
    font-size: 34px;
    color: #063232;
    font-weight: 600;
    display: inline-block;
}
.prot-text span {
    font-size: 16px;
    color: #28963d;
    font-weight: 500;
    padding-left: 40px;
    margin-bottom: 3px;
    display: inline-block;
    position: relative;
}
.prot-text span:before {
    position: absolute;
    content: "";
    left: 0;
    top: 11px;
    height: 2px;
    width: 30px;
    background: #28963d;
}
.port_right a {
    width: 65px;
    height: 65px;
    line-height: 65px;
    border-radius: 32px;
    background-color: rgba(12,110,109,0.10196078431372549);
    display: inline-block;
    text-align: center;
    font-size: 30px;
    color: #28963d;
    transform: rotate(-45deg);
}

/* ==============================================
   Start Inner Page Portfolio Details
================================================= */
section.portfolio_details {
    padding: 0 0 120px;
}
.port_main {
    background: #ffff;
    margin-top: -60px;
    position: relative;
    padding: 42px 0 0 50px;
    border-radius: 20px;
}
.port_details_content {
    border-bottom: 1px solid rgba(6,50,50,0.10196078431372549);
    padding-bottom: 19px;
}
.port_details_content.style_two {
    border: 0;
}
.port_details_content.three {
    margin: 32px 0 17px;
}
.port_details_content h2 {
    font-size: 42px;
    color: #063232;
    font-weight: 600;
}
p.quote {
    margin: 20px 153px 25px 0;
}
p.port_text {
    font-size: 20px;
    line-height: 30px;
    color: #063232;
    font-weight: 500;
    padding-left: 80px;
    width: 69%;
    position: relative;
}
p.port_text:before {
    position: absolute;
    content: "";
    left: 0;
    top: 10px;
    width: 68px;
    height: 2px;
    background-color: #28963d;
}
.port_details_thumb img {
    width: 100%;
}

/* sidebar box */
.sidebar_box.style_two {
    background: #f4f8f9;
    padding: 35px 40px 33px;
}
.sidebar_icon_box {
    border-top: 1px dashed rgb(6 50 50 / 30%);
    padding-top: 18px;
    margin-top: 18px;
}
.sidebar_icon_box:nth-child(5) {
    border-bottom: 1px dashed rgb(6 50 50 / 30%);
    padding-bottom: 18px;
}
.sidebar_icon {
    float: left;
    margin-right: 15px;
    position: relative;
    top: 3px;
}
.sidebar_icon i {
    color: #28963d;
    font-size: 20px;
}
.sidebar_text {
    overflow: hidden;
}
.sidebar_text h5 {
    font-size: 16px;
    color: #063232;
    font-weight: 500;
    margin: 6px 0 0;
}
.sidebar_box.style_two .consalt_btn.sidebar_style {
    margin-top: 30px;
}
.consalt_btn.sidebar_style a {
    padding: 15px 40px;
    border: 1px solid #42ba3d;
}

/* pagination container */

.pagination_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(6,50,50,0.10196078431372549);
    border-bottom: 1px solid rgba(6,50,50,0.10196078431372549);
    padding: 30px 0 30px;
}
.pagination_container .call_social_icon ul li a {
    color: #28963d;
    width: 40px;
    height: 40px;
    background-color: #eef4f6;
    line-height: 40px;
}
.pagination_container .call_social_icon ul li a:hover {
    background: #28963d;
    color: #fff;
}
.pagination_btn a {
    display: inline-block;
    font-size: 18px;
    color: #063232;
    font-weight: 500;
}
.pagination_btn a img {
    margin-right: 10px;
}
.pagination_btn.style_right a img {
    margin-right: 0;
    margin-left: 10px;
}
/* ==============================================
   Start Inner Page Blog Area Inner Page
================================================= */

section.blog_area.inner_page {
    padding: 105px 0 90px;
}
section.blog_area.inner_page .single-blog-box {
    margin-bottom: 30px;
}
section.blog_area.inner_page.two {
    background: #f4f8f9;
}
section.blog_area.inner_page.two .blog-content {
    filter: drop-shadow(0px 10px 40px rgba(162,186,186,0.25));
}

/* ==============================================
   Start Inner Page Blog Details Inner Page
================================================= */
.port_main.style_two {
    padding: 42px 27px 0 100px;
}
.pagination_container.style_two {
    border: 0;
    padding: 25px 0 50px;
}
.style_two p.quote {
    margin: 31px 0 25px 0;
}
p.port_text.style_two {
    margin: 40px 0 15px;
}
ul.blog-category li {
    display: inline-block;
    margin-right: 10px;
}
ul.blog-category li a {
    padding: 8px 25px;
    display: inline-block;
    background: #f4f8f9;
    font-size: 14px;
    text-transform: uppercase;
    color: #6b7a7a;
    font-weight: 500;
    border-radius: 20px;
}

/* Comment CSS */

.blog-details-contents h3 {
    margin-bottom: 28px;
    font-size: 28px;
    color: #063232;
    font-weight: 500;
    margin-top: 90px;
}

.blog-details-comment {
    margin-bottom: 20px;
    position: relative;
    background: #F5F6F8;
    padding: 45px 253px 26px 40px;
    border-radius: 20px;
    filter: drop-shadow(0px 10px 30px rgba(178,191,191,0.2));
    background-color: #ffffff;
}

.blog-details-comment-thumb {
    float: left;
    margin-right: 25px;
}

.blog-details-comment-content {
    overflow: hidden;
}
.blog-details-comment-content h2 {
    font-size: 20px;
    color: #063232;
    font-weight: 500;
    margin-bottom: 10px;
    margin-top: 4px;
}
.blog-details-comment-content span {
    font-size: 15px;
    color: #6b7a7a;
    margin-bottom: 21px;
    display: inline-block;
}
.blog-details-comment-reply a {
    display: inline-block;
    font-size: 15px;
    line-height: 26px;
    color: #6b7a7a;
    font-weight: 500;
    text-transform: uppercase;
    position: absolute;
    top: 50px;
    right: 40px;
    border-radius: 20px;
    background-color: #f4f8f9;
    padding: 8px 25px;
}
.blog-details-comment-reply a i {
    margin-right: 10px;
}

.blog-details-comment.reply {
    margin-left: 80px;
}

/* commet form */
.comment-form {
    margin-top: 75px;
}
.comment-title {
    margin-bottom: 32px;
}
.comment-title h3 {
    margin-bottom: 12px;
    font-size: 28px;
    color: #063232;
    font-weight: 500;
}
#comment-msg-box {
    width: 100%;
    transition: .5s;
    border: 0;
    padding: 21px 25px;
    height: 194px;
    border-radius: 5px;
    background-color: #f4f8f9;
    margin-bottom: 20px;
}
#comment-msg-box::placeholder {
    font-size: 16px;
    color: #6b7a7a;
    font-weight: 400;
}
input.comment-box {
    border: 0;
    width: 100%;
    padding: 25px;
    height: 64px;
    border-radius: 5px;
    background-color: #f4f8f9;
    margin-bottom: 30px;
}
input.comment-box::placeholder {
    font-size: 16px;
    color: #6b7a7a;
    font-weight: 400;
}

.comment-box:focus, #comment-msg-box:focus {
    border-color: #318d8b;
    outline: 0;
    box-shadow: 0 0 6px #318d8b;
}

/*form button*/
.comment-form .submit-comment {
    border: 1px solid transparent;
    transition: .5s;
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
    height: 64px;
    border-radius: 5px;
    background-color: #28963d;
    width: 100%;
    text-transform: uppercase;
}
.comment-form .submit-comment:hover {
    background: #fff;
    border: 1px solid #28963d;
    color: #28963d;
}

/* =================================
   Start Inner Page Conatct Area
==================================== */
section.contact_area.inner_section {
    padding: 118px 0 120px;
}
.contact_main_info {
    background: #f4f8f9;
}
.contact_main_info {
    padding: 40px 40px 42px;
    background: #f4f8f9;
    border-radius: 20px;
}
.contact_main_info .call-do-action-info {
    justify-content: left;
    border-bottom: 1px dashed #28963d7d;
    padding-bottom: 25px;
    margin-bottom: 25px;
}
.contact_main_info .call-do-action-info:nth-child(3) {
    border: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
.contact_main_info .call-do-social_icon  i {
    height: 70px;
    width: 70px;
    line-height: 70px;
    border: 2px solid transparent;
    color: #fff;
    background: #fff;
    color: #28963d;
    transition: .5s;
}
.contact_main_info .call-do-action-info:hover .call-do-social_icon i {
    color: #fff;
    background: #28963d;
}
.contact_main_info .call_info p {
    color: #6b7a7a;
}
.contact_main_info .call_info h3 {
    color: #063232;
    font-weight: 500;
    margin: 7px 0 0;
}
.contact_main_info .call_info span {
    color: #063232;
    margin: 10px 0 0;
    display: inline-block;
}
.inner_section .contact-form-box.style_two {
    border-radius: 20px;
    padding: 64px 60px 64px;
    top: 0;
}
.inner_section .section_title p {
    margin: 28px 0 40px;
}
.inner_section .contact_shape2 {
    right: 12%;
    bottom: 3%;
}

/*--==============================================->
  <!--Start Feature area css-->
 ==================================================-*/

 section.feature_area.inner_page {
    background: #fff;
    padding: 105px 0 110px;
}
 .feature_item.style_two {
    background: #fff;
    border-radius: 10px;
    filter: drop-shadow(0px 5px 30px rgba(171,199,198,0.3));
    padding: 35px 25px 25px 35px;
    transition: .5s;
    border: 1px solid #fff;
    transition: .5s;
    transform: translateY(0px);
}
.feature_item.style_two:hover {
    transform: translateY(-10px);
}
.feature_item.style_two:hover {
    border: 1px solid #28963d;
}
.feature_item.style_two:before, .feature_item:after{
    display: none;
}
.feature_item.style_two .feature_content h3 {
    transition: .5s;
}
.feature_item.style_two .feature_content h3:hover {
    color: #28963d;
}
.feature_btn a {
    display: inline-block;
    color: #28963d;
    font-size: 24px;
    margin-top: 6px;
}

/*--==============================================->
  <!--Start Service Details css-->
 ==================================================-*/
 section.service_details {
    background: #f4f8f9;
    padding: 120px 0 246px;
}
.breadcumb-title.style_two h4:before {
    left: 37%;
    width: 100%;
}

.breadcumb-title.style_three h4:before {
    display: none;
}
.service_details_content {
    padding: 0 63px 0 0;
}
.service_details_content h2 {
    font-size: 42px;
    color: #063232;
    font-weight: 600;
}
p.details_decs1 {
    margin: 18px 23px 25px 0;
}
p.details_decs2 {
    margin: 0 17px 25px 0;
}
.service_details_item {
    padding: 0 4px 0 0;
    margin-bottom: 30px;
}
.service_detls_icon {
    width: 76px;
    height: 76px;
    border-radius: 38px;
    background-color: #e0f1df;
    line-height: 76px;
    text-align: center;
    float: left;
    margin-right: 20px;
}
.service_dtls_content h3 {
    font-size: 20px;
    color: #002c2a;
    font-weight: 500;
    margin-bottom: 15px;
}
/* sidebar box */
.sidebar_box {
    background: #fff;
    padding: 45px 50px 50px;
    border-radius: 20px;
}
h2.sidebar_title {
    font-size: 26px;
    color: #063232;
    font-weight: 500;
    margin-bottom: 12px;
}
.sidebar_box p {
    margin-bottom: 12px;
}
.sidebar-list ul li {
    font-size: 16px;
    line-height: 38px;
    color: #063232;
    font-weight: 400;
}
.sidebar-list ul li i {
    color: #28963d;
    font-size: 15px;
    margin-right: 15px;
}
.consalt_btn.sidebar_style {
    text-align: left;
}
/*--==============================================->
  <!--Start Counter Inner Page Area Css -->
 ==================================================-*/
section.counter_area.inner_page {
    margin-top: -162px;
    border-bottom: 0;
    border-top: 1px solid rgba(6,50,50,0.10196078431372549);
    border-radius: 0;
}
.inner_page .counter-single-item.style_two.second {
    background: #28963d;
}
.inner_page .counter-single-item.style_two.second .counter_title:before {
    display: none;
}
/*--==============================================->
  <!--Start Error area css-->
 ==================================================-*/
.error-area {
    background: url(../images/inner-img/440_bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    height: 760px;
}
.error-page-content {
    position: relative;
    z-index: 1;
}
.error-page-content:before {
    content: "";
    position: absolute;
    z-index: 1;
    height: 73%;
    width: 100%;
    background: url(../images/inner-img/error_img.png);
    background-repeat: no-repeat;
    background-size: contain;
    top: -22%;
    left: 38%;
    transform: rotate(-3deg);
}
h2.error-title {
    margin: 83px 0 13px;
    display: inline-block;
    font-size: 40px;
    color: #063232;
    font-weight: 600;
}

h1.error-text {
    color: #063131;
    font-size: 200px;
    font-weight: 800;
}

p.lead {
    color: #6b7a7a;
    font-size: 18px;
    font-weight: 400;
}
.error-info a {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    padding: 15px 37px;
    margin-top: 9px;
    display: inline-block;
    border-radius: 30px;
    background: #28963d;
}

.error-info a i {
    margin-right: 8px;
}
/* error shape */
.error_shape1 {
    position: absolute;
    top: -4%;
    left: 31%;
}
.error_shape2 {
    position: absolute;
    bottom: 36%;
    left: 61%;
}
.error_shape3 {
    position: absolute;
    top: -4%;
    left: 31%;
    z-index: -1;
}
.error_shape4 {
    position: absolute;
    top: -21%;
    left: 51%;
}

/* ================ All Animation CSS ===================*/

.rotate {
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    background-position: center center;
}
@keyframes rotateme {
from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}

.bounce-animate {
    animation-name: float-bob;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob;
    -ms-animation-duration: 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob;
    -o-animation-duration: 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}
.bounce-animate2 {
    animation-name: float-bob2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob2;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob2;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob2;
    -o-animation-duration: 3s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}
.bounce-animate3 {
    animation-name: float-bob3;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob3;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob3;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob3;
    -o-animation-duration: 3s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}

.bounce-animate4 {
    animation-name: float-bob4;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob4;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob4;
    -ms-animation-duration: 5s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob4;
    -o-animation-duration: 5s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}
.bounce-animate5 {
    animation-name: float-bob5;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob5;
    -moz-animation-duration: 6s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob5;
    -ms-animation-duration: 6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob5;
    -o-animation-duration: 6s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}
.bounce-animate-slow {
    animation-name: float-bob5;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob5;
    -moz-animation-duration: 15s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob5;
    -ms-animation-duration: 15s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob5;
    -o-animation-duration: 15s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}
.bounce-animate-3 {
    animation-name: float-bob6;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -moz-animation-name: float-bob6;
    -moz-animation-duration: 6s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: float-bob6;
    -ms-animation-duration: 6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    -o-animation-name: float-bob6;
    -o-animation-duration: 6s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
}
@keyframes float-bob {
    0% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }

    100% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
}
@keyframes float-bob2 {
    0% {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
    }

    50% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    100% {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
    }
}
@keyframes float-bob3 {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }

    50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}
@keyframes float-bob4 {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }

    50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }

    100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}
@keyframes float-bob5 {
    0% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }

    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}
@keyframes float-bob6 {
    0% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
    }

    50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
    }
}
@keyframes movebounce {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

    50% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}
@keyframes moveleftbounce {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }

    50% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
}

/*--==============================================->
  <!-- Consen Animation Dance -->
 ==================================================-*/
 .dance3 {
    -webkit-animation: dance3 8s alternate infinite;
    animation: dance3 8s alternate infinite;
}

@keyframes dance3 {
    0% {
        -webkit-transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

.dance {
    -webkit-animation: dance 2s alternate infinite;
    animation: dance 2s alternate infinite;
}

@keyframes dance {
    0% {
        -webkit-transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1.2);
    }
}

.dance2 {
    -webkit-animation: dance2 4s alternate infinite;
    animation: dance2 4s alternate infinite;
}

@keyframes dance2 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }

    50% {
        -webkit-transform: translate3d(25px, -25px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, -25px, 25px);
    }
}

.watermark-animate {
    -webkit-animation: watermark-animate 8s infinite;
    animation: watermark-animate 8s infinite;
    animation-direction: alternate-reverse;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes watermark-animate {
    0% {
        left: 0;
    }

    100% {
        left: 100%;
    }
}



/*=====================================
<-- Constre Search Box Css -->
=======================================*/
/*nav button*/
.search-box-btn.search-box-outer {
    display: inline-block;
}

.nav-btn.navSidebar-button {
    display: inline-block;
    position: relative;
    top: 2px;
    margin: 0 12px;
    cursor: pointer;
}

.nav-btn.navSidebar-button a i {
    font-size: 15px;
    width: 32px;
    line-height: 35px;
    height: 32px;
    border-radius: 50px;
    text-align: center;
    background: #efefef;
    display: inline-block;
    color: #232323;
    position: relative;
    z-index: 1;
    margin-left: 15px;
    transition: .5s;
    cursor: pointer;
}

.nav-btn.navSidebar-button a i:after {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #42ba3d;
    border-radius: 50%;
    transition: .5s;
    transform: scale(0);
}

.nav-btn.navSidebar-button a i:hover:after {
    transform: scale(1);
}

.nav-btn.navSidebar-button a i:hover {
    color: #fff;
}

.xs-sidebar-group .xs-overlay {
    left: 100%;
    top: 0;
    position: fixed;
    z-index: 101;
    height: 100%;
    opacity: 0;
    width: 100%;
    visibility: hidden;
    -webkit-transition: all 0.4s ease-in 0.8s;
    -o-transition: all 0.4s ease-in 0.8s;
    transition: all 0.4s ease-in 0.8s;
}

.xs-sidebar-group .widget-heading {
    position: absolute;
    top: 23px;
    right: 0;
    padding: 25px;
}

.xs-sidebar-widget {
    position: fixed;
    right: -100%;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 360px;
    z-index: 999999;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #272727;
    -webkit-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
    -o-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
    transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
    visibility: hidden;
    opacity: 0;
}

.xs-sidebar-group.isActive .xs-overlay {
    opacity: 0.7;
    visibility: visible;
    -webkit-transition: all 0.8s ease-out 0s;
    -o-transition: all 0.8s ease-out 0s;
    transition: all 0.8s ease-out 0s;
    left: 0;
}

.xs-sidebar-group.isActive .xs-sidebar-widget {
    opacity: 1;
    visibility: visible;
    right: 0;
    -webkit-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
    -o-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
    transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
}

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

.close-side-widget i {
    color: #42ba3d;
    font-size: 28px;
    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;
}

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

.xs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    z-index: 0;
}

.xs-bg-black {
    background-color: #42ba3d;
}

/*html css*/
.nav-logo {
    margin: 0 0 50px;
}
.content-thumb-box {
    margin-bottom: 20px;
}
.content-thumb-box img {
    width: 100%;
    border-radius: 10px;
}

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

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

a.theme-btn.btn-style-two span {
    color: #fff;
    font-size: 20px;
}

a.theme-btn.btn-style-two i {
    color: #42ba3d;
}

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

ul.list-style-one li {
    display: block;
    list-style: none;
    color: #fff;
    padding: 16px 0 0;
    overflow: hidden;
}

ul.list-style-one li i {
    margin-right: 10px;
}

ul.list-style-one li span {
    font-size: 20px;
    font-weight: 600;
    color: #42ba3d;
    margin: 0 10px 0 0px;
}

ul.social-box {
    margin: 30px 0 0;
}

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

ul.social-box li a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 36px;
    text-align: center;
    background: #fff;
    color: #42ba3d;
    transition: .5s;
    font-size: 18px;
    border-radius: 3px;
}

ul.social-box li a:hover {
    background: #42ba3d;
    color: #fff;
}

/*** 
====================================================================
    Search Popup
====================================================================
***/
.search-popup{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-100%);
    background-color: rgba(0,0,0,0.90);
    -webkit-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition: all 500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); /* easeInOutQuint */
}

.search-popup{
    width: 100%;
}

.search-active .search-popup{
    transform: translateY(0%);
    margin-top: 0;
}

.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: -200px;
    border-radius: 50%;
    text-align: center;
    background-color: #42ba3d;
    width: 70px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    border-bottom: 3px solid #fff;
    border-top: 3px solid #fff;
    border-right: 3px solid #062462;
    border-left: 3px solid #062462;
    -webkit-transition: all 500ms ease;
    height: 70px;
    line-height: 70px;
    text-align: center;
}

.search-active .search-popup .close-search{
    visibility: visible;
    opacity: 1;
    top: 50%;
    -webkit-transition-delay: 1500ms;
    -moz-transition-delay: 1500ms;
    -ms-transition-delay: 1500ms;
    -o-transition-delay: 1500ms;
    transition-delay: 1500ms;
}

.search-popup form{
    position: absolute;
    max-width: 700px;
    top: 50%;
    left: 15px;
    right: 15px;
    margin:-35px auto 0;
    transform: scaleX(0);
    transform-origin: center;
    background-color: #111111;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.search-active .search-popup form{
    transform: scaleX(1);
    -webkit-transition-delay: 1200ms;
    -moz-transition-delay: 1200ms;
    -ms-transition-delay: 1200ms;
    -o-transition-delay: 1200ms;
    transition-delay: 1200ms;
}

.search-popup .form-group{
    position:relative;
    margin:0px; 
  
    overflow: hidden;
}
.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"]{
    position:relative;
    display:block;
    font-size:18px;
    line-height: 50px;
    color:#000000;
    height:70px;
    width:100%;
    padding: 10px 30px;
    background-color: #ffffff;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
    font-weight:500;
    text-transform:capitalize;
}

.search-popup .form-group input[type="submit"], .search-popup .form-group button {
    position: absolute;
    right: 30px;
    top: 0px;
    height: 70px;
    line-height: 70px;
    background: transparent;
    text-align: center;
    font-size: 24px;
    color: #42ba3d;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    border: none;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover{
    color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder{
    color:#000000;
}

.search-popup .close-search.style-two{
    position: absolute;
    right: 25px;
    left: auto;
    color:#ffffff;
    width:auto;
    height:auto;
    top:25px;
    margin:0px;
    border:none;
    background:none !important;
    box-shadow:none !important;
    -webkit-transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
    transition:all 500ms ease;
}

.search-box-btn {
    display: inline-block;
    padding-left: 22px;
}

.search-box-btn i {
    display: inline-block;
    color: #fff;
    line-height: 30px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    transition: .5s;
}

.upp.search-box-btn i {
    color: #9E9FA1;
}

.search-box-btn.search-box-outer span i {
    font-size: 20px;
    display: inline-block;
    color: #fff;
    padding-left: 17px;
    position: relative;
    z-index: 1;
}

.upp.search-box-btn.search-box-outer span i {
    color: #9E9FA1;
}

.search-box-btn.search-box-outer span i:after {
    position: absolute;
    content: "0";
    right: -10px;
    top: -4px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: #42ba3d;
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    font-size: 12px;
}

.flaticon-multiply:before {
    content: inherit;
}

button.close-search i {
    font-size: 25px;
    color: #fff;
    display: inline-block;
}

/*===========================
<-- Loader Css -->
=============================*/
/* PRELOADER CSS */
.loading-screen {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: default;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #28963d;
    z-index: 1000;
}

.loading-screen .bar {
    position: absolute;
    height: 100%;
    width: 50%;
    background-color: #F4F1EE;
}

.loading-screen .top-bar {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
}

.loading-screen .down-bar {
    bottom: 0;
    top: auto;
    right: 0;
    left: auto;
}


.loading-screen .animation-preloader {
    z-index: 1000;
}

.loading-screen .animation-preloader .spinner {
    -webkit-animation: spinner 1s infinite linear;
    animation: spinner 1s infinite linear;
    border-radius: 50%;
    border: 4px solid #E2DFDD;
    border-top-color: #28963d;
    width: 150px;
    height: 150px;
    margin: 0 auto 3.5em auto;
}

.loading-screen .animation-preloader .txt-loading {
    font: bold 5em "", sans-serif;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.loading-screen .animation-preloader .txt-loading .letters-loading {
    color: #E2DFDD;
    position: relative;
}

.loading-screen .animation-preloader .txt-loading .letters-loading:before {
    -webkit-animation: letters-loading 4s infinite;
    animation: letters-loading 4s infinite;
    color: #010103;
    content: attr(data-text-preloader);
    left: 0;
    opacity: 0;
    position: absolute;
    top: -3px;
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
}

.loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(2):before {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(3):before {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(4):before {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(5):before {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

.loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(6):before {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(7):before {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

.loading-screen .animation-preloader .txt-loading .letters-loading:nth-child(8):before {
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}


@-webkit-keyframes spinner {
    to {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@keyframes spinner {
    to {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@-webkit-keyframes letters-loading {

    0%,
    75%,
    100% {
        opacity: 0;
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }

    25%,
    50% {
        opacity: 1;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@keyframes letters-loading {

    0%,
    75%,
    100% {
        opacity: 0;
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }

    25%,
    50% {
        opacity: 1;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@media screen and (max-width: 767px) {
    .loading-screen .animation-preloader .spinner {
        height: 8em;
        width: 8em;
    }

    .loading-screen .animation-preloader .txt-loading {
        font: bold 3.5em "Montserrat", sans-serif;
    }
}

@media screen and (max-width: 500px) {
    .loading-screen .animation-preloader .spinner {
        height: 7em;
        width: 7em;
    }

    .loading-screen .animation-preloader .txt-loading {
        font: bold 2em "Montserrat", sans-serif;
    }
}




/*======================================================================================================
===================================================================================================
===================================================================================================
===================================================================================================
===================================================================================================*/
/*----------------------------------------------------*/


/*----------------------------------------------------*/
/*  Footer Social Icons (Styling)
/*----------------------------------------------------*/

.footer-social-icons {
    margin-top: 25px;
}

.footer-social-icons ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-social-icons ul li {
    display: inline-block;
    margin-right: 10px;
}

.footer_area .footer-social-icons ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #4e4d4b;
    color: #fff;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
}

.footer_area .footer-social-icons ul li a:hover {
    background-color: #28963d; /* Change this to your brand's primary color */
    transform: translateY(-4px); /* Creates the 'lift' effect */
    box-shadow: 0px 6px 12px rgba(0,0,0,0.2);
}

/* Push the decorative shapes to the background */
.footer_all_shape {
    z-index: 0;
}

/* Bring the main content container to the foreground */
.footer_area .container {
    position: relative;
    z-index: 1;
}


/*----------------------------------------------------*/
/*  Mobile Menu: Replace Text with Logo Image
/*----------------------------------------------------*/

.mean-container .mean-bar::before {
    content: ''; /* This removes the word "Consalt" */
    
    background-image: url('../images/ISA.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    
    display: block;
    width: 180px;  /* <-- ADJUST THIS WIDTH */
    height: 60px; /* <-- ADJUST THIS HEIGHT */

    /* These lines center the logo perfectly */
    top: 50%;
    transform: translateY(-50%);
    left: 15px;

    /* These lines cancel out any old text styles */
    font-size: 0;
    font-weight: normal;
}

/*----------------------------------------------------*/
/*  Mobile Menu: Fix Logo Position on Open
/*----------------------------------------------------*/

/* Step 1: Lock the header bar to the top of the screen */
.mean-container .mean-bar {
    position: fixed; /* Takes the bar out of the normal flow and fixes it to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Ensures the bar is above all other content */
}

/* Step 2: Push the dropdown menu down so it doesn't open BEHIND the bar */
.mean-container .mean-nav {
    margin-top: 60px; /* This value MUST match the height of your .mean-bar */
    width: 100%;
    position: fixed; /* Also fix the menu position */
    top: 0;
    left: 0;
    z-index: 999; /* Place it just behind the main bar */
}

/* Step 3: Add space to the top of the page so content doesn't start hidden under the new fixed header */
body.mean-container-opened {
    padding-top: 60px; /* This creates a gap for the header ONLY when the menu is open */
}


/*----------------------------------------------------*/
/*  Contact Page Breadcrumb Background
/*----------------------------------------------------*/

.contact-breadcrumb {
    /* Set your new background image */
    background-image: url('../images/inner-img/breadcumb2.png'); /* <-- CHANGE THIS to your image file */

    /* You can also adjust how the image displays */
    background-size: cover; /* 'cover' makes the image fill the entire area without stretching */
    background-position: center center;
    background-repeat: no-repeat;
}


/* --- Custom Hero Slider Styles (CORRECTED for Staggered Animation) --- */

.hero_area_slider {
    position: relative;
    overflow: hidden;
}

.single-slide {
    position: relative;
    height: 90vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Add this to contain the video */
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
}

/* Move the video in the FIRST slide UP */
.slide-imports .hero-video {
    top: 35% !important; /* Moves this specific video up */
}

/* Move the video in the SECOND slide DOWN */
.slide-staffing .hero-video {
    top: 65% !important; /* Moves this specific video down */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: -0.5px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.single-slide .container {
    position: relative;
    z-index: 2;
}

.single-slide .hero_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* 1. Set the initial "hidden" state for all children of hero_content */
.single-slide .hero_content > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 2. THE FIX: When an .owl-item is active, make the content inside visible */
.owl-item.active .single-slide .hero_content > * {
    opacity: 1;
    transform: translateY(0);
}

/* 3. THE FIX: Apply the delay to elements inside the .owl-item.active */
.owl-item.active .single-slide .hero_content h4 {
    transition-delay: 0.3s;
}
.owl-item.active .single-slide .hero_content h1 {
    transition-delay: 0.5s;
}
.owl-item.active .single-slide .hero_content p {
    transition-delay: 0.7s;
}
.owl-item.active .single-slide .hero_content .slider_button {
    transition-delay: 0.9s;
}

/* Keep text color white */
.single-slide .hero_content h1,
.single-slide .hero_content h4,
.single-slide .hero_content p {
    color: #ffffff;
}

/* --- Custom Static Service Section Styles --- */


/* Title Styling */
.section_title_static {
	margin-bottom: 60px;
}

.section_title_static .sub-title {
	display: inline-block;
	padding: 8px 20px;
	background-color: #e8eef3;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	margin-bottom: 15px;
}

.section_title_static h1 {
	font-size: 38px;
	font-weight: 700;
}

/* Service Card Styling */
.static-service-card {
	background-color: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 25px rgba(0, 0, 0, 0.07);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	margin-bottom: 30px; /* For spacing on mobile */
	height: 100%; /* Makes cards in the same row equal height */
}

.static-service-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 35px rgba(0, 0, 0, 0.1);
}

.static-service-card .card-image img {
	width: 100%;
	height: auto;
	display: block;
}

.static-service-card .card-content {
	padding: 30px;
}

.static-service-card .card-content h3 {
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 15px;
}

.static-service-card .card-content p {
	color: #666;
	line-height: 1.7;
	margin-bottom: 25px;
}

.learn-more-btn {
	color: #333;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.3s ease;
}

.learn-more-btn:hover {
	color: #28963d; /* Or your theme's primary color */
}

.learn-more-btn i {
	margin-left: 8px;
	transition: transform 0.3s ease;
}

.learn-more-btn:hover i {
	transform: translateX(5px);
}

/* --- Custom Testimonial Stats Styles --- */

.testimonial-stats-container {
	display: flex;
	gap: 20px; /* Space between the boxes */
	margin-bottom: 25px;
}

.stat-box {
	background: #fff;
	border-radius: 8px;
	padding: 20px;
	display: flex;
	align-items: center;
	flex-grow: 1;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.stat-box .stat-icon {
	font-size: 36px;
	color: #28963d; /* Or your theme's primary color */
	margin-right: 15px;
}

.stat-box .stat-content {
	display: flex;
	flex-direction: column;
}

.stat-box .stat-number {
	font-size: 24px;
	font-weight: 700;
	color: #111;
}

.stat-box .stat-title {
	font-size: 14px;
	color: #666;
}

/* --- Custom Careers Page Styles --- */

.careers_area {
	padding: 100px 0;
}

.careers-intro {
	max-width: 700px;
	margin: 15px auto 0;
	color: #666;
	line-height: 1.8;
}

.job-card {
	background: #ffffff;
	border: 1px solid #eef0f3;
	border-radius: 8px;
	padding: 30px;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.job-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	border-color: transparent;
}

.job-card-header h3 {
	font-size: 22px;
	font-weight: 700;
	color: #111;
	margin-bottom: 15px;
}

.job-card-meta {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
	color: #555;
	font-size: 14px;
}

.job-card-meta i {
	margin-right: 8px;
	color: #28963d; /* Or your theme's primary color */
}

.job-card-body p {
	color: #666;
	line-height: 1.7;
	flex-grow: 1; /* Allows the body to take up available space */
}

.job-card-footer {
	margin-top: 20px;
}

.apply-btn {
	display: inline-block;
	background-color: #28963d; /* Or your theme's primary color */
	color: #fff;
	padding: 10px 25px;
	border-radius: 5px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.apply-btn:hover {
	background-color: #28963d; /* A slightly darker shade for hover */
	color: #fff;
}

.apply-btn i {
	margin-left: 8px;
	transition: transform 0.3s ease;
}

.apply-btn:hover i {
	transform: translateX(4px);
}
.careers_area .row > [class*="col-"] {
    margin-bottom: 30px; /* Adds space at the bottom of each column */
}


/* --- Custom Job Details Page Styles --- */

.job_details_area {
	padding: 100px 0;
}

.job-details-header h1 {
	font-size: 36px;
	font-weight: 700;
	margin-bottom: 20px;
}

.job-details-header p {
	font-size: 18px;
	line-height: 1.7;
	color: #555;
	margin-bottom: 40px;
}

.job-description-section {
	margin-bottom: 40px;
}

.job-description-section h3 {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

.job-description-section ul {
	list-style: none;
	padding-left: 0;
}

.job-description-section ul li {
	color: #666;
	margin-bottom: 15px;
	line-height: 1.8;
	display: flex;
	align-items: flex-start;
}

.job-description-section ul li i {
	color: #28963d; /* Or your theme's primary color */
	margin-right: 12px;
	margin-top: 5px;
}

/* Sidebar Styles */
.job-sidebar {
	background: #f8f9fa;
	border: 1px solid #eef0f3;
	border-radius: 8px;
	padding: 30px;
}

.job-sidebar h3 {
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 25px;
}

.job-summary-item {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.job-summary-item i {
	font-size: 24px;
	color: #28963d; /* Or your theme's primary color */
	margin-right: 20px;
	width: 30px;
	text-align: center;
}

.job-summary-item div {
	display: flex;
	flex-direction: column;
}

.job-summary-item strong {
	font-weight: 600;
	color: #333;
}

.job-summary-item span {
	color: #666;
}

.apply-btn-sidebar {
	width: 100%;
	display: block;
	background-color: #28963d; /* Or your theme's primary color */
	color: #fff;
	padding: 15px;
	border-radius: 5px;
	font-weight: 600;
	text-align: center;
	border: none;
	margin-top: 20px;
	transition: background-color 0.3s ease;
}

.apply-btn-sidebar:hover {
	background-color: #063232; /* Darker shade on hover */
	color: #fff;
}

/* Modal form adjustments */
.modal-header {
	background-color: #f8f9fa;
}
.modal-title {
	font-weight: 600;
}

.modal-content {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.modal-header {
  border-bottom: 1px solid #e9ecef;
  background-color: #f8f9fa;
}
.modal-title {
  font-size: 1.25rem;
  font-weight: 500;
}
.form-group {
  margin-bottom: 1.5rem;
}
.form-control, .form-control-file {
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 0.75rem;
}
.form-control:focus, .form-control-file:focus {
  border-color: #28963d;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
.btn-primary {
  background-color: #28963d;
  border-color: #28963d;
  padding: 0.5rem 1.5rem;
}
.btn-primary:hover {
  background-color: #28963d;
  border-color: #28963d;
}
.btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
  padding: 0.5rem 1.5rem;
}
.btn-secondary:hover {
  background-color: #5a6268;
  border-color: #5a6268;
}
.invalid-feedback {
  display: none;
  font-size: 0.875rem;
  color: #dc3545;
}
.was-validated .form-control:invalid, .was-validated .form-control-file:invalid {
  border-color: #dc3545;
}
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-control-file:invalid ~ .invalid-feedback {
  display: block;
}

/* --- Final Styles for Job Application Modal (Matches Screenshot) --- */

.application-modal-final .modal-dialog {
    max-width: 800px;
}

.application-modal-final .modal-content {
    border-radius: 8px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

/* --- Modal Header --- */
.application-modal-final .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid #e9ecef;
}

.application-modal-final .modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #212529;
}

.application-modal-final .modal-header-actions {
    display: flex;
    align-items: center;
    gap: 20px; /* Space between the two buttons */
}

/* --- Custom Submit Button (in header) --- */
.modal-submit-btn-header {
    background-color: #4f4e4c; /* Blue color from screenshot */
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    border: none;
    border-radius: 6px;
    padding: 12px 25px;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.modal-submit-btn-header:hover {
    background-color: #28963d; /* Darker blue on hover */
}

/* --- Custom Close Button (as seen in screenshot) --- */
.application-modal-final .modal-header .close {
    opacity: 1;
    font-size: 16px;
    font-weight: normal;
    color: #6c757d;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: none;
    padding: 0;
    margin: 0;
    transition: background-color 0.2s ease;
}

.application-modal-final .modal-header .close:hover {
    background-color: #f1f1f1;
}

/* --- Modal Body & Form --- */
.application-modal-final .modal-body {
    padding: 30px 40px;
}

.application-modal-final .form-group {
    margin-bottom: 1.25rem;
}

.application-modal-final .form-group label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

.application-modal-final .form-control {
    border-radius: 6px;
    padding: 20px 15px; /* Taller input fields */
}

.application-modal-final .custom-file-label::after {
    content: "Browse";
}


/* --- Custom Styles for All Service Pages --- */

:root {
  --primary-color: #28963d;
  --secondary-color: #4e4d4b;
}

/* Main Service Details Section */
.service-details-area {
    padding: 100px 0;
}
.service-details-thumb img {
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.service-details-content .service-sub-title {
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
}
.service-details-content h2 {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 20px;
}
.service-details-content p {
    line-height: 1.8;
    color: #666;
    margin-bottom: 30px;
}
.btn-primary-service {
    background-color: var(--primary-color);
    color: #fff;
    padding: 15px 35px;
    border-radius: 5px;
    font-weight: 600;
    display: inline-block;
    transition: background-color 0.3s ease;
}
.btn-primary-service:hover {
    background-color: var(--secondary-color);
    color: #fff;
}

/* Key Features Section */
.key-features-area {
    padding: 100px 0;
    background-color: #f8f9fa;
}
.feature-card {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    transition: transform 0.3s ease;
    height: 100%;
}
.feature-card:hover {
    transform: translateY(-10px);
}
.feature-card .feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.feature-card h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
}
.feature-card p {
    color: #666;
    line-height: 1.7;
}

/* Call to Action (CTA) Section */
.cta-area {
    padding: 80px 0;
    background-color: var(--secondary-color);
    color: #fff;
}
.cta-area h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}
.cta-area p {
    margin: 5px 0 0;
    opacity: 0.9;
}
.btn-secondary-service {
    background-color: #fff;
    color: var(--secondary-color);
    padding: 15px 35px;
    border-radius: 5px;
    font-weight: 600;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-secondary-service:hover {
    background-color: var(--primary-color);
    color: #fff;
}



/* =================================================================== */
/* ==   ULTIMATE CSS FOR ALL NEW SERVICE PAGES                      == */
/* =================================================================== */

:root {
  --primary-color: #28963d;
  --secondary-color: #4e4d4b;
}

/* --- [ 1. SHARED STYLES ] --- */
.service-page-section { padding: 50px 0; }
.service-sub-title { font-weight: 700; color: var(--primary-color); letter-spacing: 1px; margin-bottom: 10px; display: block; }
.service-section-title h2 { font-size: 38px; font-weight: 700; margin-bottom: 20px; }
.service-section-title .section-desc { max-width: 700px; margin: 0 auto 60px; color: #666; line-height: 1.8; }
.service-btn { background-color:#fff; color: var(--secondary-color) !important; padding: 15px 35px; border-radius: 5px; font-weight: 600; display: inline-block; transition: all 0.3s ease; }
.service-btn:hover { background-color: var(--primary-color);color: #fff !important; transform: translateY(-3px); }
.service-cta-section { padding: 80px 0; background-color:#063232; color: #fff; }
.service-cta-section h2 { font-size: 32px; font-weight: 700; }
.service-cta-section .cta-btn { background-color: #fff; color: var(--secondary-color) !important; }
.service-cta-section .cta-btn:hover { background-color: var(--primary-color); color: #fff !important; }

/* --- [ 2. PLACEMENT PAGE LAYOUT ] --- */
.placement-hero-thumb img { border-radius: 8px; box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.process-section { background-color: #f8f9fa; }
.process-step-card { background: #fff; padding: 40px 30px; text-align: center; border-radius: 8px; border-bottom: 4px solid var(--primary-color); box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.process-step-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.process-step-card .step-icon { font-size: 48px; color: var(--primary-color); margin-bottom: 20px; }
.process-step-card h3 { font-size: 22px; }

/* --- [ 3. STAFFING PAGE LAYOUT ] --- */
.staffing-hero { position: relative; padding: 150px 0; background-size: cover; background-position: center; color: #fff; }
.staffing-hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:#063232; }
.staffing-hero .container { position: relative; z-index: 2; }
.staffing-hero h1 { font-size: 52px; font-weight: 700; }
.staffing-hero p { font-size: 18px; max-width: 600px; margin-top: 20px; margin-bottom: 30px; }
.benefits-grid { background-color: #f8f9fa; }
.benefit-card-staffing { display: flex; align-items: flex-start; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 5px 25px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.benefit-card-staffing:hover { transform: translateY(-8px); box-shadow: 0 10px 35px rgba(0,0,0,0.1); }
.benefit-card-staffing .benefit-icon { font-size: 28px; color: var(--primary-color); margin-right: 20px; margin-top: 5px; }
.benefit-card-staffing h3 { font-size: 20px; }

/* --- [ 4. EXECUTIVE SEARCH PAGE LAYOUT ] --- */
.search-intro-section { padding-bottom: 0; }
.alternating-feature-section .feature-row { padding: 30px 0; border-bottom: 1px solid #f0f0f0; }
.alternating-feature-section .feature-row:last-child { border-bottom: none; }
.alternating-feature-section img { border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
.alternating-feature-section img:hover { transform: scale(1.03); }
.alternating-feature-section h3 { font-size: 28px; font-weight: 600; }
.alternating-feature-section .tick-list { list-style: none; padding: 0; margin-top: 20px; }
.alternating-feature-section .tick-list li { padding: 8px 0; display: flex; align-items: center; }
.alternating-feature-section .tick-list li i { color: var(--primary-color); margin-right: 12px; }

/* --- [ 5. RPO PAGE LAYOUT ] --- */
.rpo-hero-content .icon-list li { display: flex; align-items: center; margin-bottom: 15px; }
.rpo-hero-content .icon-list i { color: var(--primary-color); border: 2px solid var(--primary-color); width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-right: 15px; }
.rpo-how-it-works { background-color: #f8f9fa; }
.rpo-card { background: #fff; padding: 30px; border-radius: 8px; border-left: 5px solid var(--primary-color); box-shadow: 0 5px 25px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.rpo-card:hover { transform: translateY(-8px); box-shadow: 0 10px 35px rgba(0,0,0,0.1); }
.rpo-card h3 { font-size: 22px; }

/* --- [ 6. PAYROLL PAGE LAYOUT ] --- */
.payroll-split-section { background-color:#063232; color: #fff; }
.payroll-split-section .content-half { padding: 80px 50px; }
.payroll-split-section .image-half { background-size: cover; background-position: center; min-height: 400px; }
.payroll-split-section h2 { font-size: 36px; }
.payroll-features-grid { background-color: #fff; }
.payroll-feature-card { text-align: center; padding: 20px; }
.payroll-feature-card .feature-icon { width: 80px; height: 80px; margin: 0 auto 20px; background-color: #f8f9fa; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--primary-color); transition: all 0.3s ease; }
.payroll-feature-card:hover .feature-icon { background-color: var(--primary-color); color: #fff; transform: rotate(15deg) scale(1.1); }
.payroll-feature-card h4 { font-size: 20px; }

/* --- [ 7. TRADE (IMPORT/EXPORT) PAGE - EXPANDED LAYOUT ] --- */
.trade-core-services { background-color: #f8f9fa; }
.trade-core-service-card { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 5px 25px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: center; height: 100%; }
.trade-core-service-card:hover { transform: translateY(-8px); box-shadow: 0 10px 35px rgba(0,0,0,0.1); }
.trade-core-service-card .icon { font-size: 42px; color: var(--primary-color); margin-bottom: 20px; }
.trade-core-service-card h3 { font-size: 22px; }
.industry-section { background-color: #fff; }
.industry-card { text-align: center; padding: 20px; border: 1px solid #eef0f3; border-radius: 8px; transition: border-color 0.3s ease, background-color 0.3s ease; }
.industry-card:hover { border-color: var(--primary-color); background-color: #f8f9fa; }
.industry-card .icon { font-size: 36px; color: var(--primary-color); margin-bottom: 15px; }
.industry-card h4 { font-size: 18px; font-weight: 600; }

/* --- [ 8. FAQ SECTION (SHARED) - CORRECTED ARROWS --- */
.faq-area {
    padding: 100px 0;
}
.faq-card {
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    overflow: hidden;
    border: 1px solid #eef0f3;
}
.faq-header {
    padding: 20px 30px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-header h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}
.faq-header i {
    transition: transform 0.3s ease;
}

/* THE FIX: This rule specifically targets the icon of the OPEN accordion item */
.faq-header[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.faq-body {
    padding: 0 30px 25px;
    line-height: 1.8;
    color: #666;
}














.skill_shape.rotate {
    left: 3%;   /* move to left side */
    right: auto; /* remove right positioning */
    top: 15%;   /* keep original vertical position */
    z-index: -1;
}



.about-bread {
	background: url(../images/inner-img/about.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}

/* Contract Staffing breadcrumb */
.contract-bread {
	background: url(../images/inner-img/iths.png) no-repeat center center;
	background-size: contain;
}

.trade-bread {
    background: url(../images/inner-img/ie.png) no-repeat center center;
    background-size: contain;
}


.skills_area .section_title.style_four:before {
    width: 33%;
}



.accordion-button:not(.collapsed) {
    background-color: #ffffff !important;
    box-shadow: #ffffff !important;
}


.section_title.style_three.custom:before {
    bottom: 59%; /* move up - increase this value as needed (e.g., 55%, 60%) */
}

.skills_area .section_title.style_four.custom-1:before {
    top: 140%; 
}

.white-text {
  color: #fff;
}

.green-btn {
  background-color: var(--primary-color); /* or your green color code */
  color: #fff !important;
}

.green-btn:hover {
  background-color: #063232;
  color: #fff !important;
  transform: translateY(-3px);
}


.cta-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* keeps it responsive */
  gap: 15px;
}

.staffing-hero .consalt_btn {
  text-align: left !important;
}

.payroll-split-section .consalt_btn {
  text-align: left !important;
}


/* --- Get Started Form Styles --- */

/* The main container for the form */
.form-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #ffffff;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    max-width: 570px;
    width: 100%;
    margin: 40px auto; /* Adds some space and centers the form in its parent */
}

/* "Get started" heading */
.form-container h1 {
    font-size: 36px;
    font-weight: 600;
    color: #1a1a1a;
    margin-top: 0;
    margin-bottom: 30px;
}

/* Grid layout for the form fields */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Individual field group (label + input) */
.form-field {
    display: flex;
    flex-direction: column;
}

/* Make specific fields span the full width of the grid */
.full-width {
    grid-column: 1 / -1;
}

/* Styling for labels */
.form-field label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

/* Common styling for all inputs and select boxes */
.form-field input,
.form-field select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Placeholder text color */
.form-field input::placeholder {
    color: #999;
}

/* Custom dropdown arrow for select boxes */
.form-field select {
    background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

/* "Book a Demo" button styling */
.submit-btn {
    width: 100%;
    padding: 16px;
    margin-top: 30px;
    margin-bottom: -15px;
    background-color: #28963d;
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: #063232;
}

/* Disclaimer text at the bottom */
.disclaimer {
    font-size: 13px;
    color: #555;
    text-align: center;
    margin: 0;
}

.disclaimer a {
    color: #333;
    text-decoration: underline;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr; /* Stack fields vertically */
    }
    .form-container {
        padding: 25px;
    }
     .form-container h1 {
        font-size: 28px;
    }
}


/* --- Minimalist Scrolling Top Bar Styles --- */

.minimalist-top-bar {
    background-color: #063232;
    padding: 10px 0;
    overflow: hidden; /* Add this to prevent horizontal scroll issues */
}

.scrolling-text-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.scrolling-text {
    display: inline-block;
    padding-left: 100%;
    animation: scroll-left 25s linear infinite;
}

.scrolling-text span {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: #ffffff;
}

.scrolling-text span.separator {
    margin: 0 25px;
    color: #ffffff;
}

.scrolling-text span a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.scrolling-text span a:hover {
    color: #28963d;
}

.scrolling-text strong {
    color: #28963d;
    font-weight: 600;
}

.scrolling-text i {
    margin-right: 8px;
    opacity: 0.8;
}

/* Animation Keyframes */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* ====================================================== */
/* ==   RESPONSIVE FIX: Mobile Positioning & Stacking  == */
/* ====================================================== */

@media (max-width: 991px) {

    /*
     *  1. TOP BAR STYLING
     *  Position the top bar and set a lower z-index.
     */
    .minimalist-top-bar {
        display: block !important;
        position: relative; /* Keep it in the normal flow */
        width: 100%;
        z-index: 999; /* Lower stacking order */
    }

    .scrolling-text span {
        font-size: 12px;
    }

    .scrolling-text span.separator {
        margin: 0 15px;
    }

    /*
     *  2. MOBILE MENU STYLING
     *  Target your mobile menu and give it a higher z-index.
     */
    .mobile-menu-area {
        position: relative; /* This is necessary for z-index to work */
        z-index: 1000; /* Higher stacking order */
    }
    body {
       padding-top: 60px; /* Adjust this to the height of the top bar */
    }
}



/* ====================================================== */
/*
--------------------------
Enquiry Popup Styles
--------------------------
*/

/* --- Overlay and Popup Container --- */
.popup-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.popup-content {
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: 8px;
    width: 100%;
    max-width: 1100px; /* Increased max-width for 4-column layout */
    position: relative;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
    max-height: 90vh; /* Max height to prevent overflow on short screens */
    overflow-y: auto; /* Enable vertical scrolling if content is too tall */
}

/* --- Header and Close Button --- */
.popup-header {
    text-align: center;
    margin-bottom: 30px;
}

.popup-header h2 {
    color: #333;
    margin-bottom: 10px;
}

.popup-header p {
    color: #666;
    font-size: 16px;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    line-height: 1;
}
.close-btn:hover {
    color: #000;
}

/* --- Form Grid Layout --- */
#enquiryForm .form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
    gap: 20px;
    margin-bottom: 15px;
}

/* --- General Form Elements --- */
#enquiryForm .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

#enquiryForm label {
    margin-bottom: 8px;
    font-weight: 500;
    color: #444444; /* **FIX: Visible label color** */
    font-size: 14px;
}

#enquiryForm .required {
    color: red;
    margin-left: 2px;
}

#enquiryForm input[type="text"],
#enquiryForm input[type="email"],
#enquiryForm input[type="tel"],
#enquiryForm select,
#enquiryForm textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
    color: #333;
    transition: border-color 0.3s;
}

#enquiryForm input:focus,
#enquiryForm select:focus,
#enquiryForm textarea:focus {
    outline: none;
    border-color: #28963d; /* Highlight color on focus */
}

/* --- Validation and Error Styling --- */
.validation-message {
    color: red;
    font-size: 12px;
    margin-top: 5px;
    display: none; /* **FIX: Hide error messages by default** */
}

input.invalid, select.invalid, textarea.invalid {
    border-color: red !important; /* Highlight invalid fields */
}

/* --- Special Group Styling --- */
.form-group.full-width {
    grid-column: 1 / -1; /* Make element span all columns in the grid */
}

.checkbox-group {
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
}
.checkbox-group input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
    accent-color: #28963d;
}
.checkbox-group .checkbox-label {
    margin-bottom: 0;
    font-weight: normal;
}
.checkbox-group a {
    color: #28963d;
    text-decoration: underline;
}

.submit-group {
    align-items: center;
    margin-top: 20px;
}

.submit-btn {
    background-color: #4f4e4c;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #28963d;
}

/* --- Responsive Media Queries --- */
/* For Tablets */
@media (max-width: 1024px) {
    .popup-content {
        max-width: 700px;
        padding: 25px;
    }
    #enquiryForm .form-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

/* For Mobile */
@media (max-width: 768px) {
    #enquiryForm .form-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
    .popup-content {
        padding: 20px;
        max-height: 85vh;
    }
}



/*
-------------------------------------------------------------------
START: Mobile Header Button Position Fix (Absolute Positioning)
-------------------------------------------------------------------
*/

/* Apply these styles ONLY on screens smaller than 992px */
@media (max-width: 991.98px) {

    /* 1. Make the header bar a positioning context */
    .custom-mobile-header {
        margin-top: 24px;
        /* position: relative !important; This is crucial for absolute positioning of the child */
        padding: 10px 15px !important; /* Keep the padding */
    }

    /* 2. Absolutely position the 'Enquire Now' button */
    .custom-mobile-header .mobile-enquire-btn {
        display: block !important;
        position: absolute !important; /* Lift the button out of the normal flow */
        right: 60px; /* **THE KEY CHANGE**: Position it 60px from the right edge. Adjust if needed. */
        top: 50%; /* Center it vertically */
        transform: translateY(-50%); /* Fine-tune the vertical centering */
        z-index: 1000;
    }
    
    /* 3. Style the button link (no changes here) */
    .custom-mobile-header .mobile-enquire-btn a {
        padding: 8px 15px;
        font-size: 14px;
        white-space: nowrap;
    }
}








/* =================================================================
   STYLES FOR TRAINING & DEVELOPMENT PROGRAMS SECTION
==================================================================== */

/* Section container styling */
.training-programs-section {
    padding: 80px 0;
    background-color: #fff; /* Light background for the section */
}

/* Base styles for all training cards */
.training-card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 35px 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    height: 100%;
    text-align: left;
    /* Add a transparent border by default to prevent layout shift on hover */
    border: 2px solid transparent;
}

/* Hover effect for ALL cards */
.training-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(40, 150, 61, 0.15);
    /* Apply the primary color border on hover to all cards */
    border-color: var(--primary-color);
}

/* Icon styling */
.training-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: var(--primary-color);
    color: #ffffff;
    font-size: 28px;
    border-radius: 8px;
    margin-bottom: 25px;
}

/* Card heading styling */
.training-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #222; /* Darker text for headings */
}

/* Card paragraph styling */
.training-card p {
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
}






/* -----------------------------------------
   ISA IMPEX - CUSTOM PRODUCTS PAGE STYLES
----------------------------------------- */

/* --- General Section Styling --- */
.products-page-container {
    padding: 20px 0;
}

.product-category-section, .product-intro-section {
    padding: 80px 0;
}

.product-category-section.alt-bg {
    background-color: #f9f9f9;
}

.section-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 15px;
    color: #333;
}

/* Underline effect for titles */
.section-title::after {
    content: '';
    position: absolute;
    display: block;
    width: 80px;
    height: 3px;
    background: #28963d;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.section-subtitle {
    font-size: 18px;
    color: #666;
    max-width: 700px;
    margin: 0 auto 50px;
}

/* --- Introduction Section --- */
.product-intro-section .key-areas {
    margin-top: 40px;
}

.key-area-item {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease-in-out;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.key-area-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.key-area-item i {
    font-size: 48px;
    color: #007bff; /* Change this to your theme's primary color */
    margin-bottom: 20px;
}

.key-area-item h5 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

/* --- Product Grid & Card Styling --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.product-card {
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.product-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.product-card .card-title {
    padding: 20px 15px;
}

.product-card .card-title h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}
/* --- Optional Subsection Styling --- */
.product-subsection {
    margin-bottom: 60px; /* Adds space between subsections */
}

.subsection-title {
    font-size: 28px;
    font-weight: 600;
    color: #444;
    text-align: center;
    margin-bottom: 30px;
}

.subsection-description {
    font-size: 16px;
    color: #555;
    text-align: center;
    max-width: 800px;
    margin: 40px auto 0;
    line-height: 1.7;
}
/* --- Styling for Product Card Descriptions --- */

.product-card .card-title {
    /* Adjust padding to make room for the description */
    padding: 20px 25px 25px; 
}

.card-description {
    font-size: 14px;      /* Smaller font size than the title */
    color: #666;           /* A slightly lighter color for subtlety */
    line-height: 1.5;     /* Good spacing between lines */
    margin-top: 10px;     /* Space between title and description */
    font-weight: 400;     /* Standard font weight */
    margin-bottom: 0;
}

/* --- Responsive Design --- */
@media (max-width: 991px) {
    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 28px;
    }
    .section-subtitle {
        font-size: 16px;
    }
    .product-category-section, .product-intro-section {
        padding: 60px 0;
    }
    .product-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------
   ENHANCED HOVER EFFECT FOR PRODUCT CARDS
-------------------------------------------------- */

/* 1. Prepare the card for positioning the new border */
.product-card {
    position: relative; /* This is crucial for the pseudo-elements */
    overflow: hidden;   /* Ensures the animated border doesn't spill out */
}

/* 2. Create two pseudo-elements to act as the border L-shapes */
.product-card::before,
.product-card::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    width: 0;
    height: 0;
    /* 
       - Set the border color to your desired green.
       - The other borders are transparent.
    */
    border-color: #28a745; /* A nice, clean green. Change as you like. */
    
    /* - Define the animation speed and timing function */
    transition: width 0.25s ease-out, height 0.25s ease-out;
}

/* 
   3. Style the first L-shape (top and right borders).
      It starts from the top-left corner.
*/
.product-card::before {
    top: 0;
    left: 0;
    border-top: 3px solid transparent;    /* Start transparent */
    border-right: 3px solid transparent;  /* Start transparent */
}

/* 
   4. Style the second L-shape (bottom and left borders).
      It starts from the bottom-right corner.
*/
.product-card::after {
    bottom: 0;
    right: 0;
    border-bottom: 3px solid transparent; /* Start transparent */
    border-left: 3px solid transparent;   /* Start transparent */
}

/* 
   5. Animate the borders on hover.
      - We animate the width and height to 100%.
      - We also change the border color from transparent to green.
      - Using a slight delay on the height animation creates the "drawing" effect.
*/
.product-card:hover::before,
.product-card:hover::after {
    width: 100%;
    height: 100%;
    border-color: #28a745; /* Make borders visible */
    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; /* Height animation starts after width finishes */
}


.minimalist-top-bar a {
	color: #fff;                /* or your desired color */
	text-decoration: none;
	margin: 0 10px;
	transition: color 0.3s ease;
}

.minimalist-top-bar a:hover {
	color: #fff;             /* gold/yellow hover color */
	text-decoration: underline;
}