/*--------------------- Copyright (c) 2020 ----------------------- 
[Master Stylesheet] 
Project: Multifarious GYM
Version: 1.0.0 
Author: Kamleshyadav
 ------------------------------------------------------------------- 
[Table of contents] 
	1. Global CSS Start
	2. Comman CSS Start
    3. Preloader CSS Start
    4. Header CSS Start
    5. Banner CSS Start
    6. Assistant CSS Start
    7. About CSS Start
    8. Service CSS Start
    9. Case Study CSS Start
    10. Testimonial CSS Start
    11. Practice Area CSS Start
    12. Team CSS Start
    13. Blog CSS Start
    14. Partner CSS Start
    15. Newsletter CSS Start
    16. Footer CSS Start
    17. About Page Style
    18. Service Page Style
    19. Blog Page Style
    20. Contact Page Style
    21. Responsive CSS Start
-------------------------------------------------------------------*/
/********************************************************
    1. Global CSS Start
********************************************************/



.cookiewrapper{
    z-index: 10;
  position: fixed;
  bottom: 30px;
  left: 30px;
  max-width: 365px;
  background: #fff;
  padding: 25px 25px 30px 25px;
  border-radius: 15px;
  box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.15);
  text-align: center;

}
.cookiewrapper.hide{
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  transition: all 0.3s ease;
}
::selection{
  color: #fff;
  background: #9400D3;
}
.cookiewrapper img{
  max-width: 90px;
}
.cookiecontent header{
  font-size: 25px;
  font-weight: 600;
}
.cookiecontent{
  margin-top: 10px;
}
.cookiecontent p{
  color: #858585;
  margin: 5px 0 20px 0;
}
.cookiecontent .buttons{
  display: flex;
  align-items: center;
  justify-content: center;
}
.cookiebuttons button{
  padding: 10px 20px;
  border: none;
  outline: none;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 5px;
  background: #9400D3;
  cursor: pointer;
  transition: all 0.3s ease;
}
.cookiebuttons button:hover{
  transform: scale(0.97);
}
.cookiebuttons .item{
  margin: 0 10px;
}
.cookiebuttons a{
  color: #9400D3;
}









:root {
    --main-black: #000000;
    --white-color: #ffffff;
    --main-color: #44c5d1;
    --background-color: #f1fbfc;
    --heading-color:#534462;
    --text-color:#9497a1;

}

body {
    color: var(--main-lo-text-color);
    background: var(--main-bg-color);
    font-family: 'Poppins', sans-serif;
}
*,*:before,*:after{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
img {
    max-width: 100%;
}
input, textarea, select, button, label, svg, svg path, svg rect, svg polygon, img, a, :after, :before, :hover, :focus, .form-control:focus{
    outline: none !important;
    box-shadow:none;
}
ul{
    padding:0;
    margin:0;
    list-style-type: none;
}
p {
  margin: 0px;
  font-weight:400;
 font-size: 14px;
}
.container {
    max-width: 1200px;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
    font-family: 'Poppins', sans-serif;
}
/********************************************************
    2. Comman CSS Start
********************************************************/
.lo_btn {
    background: #ffffff;
    color: var(--main-color);
    display: inline-block;
    border: none;
    height: 50px;
    line-height: 50px;
    text-align: center;
    padding: 0 15px;
    min-width: 170px;
    margin-top: 10px;
    z-index: 0;
    overflow: hidden;
    position: relative;
    letter-spacing: .5px;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
    border-radius: 100px 100px 0px 100px;
    transition: all 0.5s linear;
}
.lo_btn:hover, .lo_btn.lo_white {
    color: var(--main-color);
    background: var(--white-color);
    border-radius: 100px 100px 100px 0px;
}
.lo_btn.lo_white:hover {
    color: var(--main-color);
    background: var(--main-color);
}
#scroll {
    background: var(--main-color);
    color: var(--main-bg-color);
}
/********************************************************
    3. Preloader CSS Start
********************************************************/
.preloader_active .preloader_holder {
    background-color: var(--main-bg-color);
}
.preloader_active .preloader_holder .preloader span {
    box-shadow: 0px 0px 0px 0px var(--main-color);
}
@-webkit-keyframes loadingCircles{
    0%{-webkit-transform: scale(0); opacity: 1; box-shadow: 0px 0px 0px 10px var(--main-color);}
    100%{-webkit-transform: scale(1); opacity: 0; box-shadow: 0px 0px 0px 2px var(--main-color);}
}
@-moz-keyframes loadingCircles{
    0%{-moz-transform: scale(0); opacity: 1; box-shadow: 0px 0px 0px 10px var(--main-color);}
    100%{-moz-transform: scale(1); opacity: 0; box-shadow: 0px 0px 0px 2px var(--main-color);}
}
@keyframes loadingCircles{
    0%{transform: scale(0); opacity: 1; box-shadow: 0px 0px 0px 10px var(--main-color);}
    100%{transform: scale(1); opacity: 0; box-shadow: 0px 0px 0px 2px var(--main-color);}
}
.preloader_open:before, .preloader_open:after {
    background-color: var(--main-bg-color);
}
/********************************************************
    4. Header CSS Start
********************************************************/
.lo_header_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 65px 85px 20px;
    z-index: 99;
    background-color:  #44c5d1;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.fixed_header.fixed {
    background-color: #44c5d1;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.language {
    background-color: #44c5d1;
    position: relative;
    left: 60px;
   
}


/* arrow scroller styles start */
.arrow-wrap {
    position: absolute;
    z-index: 20;
    left: 50%;
    bottom: -2.5em;
    margin-left: -5em;
    background: #ecf5f5;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 6px solid #fff;
}

.arrow {
    float: left;
    position: relative;
    width: 0px;
    height: 0px;
    left: 54px;
    top: 54px;
}

.arrow:after {
    content: url(../images/index/scroll_arw.png);
    position: absolute;
    top: -35px;
    left: -30px;
}
/* arrow scroller styles end */

.lo_header_info ul {
    display: flex;
    flex-wrap: wrap;
}
.lo_header_icon svg {
    height: 18px;
    fill: var(--main-color);
}
.lo_header_info ul li {
    margin-bottom: 16px;
    margin-left: 80px;
}
.lo_header_info ul li:first-child {
    margin-left: 0;
}
.lo_header_info ul li a {
    color: var(--main-bg-color);
}
.lo_header_icon {
    margin-right: 6px;
}
.lo_header_wrapper {
    padding: 26px 85px 25px;
}
.lo_header_info ul li a > span {
    color: var(--main-color);
    margin-right: 4px;
}
.lo_search_wrap span {
    font-size: 18px;
    font-weight: 500;
    padding-left: 5px;
}
.menu_btn_wrap .lo_header_call_btn  {
    margin: 0 0 0 40px;
    padding: 5px 20px 5px;
    background: #ffffff;
    color: var(--main-color);
    display: inline-block;
    border: none;
    height: 59px;
    line-height: 50px;
    letter-spacing: .5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
    border-radius: 100px 100px 0px 100px;
    transition: all 0.3s linear;
}
.menu_btn_wrap .lo_header_call_btn:hover {
    border-radius: 100px 100px 100px 0px;
}
.lo_search_wrap .display_flex {
    align-items: center;
}
.lo_search_wrap .display_flex li {
    display: flex;
}
.main_menu_wrapper ul > li > a {
    padding: 8px 20px;
    display: inline-block;
    font-weight: 400;
    font-size: 16px;
    color: #fff;
}
ul.sub_menu {
    background: #62cfda ;
}
/********************************************************
    5. Banner CSS Start
********************************************************/
.lo_banner_wrapper {
    width: 100%;
    z-index: 0;
    height: 1000px;
    background-image: url(../images/index/bannerbg.png);
    background-position: center;
    background-size: cover;
    animation: animate 25s linear infinite;
    /* padding: 200px 0 300px; */
}
.lo_banner_wrapper {
    position: relative;
}
.lo_banner_content h2 {
    font-size: 52px;
    font-weight: 400;
    color: var(--white-color);
    width: 550px;
    line-height: 1.2;
    padding: 0 0 15px 0;
}
.lo_banner_content p {
    font-size: 20px;
    color: var(--white-color);
    line-height: 1.5;
    padding: 0 0 25px 0;
}
.lo_banner_img {
    position: relative;
}
.lo_banner_img img {
    left: 35px;
    position: relative;
    top: 260px;
}
.lo_banner_btn .lo_btn {
    margin: 0;
    font-weight: 500;
}
.lo_banner_content {
    padding: 350px 0 100px;
    margin-left: 85px;
}
header {
    position: relative;
    z-index: 1;
}

/*=========bubblele Animation Start==========*/
 #bubble {
    position: absolute;
    top: 83%;
    animation: ufstige 55s linear infinite;
    opacity: 0;
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(70%,rgba(255,255,255,0)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%,rgb(234 247 249 / 2%) 50%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 );
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 12px 5px rgb(137 225 237);
    height: 50px;
    left: 10px;
    width: 50px;
    z-index: -1;
}
#bubble:after{
    content: "";
    position: absolute;
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(70%,rgba(255,255,255,0)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%);
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%,rgb(234 247 249 / 2%) 50%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 );
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 12px 5px rgb(137 225 237);
    opacity: 0.5;
    z-index: 1;
}
 
  #bubble:nth-child(2){
     left:10%;
     animation: ufstige 20s linear infinite 0.5s;
 }
  #bubble:nth-child(3){
    left:20%;
    animation: ufstige 15s linear infinite 1.7s;
}
 #bubble:nth-child(4){
    left:30%;
    animation: ufstige 17s linear infinite 3.9s;
}
 #bubble:nth-child(5){
    left:40%;
    animation: ufstige 20s linear infinite 1s;
}
 #bubble:nth-child(6){
    left:50%;
    animation: ufstige 15s linear infinite 6.3s;
}
 #bubble:nth-child(7){
    left:60%; animation: ufstige 9s linear infinite 0.9s;
}
 #bubble:nth-child(8){
    left:70%;
     animation: ufstige 18s linear infinite 1.1s
}
 #bubble:nth-child(9){
    left:80%;
     animation: ufstige 16s linear infinite 2.3s
}
 #bubble:nth-child(10){
    left:90%;
    animation: ufstige 20s linear infinite 1.5s
}


 #bubble:nth-child(11){
    left:5%;
    animation: ufstige2 16s linear infinite 9s;
}
 #bubble:nth-child(12){
   left:15%;
   animation: ufstige2 24s linear infinite 0.5s;
}
 #bubble:nth-child(13){
   left:25%;
   animation: ufstige2 13s linear infinite 2.9s;
}
 #bubble:nth-child(14){
   left:35%;
   animation: ufstige2 10s linear infinite 7s;
}
 #bubble:nth-child(15){
   left:45%;
   animation: ufstige2 23s linear infinite;
}
 #bubble:nth-child(16){
   left:55%; animation: ufstige2 16s linear infinite 4.5s;
}
 #bubble:nth-child(17){
   left:60%;
    animation: ufstige2 20s linear infinite 2.2s;
}
 #bubble:nth-child(18){
   left:75%;
    animation: ufstige2 33s linear infinite 3.6s;
}
 #bubble:nth-child(19){
   left:85%;
   animation: ufstige2 24s linear infinite 1s;
}

@keyframes ufstige{
   0% {
    transform: translateY(10px) scale(0.5);
    opacity: 0.4;
   }
   50%{
    transform: translateY(-500px) scale(1.1);
    opacity: 0.7;
   }
   100% {
    transform: translateY(-1000px) scale(1.1);
    opacity: 1;
   }
 } 

 @keyframes ufstige2{
    0% {
     transform: translateY(0) scale(0.5);
     opacity: 0.5;
    }
    50%{
     transform: translateY(-500px) scale(1);
     opacity: 0.8;
    }
    100% {
     transform: translateY(-1000px) scale(1.2);
     opacity: 1;
    }
  } 

/*=========bubblele Animation End==========*/
/********************************************************
    6. About CSS Start
********************************************************/
.lo_about_wrapper {
    margin: 150px 0 115px;
}
.lo_about_img_wrapper {
    position: relative;
}
.lo_about_img_wrapper:before {
    content: url(../images/index/about_bg.png);
    position: absolute;
    left: -25px;
    top: -40px;
    z-index: -1;
}
.lo_about_img {
    position: relative;
    overflow: hidden;
}
.lo_about_img{
    position: relative;
}
.lo_about_img:before {
    content: url(../images/index/about_bg.png);
    position: absolute;
    left: -25px;
    top: -40px;
    z-index: -1;
}
.lo_about_img_no a {
    background: #44c5d1;
    padding: 20px 30px;
    color: #fff;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}
.lo_about_img_no span {
    font-size: 18px;
    font-weight: 500;
    padding-left: 5px;
}
.lo_about_img_no {
    transform: rotateZ(-90deg);
}
.wow_img {
    position: absolute;
    top: 100px;
    left: -60px;
    animation: mymove 2s;
}
@keyframes mymove {
  from {top: -127px;opacity: 0.5;}
  to {top: 100px;opacity: 1;}
}
.lo_about_img_no img {
    transform: rotateY(-180deg);
}
.lo_about_btn a {
    background: #44c5d1;
    color: #fff;
    transition: 0.5s;
    box-shadow: 0px 12px 30px 0px rgba(75, 226, 240, 0.3);
}
.lo_about_btn a:hover {
    background: #44c5d1;
    color: #fff;
}
.lo_about_content h4 {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--main-color);
}
.lo_about_content h2 {
    font-size: 32px;
    font-weight: 400;
    padding: 12px 0 20px;
    width: 400px;
    line-height: 1.3;
}
.lo_about_content p{
    color: var(--text-color);
}
.lo_about_btn {
    margin-top: 25px;
}
.lo_about_content {
    margin-top: 10px;
}
/********************************************************
    7. Services CSS Start
********************************************************/
.lo_service_wrapper {
    background-color: #f2fbfc;
    padding: 80px 0;
    margin-top: 100px;
    background-image: -moz-linear-gradient( 180deg, rgb(235,249,250) 0%, rgb(253,255,255) 47%, rgb(244,252,253) 65%, rgb(235,249,250) 100%);
  background-image: -webkit-linear-gradient( 180deg, rgb(235,249,250) 0%, rgb(253,255,255) 47%, rgb(244,252,253) 65%, rgb(235,249,250) 100%);
  background-image: -ms-linear-gradient( 180deg, rgb(235,249,250) 0%, rgb(253,255,255) 47%, rgb(244,252,253) 65%, rgb(235,249,250) 100%);
}
.lo_service_heading h2 {
    font-size: 32px;
    text-align: center;
}
.lo_service_heading h2 {
    font-size: 32px;
    text-align: center;
    text-transform: initial;
}
.lo_service_box {
    text-align: center;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(243, 250, 251);
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    padding: 50px 20px;
    transition: all 0.4s;
}

.lo_service_box:hover{
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 28px 50px 0px rgba(97, 153, 163, 0.1);
}
.lo_service_box h3 {
    font-size: 18px;
    margin: 40px 0 20px;
    color: var(--heading-color);
    transition: all 0.4s;
}
.lo_service_box h3:hover {
    color: var(--main-color);
}
.lo_service_box p {
    color: var(--text-color);
}
.lo_service_icon img {
    width: 40px;
    position: relative;
    transform: rotate(-45deg);
    transition: all 0.4s;
}
.lo_service_box:hover .lo_service_icon img {
    transform: rotate(0deg);
}
.lo_service_icon {
    width: 80px;
    height: 80px;
    line-height: 80px;
    margin: auto;
    transform: rotate(45deg);
    border-radius: 10px;
    transition: all 0.4s;
}
.lo_service_box:hover .lo_service_icon {
    transform: rotate(0deg);
}
.lo_service_icon1{
background: #fff1cc;
}
.lo_service_icon2{
background: #f2e0fe;
}
.lo_service_icon3{
background: #fee0e0;
}
.lo_service_icon4{
background: #d4f8fc;
}
.lo_service_icon5{
background: #fcdbea;
}
.lo_service_icon6{
background: #e6f5d4;
}
.lo_service_box2 {
    margin-top: 30px;
}
.lo_service_section {
    margin-top: 40px;
}

/********************************************************
    8. People CSS Start
********************************************************/
.lo_people_content h5 {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--main-color);
}
.lo_people_content h2 {
    font-size: 32px;
    font-weight: 400;
    padding: 12px 0 20px;
    width: 500px;
    line-height: 1.3;
}
.lo_people_content p {
    color: var(--text-color);
}
.lo_people_content ol {
    color: var(--text-color);
}
.lo_people_icon {
    width: 60px;
    height: 60px;
    transform: rotate(45deg);
    border-radius: 10px;
    transition: all 0.4s;
    display: inline-block;
    vertical-align: middle;
}
.lo_people_icon:hover {
    transform: rotate(0deg);
}
.lo_people_icon:hover.lo_people_icon img {
    transform: rotate(0deg);
}
.lo_people_icon8 img {
    position: relative;
    transform: rotate(-45deg);
    margin: 20px;
    transition: 0.4s;
}
.lo_people_icon7 img {
    position: relative;
    transform: rotate(-45deg);
    margin: 19px;
    transition: 0.4s;
}
.lo_people_icon7 {
    background: #f2e0fe;
}
.lo_people_icon8 {
    background: #fff1cc;
}
.lo_people_icon_text h4 {
    font-size: 18px;
    font-weight: 600;
}
.lo_people_icon_box {
    display: inline-block;
    align-items: center;
    margin-top: 40px;
}
.lo_people_icon_text {
    margin-left: 40px;
    display: inline-block;
    width: calc(100% - 160px);
    vertical-align: middle;
}
.lo_people_icon_text p {
    padding: 5px 0 0;
}
.lo_people_btn a {
    background: #44c5d1;
    color: #fff;
    transition: 0.5s;
    box-shadow: 0px 12px 30px 0px rgba(75, 226, 240, 0.3);
}
.lo_people_btn a:hover {
    background: #44c5d1;
    color: #fff;
}
.lo_people_btn {
    margin-top: 30px;
}
.lo_people_img{
    position: relative;
}
.lo_people_img:before {
    content: url(../images/index/people_bg.png);
    position: absolute;
    left: -25px;
    top: -40px;
    z-index: -1;
}
.lo_people_wrapper {
    margin-top: 110px;
}
/********************************************************
    13. Testimonial CSS Start
********************************************************/
.lo_testimonial_wrapper {
    background: #f1fbfc;
    padding: 70px 0;
    margin: 80px 0;
}
.lo_testimonial_heading h2 {
    font-size: 32px;
    text-align: center;
    text-transform: initial;
}
.lo_testimonial_wrapper {
    background: #f2fbfc;
    position: relative;
    width: 100%;
    padding: 72px 0 80px;
    display: inline-block;
    background-image: -moz-linear-gradient( 180deg, rgb(235,249,250) 0%, rgb(253,255,255) 47%, rgb(244,252,253) 65%, rgb(235,249,250) 100%);
  background-image: -webkit-linear-gradient( 180deg, rgb(235,249,250) 0%, rgb(253,255,255) 47%, rgb(244,252,253) 65%, rgb(235,249,250) 100%);
  background-image: -ms-linear-gradient( 180deg, rgb(235,249,250) 0%, rgb(253,255,255) 47%, rgb(244,252,253) 65%, rgb(235,249,250) 100%);
}
.lo_testimonials_sectionInner:before {
    content: "";
    position: absolute;
    bottom: 30px;
    right: 30px;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 50px 0px rgba(70, 176, 195, 0.2);
    width: 100%;
    height: 100%;
}
.lo_testimonials_section {
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 50px 0px rgba(70, 176, 195, 0.2);
    width: 65%;
    margin: 70px auto;
}
.lo_testimonial_section p {
    color: var(--text-color);
}
.lo_client_quote h4 {
    font-size: 16px;
    font-weight: 600;
    padding: 10px 0 0;
}
.lo_testimonials_sectionInner {
    position: relative;
    z-index: 0;
    background: var(--main-bg-color);
    padding: 30px 30px 50px 0px;
}
.gallery-thumbs {
    width: 200px;
    margin: auto;
    margin-bottom: 21px;
}
.lo_testimonial_wrapper .swiper-slide .swiper_client_thumb img, .lo_testimonial_wrapper .gallery-thumbs .swiper-slide {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.lo_testimonial_wrapper .gallery-thumbs .swiper-slide .swiper_client_thumb img {
    border: 3px solid transparent;
}
.lo_testimonial_wrapper .gallery-thumbs .swiper-slide-active .swiper_client_thumb img, .lo_testimonial_wrapper .gallery-thumbs .swiper-slide-active {
    width: 75px !important;
    height: 75px;
    border-radius: 50%;
}
.lo_testimonial_wrapper .gallery-thumbs .swiper-slide-active .swiper_client_thumb img, .lo_testimonial_wrapper .gallery-thumbs .swiper-slide.swiper-slide-thumb-active .swiper_client_thumb img {
    border-style: solid;
    border-width: 3px;
    border-color: rgb(255 255 255);
    border-radius: 50%;
}
.gallery-thumbs .swiper-wrapper {
    display: flex;
    align-items: flex-end;
}
.lo_client_quote {
    display: flex;
    justify-content: center;
    margin-top: 6px;
    align-items: flex-end;
}
.swiper-container.gallery-top {
    position: unset;
}
.lo_client_quote p {
    margin-left: 8px;
    display: inline-block;
}

.lo_testimonial_section {
    background: url(../images/index/quote.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    display: inline-block;
    z-index: 1;
    padding: 0 80px 30px 40px;
}
.lo_testimonial_wrapper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 100%;
    background: #c6d8d8;
    opacity: .5;
    margin-left: 10px;
    text-align: center;
}
.lo_testimonial_wrapper span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #44c5d1;
    opacity: 1;
    margin-top: 35px;
}
.arrow_wrapper {
    display: flex;
    justify-content: center;
}
.swiper-slide.swiper-slide-prev {
    text-align: right;
}
.swiper-slide.swiper-slide-active + .swiper-slide.swiper-slide-next {
    text-align: left;
    z-index: -1;
}
/********************************************************
    13. Work Step CSS Start
********************************************************/
.lo_work_wrapper {
    background-color: rgb(255, 255, 255);
    padding: 80px 0;
    margin-top: 20px;
    
}



.lo_work_heading h2 {
    font-size: 32px;
    text-align: center;
    text-transform: initial;
}
.lo_work_icon{
    position: relative;
}
.lo_work_icon:before {
    content: url(../images/index/work_icon_bg.png);
    position: absolute;
    left: -15px;
    top: -15px;
    right: 0;
    z-index: -1;
    text-align: center;
    margin: auto;
}
.lo_work_step_btn p {
    color: #44c5d1;
    font-weight: 500;
    background: #e6f9fb;
}
.lo_work_step_text h5 {
    font-size: 18px;
    font-weight: 600;
}
.lo_work_step_text p {
    color: var(--text-color);
    margin-top: 10px;
}
.lo_work_steps_section ul {
    display: flex;
}
.lo_work_steps_section li {
    text-align: center;
}
.lo_work_step_btn p {
    color: #44c5d1;
    font-weight: 500;
    background: #e6f9fb;
    width: 150px;
    padding: 7px 10px;
    border-radius: 50px;
    margin: 30px auto;
    letter-spacing: 3px;
    transition: all 0.3s;
}
.lo_work_step_btn p:hover {
    color: #e6f9fb;
    background: #44c5d1;
}
.lo_work_steps_section {
    position: relative;
    margin-top: 50px;
}
.lo_work_steps_section:before {
    content: "";
    position: absolute;
    width: 80%;
    height: 1px;
    margin: auto;
    left: 110px;
    top: 103px;
    border: 0.5px dashed #e6f9fb;
    z-index: -1;
}
/********************************************************
    13. Pricing CSS Start
********************************************************/
.lo_pricing_heading h2 {
    font-size: 32px;
    text-align: center;
    text-transform: initial;
}
.lo_priceing_wrapper {
    background: #f2fbfc;
    position: relative;
    width: 100%;
    padding: 72px 0 80px;
    display: inline-block;
    margin-top: 80px;
    background-image: -moz-linear-gradient( 180deg, rgb(235,249,250) 0%, rgb(253,255,255) 47%, rgb(244,252,253) 65%, rgb(235,249,250) 100%);
  background-image: -webkit-linear-gradient( 180deg, rgb(235,249,250) 0%, rgb(253,255,255) 47%, rgb(244,252,253) 65%, rgb(235,249,250) 100%);
  background-image: -ms-linear-gradient( 180deg, rgb(235,249,250) 0%, rgb(253,255,255) 47%, rgb(244,252,253) 65%, rgb(235,249,250) 100%);
}
.lo_pricing_plan_box {
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 50px 0px rgba(70, 176, 195, 0.2);
    padding: 40px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.4s;
    width: 370px;
}
.lo_pricing_plan_box:hover, .lo_pricing_tab_section li.active .lo_pricing_plan .lo_pricing_plan_box  {
    background-color: var(--main-color);
    box-shadow: 0px 0px 50px 0px rgba(70, 176, 195, 0.2);
    color: var(--white-color);
}
.lo_pricing_plan_box:hover .lo_pricing_plan_type h5, 
.lo_pricing_tab_section li.active .lo_pricing_plan_box .lo_pricing_plan_type h5{
    color: var(--white-color);
}
.lo_pricing_plan_box:hover .lo_pricing_plan_price p, 
.lo_pricing_tab_section li.active .lo_pricing_plan_box .lo_pricing_plan_price p{
    color: var(--white-color);
}
.lo_pricing_plan_type h5 {
    font-size: 16px;
    font-weight: 600;
    color: var(--heading-color);
}
.lo_pricing_plan_price strong {
    font-size: 42px;
    font-weight: bold;
}
.lo_pricing_plan_price p {
    font-weight: 500;
    color: var(--heading-color);
}
.lo_pricing_plan_margin {
    margin-top: 30px;
}
.lo_pricing_table table {
    width: 100%;
    background: #fff;
}
.lo_pricing_table thead {
    background: #f7f8ff;
    transition: all 0.3s;
}
.lo_pricing_table th {
    padding: 10px 50px;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    width: 22%;
    color: var(--heading-color);
}
.lo_pricing_table td {
    padding: 10px 0px 10px 50px;
    text-align: left;
    font-size: 14px;
    color: #898d94;
    width: 22%;
}
.lo_pricing_table td.text-center {
    padding: 10px 0px 10px 0px;
}
.lo_pricing_table {
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 50px 0px rgba(70, 176, 195, 0.2);
    text-align: center;
    padding: 30px 0 30px;
    width: 775px;
    margin-left: 20px;
}
.lo_pricing_table h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 28px;
}
.lo_pricing_tab_section {
    display: flex;
    justify-content: space-evenly;
    margin-top: 40px;
}
/********************************************************
    13. Blog CSS Start
********************************************************/
.lo_blog_img_box {
    position: relative;
    transition: all 0.4s;
}
.lo_blog_img img {
    transition: all 0.4s;
}
.lo_blog_img {
    overflow: hidden;
    transition: all 0.4s;
}
.lo_blog_img:hover img {
    transition: all 0.4s;
    transform: scale(1.1);
}
.lo_blog_date {
    position: absolute;
    bottom: -27px;
    left: 22px;
}
.lo_blog_date h1 {
    color: #2c3e4a;
    font-size: 36px;
    font-weight: bold;
    background: #fff;
    width: 85px;
    text-align: center;
    padding: 10px;
}
.lo_blog_date p {
    color: #fff;
    background: var(--main-color);
    width: 85px;
    text-align: center;
}
.lo_blog_text {
    margin-top: 10px;
}
.lo_blog_text h3 {
    font-size: 20px;
    color: #2c3e4a;
    font-weight: 600;
    line-height: 32px;
    transition: all 0.3s;
}
.lo_blog_text p {
    color: #898d94;
    padding: 3px 0px 5px;
    text-align: justify;
}
.blogImgTextContainer p {
    padding-right: 15px;
}
.lo_blog_user_comment {
    display: flex;
    align-items: center;
    margin-top: 50px;
}
.lo_blog_text h3:hover {
    color: var(--main-color);
}
.lo_blog_heading h2 {
    font-size: 32px;
    text-align: center;
    text-transform: initial;
}
.lo_blog_wrapper {
    padding: 0px 0 80px;
    margin-top: 70px;
}
.lo_blog_heading {
    margin-bottom: 50px;
}
.lo_blog_user_comment a {
    font-size: 14px;
    color: #9497a1;
}
.lo_blog_comment {
    padding-left: 40px;
}
.lo_blog_user_comment img {
    padding-right: 4px;
}
/********************************************************
    13. Footer CSS Start
********************************************************/
footer {
    background-color: #2c2e44;
}
.lo_footer_section1_btn a {
    background: #44c5d1;
    padding: 20px 30px;
    color: #fff;
    padding: 5px 22px 5px;
    display: inline-block;
    border: none;
    height: 59px;
    line-height: 50px;
    letter-spacing: .5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
    border-radius: 0px 100px 100px 100px;
}
.lo_footer_section1_btn a:hover {
    border-radius: 100px 100px 0px 100px;
}
.lo_footer_wrapper .row {
    border-bottom: 1px solid #a0aebf42;
    padding: 0px 0 50px;
   
   
}
.lo_footer_wrapper .lo_footer_logo {
    border: none;
    position: absolute;  
    top: 40px;
    left: 0;
}
.lo_footer_wrapper .lo_footer_logo a:hover {
    border: none;
    
}
.lo_footer_section1_btn img {
    transform: rotateZ(90deg);
    padding-right: 4px;
}
.lo_footer_section1_text p {
    color: #acaebf;
    padding: 20px 0 15px;
}
.lo_footer_wrapper .lo_footer_section1_text h5 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    padding-bottom: 15px;
    position: relative;
}
.lo_footer_wrapper .lo_footer_section1_text h5:after {
display: none;
}
.lo_footer_wrapper .lo_footer_section1_text h5:before {
display: none;
}
.lo_footer_wrapper {
    padding: 80px 0 40px;
}
.lo_footer_wrapper a {
    color: #acaebf;
    font-size: 14px;
}
.lo_footer_wrapper h5 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    position: relative;
    margin-top: 10px;
    
}
.lo_footer_wrapper h5:before {
    position: absolute;
    content: "";    
    top: 30px;
    left: 0;
    width: 80px;
    height: 1px;
    background-color: var(--main-color);
}
.lo_footer_wrapper ul {
    margin-top: 40px;
    list-style-type: disc;
    color: #44c5d1;
   
    
}
.lo_footer_wrapper h5:after {
    position: absolute;
    content: "";
    top: 35px;
    left: 0;
    width: 50px;
    height: 0px;
    border-bottom: 1px solid var(--main-color);
}
.lo_footer_wrapper ul {
    margin-top: 30px;
    padding-left: 18px;
    
    
}
.lo_footer_section1_btn span {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}
.lo_footer_wrapper li {
    padding-bottom: 5px;
   
    
}
.lo_footer_wrapper a:hover {
    color: #44c5d1;
    border-bottom: 1px solid #44c5d1;
}
/*********Suscribe CSS Start**************/
.lo_suscribe_wrapper {
    text-align: center;
    margin-top: 10px;
    padding-bottom: 50px;
}
.lo_suscribe_text h6 {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--main-color);
}
.lo_suscribe_text h2 {
    font-size: 26px;
    color: #fff;
    padding: 25px 0 35px;
}
.lo_suscribe_input input[type="text"] {
    background: #32344b;
    border: none;
    padding: 12px 185px 12px 30px;
    border-radius: 70px;
    border: 1px solid #32344b;
    width: 570px;
}
.lo_suscribe_input input[type="text"]::placeholder {
    color: #acaebf;
}
.lo_suscribe_input_btn a {
    background: #44c5d1;
    color: #fff;
    padding: 6px 25px 0px;
    display: inline-block;
    border: none;
    height: 50px;
    line-height: 40px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
    border-radius: 80px;
    transition: all 0.4s;
    border: 2px solid #44c5d1;
    position: absolute;
    right: 0;
}
.lo_suscribe_input_btn {
    position: relative;
}
.lo_suscribe_input_btn a:hover {
    background: #ffffff;
    border: 2px solid #44c5d1;
    color: #44c5d1;
}
.lo_suscribe_input {
    display: flex;
    justify-content: center;
}
/*********Copyright CSS Start**************/ 
.lo_copyright_wrapper {
    background: #282a3d;
    text-align: center;
    padding: 15px 0;
    color: #fff;
}

/********************************************************
    14. About Page CSS Start
********************************************************/
.page_title_wrapper {
    position: relative;
    background: url(https://via.placeholder.com/1920x198);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    padding: 130px 0 80px;
    color: var(--main-bg-color);
}
.page_title_text h2 {
    font-size: 35px;
    font-weight: 700;
    color: var(--white-color);
    line-height: 1.2;
    padding: 0 0 15px 0;
}
.page_title_text ul {
    display: flex;
    justify-content: center;
}
.page_title_text ul > li:first-child {
    padding-left: 0;
}
.page_title_text ul > li a {
    color: var(--white-color);
}
.about_main_wrapper .lo_work_wrapper {
    margin-bottom: 80px;
}
/********************************************************
    15. Services Page CSS Start
********************************************************/
.service_main_wrapper .lo_service_wrapper {
    margin-top: 0px;
}
.lo_blog_section2 {
    margin-top: 40px;
}
/********************************************************
    16. Blog Page CSS Start
********************************************************/
.lo_blog_section2 {
    margin-top: 40px;
}
.blogPaginationWrapper {
    text-align: center;
    margin-bottom: 80px;
}
.blogPaginationWrapper ul li {
    display: inline-block;
    font-size: 18px;
}
.blogPaginationWrapper ul li a, .blogPaginationWrapper ul li.dot:hover a {
    color: var(--main-link-color);
    font-weight: 700;
    width: 40px;
    height: 40px;
    display: inline-block;
    text-align: center;
    background: var(--white-color);
    padding-top: 8px;
    font-size: 18px;
}
.blogPaginationWrapper ul li.active a, .blogPaginationWrapper ul li:hover a {
    color: var(--white-color);
    background: #44c5d1;
    width: 40px;
    height: 40px;
}
.blogPageBlockquote {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.blogPageBlockquote_img {
    width: 160px;
    margin-right: 10px;
    position: relative;
}
.blogPageBlockquote_img img.blogQuateUser {
    border: 4px solid #44c5d1;
    border-radius: 50%;
    width: 120px;
    height: 120px;
}
.blogBlockquoteQuate {
    width: calc(100% - 170px);
    color: var(--main-link-color);
    position: relative;
    text-align: center;
}
.blogBlockquoteQuate p, .blogQuateUser {
    text-align: left;
}
.blogQuateUser {
    font-size: 18px;
    font-weight: 600;
    color: var(--heading-color);
    width: 100%;
    display: inline-block;
}
.blogQuateUser:hover {
    font-size: 18px;
    font-weight: 600;
    color: var(--heading-color);
}
.blogQuateUser > span {
    color: var(--main-txt-color);
    font-size: 16px;
    font-weight: 400;
}
.blogImgTextContainer {
    display: flex;
    align-items: center;
}
.blogImgTextContainer img {
    width: 370px;
    display: inline-block;
    margin: 6px 15px 6px 0;
}
.blogAuthoreMessageBox {
    background: #44c5d1;
    border: none;
    border-radius: 0;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    margin: 74px 0 73px;
    color: var(--main-bg-color);
}
.blogAuthoreImg img {
    width: 110px;
    height: 110px;
    border: none;
    border-radius: 100%;
    object-fit: fill;
}
.blogAuthoreContent h5 {
    color: var(--main-bg-color);
    font-weight: 700;
    font-size: 20px;
}
.blogAuthoreContent p {
    color: #fff;
}
.blogAuthoreContent {
    width: 90%;
    padding: 20px;
}
.blogSectionHeading {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 26px;
}
.blogCommnets > ul > li {
    margin-bottom: 26px;
    display: inline-block;
}
.blogCommentHolder {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.blogCmntUser {
    width: 100px;
    height: 100px;
    overflow: hidden;
    margin-right: 30px;
}
.blogCmntDetail {
    width: calc(100% - 130px);
}
.blogCmntReply {
    color: #44c5d1;
    margin-left: 15px;
}
.blogCmntReply svg {
    width: 16px;
    fill: #44c5d1;
}
.blogCommentHolder2 {
    margin: 25px 0px 25px 100px;
}
.blogPageCommentForm {
    margin-top: 43px;
}
.blogPageCommentForm .blogSectionHeading {
    margin-bottom: 40px;
}
.blogPageBlockquote_img:before {
    content: "\f10e";
    right: 20px;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    color: #44c5d1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    width: 40px;
    height: 40px;
    line-height: 32px;
    background: var(--white-color);
    border: 5px solid #44c5d1;
    padding-left: 8px;
    border-radius: 100%;
}
.blogquotebox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #f2fbfc;
    padding: 20px;
    margin-bottom: 20px;
}
.blogBlockquoteQuate:before {
    content: "\f10e";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    color: #44c5d1;
    position: absolute;
    left: 0;
    right: 0;
    font-size: 84px;
    margin: auto;
    top: 50%;
    opacity: .1;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.blogSectionHeading {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 26px;
}
.blogInputField {
    margin-bottom: 30px;
}
.blogInputFieldInner {
    width: 100%;
    border: 1px solid var(--main-border-color);
    padding: 0 20px;
    height: 50px;
    border-radius: 6px;
    display: flex;
}
textarea.blogInputFieldInner {
    height: 150px;
    resize: none;
    padding: 12px 20px;
    margin-bottom: -30px;
}
.blog-de-footer {
    border: 1px solid rgba(19,27,35,.1);
    border-right: none;
    border-left: none;
    padding: 5px 0;
}
.lo_blog_calender i {
    color: #44c5d1;
    padding: 5px;
}
.lo_blog_calender a {
    font-size: 14px;
    color: #9497a1;
}
.lo_blog_calender {
    padding-left: 40px;
}
.align-items-center {
    align-items: center!important;
}
.social-icons li {
    display: inline-block;
    margin-left: 20px;
}
.tags-small a {
    background-color: #44c5d100;
    color: #9497a1;
    border-color: #44c5d1;
    padding: 5px 5px;
    transition: all 0.3s;
}
.tags-small a:hover {
    color: #44c5d1;
}
.blog-social i {
    color: #9497a1;
    transition: all 0.3s;
}
.blog-social i:hover {
    color: #44c5d1;
}
.lo-block-aside .lo-aside-title {
    color: var(--heading-color);
    font-weight: 600;
    padding: 0 0 7px 0;
    font-size: 20px;
    line-height: 30px;
}
.lo-aside-search02 {
    position: relative;
    padding: 2px 0 5px 0;
}
ul.lo-list-04 li {
    display: flex;
    align-items: center;
}
.lo_recent_post_text {
    margin-left: 10px;
}
.lo_recent_post_img img {
    width: 110px;
    height: 70px;
}
.lo-aside-search02 input.form-control {
    width: 100%;
    border: 1px solid var(--main-border-color);
    padding: 0 40px 0 20px;
    height: 50px;
    border-radius: 6px;
    display: flex;
    position: relative;
}
.lo-aside-search02 input::placeholder{
    color: var(--text-color);
}
a.lo-btn-icon {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #44c5d1;
}
.lo-aside .lo-block-aside:not(:first-child) {
    margin-top: 20px;
}

.lo-list-03 li {
    position: relative;
    padding: 10px 0px 0 28px;
}
.lo-list-03 li:before {
    content: '\f178';
    font-family: "FontAwesome";
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
    color: #44c5d1;
    font-size: 11px;
}
.lo-list-03 li a {
    color: #7b7b7b;
    -webkit-transition: color .2s;
    transition: color .2s;
}
ul.lo-list-03 a:hover {
    color: #44c5d1;
}
.lo-block-aside {
    margin-bottom: 30px;
}
.lo_recent_post_text .lo_blog_calender {
    margin-left: -40px;
    margin-top: 20px;
}
.lo_recent_post_text a {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-color);
    transition: all 0.4s;
}
.lo_recent_post_text a:hover{
   color: var(--main-color); 
}
.lo_blog_calender p {
    color: #44c5d1;
}
.lo_recent_post_img {
    margin-top: 15px;
}
.lo-list-tag {
    margin-left: -10px;
    margin-top: -3px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.lo-list-tag li {
    margin-top: 10px;
    margin-left: 10px;
    margin-left: 10px;
    margin-top: 10px;
}
.lo-list-tag li a {
    background-color: #f4f5f7;
    border: 2px solid #f4f5f7;
    color: #7b7b7b;
    border-radius: 100px 100px 0px 100px;
    padding: 5px 8px 5px;
    display: inline-block;
    -webkit-transition: color .2s,background-color .2s,border-color .2s;
    transition: color .2s,background-color .2s,border-color .2s;
}
.lo-list-tag li a:hover {
    background-color: #44c5d1;
    color: #fff;
    border-color: #44c5d1;
}
/********************************************************
    17. Contact Page CSS Start
********************************************************/
.cs_info_bg {
    background: #44c5d1;
    margin-bottom: 55px;
    margin-left: 40px;
    margin-top: 45px;
    margin-right: -30px;
}
.cs_contact_info {
    padding: 60px 35px 0 50px;
    color: #44c5d1;
}
.cs_contact_info .cs_sub_heading {
    color: var(--main-bg-color);
    margin-bottom: 28px;
    font-size: 26px;
}

.relative {
    position: relative;
}
.cs_sub_heading {
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 22px;
    text-transform: capitalize;
}
.cs_conatact_section3:before {
    display: none;
}
.cs_conatact_section {
    margin-bottom: 35px;
    padding-bottom: 35px;
    position: relative;
}
.cs_conatact_section:before {
    content: "";
    border-bottom: 1px solid var(--main-bg-color);
    position: absolute;
    bottom: 0px;
    left: -50px;
    right: -50px;
    opacity: 0.2;
}
.cs_conatact_section3:before {
    display: none;
}
.cs_contact_info_inner {
    padding: 0 0 0 30px;
    font-size: 16px;
    position: relative;
    line-height: 25px;
    color: #fff;
}
.loc_contact_info_inner {
    color: #fff;
    padding: 0 0 0 25px;
    font-size: 18px;
    position: relative;
    line-height: 28px;
}
.cs_contact_info_inner span {
    position: absolute;
    left: 0;
    top: 0;
}
.cs_contact_form {
    background: #fff;
    box-shadow: 0px 0px 30px 0px rgba(157, 134, 183, 0.1);
    padding: 50px;
}
.cs_contact_form .cs_sub_heading {
    margin-bottom: 30px;
    font-size: 26px;
    color: var(--heading-color);
}
.cs_contact_form .cs_field_holder {
    margin-bottom: 33px;
}
.cs_form_field {
    width: 100%;
    border: 1px solid var(--main-border-color);
    padding: 0 20px;
    height: 50px;
    display: flex;
}
.cs_contact_form .cs_field_holder {
    margin-bottom: 33px;
}
.cs_field_holder textarea#message {
    height: 150px;
}

textarea.cs_form_field {
    height: 150px;
    resize: none;
    padding: 12px 20px;
}
button.loc_btn {
    background-color: #44c5d1;
    color: #fff;
    border: solid 2px #44c5d1;
    padding: 10px 50px;
    height: 50px;
    width: auto;
    text-align: center;
    transition: all 0.5s;
    font-weight: 500;
    display: inline-block;
    border-radius: 100px 100px 0px 100px;
}
button.loc_btn:hover {
    border-radius: 100px 100px 100px 0px;
}
.cs_contact_info_inner svg {
    width: 16px;
    fill: #fff;
}
.loc_contact_info_inner svg {
    fill: #fff;
    width: 16px;
}
.cs_contact_form_wrapper {
    margin: 80px 0;
}
.cs_map_wrapper {
    margin-bottom: -7px;
}
.cs_map_wrapper .container-fluid {
    padding-right: 0;
    padding-left: 0;
}
   
.mp_box {
        width: 380px;
        height: 480px;
        position: relative;
        margin: 6% auto;
        background: #eee;
        padding: 5px;
        overflow: hidden;
}  
.mp_button {
        width: 240px;
        margin: 35px auto;
        position: relative;
        box-shadow: 0 0 20px 9px #6be7f3;
        border-radius: 30px;
}
.mp_toggle_btn {
        padding: 10px 30px;
        cursor: pointer;
        background: transparent;
        border: 0;
        outline: none;
        position: relative;      
    }
#mp_btn {
       top: 0;
        left: 0;
        position: absolute;
        width: 130px;
        height: 100%;
        background: linear-gradient(to right, #6be7f3, #40ca6e);
        border-radius: 30px;
        transition: .5s;     
    }

.mp_sub_heading {
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 22px;
    text-transform: capitalize;
    text-align: center;
}

.mp_input_group {
    top: 180px;
    position: absolute;
    width: 280px;
    transition: .5s;
}

.mp_input_field {
    width: 100%;
    padding: 10px 0;
    margin: 5px 0;
    border-left: 0;
    border-top: 0;
    border-right: 0; 
    border-bottom: 1px solid #999;
    outline: none;
    background: transparent;
}

.mp_submit_btn {
    width: 85%;
    padding: 10px 30px;
    cursor: pointer;
    display: block;
    margin: auto;
    background: linear-gradient(to right, #6be7f3, #40ca6e);
    border: 0;
    outline: none;
    border-radius: 30px;
}

.mp_check_box {
    margin: 30px 10px 30px 0;
}
span{
    color: #777;
    font-size: 12px;
    bottom: 68px;
    position: absolute;
}

#mp_login {
    left: 50px;
}

#mp_register{
    left: 450px;
}


/********************************************************
    17. Responsive CSS Start
********************************************************/
@media screen and (min-device-width: 1400px) and (max-device-width: 1800px){
.lo_banner_img img {
    right: 0px; 
}
.lo_banner_content {
     margin-left: 0px; 
}
}
@media (max-width: 1400px){
    .lo_banner_content {
    margin-left: 0;
}
.lo_banner_content h2 {
    width: 100%;
}
.main_menu_wrapper ul > li > a {
    padding: 12px 15px;
}
.lo_banner_wrapper {
    padding: 200px 0 0px;
}
.lo_banner_img img {
    right: 0;
    position: relative;
    top: 0;
    width: 100%;
    display: inherit;
}
.lo_banner_content {
    padding: 150px 0 100px;
}
}
@media (max-width: 1200px){
.lo_pricing_plan_box {
    width: 320px;
}
.lo_pricing_table {
    width: 650px;
}
.lo_pricing_table th {
    padding: 10px 25px;
}
.lo_pricing_table td {
    padding: 10px 0px 10px 25px;
}
.lo_people_img:before {
    left: -85px;
}
.lo_banner_content {
    margin-left: 0;
}
.lo_banner_content h2 {
    font-size: 40px;
    width: 100%;
}
.lo_banner_wrapper {
    padding: 200px 0 0;
}
.main_menu_wrapper ul > li > a {
    padding: 12px 10px;
}
.menu_btn_wrap .lo_header_call_btn {
    padding: 5px 20px 5px;
    margin: 0 0 0 10px;
}
.lo_header_wrapper {
    padding: 26px 20px 25px;
}
.gallery-thumbs {
    width: 220px;
}
}
@media (max-width: 1024px){
.lo_pricing_table {
    width: 500px;
}
.lo_pricing_plan_box {
    width: 290px;
}
.lo_pricing_table th {
    padding: 10px 60px;
}
.lo_pricing_table td {
    padding: 10px 0px 10px 15px;
}
.lo_pricing_table {
    margin-left: 0px;
}
.lo_pricing_table td {
    padding: 10px 0 10px 60px;
}
.lo_banner_wrapper {
    padding: 200px 0 35px;
}
}
@media (max-width: 991.98px) {
.main_menu_wrapper li.has_submenu:before, .main_menu_wrapper li.has_submenu:after {
    background: var(--main-color);
}
.main_menu_wrapper ul > li > a {
    padding: 15px 20px 0px;
    width: 100%;
    color: #44c5d1;
}
.main_menu_wrapper li.has_submenu:before, .main_menu_wrapper li.has_submenu:after {
    background: var(--main-color);
}
.main_menu_wrapper li.has_submenu:before {
    right: 26px;
    width: 2px;
    height: 12px;
    top: 20px;
}
.display_flex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}
.main_menu_wrapper li.has_submenu:before, .main_menu_wrapper li.has_submenu:after {
    position: absolute;
    bottom: 0;
    content: '';
}
.main_menu_wrapper li.has_submenu:before, .main_menu_wrapper li.has_submenu:after {
    background: var(--main-color);
}
.main_menu_wrapper li.has_submenu:after {
    right: 21px;
    width: 12px;
    height: 2px;
    top: 25px;
}
.main_menu_wrapper li.has_submenu:before, .main_menu_wrapper li.has_submenu:after {
    position: absolute;
    bottom: 0;
    content: '';
}
.menu_btn span {
    display: block;
    width: 18px;
    height: 2px;
    transition: 0.3s;
    margin: 0 auto 3px;
    background: #ffffff !important;
}
ul.sub_menu {
    background: #fff ;
}
.lo_header_wrapper {
    position: absolute;
}
}
@media (max-width: 991px){
.lo_footer_section3 {
    margin-top: 40px;
}
.lo_footer_section4 {
    margin-top: 40px;
}
.lo_footer_wrapper {
    margin-left: 15px;
}
.lo_people_img {
    margin-top: 90px;
    text-align: center;
}
.lo_people_img:before {
    left: 20%;
}
.lo_banner_content {
    margin-left: 0;
}
.lo_banner_content h2 {
    width: 100%;
}
.lo_banner_content {
    padding: 0px 0 100px;
}
.lo_banner_wrapper {
    padding: 200px 0 0px;
    height: auto;
}
.lo_pricing_table {
    width: 430px;
}
.page_title_wrapper {
    padding: 160px 0 160px;
}
.lo_blog_sidebar_wrapper {
    margin-top: 30px;
}
.lo_sblog_icon {
    margin-top: 10px;
}
.blogImgTextContainer {
    display: block;
}
}
@media (max-width: 768px){
.lo_pricing_tab_section {
    display: block;
}
.lo_pricing_table {
    width: 100%;
    margin-top: 30px;
}
.lo_pricing_plan_box {
    width: 100%;
}
.lo_pricing_table th {
    padding: 10px 30px;
}
.lo_pricing_table td {
    padding: 10px 0 10px 30px;
}
.lo_people_img:before {
    display: none;
}
.gallery-thumbs {
    width: 78px;
}
#bubble {
    position: fixed;
    top: 70%;
    -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
}
.lo_blog_section {
    margin-bottom: 30px;
}
.cs_info_bg {
    margin-left: 0px;
    margin-right: 0px;
}
.lo_blog_section2 {
    margin-top: 0px;
}
.blogCommentHolder2 {
    margin: 25px 0px 25px 0px;
}
.blogAuthoreImg img {
    width: 125px;
}
.blogImgTextContainer {
    display: block;
}
.lo_service_box {
    margin-top: 30px;
}
.lo_about_img_wrapper:before{
display: none;
}
}
@media (max-width: 567px){
    .lo_people_img:before {
    display: none;
}
.lo_testimonial_section {
    padding: 0 30px 30px 5px;
}
.lo_people_content h2 {
    width: 100%;
}
.lo_work_steps_section ul {
    display: block;
}
.lo_work_step_box {
    margin-bottom: 50px;
}
.lo_about_img:before{
    display: none;
}
.lo_service_box {
    margin-bottom: 30px;
}
.lo_service_box2 {
    margin-bottom: 0px;
}
.lo_blog_section {
    margin-bottom: 30px;
}
.lo_footer_section2 {
    margin-top: 50px;
}
.lo_suscribe_input input[type="text"] {
    padding: 15px 185px 15px 30px;
    width: 100%;
}
.lo_about_content h2 {
    width: 100%;
}
.lo_work_steps_section:before{
    display: none;
}
.lo_header_wrapper.fixed {
    padding: 20px 0px;
}
.lo_blog_section2 {
    margin-top: 0px;
}
.blogImgTextContainer {
    display: block;
}
.lo_blog_user_comment {
    display: block;
}
.blogquotebox {
    display: block;
}
.blogBlockquoteQuate {
    width: 100%;
    padding: 15px 0px;
}
.blogAuthoreMessageBox {
    display: block;
    padding: 30px 30px 20px;
}
.lo_recent_post_img img {
    width: 90px;
    height: 70px;
}
.lo_sblog_icon {
    margin-top: 10px;
}
.lo_blog_comment {
    padding-left: 0;
    margin: 10px 0;
}
.lo_blog_calender {
    padding-left: 0;
}
.blogAuthoreImg img {
    width: 110px;
}
ul.display_flex .cs_header_btn {
    display: none;
}
.lo_blog_calender p {
    padding-left: 35px;
}
.cs_map_wrapper .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}
.lo_banner_content h2 {
    font-size: 24px;
}
.lo_banner_content p{
    font-size: 14px;
}
.lo_about_content h2 {
    font-size: 24px;
}
.lo_service_heading h2 {
    font-size: 24px;
}
.lo_people_content h2 {
    font-size: 24px;
}
.lo_testimonial_heading h2 {
    font-size: 24px;
}
.lo_work_heading h2 {
    font-size: 24px;
}
.lo_pricing_heading h2 {
    font-size: 24px;
}
.lo_pricing_plan_price strong {
    font-size: 28px;
}
.lo_blog_heading h2 {
    font-size: 24px;
}