/*-----------------------------------------------------------------------------------

    Template Name: Your template name 
    Template URI: https://hastech.company/
    Description: This is html5 template
    Author: HasTech
    Author URI: https://https://Devitems.com/
    Version: 1.0
-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
	
    1. Template default css
    2. Header area
	3. Slider area
	4. Service area    
	5. Portfolio area
	6. Pricing area
	7. Testimonial area
	8. Subscribe area
	9. Blog area
    10. Brand area 
	11. Footer area
	12. scrollup
	13. Breadcrumb
	14. Team area
	15. Team members area
	16. Counter area
    17. Skill area
    18. Contact area



-----------------------------------------------------------------------------------*/

/*------------------------
  1. Template default css
----------------------------*/

@import url("https://fonts.googleapis.com/css?family=Lato:300,400|Poppins:300,400,500,600,700");
html,
body {
  height: 100%;
}
.floatleft {
  float: left;
}
.floatright {
  float: right;
}
.alignleft {
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}
.alignright {
  float: right;
  margin-left: 15px;
  margin-bottom: 15px;
}
.aligncenter {
  display: block;
  margin: 0 auto 15px;
}
a:focus {
  outline: 0px solid;
}
img {
  max-width: 100%;
  height: auto;
}
.fix {
  overflow: hidden;
}
p {
  margin: 0 0 15px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 10px;
}
a {
  transition: all 0.3s ease 0s;
  text-decoration: none;
}
a:hover {
  color: #ec4445;
  text-decoration: none;
}
a:active,
a:hover {
  outline: 0 none;
}
ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
.clear {
  clear: both;
}
body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
}
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
.owl-carousel {
  touch-action: manipulation;
}
.img-full {
  width: 100%;
}
.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}
.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0";
}
.ptb-100 {
  padding: 100px 0;
}
.ptb-120 {
  padding: 120px 0;
}
.ptb-80 {
  padding: 80px 0;
}
.ptb-40 {
  padding: 40px 0;
}
.pt-100 {
  padding-top: 100px;
}
.pt-120 {
  padding-top: 120px;
}
.pb-120 {
  padding-bottom: 120px;
}
.pt-65 {
  padding-top: 65px;
}
.pt-70 {
  padding-top: 70px;
}
.pt-80 {
  padding-top: 80px;
}
.pt-50 {
  padding-top: 50px;
}
.pt-60 {
  padding-top: 60px;
}
.pt-40 {
  padding-top: 40px;
}
.pb-50 {
  padding-bottom: 50px;
}
.pb-60 {
  padding-bottom: 60px;
}
.pb-40 {
  padding-bottom: 40px;
}
.pb-10 {
  padding-bottom: 10px;
}
.pb-100 {
  padding-bottom: 100px;
}
.pb-70 {
  padding-bottom: 70px;
}
.pb-80 {
  padding-bottom: 80px;
}
.pb-90 {
  padding-bottom: 90px;
}
.pb-30 {
  padding-bottom: 30px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-10 {
  margin-bottom: 10px;
}
.mt-50 {
  margin-top: 50px;
}
.mt-60 {
  margin-top: 60px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-31 {
  margin-top: -31px;
}
.bg-gray {
  background-color: rgb(250, 250, 250);
}
.bg-opacity {
  position: relative;
}
.text-white {
  color: #fff;
}
.bg-opacity:before {
  position: absolute;
  height: 100%;
  width: 100%;
  content: "";
  left: 0;
  top: 0;
  opacity: 0.7;
  background: #000;
}
.bg-img-3 {
  background: hsla(0, 0%, 0%, 0) url("img/bg/3.jpg") repeat fixed 0 0 / cover;
}
.btn {
  color: #fff;
  display: inline-block;
  font-size: 14px !important;
  font-weight: bold;
  height: 54px;
  line-height: 40px;
  padding-left: 20px;
  padding-right: 52px;
  text-transform: uppercase;
  width: 185px;
  margin-top: 1.5rem;
  background-color: rgba(0, 0, 0, 0);
  position: relative;
  z-index: 5;
  overflow: hidden;
  text-align: center;
  text-decoration: none !important;
  transition: all 0.3s ease-in-out 0s;
  border: 2px solid rgb(138 33 252);
  vertical-align: middle;
  border-color: rgb(138 33 252);
  border-style: solid;
}
.btn:hover {
  background-color: rgba(0, 0, 0, 0);
  color: rgb(255, 255, 255);
}
.btn:before {
  background-color: rgb(138 33 252);
  content: "";
  height: 101%;
  position: absolute;
  right: -1px;
  top: 0px;
  transform: skewX(179deg);
  transition: all 0.3s ease 0s;
  width: 47px;
  z-index: -1;
}
.btn:hover:before {
    right: 0;
    transform: skewX(81deg);
    width: 100%;
}
.btn::after {
  color: rgb(255, 255, 255);
  font-family: "Material-Design-Iconic-Font";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.btn-black {
  color: #000;
  margin-top: 0px;
}
.order {
  border-top: 1px solid rgb(229, 229, 229);
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 40px;
  margin-top: 35px;
  padding: 10px 25px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  color: rgba(0, 0, 0, 0.75);
  text-decoration: none;
}
.order:hover {
  background: #1bb4b9;
  color: #fff;
  transition: all 0.3s ease 0s;
}
/*----------- 2. Header area ---------------*/

.logo {
  margin-top: 36px;
}
.main-menu {
}
.main-menu ul {
}
.main-menu ul li {
  display: inline-block;
  position: relative;
  margin: 0 2px;
}
.main-menu ul li a {
  color: #454545;
  display: block;
  font-size: 13px;
  font-weight: 600;
  padding: 45px 15px;
  text-decoration: none;
  text-transform: uppercase;
}
.main-menu ul li:hover > a {
  color: #1bb4b9;
}
/*sub -menu */

.main-menu ul li ul {
  background: #fff none repeat scroll 0 0;
  border-top: 2px solid #1bb4b9;
  opacity: 0;
  position: absolute;
  top: 75%;
  text-align: left;
  width: 180px;
  transition: all 0.6s ease 0s;
  visibility: hidden;
  z-index: 999;
}
.main-menu ul li:hover > ul {
  visibility: visible;
  opacity: 1;
}
.main-menu ul li ul li {
  display: block;
}
.main-menu ul li ul li:hover > a {
  color: #1bb4b9;
}
.main-menu ul li ul li a {
  padding: 15px;
  border: 0 solid rgb(221, 221, 221);
  color: rgb(68, 68, 68);
  font-size: 13px;
  font-weight: 300;
  text-transform: capitalize;
  text-decoration: none;
}
.main-menu ul li a i {
  margin-left: 8px;
  color: rgb(143, 143, 143);
  font-weight: normal;
}
.main-menu ul li a:hover i {
  color: #1bb4b9;
}
.search-open {
  color: rgb(50, 50, 50);
}
.search-header {
  float: right;
  padding: 43px 0 41px;
  margin-left: 20px;
}
.search-open:hover {
  color: rgb(143, 143, 143);
}
.search-inside {
  background: rgba(0, 0, 0, 0.84);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999999;
}
.search-form {
  position: absolute;
  top: 50%;
  left: 30px;
  width: calc(100% - 60px);
}
.search-form input {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border-color: -moz-use-text-color -moz-use-text-color rgba(0, 0, 0, 0);
  border-image: none;
  border-style: none none solid;
  border-width: 0 0 2px;
  color: #fff;
  display: block;
  font-size: 60px;
  height: auto;
  line-height: 1.4;
  padding: 0 0 10px;
  transform: translate3d(0px, -15px, 0px);
  transition: border-color 0.3s ease-in-out 0.4s,
    transform 0.3s ease-in-out 0.2s;
  width: 100%;
  border-bottom-color: rgb(255, 255, 255);
  z-index: 9999;
}
.search-form input:focus-visible {
  outline: 0;
}
.search-form label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 2rem;
  font-weight: 500;
  transform: translate3d(0px, -20px, 0px);
  transition: all 0.3s ease-in-out 0.4s;
}
.search-close {
  background: rgba(255, 255, 255, 0.75) none repeat scroll 0 0;
  border: 2px solid rgba(0, 0, 0, 0);
  border-radius: 100px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  line-height: 1.3;
  padding: 8px;
  position: absolute;
  right: 60px;
  text-align: center;
  top: 60px;
  transition: opacity 0.3s ease-in-out 0.25s, transform 0.3s ease-in-out 0.25s;
  width: 38px;
  cursor: pointer;
}
.search-close:hover {
  background: rgba(255, 255, 255, 0.25) none repeat scroll 0 0;
  border-color: rgba(255, 255, 255, 0.5);
  color: rgb(255, 255, 255);
  transition: 0.3s;
  cursor: pointer;
}
/*---------- 3. Slider area ---------------*/

.slider-area {
  overflow: hidden;
}
.single-slider {
  background-position: center center;
  background-size: cover;
  padding: 200px 0;
  position: relative;
}
.single-slider::before {
  background: #000 none repeat scroll 0 0;
  content: "";
  height: 100%;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 9;
}
.slider-img {
}
.slider-content {
  position: relative;
  z-index: 9;
}
.slider-content h3 {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  margin-bottom: 0;
}
.slider-content h2 {
  font-size: 70px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}
.slider-content p {
  font-size: 16px;
  font-weight: normal;
  margin-bottom: 35px;
  font-family: "Lato", sans-serif;
}
.owl-carousel .owl-nav div {
  position: absolute;
  color: #fff;
  font-size: 50px;
  left: 10px;
  overflow: hidden;
  line-height: 50px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  display: block;
}
.owl-carousel .owl-nav div.owl-next {
  right: 10px;
  left: inherit;
}
.owl-carousel:hover .owl-nav div {
  opacity: 1;
  visibility: visible;
}
.owl-carousel:hover .owl-nav div {
  left: 20px;
}
.owl-carousel:hover .owl-nav div.owl-next {
  right: 20px;
  left: auto;
}
.slider-active .owl-dot {
  border: 3px solid #fff;
  height: 12px;
  width: 12px;
  line-height: 8px;
  margin: 0 6px;
  background: none;
  display: inline-block;
  opacity: 0;
  border-radius: 50%;
}
.owl-dots {
  bottom: 50px;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*
.slider-active .owl-dot:hover {
  border:0px solid #fff;
    background-color: #fff;
}
*/

.slider-area:hover .slider-active .owl-dot {
  opacity: 1;
}
.slider-area:hover .slider-active .owl-dot.active {
  border: 0px;
  background: #fff;
  height: 8px;
  width: 8px;
}
.owl-dots:hover {
}
/*---------- 4. Service area ------------*/

.service-area {
}
.feature-heading,
.section-heading {
  overflow: hidden;
  position: relative;
}
.feature-heading h2,
.section-heading h2 {
  color: rgba(0, 0, 0, 0.85);
  font-size: 24px;
  margin-bottom: 35px;
  text-transform: uppercase;
  font-weight: 500;
}
.feature-heading h2 {
  font-size: 28px;
}
.section-heading h2:before {
  margin: 0 auto;
}
.feature-heading h2:before,
.section-heading h2:before {
  background: rgb(138 33 252) none repeat scroll 0 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 35%;
  width: 109px;
}
.feature-heading h2:before {
  margin-top: 18px;
}
.feature-text p,
.section-heading p,
.about-text p,
.video-text p {
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 15px;
  color: rgb(68, 68, 68);
  line-height: 24px;
}
.single-service {
}
.icon {
  margin-top: 10px;
}
.icon i {
  color: rgb(138 33 252);
  font-size: 40px;
  padding: 20px 0;
  transition: all 0.3s ease 0s;
}
.service-text h4 {
  font-size: 16px;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  margin-bottom: 15px;
  font-weight: 500;
}
.service-text p {
  font-size: 14px;
  font-weight: 300;
  color: rgb(68, 68, 68);
  margin: 0;
  line-height: 24px;
}
/*---------- 5. Portfolio area ------------*/

.portfolio-menu {
  margin-bottom: 23px;
  margin-top: 25px;
}
.portfolio-menu button {
  border: 1px solid rgb(202, 200, 200);
  border-radius: 2px;
  color: rgb(51, 51, 51);
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  margin: 0 5px 10px;
  line-height: 13px;
  padding: 14px 15px 12px;
  position: relative;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  background: none;
}
.custom-row {
  margin: 0 -0px;
}
.custom-col {
  padding: 0 0px;
}
.portfolio-menu button.active,
.portfolio-menu button:hover {
  background: rgb(138 33 252);
  color: #fff;
  border: 1px solid rgb(138 33 252);
}
.portfolio-box {
  position: relative;
}
.blog-img a,
.portfolio-img {
  position: relative;
  display: block;
}
.blog-img a:before,
.portfolio-img::before {
  background: rgb(138 33 252) none repeat scroll 0 0;
  content: "";
  height: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  bottom: 0;
  transition: all 0.3s ease 0s;
  width: 100%;
  z-index: 99;
}
.portfolio-box:hover .portfolio-img::before,
.blog-wrapper:hover .blog-img a:before,
.health-wrapper:hover .blog-img a:before {
  opacity: 0.5;
  height: 100%;
}
.portfolio-img img {
}
.portfolio-text a {
  background: rgb(138 33 252) none repeat scroll 0 0;
  color: #fff;
  display: inline-block;
  font-size: 20px;
  height: 50px;
  line-height: 50px;
  width: 50px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  transition: 0.3s;
  transform: scale(0);
  opacity: 0;
  visibility: hidden;
  z-index: 99;
}
.portfolio-box:hover .portfolio-text a {
  visibility: visible;
  transform: scale(1);
  opacity: 1;
}
.blog-img img {
  width: 100%;
}
/*------------- 6. Pricing area ------------------*/

.pricing-box {
  border: 1px solid #e5e5e5;
  margin-top: 30px;
  transition: 0.3s;
}
.pricing-box:hover {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.16);
}
.pricing-plan {
  padding: 40px;
  border-bottom: 1px solid #e5e5e5;
  transition: 0.6s;
}
.pricing-plan h3 {
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0px;
}
.price {
  padding: 25px 0;
}
.price span {
  font-size: 18px;
  font-weight: 500;
  margin: 0 -2px;
}
.price span.price-number {
  font-weight: 700;
  font-size: 30px;
}
.month {
  display: block;
  font-size: 14px;
  font-weight: 400;
}
.pricing-list {
  border-bottom: 1px solid rgb(229, 229, 229);
  border-left: 1px solid rgb(229, 229, 229);
  border-right: 1px solid rgb(229, 229, 229);
  padding: 20px 0 0;
  transition: all 0.3s ease 0s;
}
.pricing-list ul {
}
.pricing-list ul li {
  color: rgb(86, 86, 86);
  font-size: 14px;
  margin-bottom: 1px;
  padding: 10px;
}
.pricing-list li:nth-child(even) {
  background: rgb(241, 243, 244) none repeat scroll 0 0;
}
/*------------- 7. Testimonial area --------------*/

.testimonial-area {
  overflow: hidden;
}
.single-testimonial {
  margin-top: 40px;
}
.testimonial-image img {
  border: 1px solid rgb(236, 236, 236);
  border-radius: 50%;
}
.testimonial-image::before {
  border: 1px solid rgb(231, 231, 231);
  border-radius: 50%;
  content: "";
  height: 10px;
  left: 67px;
  position: absolute;
  top: -11px;
  width: 10px;
  z-index: 99;
}
.testimonial-image::after {
  border: 1px solid rgb(236, 236, 236);
  border-radius: 50%;
  content: "";
  height: 16px;
  left: 76px;
  position: absolute;
  top: -26px;
  width: 16px;
}
.testimonial-image {
  margin: 0 auto;
  width: 92px;
}
.testimonial-text {
  margin: 15px auto 0;
  text-align: center;
  width: 70%;
}
.testimonial-text p {
  font-style: italic;
  color: rgb(68, 68, 68);
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
  margin-top: 25px;
  overflow: hidden;
}
.testimonial-active .owl-controls .owl-nav div {
  border: 1px solid #ddd;
  border-radius: 50%;
  color: #ddd;
  height: 45px;
  left: -50px;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  line-height: 45px;
  font-size: 20px;
  opacity: 0;
  visibility: visible;
  transition: 0.3s;
  background: transparent;
}
.testimonial-active .owl-controls .owl-nav div:hover {
  border: 1px solid #1bb4b9;
  background: #1bb4b9 none repeat scroll 0 0;
  color: #fff;
}
.testimonial-active .owl-controls .owl-nav div.owl-next {
  left: auto;
  right: -50px;
}
.testimonial-active:hover .owl-controls .owl-nav div {
  left: -50px;
  color: #ddd;
  opacity: 1;
}
.testimonial-active:hover .owl-controls .owl-nav div.owl-next {
  left: auto;
  right: -50px;
  color: #ddd;
}
/*----------- 8. Subscribe area -----------*/

.video-area,
.subscribe-area {
  background-color: rgb(241, 241, 241);
  overflow: hidden;
}
.subscribe-form {
  margin-top: 18px;
}
.subscribe-form form {
  position: relative;
}
.subscribe-form form input {
  border: 1px solid rgb(255, 255, 255);
  height: 50px;
  padding-left: 20px;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  position: relative;
  padding-right: 150px;
}
.subscribe-form form .clear input {
  -moz-appearance: none;
  background: rgb(138 33 252) none repeat scroll 0 0;
  border: medium none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  height: 50px;
  line-height: 52px;
  padding: 0 30px;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  width: inherit;
}
.mc-form .mc-news {
  left: -5000px;
  position: absolute;
}
.mc-form .clear {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
}
.subscribe-form form .clear input:hover {
  background: rgb(55, 212, 222) none repeat scroll 0 0;
}
.subscribe-text {
  margin-top: 15px;
}
.subscribe-text h3 {
  font-size: 20px;
  font-weight: 500;
  padding: 15px 0;
  color: rgba(0, 0, 0, 0.85);
}
/*----------- 9. Blog area -----------*/

.custom-width {
  padding: 0 10px;
}
.blog-wrapper {
  border: 1px solid #e5e5e5;
}
.blog-wrapper {
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.16);
}
.blog-content {
  padding: 25px 15px 22px;
}
.blog-content h4 a {
  color: rgb(51, 51, 51);
  font-size: 15px;
  font-weight: 500;
  transition: 0.3s;
}
.blog-content a {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease 0s;
  color: rgba(0, 0, 0, 0.75);
}
.blog-content a:hover {
  color: rgb(138 33 252);
}
.blog-content p {
  color: rgb(85, 85, 85);
  margin-bottom: 12px;
  margin-top: 6px;
  word-spacing: 1px;
  font-weight: 300;
}
.blog-content a {
}
.blog-meta {
  margin-bottom: 10px;
  margin-top: 15px;
}
.blog-meta > span i {
  color: rgb(102, 102, 102);
  margin-right: 8px;
  font-size: 14px;
}
.blog-meta > span {
  font-size: 13px;
  color: rgb(102, 102, 102);
  margin-right: 10px;
  font-weight: 400;
}
/*----------- 10. Brand area -----------*/

.owl-carousel .owl-item .single-brand > img {
  display: inline-block;
  width: inherit !important;
}
.ht-brand::before {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-name: bor-top-out;
  animation-timing-function: linear;
  right: 100%;
  top: 0;
}
.ht-brand::before,
.ht-brand::after {
  background-color: rgb(138 33 252);
  content: "";
  height: 1px;
  position: absolute;
  width: 100%;
}
.ht-brand::after {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-name: bor-bottom-out;
  animation-timing-function: linear;
  bottom: 0;
  left: 100%;
}
.ht-brand {
  border: 1px solid rgb(241, 241, 241);
  height: 100px;
  line-height: 100px;
  overflow: hidden;
  position: relative;
  text-align: center;
  transition: all 0.3s ease 0s;
}
.ht-brand:hover {
  border: 1px solid rgb(138 33 252);
}
.single-brand::before {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-name: bor-right-out;
  animation-timing-function: linear;
  bottom: 100%;
  right: 0;
}
.single-brand::before,
.single-brand::after {
  background-color: rgb(138 33 252);
  content: "";
  height: 100%;
  position: absolute;
  width: 1px;
}
.single-brand::after {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-name: bor-left-out;
  animation-timing-function: linear;
  left: 0;
  top: 100%;
}
.ht-brand:hover::after {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-name: bor-bottom;
  animation-timing-function: linear;
}
.ht-brand:hover::before {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-name: bor-top;
  animation-timing-function: linear;
}
.ht-brand:hover .single-brand::before {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-name: bor-right;
  animation-timing-function: linear;
}
.ht-brand:hover .single-brand::after {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-name: bor-left;
  animation-timing-function: linear;
}
/*---------- 11. Footer area -------------*/

.footer-bg {
  background: rgb(38, 38, 38) none repeat scroll 0 0;
}
.footer-widget {
}
.footer-widget p {
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
  margin: 15px 0;
}
.widget-title {
  color: rgba(255, 255, 255, 0.55);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.widget-title h3 {
}
.widget-contact {
}
.widget-contact li {
  color: #fff;
  margin-bottom: 20px;
}
.widget-contact li i {
  float: left;
  height: 20px;
  width: 20px;
  line-height: 30px;
  font-size: 25px;
}
.widget-contact li span {
  display: block;
  margin-left: 30px;
  font-weight: 300;
  font-size: 14px;
}
.footer-menu {
}
.footer-menu li {
  margin-bottom: 10px;
}
.footer-menu li a {
  color: #fff;
  text-transform: capitalize;
  line-height: 25px;
  font-size: 14px;
  font-weight: 300;
}
.footer-menu li a:hover {
  padding-left: 5px;
  color: rgb(138 33 252);
}
.footer-form {
}
.footer-form input {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid rgb(238, 238, 238);
  color: #fff;
  height: 36px;
  line-height: normal;
  font-size: 14px;
  margin-bottom: 15px;
  padding: 0 10px;
  width: 100%;
}
.footer-form textarea {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid rgb(238, 238, 238);
  color: #fff;
  overflow: auto;
  height: 90px;
  width: 100%;
  margin-bottom: 15px;
  padding: 6px 15px;
  font-size: 14px;
}
.footer-form button {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 1px solid rgb(245, 245, 245);
  float: left;
  font-weight: 500;
  padding: 5px 20px 2px;
  text-transform: uppercase;
  transition: 0.3s;
  cursor: pointer;
  color: #fff;
}
.footer-form button:hover {
  border: 1px solid rgb(138 33 252);
  color: rgb(138 33 252);
}
.copyright-area {
  background: rgb(38, 38, 38) none repeat scroll 0 0;
  padding: 20px 0;
  border-top: 1px solid rgb(51, 51, 51);
}
.footer-form input::-webkit-input-placeholder,
.search-form input::-webkit-input-placeholder {
  /* Chrome */

  color: #fff;
  opacity: 1;
}
.footer-form input::-moz-placeholder,
.search-form input::-moz-placeholder {
  /* Firefox 19+ */

  color: #fff;
  opacity: 1;
}
.footer-form textarea::-webkit-input-placeholder {
  /* Chrome */

  color: #fff;
  opacity: 1;
}
.footer-form textarea::-moz-placeholder {
  /* Firefox 19+ */

  color: #fff;
  opacity: 1;
}
.copyright-text > p {
  color: #fff;
  text-align: left;
  font-size: 14px;
  font-weight: 300;
  line-height: 30px;
  margin-bottom: 0;
}
.social-icon {
}
.social-icon a {
  border-radius: 10px;
  color: rgb(238, 238, 238);
  display: inline-block;
  font-size: 18px;
  height: 30px;
  line-height: 30px;
  margin-left: 15px;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 30px;
}
.social-icon a:hover {
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
  transition: all 0.3s ease 0s;
}
/*------------ 12. scrollup ----------*/

#scrollUp {
  background: rgb(138 33 252) none repeat scroll 0 0 padding-box;
  border: 3px solid rgba(3, 169, 244, 0.85);
  border-radius: 50%;
  bottom: 45px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  display: none;
  font-size: 24px;
  height: 45px;
  line-height: 41px;
  position: fixed;
  right: 12px;
  text-align: center;
  width: 45px;
  z-index: 999;
}
#scrollUp:hover {
  background-color: rgb(255, 255, 255);
  border-color: rgba(27, 180, 185, 0.7);
  color: rgb(27, 180, 185);
}
/*------- 13. Breadcrumb ----------*/

.breadcrumb {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  margin: 0;
  padding: 0;
  text-align: center;
  justify-content: center;
}
.breadcrum-content {
  z-index: 99;
  position: relative;
}
.breadcrumb li a {
  color: #fff;
  text-transform: capitalize;
}
.breadcrumb li a:hover {
  color: rgb(138 33 252);
}
.breadcrumb li {
  font-size: 17px;
  text-transform: capitalize;
  font-weight: 300;
  float: none;
  display: inline-block;
}
.breadcrumb .active {
  color: rgb(138 33 252);
}
/*----------- 14. Team area ---------*/

.team-area {
}
.team-title {
}
.team-title h4 {
  font-size: 2rem;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  margin-bottom: 7px;
}
.team-title span {
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  display: block;
  margin-bottom: 15px;
}
.team-content p {
  color: rgb(68, 68, 68);
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
}
/*---------  15. Team members area -------------*/

.single-team {
  margin-top: 40px;
}
.team-img img {
  display: block;
  width: 100%;
}
.team-img a {
  position: relative;
  display: block;
}
.team-img a:before {
  background: rgba(20, 177, 187, 0.8) none repeat scroll 0 0;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s ease 0s;
  width: 100%;
}
.single-team:hover .team-img a::before {
  height: 100%;
  left: 0;
  transition: 0.3s;
}
.team-text {
  border-bottom: 2px solid rgb(241, 241, 241);
  border-left: 1px solid rgb(241, 241, 241);
  border-right: 1px solid rgb(241, 241, 241);
  padding: 20px 0 18px;
  position: relative;
  transition: all 0.3s ease 0s;
}
.team-text h5 {
  color: rgb(34, 34, 34);
  font-weight: 500;
  line-height: 24px;
  margin: 0;
  text-align: center;
  transition: all 0.3s ease 0s;
}
.single-team:hover .team-text {
  border-bottom: 2px solid rgb(138 33 252);
}
.map-size {
  height: 500px;
  width: 100%;
}
.video-text h5 a,
.about-text h5 a {
  font-size: 2rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.75);
  text-decoration: none;
}
/*---------- 16. Counter area ------------*/

.single-counter {
  position: relative;
}
.single-counter h4 {
  color: rgb(255, 255, 255);
  font-size: 38px;
  font-weight: 500;
}
.single-counter p {
  color: rgb(255, 255, 255);
  font-size: 15px;
  margin-bottom: 0;
  margin-top: 20px;
}
.counter-icon {
}
.counter-icon i {
  color: rgb(138 33 252);
  font-size: 40px;
  margin-bottom: 27px;
}
/*----------- 17. Skill area ---------*/

.progress-area {
  margin-bottom: 0;
  padding: 50px 0 40px;
}
.team-progress-area {
  padding-top: 30px;
  padding-bottom: 20px;
}
.skill-heading p {
  font-size: 16px;
}
.progress {
  background-color: rgb(241, 241, 241);
  box-shadow: none;
  height: 6px;
  margin-bottom: 50px;
  overflow: visible;
  position: relative;
  border-radius: 5px;
}
.skill-title-team,
.skill-title {
  font-size: 12px;
  font-weight: 400;
  left: 0;
  position: absolute;
  text-transform: capitalize;
  top: -23px;
  z-index: 99;
  color: rgb(51, 51, 51);
}
.skill-title-team {
  font-size: 14px;
  font-weight: 300;
  color: #666;
  text-transform: capitalize;
}
.progress-bar {
  border-radius: 5px;
  background-color: rgb(138 33 252);
}
.progress-bar span {
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  right: 0;
  top: -30px;
  background: rgb(138 33 252);
  padding: 2px 12px;
  position: relative;
  margin-bottom: 30px;
  border-radius: 3px;
  float: right;
}
.progress-bar span::before {
  border-color: #18afd3 transparent transparent;
  border-style: solid;
  border-width: 8px 0 0 8px;
  bottom: -6px;
  content: "";
  height: 0;
  position: absolute;
  width: 0;
  right: 0;
}
.team-skill span {
  background: none;
  color: #666;
  margin-bottom: 20px;
}
.team-skill span:before {
  display: none;
}
/*-------------- 18. Contact area -------------*/

.contact-area {
}
.single-address {
  margin-bottom: 45px;
}
.single-address-icon {
  display: inline-table;
  margin-bottom: 20px;
}
.single-address-icon i {
  background: rgb(138 33 252) none repeat scroll 0 0;
  border-radius: 50%;
  color: rgb(255, 255, 255);
  display: table-cell;
  font-size: 24px;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  width: 50px;
}
.single-address-info {
}
.single-address-info > h4 {
  color: rgb(40, 40, 40);
  font-size: 14px;
  margin-bottom: 8px;
  text-transform: capitalize;
  font-weight: 500;
  padding: 5px 0;
}
.single-address-info > p {
  color: rgb(86, 86, 86);
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
}
.comments-title h4 {
  color: rgb(40, 40, 40);
  font-size: 18px;
  margin-left: 20px;
  text-transform: capitalize;
  font-weight: 500;
}
.comments-form input {
  height: 45px;
  width: 100%;
  border: 1px solid rgb(221, 221, 221);
  color: rgb(86, 86, 86);
  margin-top: 10px;
  padding: 7px 10px;
  margin-bottom: 20px;
  font-weight: 400;
  font-size: 15px;
  text-transform: capitalize;
}
.comments-form textarea {
  border: 1px solid rgb(221, 221, 221);
  color: rgb(86, 86, 86);
  margin-top: 10px;
  height: 200px;
  width: 100%;
  padding: 10px 8px;
  margin-bottom: 20px;
  outline: 0 none;
  background-color: rgb(255, 255, 255);
  font-size: 15px;
  text-transform: capitalize;
}
.comments-form button {
  border: medium none;
  color: rgb(255, 255, 255);
  display: inline-block;
  float: left;
  font-size: 14px;
  margin-left: 10px;
  margin-top: 0;
  padding: 3px 20px;
  text-transform: uppercase;
  transition: all 0.5s ease 0s;
  background: rgb(138 33 252) none repeat scroll 0 0;
  border-radius: 0;
  font-weight: 700;
  line-height: 33px;
  vertical-align: middle;
  width: auto;
  height: 45px;
  max-width: 100%;
}
.comments-form button:hover {
  background: rgb(11, 150, 190) none repeat scroll 0 0;
}
/* sidebar */

.sidebar-widget {
  overflow: hidden;
}
.sidebar-heading h4 {
  border-bottom: 1px solid hsl(0, 0%, 90%);
  bottom: -1px;
  color: hsl(0, 0%, 20%);
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 17px;
  padding-bottom: 13px;
  position: relative;
  text-transform: capitalize;
  margin-bottom: 30px;
}
.sidebar-heading h4:before {
  background: rgb(138 33 252) none repeat scroll 0 0;
  bottom: -1px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  width: 50%;
}
.sidebar-form form input {
  background-color: rgb(255, 255, 255);
  border: 2px solid rgb(204, 204, 204);
  color: rgb(143, 143, 143);
  width: 60%;
  font-size: 15px;
  height: 36px;
  font-weight: 500;
  padding: 0 8px;
  float: left;
}
.sidebar-form form button {
  background-color: rgb(138 33 252);
  border: 2px solid rgb(138 33 252);
  color: #fff;
  font-weight: 700;
  height: 36px;
  transition: all 0.3s ease 0s;
  font-size: 15px;
  width: 40%;
  padding: 5px 10px;
  line-height: 16px;
  cursor: pointer;
}
.sidebar-form form button:hover {
  color: rgb(143, 143, 143);
}
.sidebar-menu li {
  margin: 0 0 14px;
}
.sidebar-menu li a {
  color: hsl(0, 0%, 40%);
  font-weight: 300;
  font-size: 14px;
}
.sidebar-menu li:last-child {
  border-bottom: 0;
  margin: 0;
  padding: 0;
}
.sidebar-menu li:hover a {
  color: rgb(138 33 252);
}
.tag-menu {
  overflow: hidden;
}
.tag-menu li {
  display: inline-block;
  margin-bottom: 8px;
  margin-right: 8px;
}
.tag-menu li a {
  border: 1px solid hsl(0, 0%, 91%);
  color: hsl(0, 0%, 20%);
  display: inline-block;
  font-size: 13px;
  padding: 5px 17px;
  text-align: center;
  transition: all 0.3s ease 0s;
}
.tag-menu li a:hover {
  background: rgb(138 33 252) none repeat scroll 0 0;
  border-color: rgb(138 33 252);
  color: hsl(0, 0%, 100%);
}
.custom-width {
  padding: 0 10px;
}
.health-content h2 {
  color: rgb(51, 51, 51);
  line-height: 1.25;
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 20px;
  margin-top: 25px;
}
.health-content h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 17px;
  color: rgb(51, 51, 51);
}
.health-content p {
  color: #666;
  margin-bottom: 12px;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
}
.health-content-meta {
  margin-bottom: 10px;
  margin-top: 15px;
}
.health-content-meta span {
  font-size: 14px;
  color: #666;
  margin-right: 10px;
}
.health-content-meta span i {
  color: #333;
  margin-right: 10px;
  font-size: 14px;
}
.respond-area {
  overflow: hidden;
}
.respond-title h3 {
  color: #323232;
  font-size: 25px;
  font-weight: 500;
  margin: 0;
}
.respond-title p {
  color: #555;
  font-weight: 300;
  line-height: 26px;
  font-size: 13px;
  margin-bottom: 25px;
}
.respond-form {
  overflow: hidden;
}
label {
  color: #666666;
  display: block;
  font-weight: 500;
  margin-bottom: 5px;
  max-width: 100%;
  text-transform: capitalize;
  font-size: 14px;
}
.respond-form textarea {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  color: #afafaf;
  height: 168px;
  margin-bottom: 20px;
  padding: 6px 15px;
  resize: none;
  width: 100%;
}
.respond-form input {
  height: 36px;
  padding: 0 8px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  width: 100%;
  margin-bottom: 15px;
}
.respond-form button {
  background: rgb(138 33 252) none repeat scroll 0 0;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 14px;
  color: #fff;
  border: none;
  transition: 0.3s;
  line-height: 20px;
}
.respond-form button:hover {
  background: #18afd3 none repeat scroll 0 0;
}
.feature-image img {
  width: 100%;
}
p.form-messege {
  margin-left: 110px;
  margin-top: 12px;
}