@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&display=swap');
*{ box-sizing: border-box;}
html{overflow-x: hidden; scroll-behavior: smooth;}
body{ margin: 0; font-family: Barlow; font-size: 16px; color: #1f2732; line-height: 1.4;}

a{ color: #00bea3; text-decoration: none;}
a:hover{ text-decoration: none; color: #1f2732;}
img{ border: none; max-width: 100%;}

.row{margin-left:-15px;margin-right:-15px}
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-5-new{float:left;min-height:1px;padding-left:15px;padding-right:15px;position:relative}
.col-12{width:100%}
.col-11{width:91.6667%}
.col-10{width:83.3333%}
.col-9{width:75%}
.col-8{width:66.6667%}
.col-7{width:58.3333%}
.col-6{width:50%}
.col-5{width:41.6667%}
.col-4{width:33.3333%}
.col-3{width:25%}
.col-2{width:16.6667%}
.col-1{width:8.33333%}
.col-5-new{width:20%}

.f-right{ float: right;}
.f-left{ float: left;}

.button, input[type="submit"], button, input[type="button"]{margin-top:35px; background: #00bea3; border:solid 1px #00bea3; color: #fff; border-radius: 50px; padding: 10px 30px; font-size: 20px; font-weight: 500; display: inline-block; cursor: pointer; text-transform: uppercase;}
.button:hover, input[type="submit"]:hover, button:hover, input[type="button"]:hover{ background: none; color: #00bea3; text-decoration: none;}
input[type="submit"]:focus{
  outline: none;
}
.button-small{ padding: 5px 30px; font-size: 16px;}
.button-dark{ background: #1f2732; border:solid 1px #1f2732;}
.button-dark:hover{background: none; color: #1f2732;}
.button-gray{ background: #87898c; border:solid 1px #87898c;}
.button-gray:hover{ color: #87898c; background: none;}

.header{ border-bottom: solid 1px rgba(255,255,255,0.1); padding: 20px 0;  width: 100%; float: left; position: absolute;}
.main{ max-width: 1170px; width: 100%; margin: 0 auto;}
.logo{ float: left; margin-top: -20px; margin-bottom: -65px; padding-right: 63px; background: url("../images/logo-bg-right.png") no-repeat right bottom; padding-top: 10px; padding-bottom: 22px; position: relative;}
.logo:before{ content: ""; background: url("../images/logo-bg.png"); width: 10000px; right: 63px; position: absolute; top:0; bottom: 0;}
.logo a{ position: relative}
.logo img{ vertical-align: middle;}
.navi{ float: right;}

.navi ul{ margin: 0; padding: 0; list-style-type: none;}
.navi ul li{ display: inline; padding: 0 30px; float: left;}
.navi ul li:last-child{ padding-right: 0;}
.navi ul li a{ line-height: 23px; color: #fff; text-transform: uppercase; font-weight: 600;}
.navi ul li.active a,
.navi ul li a:hover{ text-decoration: none; color: #00bea3}

.language-switcher{ float: right; margin-left: 35px; position: relative; margin-bottom: -8px;}
.language-switcher a.flag{ position: relative; padding-right: 20px;}
.language-switcher a.flag:before{border-color: #d2d3d5 transparent transparent; border-style: solid solid solid; border-width: 7px 5px 0; content: ""; height: 0; position: absolute; right: 0; top: 1px; width: 0;}
.language-switcher ul{ display: none; background: #fff; border-radius: 7px; padding: 0; width: 150px; position: absolute; right: 0; top: 43px; list-style-type: none; margin: 0; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);}
.language-switcher ul:before{border-color: transparent transparent #fff; border-style: solid solid solid; border-width: 0 7px 9px; content: ""; height: 0; position: absolute; right: 13px; top: -9px; width: 0;} 
.language-switcher ul li{padding: 15px 15px; padding-bottom: 0;}
.language-switcher ul li:last-child{padding-bottom: 15px;}
.language-switcher ul li a{ color: #1f2732; font-weight: 500;}
.language-switcher ul li a img{ vertical-align: middle; margin-right: 10px;}
.language-switcher ul li a:hover{ color: #00bea3;}



.banner{ background: #1f2732 url("../images/banner-bg.png") no-repeat center bottom;  padding-top: 95px; padding-bottom: 112px; display: inline-block; width: 100%;}
.banner-main{ width: 100%; display: flex; align-items: center; color: #fff;}
.banner-left{ padding-right: 30px; width: 50%;}
.banner-right{ width: 50%;}
.banner h1{ font-size: 60px; font-weight: 600; line-height: 1.3; margin: 10px 0;}
.banner p{ margin: 10px 0 30px; font-size: 20px;}

.section{ width: 100%; padding: 70px 0; float: left;}
h2.title{ font-size: 30px; font-weight: 600; color: #1f2732; text-transform: uppercase; margin: 0 0 30px; text-align: center; position: relative;}
/*h2.title:after{ content: ""; width: 110px; height: 4px; border-radius: 30px; background: rgba(0,190,163,0.20); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
h2.title:before{  content: ""; width: 10px; height: 10px; border-radius: 100%; background: rgba(0,190,163,1); position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); }*/

h2.title .bar { height: 5px; width: 90px; background: #cdf1d8; margin: 20px auto; position: relative; border-radius: 30px;}
h2.title.title-left .bar{ margin: 20px 0;}
h2.title .bar::before { content: ''; position: absolute; left: 0; top: -2.7px; height: 10px; width: 10px; border-radius: 50%; background: #44ce6f; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: MOVE-BG; animation-name: MOVE-BG;}

@-webkit-keyframes MOVE-BG {
  from {
    -webkit-transform: translateX(0); transform: translateX(0);
  	}
  to {
    -webkit-transform: translateX(82px); transform: translateX(82px);
	}
}

@keyframes MOVE-BG {
  from {
    -webkit-transform: translateX(0); transform: translateX(0);
	}
  to {
    -webkit-transform: translateX(82px); transform: translateX(82px);
	}
}


.service .col-6{ margin: 50px 0;}
.service-icon{ float: left; width: 90px;}
.service-content{ width: calc(100% - 122px); float: right;}
.service-content h3{ font-size: 20px; font-weight: 600; color: #1f2732; margin: 0;}
.service-content p{ margin: 7px 0;}

.button-center{ text-align: center;}
h2.title.title-left{ text-align: left;}
h2.title.title-left:after{ left: 0; transform: none;}
h2.title.title-left:before{ left: 30px; transform: none;}

.counter{ background: #1f2732;}
.counter-icon{ min-height: 65px;}
.counter .col-3{ text-align: center;}
.counter-value{ color: #fff; font-size: 32px; font-weight: 600; padding-bottom: 5px;}
.counter-label{ color: #00bea3; font-size: 16px; font-weight: 600;}

.why-us .col-4{ padding:15px 0; }
.why-us .why-us-icon{ float: left; width: 30px;}
.why-us .why-us-content{ float: right; width: calc(100% - 50px); padding-right: 20px;}
.why-us .why-us-content h3{ font-size: 18px; font-weight: 600; margin: 0 0 7px}
.why-us .why-us-content p{ margin-top: 0;}

.call-to-action{ background: url("../images/call-to-action-bg.png") no-repeat center center / cover;}
.call-to-action-wrapper{ display: flex; align-items: center; width: 100%;}
.call-to-action-left{ float: left; width: 70%;}
.call-to-action-right{ float: right; width: 30%; text-align: center;}
.call-to-action-title{ color: #fff; font-size: 33px ;font-weight: bold; text-transform: uppercase;}
.call-to-action-content{ color: #fff; font-size: 20px; font-weight: 500;}
.call-to-action .button{ background: #1f2732; border-color: #1f2732;}
.call-to-action .button:hover{ background: none; border-color: #1f2732; color: #1f2732;}

.client-testmonial .item{ padding: 15px 15px;}
.testmonial-box{  border-radius: 13px; background:  url("../images/quote-icon-top.png") no-repeat left top , url("../images/quote-icon-bottom.png") no-repeat right bottom #fff ; box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.15); text-align: center; padding: 30px;}
.testmonial-image{ width: 90px; margin: 0 auto; height: 90px;}
.testmonial-image img{ border-radius: 100%; width: 90px; height: 90px;}
.testmonial-name{ font-size: 18px; font-weight: 600; padding-bottom: 5px;}
.testmonial-content{ margin: 15px 0; height: 90px; overflow: hidden;}
.testmonial-description{ font-size: 14px; font-weight: 600; color: #8f9398}
.section .owl-carousel .owl-nav button.owl-next, .section .owl-carousel .owl-nav button.owl-prev{ position: absolute; left: -70px; width: 40px; height: 40px; top: 50%; transform: translateZ(-50%); background: #1f2732; color: #00bea3; font-size:45px;}
.section .owl-carousel .owl-nav button.owl-next{ left: auto; right: -70px;}

.section .owl-carousel .owl-nav button.owl-next span,
.section .owl-carousel .owl-nav button.owl-prev span{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 40px; width: 40px; line-height: 30px; }

.section .owl-carousel .owl-nav button:hover{ opacity: 0.8;}
.section .owl-carousel .owl-dots{ display: none;}
.gray-bg{ background: #f9f9f9}
.trusted-by-over .row{ display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
.trusted-by-over .col-3{ text-align: center; min-height: 116px; padding-top: 20px; padding-bottom: 20px; display: flex; align-items: center; justify-content: center;}

.contact-content{ font-size: 18px; font-weight: 500; color: #333; text-align: center; max-width: 430px; margin: 0 auto;}

.contact form ul{ list-style-type: none; margin: 0; padding: 0;}
.contact form ul li{ width: 48%; margin-right: 4%; margin-bottom: 4%; float: left;}
.contact form ul li:nth-child(2n+2){ margin-right: 0;}
.contact form ul li:last-child{ margin-bottom: 0;}
.contact form ul li.full{ width: 100%; margin-right: 0;}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="week"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="color"],
textarea,select{ background: none; font-family: Barlow; margin: 0; padding: 13px 0; border: none; border-bottom:solid 1px #d2d4d6; outline: none !important; box-shadow: none !important; font-weight: 500; font-size: 100%; width: 100%;}
textarea{ height: 155px; border:solid 1px #d2d4d6; padding: 7px 10px; background: #fff;}
 select{background: url("../images/select-arrow.png") no-repeat center right 15px #f2f2f2; font-size: 15px ;font-weight: 600; color: #1f2732; border-radius: 7px; height: 30px; border: none; padding: 0 10px; -moz-appearance:none; -webkit-appearance:none; appearance:none;}

.contact form ul li input[type="text"],
.contact form ul li input[type="email"],
.contact form ul li input[type="tel"],
.contact form ul li textarea{background: #f9f9f9;border: none; padding: 13px 25px;}

footer{ background: #1f2732; width: 100%; float: left;}
.footer-top{ border-bottom: solid 1px rgba(255,255,255,0.2); padding: 20px 0; float: left; width: 100%;}
.footer-top .footer-navi { padding: 0; margin: 0; float: left;}
.footer-top .footer-navi li{ display: inline-block; position: relative;}
.footer-top .footer-navi li:after{ content: " | "; color: #fff; font-weight: 500; padding: 0 30px;}
.footer-top .footer-navi li:last-child:after{ display: none}
.footer-top .footer-navi li a{ font-weight: 500; color: #fff; }
.footer-top .footer-navi li.active a,
.footer-top .footer-navi li a:hover{color: #00bea3; text-decoration: none;}
.footer-bottom{ text-align: center; color: #d2d4d6; padding: 20px 0; display: inline-block; width: 100%;}
.footer-social{ float: right;}
.footer-social a{ width: 22px; height: 22px; margin: 0 20px; overflow: hidden; text-indent: -999px; float: left; background: url("../images/social-icon.png") no-repeat center -2px;}
.footer-social a:hover{background-position: center -40px;}
.footer-social a.twitter{ background-position: center -78px;}
.footer-social a.twitter:hover{ background-position: center -118px; }
.footer-social a.instagram{ background-position: center -159px;}
.footer-social a.instagram:hover{ background-position: center -199px;}

/*inner page*/
.inner-banner{ text-align: center; padding-top: 125px; padding-bottom: 212px;}
.inner-banner h1{ text-transform: uppercase; text-align: center; width: 100%;}

.banner.inner-banner{ background: url("../images/contact-bg.jpg") no-repeat center center / cover; padding-top: 0; padding-bottom: 0;}
.banner.inner-banner.solutions-banner{ background: url("../images/solutions-bg.jpg") no-repeat center center / cover; }
.banner.inner-banner.about-banner{ background: url("../images/about-bg.jpg") no-repeat center center / cover; }
.contact-banner {padding-top: 195px; padding-bottom: 212px; background: url("../images/banner-bg.png") no-repeat bottom center;  width: 100%; float: left;}
.contact-bottom{ padding-top: 0; text-align: center;}
.contact-bottom-icon{ height: 60px;}
.contact-bottom p{ font-size: 18px; font-weight: 500;}
.contact-bottom a{ color: #1f2732}
.contact-bottom a:hover{ text-decoration: none; color: #00bea3}

.login-box .login-box-main{ max-width: 400px; margin: 0 auto; text-align: center}
.login-box .login-box-main form ul{ margin: 0; padding: 0; list-style-type: none;}
.login-box .login-box-main form ul li{ margin-bottom: 10px;}
.login-box .login-box-main form .button{ width: 100%; margin-top: 30px;}
.login-box .login-box-main form ul li.forgot-password-link{  text-align: right}
.login-box .login-box-main form ul li.forgot-password-link a{color: #7f7f7f; font-size: 16px; font-weight: 600;}
.login-box .login-content{ font-size: 18px; font-weight: 600; margin-bottom: 20px; color: #333;}
.only-mobile{ display: none;}
.mobile-menu-icon{ display: none;}
.login-box .login-box-main form label{
  position: relative;
  display: flex;
  align-items: center;
  color: #00bea3;
  font-weight: 500;
  letter-spacing: 5px;
  text-transform: capitalize;
}
.login-box .login-box-main .panel-title{
  position: relative;
  font-size: 28px;
  font-weight: 500;
  text-transform: capitalize;
}
.login-box .login-box-main .panel-title:before{
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: #00bea3;
  height: 3px;
  width: 50px;
}
.login-box .login-box-main .panel-title:after{
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #00bea3;
  height: 3px;
  width: 50px;
}
.login-box .login-box-main .alert-danger{
  color: #ff0000;
  font-weight: 500;
}
.login-box .login-box-main .alert-danger button{
  display: none;
}
.login-box .login-box-main .panel-other-acction{
  font-weight: 500;
}
.team-content{ padding: 0 7% 40px; text-align: center;}
.team-member{ text-align: center;}
.team-member-img{ padding-bottom: 15px;}
.team-member-name{ color: #1f2732; font-size: 18px; font-weight: 600; padding-bottom: 5px;}
.team-member-position{ color: #8f9398; font-size: 14px; font-weight: 600;}
/*price*/
.section.pricing{padding: 70px 0 30px;}
.pricing-box-inner{ border-radius: 27px; background:#fff; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.11);}
.pricing-box-header{ background: url("../images/price-header-bg.png") no-repeat center bottom #71a749; background-size: 100% auto; padding: 40px 30px 90px; border-radius: 27px 27px 0 0; text-align: center; color: #fff;}
.plan-name{ font-size: 18px; font-weight: 600; text-transform: uppercase; padding-bottom: 20px; margin-bottom: 15px; position: relative;}
.plan-name:before{ content: ""; width: 25px; height: 3px; border-radius: 5px; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background: #fff;}
.plan-limit{font-size: 24px; font-weight: 600; text-transform: uppercase; }
.pricing-box-content{ padding: 0 30px 40px;}
.pricing-box-price{ text-align: center; font-size: 35px; font-weight: bold; color: #000; padding-bottom: 30px; border-bottom: solid 1px #e5e5e5; margin-bottom: 25px;}

.pricing-box-content ul{ padding: 0; list-style-type: none; margin-bottom: 30px;}
.pricing-box-content ul li{ background: url("../images/li-icon.png") no-repeat left 8px; padding: 7px 0 7px 30px; font-size: 14px;}
.pricing-box-inner .button{ width: 100%; text-align: center;}

.premium-plan .pricing-box-header{background: url("../images/price-header-bg.png") no-repeat center bottom #f4713d; background-size: 100% auto;}
.exclusive-plan .pricing-box-header{background: url("../images/price-header-bg.png") no-repeat center bottom #369bba; background-size: 100% auto;}

.gold-plan .pricing-box-header{background: url("../images/price-header-bg.png") no-repeat center bottom #ffd700; background-size: 100% auto;}

.basic-plan .button{ background: #71a749; border: solid 1px #71a749;}
.basic-plan .button:hover{ color: #71a749; background: #fff;}

.premium-plan .button{ background: #f4713d; border: solid 1px #f4713d;}
.premium-plan .button:hover{ color: #f4713d; background: #fff;}

.gold-plan .button{ background: #ffd700; border: solid 1px #f4713d; color: #000;}
.gold-plan .button:hover{ color: #ffd700; background: #fff;}

.gold-plan .plan-name, .gold-plan .plan-limit {color: #000; font-weight: 700;}
.gold-plan .plan-name:before {background: #000;}

.exclusive-plan .button{ background: #369bba; border: solid 1px #369bba;}
.exclusive-plan .button:hover{ color: #369bba; background: #fff;}

/*user-panel start*/
.user-panel .header{ background: #1f2732;position: relative; z-index: 9;}
.user{ float: right; margin-left: 50px; position: relative; margin-top: -5px; margin-bottom: -8px;}
.user img{ border-radius: 100%; width: 35px; height: 35px;}
.user ul{ display: none; background: #1f2732; border-radius: 7px; padding:0 10px; width: 150px; position: absolute; right: 0; top: 70px; list-style-type: none; margin: 0;}
.user ul:before{border-color: #fff transparent #1f2732; border-style: solid solid solid; border-width: 0 7px 9px; content: ""; height: 0; position: absolute; right: 13px; top: -9px; width: 0;}
.user ul li{ border-bottom: solid 1px rgba(255,255,255,0.15);}
.user ul li:last-child{ border-bottom: none;}
.user ul li a{ padding: 10px 0; color: #fff; display: block; font-size: 14px; font-weight: 500;}
.user ul li a:hover{ color: #00bea3}

.user-section{ padding: 60px 0 30px; float: left; width: 100%; min-height: 770px; background: #f8f8f9;}
.title-bar{ margin-bottom: 30px;}
.title-bar h2{ text-transform: uppercase;  font-size: 24px; font-weight: 600; margin: 0; display: inline-block;}

.subtitle-bar{ margin-bottom: 30px;}
.subtitle-bar h3{ text-transform: uppercase;  font-size: 18px; font-weight: 600; margin: 0; display: inline-block;}
.subtitle-bar-search{ float: right; width: 300px;}
.subtitle-bar-search input{ padding-top: 0;}
.subtitle-bar-search .searchsubmit{ padding: 0; border-radius: 0; border: none; background: url("../images/search-icon.png") no-repeat center right 10px; width: 27px; float: right; margin-left: -27px; position: relative;}

.show-box{ border-radius: 7px; background: #fff; box-shadow: 0px 0px 10px 0px rgba(31, 39, 50, 0.1);}
.dashboard-box{width: 100%; float: left; margin-bottom: 30px;}
.dashboard-box-inner{ padding: 15px; display: inline-block; width: 100%;}
.dashboard-box-left{ width: calc( 100% - 80px); display: inline-block;}
.dashboard-box-right{ float: right;}
.dashboard-box-label{ font-size: 16px; color: #8f9398; font-weight: 600; padding-bottom: 7px;}
.dashboard-box-value{ font-size: 30px; font-weight: 600; }

.dashboard-box-chart{width: 100%; float: left;}
.chart-box{ padding: 20px;}
.chart-box-title{ border-bottom: solid 1px rgba(0,0,0,0.10); padding: 15px 20px;}
.chart-box-title h3{ margin: 0; display: inline-block; font-size: 16px; font-weight: 600;}
.chart-box-title select{ float: right; width: 100px; margin-top: -3px;}

.title-bar .button{ margin-left: 15px;}
.data-table {border-collapse: collapse;}
.data-table th,.data-table td{ padding:8px 15px; border:solid 1px #e2e3e5; background: #fff;}
.data-table th{ background: #e2e3e5; font-weight: 600;}
.data-table .nowrap{ white-space: nowrap;}
.action-edit,
.action-delete{ margin: 0 10px;}

input[type="checkbox"]{ opacity: 0; position: absolute; z-index: -111;}
input[type="checkbox"] ~ label:before { position: absolute; right: 0; background: #fff; content: ""; width: 15px; height: 15px; border-radius: 3px; display: inline-block; border: solid 1px #7f7f7f; margin-right: 3px; cursor: pointer;} 
input[type="checkbox"]:checked ~ label:before{ background: url(../images/check-mark.png) no-repeat center center #00bea3;  border: solid 1px #00bea3;}

.popup-overlay{ position: fixed; left: 0; right: 0; bottom: 0; top: 0; background: rgba(0,0,0,0.5); }
.popup-body{ background: #fff; border-radius: 7px; padding: 20px; left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; width: 90%;}

.popup-overlay .popup-body{ max-width: 420px; }
.popup-body h2{ margin: 0; text-align: center; font-weight: 600; font-size: 18px; text-transform: uppercase; margin-bottom: 10px;}
.popup-content form ul{ list-style-type: none; margin: 0; padding: 0;}
.popup-content form ul li{ padding-bottom: 10px;}
.popup-content form ul li textarea{ margin-top: 10px;}
.popup-button-set{ text-align: center; margin-top: 20px;}
.popup-button-set .button{ margin: 0 7px;}

.change-password{ max-width: 400px; margin: 0 auto; padding-top: 10%;}
.change-password h2{ margin: 0; text-align: center; font-weight: 600; font-size: 24px; text-transform: uppercase; margin-bottom: 10px;}
.change-password form ul,
.view-profile-main form ul{ list-style-type: none; margin: 0; padding: 0;}
.change-password form ul li,
.view-profile-main form ul li{ padding-bottom: 10px;}
.change-password-button-set,
.view-profile-button-set{ text-align: center; margin-top: 20px;}
.change-password-button-set .button,
.view-profile-button-set .button{ margin: 0 7px;}

.templates-main .col{ margin-bottom: 30px;}
.templates-box .templates-box-title{ border-bottom: solid 1px rgba(0,0,0,0.10); padding: 10px 15px;}
.templates-box .templates-box-title h3{ margin: 0; font-weight: 600; display: inline-block; font-size: 16px; width: calc(100% - 60px)}
.templates-box .templates-box-title .edit-icon{ padding-right: 20px;}
.templates-box .templates-box-content{ font-size: 14px; padding: 15px;}

.profile-bg{ width: 100%; height: 180px; background: #00bea3; margin-top: -30px;}
.view-profile-main{ max-width: 400px; margin: 0 auto; text-align: center;}
.profile-img{ margin: -90px auto 20px auto;  width: 180px; height: 180px; border-radius: 100%;}
.profile-img img.photo{ width: 180px; height: 180px; border: solid 5px #fff; border-radius: 100%;  box-shadow: 0px 0px 24px 0px rgba(0, 190, 163, 0.2);}
.user-name{ font-size: 20px; font-weight: 600; text-transform: uppercase; padding-bottom: 10px;}
.user-email{  font-weight: 500;  padding-bottom: 30px; color: #8b8f95;}

.edit-photo{ position: relative;}
.edit-photo-icon a{ position: absolute; width: 170px; height: 170px; left: 5px; top: 5px; background: rgba(0,0,0,0.3);  border-radius: 100%;}
.edit-photo-icon img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.button-set{ width: 100%; float: left; margin-top: 20px;}
.button-set .button{ margin: 0 7px;}
.write-custom-message textarea{ height: 250px;}
.write-message-word-count{ text-align: right; padding-top: 10px; color: #a1a4a9; font-weight: 500;}
.mtop0{ margin-top: 0;}
/*user-panel end*/


@media screen and (max-width:1330px) {
	.section .owl-carousel .owl-nav button.owl-prev{ left: -40px;}
	.section .owl-carousel .owl-nav button.owl-next{ right: -40px;}
}
@media screen and (max-width:1300px) {
	.section .owl-carousel .owl-nav button.owl-prev{ left: -10px;}
	.section .owl-carousel .owl-nav button.owl-next{ right: -10px;}
	.client-testmonial .owl-carousel{padding: 0 30px;}
}
@media screen and (max-width:1230px) {
	.main{ padding-left: 30px; padding-right: 30px}
	
	.navi ul li{padding: 0 20px;}
	.footer-top .footer-navi li::after{padding: 0 20px;}
}
@media screen and (max-width:1023px) {
	.banner h1{font-size: 43px;}
	.banner{background-size: 200%; padding-bottom: 82px;}
	.contact-banner{background-size: 200%; padding-bottom: 110px; padding-top: 110px;}
	.section{padding: 50px 0;}
	.section.contact-bottom{ padding-top: 0;}
	.service .col-6{margin: 20px 0; width: 100%;}
	.why-us .col-4{ width: 50%;}
	.footer-top .footer-navi li::after{padding: 0 10px;}
	.footer-social a{margin: 0 10px;}
	.trusted-by-over .col-3{ width: 33.33%;}
	h2.title{font-size: 25px;}
	.counter-value{font-size: 25px; padding-bottom: 0;}
	.navi ul li{padding: 0 8px; font-size: 15px}
	
	.language-switcher{margin-left: 20px;}
	.pricing-box-content{padding: 0 20px 30px;}
	.pricing-box-price{font-size: 30px; padding-bottom: 20px; margin-bottom: 20px;}
	.pricing-box-header{ padding: 30px 20px 60px;}
	.pricing-box-inner .button{font-size: 16px;}
	/*user-panel start*/
	.dashboard-box{ margin-bottom: 0;}
	.dashboard-box .col-3{ width: 50%; margin-bottom: 30px;}
	.user{margin-left: 20px;}
	.templates-main .col-4{width: 50%;}
	.send-message-main .col-6{ width: 100%; margin-bottom: 30px;}
	.send-message-main .col-6 .templates-main .col-6{ width: 50%;}
	/*user-panel end*/
}
@media screen and (max-width:767px) {
	.banner-main{flex-wrap: wrap;}
	.banner-left{ padding-right: 0;order: 2; text-align: center; width: 100%;}
	.banner-right{ width: 100%; margin-bottom: 20px; text-align: center;}
	.banner-right img{ max-width: 370px; width: 100%;}
	.banner h1 { font-size: 35px;}
	.section{padding: 40px 0;}
	.section.contact-bottom{ padding-top: 0;}
	.col-6{ width: 100%; margin-bottom: 30px;}
	.mission h2.title.title-left{ text-align: center}
	.mission h2.title.title-left::before,
	.mission h2.title.title-left::after{left: 50%; transform: translateX(-50%);}
	.service-content h3{ font-size: 18px;}
	.only-desktop{ display: none;}
	.only-mobile{ display: inherit;}
	
	.counter .col-3{width: 50%; padding: 20px 0; }
	.why-us .col-4{padding: 5px 0; width: 100%;}	
	.call-to-action-left{ width: 100%; text-align: center; margin-bottom: 20px;}
	.call-to-action-right{ width: 100%;}
	.call-to-action-wrapper{ flex-wrap: wrap;}
	.trusted-by-over .col-3{min-height: 86px;}
	.about-content{padding: 0;}
	.team-content{padding: 0; padding-bottom: 30px;}
	.footer-top .footer-navi{text-align: center; width: 100%; margin-bottom: 15px;}
	.footer-social{text-align: center; width: 100%;}
	.footer-social a{float: none; display: inline-block;}
	
	.mobile-menu-icon{cursor: pointer; display: block;}
	.mobile-menu-box { height: 8px; width: 35px; display: inline-block; position: relative; }
	.mobile-menu-box .mobile-menu-inner { transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}
	
	.mobile-menu-box .mobile-menu-inner::after{transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) , background-color 0.15s ease;}
	.mobile-menu-box .mobile-menu-inner::before { transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in, background-color 0.15s ease;}
	.mobile-menu-box .mobile-menu-inner::after { bottom: -10px;}
	.mobile-menu-box .mobile-menu-inner::before { top: -10px;}
	.mobile-menu-box .mobile-menu-inner::before,
	.mobile-menu-box .mobile-menu-inner::after { content: ""; display: block;}
	.mobile-menu-box .mobile-menu-inner,
	.mobile-menu-box .mobile-menu-inner::before,
	.mobile-menu-box .mobile-menu-inner::after{background-color: #00bea3;  width: 100%; height: 3px; border-radius: 3px; position: absolute; transition: transform 0.15s ease;} 	
	.mobile-menu-inner{display: block; top: 50%; margin-top: -2px;}	
	
	
	.mobile-menu-box.active .mobile-menu-inner::after{bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0.15s ease;}
	.mobile-menu-box.active .mobile-menu-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out, background-color 0.15s ease;}
	.mobile-menu-box.active .mobile-menu-inner { transform: rotate(225deg); transition-delay: 0.14s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
	
	.navi ul{display: none; box-shadow: rgb(0 190 163) 1px 1px 1px 1px; z-index: 9999; position: absolute; background: #fff; width: 100%; right: 0; top: 50px; -webkit-transition: all 0.5s cubic-bezier(0.75, 0, 0.25, 1);
transition: all 0.5s cubic-bezier(0.75, 0, 0.25, 1);  }
	.navi ul.active{ right: 0; animation: all 1s}
	.navi ul li{display: block; padding: 0;}
	.navi ul li a{ color: #1f2732; padding: 15px; border-bottom: solid 1px rgba(0,0,0,0.05); display: block;}
	.navi ul li.active a,
	.navi ul li:hover a{ background: #00bea3; color: #fff;}
	
	.user-section{ left: 0; -webkit-transition: all 0.5s cubic-bezier(0.75, 0, 0.25, 1); transition: all 0.5s cubic-bezier(0.75, 0, 0.25, 1); position: relative;}
	.user-section.active{ left: -250px; animation: all 1s}
	
	.contact-bottom .col-4 { width: 100%; padding-bottom: 20px;}
	.contact-bottom .col-4 p{ margin-top: 0;}
	
	.pricing-box .col-4{ width: 100%; margin-bottom: 20px;}
	.pricing-box-header{ background-image: none;padding: 30px 20px; margin-bottom: 20px; }
	.premium-plan .pricing-box-header,
	.exclusive-plan .pricing-box-header{background-image: none;}
	.section.pricing{padding: 40px 0 0;}
	.footer-top .footer-navi li{ font-size: 15px;}
	.footer-top .footer-navi li::after{padding: 0 7px;}
	
	/*user-panel start*/
	.subtitle-bar-search{ width: 250px;}
	.action-edit, .action-delete{ margin: 3px 10px; display: inline-block;}
	.button-small{padding: 5px 20px;font-size: 14px;}
	.title-bar h2{font-size: 22px;}
	.data-table th, .data-table td{padding: 5px 10px;  font-size: 14px;}
	.action-edit, .action-delete{margin: 3px 5px;}
	/*user-panel end*/
	.dropdown {
	  float: left;
	  overflow: hidden;
	  border-bottom: solid 1px rgba(0,0,0,0.05);
	}
	.dropdown .dropbtn {
		  font-size: 16px;  
		  border: none;
		  outline: none;
		  color: black !important;
			padding: 17px 16px !important;
		  background-color: inherit;
		  font-family: inherit;
		  margin: 0;
		}
		.dropdown-content a:hover {
		  background-color: #ddd;
		  color: #fff !important;
		}

}
@media screen and (max-width:567px) {
	.banner h1 { font-size: 30px;}
	.banner p{font-size: 18px;}
	.service .col-6 .service-icon{ width: 100%; text-align: center; margin-bottom: 20px;}
	.service-content{ width: 100%; text-align: center;}
	.section{padding: 30px 0;}
	.section.contact-bottom{ padding-top: 0;}
	.call-to-action-title{font-size: 22px;}
	.call-to-action-content{ font-size: 18px;}
	.button, input[type="submit"], button, input[type="button"]{padding: 7px 25px; font-size: 18px;}
	.button-small{padding: 5px 20px;font-size: 14px;}
	h2.title { font-size: 22px;}
	.client-testmonial .owl-carousel{ padding: 0;}
	.section .owl-carousel .owl-nav button.owl-next, .section .owl-carousel .owl-nav button.owl-prev{width: 30px; height: 30px; font-size: 32px;}
	.section .owl-carousel .owl-nav button.owl-next span, .section .owl-carousel .owl-nav button.owl-prev span{height: 30px; width: 30px; line-height: 20px;}
	.section .owl-carousel .owl-nav button.owl-prev { left: -20px;}
	.section .owl-carousel .owl-nav button.owl-next { right: -20px;}
	.trusted-by-over .col-3{width: 50%; padding-top: 10px; padding-bottom: 10px; min-height: 66px;}
	.contact form ul li{ width: 100%;}
	.why-us .why-us-content h3{font-size: 16px;}	
	.login-box .login-content { font-size: 16px;}
	.contact-banner{padding-bottom: 60px; padding-top: 100px;}
	.main { padding-left: 20px; padding-right: 20px;}
	
	/*user-panel start*/
	.title-bar{ margin-bottom: 20px; float: left; width: 100%;}
	.title-bar h2{ margin-bottom: 10px; float: left; width: 100%;}
	.dashboard-box .col-3{width: 100%; margin-bottom: 20px;}
	.subtitle-bar h3{font-size: 16px;}
	.subtitle-bar-search{width: 150px;}
	.subtitle-bar-search .searchsubmit{ background-position: center right; margin-left: -17px; width: 17px;}
	.send-message-main .col-6{margin-bottom: 20px;}
	.send-message-main .col-6 .templates-main .col-6{ width: 100%;}
	.templates-main .col-4{ width: 100%;}	
	.templates-main .col{ margin-bottom: 20px;}
	.templates-main .templates-box .templates-box-content,
	.templates-main .templates-box .templates-box-title{ height: inherit !important; }
	.change-password h2{font-size: 22px;}
	.write-custom-message textarea { height: 150px;}
	.data-table-main{ width: 100%; float: left; overflow: auto;}
	table.data-table{ min-width: 450px; margin-bottom: 10px;}
	/*user-panel end*/
}

.panel-bg{
    background: #fff; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 5px;
    border-left: 5px solid #00BCD4;
}
.panel-bg .text-left{
    padding: 10px 0;
}
.panel-bg .text-left span{
    font-size: 20px;
    font-weight: 500;
    color: #495057;
    letter-spacing: 2px;
    margin-bottom: 0;
    display: block;
    margin-bottom: 15px;
}
.panel-bg .text-left a{
    width: 100%;
    text-align: left;
    padding: 3px 5px;
}
#DataTables_Table_0 thead tr th{
    padding: 0 5px 10px 20px;
    vertical-align: top;
    width: inherit!important;
}
#DataTables_Table_0 thead .sorting:after{
    right: 0;
}
#DataTables_Table_0 .text-success{
    color: #2e7d32!important;
}

@media screen and (max-width: 767px) {
    #DataTables_Table_0 table.dataTable{
        width: 100%!important;
    }
    #DataTables_Table_0{
        width: 100%;
        overflow-x: auto;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
}
.banner-main.pricing-banner {
    display: block;
}
/*
.translation-links li {
    list-style: none;
    display: inline-block;
    vertical-align: middle;
}
ul.translation-links {
    position: absolute;
    right: 20px;
    top: 0px;
}
ul.translation-links li img {
    border-radius: 20px;
}
.translation-links li a {
    display: flex;
    margin-right: 5px;
    color: #00bea3 !important;
}*/
.skiptranslate {
    display: none;
}
body {
    top: 0px !important;
}
/*.skiptranslate {
    display: none !important;
}*/
.language-sel {
    width: 100px;
}/*
@media only screen and (max-width: 767px) {
      ul.translation-links {
        right: 71px;
    }
}*/
div#google_translate_element {
    position: absolute;
    right: 20px;
    top: 13px;
}
.skiptranslate.goog-te-gadget{
    display: block;
}
.goog-logo-link {
    display:none !important;
} 
    
.goog-te-gadget{
    color: transparent !important;
}
@media only screen and (max-width: 767px) {
    div#google_translate_element {
        top: 40px;
    }
}
.intl-tel-input{
  width: 100%;
}
    
.iti {
  width: 100%;
}
.iti--allow-dropdown input[type="tel"] {
    /*padding-left: 55px !important;*/
}
.contact form ul li .iti__country {
    width: 50%;
}
.navbar {
  overflow: hidden;
  background-color: inherit;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 0px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  font-weight: 600;
  line-height: 25px;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: inherit;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: inherit;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #fff !important;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.2);
}

.dropdown-content a:hover {
  /*background-color: #ddd;*/
  color: #fff !important;
}

.dropdown:hover .dropdown-content {
  display: block;
}
td {
  border-bottom: 2px solid #e8e9ea;
  line-height: 2rem;
  text-align: center;
}
.text-center{
	 text-align: center !important;
}
/*-------------------------------------------------------
					 letter-spacing
-------------------------------------------------------*/
.ls0 {
  letter-spacing: 0px !important;
}

.ls1 {
  letter-spacing: 1px !important;
}

.ls2 {
  letter-spacing: 2px !important;
}

.ls3 {
  letter-spacing: 3px !important;
}

.ls4 {
  letter-spacing: 4px !important;
}

.ls5 {
  letter-spacing: 5px !important;
}

.ls10 {
  letter-spacing: 10px !important;
}

/*-------------------------------------------------------
			 margin-top  (0/100) +5
-------------------------------------------------------*/
.mt-0 {
  margin-top: 0 !important;
}

.mt-5 {
  margin-top: 5px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-15 {
  margin-top: 15px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mt-25 {
  margin-top: 25px !important;
}

.mt-30 {
  margin-top: 30px !important;
}

.mt-35 {
  margin-top: 35px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mt-45 {
  margin-top: 45px !important;
}

.mt-50 {
  margin-top: 50px !important;
}

.mt-55 {
  margin-top: 55px !important;
}

.mt-60 {
  margin-top: 60px !important;
}

.mt-62 {
  margin-top: 62px !important;
}

.mt-65 {
  margin-top: 65px !important;
}

.mt-70 {
  margin-top: 70px !important;
}

.mt-75 {
  margin-top: 75px !important;
}

.mt-80 {
  margin-top: 80px !important;
}

.mt-85 {
  margin-top: 85px !important;
}

.mt-90 {
  margin-top: 90px !important;
}

.mt-95 {
  margin-top: 95px !important;
}

.mt-100 {
  margin-top: 100px !important;
}

/*-------------------------------------------------------
			 margin-bottom  (0/100) +5
-------------------------------------------------------*/
.mb-0 {
  margin-bottom: 0 !important;
}

.mb-5 {
  margin-bottom: 5px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-15 {
  margin-bottom: 15px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-25 {
  margin-bottom: 25px !important;
}

.mb-30 {
  margin-bottom: 30px !important;
}

.mb-35 {
  margin-bottom: 35px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.mb-45 {
  margin-bottom: 45px !important;
}

.mb-50 {
  margin-bottom: 50px !important;
}

.mb-55 {
  margin-bottom: 55px !important;
}

.mb-60 {
  margin-bottom: 60px !important;
}

.mb-62 {
  margin-bottom: 62px !important;
}

.mb-65 {
  margin-bottom: 65px !important;
}

.mb-70 {
  margin-bottom: 70px !important;
}

.mb-75 {
  margin-bottom: 75px !important;
}

.mb-80 {
  margin-bottom: 80px !important;
}

.mb-85 {
  margin-bottom: 85px !important;
}

.mb-90 {
  margin-bottom: 90px !important;
}

.mb-95 {
  margin-bottom: 95px !important;
}

.mb-100 {
  margin-bottom: 100px !important;
}

/*-------------------------------------------------------
			padding-top  (0/100) +5
-------------------------------------------------------*/
.pt-0 {
  padding-top: 0 !important;
}

.pt-5 {
  padding-top: 5px !important;
}

.pt-10 {
  padding-top: 10px !important;
}

.pt-15 {
  padding-top: 15px !important;
}

.pt-20 {
  padding-top: 20px !important;
}

.pt-25 {
  padding-top: 25px !important;
}

.pt-30 {
  padding-top: 30px !important;
}

.pt-35 {
  padding-top: 35px !important;
}

.pt-40 {
  padding-top: 40px !important;
}

.pt-45 {
  padding-top: 45px !important;
}

.pt-50 {
  padding-top: 50px !important;
}

.pt-55 {
  padding-top: 55px !important;
}

.pt-60 {
  padding-top: 60px !important;
}

.pt-65 {
  padding-top: 65px !important;
}

.pt-70 {
  padding-top: 70px !important;
}

.pt-75 {
  padding-top: 75px !important;
}

.pt-80 {
  padding-top: 80px !important;
}

.pt-85 {
  padding-top: 85px !important;
}

.pt-90 {
  padding-top: 90px !important;
}

.pt-95 {
  padding-top: 95px !important;
}

.pt-100 {
  padding-top: 100px !important;
}

/*-------------------------------------------------------
		 padding-bottom  (0/100) +5
-------------------------------------------------------*/
.pb-0 {
  padding-bottom: 0 !important;
}

.pb-5 {
  padding-bottom: 5px !important;
}

.pb-10 {
  padding-bottom: 10px !important;
}

.pb-15 {
  padding-bottom: 15px !important;
}

.pb-20 {
  padding-bottom: 20px !important;
}

.pb-25 {
  padding-bottom: 25px !important;
}

.pb-30 {
  padding-bottom: 30px !important;
}

.pb-35 {
  padding-bottom: 35px !important;
}

.pb-40 {
  padding-bottom: 40px !important;
}

.pb-45 {
  padding-bottom: 45px !important;
}

.pb-50 {
  padding-bottom: 50px !important;
}

.pb-55 {
  padding-bottom: 55px !important;
}

.pb-60 {
  padding-bottom: 60px !important;
}

.pb-65 {
  padding-bottom: 65px !important;
}

.pb-70 {
  padding-bottom: 70px !important;
}

.pb-75 {
  padding-bottom: 75px !important;
}

.pb-80 {
  padding-bottom: 80px !important;
}

.pb-85 {
  padding-bottom: 85px !important;
}

.pb-90 {
  padding-bottom: 90px !important;
}

.pb-95 {
  padding-bottom: 95px !important;
}

.pb-100 {
  padding-bottom: 100px !important;
}

.no-padding {
  padding: 0 !important;
}