@charset "UTF-8";
/*-----------------------------------------------------------------------------------

    Theme Name: Outstock - Clean, Minimal eCommerce HTML5 Template 
    Author: Basic Theme
    Support: mdsalim400@gmail.com
    Description:  Clean, Minimal eCommerce HTML5 Template 
    Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

    01. Common CSS
    02. Header CSS
    03. Hero CSS
    04. Services CSS
    05. About CSS
    06. Price CSS
    07. Testimonial CSS
    08. Features CSS
    09. Cta CSS
    10. Team CSS
    11. FAQ CSS
    12. Blog CSS
    13. Promotion CSS
    14. Platform CSS
    15. Why CSS
    16. Portfolio CSS
    17. Subscribe CSS
    18. Support CSS
    19. Page Title CSS
    20. Contact CSS
    21. Error CSS
    22. Sign CSS
    23. Footer CSS

**********************************************/
/* colors home 1*/
/*----------------------------------------*/
/*  01. Theme default CSS
/*----------------------------------------*/
/* 1. Theme default css */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  font-weight: normal;
  color: #6c6a8a;
  line-height: 26px;
}

a {
  text-decoration: none;
}

.w-img img {
  width: 100%;
}

.m-img img {
  max-width: 100%;
}

a,
.btn,
button,
span,
p,
i,
input,
select,
textarea,
li,
img,
*::after,
*::before,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

a:focus,
.button:focus {
  text-decoration: none;
  outline: none;
}

a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
}

a,
button {
  color: inherit;
  outline: none;
  border: none;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
  border: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Open Sans", sans-serif;
  color: #070337;
  margin-top: 0px;
  font-weight: 700;
  line-height: 1.2;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}

ul {
  margin: 0px;
  padding: 0px;
}

li {
  list-style: none;
}

p {
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  font-weight: normal;
  color: #6c6a8a;
  margin-bottom: 15px;
  line-height: 26px;
}

*::-moz-selection {
  background: #7127ea;
  color: #ffffff;
  text-shadow: none;
}

::-moz-selection {
  background: #7127ea;
  color: #ffffff;
  text-shadow: none;
}

::selection {
  background: #7127ea;
  color: #ffffff;
  text-shadow: none;
}

/*--
    - Input Placeholder
-----------------------------------------*/
*::-moz-placeholder {
  color: #222222;
  font-size: 14px;
  opacity: 1;
}

*::placeholder {
  color: #222222;
  font-size: 14px;
  opacity: 1;
}

/*--
    - Common Classes
-----------------------------------------*/
.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.z-index-1 {
  z-index: 1;
}

.overflow-y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

/*--
    - Background color
-----------------------------------------*/
.grey-bg {
  background: #f5faff;
}

.grey-bg-2 {
  background: #dadada;
}

.grey-bg-3 {
  /* background: #f4f9fd; */
  background-image: url('../img/external/bg34.png');
  /* background-size: cover; */
}

.grey-bg-5 {
  background: #faf9ff;
}

.grey-bg-6 {
  background: #f0f4f8;
}

.grey-bg-8 {
  background: #e6ebf3;
}

.grey-bg-9 {
  background: #fafafb;
}

.grey-bg-12 {
  background: #f7f7fc;
}

.grey-bg-13 {
  background: #f2f7ff;
}

.grey-bg-20 {
  background: #f8f8f8;
}

.dark-blue-bg {
  background: #063e85;
}

.footer-bg-3 {
  background: #011126;
}

.white-bg {
  background: #ffffff;
}

.black-bg {
  background: #222222;
}

.blue-bg-5 {
  background: #005ad3;
}

.blue-bg-6 {
  background: #0151bd;
}

.blue-bg-10 {
  background: #5f55ff;
}
/**/
.desktop-menu-job ul{
    display: inline-flex
}

.desktop-menu-job ul li{
 margin-right: 10px   
}
/*--
    - color
-----------------------------------------*/
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
  color: #ffffff !important;
}

.white-color {
  color: #ffffff;
}

.theme-color {
  color: #7127ea !important;
}

.black-color {
  color: #222222;
}

.mt-350 {
  margin-top: 350px;
}

.ml-220 {
  margin-left: 220px;
}

.ml--30 {
  margin-left: -30px;
}

.mb--149 {
  margin-bottom: -149px;
}

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

.pt-270 {
  padding-top: 270px;
}

.section-padding {
  padding-left: 70px;
  padding-right: 70px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .section-padding {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 575px) {
  .section-padding {
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-padding-2 {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .section-padding-2 {
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media (max-width: 575px) {
  .section-padding-2 {
    padding-left: 0px;
    padding-right: 0px;
  }
}
.section-padding-3 {
  padding: 0 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .section-padding-3 {
    padding: 0 100px;
  }
}
@media (max-width: 575px) {
  .section-padding-3 {
    padding: 0;
  }
}
.section-padding-4 {
  padding: 0 75px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .section-padding-4 {
    padding: 0px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .section-padding-4 {
    padding: 0px 30px;
  }
}
@media (max-width: 575px) {
  .section-padding-4 {
    padding: 0px;
  }
}
@media (max-width: 575px) {
  .section-padding-p-0 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

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

.custom-col-5 {
  flex: 0 0 auto;
  width: 20%;
}

/* theme btn */
.w-btn {
  font-size: 15px;
  color: #ffffff;
  background: #200847;
  height: 44px;
      width: 130px;
  line-height: 40px;
  border: 2px solid white;
  text-align: center;
  padding: 0 13px;
  display: inline-block;
  font-weight: 600;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  text-transform: capitalize;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.w-btn::after {
  position: absolute;
  content: "";
  z-index: -1;
  display: block;
  left: -20%;
  right: -20%;
  top: -4%;
  height: 150%;
  width: 150%;
  bottom: 0;
  -webkit-transform: skewX(45deg) scale(0, 1);
  -moz-transform: skewX(45deg) scale(0, 1);
  -ms-transform: skewX(45deg) scale(0, 1);
  transform: skewX(45deg) scale(0, 1);
  background: #ffffff;
}
.w-btn:hover {
  color: #7127ea;
  -webkit-box-shadow: 0px 20px 60px 0px rgba(15, 0, 40, 0.2);
  -moz-box-shadow: 0px 20px 60px 0px rgba(15, 0, 40, 0.2);
  box-shadow: 0px 20px 60px 0px rgba(15, 0, 40, 0.2);
}
.w-btn:hover::after {
  -webkit-transform: skewX(45deg) scale(1, 1);
  -moz-transform: skewX(45deg) scale(1, 1);
  -ms-transform: skewX(45deg) scale(1, 1);
  transform: skewX(45deg) scale(1, 1);
}
.w-btn-transparent {
  background: transparent;
  border-color: transparent;
  color: #070337;
}
.w-btn-transparent::after {
  display: none;
}
.w-btn-transparent:hover {
  background: transparent;
  color: #7127ea;
}
.w-btn-transparent-2 {
  font-size: 15px;
  color: #011224;
  background: transparent;
  padding: 0;
}
.w-btn-transparent-2:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: #1c7df8;
}
.w-btn-white {
  background: #ffffff;
  color: #7127ea;
  border-color: #ffffff;
}
.w-btn-white::after {
  background: #dec96d;
}
.w-btn-white:hover {
  border-color: #7127ea;
  color: black;
}
.w-btn-white-2 {
  color: #2f80ed;
  height: 54px;
  line-height: 50px;
  padding: 0 38px;
}
.w-btn-white-2::after {
  background: #2f80ed;
}
.w-btn-white-2:hover {
  border-color: #2f80ed;
  color: #ffffff;
}
.w-btn-white-3 {
  color: #ffffff;
  border-color: #ffffff;
  background: transparent;
}
.w-btn-white-3::after {
  background: #ffffff;
}
.w-btn-white-3:hover {
  color: #5d41c2;
  border-color: #ffffff;
  background: #ffffff;
}
.w-btn-white-4 {
  color: #425b76;
}
.w-btn-white-4::after {
  background: #1c7df8;
}
.w-btn-white-4:hover {
  background: #1c7df8;
  border-color: #1c7df8;
  color: #ffffff;
}
.w-btn-2 {
  height: 54px;
  line-height: 50px;
  padding: 0 10px;
  font-size: 18px;
  width: 140px;
}
.w-btn-3 {
  padding: 0 25px;
}
.w-btn-4 {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #ffffff;
  color: #7127ea;
}
.w-btn-4::after {
  background: #7127ea;
}
.w-btn-4:hover {
  color: #ffffff;
}
.w-btn-5 {
  padding: 0 48px;
}
.w-btn-6 {
  height: 50px;
  line-height: 46px;
}
.w-btn-7 {
  padding: 0 22px;
}
.w-btn-8 {
  color: #2f80ed;
  background: #ffffff;
  border-color: #ffffff;
  height: 46px;
  line-height: 42px;
  padding: 0 30px;
}
.w-btn-8::after {
  background: #2f80ed;
}
.w-btn-8:hover {
  border-color: #2f80ed;
  color: #ffffff;
}
.w-btn-9 {
  padding-left: 35px;
  padding-right: 35px;
}
.w-btn-10 {
  height: 46px;
  line-height: 42px;
  padding: 0 20px;
  color: #5d41c2;
  border-color: #5d41c2;
  background: #ffffff;
}
.w-btn-10::after {
  background: #ffffff;
}
.w-btn-10:hover {
  color: #ffffff;
}
.w-btn-10:hover::after {
  background: #5d41c2;
}
.w-btn-11 {
  height: 40px;
  line-height: 36px;
  padding: 0 17px;
  background: #1c7df8;
  border-color: #1c7df8;
}
.w-btn-11:hover {
  border-color: #1c7df8;
  color: #1c7df8;
}
.w-btn-12 {
  padding-left: 14px;
  padding-right: 14px;
}
.w-btn-13 {
  border-color: #1c7df8;
  color: #1c7df8;
  background: #ffffff;
}
.w-btn-13::after {
  background: #1c7df8;
}
.w-btn-13:hover {
  color: #ffffff;
}
.w-btn-14 {
  padding-left: 26px;
  padding-right: 26px;
}
.w-btn-blue {
  border-color: #2f80ed;
  background: #2f80ed;
}
.w-btn-blue-header {
  height: 40px;
  padding: 0 20px;
  line-height: 40px;
  background: rgba(47, 128, 237, 0.08);
  color: #2f80ed;
  border: none;
}
.w-btn-blue::after {
  background: #ffffff;
}
.w-btn-blue:hover {
  color: #2f80ed;
}
.w-btn-blue-2 {
  background: #ffffff;
  color: #2f80ed;
  border-color: #2f80ed;
}
.w-btn-blue-2::after {
  background: #2f80ed;
}
.w-btn-blue-2:hover {
  border-color: #2f80ed;
  color: #ffffff;
}
.w-btn-blue-5 {
  background: #1c7df8;
  color: #ffffff;
  border-color: #1c7df8;
}
.w-btn-blue-5:hover {
  color: #1c7df8;
  background: #ffffff;
}
.w-btn-purple {
  background: #5d41c2;
  border-color: #5d41c2;
  color: #ffffff;
}
.w-btn-purple:hover {
  color: #5d41c2;
}
.w-btn-purple-2 {
  background: #ffffff;
  color: #5d41c2;
}
.w-btn-purple-2:hover {
  color: #ffffff;
}
.w-btn-purple-2:hover::after {
  background: #5d41c2;
}
.w-btn-round {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: #6c63ff;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  height: 50px;
  line-height: 50px;
  padding: 0 32px;
  text-transform: capitalize;
  text-align: center;
}
.w-btn-round:hover {
  background: #0f1432;
  color: #ffffff;
}
.w-btn-round-header {
  height: 40px;
  line-height: 40px;
}
.w-btn-round-2 {
  background: rgba(108, 99, 255, 0.14);
  color: #6c63ff;
}
.w-btn-round-2:hover {
  background: #0f1432;
  color: #ffffff;
}
.w-btn-round-border {
  background: #ffffff;
  border: 2px solid #6c63ff;
  line-height: 46px;
  color: #6c63ff;
}
.w-btn-round-border:hover {
  background: #6c63ff;
  color: #ffffff;
}
.w-btn-header {
  font-size: 15px;
  font-weight: 600;
  color: #0f1432;
  text-transform: capitalize;
}
.w-btn-header:hover {
  color: #6c63ff;
}
.w-btn-1::after {
  display: none;
}
.w-btn-1:hover {
  color: #ffffff;
}
.w-btn-1-3::after {
  display: none;
}
.w-btn-1-3:hover {
  color: #ffffff;
}
.w-btn-1-5::after {
  display: none;
}
.w-btn-1-5:hover {
  background: #1c7df8;
  color: #ffffff;
}

.link-btn {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  text-transform: capitalize;
  color: #0a0030;
}
.link-btn i {
  font-size: 18px;
  position: absolute;
  right: 10px;
  top: 58%;
  -webkit-transform: translateX(10px) translateY(-50%);
  -moz-transform: translateX(10px) translateY(-50%);
  -ms-transform: translateX(10px) translateY(-50%);
  transform: translateX(10px) translateY(-50%);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -ms-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}
.link-btn:hover {
  color: #5d41c2;
}
.link-btn:hover > i {
  right: -14px;
  opacity: 1;
  visibility: visible;
}

.pulse-play {
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 84px;
  text-align: center;
  color: #1c7df8;
  font-size: 30px;
  background: #ffffff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-animation: pulse 2s infinite;
  -moz-animation: pulse 2s infinite;
  -o-animation: pulse 2s infinite;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
/* section title */
.section__pre-title {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  padding: 0 22px;
  font-size: 14px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  margin-bottom: 19px;
  text-transform: capitalize;
  background: #2f80ed;
  color: #ffffff;
}
.section__pre-title.purple {
  background: rgba(200, 84, 255, 0.14);
  color: #8f16c9;
}
.section__pre-title.pink {
  color: #e50351;
  background: rgba(253, 75, 133, 0.1);
}
.section__pre-title.blue {
  color: #116ae1;
  background: rgba(47, 128, 237, 0.1);
}
.section__pre-title-img {
  display: inline-block;
  margin-bottom: 18px;
}
.section__title {
  font-size: 25px;
  font-weight: 800;
  color: #070337;
  margin-bottom: 25px;
}
.section__title-2 {
  color: #021937;
  margin-bottom: 15px;
  line-height: 1.3;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .section__title-2 {
    font-size: 30px;
  }
}
.section__title-3 {
  color: #0a0030;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section__title-3 {
    font-size: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .section__title-3 {
    font-size: 29px;
  }
}
.section__title-4 {
  font-size: 46px;
  color: #0f1432;
  font-weight: 700;
  margin-bottom: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section__title-4 {
    font-size: 43px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .section__title-4 {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  .section__title-4 {
    font-size: 24px !important;
  }
}
.section__title-4-p {
  padding-left: 95px;
  padding-right: 95px;
}
.section__title-4-p-2 {
  padding-left: 95px;
  padding-right: 95px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .section__title-4-p-2 {
    padding-left: 70px;
    padding-right: 70px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .section__title-4-p-2 {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (max-width: 575px) {
  .section__title-4-p-2 {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 575px) {
  .section__title {
    font-size: 27px;
  }
}
.section__title-5 {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section__title-5 {
    font-size: 45px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section__title-5 {
    font-size: 37px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .section__title-5 {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  .section__title-5 {
    font-size: 28px;
  }
}
.section__title-5-p {
  padding-left: 40px;
  padding-right: 40px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .section__title-5-p {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 575px) {
  .section__title-5-p {
    padding-left: 0;
    padding-right: 0;
  }
}
.section__title-wrapper-2 p {
  font-weight: 600;
}
.section__title-wrapper-3 p {
  color: #625e6e;
  font-weight: 600;
}
.section__title-wrapper-4 p {
  font-size: 15px;
  font-weight: 600;
  color: #57556a;
}
.section__title-wrapper-5 p {
  color: #545b65;
  font-weight: 400;
}
.section__title-wrapper-5-p p {
  padding-left: 80px;
  padding-right: 80px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .section__title-wrapper-5-p p {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (max-width: 575px) {
  .section__title-wrapper-5-p p {
    padding-left: 0px;
    padding-right: 0px;
  }
}
.section__title-white .section__title-5, .section__title-white .section__title-4 {
  color: #ffffff;
}
.section__title-white p {
  color: #ffffff;
}

/* gradient backgrounds */
.gradient-pink {
  background-image: -moz-linear-gradient(90deg, #fe0c7d 0%, #ff58a8 53%, #ffa4d2 100%);
  background-image: -webkit-linear-gradient(90deg, #fe0c7d 0%, #ff58a8 53%, #ffa4d2 100%);
  background-image: -ms-linear-gradient(90deg, #fe0c7d 0%, #ff58a8 53%, #ffa4d2 100%);
  background-image: linear-gradient(90deg, #fe0c7d 0%, #ff58a8 53%, #ffa4d2 100%);
  -webkit-box-shadow: 0px 20px 16px 0px rgba(254, 12, 125, 0.16);
  -moz-box-shadow: 0px 20px 16px 0px rgba(254, 12, 125, 0.16);
  box-shadow: 0px 20px 16px 0px rgba(254, 12, 125, 0.16);
}

.gradient-blue {
  background-image: -moz-linear-gradient(90deg, #023cfd 0%, #0372fe 53%, #03a7ff 100%);
  background-image: -webkit-linear-gradient(90deg, #023cfd 0%, #0372fe 53%, #03a7ff 100%);
  background-image: -ms-linear-gradient(90deg, #023cfd 0%, #0372fe 53%, #03a7ff 100%);
  background-image: linear-gradient(90deg, #023cfd 0%, #0372fe 53%, #03a7ff 100%);
  -webkit-box-shadow: 0px 20px 16px 0px rgba(2, 60, 253, 0.16);
  -moz-box-shadow: 0px 20px 16px 0px rgba(2, 60, 253, 0.16);
  box-shadow: 0px 20px 16px 0px rgba(2, 60, 253, 0.16);
}

.gradient-blue-2 {
  background: linear-gradient(90deg, #07408e 20%, #2f80ed 100%);
}

.gradient-yellow {
  background-image: -moz-linear-gradient(90deg, #e69303 0%, #f3b704 53%, #ffda04 100%);
  background-image: -webkit-linear-gradient(90deg, #e69303 0%, #f3b704 53%, #ffda04 100%);
  background-image: -ms-linear-gradient(90deg, #e69303 0%, #f3b704 53%, #ffda04 100%);
  background-image: linear-gradient(90deg, #e69303 0%, #f3b704 53%, #ffda04 100%);
  -webkit-box-shadow: 0px 20px 16px 0px rgba(246, 157, 3, 0.16);
  -moz-box-shadow: 0px 20px 16px 0px rgba(246, 157, 3, 0.16);
  box-shadow: 0px 20px 16px 0px rgba(246, 157, 3, 0.16);
}

.gradient-purple {
  background-image: -moz-linear-gradient(90deg, #6a2fff 0%, #8c3dff 53%, #ae4aff 100%);
  background-image: -webkit-linear-gradient(90deg, #6a2fff 0%, #8c3dff 53%, #ae4aff 100%);
  background-image: -ms-linear-gradient(90deg, #6a2fff 0%, #8c3dff 53%, #ae4aff 100%);
  background-image: linear-gradient(90deg, #6a2fff 0%, #8c3dff 53%, #ae4aff 100%);
  -webkit-box-shadow: 0px 20px 16px 0px rgba(106, 47, 255, 0.16);
  -moz-box-shadow: 0px 20px 16px 0px rgba(106, 47, 255, 0.16);
  box-shadow: 0px 20px 16px 0px rgba(106, 47, 255, 0.16);
}

.circle-animation {
  border: 1px solid rgba(113, 39, 234, 0.14);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  z-index: -1;
}
.circle-animation span {
  display: block;
  position: absolute;
  content: "";
  top: calc( 50% - 1px);
  left: 50%;
  width: 50%;
  height: 1px;
  background: transparent;
  transform-origin: left;
  -webkit-animation: circle-animation 3s linear infinite;
  -moz-animation: circle-animation 3s linear infinite;
  -o-animation: circle-animation 3s linear infinite;
  animation: circle-animation 3s linear infinite;
}
.circle-animation span::before {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  top: -4px;
  right: -4px;
}
.circle-animation.testimonial {
  top: 21%;
  left: 11%;
  border: 1px solid rgba(113, 39, 234, 0.14);
  width: 270px;
  height: 270px;
}
.circle-animation.testimonial span::before {
  background: #7127ea;
}
.circle-animation.features {
  top: -5%;
  right: -440px;
  border: 1px solid rgba(34, 34, 34, 0.2);
  width: 560px;
  height: 560px;
}
.circle-animation.features span {
  -webkit-animation: circle-animation 5s linear infinite;
  -moz-animation: circle-animation 5s linear infinite;
  -o-animation: circle-animation 5s linear infinite;
  animation: circle-animation 5s linear infinite;
}
.circle-animation.features span::before {
  background: transparent;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #30edfe;
  top: -12px;
  right: -12px;
}
.circle-animation.cta-1 {
  top: -77%;
  left: 0%;
  border: 1px solid rgba(18, 129, 255, 0.14);
  width: 270px;
  height: 270px;
}
.circle-animation.cta-1 span {
  -webkit-animation: circle-animation 5s linear infinite;
  -moz-animation: circle-animation 5s linear infinite;
  -o-animation: circle-animation 5s linear infinite;
  animation: circle-animation 5s linear infinite;
}
.circle-animation.cta-1 span::before {
  background: transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fe238b;
  top: -10px;
  right: -10px;
}
.circle-animation.cta-1.cta-2 {
  top: -23%;
  left: 8%;
}
.circle-animation.cta-1.cta-2 span {
  -webkit-animation: circle-animation 12s linear infinite;
  -moz-animation: circle-animation 12s linear infinite;
  -o-animation: circle-animation 12s linear infinite;
  animation: circle-animation 12s linear infinite;
}
.circle-animation.cta-1.cta-2 span::before {
  background: transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #1281ff;
  top: -10px;
  right: -10px;
}
.circle-animation.cta-3 {
  top: -29%;
  right: 13%;
  border: 1px solid rgba(18, 129, 255, 0.14);
  width: 270px;
  height: 270px;
}
.circle-animation.cta-3 span {
  -webkit-animation: circle-animation 6s linear infinite;
  -moz-animation: circle-animation 6s linear infinite;
  -o-animation: circle-animation 6s linear infinite;
  animation: circle-animation 6s linear infinite;
}
.circle-animation.cta-3 span::before {
  background: #f1b004;
  width: 16px;
  height: 16px;
  top: -8px;
  right: -8px;
}

@keyframes circle-animation {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.basic-pagination ul li {
  display: inline-block;
}
.basic-pagination ul li:first-child {
  margin-right: 5px;
}
.basic-pagination ul li:not(:first-child) {
  margin: 0 5px;
}
@media (max-width: 575px) {
  .basic-pagination ul li {
    margin-bottom: 10px;
  }
}
.basic-pagination ul li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #f2f7ff;
  color: #6a727f;
  font-weight: 700;
  font-size: 15px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.basic-pagination ul li a:hover {
  background: #1c7df8;
  color: #ffffff;
}
.basic-pagination ul li.active a {
  background: #1c7df8;
  color: #ffffff;
}

/*----------------------------------------*/
/*  02. HEADER CSS START
/*----------------------------------------*/
.header__area.sticky, .header__bottom.sticky {
  left: 0;
  margin: auto;
  position: fixed !important;
  top: 0;
  width: 100%;
  box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
  z-index: 99;
  -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
  animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
  -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
  background: #ffffff;
}
.header__transparent {
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  width: 100%;
  z-index: 11;
  padding: 21px;
}
.header__right a.login {
  font-size: 15px;
  color: #070337;
}
.header__right a.login:hover {
  color: #7127ea;
}
.header__border {
  border-top: 4px solid #f385df;
}
.header__border-bottom {
  border-bottom: 1px solid #f1f1f3;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__padding {
    padding: 25px 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header__padding {
    padding: 15px 0;
  }
}
@media (max-width: 575px) {
  .header__padding {
    padding: 15px 0;
  }
}
.header__shadow {
  -webkit-box-shadow: 0px 30px 40px 0px rgba(10, 0, 48, 0.2);
  -moz-box-shadow: 0px 30px 40px 0px rgba(10, 0, 48, 0.2);
  box-shadow: 0px 30px 40px 0px rgba(10, 0, 48, 0.2);
  position: relative;
  z-index: 9;
}
.header__shadow-2 {
  -webkit-box-shadow: 0px 10px 20px 0px rgba(3, 1, 30, 0.06);
  -moz-box-shadow: 0px 10px 20px 0px rgba(3, 1, 30, 0.06);
  box-shadow: 0px 10px 20px 0px rgba(3, 1, 30, 0.06);
}
.header__info a {
  color: #6d737a;
  font-size: 13px;
  font-weight: 600;
}
.header__info a:not(:last-child) {
  margin-right: 20px;
}
.header__info a:hover {
  color: #1c7df8;
}
.header__info a i {
  color: #1c7df8;
  padding-right: 3px;
  display: inline-block;
}
.header__info a i.w-phone {
  -webkit-animation: phoneShake 1s linear infinite;
  -moz-animation: phoneShake 1s linear infinite;
  -o-animation: phoneShake 1s linear infinite;
  animation: phoneShake 1s linear infinite;
}
.header__social h5 {
  font-size: 13px;
  font-weight: 600;
  color: #6d737a;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 0;
}
.header__social ul {
  display: inline-block;
}
.header__social ul li {
  display: inline-block;
}
.header__social ul li:not(:last-child) {
  margin-right: 15px;
}
.header__social ul li a {
  font-size: 13px;
  color: #6d737a;
}
.header__social ul li a:hover {
  color: #1c7df8;
}
.header__search a {
  font-size: 17px;
  color: #011224;
}
.header__btn {
  font-size: 15px;
  font-weight: 600;
  color: #070337;
  text-transform: capitalize;
}
.header__btn:hover {
  color: #7127ea;
}

@keyframes phoneShake {
  0%, 100% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20%, 40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  50% {
    transform: rotate(0) scale(1) skew(1deg);
  }
}
/* main menu css */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu {
    padding-left: 40px;
  }
}
.main-menu ul li {
  display: inline-block;
  position: relative;
}
.main-menu ul li:not(:last-child) {
  margin-right: 22px;
  /* margin-left: 22px; */
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu ul li:not(:last-child) {
    margin-right: 25px;
  }
}
.main-menu ul li.has-dropdown > a {
  position: relative;
}
/* .main-menu ul li.has-dropdown > a::after {
  content: "";
  -webkit-transform: translateY(1px);
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  transform: translateY(1px);
  font-size: 14px;
  color: white;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  margin-left: 5px;
  display: inline-block;
} */
.main-menu ul li a {
  font-size: 13px;
  font-weight: 600;
  color: white;
  display: block;
  /* padding: 35px 0; */
}
.main-menu ul li:hover > a {
  color: #7127ea;
}
.main-menu ul li:hover > a::after {
  color: #7127ea;
}
.main-menu ul li:hover .submenu {
  top: 100%;
  visibility: visible;
  opacity: 1;
}
.main-menu ul li .submenu {
  position: absolute;
  top: 120%;
  left: 0;
  width: 300px;
  background: #ffffff;
  z-index: 99;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  visibility: hidden;
  opacity: 0;
  -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
}
.main-menu ul li .submenu li {
  display: block;
  width: 100%;
}
.main-menu ul li .submenu li:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.main-menu ul li .submenu li.has-dropdown > a::after {
  right: 25px;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.main-menu ul li .submenu li a {
  padding: 10px 25px;
  font-size: 13px;
  position: relative;
  z-index: 1;
  color: #000;
}
.main-menu ul li .submenu li a::before {
  position: absolute;
  content: "";
  top: 0;
  left: auto;
  right: 0;
  width: 0;
  height: 100%;
  background: #7127ea;
  z-index: -1;
}
.main-menu ul li .submenu li .submenu {
  left: 120%;
  top: 0;
  visibility: hidden;
  opacity: 0;
}
.main-menu ul li .submenu li:hover > a {
  color: #ffffff;
}
.main-menu ul li .submenu li:hover > a::after {
  color: #ffffff;
}
.main-menu ul li .submenu li:hover > a::before {
  left: 0;
  right: auto;
  width: 100%;
}
.main-menu ul li .submenu li:hover .submenu {
  left: 100%;
  visibility: visible;
  opacity: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu-2 {
    padding-left: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu-2 ul li:not(:last-child) {
    margin-right: 19px;
  }
}
.main-menu-2 ul li a {
  padding: 28px 0;
  padding-bottom: 32px;
}
.main-menu-2 ul li:hover > a {
  color: #2f80ed;
}
.main-menu-2 ul li:hover > a::after {
  color: #2f80ed;
}
.main-menu-2 ul li .submenu li a::before {
  background: #2f80ed;
}
.main-menu-3 ul li:not(:last-child) {
  margin-right: 35px;
}
.main-menu-3 ul li a {
  color: #0a0030;
  padding: 25px 0;
  padding-bottom: 29px;
}
.main-menu-3 ul li:hover > a {
  color: #5d41c2;
}
.main-menu-3 ul li:hover > a::after {
  color: #5d41c2;
}
.main-menu-3 ul li .submenu li a::before {
  background: #5d41c2;
}
.main-menu-4 ul li a {
  color: #0f1432;
  padding: 30px 0;
  padding-bottom: 33px;
}
.main-menu-4 ul li:hover > a {
  color: #6c63ff;
}
.main-menu-4 ul li:hover > a::after {
  color: #6c63ff;
}
.main-menu-4 ul li .submenu li a::before {
  background: #6c63ff;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .main-menu-5 {
    margin-left: 70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu-5 {
    margin-left: 0px;
  }
}
.main-menu-5 ul li:not(:last-child) {
  margin-right: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu-5 ul li:not(:last-child) {
    margin-right: 25px;
  }
}
.main-menu-5 ul li a {
  color: #011224;
  padding: 27px 0;
  padding-bottom: 31px;
}
.main-menu-5 ul li:hover > a {
  color: #1c7df8;
}
.main-menu-5 ul li:hover > a::after {
  color: #1c7df8;
}
.main-menu-5 ul li .submenu li a::before {
  background: #1c7df8;
}

/* sidebar area start */
.sidebar__area {
  position: fixed;
  right: -340px;
  top: 0;
  width: 320px;
  height: 100%;
  background: #ffffff none repeat scroll 0 0;
  overflow-y: scroll;
  -webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  z-index: 9999;
}
.sidebar__area.sidebar-opened {
  right: 0px;
}
.sidebar__wrapper {
  position: relative;
  background: white;
  padding: 3px;
}
.sidebar__content .logo img{
  top: 23px;
    position: relative;
    left: 20px;
}
.sidebar__close {
  position: absolute;
  top: 30px;
  right: 71px;
  font-size: 23px;
}
.sidebar__close-btn {
  transition: all 450ms cubic-bezier(0.4, 0.25, 0.3, 1.3);
  width: 40px;
  height: 40px;
  position: absolute;
  text-align: center;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  border: 1px solid rgb(104 101 101 / 90%);
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  z-index: 99;
}
.sidebar__close-btn:focus {
  border: 1px solid #222222;
}
.sidebar__close-btn span {
  transition: all 400ms cubic-bezier(0.4, 0.25, 0.3, 1.3) 100ms;
  position: absolute;
  top: 47%;
  left: 50%;
  font-size: 14px;
  font-weight: 900;
  line-height: 40px;
  vertical-align: middle;
}
.sidebar__close-btn span:first-of-type {
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
.sidebar__close-btn span:last-of-type {
  text-transform: uppercase;
  transform: translate(-50%, 50%);
  -webkit-transform: translate(-50%, 50%);
  -moz-transform: translate(-50%, 50%);
  -ms-transform: translate(-50%, 50%);
  -o-transform: translate(-50%, 50%);
}
.sidebar__close-btn:hover {
  width: 80px;
  border-radius: 0;
}
.sidebar__close-btn:hover span:first-of-type {
  transform: translate(-50%, -150%);
  -webkit-transform: translate(-50%, -150%);
  -moz-transform: translate(-50%, -150%);
  -ms-transform: translate(-50%, -150%);
  -o-transform: translate(-50%, -150%);
}
.sidebar__close-btn:hover span:last-of-type {
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sidebar-toggle-btn {
    margin-left: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sidebar-toggle-btn {
    margin-left: 30px;
  }
}
@media (max-width: 575px) {
  .sidebar-toggle-btn {
    margin-left: 30px;
  }
}
.sidebar-toggle-btn .line {
  width: 30px;
  height: 3px;
  background-color: #b8a041;
  display: block;
  margin: 6px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.sidebar-toggle-btn:hover {
  cursor: pointer;
}
.sidebar-toggle-btn:hover .line {
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.sidebar-toggle-btn:hover .line:nth-child(1) {
  width: 10px;
}
.sidebar-toggle-btn:hover .line:nth-child(2) {
  width: 20px;
}
.sidebar-toggle-btn-2 .line {
  background-color: #2f80ed;
}
.sidebar-toggle-btn-2 .line {
  background-color: #5d41c2;
}
.sidebar-toggle-btn-5 .line {
  background-color: #1c7df8;
}

.body-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.body-overlay.opened {
  opacity: 1;
  visibility: visible;
}

.search-form {
  position: fixed;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .search-form {
    width: 80%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .search-form {
    width: 80%;
  }
}
@media (max-width: 575px) {
  .search-form {
    width: 80%;
  }
}

.search-form input {
  width: 100%;
  height: 60px;
  line-height: 60px;
  border: 2px solid #ffffff;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-color: transparent;
  padding-left: 30px;
  padding-right: 65px;
  font-size: 14px;
  color: #ffffff;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.search-form input::placeholder {
  color: #ffffff;
  font-weight: 600;
}

.search-form input:focus {
  border-color: #1c7df8;
  outline: none;
}

.search-form .search-btn {
  position: absolute;
  top: 0;
  right: 10px;
  width: 50px;
  height: 100%;
  text-align: center;
  line-height: 60px;
  background-color: transparent;
  color: #ffffff;
  font-size: 18px;
}
.search-form .search-btn:hover {
  cursor: pointer;
  color: #1c7df8;
}

.search-close {
  position: absolute;
  top: -250px;
  right: -150px;
  color: #ffffff;
  font-size: 25px;
  z-index: 9999;
}
.search-close:hover {
  color: #1c7df8;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .search-close {
    right: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .search-close {
    right: 0;
  }
}
@media (max-width: 575px) {
  .search-close {
    right: 0;
  }
}

.search-wrapper.search-open .search-form {
  top: 50%;
  opacity: 1;
  visibility: visible;
}

/* mean menu customize */
.mean-container a.meanmenu-reveal {
  display: none;
}

.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}

.mean-container .mean-bar {
  padding: 0;
  min-height: auto;
  background: none;
}

.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}

.mean-container a.meanmenu-reveal {
  display: none !important;
}

.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 10px 10px;
  color: #222222;
  border-top: 1px solid #dedee3;
  font-size: 10px;
  font-weight: 600;
}

.mean-container .mean-nav ul li a:hover {
  color: #7127ea;
  letter-spacing: 2px;
}

.mobile-menu-2.mean-container .mean-nav ul li a:hover {
  color: #2f80ed;
}

.mobile-menu-3.mean-container .mean-nav ul li a:hover {
  color: #5d41c2;
}

.mobile-menu-5.mean-container .mean-nav ul li a:hover {
  color: #1c7df8;
}

.mean-container .mean-nav ul li a.mean-expand {
  margin-top: 2px;
  height: 15px;
  line-height: 14px;
  border-bottom: none;
  padding: 0;
  display: inline-block;
  width: 40px;
  height: 44px;
  line-height: 44px;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
  color: #222222;
}

.mean-container .mean-nav > ul > li:first-child > a {
  border-top: 0;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked {
  color: #222222;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  color: #222222;
}

/*----------------------------------------*/
/*  03. HERO CSS START
/*----------------------------------------*/
.hero__area {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.hero__bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.hero__height {
  min-height: 630px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__height {
    min-height: 850px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__height {
    min-height: 509px;
  }
  .hero__title {
    font-size: 28px !important;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__height {
    min-height: 1250px;
  }
}
@media (max-width: 575px) {
  .hero__height {
    min-height: 500px;
  }
}
.hero__height-2 {
  min-height: 757px;
}
.hero__height-3 {
  min-height: 870px;
}
.hero__height-4 {
  min-height: 860px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__height-4 {
    min-height: 700px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__height-4 {
    min-height: 1200px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__height-4 {
    min-height: 1200px;
  }
}
@media (max-width: 575px) {
  .hero__height-4 {
    min-height: 1000px;
  }
}
.hero__height-5 {
  min-height: 830px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__height-5 {
    min-height: 1250px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__height-5 {
    min-height: 1100px;
  }
}
@media (max-width: 575px) {
  .hero__height-5 {
    min-height: 850px;
  }
}
.hero__title {
  font-size: 70px;
  font-weight: 700;
  line-height: 1.14;
  color: white;
  margin-bottom: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__title {
    font-size: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__title {
    font-size: 53px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__title {
    font-size: 52px;
  }
}
@media (max-width: 575px) {
  .hero__title {
    font-size: 22px;
  }
}
.hero__title-2 {
  font-size: 60px;
  color: #021937;
  font-weight: 800;
  margin-bottom: 20px;
  text-transform: capitalize;
}
@media (max-width: 575px) {
  .hero__title-2 {
    font-size: 35px;
  }
}
.hero__title-3 {
  font-size: 70px;
  line-height: 1.14;
  color: #ffffff;
  margin-bottom: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__title-3 {
    font-size: 55px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__title-3 {
    font-size: 34px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__title-3 {
    font-size: 55px;
  }
}
@media (max-width: 575px) {
  .hero__title-3 {
    font-size: 35px;
  }
}
.hero__title-4 {
  font-size: 70px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__title-4 {
    font-size: 65px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__title-4 {
    font-size: 45px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__title-4 {
    font-size: 50px;
  }
}
@media (max-width: 575px) {
  .hero__title-4 {
    font-size: 32px;
  }
}
.hero__title-4 span {
  color: #6c63ff;
}
.hero__title-5 {
  font-size: 70px;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 15px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__title-5 {
    font-size: 63px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__title-5 {
    font-size: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__title-5 {
    font-size: 60px;
  }
}
@media (max-width: 575px) {
  .hero__title-5 {
    font-size: 35px;
  }
}
.hero__pre-title {
  font-size: 14px;
  color: #179d50;
  display: inline-block;
  height: 24px;
  line-height: 24px;
  padding: 0 20px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  background: rgba(39, 174, 96, 0.14);
  margin-bottom: 15px;
}
.hero__content {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__content {
    padding-right: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__content {
    padding-right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__content {
    padding-right: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__content {
    padding-right: 0;
  }
}
@media (max-width: 575px) {
  .hero__content {
    padding-right: 0;
  }
}
.hero__content p {
  font-size: 20px;
  line-height: 32px;
  color: #d7d7d9;
  margin-bottom: 45px;
}
@media (max-width: 575px) {
  .hero__content p {
    font-size: 16px;
  }
}
.hero__content-2 a:hover {
  -webkit-box-shadow: 0px 30px 40px 0px rgba(1, 24, 55, 0.16);
  -moz-box-shadow: 0px 30px 40px 0px rgba(1, 24, 55, 0.16);
  box-shadow: 0px 30px 40px 0px rgba(1, 24, 55, 0.16);
}
.hero__content-2 p {
  font-size: 17px;
  color: #52575e;
  margin-bottom: 45px;
}
.hero__content-3 {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__content-3 {
    padding-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__content-3 {
    padding-left: 45px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__content-3 {
    padding-left: 0;
  }
}
@media (max-width: 575px) {
  .hero__content-3 {
    padding-left: 0;
  }
}
.hero__content-3 p {
  font-size: 20px;
  line-height: 32px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  padding-right: 125px;
  margin-bottom: 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__content-3 p {
    padding-right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__content-3 p {
    padding-right: 0;
    font-size: 16px;
  }
}
@media (max-width: 575px) {
  .hero__content-3 p {
    padding-right: 0;
    font-size: 16px;
  }
}
.hero__content-4 {
  position: relative;
  z-index: 1;
}
@media (max-width: 575px) {
  .hero__content-4 {
    padding-right: 0;
  }
}
.hero__content-4 p {
  font-size: 16px;
  color: #5d5c72;
  padding-right: 80px;
  margin-bottom: 20px;
}
@media (max-width: 575px) {
  .hero__content-4 p {
    padding-right: 0;
  }
}
.hero__content-5 {
  position: relative;
  z-index: 1;
}
.hero__content-5 p {
  color: #ffffff;
  opacity: 0.7;
  font-size: 18px;
  line-height: 32px;
  padding-right: 35px;
  margin-bottom: 40px;
}
@media (max-width: 575px) {
  .hero__content-5 p {
    padding-right: 0;
    font-size: 16px;
    line-height: 1.5;
  }
}
.hero__content-5 .play-btn {
  font-size: 15px;
  color: #ffffff;
  font-weight: 600;
  display: inline-block;
}
@media (max-width: 575px) {
  .hero__content-5 .play-btn {
    margin-top: 15px;
  }
}
.hero__content-5 .play-btn span {
  padding-right: 15px;
}
.hero__content-5 .play-btn span i {
  display: inline-block;
  height: 40px;
  width: 40px;
  line-height: 38px;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  font-size: 20px;
  border: 1px solid #ffffff;
}
.hero__content-5 .play-btn:hover i {
  background: #ffffff;
  color: #1c7df8;
}
.hero__client ul li {
  display: inline-block;
}
.hero__client ul li:not(:last-child) {
  margin-right: 42px;
}
@media (max-width: 575px) {
  .hero__client ul li:not(:last-child) {
    margin-right: 20px;
  }
}
.hero__search input {
  width: 370px;
  height: 54px;
  line-height: 50px;
  padding: 0 23px;
  background: #ffffff;
  outline: none;
  border: 2px solid #ffffff;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0px 20px 60px 0px rgba(15, 0, 40, 0.14);
  -moz-box-shadow: 0px 20px 60px 0px rgba(15, 0, 40, 0.14);
  box-shadow: 0px 20px 60px 0px rgba(15, 0, 40, 0.14);
  margin-right: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__search input {
    width: 280px;
  }
}
@media (max-width: 575px) {
  .hero__search input {
    width: 280px;
  }
}
.hero__search input::placeholder {
  font-size: 15px;
  color: #8f959d;
}
.hero__search input:focus {
  border-color: #7127ea;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__search button {
    margin-top: 15px;
  }
}
@media (max-width: 575px) {
  .hero__search button {
    margin-top: 15px;
  }
}
.hero__search-info {
  margin-top: 20px;
}
.hero__search-info span {
  font-size: 14px;
  color: #5f5d72;
  margin-right: 30px;
}
.hero__search-info span i {
  padding-right: 6px;
}
@media (max-width: 575px) {
  .hero__search-info span {
    display: block;
    margin-top: 10px;
  }
}
.hero__shape img {
  position: absolute;
  z-index: 1;
}
.hero__shape img.hero-circle-1 {
  top: 19%;
  right: 0;
}
.hero__shape img.hero-circle-2 {
  top: 33%;
  right: 37%;
  -webkit-animation: hero-circle-2 4s linear 0s infinite alternate;
  -moz-animation: hero-circle-2 4s linear 0s infinite alternate;
  -o-animation: hero-circle-2 4s linear 0s infinite alternate;
  animation: hero-circle-2 4s linear 0s infinite alternate;
}
.hero__shape img.hero-triangle-1 {
  right: 7%;
  top: 14%;
  -webkit-animation: hero-triangle-1 6s linear infinite;
  -moz-animation: hero-triangle-1 6s linear infinite;
  -o-animation: hero-triangle-1 6s linear infinite;
  animation: hero-triangle-1 6s linear infinite;
}
.hero__shape img.hero-triangle-2 {
  left: 6%;
  top: 32%;
  -webkit-animation: hero-triangle-2 5s linear infinite;
  -moz-animation: hero-triangle-2 5s linear infinite;
  -o-animation: hero-triangle-2 5s linear infinite;
  animation: hero-triangle-2 5s linear infinite;
}
.hero__shape-2 img {
  position: absolute;
}
.hero__shape-2 img.hero-2-dot {
  left: 2%;
  top: 40%;
  -webkit-animation: hero-circle-2 4s linear 0s infinite alternate;
  -moz-animation: hero-circle-2 4s linear 0s infinite alternate;
  -o-animation: hero-circle-2 4s linear 0s infinite alternate;
  animation: hero-circle-2 4s linear 0s infinite alternate;
}
.hero__shape-2 img.hero-2-dot-2 {
  right: 7%;
  top: 14%;
  -webkit-animation: hero-circle-2 4s linear 0s infinite alternate;
  -moz-animation: hero-circle-2 4s linear 0s infinite alternate;
  -o-animation: hero-circle-2 4s linear 0s infinite alternate;
  animation: hero-circle-2 4s linear 0s infinite alternate;
}
.hero__shape-2 img.hero-2-flower {
  right: 2%;
  bottom: 12%;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__shape-2 img.hero-2-flower {
    bottom: -13%;
  }
}
@media (max-width: 575px) {
  .hero__shape-2 img.hero-2-flower {
    bottom: -13%;
  }
}
.hero__shape-2 img.hero-2-triangle {
  left: 2%;
  top: 12%;
  -webkit-animation: hero-triangle-2 5s linear infinite;
  -moz-animation: hero-triangle-2 5s linear infinite;
  -o-animation: hero-triangle-2 5s linear infinite;
  animation: hero-triangle-2 5s linear infinite;
}
.hero__shape-2 img.hero-2-triangle-2 {
  right: 7%;
  bottom: 50%;
  -webkit-animation: hero-triangle-2 5s linear infinite;
  -moz-animation: hero-triangle-2 5s linear infinite;
  -o-animation: hero-triangle-2 5s linear infinite;
  animation: hero-triangle-2 5s linear infinite;
}
.hero__shape-3 img {
  position: absolute;
}
.hero__shape-3 img.hero-3-dot {
  left: 7%;
  bottom: 31%;
  -webkit-animation: hero-3-dot 2s linear infinite alternate;
  -moz-animation: hero-3-dot 2s linear infinite alternate;
  -o-animation: hero-3-dot 2s linear infinite alternate;
  animation: hero-3-dot 2s linear infinite alternate;
}
.hero__shape-3 img.hero-3-circle {
  left: 7%;
  bottom: 31%;
}
.hero__shape-3 img.hero-3-circle-2 {
  left: 15%;
  top: 31%;
  -webkit-animation: hero-3-dot-4 2s linear infinite alternate;
  -moz-animation: hero-3-dot-4 2s linear infinite alternate;
  -o-animation: hero-3-dot-4 2s linear infinite alternate;
  animation: hero-3-dot-4 2s linear infinite alternate;
}
.hero__shape-3 img.hero-3-dot-3 {
  right: 6%;
  top: 12%;
  -webkit-animation: hero-3-dot 2s linear infinite alternate;
  -moz-animation: hero-3-dot 2s linear infinite alternate;
  -o-animation: hero-3-dot 2s linear infinite alternate;
  animation: hero-3-dot 2s linear infinite alternate;
}
.hero__shape-3 img.hero-3-dot-4 {
  bottom: 20%;
  right: 0;
  -webkit-animation: hero-3-dot-4 4s linear infinite alternate;
  -moz-animation: hero-3-dot-4 4s linear infinite alternate;
  -o-animation: hero-3-dot-4 4s linear infinite alternate;
  animation: hero-3-dot-4 4s linear infinite alternate;
}
.hero__shape-3 img.hero-3-triangle {
  top: 15%;
  left: 2%;
  -webkit-animation: hero-triangle-2 4s linear infinite alternate;
  -moz-animation: hero-triangle-2 4s linear infinite alternate;
  -o-animation: hero-triangle-2 4s linear infinite alternate;
  animation: hero-triangle-2 4s linear infinite alternate;
}
.hero__shape-4 img {
  position: absolute;
}
.hero__shape-4 img.smile {
  right: 10%;
  top: 31%;
}
.hero__shape-4 img.smile-2 {
  right: 35%;
  top: 17%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__shape-4 img.smile-2 {
    right: 13%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__shape-4 img.smile-2 {
    right: 9%;
  }
}
@media (max-width: 575px) {
  .hero__shape-4 img.smile-2 {
    top: 8%;
    right: 7%;
  }
}
.hero__shape-4 img.cross-1 {
  bottom: 30%;
  right: 16%;
  -webkit-animation: hero-triangle-1 4s linear infinite alternate;
  -moz-animation: hero-triangle-1 4s linear infinite alternate;
  -o-animation: hero-triangle-1 4s linear infinite alternate;
  animation: hero-triangle-1 4s linear infinite alternate;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__shape-4 img.cross-1 {
    right: 30%;
  }
}
.hero__shape-4 img.cross-2 {
  right: 19%;
  top: 16%;
  -webkit-animation: hero-triangle-1 4s linear infinite alternate;
  -moz-animation: hero-triangle-1 4s linear infinite alternate;
  -o-animation: hero-triangle-1 4s linear infinite alternate;
  animation: hero-triangle-1 4s linear infinite alternate;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__shape-4 img.cross-2 {
    top: 8%;
  }
}
@media (max-width: 575px) {
  .hero__shape-4 img.cross-2 {
    top: 9%;
  }
}
.hero__shape-4 img.cross-3 {
  right: 41%;
  top: 46%;
  -webkit-animation: hero-triangle-1 4s linear infinite alternate;
  -moz-animation: hero-triangle-1 4s linear infinite alternate;
  -o-animation: hero-triangle-1 4s linear infinite alternate;
  animation: hero-triangle-1 4s linear infinite alternate;
}
.hero__shape-4 img.dot-1 {
  right: 51%;
  bottom: 20%;
}
.hero__shape-4 img.dot-2 {
  left: 10%;
  top: 10%;
}
.hero__shape-4 img.dot-3 {
  left: 28%;
  top: 16%;
}
.hero__shape-5 img {
  position: absolute;
}
.hero__shape-5 img.hero-5-triangle-1 {
  left: 3%;
  top: 20%;
  -webkit-animation: hero-triangle-2 5s linear infinite;
  -moz-animation: hero-triangle-2 5s linear infinite;
  -o-animation: hero-triangle-2 5s linear infinite;
  animation: hero-triangle-2 5s linear infinite;
}
@media (max-width: 575px) {
  .hero__shape-5 img.hero-5-triangle-1 {
    top: 7%;
  }
}
.hero__shape-5 img.hero-5-triangle-2 {
  right: 1%;
  top: 44%;
  -webkit-animation: hero-triangle-2 5s linear infinite;
  -moz-animation: hero-triangle-2 5s linear infinite;
  -o-animation: hero-triangle-2 5s linear infinite;
  animation: hero-triangle-2 5s linear infinite;
}
.hero__shape-5 img.hero-5-line {
  right: 0%;
  top: 33%;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .hero__thumb {
    margin-left: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb {
    margin-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb {
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb {
    margin-left: 100px;
    margin-top: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb {
    margin-left: 80px;
    margin-top: 80px;
  }
}
@media (max-width: 575px) {
  .hero__thumb {
    margin-left: 0;
    margin-top: 80px;
  }
}
.hero__thumb-wrapper {
  z-index: 1;
  width: 570px;
  height: 570px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-wrapper {
    width: 500px;
    height: 500px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb-wrapper {
    width: 450px;
    height: 450px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-wrapper {
    width: 450px;
    height: 450px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-wrapper {
    width: 450px;
    height: 450px;
  }
}
@media (max-width: 575px) {
  .hero__thumb-wrapper {
    width: 290px;
    height: 290px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb-wrapper img {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-wrapper img {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-wrapper img {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .hero__thumb-wrapper img {
    width: 100%;
  }
}
.hero__thumb-wrapper img.hero-circle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0px 40px 80px 0px rgba(7, 26, 90, 0.12);
  -moz-box-shadow: 0px 40px 80px 0px rgba(7, 26, 90, 0.12);
  box-shadow: 0px 40px 80px 0px rgba(7, 26, 90, 0.12);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb-wrapper img.hero-circle {
    width: 100%;
  }
}
.hero__thumb-shape {
  position: absolute;
  -webkit-animation: hero-thumb-animation 2s linear infinite alternate;
  -moz-animation: hero-thumb-animation 2s linear infinite alternate;
  -o-animation: hero-thumb-animation 2s linear infinite alternate;
  animation: hero-thumb-animation 2s linear infinite alternate;
}
.hero__thumb-shape.shape-1 {
  top: 11px;
  right: 31px;
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  animation: none;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-shape.shape-1 {
    top: 30px;
    right: -75px;
  }
}
.hero__thumb-shape.shape-2 {
  top: 35px;
  right: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-shape.shape-2 {
    top: 70px;
    right: -70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb-shape.shape-2 {
    top: -2px;
    right: -15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-shape.shape-2 {
    width: 200px;
    height: auto;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-shape.shape-2 {
    width: 200px;
    height: auto;
  }
}
@media (max-width: 575px) {
  .hero__thumb-shape.shape-2 {
    width: 95px;
    height: auto;
  }
}
.hero__thumb-shape.shape-3 {
  top: 20px;
  left: -70px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-shape.shape-3 {
    top: 35px;
    left: -30px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-shape.shape-3 {
    top: -33px;
    left: -70px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb-shape.shape-3 {
    top: -20px;
    left: -31px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-shape.shape-3 {
    width: 150px;
    height: auto;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-shape.shape-3 {
    width: 150px;
    height: auto;
  }
}
@media (max-width: 575px) {
  .hero__thumb-shape.shape-3 {
    width: 80px;
    height: auto;
    left: 0;
  }
}
.hero__thumb-shape.shape-4 {
  bottom: -88px;
  left: -23px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-shape.shape-4 {
    bottom: -200px;
    left: 0px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb-shape.shape-4 {
    bottom: -118px;
    left: -23px;
  }
}
@media (max-width: 575px) {
  .hero__thumb-shape.shape-4 {
    bottom: -29px;
    left: -23px;
    width: 225px;
  }
}
.hero__thumb-shape.shape-5 {
  bottom: 115px;
  left: -220px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .hero__thumb-shape.shape-5 {
    display: none;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-shape.shape-5 {
    display: none;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb-shape.shape-5 {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-shape.shape-5 {
    left: -100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-shape.shape-5 {
    left: -100px;
  }
}
@media (max-width: 575px) {
  .hero__thumb-shape.shape-5 {
    left: auto;
    width: 100px;
    right: 0;
    bottom: -35px;
  }
}
.hero__thumb-inner {
  width: 550px;
  height: 400px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .hero__thumb-inner {
    margin-left: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-inner {
    margin-left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-inner {
    height: auto;
    width: auto;
    margin-left: 0;
  }
}
@media (max-width: 575px) {
  .hero__thumb-inner {
    height: auto;
    width: auto;
    margin-left: 0;
  }
}
.hero__thumb-inner img {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.12);
  -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.12);
  box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.12);
  -webkit-animation: hero-thumb-animation 2s linear infinite alternate;
  -moz-animation: hero-thumb-animation 2s linear infinite alternate;
  -o-animation: hero-thumb-animation 2s linear infinite alternate;
  animation: hero-thumb-animation 2s linear infinite alternate;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-inner img.hero-2-thumb {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .hero__thumb-inner img.hero-2-thumb {
    width: 100%;
  }
}
.hero__thumb-inner img.hero-2-girl {
  position: absolute;
  left: -100px;
  bottom: -23px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
@media (max-width: 575px) {
  .hero__thumb-inner img.hero-2-girl {
    display: none;
  }
}
.hero__thumb-inner img.hero-2-thumb-sm {
  position: absolute;
  left: 67px;
  bottom: -40px;
  -webkit-animation: hero-thumb-sm-animation 4s linear infinite alternate;
  -moz-animation: hero-thumb-sm-animation 4s linear infinite alternate;
  -o-animation: hero-thumb-sm-animation 4s linear infinite alternate;
  animation: hero-thumb-sm-animation 4s linear infinite alternate;
}
@media (max-width: 575px) {
  .hero__thumb-inner img.hero-2-thumb-sm {
    display: none;
  }
}
.hero__thumb-inner img.hero-2-thumb-sm-2 {
  position: absolute;
  right: -95px;
  bottom: 50px;
  -webkit-animation: hero-thumb-sm-2-animation 4s linear infinite alternate;
  -moz-animation: hero-thumb-sm-2-animation 4s linear infinite alternate;
  -o-animation: hero-thumb-sm-2-animation 4s linear infinite alternate;
  animation: hero-thumb-sm-2-animation 4s linear infinite alternate;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-inner img.hero-2-thumb-sm-2 {
    right: -30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-inner img.hero-2-thumb-sm-2 {
    right: -30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-inner img.hero-2-thumb-sm-2 {
    right: -30px;
  }
}
@media (max-width: 575px) {
  .hero__thumb-inner img.hero-2-thumb-sm-2 {
    display: none;
  }
}
.hero__thumb-inner img.hero-2-thumb-sm-3 {
  position: absolute;
  right: -35px;
  top: -70px;
  -webkit-animation: hero-thumb-sm-3-animation 4s linear infinite alternate;
  -moz-animation: hero-thumb-sm-3-animation 4s linear infinite alternate;
  -o-animation: hero-thumb-sm-3-animation 4s linear infinite alternate;
  animation: hero-thumb-sm-3-animation 4s linear infinite alternate;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-inner img.hero-2-thumb-sm-3 {
    right: 30px;
  }
}
@media (max-width: 575px) {
  .hero__thumb-inner img.hero-2-thumb-sm-3 {
    display: none;
  }
}
.hero__thumb-inner img.hero-2-circle {
  position: absolute;
  right: -200px;
  bottom: -135px;
  z-index: -1;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  animation: none;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .hero__thumb-inner img.hero-2-circle {
    right: -80px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-inner img.hero-2-circle {
    right: -30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-inner img.hero-2-circle {
    right: -30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-inner img.hero-2-circle {
    right: -30px;
  }
}
@media (max-width: 575px) {
  .hero__thumb-inner img.hero-2-circle {
    right: -10px;
  }
}
.hero__thumb-inner img.hero-2-circle-2 {
  position: absolute;
  right: 140px;
  top: -82px;
  z-index: -1;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  animation-duration: 2.5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-name: hero-bounce;
}
.hero__thumb-inner img.hero-2-leaf {
  position: absolute;
  right: -115px;
  top: -140px;
  z-index: -1;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-inner img.hero-2-leaf {
    right: -30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-inner img.hero-2-leaf {
    right: -30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-inner img.hero-2-leaf {
    right: -30px;
  }
}
@media (max-width: 575px) {
  .hero__thumb-inner img.hero-2-leaf {
    right: 0px;
  }
}
.hero__thumb-3 {
  position: relative;
  z-index: 1;
}
.hero__thumb-3 img.hero-phone {
  margin-left: -50px;
}
@media (max-width: 575px) {
  .hero__thumb-3 img.hero-phone {
    width: 100%;
  }
}
.hero__thumb-3 img.hero-3-gradient {
  position: absolute;
  right: 0;
  top: 90px;
  z-index: -1;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.hero__thumb-3 img.hero-3-dot-2 {
  position: absolute;
  top: 0;
  left: 65px;
  z-index: -1;
  -webkit-animation: hero-3-dot-2 2s linear infinite alternate;
  -moz-animation: hero-3-dot-2 2s linear infinite alternate;
  -o-animation: hero-3-dot-2 2s linear infinite alternate;
  animation: hero-3-dot-2 2s linear infinite alternate;
}
.hero__thumb-4-wrapper {
  margin-left: 77px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-4-wrapper {
    margin-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb-4-wrapper {
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-4-wrapper {
    margin-top: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-4-wrapper {
    margin-top: 60px;
  }
}
@media (max-width: 575px) {
  .hero__thumb-4-wrapper {
    margin-left: 30px;
    margin-top: 60px;
  }
}
.hero__thumb-4 img.girl {
  -webkit-animation: hero-thumb-animation 2s linear infinite alternate;
  -moz-animation: hero-thumb-animation 2s linear infinite alternate;
  -o-animation: hero-thumb-animation 2s linear infinite alternate;
  animation: hero-thumb-animation 2s linear infinite alternate;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .hero__thumb-4 img.girl {
    width: 100%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-4 img.girl {
    width: 100%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb-4 img.girl {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-4 img.girl {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-4 img.girl {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .hero__thumb-4 img.girl {
    width: 100%;
  }
}
.hero__thumb-4 img.flower {
  position: absolute;
  bottom: 0;
  right: -55%;
  -webkit-animation: hero-thumb-animation 2s linear infinite alternate;
  -moz-animation: hero-thumb-animation 2s linear infinite alternate;
  -o-animation: hero-thumb-animation 2s linear infinite alternate;
  animation: hero-thumb-animation 2s linear infinite alternate;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .hero__thumb-4 img.flower {
    right: -25%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-4 img.flower {
    right: -5%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb-4 img.flower {
    right: -5%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-4 img.flower {
    right: 2%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-4 img.flower {
    right: 2%;
  }
}
@media (max-width: 575px) {
  .hero__thumb-4 img.flower {
    display: none;
  }
}
.hero__thumb-5 {
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-5 {
    margin-top: 100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-5 {
    margin-top: 100px;
  }
}
@media (max-width: 575px) {
  .hero__thumb-5 {
    margin-top: 50px;
  }
}
.hero__thumb-5 img.hero-5-thumb {
  -webkit-border-radius: 51% 49% 77% 23%/65% 50% 50% 35%;
  -moz-border-radius: 51% 49% 77% 23%/65% 50% 50% 35%;
  border-radius: 51% 49% 77% 23%/65% 50% 50% 35%;
  -webkit-animation: hero-border 5s linear infinite alternate;
  -moz-animation: hero-border 5s linear infinite alternate;
  -o-animation: hero-border 5s linear infinite alternate;
  animation: hero-border 5s linear infinite alternate;
  margin-right: -107px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-5 img.hero-5-thumb {
    margin-right: 0;
    width: 100%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb-5 img.hero-5-thumb {
    margin-right: 0;
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-5 img.hero-5-thumb {
    margin-right: 0;
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-5 img.hero-5-thumb {
    margin-right: 0;
    width: 100%;
  }
}
@media (max-width: 575px) {
  .hero__thumb-5 img.hero-5-thumb {
    margin-right: 0;
    width: 100%;
  }
}
.hero__thumb-5 img.hero-5-shape {
  position: absolute;
  right: -130px;
  top: -30px;
  z-index: -1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero__thumb-5 img.hero-5-shape {
    right: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero__thumb-5 img.hero-5-shape {
    right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__thumb-5 img.hero-5-shape {
    right: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero__thumb-5 img.hero-5-shape {
    right: 0;
  }
}
@media (max-width: 575px) {
  .hero__thumb-5 img.hero-5-shape {
    display: none;
  }
}
.hero__app ul li {
  display: inline-block;
  margin-right: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__app ul li {
    margin-bottom: 30px;
  }
}
@media (max-width: 575px) {
  .hero__app ul li {
    margin-bottom: 30px;
  }
}
.hero__app ul li a {
  height: 60px;
  text-align: center;
  padding: 0 24px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(127, 108, 193, 0.1);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.hero__app ul li a:hover, .hero__app ul li a.active {
  background: #0a0030;
  border-color: #0a0030;
  -webkit-box-shadow: 0px 20px 30px 0px rgba(10, 0, 48, 0.3);
  -moz-box-shadow: 0px 20px 30px 0px rgba(10, 0, 48, 0.3);
  box-shadow: 0px 20px 30px 0px rgba(10, 0, 48, 0.3);
}
.hero__app-icon {
  margin-right: 15px;
}
.hero__app-icon i {
  font-size: 24px;
  color: #ffffff;
}
.hero__app-content h5 {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0;
}
.hero__app-content span {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}
.hero__features ul {
  margin-bottom: 18px;
}
.hero__features ul li {
  font-size: 15px;
  color: #0f1432;
  font-weight: 600;
  position: relative;
  padding-left: 24px;
  margin-bottom: 15px;
}
.hero__features ul li:not(:last-child) {
  margin-right: 40px;
}
.hero__features ul li::after {
  position: absolute;
  content: "N";
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 15px;
  color: #0f1432;
  font-family: "ElegantIcons";
}
@media (max-width: 575px) {
  .hero__btn-4 a {
    margin-bottom: 20px;
  }
}

@keyframes hero-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@keyframes hero-border {
  0% {
    -webkit-border-radius: 51% 49% 77% 23%/65% 50% 50% 35%;
    -moz-border-radius: 51% 49% 77% 23%/65% 50% 50% 35%;
    border-radius: 51% 49% 77% 23%/65% 50% 50% 35%;
  }
  100% {
    -webkit-border-radius: 30% 70% 28% 72%/53% 69% 31% 47%;
    -moz-border-radius: 30% 70% 28% 72%/53% 69% 31% 47%;
    border-radius: 30% 70% 28% 72%/53% 69% 31% 47%;
  }
}
@keyframes hero-thumb-animation {
  0% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes hero-3-dot-2 {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes hero-3-dot-4 {
  0% {
    transform: translateY(-40px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes hero-thumb-sm-animation {
  0% {
    -webkit-transform: translateY(-20px) translateX(50px);
    -moz-transform: translateY(-20px) translateX(50px);
    -ms-transform: translateY(-20px) translateX(50px);
    transform: translateY(-20px) translateX(50px);
  }
  100% {
    -webkit-transform: translateY(-20px) translateX(0px);
    -moz-transform: translateY(-20px) translateX(0px);
    -ms-transform: translateY(-20px) translateX(0px);
    transform: translateY(-20px) translateX(0px);
  }
}
@keyframes hero-thumb-sm-2-animation {
  0% {
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
  }
  100% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes hero-thumb-sm-3-animation {
  0% {
    -webkit-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    transform: translateX(-50px);
  }
  100% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@keyframes hero-3-dot {
  0% {
    -webkit-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    -ms-transform: translateX(-50px);
    transform: translateX(-50px);
  }
  100% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@keyframes heroImg {
  0% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes hero-heroImg {
  0% {
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@keyframes hero-circle-2 {
  0% {
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    transform: translateX(-100px);
  }
  100% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@keyframes hero-triangle-2 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes hero-triangle-1 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*----------------------------------------*/
/*  03. SERVICES CSS START
/*----------------------------------------*/
.services__item {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  position: relative;
  padding: 40px 50px;
  padding-bottom: 35px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .services__item {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.services__item.active, .services__item:hover {
  box-shadow: 0px 20px 60px 0px rgba(15, 0, 40, 0.2), inset 0px 3px 0px 0px rgba(113, 39, 234, 0.004);
}
.services__item-2 {
  padding: 50px 47px;
  padding-right: 70px;
  -webkit-box-shadow: 0px 40px 70px 0px rgba(1, 19, 44, 0.08);
  -moz-box-shadow: 0px 40px 70px 0px rgba(1, 19, 44, 0.08);
  box-shadow: 0px 40px 70px 0px rgba(1, 19, 44, 0.08);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  position: relative;
  z-index: 1;
}
.services__item-3 {
  padding: 40px 75px;
  -webkit-box-shadow: 0px 10px 60px 0px rgba(10, 0, 48, 0.08);
  -moz-box-shadow: 0px 10px 60px 0px rgba(10, 0, 48, 0.08);
  box-shadow: 0px 10px 60px 0px rgba(10, 0, 48, 0.08);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .services__item-3 {
    padding-left: 45px;
    padding-right: 45px;
  }
}
@media (max-width: 575px) {
  .services__item-3 {
    padding-left: 40px;
    padding-right: 40px;
  }
}
.services__item-3:hover {
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  transform: translateY(-20px);
}
.services__item-4 {
  padding: 40px 60px;
  -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .services__item-4 {
    padding-left: 35px;
    padding-right: 35px;
  }
}
@media (max-width: 575px) {
  .services__item-4 {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.services__item-5 {
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  padding: 20px 30px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.services__item-5:hover {
  background: #ffffff;
  border-color: #ffffff;
}
.services__item-5:hover .services__content-5 i {
  color: #011224;
}
.services__item-5:hover .services__title-5 {
  color: #011224;
}
.services__item-5:hover .services__more-5 i {
  color: #011224;
}
.services__inner {
  position: relative;
  z-index: 1;
}
.services__inner::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 10px;
  border-radius: 20px;
  background: #7127ea;
  height: 50%;
  z-index: -1;
}
.services__inner:hover::before, .services__inner.active::before {
  top: -3px;
}
.services__inner-2::before {
  background: #2f80ed;
}
.services__inner-2:hover::before, .services__inner-2.active::before {
  top: -3px;
}
.services__icon {
  min-height: 145px;
}
.services__icon-2 {
  margin-bottom: 22px;
}
.services__icon-3 {
  min-height: 157px;
  margin-bottom: 33px;
}
.services__thumb-4 {
  min-height: 160px;
}
.services__img-5 img {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.services__title {
  font-size: 18px;
  color: #070337;
}
.services__title a:hover {
  color: #7127ea;
}
.services__title-2 {
  font-size: 22px;
  color: #021937;
  margin-bottom: 13px;
}
.services__title-2 a:hover {
  color: #2f80ed;
}
.services__title-3 {
  color: #0a0030;
  font-size: 22px;
  margin-bottom: 10px;
}
.services__title-3:hover {
  color: #5d41c2;
}
.services__title-4 {
  color: #0f1432;
  font-size: 22px;
  padding-right: 215px;
  margin-bottom: 12px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .services__title-4 {
    padding-right: 180px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .services__title-4 {
    padding-right: 90px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .services__title-4 {
    padding-right: 0px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .services__title-4 {
    padding-right: 0px;
  }
}
@media (max-width: 575px) {
  .services__title-4 {
    padding-right: 0px;
  }
}
.services__title-4 a:hover {
  color: #6c63ff;
}
.services__title-5 {
  color: #ffffff;
  font-size: 20px;
  margin-bottom: 0;
}
.services__title-6 {
  font-size: 26px;
  font-weight: 700;
  color: #011224;
  margin-bottom: 15px;
}
.services__content p {
  font-size: 15px;
  line-height: 22px;
  margin-bottom: 0;
}
.services__content-2 p {
  margin-bottom: 0;
}
.services__content-3 p {
  font-size: 15px;
  font-weight: 600;
  color: #625e6e;
}
.services__content-4 {
  padding-top: 32px;
}
.services__content-4 p {
  font-size: 15px;
  font-weight: 600;
  color: #6c6a8a;
  margin-bottom: 20px;
  padding-right: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .services__content-4 p {
    padding-right: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .services__content-4 p {
    padding-right: 0px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .services__content-4 p {
    padding-right: 0px;
  }
}
@media (max-width: 575px) {
  .services__content-4 p {
    padding-right: 0px;
  }
}
.services__content-4 .link-btn:hover {
  color: #6c63ff;
}
.services__content-5 i {
  color: #ffffff;
  font-size: 18px;
  margin-right: 17px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .services__content-6 {
    padding-right: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .services__content-6 {
    padding-right: 0px;
  }
}
@media (max-width: 575px) {
  .services__content-6 {
    padding-right: 0px;
  }
}
.services__content-6 p {
  color: #6a727f;
  margin-bottom: 25px;
}
.services__shape img {
  position: absolute;
  z-index: -1;
}
.services__shape img.services-circle-1 {
  top: 8%;
  left: 0;
  opacity: 0.5;
}
@media (max-width: 575px) {
  .services__shape img.services-circle-1 {
    width: 100%;
  }
}
.services__shape img.services-circle-2 {
  top: 22%;
  right: 4%;
  -webkit-animation: services-circle-2 4s linear 0s infinite alternate;
  -moz-animation: services-circle-2 4s linear 0s infinite alternate;
  -o-animation: services-circle-2 4s linear 0s infinite alternate;
  animation: services-circle-2 4s linear 0s infinite alternate;
}
.services__shape img.services-dot {
  top: 5%;
  left: 0%;
  -webkit-animation: services-dot 4s linear infinite alternate;
  -moz-animation: services-dot 4s linear infinite alternate;
  -o-animation: services-dot 4s linear infinite alternate;
  animation: services-dot 4s linear infinite alternate;
}
.services__shape img.services-triangle {
  top: 14%;
  right: 6%;
  -webkit-animation: services-triangle 4s linear infinite alternate;
  -moz-animation: services-triangle 4s linear infinite alternate;
  -o-animation: services-triangle 4s linear infinite alternate;
  animation: services-triangle 4s linear infinite alternate;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .services__shape img.services-triangle {
    right: 7%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .services__shape img.services-triangle {
    right: 8%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .services__shape img.services-triangle {
    right: 10%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .services__shape img.services-triangle {
    right: 11%;
  }
}
@media (max-width: 575px) {
  .services__shape img.services-triangle {
    right: 28%;
  }
}
.services__shape-2 img {
  position: absolute;
}
.services__shape-2 img.services-2-circle {
  top: 12%;
  left: 0;
  opacity: 0.04;
}
.services__shape-2 img.services-2-circle-2 {
  top: 26%;
  left: 0;
  opacity: 0.06;
}
.services__more-5 a {
  display: inline-block;
  font-size: 24px;
  color: #ffffff;
}
.services__text h3 {
  font-size: 30px;
  margin-bottom: 15px;
}
.services__text p {
  margin-bottom: 45px;
}
.services__text p span {
  color: #7127ea;
  position: relative;
}
.services__text p span::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: #7127ea;
}
.services__text h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 1.5;
}
.services__list ul li {
  font-size: 16px;
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
}
.services__list ul li::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0px;
  font-family: "Font Awesome 5 Pro";
  font-size: 16px;
  color: #7127ea;
}
.services__widget {
  padding: 43px 40px;
  padding-bottom: 45px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .services__widget {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media (max-width: 575px) {
  .services__widget {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.services__widget-title h4 {
  font-size: 24px;
  margin-bottom: 20px;
}
.services__link ul li {
  margin-bottom: 15px;
}
.services__link ul li:last-child {
  margin-bottom: 0;
}
.services__link ul li a {
  padding-left: 20px;
  position: relative;
}
.services__link ul li a::after {
  position: absolute;
  content: "";
  left: 0;
  top: -2px;
  font-family: "Font Awesome 5 Pro";
  font-size: 16px;
  color: #7127ea;
}
.services__link ul li a:hover {
  color: #7127ea;
}
.services__link ul li a:hover::after {
  left: 5px;
}
.services__form input {
  width: 100%;
  height: 50px;
  border: 2px solid transparent;
  background: #ffffff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 0 20px;
  margin-bottom: 20px;
}
.services__form input::placeholder {
  color: #9b9aa4;
}
.services__form input:focus {
  border-color: #7127ea;
  outline: none;
}
.services__form input:focus::placeholder {
  opacity: 0;
}
.services__action {
  padding: 15px 30px;
  position: relative;
}
.services__action::after {
  position: absolute;
  content: "";
  top: auto;
  left: 0;
  bottom: 0;
  width: 3px;
  height: 0;
  background: #7127ea;
}
.services__action:hover::after {
  top: 0;
  bottom: auto;
  height: 100%;
}
.services__action a {
  margin-bottom: 0;
  display: block;
}
.services__action a i {
  color: #7127ea;
  padding-right: 15px;
}
.services__action a:hover {
  color: #7127ea;
}
@media (max-width: 575px) {
  .services__sidebar {
    margin-right: 0;
  }
}

@keyframes services-triangle {
  0% {
    -webkit-transform: rotate(0deg) translateX(-50px);
    -moz-transform: rotate(0deg) translateX(-50px);
    -ms-transform: rotate(0deg) translateX(-50px);
    transform: rotate(0deg) translateX(-50px);
  }
  100% {
    -webkit-transform: rotate(360deg) translateY(100px);
    -moz-transform: rotate(360deg) translateY(100px);
    -ms-transform: rotate(360deg) translateY(100px);
    transform: rotate(360deg) translateY(100px);
  }
}
@keyframes services-circle-2 {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-100px);
  }
}
@keyframes services-dot {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(100px);
  }
}
/*----------------------------------------*/
/*  05. ABOUT CSS START
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__wrapper {
    margin-top: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about__wrapper {
    margin-top: 50px;
  }
}
@media (max-width: 575px) {
  .about__wrapper {
    margin-top: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__wrapper-2 {
    margin-left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about__wrapper-2 {
    margin-left: 0;
  }
}
@media (max-width: 575px) {
  .about__wrapper-2 {
    margin-left: 0;
  }
}
.about__wrapper ul {
  margin-bottom: 40px;
}
.about__wrapper ul li {
  padding-left: 24px;
  position: relative;
}
.about__wrapper ul li:not(:last-child) {
  margin-bottom: 15px;
}

.about__wrapper ul li:hover {
  padding-left: 20px;
  color: #7127ea;
}
.about__wrapper ul li:hover::after {
  color: #7127ea;
}
.about__thumb {
  bottom: 0;
  right: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__thumb {
    right: 15px;
  }
}
@media (max-width: 575px) {
  .about__thumb {
    right: 15px;
  }
}
.about__thumb img {
  -webkit-box-shadow: 0px 20px 20px 0px rgba(86, 5, 46, 0.2);
  -moz-box-shadow: 0px 20px 20px 0px rgba(86, 5, 46, 0.2);
  box-shadow: 0px 20px 20px 0px rgba(86, 5, 46, 0.2);
  -webkit-border-radius: 20px 20px 0 0;
  -moz-border-radius: 20px 20px 0 0;
  border-radius: 20px 20px 0 0;
}
@media (max-width: 575px) {
  .about__thumb img.about-big {
    width: 100%;
  }
}
.about__thumb img.about-sm {
  position: absolute;
  bottom: 115px;
  left: -90px;
  -webkit-box-shadow: 0px 20px 20px 0px rgba(86, 5, 46, 0.2);
  -moz-box-shadow: 0px 20px 20px 0px rgba(86, 5, 46, 0.2);
  box-shadow: 0px 20px 20px 0px rgba(86, 5, 46, 0.2);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-animation: about-sm 1s linear infinite alternate;
  -moz-animation: about-sm 1s linear infinite alternate;
  -o-animation: about-sm 1s linear infinite alternate;
  animation: about-sm 1s linear infinite alternate;
}
@media (max-width: 575px) {
  .about__thumb img.about-sm {
    left: 15px;
  }
}
.about__thumb img.about-sm.about-sm-2 {
  right: -90px;
  left: auto;
  bottom: 133px;
}
@media (max-width: 575px) {
  .about__thumb img.about-sm.about-sm-2 {
    right: -15px;
  }
}
.about__thumb-2 {
  right: auto;
  left: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__thumb-2 {
    left: 25px;
  }
}
@media (max-width: 575px) {
  .about__thumb-2 {
    left: 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__thumb-3 img {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__thumb-3 img {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about__thumb-3 img {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .about__thumb-3 img {
    width: 100%;
  }
}
.about__thumb-4 {
  z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about__thumb-4 img.about-phone {
    margin-right: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__thumb-4 img.about-phone {
    margin-right: 0px;
    margin-left: -50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__thumb-4 img.about-phone {
    margin-right: 0px;
    margin-left: -50px;
  }
}
@media (max-width: 575px) {
  .about__thumb-4 img.about-phone {
    width: 100%;
    margin-right: 0px;
    margin-left: -50px;
  }
}
.about__thumb-4 img.about-4-circle {
  position: absolute;
  bottom: 12%;
  right: 0;
  z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__thumb-4 img.about-4-circle {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__thumb-4 img.about-4-circle {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about__thumb-4 img.about-4-circle {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .about__thumb-4 img.about-4-circle {
    width: 100%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__thumb-wrapper {
    margin-left: 0;
    margin-right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__thumb-wrapper {
    margin-left: 0;
    margin-right: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about__thumb-wrapper {
    margin-left: 0;
    margin-right: 0;
  }
}
@media (max-width: 575px) {
  .about__thumb-wrapper {
    margin-left: 0;
    margin-right: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about__thumb-wrapper > img {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about__thumb-wrapper > img {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__thumb-wrapper-2 {
    margin-left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about__thumb-wrapper-2 {
    margin-left: 0;
  }
}
@media (max-width: 575px) {
  .about__thumb-wrapper-2 {
    margin-left: 0;
  }
}
.about__thumb-wrapper-2 img {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
.about__thumb-wrapper-5 img {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 30px 60px 0px rgba(2, 0, 35, 0.1);
  -moz-box-shadow: 0px 30px 60px 0px rgba(2, 0, 35, 0.1);
  box-shadow: 0px 30px 60px 0px rgba(2, 0, 35, 0.1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__thumb-wrapper-5 img.about-thumb-5-big {
    width: 100%;
    margin-left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about__thumb-wrapper-5 img.about-thumb-5-big {
    width: 100%;
    margin-left: 0;
  }
}
@media (max-width: 575px) {
  .about__thumb-wrapper-5 img.about-thumb-5-big {
    width: 100%;
    margin-left: 0;
  }
}
.about__thumb-wrapper-5 img.about-5-sm {
  margin-left: -30px;
  margin-top: -180px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__thumb-wrapper-5 img.about-5-sm {
    margin-left: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about__thumb-wrapper-5 img.about-5-sm {
    margin-left: 30px;
  }
}
@media (max-width: 575px) {
  .about__thumb-wrapper-5 img.about-5-sm {
    margin-top: -85px;
    width: 170px;
    height: 170px;
    margin-left: 30px;
  }
}
.about__shape img {
  position: absolute;
  z-index: -1;
}
.about__shape img.about-triangle {
  top: 7%;
  left: 3%;
  -webkit-animation: about-triangle 5s linear infinite alternate;
  -moz-animation: about-triangle 5s linear infinite alternate;
  -o-animation: about-triangle 5s linear infinite alternate;
  animation: about-triangle 5s linear infinite alternate;
}
.about__shape img.about-triangle-2 {
  top: 14%;
  right: 4%;
  -webkit-animation: about-triangle-2 5s linear infinite alternate;
  -moz-animation: about-triangle-2 5s linear infinite alternate;
  -o-animation: about-triangle-2 5s linear infinite alternate;
  animation: about-triangle-2 5s linear infinite alternate;
}
.about__shape img.about-circle {
  top: 3%;
  left: 4%;
  -webkit-animation: about-circle 5s linear infinite alternate;
  -moz-animation: about-circle 5s linear infinite alternate;
  -o-animation: about-circle 5s linear infinite alternate;
  animation: about-circle 5s linear infinite alternate;
}
.about__shape img.about-circle-2 {
  top: -31%;
  right: 0%;
  opacity: 0.1;
}
@media (max-width: 575px) {
  .about__shape img.about-circle-2 {
    max-width: 100%;
    top: -10%;
  }
}
.about__shape img.about-circle-3 {
  top: -18%;
  right: 0%;
}
@media (max-width: 575px) {
  .about__shape img.about-circle-3 {
    top: -7%;
    max-width: 100%;
  }
}
.about__shape img.about-circle-4 {
  top: -13%;
  left: 0%;
  opacity: 0.1;
}
@media (max-width: 575px) {
  .about__shape img.about-circle-4 {
    top: -7%;
    max-width: 100%;
  }
}
.about__shape img.about-circle-5 {
  top: -6%;
  left: 0%;
  opacity: 0.7;
}
@media (max-width: 575px) {
  .about__shape img.about-circle-5 {
    top: -7%;
    max-width: 100%;
  }
}
.about__shape img.about-plus {
  bottom: 37%;
  right: 8%;
  -webkit-animation: about-plus 5s linear infinite;
  -moz-animation: about-plus 5s linear infinite;
  -o-animation: about-plus 5s linear infinite;
  animation: about-plus 5s linear infinite;
}
.about__shape-2 img {
  position: absolute;
}
.about__shape-2 img.about-2-circle {
  right: 0;
  bottom: 34%;
  opacity: 0.04;
}
.about__shape-2 img.about-2-circle-2 {
  right: 0;
  bottom: 22%;
  opacity: 0.06;
}
.about__content-3 {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__content-3 {
    padding-top: 0;
  }
}
.about__content-4 ul {
  margin-bottom: 40px;
}
.about__content-4 ul li {
  padding-left: 24px;
  position: relative;
  color: #625e6e;
  font-weight: 600;
  font-size: 15px;
}
.about__content-4 ul li:not(:last-child) {
  margin-bottom: 15px;
}
.about__content-4 ul li::after {
  position: absolute;
  content: "";
  font-family: "Font Awesome 5 Pro";
  font-size: 15px;
  color: #625e6e;
  left: 0;
  top: 1px;
  font-weight: 400;
}
.about__content-4 ul li:hover {
  padding-left: 20px;
  color: #5d41c2;
}
.about__content-4 ul li:hover::after {
  color: #5d41c2;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__content-5 {
    margin-top: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about__content-5 {
    margin-top: 50px;
  }
}
@media (max-width: 575px) {
  .about__content-5 {
    margin-top: 50px;
  }
}
.about__list ul {
  margin-bottom: 40px;
}
.about__list ul li {
  padding-left: 24px;
  position: relative;
  color: #011224;
  font-weight: 700;
}
.about__list ul li:not(:last-child) {
  margin-bottom: 15px;
}
.about__list ul li::after {
  position: absolute;
  content: "";
  font-family: "Font Awesome 5 Pro";
  font-size: 15px;
  color: #1c7df8;
  left: 0;
  top: 1px;
  font-weight: 500;
}
.about__list ul li:hover {
  padding-left: 20px;
  color: #1c7df8;
}
.about__list ul li:hover::after {
  color: #1c7df8;
}
.about__counter ul li {
  display: inline-block;
}
.about__counter ul li:not(:last-child) {
  margin-right: 72px;
}
@media (max-width: 575px) {
  .about__counter ul li:not(:last-child) {
    margin-right: 30px;
  }
}
.about__counter-item h4 {
  font-size: 30px;
  font-weight: 700;
  color: #011224;
  margin-bottom: 0px;
}
.about__counter-item p {
  color: #545b65;
  font-weight: 600;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__call-features {
    margin-top: 100px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about__call-features {
    margin-top: 100px;
  }
}
@media (max-width: 575px) {
  .about__call-features {
    margin-top: 100px;
  }
}
.about__call-features .nav-tabs {
  border: none;
}
.about__call-features .nav-tabs .nav-item {
  width: 100%;
}
.about__call-features .nav-tabs .nav-item .nav-link {
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
  width: 100%;
}
.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item.voice {
  background: #378bf5;
}
.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item.voice h3, .about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item.voice span {
  color: #ffffff;
}
.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item.audio {
  background: #fa8a19;
}
.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item.audio h3, .about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item.audio span {
  color: #ffffff;
}
.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item.media {
  background: #3ac81f;
}
.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item.media h3, .about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item.media span {
  color: #ffffff;
}
.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item h3 {
  color: #ffffff;
}
.about__call-features .nav-tabs .nav-item .nav-link.active .about__call-item span {
  color: #ffffff;
}
.about__call-thumb {
  margin-left: -143px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about__call-thumb {
    margin-left: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__call-thumb {
    margin-left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__call-thumb {
    margin-left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about__call-thumb {
    margin-left: 0;
  }
}
@media (max-width: 575px) {
  .about__call-thumb {
    margin-left: 0;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about__call-thumb img {
    width: 100%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__call-thumb img {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__call-thumb img {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about__call-thumb img {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .about__call-thumb img {
    width: 100%;
  }
}
.about__call-thumb img.about-call-big {
  -webkit-box-shadow: 0px 30px 60px 0px rgba(15, 20, 50, 0.2);
  -moz-box-shadow: 0px 30px 60px 0px rgba(15, 20, 50, 0.2);
  box-shadow: 0px 30px 60px 0px rgba(15, 20, 50, 0.2);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.about__call-action {
  position: absolute;
  bottom: 45px;
  left: 115px;
  width: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__call-action {
    left: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__call-action {
    left: 40px;
    width: 80%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about__call-action {
    left: 40px;
    width: 80%;
  }
}
@media (max-width: 575px) {
  .about__call-action {
    left: 5px;
    width: 95%;
  }
}
.about__call-action ul li {
  display: inline-block;
  margin: 0 12px;
}
@media (max-width: 575px) {
  .about__call-action ul li {
    margin: 0 5px;
  }
}
.about__call-action ul li a {
  font-size: 17px;
  color: #ffffff;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #ffffff;
  background: rgba(162, 150, 150, 0.5);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.about__call-action ul li a:hover {
  background: #0f1432;
}
.about__call-action ul li.hand-up a {
  width: 53px;
  height: 53px;
  line-height: 53px;
  background: #e51515;
  position: relative;
  z-index: 1;
}
.about__call-action ul li.hand-up a::after {
  position: absolute;
  content: "";
  top: -4px;
  left: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  background: rgba(229, 21, 21, 0.4);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: -1;
}
.about__call-sm {
  padding: 35px 30px;
  padding-bottom: 45px;
  position: absolute;
  right: 0;
  bottom: -70px;
  -webkit-box-shadow: 0px 30px 60px 0px rgba(15, 20, 50, 0.1);
  -moz-box-shadow: 0px 30px 60px 0px rgba(15, 20, 50, 0.1);
  box-shadow: 0px 30px 60px 0px rgba(15, 20, 50, 0.1);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .about__call-sm {
    right: -180px;
    bottom: -100px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__call-sm {
    right: -170px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about__call-sm {
    right: 30px;
  }
}
@media (max-width: 575px) {
  .about__call-sm {
    display: none;
  }
}
.about__call-sm-thumb {
  margin-bottom: 25px;
}
.about__call-sm-thumb img {
  width: 70px;
  height: 70px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.about__call-sm-action ul li {
  display: inline-block;
}
.about__call-sm-action ul li:not(:last-child) {
  margin-right: 20px;
}
.about__call-sm-action ul li.call-receive a {
  background-image: linear-gradient(to right bottom, #b3d250, #a7cb4b, #9bc547, #8fbe43, #83b73f);
  -webkit-box-shadow: 0px 15px 20px 0px rgba(155, 197, 71, 0.5);
  -moz-box-shadow: 0px 15px 20px 0px rgba(155, 197, 71, 0.5);
  box-shadow: 0px 15px 20px 0px rgba(155, 197, 71, 0.5);
  animation: callReceive 1s ease infinite;
}
.about__call-sm-action ul li.call-end a {
  background-image: linear-gradient(to bottom, #ef8486, #ee7c83, #ed7481, #ec6c7f, #eb637e);
  -webkit-box-shadow: 0px 15px 20px 0px rgba(236, 108, 127, 0.5);
  -moz-box-shadow: 0px 15px 20px 0px rgba(236, 108, 127, 0.5);
  box-shadow: 0px 15px 20px 0px rgba(236, 108, 127, 0.5);
}
.about__call-sm-action ul li.call-end a i {
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.about__call-sm-action ul li.mail a {
  font-size: 14px;
  color: #c3ceda;
  background: #eaeff5;
  width: 45px;
  height: 45px;
  line-height: 45px;
}
.about__call-sm-action ul li a {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 25px;
  color: #ffffff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.about__call-user {
  font-size: 16px;
  font-weight: 700;
  color: #0f1432;
  margin-bottom: 0;
}
.about__call-status {
  display: inline-block;
  margin-bottom: 17px;
}
.about__call-item {
  padding: 20px 40px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.about__call-item.voice {
  background: rgba(55, 139, 245, 0.1);
}
.about__call-item.voice:hover {
  background: #378bf5;
}
.about__call-item.voice:hover h3, .about__call-item.voice:hover span {
  color: #ffffff;
}
.about__call-item.audio {
  background: rgba(250, 138, 25, 0.1);
}
.about__call-item.audio h3 {
  color: #fa8a19;
}
.about__call-item.audio:hover {
  background: #fa8a19;
}
.about__call-item.audio:hover h3, .about__call-item.audio:hover span {
  color: #ffffff;
}
.about__call-item.media {
  background: rgba(58, 200, 31, 0.1);
}
.about__call-item.media h3 {
  color: #3ac81f;
}
.about__call-item.media:hover {
  background: #3ac81f;
}
.about__call-item.media:hover h3, .about__call-item.media:hover span {
  color: #ffffff;
}
.about__call-item h3 {
  font-size: 16px;
  color: #378bf5;
  margin-bottom: 0;
}
.about__call-item span {
  font-size: 13px;
  font-weight: 600;
  color: #57556a;
}

@keyframes about-plus {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes about-triangle-2 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes about-triangle {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes about-circle {
  0% {
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@keyframes callReceive {
  30% {
    transform: scale(1.2);
  }
  40%, 60% {
    transform: rotate(-20deg) scale(1.2);
  }
  50% {
    transform: rotate(20deg) scale(1.2);
  }
  70% {
    transform: rotate(0deg) scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes about-sm {
  0% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}
/*----------------------------------------*/
/*  06. PRICE CSS START
/*----------------------------------------*/
.price__item {
  padding: 40px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 40px 70px 0px rgba(8, 0, 41, 0.1);
  -moz-box-shadow: 0px 40px 70px 0px rgba(8, 0, 41, 0.1);
  box-shadow: 0px 40px 70px 0px rgba(8, 0, 41, 0.1);
  border: 2px solid #ffffff;
  position: relative;
  z-index: 1;
}
.price__item::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: -moz-linear-gradient(0deg, #f2eafe 0%, white 100%);
  background-image: -webkit-linear-gradient(0deg, #f2eafe 0%, white 100%);
  background-image: -ms-linear-gradient(0deg, #f2eafe 0%, white 100%);
  background-image: linear-gradient(0deg, #f2eafe 0%, white 100%);
  opacity: 0;
  z-index: -1;
}
.price__item.active {
  border-color: #7127ea;
  -webkit-box-shadow: 0px 40px 70px 0px rgba(8, 0, 41, 0.1);
  -moz-box-shadow: 0px 40px 70px 0px rgba(8, 0, 41, 0.1);
  box-shadow: 0px 40px 70px 0px rgba(8, 0, 41, 0.1);
}
.price__item.active::before {
  opacity: 1;
}
.price__item.active .price__btn {
  color: #ffffff;
}
.price__item.active .price__btn::after {
  background: #7127ea;
  -webkit-transform: skewX(45deg) scale(1, 1);
  -moz-transform: skewX(45deg) scale(1, 1);
  -ms-transform: skewX(45deg) scale(1, 1);
  transform: skewX(45deg) scale(1, 1);
}
.price__item-big {
  padding-bottom: 60px;
}
.price__item-3 {
  -webkit-box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
  -moz-box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
  box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.price__offer span {
  font-size: 16px;
  color: #57556a;
  font-weight: 600;
}
.price__tag h3 {
  font-size: 40px;
}
.price__tag h3 span {
  font-size: 14px;
  color: #6c6a8a;
  font-weight: 500;
}
.price__tag-3 {
  margin-bottom: 32px;
}
.price__tag-3 h3 {
  color: #0a0030;
  font-size: 50px;
  padding-bottom: 17px;
  border-bottom: 1px solid #f2f0fa;
}
.price__tag-3 h3 span {
  font-size: 15px;
  color: #625e6e;
  margin-left: -12px;
  font-weight: 600;
}
.price__text p {
  color: #57556a;
}
.price__features ul li {
  color: #474554;
  font-size: 14px;
  padding-left: 23px;
  position: relative;
  font-weight: 600;
}
.price__features ul li:not(:last-child) {
  margin-bottom: 10px;
}
.price__features ul li::after {
  position: absolute;
  content: "";
  font-family: "Font Awesome 5 Pro";
  font-size: 15px;
  color: #6c6a8a;
  left: 0;
  top: 1px;
  font-weight: 400;
}
.price__features ul li:hover {
  padding-left: 20px;
  color: #7127ea;
}
.price__features ul li:hover::after {
  color: #7127ea;
}
.price__features-2 {
  margin-bottom: 43px;
}
.price__features-2 ul li {
  font-size: 15px;
  color: #0a0030;
  font-weight: 600;
  margin-bottom: 10px;
}
.price__features-2 ul li:hover {
  color: #5d41c2;
}
.price__heading {
  padding: 10px 0;
  padding-bottom: 13px;
  background: #fbe0e9;
}
.price__heading h4 {
  font-size: 20px;
  font-weight: 600;
  color: #0a0030;
  margin-bottom: 0;
}
.price__heading.free {
  background: #feeedf;
}
.price__heading.basic {
  background: #cfe9e2;
}
.price__heading.premium {
  background: #fbe0e9;
}
.price__body {
  padding: 40px 50px;
  padding-bottom: 50px;
}

/*----------------------------------------*/
/*  07. TESTIMONIAL CSS START
/*----------------------------------------*/
.testimonial__item {
  position: relative;
  -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 50px 40px;
}
@media (max-width: 575px) {
  .testimonial__item {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.testimonial__item::before {
  position: absolute;
  content: "";
  left: 10px;
  right: 10px;
  width: calc( 100% - 20px);
  height: 100%;
  bottom: -20px;
  -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  z-index: -1;
  background: #ffffff;
}
.testimonial__item-3 {
  padding: 30px 30px;
  padding-bottom: 57px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
}
.testimonial__item-5 {
  padding: 45px 68px;
  padding-bottom: 50px;
  background: #ffffff;
  -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__item-5 {
    padding-left: 35px;
    padding-right: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .testimonial__item-5 {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 575px) {
  .testimonial__item-5 {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.testimonial__item-5 p {
  font-size: 24px;
  line-height: 36px;
  color: #011224;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__item-5 p {
    font-size: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .testimonial__item-5 p {
    font-size: 18px;
    line-height: 1.5;
  }
}
@media (max-width: 575px) {
  .testimonial__item-5 p {
    font-size: 18px;
    line-height: 1.5;
  }
}
.testimonial__thumb img {
  width: 70px !important;
  height: 70px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.testimonial__text p {
  font-size: 18px;
  line-height: 28px;
  color: #000;
}
.testimonial__text-3 p {
  color: #0a0030;
  line-height: 26px;
  font-weight: 600;
  margin-bottom: 20px;
}
.testimonial__text-4 p {
  color: #57556a;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 32px;
}
.testimonial__author h3 {
  font-size: 20px;
  color: #070337;
  margin-bottom: 0;
}
.testimonial__author span {
  font-size: 14px;
  color: #57556a;
}
.testimonial__author-3 h4 {
  font-size: 18px;
  color: #0a0030;
  font-weight: 600;
  margin-bottom: 0;
  line-height: 1;
}
.testimonial__author-3 span {
  font-size: 12px;
  color: #625e6e;
  line-height: 1;
}
.testimonial__slider .owl-dots {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 25px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.testimonial__slider .owl-dots .owl-dot {
  margin: 0 5px;
  width: 8px;
  height: 8px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #dadada;
}
.testimonial__slider .owl-dots .owl-dot.active {
  background: #7127ea;
}
.testimonial__slider .owl-stage-outer {
  overflow: visible;
}
.testimonial__slider .owl-stage-outer .owl-item {
  opacity: 0;
  transition: opacity 0.5s;
}
.testimonial__slider .owl-stage-outer .owl-item.active {
  opacity: 1;
}
.testimonial__slider-3 .owl-stage-outer {
  overflow: visible;
}
.testimonial__slider-3 .owl-stage-outer .owl-item {
  opacity: 0;
  transition: opacity 0.5s;
}
.testimonial__slider-3 .owl-stage-outer .owl-item.active {
  opacity: 1;
}
.testimonial__slider-3 .owl-dots {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: -55px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.testimonial__slider-3 .owl-dots .owl-dot {
  margin: 0 5px;
  width: 8px;
  height: 8px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #dadada;
}
.testimonial__slider-3 .owl-dots .owl-dot.active {
  background: #5d41c2;
}
.testimonial__slider-4 .owl-dots {
  bottom: -60px;
}
.testimonial__slider-4 .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  background: #dadada;
}
.testimonial__slider-4 .owl-dots .owl-dot.active {
  background: #6c63ff;
}
.testimonial__slider-5 .owl-stage-outer {
  overflow: visible;
}
.testimonial__slider-5 .owl-stage-outer .owl-item {
  opacity: 0;
  transition: opacity 0.5s;
}
.testimonial__slider-5 .owl-stage-outer .owl-item.active {
  opacity: 1;
}
.testimonial__slider-5 .owl-dots {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: -70px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.testimonial__slider-5 .owl-dots .owl-dot {
  margin: 0 20px;
  width: 8px;
  height: 8px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #c8c8c8;
  position: relative;
}
.testimonial__slider-5 .owl-dots .owl-dot::after {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 30px;
  width: 30px;
  border: 1px solid #ffffff;
  background: transparent;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  visibility: hidden;
  opacity: 0;
}
.testimonial__slider-5 .owl-dots .owl-dot.active, .testimonial__slider-5 .owl-dots .owl-dot:hover {
  background: #ffffff;
}
.testimonial__slider-5 .owl-dots .owl-dot.active::after, .testimonial__slider-5 .owl-dots .owl-dot:hover::after {
  visibility: visible;
  opacity: 1;
}
.testimonial__shape img {
  position: absolute;
  z-index: -1;
}
.testimonial__shape img.testimonial-circle-1 {
  top: 11%;
  left: 4%;
  -webkit-animation: testimonial-circle-1 5s linear 0s infinite alternate;
  -moz-animation: testimonial-circle-1 5s linear 0s infinite alternate;
  -o-animation: testimonial-circle-1 5s linear 0s infinite alternate;
  animation: testimonial-circle-1 5s linear 0s infinite alternate;
}
.testimonial__shape img.testimonial-circle-2 {
  top: 17%;
  right: 5%;
  -webkit-animation: testimonial-circle-2 5s linear 0s infinite alternate;
  -moz-animation: testimonial-circle-2 5s linear 0s infinite alternate;
  -o-animation: testimonial-circle-2 5s linear 0s infinite alternate;
  animation: testimonial-circle-2 5s linear 0s infinite alternate;
}
.testimonial__shape-4 img {
  position: absolute;
  top: 21%;
  left: 36%;
  opacity: 0.1;
  z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__shape-4 img {
    left: 15%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .testimonial__shape-4 img {
    left: 0%;
    width: 100%;
  }
}
@media (max-width: 575px) {
  .testimonial__shape-4 img {
    left: 0%;
    width: 100%;
  }
}
.testimonial__avater img {
  width: 50px !important;
  height: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.testimonial__info h4 {
  font-size: 22px;
  color: #011224;
  margin-bottom: 2px;
}
.testimonial__info span {
  font-size: 14px;
  color: #57556a;
}
.testimonial__5-img img {
  position: absolute;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 3px solid #ffffff;
  -webkit-box-shadow: 0px 30px 40px 0px rgba(1, 18, 36, 0.2);
  -moz-box-shadow: 0px 30px 40px 0px rgba(1, 18, 36, 0.2);
  box-shadow: 0px 30px 40px 0px rgba(1, 18, 36, 0.2);
}
.testimonial__5-img img.testi-big {
  width: 60px;
  height: 60px;
}
.testimonial__5-img img.testi-sm {
  width: 50px;
  height: 50px;
}
.testimonial__5-img img.testi-1 {
  left: 4%;
  top: 18%;
}
.testimonial__5-img img.testi-2 {
  left: 22%;
  bottom: 24%;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .testimonial__5-img img.testi-2 {
    left: 15%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial__5-img img.testi-2 {
    left: 12%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__5-img img.testi-2 {
    left: 15%;
    bottom: 14%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__5-img img.testi-2 {
    left: 16%;
    bottom: 10%;
  }
}
.testimonial__5-img img.testi-3 {
  right: 10%;
  bottom: 22%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__5-img img.testi-3 {
    right: 3%;
    bottom: 18%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__5-img img.testi-3 {
    right: 9%;
    bottom: 16%;
  }
}
.testimonial__5-img img.testi-4 {
  right: 4%;
  top: 37%;
}
.testimonial__5-img img.testi-5 {
  right: 28%;
  top: 21%;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .testimonial__5-img img.testi-5 {
    right: 20%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial__5-img img.testi-5 {
    right: 17%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial__5-img img.testi-5 {
    right: 9%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__5-img img.testi-5 {
    display: none;
  }
}
.testimonial__5-img img.testi-6 {
  left: 5%;
  top: 56%;
}
.testimonial__5-img img.testi-7 {
  right: 23%;
  top: 55%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .testimonial__5-img img.testi-7 {
    display: none;
  }
}

.rating {
  margin-bottom: 15px;
}
.rating ul li {
  display: inline-block;
  font-size: 12px;
  color: #ffb543;
}

/*----------------------------------------*/
/*  08. FEATURES CSS START
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .features__item {
    padding-left: 30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features__item {
    padding-left: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .features__item {
    padding-left: 0px;
    margin-bottom: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .features__item {
    margin-bottom: 60px;
    padding-left: 0px;
  }
}
@media (max-width: 575px) {
  .features__item {
    margin-bottom: 60px;
    padding-left: 0px;
  }
}
.features__item:hover .features__icon span {
  -webkit-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
.features__icon span {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 66px;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.features__icon span i {
  color: #ffffff;
  font-size: 25px;
}
.features__title {
  font-size: 22px;
  margin-bottom: 32px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features__title {
    font-size: 20px;
  }
}
.features__list ul li {
  padding-left: 35px;
  font-size: 15px;
  color: #474554;
  font-weight: 600;
  position: relative;
  margin-bottom: 15px;
}
.features__list ul li::after {
  position: absolute;
  content: "";
  font-family: "Font Awesome 5 Pro";
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  text-align: center;
  color: #11b50d;
  background: rgba(17, 181, 13, 0.1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  font-weight: 500;
}
.features__list ul li:hover {
  color: #11b50d;
}
.features__list ul li:hover::after {
  background: #11b50d;
  color: #ffffff;
}
.features__shape img {
  position: absolute;
  z-index: -1;
}
.features__shape img.features-circle-1 {
  left: 4%;
  top: 29%;
}
.features__shape-2 img {
  position: absolute;
  z-index: -1;
}
.features__shape-2 img.features-2-dot {
  left: 2%;
  top: 24%;
  -webkit-animation: features-dot-1 4s linear 0s infinite alternate;
  -moz-animation: features-dot-1 4s linear 0s infinite alternate;
  -o-animation: features-dot-1 4s linear 0s infinite alternate;
  animation: features-dot-1 4s linear 0s infinite alternate;
}
.features__shape-2 img.features-2-dot-2 {
  right: 5%;
  top: 23%;
  -webkit-animation: features-dot-2 4s linear 0s infinite alternate;
  -moz-animation: features-dot-2 4s linear 0s infinite alternate;
  -o-animation: features-dot-2 4s linear 0s infinite alternate;
  animation: features-dot-2 4s linear 0s infinite alternate;
}
.features__shape-2 img.features-2-dot-3 {
  bottom: 2%;
  right: 12%;
  -webkit-animation: features-dot-1 4s linear 0s infinite alternate;
  -moz-animation: features-dot-1 4s linear 0s infinite alternate;
  -o-animation: features-dot-1 4s linear 0s infinite alternate;
  animation: features-dot-1 4s linear 0s infinite alternate;
}
.features__shape-2 img.features-2-triangle-1 {
  top: 17%;
  left: 19%;
  -webkit-animation: features-triangle-1 5s linear infinite;
  -moz-animation: features-triangle-1 5s linear infinite;
  -o-animation: features-triangle-1 5s linear infinite;
  animation: features-triangle-1 5s linear infinite;
}
.features__shape-2 img.features-2-triangle-2 {
  left: 10%;
  top: 55%;
  -webkit-animation: features-triangle-1 5s linear infinite;
  -moz-animation: features-triangle-1 5s linear infinite;
  -o-animation: features-triangle-1 5s linear infinite;
  animation: features-triangle-1 5s linear infinite;
}
.features__shape-2 img.features-2-triangle-3 {
  right: 10%;
  bottom: 18%;
  -webkit-animation: features-triangle-1 5s linear infinite;
  -moz-animation: features-triangle-1 5s linear infinite;
  -o-animation: features-triangle-1 5s linear infinite;
  animation: features-triangle-1 5s linear infinite;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .features__more {
    margin-top: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .features__more {
    margin-top: 0;
  }
}
@media (max-width: 575px) {
  .features__more {
    margin-top: 0;
  }
}
.features__tab .nav-tabs {
  display: block;
  border-bottom: none;
}
.features__tab .nav-tabs .nav-item {
  margin-bottom: 30px;
}
.features__tab .nav-tabs .nav-item .nav-link {
  padding: 30px 25px;
  border: none;
  background: #ffffff;
  width: 100%;
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  color: #070337;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .features__tab .nav-tabs .nav-item .nav-link {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.features__tab .nav-tabs .nav-item .nav-link i {
  font-size: 20px;
  padding-right: 12px;
}
.features__tab .nav-tabs .nav-item .nav-link.pink-bg {
  background: #fff6fa;
}
.features__tab .nav-tabs .nav-item .nav-link.pink-bg i {
  color: #fe0c7d;
}
.features__tab .nav-tabs .nav-item .nav-link.blue-bg {
  background: #cdedff;
}
.features__tab .nav-tabs .nav-item .nav-link.blue-bg i {
  color: #03a6ff;
}
.features__tab .nav-tabs .nav-item .nav-link.yellow-bg {
  background: #fff9ed;
}
.features__tab .nav-tabs .nav-item .nav-link.yellow-bg i {
  color: #fbad26;
}
.features__tab .nav-tabs .nav-item .nav-link img {
  margin-right: 18px;
}
.features__tab .nav-tabs .nav-item .nav-link.active {
  color: #ffffff;
}
.features__tab .nav-tabs .nav-item .nav-link.active i {
  color: #ffffff;
}
.features__tab .nav-tabs .nav-item .nav-link.active.pink-bg {
  background: #fe0c7d;
}
.features__tab .nav-tabs .nav-item .nav-link.active.blue-bg {
  background: #03a6ff;
}
.features__tab .nav-tabs .nav-item .nav-link.active.yellow-bg {
  background: #fbad26;
}
.features__thumb-inner {
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .features__thumb-inner {
    margin-top: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .features__thumb-inner {
    margin-top: 50px;
  }
}
@media (max-width: 575px) {
  .features__thumb-inner {
    margin-top: 50px;
  }
}
.features__thumb-inner img {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.12);
  -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.12);
  box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.12);
  -webkit-animation: features-thumb-animation 2s linear infinite alternate;
  -moz-animation: features-thumb-animation 2s linear infinite alternate;
  -o-animation: features-thumb-animation 2s linear infinite alternate;
  animation: features-thumb-animation 2s linear infinite alternate;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features__thumb-inner img.fea-thumb {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .features__thumb-inner img.fea-thumb {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .features__thumb-inner img.fea-thumb {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .features__thumb-inner img.fea-thumb {
    width: 100%;
  }
}
.features__thumb-inner img.fea-sm {
  position: absolute;
  left: 125px;
  bottom: -50px;
  -webkit-animation: features-thumb-sm-animation 4s linear infinite alternate;
  -moz-animation: features-thumb-sm-animation 4s linear infinite alternate;
  -o-animation: features-thumb-sm-animation 4s linear infinite alternate;
  animation: features-thumb-sm-animation 4s linear infinite alternate;
}
@media (max-width: 575px) {
  .features__thumb-inner img.fea-sm {
    left: -10px;
  }
}
.features__thumb-inner img.fea-sm-2 {
  position: absolute;
  right: -45px;
  top: 95px;
  -webkit-animation: features-thumb-sm-2-animation 2s linear infinite alternate;
  -moz-animation: features-thumb-sm-2-animation 2s linear infinite alternate;
  -o-animation: features-thumb-sm-2-animation 2s linear infinite alternate;
  animation: features-thumb-sm-2-animation 2s linear infinite alternate;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features__thumb-inner img.fea-sm-2 {
    right: -20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .features__thumb-inner img.fea-sm-2 {
    right: -20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .features__thumb-inner img.fea-sm-2 {
    right: -20px;
  }
}
@media (max-width: 575px) {
  .features__thumb-inner img.fea-sm-2 {
    right: 20px;
  }
}
.features__thumb-inner img.fea-2-shape {
  position: absolute;
  right: -287px;
  top: -55px;
  opacity: 0.1;
  z-index: -1;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .features__thumb-inner img.fea-2-shape {
    width: 100%;
    right: -85px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .features__thumb-inner img.fea-2-shape {
    width: 100%;
    right: -30px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features__thumb-inner img.fea-2-shape {
    width: 100%;
    right: -20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .features__thumb-inner img.fea-2-shape {
    width: 100%;
    right: -20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .features__thumb-inner img.fea-2-shape {
    width: 100%;
    right: -20px;
  }
}
@media (max-width: 575px) {
  .features__thumb-inner img.fea-2-shape {
    width: 100%;
    right: 0px;
  }
}

@keyframes shake {
  10%, 90% {
    -webkit-transform: translate3d(-1px, 0, 0);
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    -webkit-transform: translate3d(2px, 0, 0);
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    -webkit-transform: translate3d(-4px, 0, 0);
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    -webkit-transform: translate3d(4px, 0, 0);
    transform: translate3d(4px, 0, 0);
  }
}
@keyframes features-triangle-1 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes features-thumb-animation {
  0% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes features-thumb-sm-animation {
  0% {
    -webkit-transform: translateY(-20px) translateX(100px);
    -moz-transform: translateY(-20px) translateX(100px);
    -ms-transform: translateY(-20px) translateX(100px);
    transform: translateY(-20px) translateX(100px);
  }
  100% {
    -webkit-transform: translateY(0px) translateX(0px);
    -moz-transform: translateY(0px) translateX(0px);
    -ms-transform: translateY(0px) translateX(0px);
    transform: translateY(0px) translateX(0px);
  }
}
@keyframes features-thumb-sm-2-animation {
  0% {
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
  }
}
@keyframes features-dot-1 {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes features-dot-2 {
  0% {
    transform: translateX(-100px);
  }
  100% {
    transform: translateX(0px);
  }
}
/*----------------------------------------*/
/*  09. CTA CSS START
/*----------------------------------------*/
.cta__inner {
  background-image: linear-gradient(45deg, #1e2a63 0%, #0d70d6 100%);
  
  -webkit-box-shadow: 0px 30px 70px 0px rgba(15, 0, 40, 0.2);
  -moz-box-shadow: 0px 30px 70px 0px rgba(15, 0, 40, 0.2);
  box-shadow: 0px 30px 70px 0px rgba(15, 0, 40, 0.2);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  padding: 70px 70px;
  /* padding-bottom: 105px; */
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__inner {
    padding: 45px 55px;
    padding-bottom: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cta__inner {
    padding: 45px 55px;
    padding-bottom: 40px;
  }
}
@media (max-width: 575px) {
  .cta__inner {
    padding: 35px 30px;
  }
}
.cta__inner-2 {
  padding: 117px 80px;
  padding-bottom: 127px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__inner-2 {
    padding-left: 35px;
    padding-right: 35px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cta__inner-2 {
    padding: 40px 30px;
  }
}
@media (max-width: 575px) {
  .cta__inner-2 {
    padding: 40px 30px;
  }
}
.cta__inner-3 {
  padding: 87px 60px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-box-shadow: 0px 40px 70px 0px rgba(10, 0, 48, 0.2);
  -moz-box-shadow: 0px 40px 70px 0px rgba(10, 0, 48, 0.2);
  box-shadow: 0px 40px 70px 0px rgba(10, 0, 48, 0.2);
}
@media (max-width: 575px) {
  .cta__inner-3 {
    padding: 45px 25px;
  }
}
.page__title-height:before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 80%);
}
.page__title-wrapper{
  position: relative;
}
.cta__title {
  color: #ffffff;
  font-size: 29px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__title {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cta__title {
    margin-bottom: 20px;
    font-size: 28px;
  }
}
@media (max-width: 575px) {
  .cta__title {
    font-size: 28px;
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .cta__title {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .cta__title-2 {
    font-size: 24px;
  }
}
.cta__title-3 {
  font-size: 30px;
  margin-bottom: 10px;
}
.cta__shape img {
  position: absolute;
}
.cta__shape img.circle {
  right: 9%;
  bottom: -77%;
  opacity: 0.1;
}
.cta__shape img.circle-2 {
  left: -2%;
  bottom: 10%;
  opacity: 0.4;
}
.cta__shape img.circle-3 {
  top: -18%;
  left: 6%;
  opacity: 0.08;
}
.cta__shape img.triangle-1 {
  top: 9%;
  left: 10%;
  opacity: 0.1;
}
.cta__shape img.triangle-2 {
  top: -9%;
  right: 10%;
  opacity: 0.1;
}
.cta__shape-2 img {
  position: absolute;
  z-index: -1;
}
.cta__shape-2 img.cta-2-shape {
  left: -105px;
  bottom: -80px;
}
.cta__shape-2 img.cta-2-circle {
  left: 50px;
  top: 50px;
  opacity: 0.3;
}
.cta__shape-2 img.cta-2-circle-2 {
  right: 0;
  bottom: 31%;
  opacity: 0.04;
}
.cta__shape-2 img.cta-2-circle-3 {
  right: 0;
  bottom: 44%;
  opacity: 0.06;
}
.cta__shape-2 img.cta-2-dot {
  left: 3%;
  bottom: 12%;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cta__content-3 {
    margin-bottom: 25px;
  }
}
@media (max-width: 575px) {
  .cta__content-3 {
    margin-bottom: 25px;
  }
}
.cta__content-3 p {
  color: #ffffff;
  opacity: 0.7;
  margin-bottom: 0;
}
.cta__form input {
  width: 370px;
  height: 60px;
  padding: 0 30px;
  border: none;
  outline: none;
  background: #ffffff;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  margin-right: 20px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .cta__form input {
    margin-bottom: 20px;
  }
}
@media (max-width: 575px) {
  .cta__form input {
    margin-bottom: 20px;
    width: 100%;
  }
}
.cta__form input::placeholder {
  font-size: 15px;
  color: #8c8c97;
}
.cta__form input:focus {
  -webkit-box-shadow: 0px 20px 30px 0px rgba(8, 0, 42, 0.14);
  -moz-box-shadow: 0px 20px 30px 0px rgba(8, 0, 42, 0.14);
  box-shadow: 0px 20px 30px 0px rgba(8, 0, 42, 0.14);
}
.cta__form button {
  height: 60px;
  line-height: 60px;
  padding: 0 53px;
  background: #1c213e;
  color: #ffffff;
  font-weight: 600;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}
.cta__form button:hover {
  -webkit-box-shadow: 0px 20px 30px 0px rgba(8, 0, 42, 0.14);
  -moz-box-shadow: 0px 20px 30px 0px rgba(8, 0, 42, 0.14);
  box-shadow: 0px 20px 30px 0px rgba(8, 0, 42, 0.14);
}
.cta__features ul li {
  display: inline-block;
  font-size: 15px;
  color: #ffffff;
  font-weight: 600;
  position: relative;
  padding-left: 24px;
  margin-bottom: 15px;
}
.cta__features ul li:not(:last-child) {
  margin-right: 50px;
}
@media (max-width: 575px) {
  .cta__features ul li:not(:last-child) {
    margin-right: 15px;
  }
}
.cta__features ul li::after {
  position: absolute;
  content: "N";
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 15px;
  color: #ffffff;
  font-family: "ElegantIcons";
}
.cta__shape img.cta-4-shape {
  position: absolute;
  bottom: -77%;
  right: 0;
  z-index: -1;
}

/*----------------------------------------*/
/*  10. TEAM CSS START
/*----------------------------------------*/
.team__slider {
  position: relative;
}
.team__slider::after {
  position: absolute;
  content: "";
  top: 0;
  left: -34%;
  width: 380px;
  height: 460px;
  background: #f4f9fd;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .team__slider::after {
    left: -36%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__slider::after {
    opacity: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__slider::after {
    left: -57%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .team__slider::after {
    opacity: 0;
  }
}
@media (max-width: 575px) {
  .team__slider::after {
    opacity: 0;
  }
}
.team__slider .owl-stage-outer {
  overflow: visible;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__slider .owl-stage-outer {
    overflow: hidden;
  }
}
.team__slider .owl-dots {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: absolute;
  bottom: -60px;
  left: 0;
}
.team__slider .owl-dots .owl-dot {
  margin: 0 5px;
  width: 10px;
  height: 10px;
  background: #dbdbdb;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.team__slider .owl-dots .owl-dot.active {
  background: #2f80ed;
}
.team__item:hover .team__thumb::after {
  visibility: visible;
  opacity: 1;
}
.team__item:hover .team__social ul li > a {
  opacity: 1;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
}
.team__thumb::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 25, 55, 0.5);
  visibility: hidden;
  opacity: 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.team__thumb img {
  height: 350px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__thumb img {
    height: auto;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .team__thumb img {
    height: auto;
  }
}
@media (max-width: 575px) {
  .team__thumb img {
    height: auto;
  }
}
.team__title {
  font-size: 22px;
  color: #021937;
  margin-bottom: 0;
}
.team__title a:hover {
  color: #2f80ed;
}
.team__position {
  font-size: 14px;
  font-weight: 600;
  color: #57556a;
}
.team__social {
  position: absolute;
  bottom: 30px;
  left: 30px;
  z-index: 1;
}
.team__social ul li {
  display: inline-block;
}
.team__social ul li:not(:last-child) {
  margin-right: 30px;
}
.team__social ul li a {
  position: relative;
  display: inline-block;
  font-size: 16px;
  color: #ffffff;
  -webkit-transform: translateX(-60px);
  -moz-transform: translateX(-60px);
  -ms-transform: translateX(-60px);
  transform: translateX(-60px);
  opacity: 0;
}
.team__social ul li a:hover {
  color: #2f80ed;
}
.team__shape img {
  position: absolute;
  z-index: 11;
}
.team__shape img.team-dot {
  right: 5%;
  top: 20%;
  -webkit-animation: team-dot 4s linear 0s infinite alternate;
  -moz-animation: team-dot 4s linear 0s infinite alternate;
  -o-animation: team-dot 4s linear 0s infinite alternate;
  animation: team-dot 4s linear 0s infinite alternate;
}
.team__shape img.team-triangle {
  bottom: 21%;
  left: 2%;
  -webkit-animation: team-triangle 5s linear infinite;
  -moz-animation: team-triangle 5s linear infinite;
  -o-animation: team-triangle 5s linear infinite;
  animation: team-triangle 5s linear infinite;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .team__shape img.team-triangle {
    left: 1%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__shape img.team-triangle {
    bottom: 9%;
    left: 8%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__shape img.team-triangle {
    bottom: 9%;
    left: 8%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .team__shape img.team-triangle {
    bottom: 9%;
    left: 8%;
  }
}
@media (max-width: 575px) {
  .team__shape img.team-triangle {
    bottom: 9%;
    left: 8%;
  }
}
.team__details-inner {
  -webkit-box-shadow: 0px 50px 80px 0px rgba(3, 0, 53, 0.1);
  -moz-box-shadow: 0px 50px 80px 0px rgba(3, 0, 53, 0.1);
  box-shadow: 0px 50px 80px 0px rgba(3, 0, 53, 0.1);
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}
.team__details-shape {
  right: -11%;
  bottom: -16%;
  z-index: -1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .team__details-shape {
    right: 0;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__details-shape {
    right: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__details-shape {
    right: -3%;
    bottom: -7%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .team__details-shape {
    right: -3%;
    bottom: -7%;
  }
}
@media (max-width: 575px) {
  .team__details-shape {
    right: -3%;
    bottom: -5%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__details-img {
    margin-right: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__details-img {
    margin-right: 0px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .team__details-img {
    margin-right: 0px;
  }
}
@media (max-width: 575px) {
  .team__details-img {
    margin-right: 0px;
  }
}
.team__details-img img {
  -webkit-border-radius: 30px 0 0 30px;
  -moz-border-radius: 30px 0 0 30px;
  border-radius: 30px 0 0 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .team__details-content {
    padding-top: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .team__details-content {
    padding: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .team__details-content {
    padding: 40px;
  }
}
@media (max-width: 575px) {
  .team__details-content {
    padding: 40px;
  }
}
.team__details-content > span {
  font-size: 20px;
  display: inline-block;
  margin-bottom: 7px;
}
.team__details-content h3 {
  font-size: 30px;
  margin-bottom: 15px;
}
.team__details-content p {
  margin-bottom: 35px;
  padding-right: 80px;
}
.team__details-contact ul li {
  margin-bottom: 8px;
  display: flex;
}
.team__details-contact ul li .icon i {
  line-height: 27px;
  color: #7127ea;
  margin-right: 15px;
}
.team__details-contact ul li .text span {
  font-weight: 500;
}
.team__details-social ul li {
  display: inline-block;
  margin-right: 7px;
}
.team__details-social ul li a {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #f7f7fc;
  font-size: 14px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.team__details-social ul li a:hover {
  background: #7127ea;
  color: #ffffff;
}
.team__details-info h4 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 25px;
}
.team__details-info p {
  margin-bottom: 25px;
}

@keyframes team-triangle {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes team-dot {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0px);
  }
}
/*----------------------------------------*/
/*  11. FAQ CSS START
/*----------------------------------------*/
.faq__wrapper {
  padding: 0 40px;
  border-top: 3px solid #2f80ed;
  box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08), inset 0px 3px 0px 0px rgba(47, 128, 237, 0.004);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
@media (max-width: 575px) {
  .faq__wrapper {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.faq__wrapper .accordion-item {
  padding-top: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid #eaedff;
}
.faq__wrapper .accordion-item.border-none {
  border-bottom: none;
  padding-bottom: 35px;
}
.faq__wrapper .accordion-item .accordion-header .accordion-button {
  font-size: 18px;
  font-weight: 600;
  color: #021937;
  border: none;
  padding: 0;
  background: none;
  text-align: left;
}
@media (max-width: 575px) {
  .faq__wrapper .accordion-item .accordion-header .accordion-button {
    padding-right: 15px;
  }
}
.faq__wrapper .accordion-item .accordion-header .accordion-button::after {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: "Font Awesome 5 Pro";
  font-size: 18px;
  color: #070337;
  background-image: none;
  font-weight: 500;
  content: "";
}
.faq__wrapper .accordion-item .accordion-header .accordion-button:focus {
  box-shadow: none;
}
.faq__wrapper .accordion-item .accordion-header .accordion-button.collapsed::after {
  content: "";
}
.faq__wrapper .accordion-item .accordion-header .accordion-button:hover {
  color: #2f80ed;
}
.faq__wrapper .accordion-item .accordion-header .accordion-button:hover::after {
  color: #2f80ed;
}
.faq__wrapper .accordion-item .accordion-body {
  padding: 0;
  padding-top: 20px;
}
.faq__wrapper .accordion-item .accordion-body p {
  font-size: 15px;
  color: #474554;
  font-weight: 600;
  margin-bottom: 0;
}
.faq__wrapper .accordion-item .accordion-collapse {
  border: none;
}
.faq__counter ul li {
  display: inline-block;
}
@media (max-width: 575px) {
  .faq__counter ul li {
    display: block;
    margin-bottom: 30px;
  }
}
.faq__counter ul li:not(:last-child) {
  margin-right: 40px;
}
@media (max-width: 575px) {
  .faq__counter ul li:not(:last-child) {
    margin-right: 20px;
  }
}
.faq__counter ul li h3 {
  color: #070337;
  font-size: 40px;
  margin-bottom: 3px;
}
.faq__counter ul li h3 span {
  font-weight: 700;
}
.faq__counter ul li h3.pink {
  color: #fe1a86;
}
.faq__counter ul li h3.blue {
  color: #0242fd;
}
.faq__counter ul li h3.yellow {
  color: #f5a706;
}
.faq__counter ul li p {
  font-weight: 600;
  color: #474554;
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .faq__content {
    margin-top: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .faq__content {
    margin-top: 60px;
  }
}
@media (max-width: 575px) {
  .faq__content {
    margin-top: 60px;
  }
}

/*----------------------------------------*/
/*  12. Blog CSS START
/*----------------------------------------*/
.blog__item:hover .blog__thumb a::after {
  opacity: 1;
}
.blog__item-3:hover .blog__thumb-3 img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.blog__item-5:hover .blog__thumb-5 img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.blog__more a:hover {
  -webkit-box-shadow: 0px 20px 30px 0px rgba(1, 24, 55, 0.16);
  -moz-box-shadow: 0px 20px 30px 0px rgba(1, 24, 55, 0.16);
  box-shadow: 0px 20px 30px 0px rgba(1, 24, 55, 0.16);
}
.blog__thumb {
  position: relative;
}
.blog__thumb a {
  position: relative;
  display: block;
}
.blog__thumb a::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(7, 3, 55, 0.3);
  opacity: 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.blog__thumb img {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.blog__thumb-3 {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.blog__thumb-5 {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.blog__thumb-5 img {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.blog__meta span {
  text-transform: capitalize;
  font-weight: 600;
  margin-right: 25px;
}
.blog__meta span.tag {
  color: #2f80ed;
}
.blog__meta span.tag:hover {
  color: #070337;
}
.blog__meta-3 span {
  font-size: 14px;
  color: #625e6e;
  font-weight: 600;
}
.blog__meta-3 span.tag-3 {
  position: absolute;
  top: 40px;
  left: 40px;
}
.blog__meta-3 span.tag-3 a {
  display: inline-block;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  color: #ffffff;
  background: #5d41c2;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 0 15px;
}
.blog__meta-3 span.tag-3 a:hover {
  background: #ffffff;
  color: #5d41c2;
}
.blog__meta-5 {
  margin-bottom: 8px;
}
.blog__meta-5 span {
  font-size: 14px;
  font-weight: 600;
}
.blog__meta-5 span:not(:last-child) {
  margin-right: 17px;
}
.blog__meta-5 span.date {
  color: #545b65;
}
.blog__meta-5 span.tag {
  color: #1c7df8;
}
.blog__content {
  padding-right: 55px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .blog__content {
    padding-right: 35px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__content {
    padding-right: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__content {
    padding-right: 0px;
  }
}
.blog__content-3 {
  padding-top: 25px;
  padding-right: 140px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog__content-3 {
    padding-right: 95px;
  }
}
@media (max-width: 575px) {
  .blog__content-3 {
    padding-right: 0px;
  }
}
.blog__content-5 {
  padding-top: 20px;
  padding-right: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog__content-5 {
    padding-right: 0;
  }
}
@media (max-width: 575px) {
  .blog__content-5 {
    padding-right: 0;
  }
}
.blog__content-5 .link-btn:hover {
  color: #1c7df8;
}
.blog__title {
  font-size: 22px;
  color: #070337;
  line-height: 1.3;
}
.blog__title a:hover {
  color: #2f80ed;
}
.blog__title-3 {
  font-size: 24px;
  font-weight: 800;
  color: #0a0030;
  line-height: 1.3;
  margin-bottom: 15px;
}
@media (max-width: 575px) {
  .blog__title-3 {
    font-size: 22px;
  }
}
.blog__title-3 a:hover {
  color: #5d41c2;
}
.blog__title-5 {
  font-size: 18px;
  color: #011224;
  line-height: 1.5;
  margin-bottom: 25px;
}
.blog__title-5 a:hover {
  color: #1c7df8;
}
.blog__shape img {
  position: absolute;
}
.blog__shape img.blog-dot {
  left: 2%;
  top: 50%;
  -webkit-animation: blog-dot 4s linear 0s infinite alternate;
  -moz-animation: blog-dot 4s linear 0s infinite alternate;
  -o-animation: blog-dot 4s linear 0s infinite alternate;
  animation: blog-dot 4s linear 0s infinite alternate;
}
.blog__shape img.blog-triangle {
  left: 10%;
  bottom: 25%;
  -webkit-animation: blog-triangle 5s linear infinite;
  -moz-animation: blog-triangle 5s linear infinite;
  -o-animation: blog-triangle 5s linear infinite;
  animation: blog-triangle 5s linear infinite;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog__sidebar {
    margin-top: 50px;
    padding-left: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog__sidebar {
    margin-top: 50px;
    padding-left: 0;
  }
}
@media (max-width: 575px) {
  .blog__sidebar {
    margin-top: 50px;
    padding-left: 0;
  }
}

.postbox__item {
  position: relative;
}
.postbox__thumb {
  position: relative;
}
.postbox__thumb img {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.postbox__video::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(1, 18, 36, 0.3);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.postbox__title {
  font-size: 26px;
  color: #070337;
  margin-bottom: 15px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .postbox__title {
    font-size: 22px;
  }
}
@media (max-width: 575px) {
  .postbox__title {
    font-size: 16px;
  }
}
.postbox__title a:hover {
  color: #1c7df8;
}
.postbox__content {
  padding-top: 17px;
}
.postbox__content p {
  color: #6a727f;
  margin-bottom: 25px;
}
.postbox__content .link-btn:hover {
  color: #1c7df8;
}
.postbox__meta span {
  font-size: 15px;
  font-weight: 600;
  color: #6a727f;
  display: inline-block;
}
.postbox__meta span:not(:last-child) {
  margin-right: 33px;
}
.postbox__meta span i {
  color: #1c7df8;
  padding-right: 2px;
}
.postbox__meta span a:hover {
  color: #1c7df8;
}
.postbox__date {
  position: absolute;
  top: 30px;
  right: 30px;
  background: #ffffff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 8px 16px;
  z-index: 1;
}
.postbox__date h5 {
  font-size: 30px;
  margin-bottom: 0;
  line-height: 1;
  color: #1c7df8;
  font-weight: 800;
}
.postbox__date span {
  font-size: 15px;
  color: #1c7df8;
  font-weight: 700;
}
.postbox__play {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}
.postbox__quote {
  padding: 45px 50px;
  padding-bottom: 18px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  position: relative;
}
@media (max-width: 575px) {
  .postbox__quote {
    padding-left: 30px;
    padding-right: 30px;
  }
}
.postbox__quote h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 37px;
  line-height: 1.5;
}
.postbox__quote span {
  font-weight: 600;
  color: #6a727f;
  position: relative;
  padding-left: 50px;
}
.postbox__quote span::after {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background: #1c7df8;
  height: 2px;
  width: 40px;
}
.postbox__quote img.quote {
  position: absolute;
  top: 40px;
  left: 30px;
  opacity: 0.2;
}
@media (max-width: 575px) {
  .postbox__quote img.quote {
    top: 20px;
    left: 20px;
  }
}
.postbox__tag h3 {
  font-size: 22px;
  color: #011224;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 0;
}
.postbox__tag a {
  display: inline-block;
  height: 35px;
  line-height: 35px;
  text-align: center;
  padding: 0 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #f2f7ff;
  color: #6a727f;
  margin-right: 8px;
  font-weight: 600;
  font-size: 14px;
}
.postbox__tag a:hover {
  background: #1c7df8;
  color: #ffffff;
}
.postbox__share h3 {
  font-size: 22px;
  color: #011224;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 0;
}
.postbox__share ul li {
  display: inline-block;
  margin-left: 10px;
}
.postbox__share ul li a {
  display: inline-block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background: #f2f7ff;
  color: #9499ae;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.postbox__share ul li a:hover {
  color: #ffffff;
  background: #1c7df8;
}
.postbox__img img {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.postbox__author {
  padding: 40px 65px;
  padding-right: 85px;
  padding-bottom: 45px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .postbox__author {
    padding-right: 40px;
  }
}
@media (max-width: 575px) {
  .postbox__author {
    padding: 40px;
  }
}
@media (max-width: 575px) {
  .postbox__author-thumb {
    margin-bottom: 15px;
  }
}
.postbox__author-thumb img {
  width: 60px;
  height: 60px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.postbox__author-content h4 {
  font-size: 16px;
  margin-bottom: 0;
  margin-bottom: 3px;
}
.postbox__author-content span {
  display: inline-block;
  font-size: 14px;
  color: #6a727f;
  font-weight: 600;
  margin-bottom: 10px;
}
.postbox__author-content p {
  font-weight: 600;
  margin-bottom: 0;
}
.postbox__form h3 {
  font-size: 22px;
  color: #011224;
  margin-bottom: 35px;
}
.postbox__form input, .postbox__form textarea {
  width: 100%;
  height: 70px;
  line-height: 66px;
  padding: 0 15px;
  background: #f2f7ff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  outline: none;
  border: 2px solid #f2f7ff;
  margin-bottom: 30px;
}
.postbox__form input::placeholder, .postbox__form textarea::placeholder {
  color: #6a727f;
}
.postbox__form input:focus, .postbox__form textarea:focus {
  border-color: #1c7df8;
}
.postbox__form textarea {
  height: 150px;
  padding: 30px 15px;
  line-height: 1;
  resize: none;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .postbox__agree {
    margin-bottom: 20px;
  }
}
@media (max-width: 575px) {
  .postbox__agree {
    margin-bottom: 20px;
  }
}
.postbox__agree input {
  margin: 0;
  appearance: none;
  -moz-appearance: none;
  display: block;
  width: 14px !important;
  padding: 0;
  height: 14px;
  background: transparent;
  border: 1px solid #132339;
  outline: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  margin-bottom: 0;
}
.postbox__agree input:checked {
  position: relative;
  background-color: #1c7df8;
  border-color: transparent;
}
.postbox__agree input:checked::after {
  box-sizing: border-box;
  content: "";
  position: absolute;
  font-family: "Font Awesome 5 Pro";
  font-size: 10px;
  color: #ffffff;
  top: 46%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.postbox__agree input:hover {
  cursor: pointer;
}
.postbox__agree label {
  padding-left: 8px;
  color: #6a727f;
  font-weight: 600;
}
.postbox__agree label:hover {
  cursor: pointer;
}

.sidebar__widget-title {
  font-size: 22px;
  margin-bottom: 28px;
}
.sidebar__category ul li {
  margin-bottom: 15px;
}
.sidebar__category ul li a {
  color: #6a727f;
}
.sidebar__category ul li a span {
  color: #132339;
  font-weight: 600;
  padding-left: 3px;
}
.sidebar__category ul li a:hover {
  color: #1c7df8;
}
.sidebar__search {
  position: relative;
}
.sidebar__search input {
  width: 100%;
  height: 60px;
  line-height: 56px;
  font-size: 14px;
  padding: 0 25px;
  background: #f2f7ff;
  border: 2px solid #f2f7ff;
  outline: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.sidebar__search input::placeholder {
  color: #7a8189;
}
.sidebar__search input:focus {
  border-color: #1c7df8;
}
.sidebar__search button {
  font-size: 16px;
  color: #011224;
  position: absolute;
  top: 50%;
  right: 25px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.sidebar__tags a {
  font-size: 13px;
  color: #6a727f;
  font-weight: 600;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  padding: 0 15px;
  background: rgba(28, 125, 248, 0.08);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  margin-right: 8px;
  margin-bottom: 10px;
}
.sidebar__tags a:hover {
  color: #ffffff;
  background: #1c7df8;
}

.rc__thumb img {
  height: 90px;
  width: 90px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.rc__title {
  font-size: 16px;
  font-weight: 700;
  color: #132339;
  line-height: 1.5;
}
.rc__title a:hover {
  color: #1c7df8;
}
.rc__meta span {
  font-size: 14px;
  color: #6a727f;
  font-weight: 600;
}
.rc__comment-icon i {
  font-size: 18px;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #1c7df8;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: rgba(28, 125, 248, 0.08);
}
.rc__comment-content h5 {
  font-size: 16px;
  color: #132339;
}
.rc__comment-content p {
  color: #6a727f;
  font-weight: 600;
  margin-bottom: 0;
}
.rc__comment-content p a:hover {
  color: #1c7df8;
}

.post-comment-title h3 {
  font-size: 22px;
  color: #011224;
}

.latest-comments li:first-child .comments-box {
  border-top: 0;
  padding-top: 0;
}

.latest-comments li.children {
  margin-left: 105px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .latest-comments li.children {
    margin-left: 60px;
  }
}
@media (max-width: 575px) {
  .latest-comments li.children {
    margin-left: 15px;
  }
}

.comments-avatar {
  float: left;
  margin-right: 20px;
}
.comments-avatar img {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.comments-box {
  border-bottom: 1px solid #f4f4f4;
  padding-bottom: 30px;
  margin-bottom: 45px;
}

.comments-text {
  overflow: hidden;
}

.comments-text p {
  margin-bottom: 17px;
  color: #6a727f;
  font-weight: 600;
}

.avatar-name {
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
}

.avatar-name h5 {
  font-size: 16px;
  margin-bottom: 0px;
  color: #011224;
}

.avatar-name span {
  font-size: 14px;
  font-weight: 500;
}

.comment-meta {
  font-size: 13px;
  color: #6a727f;
  font-weight: 600;
}

.comment-reply {
  font-weight: 600;
  font-size: 14px;
  color: #222222;
}

.comment-reply i {
  padding-right: 4px;
}

.comment-reply:hover {
  color: #1c7df8;
}

.blog-play-btn {
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 84px;
  text-align: center;
  font-size: 30px;
  background: #ffffff;
  color: #1c7df8;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.blog-play-btn i {
  text-shadow: 0px 4px 6px rgba(1, 19, 44, 0.24);
}

@keyframes blog-triangle {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes blog-dot {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0px);
  }
}
/*----------------------------------------*/
/*  13. Promotion CSS START
/*----------------------------------------*/
.promotion__bg {
  position: relative;
  z-index: 1;
}
.promotion__bg::after, .promotion__bg::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: #005ad3;
  z-index: -1;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .promotion__bg::after, .promotion__bg::before {
    top: 0;
    width: 100%;
    height: 50%;
  }
}
@media (max-width: 575px) {
  .promotion__bg::after, .promotion__bg::before {
    top: 0;
    width: 100%;
    height: 50%;
  }
}
.promotion__bg::before {
  right: 0;
  left: auto;
  background: #0151bd;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .promotion__bg::before {
    top: auto;
    bottom: 0;
  }
}
@media (max-width: 575px) {
  .promotion__bg::before {
    top: auto;
    bottom: 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .promotion__bg {
    padding: 0;
  }
}
@media (max-width: 575px) {
  .promotion__bg {
    padding: 20px 0;
  }
}
.promotion__title {
  font-size: 34px;
  color: #ffffff;
  margin-bottom: 15px;
}
@media (max-width: 575px) {
  .promotion__title {
    font-size: 25px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .promotion__content {
    padding: 50px 0;
  }
}
.promotion__content p {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 35px;
}
@media (max-width: 575px) {
  .promotion__content.promotion__right {
    padding-left: 0;
    margin-top: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .promotion__content-2 {
    padding-right: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .promotion__content-2 {
    padding-right: 0px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .promotion__content-2 {
    padding-right: 0px;
  }
}
@media (max-width: 575px) {
  .promotion__content-2 {
    padding-right: 0px;
  }
}
.promotion__content-2 p {
  font-size: 15px;
  color: #545b65;
  margin-bottom: 45px;
}
.promotion__content-2 p.promotion__sub {
  font-size: 17px;
  color: #011224;
  font-weight: 700;
  margin-bottom: 23px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .promotion__content-4 {
    margin-top: 50px;
  }
}
@media (max-width: 575px) {
  .promotion__content-4 {
    padding-right: 30px;
    margin-top: 50px;
  }
}
.promotion__shape img {
  position: absolute;
}
.promotion__shape img.promotion-plus {
  left: 3%;
  top: 35%;
  -webkit-animation: about-plus 5s linear infinite;
  -moz-animation: about-plus 5s linear infinite;
  -o-animation: about-plus 5s linear infinite;
  animation: about-plus 5s linear infinite;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .promotion__shape img.promotion-plus {
    top: 18%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .promotion__shape img.promotion-plus {
    top: 18%;
  }
}
@media (max-width: 575px) {
  .promotion__shape img.promotion-plus {
    bottom: 5%;
    right: 5%;
    top: auto;
    left: auto;
  }
}
.promotion__shape img.promotion-dot {
  right: 16%;
  top: 37%;
  -webkit-animation: promotion-dot 4s linear 0s infinite alternate;
  -moz-animation: promotion-dot 4s linear 0s infinite alternate;
  -o-animation: promotion-dot 4s linear 0s infinite alternate;
  animation: promotion-dot 4s linear 0s infinite alternate;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .promotion__shape img.promotion-dot {
    right: 60%;
  }
}
@media (max-width: 575px) {
  .promotion__shape img.promotion-dot {
    right: 60%;
  }
}
.promotion__shape img.promotion-triangle {
  right: 5%;
  top: 15%;
  -webkit-animation: promotion-triangle 5s linear infinite;
  -moz-animation: promotion-triangle 5s linear infinite;
  -o-animation: promotion-triangle 5s linear infinite;
  animation: promotion-triangle 5s linear infinite;
}
.promotion__thumb {
  position: relative;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .promotion__thumb {
    margin-bottom: 50px;
  }
}
@media (max-width: 575px) {
  .promotion__thumb {
    margin-bottom: 50px;
  }
}
.promotion__thumb img {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.promotion__thumb::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(1, 18, 36, 0.6);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.promotion__thumb-4 {
  z-index: 1;
}
.promotion__thumb-4 img.promotion-4-big {
  margin-left: -30px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: 0px 30px 60px 0px rgba(2, 0, 35, 0.1);
  -moz-box-shadow: 0px 30px 60px 0px rgba(2, 0, 35, 0.1);
  box-shadow: 0px 30px 60px 0px rgba(2, 0, 35, 0.1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .promotion__thumb-4 img.promotion-4-big {
    margin-left: -60px;
  }
}
@media (max-width: 575px) {
  .promotion__thumb-4 img.promotion-4-big {
    margin-left: 0px;
    width: 100%;
  }
}
.promotion__thumb-4 img.promotion-4-sm {
  margin-left: 280px;
  margin-top: -240px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: 0px 30px 60px 0px rgba(2, 0, 35, 0.1);
  -moz-box-shadow: 0px 30px 60px 0px rgba(2, 0, 35, 0.1);
  box-shadow: 0px 30px 60px 0px rgba(2, 0, 35, 0.1);
  -webkit-animation: promotion-4-sm 2s linear infinite alternate;
  -moz-animation: promotion-4-sm 2s linear infinite alternate;
  -o-animation: promotion-4-sm 2s linear infinite alternate;
  animation: promotion-4-sm 2s linear infinite alternate;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .promotion__thumb-4 img.promotion-4-sm {
    margin-left: 105px;
    margin-bottom: -180px;
  }
}
@media (max-width: 575px) {
  .promotion__thumb-4 img.promotion-4-sm {
    margin-left: 50px;
    width: 80%;
    margin-top: -100px;
  }
}
.promotion__thumb-4 img.promotion-4-circle {
  position: absolute;
  top: -113px;
  right: -20px;
  opacity: 0.3;
  z-index: -1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .promotion__thumb-4 img.promotion-4-circle {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .promotion__thumb-4 img.promotion-4-circle {
    width: 100%;
    right: 0;
  }
}
.promotion__play {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}
.promotion__play img {
  width: 17px;
  height: 20px;
}

@keyframes promotion-plus {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes promotion-triangle {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes promotion-dot {
  0% {
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    transform: translateX(100px);
  }
  100% {
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@keyframes promotion-4-sm {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0px);
  }
}
/*----------------------------------------*/
/*  14. PLATFORM CSS START
/*----------------------------------------*/
.platform__item {
  padding: 32px 60px;
  padding-bottom: 50px;
  -webkit-box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
  -moz-box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
  box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .platform__item {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .platform__item {
    padding-left: 35px;
    padding-right: 35px;
  }
}
@media (max-width: 575px) {
  .platform__item {
    padding-left: 30px;
    padding-right: 30px;
  }
}
.platform__item p {
  margin-bottom: 33px;
}
.platform__title {
  font-size: 24px;
  margin-bottom: 10px;
  color: #0a0030;
}
.platform__name a {
  height: 50px;
  text-align: center;
  padding: 0 15px;
  border: 2px solid #5d41c2;
  background: #5d41c2;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  display: inline-block;
  padding-top: 4px;
}
.platform__name a.app-store:hover {
  background: #0a0030;
  border-color: #0a0030;
}
.platform__name a.apple-store {
  background: #0a0030;
  border-color: #0a0030;
}
.platform__name a.apple-store:hover {
  background: #5d41c2;
  border-color: #5d41c2;
}
.platform__name a.windows {
  border-color: rgba(0, 0, 0, 0.2);
  background: transparent;
}
.platform__name a.windows:hover {
  background: #0a0030;
  border-color: #0a0030;
}
.platform__name a.windows:hover i {
  color: #ffffff;
}
.platform__name a.windows:hover h5 {
  color: #ffffff;
}
.platform__name a.windows:hover span {
  color: #ffffff;
}
.platform__name a.windows i {
  color: #0a0030;
}
.platform__name a.windows h5 {
  color: #0a0030;
}
.platform__name a.windows span {
  color: #0a0030;
}
.platform__name-icon {
  margin-right: 15px;
}
.platform__name-icon i {
  font-size: 24px;
  color: #ffffff;
}
.platform__name-content h5 {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0;
}
.platform__name-content span {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

/*----------------------------------------*/
/*  15. WHY CSS START
/*----------------------------------------*/
.why__item {
  padding: 47px 25px;
  padding-bottom: 49px;
  -webkit-box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
  -moz-box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
  box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.why__icon i {
  font-size: 30px;
  color: #5d41c2;
}
.why__content p {
  font-size: 12px;
  color: #625e6e;
  font-weight: 600;
  margin-bottom: 0;
}
.why__title {
  font-size: 36px;
  color: #0a0030;
  margin-bottom: 2px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .why__title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .why__title {
    font-size: 25px;
  }
}
.why__features {
  margin-top: 85px;
  padding: 42px 40px;
  padding-bottom: 53px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
  -moz-box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
  box-shadow: 0px 20px 40px 0px rgba(10, 0, 48, 0.08);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .why__features {
    margin-top: 87px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .why__features {
    margin-top: 80px;
    padding-left: 25px;
    padding-right: 25px;
  }
}
.why__features ul {
  margin-bottom: 45px;
}
.why__features ul li {
  font-size: 18px;
  color: #0a0030;
  padding-left: 28px;
  position: relative;
}
.why__features ul li:not(:last-child) {
  margin-bottom: 25px;
}
.why__features ul li::after {
  position: absolute;
  content: "";
  font-family: "Font Awesome 5 Pro";
  font-size: 15px;
  color: #0a0030;
  left: 0;
  top: 1px;
  font-weight: 400;
}

/*----------------------------------------*/
/*  16. Promotion CSS START
/*----------------------------------------*/
.portfolio__item:hover .portfolio__thumb::after {
  visibility: visible;
  opacity: 1;
}
.portfolio__item:hover .portfolio__content {
  bottom: 30px;
  visibility: visible;
  opacity: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__item:hover .portfolio__content {
    bottom: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__item:hover .portfolio__content {
    bottom: 20px;
  }
}
@media (max-width: 575px) {
  .portfolio__item:hover .portfolio__content {
    bottom: 15px;
  }
}
.portfolio__title {
  font-size: 18px;
  font-weight: 700;
  color: #011224;
  margin-bottom: 0;
}
.portfolio__title a:hover {
  color: #1c7df8;
}
.portfolio__thumb {
  position: relative;
}
.portfolio__thumb img {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.portfolio__thumb::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(56, 81, 108, 0.3);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
}
.portfolio__content {
  position: absolute;
  bottom: 0px;
  left: 30px;
  background: #ffffff;
  padding: 23px 40px;
  padding-bottom: 26px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  z-index: 1;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio__content {
    left: 20px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio__content {
    left: 20px;
  }
}
@media (max-width: 575px) {
  .portfolio__content {
    left: 15px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.portfolio__content span {
  display: inline-block;
  font-size: 15px;
  color: #011224;
  font-weight: 600;
  margin-bottom: 2px;
}
.portfolio__menu .masonary-menu {
  padding-bottom: 2px;
  border-bottom: 2px solid #f3f3f3;
}
.portfolio__menu button {
  color: #011224;
  font-size: 14px;
  background: transparent;
  outline: none;
  font-weight: 600;
  position: relative;
}
.portfolio__menu button:not(:last-child) {
  margin-right: 35px;
}
@media (max-width: 575px) {
  .portfolio__menu button:not(:last-child) {
    margin-right: 13px;
  }
}
.portfolio__menu button::after {
  position: absolute;
  content: "";
  bottom: -4px;
  left: auto;
  right: 0;
  width: 0%;
  height: 2px;
  background: #1c7df8;
}
.portfolio__menu button:hover, .portfolio__menu button.active {
  color: #1c7df8;
}
.portfolio__menu button:hover::after, .portfolio__menu button.active::after {
  width: 100%;
  left: 0;
  right: auto;
}
@media (max-width: 575px) {
  .portfolio__description {
    margin-left: 0;
    margin-right: 0;
  }
}
.portfolio__description h3 {
  font-size: 24px;
  color: #011224;
  margin-bottom: 25px;
}
.portfolio__description p {
  color: #57556a;
}
@media (max-width: 575px) {
  .portfolio__category {
    margin-top: 50px;
  }
}
.portfolio__category h3 {
  font-size: 20px;
  color: #011224;
  margin-bottom: 25px;
}
.portfolio__category ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 15px;
}
.portfolio__category ul li::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #011224;
}
.portfolio__category ul li::after a {
  color: #57556a;
  font-weight: 600;
}
.portfolio__details-thumb img {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.portfolio__more-btn {
  padding: 43px 0;
  border-top: 1px solid #e5e7e9;
  border-bottom: 1px solid #e5e7e9;
}
.portfolio__more-btn a {
  font-size: 20px;
  color: #57556a;
  font-weight: 600;
}
.portfolio__more-btn a.prev i {
  padding-right: 10px;
}
.portfolio__more-btn a.next i {
  padding-left: 10px;
}
.portfolio__details-content h1 {
  font-size: 50px;
  margin-bottom: 30px;
}
@media (max-width: 575px) {
  .portfolio__details-content h1 {
    font-size: 40px;
  }
}
.portfolio__meta h4 {
  display: inline-block;
  font-weight: 700;
  font-size: 16px;
}
.portfolio__info h3 {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 7px;
}
.portfolio__overview h2 {
  font-size: 20px;
}

/*----------------------------------------*/
/*  17. SUBSCRIBE CSS START
/*----------------------------------------*/
.subscribe__content p {
  font-size: 15px;
  font-weight: 600;
  color: #545b65;
  margin-bottom: 0;
}
.subscribe__title {
  font-size: 40px;
  color: #011224;
  font-weight: 800;
  margin-bottom: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .subscribe__form {
    margin-top: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .subscribe__form {
    margin-top: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .subscribe__form {
    margin-top: 50px;
  }
}
@media (max-width: 575px) {
  .subscribe__form {
    margin-top: 50px;
  }
}
.subscribe__form input {
  width: 270px;
  height: 60px;
  line-height: 56px;
  background: #ffffff;
  padding: 0 30px;
  margin-right: 30px;
  border: 2px solid #ffffff;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .subscribe__form input {
    width: 240px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .subscribe__form input {
    width: 250px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .subscribe__form input {
    width: 100%;
    margin-bottom: 30px;
  }
}
@media (max-width: 575px) {
  .subscribe__form input {
    width: 100%;
    margin-bottom: 30px;
  }
}
.subscribe__form input::placeholder {
  font-size: 14px;
  color: #86847d;
}
.subscribe__form input:focus {
  border-color: #1c7df8;
  outline: none;
}
.subscribe__form button {
  height: 60px;
  padding: 0 40px;
}
.subscribe__form button:hover::after {
  -webkit-transform: skewX(40deg) scale(1, 1);
  -moz-transform: skewX(40deg) scale(1, 1);
  -ms-transform: skewX(40deg) scale(1, 1);
  transform: skewX(40deg) scale(1, 1);
}

/*----------------------------------------*/
/*  18. SUPPORT CSS START
/*----------------------------------------*/
.support__item {
  -webkit-box-shadow: 0px 3px 1px 0px rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0px 3px 1px 0px rgba(11, 6, 70, 0.08);
  box-shadow: 0px 3px 1px 0px rgba(11, 6, 70, 0.08);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 35px 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .support__item {
    padding-left: 45px;
    padding-right: 45px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .support__item {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .support__item {
    padding-left: 30px;
    padding-right: 30px;
  }
}
.support__item:hover {
  -webkit-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
  box-shadow: 0px 30px 70px 0px rgba(11, 6, 70, 0.08);
}
.support__title {
  font-size: 15px;
  color: #57556a;
  font-weight: 600;
  margin-bottom: 0;
}
.support__title a:hover {
  color: #6c63ff;
}
.support__icon {
  min-height: 70px;
}

/*----------------------------------------*/
/*  19. PAGE TITLE CSS START
/*----------------------------------------*/
.page__title-height {
  min-height: 528px;
  background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
}
.page__title-wrapper {
  margin-bottom: 6px;
}
.page__title-wrapper h3 {
  font-size: 30px;
  color: #ffffff;
  margin-bottom: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .page__title-wrapper h3 {
    font-size: 45px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .page__title-wrapper h3 {
    font-size: 35px;
  }
}
@media (max-width: 575px) {
  .page__title-wrapper h3 {
    font-size: 35px;
  }
}
.page__title-wrapper-2 h3 {
  font-size: 40px;
}
@media (max-width: 575px) {
  .page__title-wrapper-2 h3 {
    font-size: 30px;
  }
}
.page__title-wrapper .breadcrumb {
  margin-bottom: 0;
}
.page__title-wrapper .breadcrumb .breadcrumb-item.active {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}
.page__title-wrapper .breadcrumb .breadcrumb-item.active::before {
  content: ".";
  font-family: "Open Sans", sans-serif;
  font-size: 30px;
  color: #ffffff;
  line-height: 12px;
  padding-right: 14px;
}
.page__title-wrapper .breadcrumb .breadcrumb-item a {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}
.page__title-wrapper .breadcrumb .breadcrumb-item + .breadcrumb-item {
  padding-left: 14px;
}
.page__title-shape img {
  position: absolute;
  z-index: -1;
}
.page__title-shape img.page-title-dot {
  left: 32%;
  bottom: 10%;
}
.page__title-shape img.page-title-dot-2 {
  right: 19%;
  top: 20%;
}
.page__title-shape img.page-title-dot-3 {
  right: 9%;
  top: 6%;
}
.page__title-shape img.page-title-dot-4 {
  left: 0;
  top: 21%;
}
.page__title-shape img.page-title-plus {
  right: 0;
  bottom: -17%;
}
.page__title-shape img.page-title-triangle {
  left: 19%;
  top: 32%;
  -webkit-animation: page-triangle 5s linear infinite;
  -moz-animation: page-triangle 5s linear infinite;
  -o-animation: page-triangle 5s linear infinite;
  animation: page-triangle 5s linear infinite;
}

@keyframes page-triangle {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*----------------------------------------*/
/*  20. CONTACT CSS START
/*----------------------------------------*/
.contact__wrapper {
  padding: 70px 100px;
  padding-bottom: 100px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0px 30px 70px 0px rgba(57, 32, 147, 0.1);
  -moz-box-shadow: 0px 30px 70px 0px rgba(57, 32, 147, 0.1);
  box-shadow: 0px 30px 70px 0px rgba(57, 32, 147, 0.1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact__wrapper {
    padding-left: 70px;
    padding-right: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact__wrapper {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .contact__wrapper {
    padding-left: 70px;
    padding-right: 70px;
  }
}
@media (max-width: 575px) {
  .contact__wrapper {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact__info {
    padding-right: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact__info {
    padding-right: 40px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .contact__info {
    padding-right: 0px;
  }
}
@media (max-width: 575px) {
  .contact__info {
    padding-right: 0px;
  }
}
.contact__title {
  font-size: 40px;
  font-weight: 800;
  color: #011224;
  margin-bottom: 37px;
}
.contact__title-2 {
  font-size: 22px;
  color: #021937;
  margin-bottom: 10px;
}
.contact__title-2 a:hover {
  color: #1c7df8;
}
.contact__details ul li {
  margin-bottom: 40px;
}
.contact__details ul li h4 {
  font-size: 17px;
  color: #011224;
}
.contact__details ul li p {
  font-weight: 600;
  color: #7a8189;
  margin-bottom: 0;
}
.contact__details ul li p a:hover {
  color: #1c7df8;
}
.contact__form input, .contact__form textarea {
  width: 100%;
  margin-bottom: 30px;
  height: 50px;
  line-height: 46px;
  padding: 0 30px;
  background: #f2f7ff;
  border: 2px solid #f2f7ff;
  outline: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-size: 14px;
}
.contact__form input::placeholder, .contact__form textarea::placeholder {
  color: #7a8189;
  font-size: 14px;
}
.contact__form input:focus, .contact__form textarea:focus {
  border-color: #1c7df8;
}
.contact__form textarea {
  height: 140px;
  padding: 30px;
  resize: none;
  line-height: 1.2;
}
.contact__item {
  padding: 50px 70px;
  -webkit-box-shadow: 0px 40px 70px 0px rgba(1, 19, 44, 0.08);
  -moz-box-shadow: 0px 40px 70px 0px rgba(1, 19, 44, 0.08);
  box-shadow: 0px 40px 70px 0px rgba(1, 19, 44, 0.08);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .contact__item {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact__item {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 575px) {
  .contact__item {
    padding-left: 30px;
    padding-right: 30px;
  }
}
.contact__item:hover .contact__icon img {
  -webkit-transform: translate3d(0, -10px, 0);
  -moz-transform: translate3d(0, -10px, 0);
  -ms-transform: translate3d(0, -10px, 0);
  -o-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
}
.contact__item-inner {
  position: relative;
  z-index: 1;
}
.contact__item-inner::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 10px;
  border-radius: 20px;
  background: #1c7df8;
  height: 50%;
  z-index: -1;
}
.contact__item-inner:hover::before {
  top: -3px;
}
.contact__icon {
  min-height: 46px;
  margin-bottom: 18px;
}
.contact__icon img {
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
  -moz-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
  -ms-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
  -o-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
  transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18);
}
.contact__content p {
  font-weight: 600;
}
.contact__content .link-btn:hover {
  color: #1c7df8;
}
.contact__shape img {
  position: absolute;
  top: -56%;
  left: 33%;
  opacity: 0.4;
  z-index: -1;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .contact__shape img {
    left: 0%;
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .contact__shape img {
    top: -10%;
    left: 0%;
    width: 100%;
  }
}
@media (max-width: 575px) {
  .contact__shape img {
    top: -10%;
    left: 0%;
    width: 100%;
  }
}
.contact__map {
  height: 500px;
}
.contact__map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/*----------------------------------------*/
/*  21. ERROR CSS START
/*----------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .error__thumb img {
    width: 100%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .error__thumb img {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .error__thumb img {
    width: 100%;
  }
}
.error__content {
  padding: 0 65px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .error__content {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .error__content {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media (max-width: 575px) {
  .error__content {
    padding: 0;
  }
}
.error__content h3 {
  font-size: 36px;
  color: #011224;
  margin-bottom: 10px;
}
.error__content p {
  color: #57556a;
  font-weight: 600;
  margin-bottom: 40px;
}

/*----------------------------------------*/
/*  22. SIGN CSS START
/*----------------------------------------*/
.sign__wrapper {
  padding: 50px 70px;
  padding-bottom: 45px;
  margin: 0 30px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 40px 80px 0px rgba(2, 2, 26, 0.14);
  -moz-box-shadow: 0px 40px 80px 0px rgba(2, 2, 26, 0.14);
  box-shadow: 0px 40px 80px 0px rgba(2, 2, 26, 0.14);
  z-index: 11;
}
@media (max-width: 575px) {
  .sign__wrapper {
    margin: 0;
    padding: 30px 20px;
    padding-bottom: 25px;
  }
}
.sign__shape img {
  position: absolute;
  z-index: -1;
}
.sign__shape img.man-1 {
  left: 28%;
  top: 60%;
  z-index: 1;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .sign__shape img.man-1 {
    left: 19%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sign__shape img.man-1 {
    left: 16%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sign__shape img.man-1 {
    left: 7%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sign__shape img.man-1 {
    left: 2%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sign__shape img.man-1 {
    left: 1%;
  }
}
@media (max-width: 575px) {
  .sign__shape img.man-1 {
    display: none;
  }
}
.sign__shape img.man-2 {
  right: 24%;
  top: 65%;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .sign__shape img.man-2 {
    top: 55%;
    right: 20%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sign__shape img.man-2 {
    top: 60%;
    right: 15%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sign__shape img.man-2 {
    top: 60%;
    right: 7%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sign__shape img.man-2 {
    top: 60%;
    right: 0%;
    z-index: 1;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sign__shape img.man-2 {
    top: 60%;
    right: 0%;
    z-index: 1;
  }
}
@media (max-width: 575px) {
  .sign__shape img.man-2 {
    display: none;
  }
}
.sign__shape img.man-2.man-22 {
  top: 50%;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .sign__shape img.man-2.man-22 {
    top: 55%;
    right: 20%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sign__shape img.man-2.man-22 {
    top: 60%;
    right: 15%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sign__shape img.man-2.man-22 {
    top: 60%;
    right: 7%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sign__shape img.man-2.man-22 {
    top: 60%;
    right: 0%;
    z-index: 1;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sign__shape img.man-2.man-22 {
    top: 60%;
    right: 0%;
    z-index: 1;
  }
}
.sign__shape img.circle {
  right: 32%;
  top: 38%;
  animation: signCircle 5s linear 0s infinite alternate;
  -webkit-animation: signCircle 5s linear 0s infinite alternate;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .sign__shape img.circle {
    right: 25%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sign__shape img.circle {
    right: 22%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sign__shape img.circle {
    right: 11%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sign__shape img.circle {
    right: 4%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sign__shape img.circle {
    right: 2%;
  }
}
@media (max-width: 575px) {
  .sign__shape img.circle {
    display: none;
  }
}
.sign__shape img.dot {
  right: 34%;
  top: 43%;
  animation: signDot 5s linear 0s infinite alternate;
  -webkit-animation: signDot 5s linear 0s infinite alternate;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .sign__shape img.dot {
    right: 29%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sign__shape img.dot {
    right: 26%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sign__shape img.dot {
    right: 18%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sign__shape img.dot {
    right: 5%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sign__shape img.dot {
    right: 3%;
  }
}
@media (max-width: 575px) {
  .sign__shape img.dot {
    display: none;
  }
}
.sign__shape img.bg {
  left: 33%;
  top: 26%;
  opacity: 0.06;
  max-width: 100%;
  animation: signBg 5s linear 0s infinite alternate;
  -webkit-animation: signBg 5s linear 0s infinite alternate;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sign__shape img.bg {
    left: 10%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sign__shape img.bg {
    left: 0%;
  }
}
@media (max-width: 575px) {
  .sign__shape img.bg {
    display: none;
  }
}
.sign__shape img.zigzag {
  left: 32%;
  top: 43%;
  animation: signZigzag 5s linear 0s infinite alternate;
  -webkit-animation: signZigzag 5s linear 0s infinite alternate;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .sign__shape img.zigzag {
    left: 24%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sign__shape img.zigzag {
    left: 23%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sign__shape img.zigzag {
    left: 11%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sign__shape img.zigzag {
    left: 3%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sign__shape img.zigzag {
    left: 2%;
  }
}
@media (max-width: 575px) {
  .sign__shape img.zigzag {
    display: none;
  }
}
.sign__shape img.flower {
  bottom: 13%;
  right: 30%;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .sign__shape img.flower {
    right: 24%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .sign__shape img.flower {
    right: 24%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .sign__shape img.flower {
    right: 12%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sign__shape img.flower {
    right: 3%;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sign__shape img.flower {
    right: 1%;
  }
}
@media (max-width: 575px) {
  .sign__shape img.flower {
    right: 1%;
    bottom: 3%;
  }
}
.sign__header {
  padding: 0 35px;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .sign__header {
    padding: 0 10px;
  }
}
@media (max-width: 575px) {
  .sign__header {
    padding: 0px;
  }
}
.sign__header p {
  margin-bottom: 0;
  color: #7a797f;
  position: relative;
  padding: 0 40px;
  display: inline-block;
}
.sign__header p span {
  position: absolute;
  top: 40%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.sign__header p span:last-child {
  left: auto;
  right: 0;
}
.sign__header p a:hover {
  color: #1c7df8;
}
.sign__social {
  display: block;
  height: 50px;
  background: #eeedf2;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  position: relative;
  line-height: 48px;
  padding-left: 23px;
  z-index: 1;
  overflow: hidden;
  font-size: 16px;
}
.sign__social::after {
  position: absolute;
  content: "";
  left: -55%;
  top: 45%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 220px;
  width: 220px;
  background: #3360bd;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: -1;
}
@media (max-width: 575px) {
  .sign__social::after {
    left: -62%;
  }
}
.sign__social i {
  color: #ffffff;
  font-size: 16px;
  margin-right: 50px;
}
@media (max-width: 575px) {
  .sign__social i {
    margin-right: 35px;
  }
}
.sign__social:hover {
  color: #ffffff;
}
.sign__social:hover::after {
  width: 100%;
  height: 150%;
  left: 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.sign__social.g-plus::after {
  background: #e93e30;
}
.sign__form h5 {
  font-size: 16px;
  font-weight: 500;
  color: #021937;
  margin-bottom: 11px;
}
.sign__input {
  position: relative;
}
.sign__input input {
  width: 100%;
  height: 60px;
  line-height: 52px;
  padding: 0 50px;
  font-size: 14px;
  border: 2px solid transparent;
  background: #f5f5f7;
  color: #222222;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.sign__input input::placeholder {
  color: #8e8c94;
}
.sign__input input:focus {
  outline: none;
  background: #ffffff;
  border-color: #1c7df8;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(8, 0, 42, 0.2);
  -moz-box-shadow: 0px 1px 4px 0px rgba(8, 0, 42, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(8, 0, 42, 0.2);
}
.sign__input i {
  position: absolute;
  top: 51%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 25px;
  font-size: 14px;
  color: #8e8c94;
}
.sign__agree input {
  margin: 0;
  appearance: none;
  -moz-appearance: none;
  display: block;
  width: 14px;
  height: 14px;
  background: transparent;
  border: 1px solid #7a797f;
  outline: none;
  margin-top: 2px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.sign__agree input:checked {
  position: relative;
  background-color: #1c7df8;
  border-color: transparent;
}
.sign__agree input:checked::after {
  box-sizing: border-box;
  content: "";
  position: absolute;
  font-family: "Font Awesome 5 Pro";
  font-size: 10px;
  color: #ffffff;
  top: 46%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.sign__agree input:hover {
  cursor: pointer;
}
.sign__agree label {
  padding-left: 10px;
  font-size: 14px;
}
.sign__agree label:hover {
  cursor: pointer;
}
.sign__agree label a {
  color: #021937;
  font-weight: 500;
}
.sign__agree label a:hover {
  color: #1c7df8;
}
.sign__forgot a {
  color: #7a797f;
}
.sign__forgot a:hover {
  color: #1c7df8;
}
.sign__new p {
  color: #7a797f;
  margin-bottom: 0;
}
.sign__new p a {
  color: #1c7df8;
}

@keyframes signDot {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
  100% {
    transform: translateY(50px);
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
  }
}
@keyframes signZigzag {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
  100% {
    transform: translateY(50px);
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
  }
}
@keyframes signCircle {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*----------------------------------------*/
/*  23. FOOTER CSS START
/*----------------------------------------*/
.footer__widget-title h3 {
  font-size: 18px;
  margin-bottom: 0;
  padding-top: 10px;
  color: #cdb54e;
}
.footer__widget-title-3 h3 {
  color: #ffffff;
}
.footer__widget-content p {
  color:#fdfbff;
  font-weight: 600;
  padding-right: 70px;
}
.footer__widget-content-3 p {
  color: #9da4ac;
}
.footer__link {
  padding-top: 8px;
}
.footer__link ul li:not(:last-child) {
  margin-bottom: 15px;
}
.footer__link ul li a {
  color: #fdfbff;
  font-weight: 600;
  position: relative;
}
.footer__link ul li a::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: #7127ea;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -ms-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}
.footer__link ul li a:hover {
  color: #7127ea;
}
.footer__link ul li a:hover::after {
  bottom: -2px;
  visibility: visible;
  opacity: 1;
}
.footer__link-2 ul li a::after {
  background: #2f80ed;
}
.footer__link-2 ul li a:hover {
  color: #2f80ed;
}
.footer__link-3 ul li a {
  color: #9da4ac;
}
.footer__link-3 ul li a::after {
  background: #ffffff;
}
.footer__link-3 ul li a:hover {
  color: #ffffff;
}
.footer__link-4 ul li a {
  color: #9da4ac;
}
.footer__link-4 ul li a::after {
  background: #6c63ff;
}
.footer__link-4 ul li a:hover {
  color: #6c63ff;
}
.main-menu ul li.has-dropdown > a::after {
  content: "\f107"; /* correct unicode for down arrow */
  -webkit-transform: translateY(1px);
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  transform: translateY(1px);
  font-size: 14px;
  color: white;
  font-family: "Font Awesome 5 Free"; /* or "Font Awesome 5 Pro" if you have it */
  font-weight: 900; /* 400 or 900 depending on icon style */
  margin-left: 5px;
  display: inline-block;
}
/* .footer__social {
  padding-top: 14px;
} */
.footer__social ul li {
  display: inline-block;
}
.footer__social ul li:not(:last-child) {
  margin-right: 10px;
}
.footer__social ul li a {
  color: #fdfbff;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 38px;
  text-align: center;
  border: 1px solid #c7ced4;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.footer__social ul li a:hover {
  background: #7127ea;
  color: #ffffff;
  border-color: #7127ea;
  -webkit-box-shadow: 0px 20px 30px 0px rgba(7, 3, 55, 0.16);
  -moz-box-shadow: 0px 20px 30px 0px rgba(7, 3, 55, 0.16);
  box-shadow: 0px 20px 30px 0px rgba(7, 3, 55, 0.16);
}
.footer__social-2 ul li a:hover {
  background: #2f80ed;
  border-color: #2f80ed;
}
.footer__social-3 ul li a {
  color: #868d94;
  border-color: #868d94;
}
.footer__social-3 ul li a:hover {
  color: #5d41c2;
  background: #ffffff;
  border-color: #ffffff;
}
.footer__social-4 ul li a {
  color: #868d94;
  border-color: #868d94;
}
.footer__social-4 ul li a:hover {
  color: #6c63ff;
  background: #ffffff;
  border-color: #ffffff;
}
.footer__social-5 ul li a {
  color: #868d94;
  border-color: #868d94;
}
.footer__social-5 ul li a:hover {
  color: #1c7df8;
  background: #ffffff;
  border-color: #ffffff;
}
.footer__copyright {
  border-top: 1px solid #e7ecf1;
  padding: 25px 0;
}
.footer__copyright-2 {
  border-color: rgba(255, 255, 255, 0.1);
}
.footer__copyright-3 {
  border: none;
  padding: 35px 0;
}
.footer__copyright-wrapper p {
  font-size: 14px;
  font-weight: 600;
  color: #c9c7d2;
  margin-bottom: 0;
}
.footer__copyright-wrapper p a {
  color: #dec96d;
}
.footer__copyright-wrapper-2 p a {
  color: #2f80ed;
}
.footer__copyright-wrapper-3 p {
  color: #888792;
}
.footer__copyright-wrapper-3 p a {
  color: #ffffff;
}
.footer__copyright-wrapper-4 p a {
  color: #1c7df8;
}
.footer__shape img {
  position: absolute;
  opacity: 0.04;
}
.footer__shape img.footer-circle-1 {
  top: 7%;
  right: 0;
}
.footer__shape img.footer-circle-2 {
  top: 18%;
  right: 0;
}
.footer__shape img.footer-2-circle-1 {
  top: -19%;
  right: 0;
}
.footer__shape img.footer-2-circle-2 {
  top: -7%;
  right: 0;
}
.footer__pl-70 {
  padding-left: 70px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__pl-70 {
    padding-left: 35px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__pl-70 {
    padding-left: 0px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .footer__pl-70 {
    padding-left: 0px;
  }
}
@media (max-width: 575px) {
  .footer__pl-70 {
    padding-left: 0px;
  }
}
.footer__pl-90 {
  padding-left: 90px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .footer__pl-90 {
    padding-left: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer__pl-90 {
    padding-left: 0px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .footer__pl-90 {
    padding-left: 0px;
  }
}
@media (max-width: 575px) {
  .footer__pl-90 {
    padding-left: 0px;
  }
}

/*# sourceMappingURL=style.css.map */