@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,700&display=swap" rel="stylesheet');
@charset "utf-8";
/**
*
* -----------------------------------------------------------------------------
*
* Template : Vsaasi - Creative HTML5 Template for Saas, Startup & Agency
* Author :reacthemes
* Author URI : https://reacthemes.com/
*
* -----------------------------------------------------------------------------
*
**/
/* Table Of Content
---------------------------------------------------------
01. General CSS
02. Common Class Css Here 
03. Header Css Here 
04. Breadcrumbs CSS
05. Banner Css Here 
06. Service Css Here 
07. Cta Css Here 
08. About Css Here 
09. Tab Css Here 
10. clients Table Css Here 
11. Price Table Css Here 
12. Awards Css Here 
13. Join Css Here 
14. Design Css Here 
15. Isotop Css Here 
16. Blog Css Here 
17. Contact Css Here 
18. Sidebar CSS Here
19. Blog Details CSS
20. Portfolio Css Here 
21. Portfolio Details Css Here 
22. Service Details Css Here 
23. Contact Css Here 
24. Preloader Css Here 
25. Pi ScrollUp Css Here 
26. Footer Css Here 
27. 404 Css Here 
--------------------------------------------------------*/
/* -----------------------------------
    01. General CSS
-------------------------------------*/
html,
body {
  font-size: 16px;
  color: #5e5c69;
  font-family: 'Poppins', sans-serif;
  vertical-align: baseline;
  font-weight: 400;
  overflow-x: hidden;
  line-height: 1.7;
}
img {
  max-width: 100%;
  height: auto;
}
p {
  margin: 0 0 26px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Poppins', sans-serif;
  color: #5e5c69;
  margin: 0 0 26px;
  font-weight: 500;
  line-height: 1.3;
}
h1 {
  font-size: 60px;
}
h2 {
  font-size: 42px;
}
h3 {
  font-size: 30px;
}
h4 {
  font-size: 24px;
}
h5 {
  font-size: 18px;
}
h6 {
  font-size: 14px;
}
a {
  color: #744fff;
  transition: all 0.5s ease 0s;
  text-decoration: none !important;
  outline: none !important;
}
a:active,
a:hover {
  text-decoration: none;
  outline: 0 none;
  color: #744fff;
}
ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
/*******************************************
02. Common Class Css Here 
*****************/
.pi-v-align {
  align-items: center;
}
.pi-btn {
  background: #744fff;
  font-size: 15px;
  color: #ffffff;
  border-radius: 10px;
  padding: 13px 34px;
  display: inline-block;
  font-weight: 500;
  transition: all 0.5s ease 0s;
}
.pi-btn:hover {
  color: #ffffff;
  box-shadow: 0px 20px 30px 0px rgba(10, 0, 45, 0.1);
}
.pi-absolute {
  position: absolute;
}
.white-bg {
  background: #ffffff !important;
}
/*******************************************
03. Header Css Here 
*****************/
#pi-header {
  background: #ffffff;
  position: relative;
  z-index: 9999;
}
#pi-header .jk-inner-menus {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
#pi-header .jk-menus > li > a {
  font-family: 'Poppins', sans-serif;
}
#pi-header .pi-join-btn {
  border: 2px solid #744fff;
  font-size: 15px;
  color: #744fff;
  font-weight: 500;
  border-radius: 10px;
  padding: 7px 20px;
  margin-left: 25px;
  transition: all 0.7s ease 0s;
}
#pi-header .pi-join-btn:hover {
  border: 2px solid #744fff;
  color: #ffffff;
  background: #744fff;
}
#pi-header .logo {
  padding: 10px 0;
}
#pi-header .container {
  max-width: 1200px;
}
#pi-header.pi-sticky {
  background: #ffffff;
  position: fixed !important;
  width: 100%;
  -webkit-animation: stickyanimations 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: stickyanimations 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  box-shadow: 10px 0 20px rgba(8, 0, 41, 0.08);
  top: 0;
  left: 0;
  right: 0;
}
#pi-header.pi-transparent {
  position: absolute;
  width: 100%;
  background: transparent;
}
#pi-header.pi-transparent .jk-menus > li > a {
  color: #c2c8f4;
}
#pi-header.pi-transparent .jk-menus > li.menu-active > a {
  color: #ffffff;
}
#pi-header.pi-transparent .logo img.logo-dark {
  display: none;
}
#pi-header.pi-transparent .pi-join-btn {
  border-color: #c2c8f4;
  color: #ffffff;
}
#pi-header.pi-transparent .pi-join-btn:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #465fe9;
}
#pi-header.pi-transparent.pi-sticky {
  background: #fff;
}
#pi-header.pi-transparent.pi-sticky .pi-join-btn {
  border-color: #ffffff;
}
#pi-header.pi-transparent.pi-sticky .logo img.logo-light {
  display: none;
}
#pi-header.pi-transparent.pi-sticky .logo img.logo-dark {
  display: block;
}
#pi-header.pi-transparent.pi-sticky .pi-join-btn {
  border-color: #465fe9;
  color: #465fe9;
}
#pi-header.pi-transparent.pi-sticky .pi-join-btn:hover {
  background: #465fe9;
  border-color: #465fe9;
  color: #fff;
}
.pi-sub-shadow li ul.sub-menu {
  box-shadow: 0px 10px 30px 0px rgba(10, 0, 45, 0.1);
}
.jk-menus.pi-sub-shadow li > .pi-current-page {
  color: #744fff !important;
}
@-webkit-keyframes stickyanimations {
  0% {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes stickyanimations {
  0% {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
/* ------------------------------------
    04. Breadcrumbs CSS
-------------------------------------*/
.pi-breadcrumbs .breadcrumbs-wrap {
  position: relative;
  overflow: hidden;
}
.pi-breadcrumbs .breadcrumbs-wrap img {
  width: 100%;
}
.pi-breadcrumbs .breadcrumbs-wrap img.pi__inner__shape {
  width: auto;
  position: absolute;
  right: 20px;
  top: -64px;
}
.pi-breadcrumbs .breadcrumbs-wrap .container {
  position: relative;
}
.pi-breadcrumbs .breadcrumbs-wrap .breadcrumbs-inner {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.pi-breadcrumbs .breadcrumbs-wrap .breadcrumbs-inner .breadcrumbs-text {
  text-align: left;
}
.pi-breadcrumbs .breadcrumbs-wrap .breadcrumbs-inner .breadcrumbs-text .breadcrumbs-title {
  width: 100%;
  font-size: 60px;
  text-transform: capitalize;
  color: #ffffff;
  font-weight: 700;
  line-height: 70px;
  margin: 0;
}
.pi-breadcrumbs .breadcrumbs-wrap .breadcrumbs-inner .breadcrumbs-text .pi-nav ul li {
  display: inline;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  opacity: .5;
}
.pi-breadcrumbs .breadcrumbs-wrap .breadcrumbs-inner .breadcrumbs-text .pi-nav ul li a {
  color: #fff;
}
.pi-breadcrumbs .breadcrumbs-wrap .breadcrumbs-inner .breadcrumbs-text .pi-nav ul li a:hover {
  opacity: 0.7;
}
.pi-breadcrumbs .breadcrumbs-wrap .breadcrumbs-inner .breadcrumbs-text .pi-nav ul li:after {
  content: "";
  margin: 0 10px;
  background: #fff;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.pi-breadcrumbs .breadcrumbs-wrap .breadcrumbs-inner .breadcrumbs-text .pi-nav ul li:last-child:after {
  content: unset;
  margin: 0;
}
.pi-breadcrumbs.pi-blog-breadcrumbs .pi-category {
  font-size: 14px;
  color: #ffffff;
  display: inline-block;
  background: #3d4eb7;
  border-radius: 4px;
  padding: 3px 17px;
  font-weight: 500;
  transition: all 0.5s ease 0s;
  margin-bottom: 20px;
}
.pi-breadcrumbs.pi-blog-breadcrumbs .pi-post-author {
  display: flex;
  align-items: center;
  margin-top: 30px;
}
.pi-breadcrumbs.pi-blog-breadcrumbs .pi-post-author .avatar {
  margin-right: 16px;
}
.pi-breadcrumbs.pi-blog-breadcrumbs .pi-post-author .avatar img {
  border-radius: 50%;
  width: 50px;
}
.pi-breadcrumbs.pi-blog-breadcrumbs .pi-post-author .info .name {
  margin: 0;
  color: #ffffff;
  transition: all 0.5s ease 0s;
  font-size: 18px;
  font-weight: 600;
}
.pi-breadcrumbs.pi-blog-breadcrumbs .pi-post-author .info .designation {
  font-size: 15px;
  color: #919ad2;
  margin: 0;
}
/*******************************************
05. Banner Css Here 
*****************/
.pi-banner {
  padding: 108px 0 320px;
  position: relative;
}
.pi-banner .banner-layer {
  z-index: 1;
  margin-left: -20px;
}
.pi-banner .pi__layer1 {
  -webkit-animation: p__pi 4s infinite;
  animation: p__pi 4s infinite;
  margin-left: 5px;
}
.pi-banner .container {
  max-width: 1200px;
}
.pi-banner .pi-row {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-top: 45px;
}
.pi-banner .pi-row .pi-left-content {
  flex: 0 0 50%;
  padding-top: 100px;
}
.pi-banner .pi-row .pi-left-content span {
  color: #744fff;
  background: #f4f1ff;
  font-size: 15px;
  font-weight: 400;
  padding: 1px 16px 3px;
  border-radius: 30px;
  display: inline-block;
}
.pi-banner .pi-row .pi-left-content h1 {
  font-size: 60px;
  color: #1a152e;
  font-weight: 700;
  margin: 18px 0 20px;
  line-height: 70px;
}
.pi-banner .pi-row .pi-left-content p {
  color: #5e5c69;
  font-size: 16px;
  margin: 0;
  font-weight: 400;
}
.pi-banner .pi-row .pi-left-content a {
  background: #744fff;
  font-size: 15px;
  color: #ffffff;
  border-radius: 10px;
  padding: 13px 34px;
  display: inline-block;
  font-weight: 500;
  margin-top: 52px;
  transition: all 0.5s ease 0s;
}
.pi-banner .pi-row .pi-left-content a:hover {
  box-shadow: 0px 20px 30px 0px rgba(10, 0, 45, 0.1);
}
.pi-banner .pi-row .pi-right-image {
  flex: 0 0 50%;
}
.pi-banner .pi-row .pi-right-image img.pi__layer2 {
  top: 300px;
  left: 596px;
  -webkit-animation: k__pi 4s infinite;
  animation: k__pi 4s infinite;
}
.pi-banner .pi-row .pi-right-image img.pi__layer3 {
  top: 284px;
  left: 106%;
  z-index: 0;
  -webkit-animation: j__pi 5s infinite;
  animation: j__pi 5s infinite;
}
@keyframes k__pi {
  0% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  to {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }
}
@keyframes j__pi {
  0% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  50% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  to {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
}
@keyframes p__pi {
  0% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  to {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }
}
.pi-banner-two {
  padding: 140px 0 270px;
  background: url(assets/images/banner/banner2.jpg) no-repeat center top;
  background-size: cover;
}
.pi-banner-two .pi__layer1 {
  margin-left: -5px;
  -webkit-animation: s__pi 5s infinite;
  animation: s__pi 5s infinite;
}
.pi-banner-two .banner-layer {
  z-index: 1;
  margin-left: 98px;
}
.pi-banner-two .container {
  max-width: 1200px;
}
.pi-banner-two .pi-row {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-top: 45px;
}
.pi-banner-two .pi-row .pi-left-content {
  flex: 0 0 62%;
  padding-top: 120px;
}
.pi-banner-two .pi-row .pi-left-content span {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  padding: 1px 16px 3px;
  border-radius: 30px;
  display: inline-block;
  margin-left: -15px;
  opacity: .7;
}
.pi-banner-two .pi-row .pi-left-content span img {
  margin-right: 6px;
  margin-top: -2px;
}
.pi-banner-two .pi-row .pi-left-content h1 {
  font-size: 60px;
  color: #ffffff;
  font-weight: 700;
  margin: 18px 0 20px;
  line-height: 70px;
}
.pi-banner-two .pi-row .pi-left-content p {
  color: #ffffff;
  font-size: 18px;
  margin: 0;
  font-weight: 400;
  opacity: .6;
}
.pi-banner-two .pi-row .pi-left-content a {
  background: #465fe9;
  font-size: 15px;
  color: #ffffff;
  border-radius: 10px;
  padding: 13px 34px;
  display: inline-block;
  font-weight: 500;
  margin-top: 52px;
  transition: all 0.5s ease 0s;
}
.pi-banner-two .pi-row .pi-left-content a:hover {
  box-shadow: 0px 20px 30px 0px rgba(10, 0, 45, 0.1);
}
.pi-banner-two .pi-row .pi-right-image {
  flex: 0 0 38%;
}
.pi-banner-two .pi-row .pi-right-image img.layer2 {
  top: 300px;
  left: 17px;
}
.pi-banner-two .pi-row .pi-right-image img.layer3 {
  top: 277px;
  right: -55%;
  z-index: 0;
}
.pi-banner-two .pi-row .pi-right-image img.layer4 {
  top: 33px;
  right: -52%;
  transform: rotate(6deg);
  z-index: 0;
}
.pi-banner-two.pi-banner-three {
  padding: 140px 0 187px;
  background: url(assets/images/banner/banner3.jpg) no-repeat center top;
  background-size: cover;
}
.pi-banner-two.pi-banner-three img.pi__layer1 {
  left: -20%;
  top: -100px;
  -webkit-animation: r 4s 1s linear infinite alternate;
  animation: pi___r 4s 1s linear infinite alternate;
}
.pi-banner-two.pi-banner-three img.pi__layer2 {
  left: 32%;
  top: 2%;
  -webkit-animation: r 6s 1s linear infinite alternate;
  animation: pi___r 6s 1s linear infinite alternate;
}
.pi-banner-two.pi-banner-three img.pi__layer3 {
  left: 45%;
  -webkit-animation: r 5s 1s linear infinite alternate;
  animation: pi___r 5s 1s linear infinite alternate;
}
.pi-banner-two.pi-banner-three .pi-row {
  margin-top: 100px;
}
.pi-banner-two.pi-banner-three .pi-row .pi-left-content {
  flex: 0 0 38%;
  padding-top: 38px;
}
.pi-banner-two.pi-banner-three .pi-row .pi-left-content h1 {
  font-size: 50px;
  color: #ffffff;
  font-weight: 700;
  margin: 18px 0 20px;
  line-height: 70px;
}
.pi-banner-two.pi-banner-three .pi-row .pi-left-content span {
  color: #ffffff;
  opacity: .7;
}
.pi-banner-two.pi-banner-three .pi-row .pi-left-content p {
  color: #ffffff;
  font-size: 20px;
  margin: 0;
  font-weight: 400;
  opacity: .6;
}
.pi-banner-two.pi-banner-three .pi-row .pi-left-content a {
  margin-top: 48px;
}
.pi-banner-two.pi-banner-three .pi-row .pi-left-content .pi-list-arrow {
  margin: 0;
  padding: 23px 0 0px;
  overflow: hidden;
}
.pi-banner-two.pi-banner-three .pi-row .pi-left-content .pi-list-arrow li {
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  margin: 13px 31px 0px 3px;
}
.pi-banner-two.pi-banner-three .pi-row .pi-left-content .pi-list-arrow li:before {
  content: "\f108";
  font-family: Flaticon;
  position: absolute;
  font-size: 14px;
  top: 2px;
  left: 0;
  color: #ffffff;
  font-weight: 600;
}
.pi-banner-two.pi-banner-three .pi-row .pi-right-image {
  flex: 0 0 62%;
}
@keyframes s__pi {
  0% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  50% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  to {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
}
@keyframes pi___r {
  0% {
    -webkit-transform: translate3d(-10px, -10px, 0);
    transform: translate3d(-10px, -10px, 0);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate3d(-20px, 20px, 0);
    transform: translate3d(-20px, 20px, 0);
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(30px, 0, 0);
    transform: translate3d(30px, 0, 0);
    opacity: 1;
  }
}
/*******************************************
06. Service Css Here 
*****************/
.pi-service {
  background: url(assets/images/service/bg1.png) no-repeat center top;
  background-size: cover;
  padding-top: 52px;
  padding-bottom: 150px;
}
.pi-service .container {
  max-width: 1200px;
}
.pi-service .pi-sec-title {
  text-align: center;
  padding-bottom: 66px;
}
.pi-service .pi-sec-title .pi-title {
  color: #1a152e;
  font-size: 44px;
  font-weight: 600;
  margin: -10px 0 10px;
}
.pi-service .pi-sec-title p {
  font-size: 16px;
  color: #5e5c69;
}
.pi-service .pi-container {
  background: #ffffff;
  padding: 86px 40px 98px 30px;
  border-radius: 20px;
  box-shadow: 0px 20px 40px 0px rgba(10, 0, 45, 0.09);
  position: relative;
}
.pi-service .pi-container .pi-absolute {
  position: absolute;
  left: -40px;
  bottom: 90px;
}
.pi-service .pi-container .pi-inner-col {
  padding-left: 40px;
}
.pi-service .pi-container .pi-inner-col .pi-title {
  color: #0f1432;
  font-size: 20px;
  font-weight: 600;
  margin: 36px 0 12px;
}
.pi-service .pi-container .pi-inner-col p {
  color: #5e5c69;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  max-width: 270px;
}
.pi-service .pi-container .pi-inner-col .pi-icon {
  transition: all 0.5s ease 0s;
  transform: translateY(0px);
  display: block;
}
.pi-service .pi-container .pi-inner-col .pi-arrow-btn {
  display: inline-block;
}
.pi-service .pi-container .pi-inner-col .pi-arrow-btn:before {
  margin: 40px 0 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #f1edff;
  display: block;
  text-align: center;
  border-radius: 100%;
  color: #744fff;
  font-size: 18px;
  transition: all 0.5s ease 0s;
}
.pi-service .pi-container .pi-inner-col .pi-arrow-btn:hover:before {
  background: #744fff;
  color: #ffffff;
  box-shadow: 0px 14px 30px 0px rgba(55, 16, 196, 0.3);
}
.pi-service .pi-container .pi-inner-col:hover .pi-icon {
  transform: translateY(-5px);
}
.pi-services {
  padding-top: 10px;
  padding-bottom: 80px;
}
.pi-services .pi-pl {
  padding-left: 150px;
}
.pi-services .container {
  max-width: 1070px;
}
.pi-services .container .pi-sec-title {
  text-align: center;
  margin-bottom: 100px;
}
.pi-services .container .pi-sec-title .pi-title {
  color: #1a152e;
  font-size: 40px;
  font-weight: 700;
  margin: 0 0 20px;
}
.pi-services .container .pi-service-filter {
  border-bottom: none;
  border-left: 2px solid #ededf4;
  display: block;
  margin: 0;
  list-style: none;
}
.pi-services .container .pi-service-filter li a {
  border: none;
  color: #787780;
  font-weight: 500;
  outline: none;
  background: none;
  padding: 10px 28px;
  display: block;
  cursor: pointer;
  position: relative;
  width: 100%;
  margin: 0;
  text-align: left;
  font-size: 14px;
}
.pi-services .container .pi-service-filter li a:after {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  height: 100%;
  width: 100%;
  bottom: 0;
  display: block;
  z-index: 1;
  border-left: 2px solid #465fe9;
  opacity: 0;
  transform: translateY(-25px);
  transition: all .8s ease;
}
.pi-services .container .pi-service-filter li a.active {
  color: #465fe9;
  position: relative;
}
.pi-services .container .pi-service-filter li a.active:before {
  content: "";
  position: absolute;
  background: -moz-linear-gradient(left, #465fe9 0%, rgba(237, 239, 253, 0) 90%, rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0) 101%, rgba(255, 255, 255, 0) 102%);
  background: -webkit-linear-gradient(left, #465fe9 0%, rgba(237, 239, 253, 0) 90%, rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0) 101%, rgba(255, 255, 255, 0) 102%);
  background: linear-gradient(to right, #465fe9 0%, rgba(237, 239, 253, 0) 90%, rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0) 101%, rgba(255, 255, 255, 0) 102%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#465fe9', endColorstr='#00ffffff', GradientType=1);
  opacity: .1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  bottom: 0;
  display: block;
  z-index: 0;
  transform: translateY(0px);
}
.pi-services .container .pi-service-filter li a.active:after {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  height: 100%;
  width: 100%;
  bottom: 0;
  display: block;
  z-index: 1;
  border-left: 2px solid #465fe9;
  opacity: 1;
  transform: translateY(0px);
}
.pi-services .container .pi-service-filter li a:hover {
  color: #465fe9;
}
.pi-services .container .pi-service-filter li a:hover:after {
  opacity: 1;
  transform: translateY(0px);
}
.pi-services .container .pi-inner-col {
  padding-bottom: 75px;
}
.pi-services .container .pi-inner-col h3 {
  font-size: 18px;
  color: #1a152e;
  font-weight: 600;
  margin: 36px 0 14px;
}
.pi-services .container .pi-inner-col p {
  font-size: 16px;
  color: #5e5c69;
  margin: 0;
  max-width: 250px;
  line-height: 24px;
}
.pi-services .container .tab-content .tab-pane {
  transform: translateY(25px);
  transition: all 500ms ease;
}
.pi-services .container .tab-content .tab-pane.active.show {
  transform: translateY(0px);
}
.pi-core {
  padding: 130px 0 130px;
}
.pi-core .container {
  max-width: 1170px;
}
.pi-core .container .col-lg-4 {
  text-align: center;
  position: relative;
}
.pi-core .container .col-lg-4 i.icon {
  position: absolute;
  right: 57px;
  top: -16px;
  transition: all 0.5s ease 0s;
}
.pi-core .container .col-lg-4 i.icon.icon2 {
  right: 76px;
  top: -27px;
}
.pi-core .container .col-lg-4 i.icon.icon3 {
  right: 59px;
  top: 5px;
}
.pi-core .container .col-lg-4.pi-col1 {
  margin-top: 25px;
}
.pi-core .container .col-lg-4.pi-col2 {
  margin-top: 37px;
}
.pi-core .container .col-lg-4 h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1a152e;
  margin: 34px 0 15px;
}
.pi-core .container .col-lg-4 p {
  font-size: 16px;
  color: #5e5c69;
  margin: 0 auto;
  max-width: 250px;
}
.pi-core .container .col-lg-4:hover i.icon {
  transform: translateY(-5px);
}
/*******************************************
07. Cta Css Here 
*****************/
.pi-cta {
  background: url(assets/images/cta/bg1.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  padding: 80px 0 72px;
  margin-top: 20px;
}
.pi-cta .container {
  max-width: 1200px;
}
.pi-cta .container h5 {
  margin: 0 0 8px;
  color: #ffffff;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
}
.pi-cta .container h3 {
  margin: 0;
  color: #ffffff;
  padding: 0;
  font-size: 30px;
  font-weight: 700;
}
.pi-cta .container .col-lg-4 {
  text-align: right;
}
.pi-cta .container .col-lg-4 .pi-btn {
  background: #ffffff;
  color: #465fe9;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0px 30px 30px 0px rgba(10, 0, 45, 0.1);
  padding: 12px 36px;
}
/*******************************************
08. About Css Here 
*****************/
.pi-about {
  padding: 160px 0 240px;
}
.pi-about .container {
  max-width: 1300px;
}
.pi-about .container .pi-container .pi-sec-title {
  padding-left: 46px;
  margin-top: -15px;
}
.pi-about .container .pi-container .pi-sec-title .pi-title {
  color: #1a152e;
  font-size: 44px;
  font-weight: 600;
  margin: -10px 0 22px;
}
.pi-about .container .pi-container .pi-sec-title i {
  margin-left: -24px;
}
.pi-about .container .pi-container .pi-sec-title p {
  font-size: 16px;
  color: #5e5c69;
}
.pi-about .container .pi-container .pi-sec-title ul.pi-list {
  margin: 28px 0 0;
}
.pi-about .container .pi-container .pi-sec-title ul.pi-list li {
  padding-left: 40px;
  margin: 14px 0;
  background: url(assets/images/about/icon.png) no-repeat left top 3px;
  color: #1a152e;
  font-size: 16px;
}
.pi-about .container .pi-container .pi-sec-title .pi-btn {
  padding: 16px 38px;
  margin-top: 33px;
}
.pi-about.pi-about-about {
  padding-bottom: 150px;
}
.pi-about.pi-about-two {
  padding-bottom: 0;
}
.pi-about.pi-about-two .container {
  max-width: 1200px;
}
.pi-about.pi-about-two .pi___animate {
  bottom: -10%;
  left: 19%;
  z-index: 1;
}
.pi-about.pi-about-two .pi-container {
  position: relative;
}
.pi-about.pi-about-two .pi-container .layer21 {
  bottom: 111px;
  z-index: 0;
  left: -90px;
}
.pi-about.pi-about-two .pi-container .pi__shape_bg6 {
  position: absolute;
  left: -60px;
  width: 280px;
  height: 100%;
  top: 25%;
}
.pi-about.pi-about-two .pi-container .pi-sec-title {
  padding-left: 0;
  margin: 58px 0 12px;
}
.pi-about.pi-about-two .pi-container .pi-sec-title .pi-title {
  font-size: 40px;
}
.pi-about.pi-about-two .pi-container .pi-col-6 {
  padding-left: 0;
}
.pi-about.pi-about-two .pi-container .banner-tw {
  position: relative;
  z-index: 1;
  margin-left: -75px;
}
.pi-about.pi-about-two .pi-container .pi-list-arrow {
  margin: 0;
  padding: 23px 0 65px;
  overflow: hidden;
}
.pi-about.pi-about-two .pi-container .pi-list-arrow li {
  position: relative;
  padding-left: 30px;
  float: left;
  width: 44%;
  font-size: 14px;
  color: #524e65;
  font-weight: 500;
  margin: 8px 31px 8px 3px;
}
.pi-about.pi-about-two .pi-container .pi-list-arrow li:before {
  content: "\f108";
  font-family: Flaticon;
  position: absolute;
  font-size: 14px;
  top: 2px;
  left: 0;
  color: #465fe9;
  font-weight: 600;
}
.pi-about.pi-about-two .pi-container .pi-btn-border {
  border: 2px solid #465fe9;
  border-radius: 10px;
  color: #465fe9;
  display: inline-block;
  text-align: center;
  padding: 8px 62px;
  clear: both;
}
.pi-about.pi-about-two .pi-container .pi-btn-border:hover {
  background: #465fe9;
  color: #ffffff;
}
.pi-about.pi-about-three {
  background: #465fe9;
  background-size: cover;
  padding-top: 110px;
  padding-bottom: 98px;
  position: relative;
  overflow: hidden;
}
.pi-about.pi-about-three .pi__shape_bg2 {
  position: absolute;
  top: -20px;
  width: 100%;
  z-index: 1;
  height: 588px;
  right: -300px;
  max-width: 1653px;
}
.pi-about.pi-about-three .pi-container {
  position: relative;
  z-index: 1;
}
.pi-about.pi-about-three .pi-container .pi-sec-title {
  padding-left: 0;
  margin: 0px 0 12px;
}
.pi-about.pi-about-three .pi-container .pi-sec-title .pi-title {
  font-size: 40px;
  color: #ffffff;
}
.pi-about.pi-about-three .pi-container .pi-sec-title p {
  color: #c8cff8;
}
.pi-about.pi-about-three .pi-container .pi-col-6 {
  padding-left: 0;
}
.pi-about.pi-about-three .pi-container .pi-absolute {
  max-width: 519px;
  left: -120px;
}
.pi-about.pi-about-three .pi-container .pi-list-arrow {
  margin: 0;
  padding: 23px 0 65px;
  overflow: hidden;
}
.pi-about.pi-about-three .pi-container .pi-list-arrow li {
  position: relative;
  padding-left: 30px;
  float: left;
  width: 41%;
  font-size: 15px;
  color: #c8cff8;
  font-weight: 400;
  margin: 8px 31px 8px 3px;
}
.pi-about.pi-about-three .pi-container .pi-list-arrow li:before {
  content: "\f108";
  font-family: Flaticon;
  position: absolute;
  font-size: 14px;
  top: 2px;
  left: 0;
  color: #ffffff;
  font-weight: 600;
}
.pi-about.pi-about-three .pi-container .pi-btn-border {
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  color: #ffffff;
  display: inline-block;
  text-align: center;
  padding: 9px 50px;
  clear: both;
}
.pi-about.pi-about-three .pi-container .pi-btn-border:hover {
  background: #ffffff;
  color: #465fe9;
  box-shadow: 0px 20px 30px 0px rgba(10, 0, 45, 0.1);
}
.pi-about.analytics {
  padding-bottom: 0;
  margin-top: 24px;
}
.pi-about.analytics .container {
  max-width: 1200px;
}
.pi-about.analytics .pi__shape_bg7 {
  position: absolute;
  right: 15%;
  width: 320px;
  height: 150px;
  top: -6.2%;
  z-index: 11;
  overflow: hidden;
}
.pi-about.analytics .pi__shape_bg8 {
  position: absolute;
  left: -14%;
  width: 416px;
  height: 100%;
  top: 78%;
  z-index: 0;
}
.pi-about.analytics .pi__shape_bg9 {
  position: absolute;
  right: 55px;
  width: 270px;
  height: 192px;
  bottom: -2px;
  overflow: hidden;
  z-index: 11;
}
.pi-about.analytics .pi-container {
  position: relative;
}
.pi-about.analytics .pi-container .layer21 {
  top: -73px;
  z-index: 0;
  left: -122px;
}
.pi-about.analytics .pi-container .pi-sec-title {
  padding-left: 0;
  margin: 10px 0 12px;
}
.pi-about.analytics .pi-container .pi-sec-title .pi-title {
  font-size: 40px;
}
.pi-about.analytics .pi-container .pi-col-6 {
  flex: 0 0 55%;
  max-width: 55%;
}
.pi-about.analytics .pi-container .pi-col-5 {
  flex: 0 0 45%;
  max-width: 45%;
  padding-left: 0;
}
.pi-about.analytics .pi-container .banner-tw {
  position: relative;
  z-index: 1;
  margin-left: -20px;
}
.pi-about.analytics .pi-container .pi-list {
  margin: 0;
  padding: 0 0 42px;
  overflow: hidden;
}
.pi-about.analytics .pi-container .pi-btn-border {
  border: 2px solid #465fe9;
  border-radius: 10px;
  color: #465fe9;
  display: inline-block;
  text-align: center;
  padding: 9px 37px;
  clear: both;
}
.pi-about.analytics .pi-container .pi-btn-border:hover {
  box-shadow: 0px 20px 30px 0px rgba(10, 0, 45, 0.1);
}
.pi-about.pi-dashboard {
  padding-bottom: 90px;
  margin-top: 70px;
}
.pi-about.pi-dashboard .container {
  max-width: 1200px;
}
.pi-about.pi-dashboard .container .layer26 {
  top: -48px;
  z-index: 0;
  right: -90px;
}
.pi-about.pi-dashboard .pi__shape_bg10 {
  position: absolute;
  right: -63px;
  width: 416px;
  height: 100%;
  top: 1%;
  z-index: 11;
}
.pi-about.pi-dashboard .pi__shape_bg11 {
  position: absolute;
  right: -7%;
  width: 416px;
  height: 100%;
  top: 35%;
  z-index: 11;
}
.pi-about.pi-dashboard .pi-container {
  position: relative;
}
.pi-about.pi-dashboard .pi-container .pi-sec-title {
  padding-left: 0;
  margin: 66px 0 12px;
}
.pi-about.pi-dashboard .pi-container .pi-sec-title .pi-title {
  font-size: 40px;
}
.pi-about.pi-dashboard .pi-container .pi-col-6 {
  flex: 0 0 57%;
  max-width: 57%;
}
.pi-about.pi-dashboard .pi-container .pi-col-5 {
  flex: 0 0 43%;
  max-width: 43%;
  padding-left: 15px;
}
.pi-about.pi-dashboard .pi-container .banner-tw {
  position: relative;
  z-index: 1;
  margin-left: 38px;
}
.pi-about.pi-dashboard .pi-container .pi-dots {
  margin: 0;
  padding: 14px 0 28px;
  overflow: hidden;
  max-width: 280px;
}
.pi-about.pi-dashboard .pi-container .pi-dots li {
  position: relative;
  padding-left: 25px;
  font-weight: 500;
  font-size: 16px;
  color: #1a152e;
  margin: 0 0 28px 0;
}
.pi-about.pi-dashboard .pi-container .pi-dots li:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #17c413;
  left: 0;
  top: 8px;
  border-radius: 50%;
}
.pi-about.pi-dashboard .pi-container .pi-btn-border {
  border: 2px solid #465fe9;
  border-radius: 10px;
  color: #465fe9;
  display: inline-block;
  text-align: center;
  padding: 9px 37px;
  clear: both;
}
.pi-about.pi-dashboard .pi-container .pi-btn-border:hover {
  box-shadow: 0px 20px 30px 0px rgba(10, 0, 45, 0.1);
}
.pi-about.pi-services-two {
  padding-top: 180px;
  margin-top: -162px;
  background: #fff;
}
.pi-managed {
  background: url(assets/images/manage/bg2.jpg) no-repeat left top;
  background-size: cover;
  color: #ffffff;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.pi-managed .pi__shape_bg1 {
  position: absolute;
  bottom: -90px;
  width: 100%;
  z-index: 1;
  height: 535px;
}
.pi-managed .container {
  max-width: 1200px;
  position: relative;
  z-index: 2;
}
.pi-managed .container h2 {
  font-size: 50px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}
.pi-managed .container p {
  font-size: 16px;
  color: #fff;
  margin: 10px 0 42px;
  padding-right: 20px;
  opacity: .8;
}
.pi-managed .container .pi-btn {
  background: #ffffff;
  color: #465fe9;
  padding: 17px 35px;
}
.pi-managed .container .pi-box {
  background: #ffffff;
  border-radius: 10px;
  color: #5e5c69;
  font-size: 15px;
  padding-bottom: 36px;
  margin-left: auto;
  max-width: 370px;
  box-shadow: 0px 40px 40px 0px rgba(10, 0, 45, 0.09);
}
.pi-managed .container .pi-box span {
  font-size: 20px;
  color: #1a152e;
  font-weight: 600;
  background: #f2f3fa;
  display: block;
  text-align: center;
  border-radius: 10px 10px 0 0;
  padding: 12px 0;
}
.pi-managed .container .pi-box ul {
  margin: 0;
  padding: 25px 50px 18px;
}
.pi-managed .container .pi-box ul li {
  position: relative;
  padding-left: 30px;
  margin: 10px 0;
}
.pi-managed .container .pi-box ul li:before {
  content: "\f108";
  font-family: Flaticon;
  position: absolute;
  font-size: 14px;
  top: 2px;
  left: 0;
  color: #465fe9;
  font-weight: 600;
}
.pi-managed .container .pi-box .pi-btn {
  background: #465fe9;
  color: #ffffff;
  margin-left: 50px;
  margin-right: 50px;
  display: block;
  text-align: center;
  padding: 9px 35px;
}
.pi-managed .container .layer-woman {
  bottom: -52px;
  right: -134px;
}
/*******************************************
09. Tab Css Here 
*****************/
.pi-tab {
  position: relative;
  background: #ffffff url(assets/images/tab/bg.png) no-repeat left -12px top 50px;
  padding-bottom: 136px;
}
.pi-tab .container {
  max-width: 1200px;
}
.pi-tab .pi__shape_bg5 {
  width: 271px;
  height: 100%;
  position: absolute;
  right: -40px;
  top: 30%;
  z-index: 0;
}
.pi-tab .pi-sec-title {
  text-align: center;
}
.pi-tab .pi-sec-title i img {
  margin-left: -20px;
}
.pi-tab .pi-sec-title .pi-title {
  color: #1a152e;
  font-size: 44px;
  font-weight: 600;
  margin: -14px 0 20px;
}
.pi-tab .pi-sec-title p {
  font-size: 16px;
  color: #5e5c69;
  margin: -8px 0px 72px;
}
.pi-tab .pi-tab-gird {
  display: flex;
  position: relative;
  flex-wrap: wrap;
}
.pi-tab .pi-tab-gird img {
  max-width: 100%;
}
.pi-tab .pi-tab-gird .pi-col-1 {
  flex: 0 0 30%;
}
.pi-tab .pi-tab-gird .pi-col-2 {
  flex: 0 0 70%;
  padding-left: 56px;
  position: relative;
}
.pi-tab .pi-tab-gird .pi-col-2 img.pi-absolute {
  bottom: -10px;
  right: -48px;
  z-index: -1;
}
.pi-tab .pi-tab-gird .pi-tab-content {
  min-height: 526px;
  background: #fff;
  margin-right: 18px;
  box-shadow: 0px 40px 40px 0px rgba(10, 0, 45, 0.09);
  position: relative;
  z-index: 99;
  margin-bottom: 60px;
  border-radius: 10px;
}
.pi-tab .pi-tab-gird .pi-tab-content img {
  border-radius: 10px;
}
.pi-tab-gird .menu div {
  padding: 21px 39px;
  margin-bottom: 0px;
  color: #1a152e;
  font-size: 20px;
  box-shadow: none;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  font-weight: 600;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.pi-tab-gird .menu div:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  box-shadow: 0px 20px 40px 0px rgba(10, 0, 45, 0.09);
  border-left: 3px solid #744fff;
  border-radius: 10px;
  z-index: 1;
  opacity: 0;
  transition: transform 0.5s;
  transform: translateY(-20px);
}
.pi-tab-gird .menu div.active {
  color: #744fff;
}
.pi-tab-gird .menu div.active span {
  color: #744fff;
}
.pi-tab-gird .menu div.active:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  box-shadow: 0px 20px 40px 0px rgba(10, 0, 45, 0.09);
  border-left: 3px solid #744fff;
  border-radius: 10px;
  z-index: 1;
  transform: translateY(0px);
  opacity: 1;
}
.pi-tab-gird .menu div:hover {
  color: #744fff;
}
.pi-tab-gird .menu div span {
  display: block;
  color: #5e5c69;
  font-size: 16px;
  font-weight: 400;
  z-index: 3;
  position: relative;
}
.pi-tab-gird .menu div em {
  font-style: normal;
  position: relative;
  z-index: 3;
}
ul.pi-tab-content li {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
ul.pi-tab-content li.active {
  transition-delay: .3s;
  z-index: 2;
  opacity: 1;
  transform: translateY(0px);
  visibility: visible;
}
/*******************************************
10. clients Table Css Here 
*****************/
.pi-clients {
  background: #744fff url(assets/images/clients/bg.png) no-repeat right bottom;
  padding: 105px 0 120px;
}
.pi-clients .pi-sec-title {
  margin-left: 25px;
}
.pi-clients .pi-sec-title i img {
  margin-left: -26px;
}
.pi-clients .pi-sec-title .pi-title {
  color: #ffffff;
  font-size: 44px;
  font-weight: 600;
  margin: -14px 0 20px;
}
.pi-clients .pi-sec-title p {
  font-size: 16px;
  color: #ffffff;
  margin: -8px 0px 12px;
  opacity: .7;
}
.pi-clients .pi-clients-slider {
  margin: 0 -10px 0 0;
  padding: 0;
  list-style: none;
}
.pi-clients .pi-clients-slider li {
  background: #ffffff;
  padding: 50px 60px;
  margin: 56px 0 50px 30px;
  border-radius: 10px;
  box-shadow: 0px 30px 30px 0px rgba(0, 0, 0, 0.08);
}
.pi-clients .pi-clients-slider li .pi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 28px;
}
.pi-clients .pi-clients-slider li .pi-top span {
  color: #5e5c69;
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
}
.pi-clients .pi-clients-slider li .pi-top span em {
  font-style: normal;
  font-weight: 700;
  color: #1a152e;
  display: block;
  font-size: 24px;
  line-height: 28px;
}
.pi-clients .pi-clients-slider li .pi-top span.pi-ratings {
  padding-top: 28px;
}
.pi-clients .pi-clients-slider li .pi-top span.pi-ratings i {
  color: #fab013;
}
.pi-clients .pi-clients-slider li .pi-content {
  color: #5e5c69;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
}
.pi-clients .pi-clients-slider li .pi-bottom {
  display: flex;
  align-items: center;
  padding-top: 31px;
}
.pi-clients .pi-clients-slider li .pi-bottom .pi-author-name {
  color: #5e5c69;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  padding-left: 20px;
}
.pi-clients .pi-clients-slider li .pi-bottom .pi-author-name em {
  font-style: normal;
  font-weight: 600;
  color: #2c2c51;
  display: block;
  font-size: 18px;
  line-height: 28px;
}
.pi-clients .pi-clients-slider li .pi-bottom .pi-author {
  padding: 0px;
}
.pi-clients .pi-clients-slider .slick-dots {
  display: flex;
  justify-content: flex-start;
  margin-left: 30px;
}
.pi-clients .pi-clients-slider .slick-dots li {
  padding: 0;
  border: none;
  margin: 0;
  background: none;
}
.pi-clients .pi-clients-slider .slick-dots li button {
  outline: none;
  width: 12px;
  height: 12px;
  background: none;
  border: 2px solid #c8c6d0;
  margin: 0 10px 0 0;
  font-size: 0;
  border-radius: 50%;
  cursor: pointer;
  padding: 5px;
}
.pi-clients .pi-clients-slider .slick-dots li.slick-active button {
  border: 2px solid #ffffff;
  background: #ffffff;
}
.pi-clients .pi-clients-slider .slick-dots li:hover button {
  border: 2px solid #ffffff;
  background: #ffffff;
}
.pi-ux-design {
  background: #f5f5fa;
  padding-top: 120px;
}
.pi-ux-design .pi-sec-title {
  padding-left: 37px;
  max-width: 510px;
}
.pi-ux-design .pi-sec-title .pi-title {
  color: #1a152e;
  font-size: 40px;
  font-weight: 600;
  margin: -14px 0 20px;
}
.pi-ux-design .pi-sec-title p {
  font-size: 16px;
  color: #524e65;
  margin: -8px 0px 12px;
}
.pi-ux-design .container {
  position: relative;
}
.pi-ux-design .pi-ux-slider {
  margin-right: -10px;
  padding-top: 10px;
  z-index: 1;
}
.pi-ux-design .pi-ux-slider li.slick-slide {
  display: flex;
  flex-wrap: wrap;
  margin-left: 40px;
  margin-top: 40px;
  margin-bottom: 40px;
  background: #ffffff;
  box-shadow: 0px 20px 40px 0px rgba(10, 0, 45, 0.05);
  border-radius: 10px;
}
.pi-ux-design .pi-ux-slider li.slick-slide .pi-top {
  flex: 0 0 60%;
  padding: 60px 60px 40px 60px;
}
.pi-ux-design .pi-ux-slider li.slick-slide .pi-top ul li {
  margin-bottom: 50px;
}
.pi-ux-design .pi-ux-slider li.slick-slide .pi-top ul li h5 {
  margin: 0 0 16px;
  font-size: 30px;
  color: #1a152e;
  font-weight: 700;
}
.pi-ux-design .pi-ux-slider li.slick-slide .pi-top ul li p {
  margin: 0;
  color: #716f7d;
  font-size: 16px;
  line-height: 24px;
}
.pi-ux-design .pi-ux-slider li.slick-slide .pi-top ul li:last-child {
  margin-bottom: 30px;
  border-bottom: 2px solid #ededf4;
  padding-bottom: 34px;
}
.pi-ux-design .pi-ux-slider li.slick-slide .pi-top ul li:last-child h5 {
  margin: 0px;
  font-size: 26px;
}
.pi-ux-design .pi-ux-slider li.slick-slide .pi-top .pi-dsc {
  display: flex;
}
.pi-ux-design .pi-ux-slider li.slick-slide .pi-top .pi-dsc .pi-icon {
  padding-right: 30px;
}
.pi-ux-design .pi-ux-slider li.slick-slide .pi-top .pi-dsc .pi-task p {
  margin: 0;
}
.pi-ux-design .pi-ux-slider li.slick-slide .pi-top .pi-dsc .pi-task strong {
  font-size: 20px;
  color: #1fc887;
  font-weight: 900;
  display: block;
  margin-top: -7px;
}
.pi-ux-design .pi-ux-slider li.slick-slide .pi-image {
  flex: 0 0 40%;
}
.pi-ux-design .pi-ux-slider li.slick-slide .pi-image img {
  border-radius: 0 10px 10px 0;
}
.pi-ux-design .pi-ux-slider .slick-prev {
  background: #f5f5fa;
  width: 50px;
  height: 50px;
  line-height: 50px;
  right: 27%;
  left: auto;
  top: -70px;
  border-radius: 100%;
  z-index: 1;
  border: 2px solid #e5e6ec;
  outline: none;
  position: absolute;
  font-size: 0;
  transform: rotate(180deg);
  cursor: pointer;
}
.pi-ux-design .pi-ux-slider .slick-prev:before {
  content: "\f100";
  font-family: flaticon;
  font-size: 17px;
  font-weight: 600;
  top: -3px;
  position: relative;
}
.pi-ux-design .pi-ux-slider .slick-prev:hover {
  background: #465fe9;
  border: 2px solid #465fe9;
}
.pi-ux-design .pi-ux-slider .slick-prev:hover:before {
  color: #ffffff;
}
.pi-ux-design .pi-ux-slider .slick-next {
  background: #f5f5fa;
  width: 50px;
  height: 50px;
  line-height: 50px;
  right: 23.5%;
  left: auto;
  top: -70px;
  border-radius: 100%;
  z-index: 1;
  border: 2px solid #e5e6ec;
  outline: none;
  font-size: 0;
  position: absolute;
  bottom: auto;
  cursor: pointer;
}
.pi-ux-design .pi-ux-slider .slick-next:before {
  content: "\f100";
  font-family: flaticon;
  font-size: 17px;
  font-weight: 600;
  position: relative;
  top: -2px;
}
.pi-ux-design .pi-ux-slider .slick-next:hover {
  background: #465fe9;
  border: 2px solid #465fe9;
}
.pi-ux-design .pi-ux-slider .slick-next:hover:before {
  color: #ffffff;
}
/*******************************************
11. Price Table Css Here 
*****************/
.pi-pricing {
  padding-top: 105px;
  position: relative;
}
.pi-pricing .pricing-switcher,
.pi-pricing .pricing-list {
  max-width: 1200px;
  padding: 0 15px;
  margin: 0 auto;
}
.pi-pricing .pricing-switcher .pi-sec-title i img,
.pi-pricing .pricing-list .pi-sec-title i img {
  margin-left: -20px;
}
.pi-pricing .pricing-switcher .pi-sec-title .pi-title,
.pi-pricing .pricing-list .pi-sec-title .pi-title {
  color: #1a152e;
  font-size: 44px;
  font-weight: 600;
  margin: -14px 0 20px;
}
.pi-pricing .pricing-switcher .pi-sec-title p,
.pi-pricing .pricing-list .pi-sec-title p {
  font-size: 16px;
  color: #5e5c69;
  margin: -8px 0px 62px;
}
.pi-pricing .pi__shape_bg3 {
  position: absolute;
  top: 470px;
  width: 100%;
  z-index: -1;
  height: 100%;
  left: 0;
  right: -250px;
  max-width: 750px;
  margin: 0 auto;
}
.pi-pricing .pi__shape_bg4 {
  position: absolute;
  top: 480px;
  width: 100%;
  z-index: -1;
  height: 100%;
  left: 0;
  right: -250px;
  max-width: 750px;
  margin: 0 auto;
}
.pi-pricing .pi-price-inner {
  position: relative;
  padding-top: 50px;
  max-width: 1300px;
  margin: 0 auto;
}
.pi-pricing .pi-price-inner .price-bg {
  left: 170px;
  top: -25px;
  z-index: 0;
}
.pi-pricing .pricing-list {
  background: #ffffff;
  padding: 50px 0 60px;
  border-radius: 20px;
  box-shadow: 0px 20px 40px 0px rgba(10, 0, 45, 0.09);
  position: relative;
}
.pi-pricing .pricing-body ul {
  padding-top: 18px;
  padding-bottom: 35px;
}
.pi-pricing .pricing-body ul li {
  background: url(assets/images/pricing/icon-g.png) no-repeat left top 2px;
  padding-left: 36px;
  margin: 14px 0;
  color: #5e5c69;
  font-size: 15px;
}
.pi-pricing .pricing-body ul li.dark {
  background: url(assets/images/pricing/icon.png) no-repeat left top 2px;
}
.pi-pricing .pi-price-btn a {
  font-size: 15px;
  color: #1a152e;
  font-weight: 500;
  display: inline-block;
  border-radius: 10px;
  border: 2px solid #e8e7ea;
  padding: 9px 40px;
  transition: all 0.5s ease 0s;
}
.pi-pricing .pi-price-btn a:hover {
  background: #744fff;
  border: 2px solid #744fff;
  color: #ffffff;
}
.pi-pricing .exclusive {
  border-left: 1px solid #eeedf1;
  border-right: 1px solid #eeedf1;
}
.pi-pricing .exclusive .select {
  background-color: #744fff;
  color: #ffffff;
  border: 2px solid #744fff;
}
.pi-pricing .exclusive .select:hover {
  border-color: #744fff;
  color: #744fff;
  background: transparent;
}
.pi-pricing .pricing-wrapper .pi-image {
  margin: 0 0 36px;
}
.pi-pricing .pricing-wrapper h4 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #1a152e;
}
.pi-pricing .pricing-wrapper .price .value {
  font-size: 40px;
  font-weight: 600;
  color: #1a152e;
}
.pi-pricing .pricing-wrapper .price .duration {
  font-size: 16px;
  color: #5e5c69;
  font-weight: 500;
}
.pi-pricing .pricing-wrapper .price p {
  margin: 6px 0 0;
  color: #5e5c69;
  font-size: 15px;
  padding-right: 30px;
}
.pi-pricing .pricing-list > li {
  position: relative;
  padding: 0 60px;
}
.pi-pricings {
  padding-top: 283px;
  margin-top: -160px;
  background: #fff;
}
.pi-pricings .pricing-switcher,
.pi-pricings .pricing-list {
  max-width: 1200px;
  padding: 0 15px;
  margin: 0 auto;
}
.pi-pricings .pricing-switcher .pi-sec-title i img,
.pi-pricings .pricing-list .pi-sec-title i img {
  margin-left: -20px;
}
.pi-pricings .pricing-switcher .pi-sec-title .pi-title,
.pi-pricings .pricing-list .pi-sec-title .pi-title {
  color: #1a152e;
  font-size: 44px;
  font-weight: 600;
  margin: -14px 0 20px;
}
.pi-pricings .pricing-switcher .pi-sec-title p,
.pi-pricings .pricing-list .pi-sec-title p {
  font-size: 16px;
  color: #5e5c69;
  margin: -8px auto 62px;
  max-width: 500px;
}
.pi-pricings .pricing-switcher label {
  margin: 0;
}
.pi-pricings .pricing-switcher .fieldset {
  display: inline-block;
  position: relative;
  width: 480px;
  height: auto;
  border-radius: 10px;
  background: none;
  margin: 0 0 50px;
}
.pi-pricings .pricing-switcher .fieldset em {
  position: relative;
  font-style: normal;
}
.pi-pricings .pricing-switcher .fieldset em .pi-anu {
  position: relative;
  right: 12px;
}
.pi-pricings .pricing-switcher .fieldset em label {
  font-size: 14px;
  font-weight: 500;
  color: #524e65;
  padding: 0px 55px;
}
.pi-pricings .pricing-switcher .fieldset em label.pi-actives {
  color: #465fe9;
}
.pi-pricings .pricing-switcher .fieldset em label.pi-active {
  color: #465fe9;
}
.pi-pricings .pricing-switcher .fieldset em:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background: #f3f3f9;
  width: 60px;
  height: 26px;
  border-radius: 30px;
  margin: 0 auto;
  top: 1px;
}
.pi-pricings .pricing-switcher .fieldset em .switch {
  height: 16px;
  width: 16px;
  background: #465fe9;
  border-radius: 100%;
  left: 162px;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.8);
}
.pi-pricings .pricing-switcher input[type="radio"]:checked + label + .switch,
.pi-pricings .pricing-switcher input[type="radio"]:checked + label:nth-of-type(n) + .switch {
  -webkit-transform: translateX(30px);
  -moz-transform: translateX(30px);
  -ms-transform: translateX(30px);
  -o-transform: translateX(30px);
  transform: translateX(30px);
}
.pi-pricings .exclusive {
  border: none;
}
.pi-pricings .pricing-list > li {
  position: relative;
  padding: 0px;
}
.pi-pricings .pricing-list > li .pi-price-two {
  padding: 50px 50px;
  box-shadow: 0px 20px 40px 0px rgba(10, 0, 45, 0.09);
  margin: 0 15px;
  border-radius: 10px;
  background: #ffffff;
}
.pi-pricings .pricing-list > li.exclusive .pi-price-two {
  border-top: 3px solid #465fe9;
}
.pi-pricings .pricing-list {
  box-shadow: none;
}
.pi-pricings .pricing-body ul {
  padding-top: 18px;
  padding-bottom: 0px;
}
.pi-pricings .pricing-body ul li {
  background: url(assets/images/pricing/i.png) no-repeat left top 7px;
  padding-left: 27px;
  margin: 16px 0 5px;
  color: #524e65;
  font-weight: 500;
  font-size: 14px;
}
.pi-pricings .pricing-body ul li.dark {
  background: url(assets/images/pricing/x.png) no-repeat left top 8px;
}
.pi-pricings .pi-price-btn {
  padding: 24px 0 14px;
}
.pi-pricings .pi-price-btn a {
  font-size: 15px;
  color: #465fe9;
  font-weight: 500;
  display: inline-block;
  border-radius: 10px;
  border: 2px solid #465fe9;
  padding: 7px 65px;
  transition: all 0.5s ease 0s;
}
.pi-pricings .pi-price-btn a:hover {
  background: #465fe9;
  border: 2px solid #465fe9;
  color: #ffffff;
}
.pi-pricings .exclusive .select {
  background-color: #465fe9;
  color: #ffffff;
  border: 2px solid #465fe9;
}
.pi-pricings .exclusive .select:hover {
  border-color: #465fe9;
  color: #465fe9;
  background: transparent;
}
.pi-pricings .pricing-wrapper .pi-image {
  margin: 0 0 36px;
}
.pi-pricings .pricing-wrapper .price h4 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #1a152e;
}
.pi-pricings .pricing-wrapper .price .value {
  font-size: 49px;
  font-weight: 600;
  color: #1a152e;
  display: block;
  padding-bottom: 16px;
}
.pi-pricings .pricing-wrapper .price .value em {
  font-style: normal;
  font-size: 22px;
  font-weight: 500;
  position: relative;
  top: -20px;
}
.pi-pricings .pricing-wrapper .price p {
  margin: 6px 0 0;
  color: #716f7d;
  font-size: 14px;
  padding-right: 30px;
  font-weight: 500;
}
.pricing-switcher {
  text-align: center;
}
.pricing-switcher .fieldset {
  display: inline-block;
  position: relative;
  width: 220px;
  height: 50px;
  border-radius: 10px;
  background: #f5f6f9;
  margin: 0;
}
.pricing-switcher input[type="radio"] {
  position: absolute;
  opacity: 0;
  display: none;
}
.pricing-switcher label {
  position: relative;
  z-index: 1;
  display: inline-block;
  cursor: pointer;
  font-size: 14px;
  color: #5e5c69;
  font-weight: 500;
  margin: 13px 25px;
}
.pricing-switcher label:hover {
  color: #744fff;
}
.pricing-switcher label.pi-active,
.pricing-switcher label.pi-actives {
  color: #744fff;
}
.pricing-switcher .switch {
  position: absolute;
  top: 5px;
  left: 5px;
  height: 40px;
  width: 100px;
  background-color: #fff;
  border-radius: 10px;
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.06);
}
.pricing-switcher input[type="radio"]:checked + label + .switch,
.pricing-switcher input[type="radio"]:checked + label:nth-of-type(n) + .switch {
  -webkit-transform: translateX(110px);
  -moz-transform: translateX(110px);
  -ms-transform: translateX(110px);
  -o-transform: translateX(110px);
  transform: translateX(110px);
}
.no-js .pricing-switcher {
  display: none;
}
.pricing-list {
  margin: 2em 0 0;
}
@media only screen and (min-width: 768px) {
  .pricing-list {
    margin: 3em 0 0;
  }
  .pricing-list:after {
    content: "";
    display: table;
    clear: both;
  }
  .pricing-list > li {
    width: 33.3333333333%;
    float: left;
  }
  .has-margins .pricing-list > li {
    width: 32.3333333333%;
    float: left;
  }
  .has-margins .pricing-list > li:last-of-type {
    margin-right: 0;
  }
}
.pricing-wrapper {
  position: relative;
}
.touch .pricing-wrapper {
  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  perspective: 2000px;
}
.pricing-wrapper.is-switched .is-visible {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-animation: rotate 0.5s;
  -moz-animation: rotate 0.5s;
  animation: rotate 0.5s;
}
.pricing-wrapper.is-switched .is-hidden {
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -ms-transform: rotateY(0);
  -o-transform: rotateY(0);
  transform: rotateY(0);
  -webkit-animation: rotate-inverse 0.5s;
  -moz-animation: rotate-inverse 0.5s;
  animation: rotate-inverse 0.5s;
  opacity: 0;
}
.pricing-wrapper.is-switched .is-selected {
  opacity: 1;
}
.pricing-wrapper.is-switched.reverse-animation .is-visible {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-animation: rotate-back 0.5s;
  -moz-animation: rotate-back 0.5s;
  animation: rotate-back 0.5s;
}
.pricing-wrapper.is-switched.reverse-animation .is-hidden {
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -ms-transform: rotateY(0);
  -o-transform: rotateY(0);
  transform: rotateY(0);
  -webkit-animation: rotate-inverse-back 0.5s;
  -moz-animation: rotate-inverse-back 0.5s;
  animation: rotate-inverse-back 0.5s;
  opacity: 0;
}
.pricing-wrapper.is-switched.reverse-animation .is-selected {
  opacity: 1;
}
.pricing-wrapper > li {
  background-color: #ffffff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  outline: 0px solid transparent;
}
.pricing-wrapper .is-visible {
  position: relative;
  z-index: 5;
}
.pricing-wrapper .is-hidden {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.pricing-wrapper .is-selected {
  z-index: 3 !important;
}
.no-js .pricing-wrapper .is-hidden {
  position: relative;
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -ms-transform: rotateY(0);
  -o-transform: rotateY(0);
  transform: rotateY(0);
  margin-top: 1em;
}
.duration::before {
  content: '/';
  position: relative;
  left: -3px;
}
.pricing-body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.is-switched .pricing-body {
  overflow: hidden;
}
.pricing-body {
  overflow-x: visible;
}
.pricing-features {
  width: 600px;
}
.pricing-features:after {
  content: "";
  display: table;
  clear: both;
}
.pricing-features li {
  display: block;
}
.pricing-features em {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}
.pricing-features {
  width: auto;
}
.pricing-features em {
  display: inline-block;
  margin-bottom: 0;
}
.has-margins .exclusive .pricing-features li {
  margin: 0;
}
.has-margins .select {
  display: block;
  padding: 1.7em 0;
  border-radius: 0 0 4px 4px;
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: perspective(2000px) rotateY(0);
  }
  70% {
    -webkit-transform: perspective(2000px) rotateY(200deg);
  }
  100% {
    -webkit-transform: perspective(2000px) rotateY(180deg);
  }
}
@-moz-keyframes rotate {
  0% {
    -moz-transform: perspective(2000px) rotateY(0);
  }
  70% {
    -moz-transform: perspective(2000px) rotateY(200deg);
  }
  100% {
    -moz-transform: perspective(2000px) rotateY(180deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: perspective(2000px) rotateY(0);
    -moz-transform: perspective(2000px) rotateY(0);
    -ms-transform: perspective(2000px) rotateY(0);
    -o-transform: perspective(2000px) rotateY(0);
    transform: perspective(2000px) rotateY(0);
  }
  70% {
    -webkit-transform: perspective(2000px) rotateY(200deg);
    -moz-transform: perspective(2000px) rotateY(200deg);
    -ms-transform: perspective(2000px) rotateY(200deg);
    -o-transform: perspective(2000px) rotateY(200deg);
    transform: perspective(2000px) rotateY(200deg);
  }
  100% {
    -webkit-transform: perspective(2000px) rotateY(180deg);
    -moz-transform: perspective(2000px) rotateY(180deg);
    -ms-transform: perspective(2000px) rotateY(180deg);
    -o-transform: perspective(2000px) rotateY(180deg);
    transform: perspective(2000px) rotateY(180deg);
  }
}
@-webkit-keyframes rotate-inverse {
  0% {
    -webkit-transform: perspective(2000px) rotateY(-180deg);
  }
  70% {
    -webkit-transform: perspective(2000px) rotateY(20deg);
  }
  100% {
    -webkit-transform: perspective(2000px) rotateY(0);
  }
}
@-moz-keyframes rotate-inverse {
  0% {
    -moz-transform: perspective(2000px) rotateY(-180deg);
  }
  70% {
    -moz-transform: perspective(2000px) rotateY(20deg);
  }
  100% {
    -moz-transform: perspective(2000px) rotateY(0);
  }
}
@keyframes rotate-inverse {
  0% {
    -webkit-transform: perspective(2000px) rotateY(-180deg);
    -moz-transform: perspective(2000px) rotateY(-180deg);
    -ms-transform: perspective(2000px) rotateY(-180deg);
    -o-transform: perspective(2000px) rotateY(-180deg);
    transform: perspective(2000px) rotateY(-180deg);
  }
  70% {
    -webkit-transform: perspective(2000px) rotateY(20deg);
    -moz-transform: perspective(2000px) rotateY(20deg);
    -ms-transform: perspective(2000px) rotateY(20deg);
    -o-transform: perspective(2000px) rotateY(20deg);
    transform: perspective(2000px) rotateY(20deg);
  }
  100% {
    -webkit-transform: perspective(2000px) rotateY(0);
    -moz-transform: perspective(2000px) rotateY(0);
    -ms-transform: perspective(2000px) rotateY(0);
    -o-transform: perspective(2000px) rotateY(0);
    transform: perspective(2000px) rotateY(0);
  }
}
@-webkit-keyframes rotate-back {
  0% {
    -webkit-transform: perspective(2000px) rotateY(0);
  }
  70% {
    -webkit-transform: perspective(2000px) rotateY(-200deg);
  }
  100% {
    -webkit-transform: perspective(2000px) rotateY(-180deg);
  }
}
@-moz-keyframes rotate-back {
  0% {
    -moz-transform: perspective(2000px) rotateY(0);
  }
  70% {
    -moz-transform: perspective(2000px) rotateY(-200deg);
  }
  100% {
    -moz-transform: perspective(2000px) rotateY(-180deg);
  }
}
@keyframes rotate-back {
  0% {
    -webkit-transform: perspective(2000px) rotateY(0);
    -moz-transform: perspective(2000px) rotateY(0);
    -ms-transform: perspective(2000px) rotateY(0);
    -o-transform: perspective(2000px) rotateY(0);
    transform: perspective(2000px) rotateY(0);
  }
  70% {
    -webkit-transform: perspective(2000px) rotateY(-200deg);
    -moz-transform: perspective(2000px) rotateY(-200deg);
    -ms-transform: perspective(2000px) rotateY(-200deg);
    -o-transform: perspective(2000px) rotateY(-200deg);
    transform: perspective(2000px) rotateY(-200deg);
  }
  100% {
    -webkit-transform: perspective(2000px) rotateY(-180deg);
    -moz-transform: perspective(2000px) rotateY(-180deg);
    -ms-transform: perspective(2000px) rotateY(-180deg);
    -o-transform: perspective(2000px) rotateY(-180deg);
    transform: perspective(2000px) rotateY(-180deg);
  }
}
@-webkit-keyframes rotate-inverse-back {
  0% {
    -webkit-transform: perspective(2000px) rotateY(180deg);
  }
  70% {
    -webkit-transform: perspective(2000px) rotateY(-20deg);
  }
  100% {
    -webkit-transform: perspective(2000px) rotateY(0);
  }
}
@-moz-keyframes rotate-inverse-back {
  0% {
    -moz-transform: perspective(2000px) rotateY(180deg);
  }
  70% {
    -moz-transform: perspective(2000px) rotateY(-20deg);
  }
  100% {
    -moz-transform: perspective(2000px) rotateY(0);
  }
}
@keyframes rotate-inverse-back {
  0% {
    -webkit-transform: perspective(2000px) rotateY(180deg);
    -moz-transform: perspective(2000px) rotateY(180deg);
    -ms-transform: perspective(2000px) rotateY(180deg);
    -o-transform: perspective(2000px) rotateY(180deg);
    transform: perspective(2000px) rotateY(180deg);
  }
  70% {
    -webkit-transform: perspective(2000px) rotateY(-20deg);
    -moz-transform: perspective(2000px) rotateY(-20deg);
    -ms-transform: perspective(2000px) rotateY(-20deg);
    -o-transform: perspective(2000px) rotateY(-20deg);
    transform: perspective(2000px) rotateY(-20deg);
  }
  100% {
    -webkit-transform: perspective(2000px) rotateY(0);
    -moz-transform: perspective(2000px) rotateY(0);
    -ms-transform: perspective(2000px) rotateY(0);
    -o-transform: perspective(2000px) rotateY(0);
    transform: perspective(2000px) rotateY(0);
  }
}
/*******************************************
12. Awards Css Here 
*****************/
.pi-awards {
  padding: 186px 0 0;
}
.pi-awards .container {
  max-width: 1200px;
}
.pi-awards .container .pi-container .pi-sec-title i img {
  margin-left: -20px;
}
.pi-awards .container .pi-container .pi-sec-title .pi-title {
  color: #1a152e;
  font-size: 44px;
  font-weight: 600;
  margin: -14px 0 20px;
}
.pi-awards .container .pi-container .pi-sec-title p {
  font-size: 16px;
  color: #5e5c69;
}
.pi-awards .container .pi-container ul {
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding-left: 70px;
  padding-top: 50px;
}
.pi-awards .container .pi-container ul li {
  flex: 0 0 33.33%;
  margin: 34px 0;
  padding: 0 34px;
}
.pi-awards .container .pi-container ul li a img {
  transition: all 0.5s ease 0s;
}
.pi-awards .container .pi-container ul li a:hover img {
  transform: scale(1.03);
}
.pi-awards.pi-awards-about {
  padding-top: 140px;
}
.pi-awards.pi-awards-about .pi-container ul {
  padding-top: 0;
  margin-top: -42px;
}
.pi-awards.pi-awards-two {
  padding-top: 105px;
  padding-bottom: 115px;
}
.pi-awards.pi-awards-two .pi-container ul {
  padding-top: 0;
  margin-top: -50px;
}
.pi-awards.pi-awards-two .pi-container ul li {
  margin-top: 43px;
}
.pi-awards.pi-awards-three {
  margin-top: 10px;
}
.pi-awards.pi-awards-three .pi-container ul li {
  margin-top: 43px;
  margin-bottom: 10px;
}
.pi-awards.pi-awards-three .pi-container .pi-sec-title .pi-title {
  color: #1a152e;
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 20px;
  line-height: 1.4;
}
.pi-awards.pi-awards-three .pi-container .pi-sec-title a.pi-join-btn {
  font-size: 15px;
  color: #465fe9;
  font-weight: 500;
  position: relative;
  padding-right: 28px;
  transition: all 0.5s ease 0s;
}
.pi-awards.pi-awards-three .pi-container .pi-sec-title a.pi-join-btn:before {
  content: "\f100";
  font-family: Flaticon;
  position: absolute;
  font-size: 15px;
  top: 0;
  right: 0;
  color: #465fe9;
  font-weight: 600;
  transition: all 0.5s ease 0s;
}
.pi-awards.pi-awards-three .pi-container .pi-sec-title a.pi-join-btn:hover {
  text-decoration: underline !important;
}
.pi-awards.pi-awards-three .pi-container .pi-sec-title a.pi-join-btn:hover:before {
  right: -6px;
}
/*******************************************
13. Join Css Here 
*****************/
.pi-join {
  padding: 125px 0 150px;
}
.pi-join .container {
  max-width: 1200px;
}
.pi-join .container .pi-container .pi-inner-col {
  background: #fff4dd;
  border-radius: 20px;
  padding: 100px 150px 100px 143px;
}
.pi-join .container .pi-container .pi-inner-col h3 {
  color: #0f1432;
  font-size: 22px;
  font-weight: 600;
  margin: 36px 0 12px;
}
.pi-join .container .pi-container .pi-inner-col p {
  color: #5e5c69;
  font-size: 16px;
  margin: 0;
}
.pi-join .container .pi-container .pi-inner-col a {
  color: #5e5c69;
  font-size: 15px;
  font-weight: 500;
  margin-top: 35px;
  display: inline-block;
  transition: all 0.5s ease 0s;
}
.pi-join .container .pi-container .pi-inner-col a:hover {
  color: #744fff;
}
.pi-join .container .pi-container .pi-inner-col a:hover i:before {
  left: 0px;
}
.pi-join .container .pi-container .pi-inner-col a i {
  margin-left: 6px;
}
.pi-join .container .pi-container .pi-inner-col a i:before {
  margin: 0 0 0 8px;
  font-weight: 600;
  font-size: 15px;
  position: relative;
  top: 1px;
  left: -6px;
  transition: all 0.5s ease 0s;
}
.pi-join .container .pi-container .pi-inner-col.pi-box-2 {
  background: #edf1ff;
}
.pi-join .container .pi-container .pi-inner-col.pi-box-2 a {
  color: #5e5c69;
}
.pi-join .container .pi-container .pi-inner-col.pi-box-2 a i:before {
  color: #5e5c69;
}
.pi-join .container .pi-container .pi-inner-col.pi-box-2 a:hover {
  color: #744fff;
}
.pi-join .container .pi-container .pi-inner-col.pi-box-2 a:hover i:before {
  color: #744fff;
}
.pi-join.pi-join-about {
  padding-bottom: 140px;
}
/*******************************************
14. Design Css Here 
*****************/
.pi-design {
  background: #744fff url(assets/images/design/bg1.jpg) no-repeat center top;
  background-size: 100%;
  padding: 116px 0 105px;
}
.pi-design .container .pi-container {
  text-align: center;
  position: relative;
}
.pi-design .container .pi-container .layer21 {
  left: -72px;
  bottom: -26px;
}
.pi-design .container .pi-container .layer22 {
  right: -115px;
  bottom: -49px;
}
.pi-design .container .pi-container h2 {
  font-size: 50px;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  margin: 0 0 35px;
}
.pi-design .container .pi-container input[type=text] {
  background: none;
  border: 2px solid #ffffff;
  border-radius: 10px;
  outline: none;
  padding: 10px 20px;
  color: #ffffff;
  width: 33.33%;
  height: 60px;
}
.pi-design .container .pi-container input[type=text]::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */

  color: #ffffff;
  opacity: .5;
  font-size: 16px;
}
.pi-design .container .pi-container input[type=text]::-moz-placeholder {
  /* Firefox 19+ */

  color: #ffffff;
  opacity: .5;
  font-size: 16px;
}
.pi-design .container .pi-container input[type=text]:-ms-input-placeholder {
  /* IE 10+ */

  color: #ffffff;
  opacity: .5;
  font-size: 16px;
}
.pi-design .container .pi-container input[type=text]:-moz-placeholder {
  /* Firefox 18- */

  color: #ffffff;
  opacity: .5;
  font-size: 16px;
}
.pi-design .container .pi-container input[type=submit] {
  background: #ffffff;
  border: none;
  outline: none;
  color: #744fff;
  font-size: 15px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.5s ease 0s;
  padding: 17px 30px;
  margin-left: 14px;
}
.pi-design .container .pi-container input[type=submit]:hover {
  background: #000000;
  color: #ffffff;
  border: none;
}
.pi-design .container .pi-container .pi-check-box {
  display: flex;
  max-width: 560px;
  margin: 16px auto 0;
}
.pi-design .container .pi-container .pi-check-box label {
  color: #fff;
  font-size: 15px;
  opacity: .8;
}
.pi-design .container .pi-container .pi-check-box input[type="checkbox"] {
  display: none;
}
.pi-design .container .pi-container .pi-check-box input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 22px;
  margin-bottom: 20px;
  color: #fff;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.pi-design .container .pi-container .pi-check-box input[type="checkbox"] + label:last-child {
  margin-bottom: 0;
  margin-left: 30px;
}
.pi-design .container .pi-container .pi-check-box input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid #fff;
  position: absolute;
  left: 0;
  top: 5px;
  opacity: .6;
  -webkit-transition: all 0.12s, border-color 0.08s;
  transition: all 0.12s, border-color 0.08s;
}
.pi-design .container .pi-container .pi-check-box input[type="checkbox"]:checked + label:before {
  width: 7px;
  top: 2px;
  left: 0px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*******************************************
15. Isotop Css Here 
*****************/
.pi-setup {
  padding-top: 110px;
  padding-bottom: 20px;
}
.pi-setup .container {
  max-width: 1200px;
}
.pi-setup .pi-inner-col {
  border: 2px solid #ebecf2;
  min-height: 400px;
  border-radius: 10px;
  text-align: center;
  padding: 28px 35px 28px 35px;
  background: #ffffff;
}
.pi-setup .pi-inner-col .pi-icon {
  display: block;
  min-height: 170px;
}
.pi-setup .pi-inner-col .pi-icon img {
  transition: all 0.5s ease 0s;
  transform: translateY(0px);
}
.pi-setup .pi-inner-col .pi-common2 img,
.pi-setup .pi-inner-col .pi-common3 img {
  margin-top: 20px;
}
.pi-setup .pi-inner-col h3 {
  margin: 35px 0 25px;
  font-size: 20px;
  color: #1a152e;
  font-weight: 500;
}
.pi-setup .pi-inner-col .pi-arrow-btn {
  display: inline-block;
}
.pi-setup .pi-inner-col .pi-arrow-btn:before {
  margin: 0 auto 15px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #f2f3f8;
  display: block;
  text-align: center;
  border-radius: 100%;
  color: #1a152e;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.5s ease 0s;
}
.pi-setup .pi-inner-col .pi-arrow-btn:hover:before {
  background: #465fe9;
  color: #ffffff;
}
.pi-setup .pi-inner-col:hover {
  box-shadow: 0px 40px 40px 0px rgba(10, 0, 45, 0.09);
  border: none;
  border-top: 2px solid #465fe9;
}
.pi-setup .pi-inner-col:hover .pi-icon img {
  transform: translateY(-5px);
}
.pi-setup .pi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 70px;
}
.pi-setup .pi-top .pi-sec-title .pi-title {
  color: #1a152e;
  font-size: 40px;
  font-weight: 700;
  margin: 0px;
}
.pi-setup .pi-top .pi-sec-title p {
  font-size: 16px;
  color: #5e5c69;
  margin: 0;
  max-width: 470px;
}
.pi-setup .pi-top .pi-filter {
  margin-top: 100px;
}
.pi-setup .pi-top .pi-filter button {
  outline: none;
  transition: all 0.5s ease 0s;
  font-size: 14px;
  font-weight: 500;
  color: #5e5c69;
  border-radius: 10px;
  border: 2px solid #e8e7ea;
  background: #ffffff;
  padding: 4px 18px;
  margin: 0 3px;
  cursor: pointer;
  letter-spacing: -0.8px;
}
.pi-setup .pi-top .pi-filter button:hover {
  background: #465fe9;
  color: #ffffff;
  border-color: #465fe9;
}
.pi-setup .pi-top .pi-filter button.active {
  background: #465fe9;
  color: #ffffff;
  border-color: #465fe9;
}
/*******************************************
16. Blog Css Here 
*****************/
.pi-blog {
  padding-top: 120px;
}
.pi-blog .container .pi-sec-title {
  text-align: center;
}
.pi-blog .container .pi-sec-title .pi-title {
  color: #1a152e;
  font-size: 44px;
  font-weight: 600;
  margin: 0 0 20px;
}
.pi-blog .container .pi-sec-title p {
  font-size: 16px;
  color: #5e5c69;
  margin: -8px 0px 62px;
}
.pi-blog .container .pi-blog-slider {
  margin-top: -40px;
}
.pi-blog .container .pi-blog-slider li .pi-inner {
  border-radius: 10px;
  box-shadow: 0px 20px 30px 0px rgba(10, 0, 45, 0.05);
  margin: 40px 15px;
}
.pi-blog .container .pi-blog-slider li .pi-inner .pi-blog-image img {
  border-radius: 10px 10px 0 0;
}
.pi-blog .container .pi-blog-slider li .pi-inner .pi-blog-content {
  padding: 35px 40px 30px;
}
.pi-blog .container .pi-blog-slider li .pi-inner .pi-blog-content .pi-category {
  font-size: 14px;
  color: #465fe9;
  display: inline-block;
  background: #eceffd;
  border-radius: 4px;
  padding: 3px 17px;
  font-weight: 500;
  transition: all 0.5s ease 0s;
  cursor: pointer;
}
.pi-blog .container .pi-blog-slider li .pi-inner .pi-blog-content .pi-category:hover {
  background: #465fe9;
  color: #ffffff;
}
.pi-blog .container .pi-blog-slider li .pi-inner .pi-blog-content h3 {
  font-weight: 600;
  color: #1a152e;
  font-size: 20px;
  margin: 14px 0 22px;
  transition: all 0.5s ease 0s;
}
.pi-blog .container .pi-blog-slider li .pi-inner .pi-blog-content h3:hover {
  color: #465fe9;
}
.pi-blog .container .pi-blog-slider li .pi-inner .pi-blog-content em {
  font-style: normal;
  font-size: 15px;
  color: #5e5c69;
}
.pi-blog .container .pi-blog-slider li .pi-inner .pi-blog-content em i {
  margin: 0 4px 0 0;
  font-size: 16px;
  color: #465fe9;
  position: relative;
  top: 1px;
}
.pi-blog-grid {
  padding-top: 120px;
  padding-bottom: 70px;
}
.pi-blog-grid .container {
  max-width: 1500px;
}
.pi-blog-grid .container .pi-blogs li {
  margin-bottom: 30px;
  transition: all 0.5s ease 0s;
}
.pi-blog-grid .container .pi-blogs li .pi-inner {
  border-radius: 10px;
  box-shadow: 0px 20px 30px 0px rgba(10, 0, 45, 0.05);
}
.pi-blog-grid .container .pi-blogs li .pi-inner .pi-blog-image {
  position: relative;
}
.pi-blog-grid .container .pi-blogs li .pi-inner .pi-blog-image img {
  border-radius: 10px 10px 0 0;
}
.pi-blog-grid .container .pi-blogs li .pi-inner .pi-blog-content {
  padding: 35px 40px 30px;
}
.pi-blog-grid .container .pi-blogs li .pi-inner .pi-blog-content .pi-category {
  font-size: 14px;
  color: #465fe9;
  display: inline-block;
  background: #eceffd;
  border-radius: 4px;
  padding: 3px 17px;
  font-weight: 500;
  transition: all 0.5s ease 0s;
  cursor: pointer;
}
.pi-blog-grid .container .pi-blogs li .pi-inner .pi-blog-content .pi-category:hover {
  background: #465fe9;
  color: #ffffff;
}
.pi-blog-grid .container .pi-blogs li .pi-inner .pi-blog-content h3 {
  font-weight: 600;
  color: #1a152e;
  font-size: 20px;
  margin: 14px 0 22px;
  transition: all 0.5s ease 0s;
  line-height: 28px;
}
.pi-blog-grid .container .pi-blogs li .pi-inner .pi-blog-content h3:hover {
  color: #465fe9;
}
.pi-blog-grid .container .pi-blogs li .pi-inner .pi-blog-content p {
  font-size: 16px;
  line-height: 26px;
  color: #5e5c69;
  min-height: 204px;
}
.pi-blog-grid .container .pi-blogs li .pi-inner .pi-blog-content em {
  font-style: normal;
  font-size: 15px;
  color: #5e5c69;
}
.pi-blog-grid .container .pi-blogs li .pi-inner .pi-blog-content em i {
  margin: 0 4px 0 0;
  font-size: 16px;
  color: #465fe9;
  position: relative;
  top: 1px;
}
.pi-blog-grid .container .pi-blogs li:hover {
  transform: translateY(-3px);
}
.pi-blog-grid .pi-ripple {
  background-color: #ffffff;
  border-radius: 50%;
  animation: pi-ripples 0.7s linear infinite;
  position: absolute;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.pi-blog-grid .pi-ripple i {
  color: #f43891;
  position: relative;
  top: 2px;
  left: 2px;
}
@keyframes pi-ripples {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 16px rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 24px rgba(255, 255, 255, 0.1);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 45px rgba(255, 255, 255, 0);
  }
}
.pi-blog-grid #pi-load {
  font-size: 16px;
  color: #465fe9;
  font-weight: 500;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  margin: 0 auto;
  border: 2px solid #dfdde8;
  display: inline-block;
  border-radius: 50%;
  transition: all 0.5s ease 0s;
}
.pi-blog-grid #pi-load:hover {
  background: #465fe9;
  color: #ffffff;
  border-color: #465fe9;
}
.pi-blog-grid .pi-load-more {
  text-align: center;
  margin-top: 40px;
}
.pi-blogs li {
  display: none;
}
#pi-load.nocontent {
  display: none !important;
}
/*******************************************
17. Contact Css Here 
*****************/
.pi-contact {
  padding: 200px 0 200px;
}
.pi-contact .container .pi-sec-title {
  text-align: center;
  margin-bottom: 100px;
}
.pi-contact .container .pi-sec-title .pi-title {
  color: #1a152e;
  font-size: 40px;
  font-weight: 700;
  margin: 0 0 20px;
}
.pi-contact .container .pi-inner {
  background: #ffffff;
  border-top: 3px solid #465fe9;
  border-radius: 10px;
  box-shadow: 0px 30px 70px 0px rgba(10, 0, 45, 0.09);
  padding: 8px 40px 40px 40px;
  max-width: 350px;
}
.pi-contact .container .pi-inner ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.pi-contact .container .pi-inner ul li {
  font-size: 15px;
  color: #5e5c69;
  font-weight: 400;
  float: left;
  width: 50%;
  margin-bottom: 32px;
  margin-top: 32px;
}
.pi-contact .container .pi-inner ul li span {
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
  color: #2ecb2a;
  position: relative;
  top: 4px;
}
.pi-contact .container .pi-inner ul li h5 {
  margin: 0;
  font-size: 30px;
  color: #465fe9;
  font-weight: 700;
}
.pi-contact .container .pi-inner ul li:last-child {
  margin-top: 7px;
}
.pi-contact .container .pi-inner ul li:nth-child(2) {
  padding-left: 26px;
}
.pi-contact .container .pi-inner ul li:nth-child(4) {
  padding-left: 26px;
}
.pi-contact .container .pi-inner a {
  font-size: 15px;
  font-weight: 500;
  color: #465fe9;
  transition: all 0.5s ease 0s;
  text-decoration: underline !important;
}
.pi-contact .container .pi-inner a:hover {
  text-decoration: none !important;
}
.pi-contact .container ul.pi-dots {
  margin: 35px 0 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.pi-contact .container ul.pi-dots li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: #5e5c69;
  float: left;
  width: 50%;
}
.pi-contact .container ul.pi-dots li:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #2ecb2a;
  left: 0;
  top: 8px;
  border-radius: 50%;
}
.pi-contact .container .pi-image-maping {
  position: relative;
}
.pi-contact .container .pi-image-maping img.pi-absolute {
  max-width: 970px;
  left: -213px;
  z-index: -1;
  top: -14px;
}
.pi-contact .container .pi-image-maping .pi-tooltip1 {
  left: 119px;
  top: 77px;
}
.pi-contact .container .pi-image-maping .pi-tooltip2 {
  right: 65px;
  top: 130px;
}
.pi-contact .container .pi-image-maping .pi-tooltip3 {
  top: 155px;
  left: 240px;
}
.pi-contact .container .pi-image-maping .pi-tooltip4 {
  left: 283px;
  top: 339px;
}
.pi-contact .container .pi-image-maping .pi-tooltip5 {
  top: 436px;
  right: -4px;
}
.pi-contact .container .pi-image-maping .pi-tooltip6 {
  left: 74px;
  top: 470px;
}
.pi-contact .container .pi-image-maping .pi-ripple {
  background-color: #f94392;
  border-radius: 50%;
  animation: pi-ripple 0.7s linear infinite;
  position: absolute;
}
.pi-contact .container .pi-image-maping .pi-ripple .box {
  position: relative;
  width: 16px;
  height: 16px;
}
.pi-contact .container .pi-image-maping .pi-ripple .box span {
  font-size: 16px;
  color: #1a152e;
  font-weight: 600;
}
@keyframes pi-ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(249, 67, 146, 0.1), 0 0 0 16px rgba(249, 67, 146, 0.1), 0 0 0 20px rgba(249, 67, 146, 0.1), 0 0 0 24px rgba(249, 67, 146, 0.1);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(249, 67, 146, 0.1), 0 0 0 20px rgba(249, 67, 146, 0.1), 0 0 0 24px rgba(249, 67, 146, 0.1), 0 0 0 38px rgba(249, 67, 146, 0);
  }
}
.pi-contact .pi-ripple:hover span {
  opacity: 1;
  filter: alpha(opacity=100);
  top: -60px;
  left: -18px;
  z-index: 99;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.pi-contact .pi-ripple span {
  background: #ffffff;
  /*-- some basic styling */

  font-weight: normal;
  padding: 8px 0px;
  width: 140px;
  top: -20px;
  /*-- this is the original position of the tooltip when it's hidden */

  left: -18px;
  margin-left: 0;
  /*-- set opacity to 0 otherwise our animations won't work */

  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  text-align: center;
  z-index: 2;
  text-transform: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease-in-out;
  border-radius: 4px;
}
.pi-contact .pi-ripple span:after {
  border-color: #ffffff rgba(0, 0, 0, 0);
  border-style: solid;
  border-width: 10px 8px 0;
  bottom: -10px;
  content: "";
  display: block;
  left: 18px;
  position: absolute;
  width: 0;
}
.pi-contact.pi-contacts {
  padding: 0;
  margin-top: -330px;
}
.pi-contacts .pi-image-maping {
  position: relative;
}
.pi-contacts .pi-image-maping .pi-tooltip1 {
  left: 38.8%;
  bottom: 202px;
  display: block;
}
.pi-contacts .pi-image-maping .pi-ripple {
  background-color: #f94392;
  border-radius: 50%;
  animation: pi-ripple 0.7s linear infinite;
  position: absolute;
}
.pi-contacts .pi-image-maping .pi-ripple .box {
  position: relative;
  width: 16px;
  height: 16px;
}
.pi-contacts .pi-image-maping .pi-ripple .box span {
  font-size: 16px;
  color: #1a152e;
  font-weight: 600;
}
@keyframes pi-ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(249, 67, 146, 0.05), 0 0 0 16px rgba(249, 67, 146, 0.05), 0 0 0 20px rgba(249, 67, 146, 0.05), 0 0 0 24px rgba(249, 67, 146, 0.05);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(249, 67, 146, 0.05), 0 0 0 20px rgba(249, 67, 146, 0.05), 0 0 0 24px rgba(249, 67, 146, 0.05), 0 0 0 38px rgba(249, 67, 146, 0);
  }
}
/* -----------------------
18. Sidebar CSS Here
--------------------------*/
.pi-sidebar .widget {
  margin-bottom: 3em;
  padding: 0 0 0 50px;
}
.pi-sidebar .widget.widget-tags {
  padding-bottom: 30px;
  margin-top: -12px;
}
.pi-sidebar ul.recent-posts {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pi-sidebar ul.recent-posts li {
  display: flex;
  align-items: center;
  padding-bottom: 1.2em;
}
.pi-sidebar ul.recent-posts li .post-images {
  width: 87px;
  display: block;
}
.pi-sidebar ul.recent-posts li .post-images img {
  border-radius: 10px;
  display: block;
  width: 127px;
}
.pi-sidebar ul.recent-posts li .titles {
  display: block;
  padding-left: 20px;
}
.pi-sidebar ul.recent-posts li .titles h4 {
  margin: 0;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
}
.pi-sidebar ul.recent-posts li .titles h4 a {
  color: #1a152e;
}
.pi-sidebar ul.recent-posts li .titles h4:hover a {
  color: #544afd;
}
.pi-sidebar ul.recent-posts li .titles em {
  font-style: normal;
  color: #524e65;
  font-size: 15px;
}
.pi-sidebar h3.widget-title {
  margin: 0;
  font-size: 20px;
  padding-bottom: 1.5em;
  color: #1a152e;
  font-weight: 600;
}
.pi-sidebar .tags {
  padding: 0;
  margin: 0;
}
.pi-sidebar .tags li {
  display: inline-block;
  margin: 0 5px 13px 0;
}
.pi-sidebar .tags li a {
  padding: 4px 17px;
  border: 2px solid #ecedf3;
  font-size: 14px;
  color: #85838c;
  font-weight: 500;
  border-radius: 6px;
}
.pi-sidebar .tags li a:hover {
  background: #544afd;
  border-color: #544afd;
  color: #ffffff;
}
.pi-sidebar form {
  position: relative;
}
.pi-sidebar form input {
  width: 100%;
  height: 57px;
  padding: 28px;
  background: #f5f5fa;
  border: none;
  outline: none;
  border-radius: 10px;
  border: 2px solid #f5f5fa;
}
.pi-sidebar form input:focus {
  border: 2px solid #465fe9;
  background: none;
}
.pi-sidebar form input:hover {
  border-color: #465fe9;
  background: none;
}
.pi-sidebar form button {
  background: transparent;
  color: #ffffff;
  display: inline-block;
  padding: 17px 28px;
  border-radius: 0 3px 3px 0;
  font-size: 16px;
  border: none;
  outline: none;
  cursor: pointer;
  margin-top: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all .5s ease;
}
.pi-sidebar form button i:before {
  color: #686579;
}
.pi-sidebar form button:hover {
  opacity: .9;
}
/* ------------------------------------
19. Blog Details CSS
---------------------------------------*/
.pi-blog-single {
  padding: 100px 0;
}
.pi-blog-single .blog-single-inner .blog-image {
  margin-bottom: 42px;
}
.pi-blog-single .blog-single-inner .blog-image img {
  border-radius: 10px;
  box-shadow: 0px 20px 40px 0px rgba(10, 0, 45, 0.1);
}
.pi-blog-single .blog-single-inner .blog-content {
  color: #524e65;
}
.pi-blog-single .blog-single-inner .blog-content p:first-child {
  margin: 0;
  overflow: hidden;
  line-height: 1.7;
}
.pi-blog-single .blog-single-inner .blog-content .pi-2nd {
  margin-top: -12px;
}
.pi-blog-single .blog-single-inner .blog-content p {
  margin-bottom: 40px;
  line-height: 30px;
}
.pi-blog-single .blog-single-inner .blog-content p:first-child:first-letter {
  color: #544afd;
  font-size: 50px;
  padding: 0 14px 0 5px;
  float: left;
  font-weight: 700;
  margin-top: -17px;
  text-shadow: 0 6px 15px rgba(0, 0, 0, 0.08), 0 6px 15px rgba(0, 0, 0, 0.08), 0 6px 15px rgba(0, 0, 0, 0.08);
}
.pi-blog-single .blog-single-inner .blog-content blockquote {
  position: relative;
  margin: 40px 0px;
  padding: 40px;
  color: #1a152e;
  background: #ffffff;
  border-radius: 20px;
  border-left: 4px solid #435be2;
  box-shadow: 0px 30px 40px 0px rgba(10, 0, 45, 0.1);
  font-size: 20px;
  overflow: hidden;
  line-height: 30px;
}
.pi-blog-single .blog-single-inner .blog-content blockquote:before {
  content: "";
  font-size: 120px;
  position: absolute;
  background: url(assets/images/blog-single/ap.png) no-repeat right bottom;
  bottom: -10px;
  right: 47px;
  width: 65px;
  height: 42px;
  z-index: 1;
  color: #dadffb;
}
.pi-blog-single .blog-single-inner .blog-content blockquote em {
  display: block;
  font-style: normal;
  color: #7f7d86;
  font-size: 16px;
  margin-top: 16px;
}
.pi-blog-single .blog-single-inner .blog-content .single-list {
  margin-left: 20px;
  margin-bottom: 20px;
}
.pi-blog-single .blog-single-inner .blog-content .single-list li {
  position: relative;
  padding-left: 20px;
}
.pi-blog-single .blog-single-inner .blog-content .single-list li:before {
  font-family: FontAwesome;
  content: "\f105";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #744fff;
}
.pi-blog-single .blog-single-inner .blog-content .image-with-p img {
  float: left;
  margin-right: 1.5em;
  margin-bottom: 9px;
}
.pi-blog-single .blog-single-inner .blog-content .blog-tags {
  margin-top: 40px;
  display: block;
  padding: 25px 0;
  border-top: 1px solid #ecedf3;
}
.pi-blog-single .blog-single-inner .blog-content .blog-tags ul.mata-tags li {
  display: inline-block;
  margin-right: 5px;
}
.pi-blog-single .blog-single-inner .blog-content .blog-tags ul.mata-tags li a {
  padding: 3px 15px;
  border: 2px solid #ecedf3;
  font-size: 14px;
  color: #85838c;
  font-weight: 500;
  border-radius: 6px;
}
.pi-blog-single .blog-single-inner .blog-content .blog-tags ul.mata-tags li a:hover {
  background: #544afd;
  border-color: #544afd;
  color: #ffffff;
}
.pi-blog-single .blog-single-inner .blog-content .blog-tags ul.mata-tags li:last-child {
  margin: 0;
}
.pi-blog-single .blog-single-inner .blog-content .blog-tags .social-links li {
  display: inline-block;
  padding-left: 5px;
}
.pi-blog-single .blog-single-inner .blog-content .blog-tags .social-links li a {
  color: #85838c;
  border: 2px solid #ecedf3;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  font-size: 14px;
}
.pi-blog-single .blog-single-inner .blog-content .blog-tags .social-links li a:hover {
  color: #ffffff;
  border-color: #465fe9;
  background: #465fe9;
}
.pi-blog-single .blog-single-inner .blog-content .post-author {
  display: flex;
  align-items: center;
  border-radius: 20px;
  padding: 40px;
  border-left: 4px solid #435be2;
  box-shadow: 0px 25px 40px 0px rgba(10, 0, 45, 0.1);
  overflow: hidden;
  margin-top: 30px;
}
.pi-blog-single .blog-single-inner .blog-content .post-author .avatar {
  margin-right: 20px;
}
.pi-blog-single .blog-single-inner .blog-content .post-author .avatar img {
  border-radius: 50%;
  width: 122px;
}
.pi-blog-single .blog-single-inner .blog-content .post-author .info .name {
  margin: 0;
  color: #1a152e;
  transition: all 0.5s ease 0s;
  font-size: 20px;
  font-weight: 600;
}
.pi-blog-single .blog-single-inner .blog-content .post-author .info .designation {
  font-size: 14px;
  color: #7f7d86;
  margin: 0;
}
.pi-blog-single .blog-single-inner .blog-content .post-author p {
  font-size: 15px;
  color: #524e65;
  margin: 15px 0 0;
  line-height: 24px;
}
.pi-blog-single .blog-single-inner .blog-content .post-author:hover .info .name {
  color: #435be2;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment {
  margin-bottom: 20px;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment h4.title-bg {
  margin: 36px 0 44px;
  font-size: 26px;
  font-weight: 600;
  color: #1a152e;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment span {
  font-size: 15px;
  color: #7f7d86;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment span i:before {
  font-size: 13px;
  padding-right: 3px;
  position: relative;
  top: -1px;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment h6 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #1a152e;
  font-weight: 600;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment ul {
  padding: 0;
  margin: 0;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment ul li {
  margin: 0 0 20px;
  padding: 30px 57px 38px 20px;
  background: #f9f9fc;
  border-radius: 10px;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment ul li .col-sm-2 {
  text-align: right;
  padding-right: 6px;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment ul li:nth-child(2) {
  margin-left: 120px;
  padding: 30px 52px 38px 8px;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment ul li:nth-child(2) .col-sm-2 {
  padding-right: 6px;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment ul li:nth-child(2) .image-comments img {
  width: 55px;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment ul li:last-child {
  border-bottom: none;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment ul li .image-comments {
  margin-top: 0;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment ul li .image-comments img {
  width: 87px;
  border-radius: 100%;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment ul li .reply {
  display: block;
  position: absolute;
  text-align: right;
  width: 95%;
  top: -4px;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment ul li .reply a {
  color: #744fff;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment ul li .reply a:hover {
  color: #744fff;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment ul li .dsc-comments h4 {
  margin: 0 0 12px;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment ul li .dsc-comments a {
  padding: 4px 17px;
  border: 2px solid #ecedf3;
  font-size: 14px;
  color: #85838c;
  font-weight: 500;
  border-radius: 6px;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment ul li .dsc-comments a:hover {
  background: #544afd;
  border-color: #544afd;
  color: #ffffff;
}
.pi-blog-single .blog-single-inner .blog-content .author-comment ul li .dsc-comments p {
  margin: 0 0 24px;
  color: #524e65;
  font-size: 15px;
  line-height: 24px;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form {
  box-shadow: 0px 20px 30px 0px rgba(10, 0, 45, 0.1);
  padding: 50px;
  border-radius: 10px;
  margin-top: 114px;
  background: #ffffff;
  z-index: 9;
  position: relative;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form .pi-input {
  position: relative;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form .pi-input img {
  position: absolute;
  bottom: 55px;
  left: 30px;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form .pi-textarea img {
  position: absolute;
  top: 57px;
  left: 47px;
  z-index: 1;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form h3 {
  font-size: 26px;
  color: #1a152e;
  font-weight: 600;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form form label {
  color: #1a152e;
  font-size: 14px;
  font-weight: 500;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form form input {
  width: 100%;
  height: 57px;
  padding: 10px 30px 10px 60px;
  background: #f5f5fa;
  border: none;
  outline: none;
  border-radius: 10px;
  margin-bottom: 35px;
  border: 2px solid #f5f5fa;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form form input:focus {
  border: 2px solid #465fe9;
  background: none;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form form textarea {
  width: 100%;
  height: 160px;
  padding: 22px 65px;
  background: #f5f5fa;
  border: none;
  outline: none;
  border-radius: 10px;
  margin-bottom: 5px;
  position: relative;
  border: 2px solid #f5f5fa;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form form textarea:focus {
  border: 2px solid #465fe9;
  background: none;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form form button {
  background: #465fe9;
  font-size: 15px;
  color: #ffffff;
  border-radius: 10px;
  padding: 13px 34px;
  display: inline-block;
  font-weight: 500;
  transition: all 0.5s ease 0s;
  border: none;
  outline: none;
  box-shadow: none;
  cursor: pointer;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form form button:hover {
  color: #ffffff;
  opacity: .9;
  box-shadow: 0px 20px 30px 0px rgba(10, 0, 45, 0.1);
}
.pi-blog-single .blog-single-inner .blog-content .blog-form form .pi-check-box {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 20px;
  color: #74727d;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form form .pi-check-box a {
  color: #1a152e;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form form .pi-check-box a:hover {
  color: #74727d;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form form .pi-check-box input {
  width: auto;
  margin: 0 12px 0 0;
  height: 16px;
  width: 16px;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form form ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */

  color: #807e89;
  opacity: 1;
  font-size: 14px;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form form ::-moz-placeholder {
  /* Firefox 19+ */

  color: #807e89;
  opacity: 1;
  font-size: 14px;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form form :-ms-input-placeholder {
  /* IE 10+ */

  color: #807e89;
  opacity: 1;
  font-size: 14px;
}
.pi-blog-single .blog-single-inner .blog-content .blog-form form :-moz-placeholder {
  /* Firefox 18- */

  color: #807e89;
  opacity: 1;
  font-size: 14px;
}
@-moz-document url-prefix() {
  .pi-blog-single .blog-single-inner .blog-content .pi-2nd {
    margin-top: 0;
  }
  .pi-blog-single .blog-single-inner .blog-content p:first-child:first-letter {
    margin-top: 6px;
  }
}
.pi-blog-form .layer-b-1 {
  left: -37px;
  z-index: -1;
  top: 100px;
}
.pi-blog-form .layer-b-2 {
  right: -45px;
  z-index: -1;
  bottom: 260px;
}
button.pi__close .icon-bar:nth-child(1) {
  -webkit-transform: rotate(43.5deg) scaleX(1);
  -ms-transform: rotate(43.5deg) scaleX(1);
  transform: rotate(43.5deg) scaleX(1);
  position: relative;
  top: 9px;
  width: 25px;
}
button.pi__close .icon-bar:nth-child(2) {
  -webkit-transform: rotate(-41.5deg) scaleX(1);
  -ms-transform: rotate(-41.5deg) scaleX(1);
  transform: rotate(-41.5deg) scaleX(1);
  position: relative;
  top: 1px;
  width: 25px;
}
button.pi__close .icon-bar:nth-child(3) {
  opacity: 0;
}
.pi-blog-related {
  padding-top: 95px;
}
.pi-blog-related .container {
  padding-left: 0;
  padding-right: 0;
}
.pi-blog-related .pi-title-related {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  color: #1a152e;
}
.pi-blog-related .container .pi-blog-slider li .pi-inner {
  box-shadow: -6px 30px 30px -6px rgba(10, 0, 45, 0.05);
}
.pi-blog-related .container .pi-blog-slider li .pi-inner .pi-blog-content {
  padding: 35px 25px 30px;
}
.pi-blog-related .container .pi-blog-slider li .pi-inner .pi-blog-content h3 {
  font-size: 15px;
  font-weight: 600;
  margin-top: 20px;
  line-height: 22px;
}
.pi-blog-related .container .pi-blog-slider li .pi-inner {
  margin-left: 15px;
  margin-right: 15px;
}
.pi-blog-related .container .pi-blog-slider {
  margin: 0;
  margin-left: -15px;
}
/*******************************************
20. Portfolio Css Here 
*****************/
.pi-portfolio {
  padding: 120px 0 70px;
}
.pi-portfolio .container {
  max-width: 1200px;
}
.pi-portfolio .container .pi-filter {
  margin-bottom: 50px;
}
.pi-portfolio .container .pi-filter button {
  border: none;
  outline: none;
  margin: 0;
  padding: 4px 20px;
  font-size: 16px;
  color: #5e5c69;
  position: relative;
  background: none;
  cursor: pointer;
}
.pi-portfolio .container .pi-filter button:before {
  content: "";
  background: #465fe9;
  left: 0;
  right: 0;
  top: 0;
  padding: 20px 31px 17px;
  z-index: -1;
  position: absolute;
  border-radius: 10px;
  opacity: 0;
  transition: all 0.5s ease 0s;
  transform: translateX(-20px);
  box-shadow: 0px 12px 20px 0px #cad1f9;
}
.pi-portfolio .container .pi-filter button.active {
  color: #ffffff;
}
.pi-portfolio .container .pi-filter button.active:before {
  opacity: 1;
  transform: translateX(0px);
}
.pi-portfolio .container .pi-filter button:hover {
  color: #ffffff;
}
.pi-portfolio .container .pi-filter button:hover:before {
  opacity: 1;
  transform: translateX(0px);
}
.pi-portfolio .container .pi-grid {
  overflow: hidden;
}
.pi-portfolio .container .pi-grid .pi-inner-col .pi-image {
  margin: 0;
}
.pi-portfolio .container .pi-grid .pi-inner-col .pi-image img {
  border-radius: 10px;
}
.pi-portfolio .container .pi-grid .pi-inner-col .pi-portfolio-content {
  padding: 20px 30px;
  margin-top: 5px;
  margin-bottom: 22px;
  margin-left: 20px;
  margin-right: 20px;
  transition: all 0.5s ease 0s;
}
.pi-portfolio .container .pi-grid .pi-inner-col .pi-portfolio-content h3.pi-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 3px;
}
.pi-portfolio .container .pi-grid .pi-inner-col .pi-portfolio-content h3.pi-title a {
  color: #1a152e;
}
.pi-portfolio .container .pi-grid .pi-inner-col .pi-portfolio-content h3.pi-title a:hover {
  color: #465fe9;
}
.pi-portfolio .container .pi-grid .pi-inner-col .pi-portfolio-content strong {
  font-size: 16px;
  color: #5e5c69;
  font-weight: normal;
  margin: 0;
}
.pi-portfolio .container .pi-grid .pi-inner-col:hover .pi-portfolio-content {
  background: #ffffff;
  box-shadow: 0px 20px 30px 0px rgba(10, 0, 45, 0.05);
  transform: translateY(-50px);
  border-radius: 10px;
}
/*******************************************
21. Portfolio Details Css Here 
*****************/
.pi-portfolio-details {
  padding-bottom: 140px;
}
.pi-portfolio-details .container .pi-thumbnail {
  margin-top: -200px;
  position: relative;
  z-index: 1;
  max-width: 1075px;
  margin-left: auto;
  margin-right: auto;
}
.pi-portfolio-details .pi-container {
  max-width: 1000px;
}
.pi-portfolio-details .pi-container ul.information {
  margin: -30px 0 45px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.pi-portfolio-details .pi-container ul.information li {
  flex: 0 0 25%;
}
.pi-portfolio-details .pi-container ul.information li strong {
  margin: 0 0 8px;
  font-size: 16px;
  color: #1a152e;
  font-weight: 600;
  display: inline-block;
}
.pi-portfolio-details .pi-container ul.information li p {
  margin: 0;
  font-size: 14px;
  color: #5e5c69;
  line-height: 20px;
}
.pi-portfolio-details .pi-container ul.information li p a {
  margin: 0;
  font-size: 14px;
  color: #5e5c69;
}
.pi-portfolio-details .pi-container ul.information li p a:hover {
  color: #744fff;
}
.pi-portfolio-details .pi-container .pi-content {
  font-size: 16px;
  color: #524e65;
  max-width: 990px;
  line-height: 30px;
}
.pi-portfolio-details .pi-container .pi-content h3 {
  font-size: 30px;
  color: #1a152e;
  font-weight: 700;
  margin: 0 0 18px;
}
.pi-portfolio-details .pi-container .pi-content p {
  margin: 0 0 40px;
}
.pi-portfolio-details .pi-container .pi-content .pi-two-image {
  display: flex;
  justify-content: space-between;
  max-width: 970px;
  padding-bottom: 43px;
}
.pi-portfolio-details .pi-container .pi-content .pi-two-image img {
  border-radius: 10px;
}
.pi-portfolio-details .pi-container .single-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #ecedf3;
  padding-top: 20px;
  margin-top: 50px;
}
.pi-portfolio-details .pi-container .single-nav .pi-prev a,
.pi-portfolio-details .pi-container .single-nav .pi-next a {
  color: #85838c;
  font-size: 16px;
  font-weight: 500;
}
.pi-portfolio-details .pi-container .single-nav .pi-prev a:hover,
.pi-portfolio-details .pi-container .single-nav .pi-next a:hover {
  color: #465fe9;
}
.pi-portfolio-details .pi-container .single-nav .pi-prev {
  position: relative;
  padding-left: 28px;
  transition: all 500ms ease;
}
.pi-portfolio-details .pi-container .single-nav .pi-prev i:before {
  font-size: 16px;
  margin: 0;
  font-weight: 600;
  position: absolute;
  transform: rotate(-180deg);
  top: 0;
  left: 0;
  transition: all 500ms ease;
}
.pi-portfolio-details .pi-container .single-nav .pi-prev:hover i:before {
  left: -6px;
}
.pi-portfolio-details .pi-container .single-nav .pi-next {
  position: relative;
  padding-right: 28px;
  transition: all 500ms ease;
}
.pi-portfolio-details .pi-container .single-nav .pi-next i:before {
  font-size: 16px;
  margin: 0;
  font-weight: 600;
  position: absolute;
  top: 0;
  right: 0;
  transition: all 500ms ease;
}
.pi-portfolio-details .pi-container .single-nav .pi-next:hover i:before {
  right: -6px;
}
.pi-portfolio-details .pi-container .single-nav .social-links li {
  display: inline-block;
  padding-left: 15px;
}
.pi-portfolio-details .pi-container .single-nav .social-links li a {
  color: #85838c;
  border: 2px solid #ecedf3;
  display: inline-block;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 50%;
  font-size: 14px;
}
.pi-portfolio-details .pi-container .single-nav .social-links li a:hover {
  color: #ffffff;
  border-color: #465fe9;
  background: #465fe9;
}
.pi-breadcrumbs.portfolio-single .breadcrumbs-text {
  max-width: 972px;
  margin: 0 auto;
  position: relative;
  top: -30px;
}
.pi-breadcrumbs .pi-service-category {
  color: #858fd2;
  font-size: 16px;
  font-weight: 500;
  display: inline-block;
}
/*******************************************
22. Service Details Css Here 
*****************/
.pi-single-service .container .pi-service-sidebar {
  background: #ffffff;
  box-shadow: 0px 25px 40px 0px rgba(10, 0, 45, 0.1);
  border-top: 4px solid #465fe9;
  border-radius: 10px;
  padding: 22px 40px;
  max-width: 320px;
}
.pi-single-service .container .pi-service-sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pi-single-service .container .pi-service-sidebar ul li {
  margin: 18px 0;
  font-size: 14px;
  color: #524e65;
  font-weight: 500;
}
.pi-single-service .container .pi-service-sidebar ul li img {
  margin-right: 12px;
}
.pi-single-service .container ul.pi-download {
  margin-top: 30px;
}
.pi-single-service .container ul.pi-download li {
  background: #ffffff;
  box-shadow: 0px 25px 40px 0px rgba(10, 0, 45, 0.1);
  border-radius: 10px;
  padding: 11px 40px;
  max-width: 316px;
  margin: 0 0 10px 0;
  position: relative;
  border-left: 4px solid #ffffff;
  transition: all 0.5s ease 0s;
}
.pi-single-service .container ul.pi-download li a {
  font-size: 14px;
  color: #524e65;
  font-weight: 500;
}
.pi-single-service .container ul.pi-download li a img {
  margin-right: 9px;
}
.pi-single-service .container ul.pi-download li:hover {
  border-color: #465fe9;
}
.pi-single-service .container ul.pi-download li:hover a {
  color: #465fe9;
}
.pi-single-service .container .col-lg-8 {
  margin-top: -8px;
}
.pi-single-service .container .col-lg-8 p {
  font-size: 16px;
  color: #524e65;
  margin-bottom: 40px;
}
.pi-single-service .container .col-lg-8 h3 {
  color: #1a152e;
  font-weight: 700;
  font-size: 30px;
}
.pi-single-service .container .col-lg-8 img {
  border-radius: 10px;
  margin-bottom: 40px;
}
.pi-single-service .container .col-lg-8 h4 {
  color: #1a152e;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
}
/*******************************************
23. Contact Css Here 
*****************/
.pi-contact-box {
  padding-top: 100px;
  padding-bottom: 100px;
}
.pi-contact-box .container {
  max-width: 1000px;
}
.pi-contact-box .container .pi-sec-title .pi-title {
  color: #1a152e;
  font-size: 40px;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 50px;
}
.pi-contact-box .container .pi-sec-title p {
  font-size: 20px;
  color: #524e65;
  margin: 0;
}
.pi-contact-box .container ul.pi-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 70px;
}
.pi-contact-box .container ul.pi-box li {
  background: #f9f9fc;
  border-radius: 10px;
  padding: 34px 40px 30px;
  margin: 0 50px 0 0;
  position: relative;
  border-top: 3px solid #f9f9fc;
  transition: all 0.5s ease 0s;
  flex: 0 0 290px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #1a152e;
}
.pi-contact-box .container ul.pi-box li a {
  font-size: 16px;
  font-weight: 500;
  color: #1a152e;
}
.pi-contact-box .container ul.pi-box li a:hover {
  color: #465fe9;
}
.pi-contact-box .container ul.pi-box li:last-child {
  margin-right: 0;
}
.pi-contact-box .container ul.pi-box li img {
  display: block;
  margin: 0 auto 20px;
}
.pi-contact-box .container ul.pi-box li:hover {
  border-color: #465fe9;
  box-shadow: 0px 30px 50px 0px rgba(10, 0, 45, 0.1);
  transform: translateY(-2px);
  background: #ffffff;
}
.pi-contact-box .container .pi-blog-form .pi-absolute.layer-b-2 {
  bottom: 312px;
}
.pi-contact-box .container .pi-blog-form {
  max-width: 970px;
}
.pi-contact-box .container .blog-form {
  box-shadow: 0px 20px 30px 0px rgba(10, 0, 45, 0.1);
  padding: 50px;
  border-radius: 10px;
  margin-top: 50px;
  background: #ffffff;
  z-index: 9;
  position: relative;
}
.pi-contact-box .container .blog-form .pi-input {
  position: relative;
}
.pi-contact-box .container .blog-form .pi-input img {
  position: absolute;
  bottom: 55px;
  left: 30px;
}
.pi-contact-box .container .blog-form .pi-textarea img {
  position: absolute;
  top: 57px;
  left: 47px;
  z-index: 1;
}
.pi-contact-box .container .blog-form h3 {
  font-size: 26px;
  color: #1a152e;
  font-weight: 600;
}
.pi-contact-box .container .blog-form form label {
  color: #1a152e;
  font-size: 14px;
  font-weight: 500;
}
.pi-contact-box .container .blog-form form input {
  width: 100%;
  height: 57px;
  padding: 10px 30px 10px 60px;
  background: #f5f5fa;
  border: none;
  outline: none;
  border-radius: 10px;
  margin-bottom: 35px;
  border: 2px solid #f5f5fa;
}
.pi-contact-box .container .blog-form form input:focus {
  border: 2px solid #465fe9;
  background: none;
}
.pi-contact-box .container .blog-form form textarea {
  width: 100%;
  height: 200px;
  padding: 22px 65px;
  background: #f5f5fa;
  border: none;
  outline: none;
  border-radius: 10px;
  margin-bottom: 5px;
  position: relative;
  border: 2px solid #f5f5fa;
}
.pi-contact-box .container .blog-form form textarea:focus {
  border: 2px solid #465fe9;
  background: none;
}
.pi-contact-box .container .blog-form form button {
  background: #465fe9;
  font-size: 15px;
  color: #ffffff;
  border-radius: 10px;
  padding: 13px 34px;
  display: inline-block;
  font-weight: 500;
  transition: all 0.5s ease 0s;
  border: none;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  float: right;
  clear: both;
}
.pi-contact-box .container .blog-form form button:hover {
  color: #ffffff;
  opacity: .9;
  box-shadow: 0px 20px 30px 0px rgba(10, 0, 45, 0.1);
}
.pi-contact-box .container .blog-form form .pi-check-box {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 0px;
  color: #74727d;
}
.pi-contact-box .container .blog-form form .pi-check-box a {
  color: #1a152e;
}
.pi-contact-box .container .blog-form form .pi-check-box a:hover {
  color: #74727d;
}
.pi-contact-box .container .blog-form form .pi-check-box input {
  width: auto;
  margin: 1px 12px 0 0;
  height: 16px;
  width: 16px;
}
.pi-contact-box .container .blog-form form ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */

  color: #807e89;
  opacity: 1;
  font-size: 14px;
}
.pi-contact-box .container .blog-form form ::-moz-placeholder {
  /* Firefox 19+ */

  color: #807e89;
  opacity: 1;
  font-size: 14px;
}
.pi-contact-box .container .blog-form form :-ms-input-placeholder {
  /* IE 10+ */

  color: #807e89;
  opacity: 1;
  font-size: 14px;
}
.pi-contact-box .container .blog-form form :-moz-placeholder {
  /* Firefox 18- */

  color: #807e89;
  opacity: 1;
  font-size: 14px;
}
/*******************************************
24. Preloader Css Here 
*****************/
#pi__preloader {
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  display: -webkit- flex;
  display: -ms- flex;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100vh;
  background: #ffffff;
  position: fixed;
  z-index: 999999;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.pi__loader_logo {
  position: absolute;
}
.pi__loader_logo img {
  width: 40px;
}
#pi__circle_loader {
  width: 100px;
  height: 100px;
  border-style: solid;
  border-width: 5px;
  border-top-color: #465fe9;
  border-right-color: #465fe9;
  border-bottom-color: #d5eaff;
  border-left-color: #d5eaff;
  border-radius: 50%;
  -webkit-animation: spinLoader 2s linear infinite;
  animation: spinLoader 2s linear infinite;
}
@-webkit-keyframes spinLoader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinLoader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*******************************************
25. Pi ScrollUp Css Here 
*****************/
#piscrollUp {
  position: fixed;
  bottom: 40px;
  right: 15px;
  transition: all .5s ease;
  z-index: 99999;
  cursor: pointer;
  background: #744fff;
  border-radius: 0 100% 100% 100%;
  padding: 6px;
  display: none;
}
#piscrollUp i {
  background: #ffffff;
  display: block;
  width: 40px;
  height: 40px;
  line-height: 36px;
  transition: all .5s ease;
  font-size: 22px;
  color: #744fff;
  border-radius: 0 100% 100% 100%;
  text-align: center;
}
#piscrollUp i:before {
  transition: all .5s ease;
  display: block;
  margin: 0;
  transform: rotate(37deg);
  font-size: 14px;
}
#piscrollUp:hover {
  transform: rotate(46deg);
}
#piscrollUp:hover i:before {
  transform: rotate(46deg);
  display: block;
}
/*******************************************
26. Footer Css Here 
*****************/
.pi-footer {
  position: relative;
  background-color: #f5f6f8;
}
.pi-footer .footer-top {
  padding: 90px 0 110px;
  color: #5e5c69;
  font-size: 16px;
}
.pi-footer .footer-top .pi-row {
  display: flex;
  flex-wrap: wrap;
}
.pi-footer .footer-top .pi-row .pi-footer-col {
  flex: 0 0 25%;
}
.pi-footer .footer-top .pi-row .pi-footer-col.pi-footer-widget-one {
  flex: 0 0 33%;
  padding-right: 100px;
}
.pi-footer .footer-top .pi-row .pi-footer-col.pi-footer-widget-two,
.pi-footer .footer-top .pi-row .pi-footer-col.pi-footer-widget-three,
.pi-footer .footer-top .pi-row .pi-footer-col.pi-footer-widget-four {
  flex: 0 0 22.3%;
  padding-top: 7px;
}
.pi-footer .footer-top .pi-row .pi-footer-col.pi-footer-widget-four {
  padding-left: 40px;
}
.pi-footer .footer-top .pi-footer-menu li {
  margin-bottom: 8px;
}
.pi-footer .footer-top .pi-footer-menu li a {
  color: #524e65;
  font-size: 15px;
  font-weight: 400;
  position: relative;
}
.pi-footer .footer-top .pi-footer-menu li a:before {
  content: "";
  width: 0;
  height: 1px;
  background: #744fff;
  right: 0;
  left: auto;
  bottom: 0;
  position: absolute;
  transition: width 0.3s linear;
}
.pi-footer .footer-top .pi-footer-menu li a:hover {
  color: #744fff;
  position: relative;
}
.pi-footer .footer-top .pi-footer-menu li a:hover:before {
  width: 100%;
  right: auto;
  left: 0;
}
.pi-footer .footer-top .pi-footer-menu li:last-child {
  margin-bottom: 0;
}
.pi-footer .footer-top a {
  color: #524e65;
}
.pi-footer .footer-top .pi-footer-desc {
  padding-bottom: 8px;
}
.pi-footer .footer-top .footer-widget .social-links li {
  display: inline-block;
  margin-right: 6px;
}
.pi-footer .footer-top .footer-widget .social-links li a {
  border: 2px solid #dfe6e8;
  color: #5e5c69;
  display: block;
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 50%;
  text-align: center;
  transition: all 0.7s ease 0s;
}
.pi-footer .footer-top .footer-widget .social-links li a i {
  color: #85838c;
  font-size: 16px;
  transition: all 0.7s ease 0s;
}
.pi-footer .footer-top .footer-widget .social-links li a:hover {
  background: #744fff;
  border: 2px solid #744fff;
}
.pi-footer .footer-top .footer-widget .social-links li a:hover i {
  color: #ffffff;
  font-size: 16px;
}
.pi-footer .footer-top .footer-widget .social-links li:last-child {
  margin-right: 0;
}
.pi-footer .footer-top .footer-widget .footer-logo {
  margin-bottom: 20px;
}
.pi-footer .footer-top .footer-widget .footer-title {
  margin-bottom: 25px;
  position: relative;
  font-weight: 600;
  color: #132339;
  font-size: 16px;
  letter-spacing: 1px;
}
.pi-footer .pi-copyright {
  text-align: center;
  border-top: 1px solid #e6e8ee;
  padding: 30px 0 25px;
}
.pi-footer .pi-copyright p {
  font-size: 14px;
  color: #636e70;
}
.pi-footer .pi-copyright p a {
  color: #744fff;
  transition: all .7s ease;
  position: relative;
}
.pi-footer .pi-copyright p a:before {
  content: "";
  width: 0;
  height: 1px;
  background: #636e70;
  right: 0;
  left: auto;
  bottom: 0;
  position: absolute;
  transition: width 0.3s linear;
}
.pi-footer .pi-copyright p a:hover {
  color: #636e70;
}
.pi-footer .pi-copyright p a:hover:before {
  width: 100%;
  right: auto;
  left: 0;
}
.pi-wrapper-inner {
  background: #ffffff;
  position: relative;
  z-index: 99;
}
.pi-footer.dim-fixed {
  margin: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
.pi-footer.dim-static {
  position: fixed;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
}
body.pi-page-color .pi-footer .footer-top .footer-widget .social-links li a:hover {
  background: #465fe9;
  border-color: #465fe9;
}
body.pi-page-color .pi-footer .footer-top .pi-footer-menu li a:before,
body.pi-page-color #piscrollUp {
  background: #465fe9;
}
body.pi-page-color .pi-footer .pi-copyright p a,
body.pi-page-color .pi-footer .footer-top .pi-footer-menu li a:hover {
  color: #465fe9;
}
body.pi-page-color .pi-second {
  background: #465fe9;
}
body.pi-page-color .pi-pricing .pi-price-second-color .exclusive .select {
  background: #465fe9;
  border-color: #465fe9;
}
body.pi-page-color .pi-pricing .pi-price-second-color .exclusive .select:hover {
  background: transparent;
  border-color: #465fe9;
}
body.pi-page-color .pi-pricing .pi-price-second-color .select:hover {
  background: #465fe9;
  border-color: #465fe9;
  color: #ffffff;
}
/*******************************************
27. 404 Css Here 
*****************/
#pi-header.pi-error-404 {
  background: #465fe9;
  position: relative;
}
.pi-error {
  background: #f5f6f8;
  padding-top: 220px;
  padding-bottom: 245px;
}
.pi-error .content-wrap .title-part .title {
  font-size: 200px;
  text-shadow: 20px 0 0 rgba(0, 0, 0, 0.3);
  line-height: 200px;
  font-weight: 800;
  letter-spacing: 12px;
}
.pi-error .content-wrap .title-part .title em {
  font-style: normal;
  letter-spacing: 55px;
  color: #465fe9;
  text-shadow: 20px 0 0 rgba(89, 111, 236, 0.5);
  position: relative;
  left: -4px;
}
.pi-error .content-wrap .title-part .sub-title {
  font-size: 52px;
  text-transform: capitalize;
  font-weight: 700;
  line-height: 62px;
}
.pi-error .content-wrap .title-part p {
  max-width: 450px;
  margin: 30px auto 20px;
}
.pi-error .content-wrap .button-part {
  padding-top: 25px;
}
.pi-error .content-wrap .button-part .back-btn {
  color: #ffffff;
  background: #465fe9;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  display: inline-block;
  padding: 14px 50px;
  border: 2px solid #465fe9;
}
.pi-error .content-wrap .button-part .back-btn:hover {
  color: #465fe9;
  background: transparent;
  border-color: #465fe9;
}