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

    Theme Name: Outstock - Clean, Minimal eCommerce HTML5 Template 
    Author: Basic Theme
    更多精品模板：http://www.bootstrapmb.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");

:root{
  font-size: 16px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: normal;
  color: #6c6a8a;
  line-height: 1.625rem;
}

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: 0rem;
  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: 2.5rem;
}

h2 {
  font-size: 2.25rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.875rem;
}

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

li {
  list-style: none;
}

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

*::-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: 0.875rem;
  opacity: 1;
}

*::placeholder {
  color: #222222;
  font-size: 0.875rem;
  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;
}

.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;
}

/*--
    - 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: 21.875rem;
}

.ml-220 {
  margin-left: 13.75rem;
}

.ml--30 {
  margin-left: -1.875rem;
}

.mb--149 {
  margin-bottom: -9.3125rem;
}

.mt--70 {
  margin-top: -4.375rem;
}

.pt-270 {
  padding-top: 16.875rem;
}

.section-padding {
  padding-left: 4.375rem;
  padding-right: 4.375rem;
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .section-padding {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
@media (max-width: 35.9375rem) {
  .section-padding {
    padding-left: 0rem;
    padding-right: 0rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .section-padding-2 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .section-padding-2 {
    padding-left: 0rem;
    padding-right: 0rem;
  }
}
@media (max-width: 35.9375rem) {
  .section-padding-2 {
    padding-left: 0rem;
    padding-right: 0rem;
  }
}
.section-padding-3 {
  padding: 0 1.875rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .section-padding-3 {
    padding: 0 6.25rem;
  }
}
@media (max-width: 35.9375rem) {
  .section-padding-3 {
    padding: 0;
  }
}
.section-padding-4 {
  padding: 0 4.6875rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .section-padding-4 {
    padding: 0rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .section-padding-4 {
    padding: 0rem 1.875rem;
  }
}
@media (max-width: 35.9375rem) {
  .section-padding-4 {
    padding: 0rem;
  }
}
@media (max-width: 35.9375rem) {
  .section-padding-p-0 {
    padding-left: 0.9375rem !important;
    padding-right: 0.9375rem !important;
  }
}

.section-mb-15 {
  margin-bottom: 0.8125rem !important;
}

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

/* theme btn */
.w-btn {
  font-size: 0.9375rem;
  color: #ffffff;
  background: #7127ea;
  height: 2.75rem;
  line-height: 2.5rem;
  border: 0.125rem solid #7127ea;
  text-align: center;
  padding: 0 1.875rem;
  display: inline-block;
  font-weight: 600;
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
  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: 0rem 1.25rem 3.75rem 0rem rgba(15, 0, 40, 0.2);
  -moz-box-shadow: 0rem 1.25rem 3.75rem 0rem rgba(15, 0, 40, 0.2);
  box-shadow: 0rem 1.25rem 3.75rem 0rem 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: 0.9375rem;
  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: #7127ea;
}
.w-btn-white:hover {
  border-color: #7127ea;
  color: #ffffff;
}
.w-btn-white-2 {
  color: #2f80ed;
  height: 3.375rem;
  line-height: 3.125rem;
  padding: 0 2.375rem;
}
.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: 3.375rem;
  line-height: 3.125rem;
  padding: 0 2.375rem;
  font-size: 1.125rem;
}
.w-btn-3 {
  padding: 0 1.5625rem;
}
.w-btn-4 {
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
  background: #ffffff;
  color: #7127ea;
}
.w-btn-4::after {
  background: #7127ea;
}
.w-btn-4:hover {
  color: #ffffff;
}
.w-btn-5 {
  padding: 0 3rem;
}
.w-btn-6 {
  height: 3.125rem;
  line-height: 2.875rem;
}
.w-btn-7 {
  padding: 0 1.375rem;
}
.w-btn-8 {
  color: #2f80ed;
  background: #ffffff;
  border-color: #ffffff;
  height: 2.875rem;
  line-height: 2.625rem;
  padding: 0 1.875rem;
}
.w-btn-8::after {
  background: #2f80ed;
}
.w-btn-8:hover {
  border-color: #2f80ed;
  color: #ffffff;
}
.w-btn-9 {
  padding-left: 2.1875rem;
  padding-right: 2.1875rem;
}
.w-btn-10 {
  height: 2.875rem;
  line-height: 2.625rem;
  padding: 0 1.25rem;
  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: 2.5rem;
  line-height: 2.25rem;
  padding: 0 1.0625rem;
  background: #1c7df8;
  border-color: #1c7df8;
}
.w-btn-11:hover {
  border-color: #1c7df8;
  color: #1c7df8;
}
.w-btn-12 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.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: 1.625rem;
  padding-right: 1.625rem;
}
.w-btn-blue {
  border-color: #2f80ed;
  background: #2f80ed;
}
.w-btn-blue-header {
  height: 2.5rem;
  padding: 0 1.25rem;
  line-height: 2.5rem;
  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: 0.9375rem;
  font-weight: 600;
  color: #ffffff;
  background: #6c63ff;
  -webkit-border-radius: 1.5625rem;
  -moz-border-radius: 1.5625rem;
  border-radius: 1.5625rem;
  height: 3.125rem;
  line-height: 3.125rem;
  padding: 0 2rem;
  text-transform: capitalize;
  text-align: center;
}
.w-btn-round:hover {
  background: #0f1432;
  color: #ffffff;
}
.w-btn-round-header {
  height: 2.5rem;
  line-height: 2.5rem;
}
.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: 0.125rem solid #6c63ff;
  line-height: 2.875rem;
  color: #6c63ff;
}
.w-btn-round-border:hover {
  background: #6c63ff;
  color: #ffffff;
}
.w-btn-header {
  font-size: 0.9375rem;
  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: 0.875rem;
  font-weight: 600;
  text-transform: capitalize;
  color: #0a0030;
}
.link-btn i {
  font-size: 1.125rem;
  position: absolute;
  right: 0.625rem;
  top: 58%;
  -webkit-transform: translateX(0.625rem) translateY(-50%);
  -moz-transform: translateX(0.625rem) translateY(-50%);
  -ms-transform: translateX(0.625rem) translateY(-50%);
  transform: translateX(0.625rem) 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: -0.875rem;
  opacity: 1;
  visibility: visible;
}

.pulse-play {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  line-height: 5.25rem;
  text-align: center;
  color: #1c7df8;
  font-size: 1.875rem;
  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 2.8125rem 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 2.8125rem 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: 1.5rem;
  line-height: 1.5rem;
  padding: 0 1.375rem;
  font-size: 0.875rem;
  -webkit-border-radius: 0.75rem;
  -moz-border-radius: 0.75rem;
  border-radius: 0.75rem;
  margin-bottom: 1.1875rem;
  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: 1.125rem;
}
.section__title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #070337;
  margin-bottom: 1.5625rem;
}
.section__title-2 {
  color: #021937;
  margin-bottom: 0.9375rem;
  line-height: 1.3;
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .section__title-2 {
    font-size: 1.875rem;
  }
}
.section__title-3 {
  color: #0a0030;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .section__title-3 {
    font-size: 2.1875rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .section__title-3 {
    font-size: 1.8125rem;
  }
}
.section__title-4 {
  font-size: 2.875rem;
  color: #0f1432;
  font-weight: 700;
  margin-bottom: 0.9375rem;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .section__title-4 {
    font-size: 2.6875rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .section__title-4 {
    font-size: 2.5rem;
  }
}
@media (max-width: 35.9375rem) {
  .section__title-4 {
    font-size: 1.5rem !important;
  }
}
.section__title-4-p {
  padding-left: 5.9375rem;
  padding-right: 5.9375rem;
}
.section__title-4-p-2 {
  padding-left: 5.9375rem;
  padding-right: 5.9375rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .section__title-4-p-2 {
    padding-left: 4.375rem;
    padding-right: 4.375rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .section__title-4-p-2 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (max-width: 35.9375rem) {
  .section__title-4-p-2 {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
}
@media (max-width: 35.9375rem) {
  .section__title {
    font-size: 1.6875rem;
  }
}
.section__title-5 {
  font-size: 2.875rem;
  font-weight: 800;
  line-height: 1.1;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .section__title-5 {
    font-size: 2.8125rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .section__title-5 {
    font-size: 2.3125rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .section__title-5 {
    font-size: 2.5rem;
  }
}
@media (max-width: 35.9375rem) {
  .section__title-5 {
    font-size: 1.75rem;
  }
}
.section__title-5-p {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .section__title-5-p {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 35.9375rem) {
  .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: 0.9375rem;
  font-weight: 600;
  color: #57556a;
}
.section__title-wrapper-5 p {
  color: #545b65;
  font-weight: 400;
}
.section__title-wrapper-5-p p {
  padding-left: 5rem;
  padding-right: 5rem;
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .section__title-wrapper-5-p p {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media (max-width: 35.9375rem) {
  .section__title-wrapper-5-p p {
    padding-left: 0rem;
    padding-right: 0rem;
  }
}
.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: 0rem 1.25rem 1rem 0rem rgba(254, 12, 125, 0.16);
  -moz-box-shadow: 0rem 1.25rem 1rem 0rem rgba(254, 12, 125, 0.16);
  box-shadow: 0rem 1.25rem 1rem 0rem 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: 0rem 1.25rem 1rem 0rem rgba(2, 60, 253, 0.16);
  -moz-box-shadow: 0rem 1.25rem 1rem 0rem rgba(2, 60, 253, 0.16);
  box-shadow: 0rem 1.25rem 1rem 0rem 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: 0rem 1.25rem 1rem 0rem rgba(246, 157, 3, 0.16);
  -moz-box-shadow: 0rem 1.25rem 1rem 0rem rgba(246, 157, 3, 0.16);
  box-shadow: 0rem 1.25rem 1rem 0rem 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: 0rem 1.25rem 1rem 0rem rgba(106, 47, 255, 0.16);
  -moz-box-shadow: 0rem 1.25rem 1rem 0rem rgba(106, 47, 255, 0.16);
  box-shadow: 0rem 1.25rem 1rem 0rem rgba(106, 47, 255, 0.16);
}

.circle-animation {
  border: 0.0625rem 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% - 0.0625rem);
  left: 50%;
  width: 50%;
  height: 0.0625rem;
  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: 0.5rem;
  height: 0.5rem;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  top: -0.25rem;
  right: -0.25rem;
}
.circle-animation.testimonial {
  top: 21%;
  left: 11%;
  border: 0.0625rem solid rgba(113, 39, 234, 0.14);
  width: 16.875rem;
  height: 16.875rem;
}
.circle-animation.testimonial span::before {
  background: #7127ea;
}
.circle-animation.features {
  top: -5%;
  right: -27.5rem;
  border: 0.0625rem solid rgba(34, 34, 34, 0.2);
  width: 35rem;
  height: 35rem;
}
.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: 0.75rem solid transparent;
  border-right: 0.75rem solid transparent;
  border-bottom: 0.75rem solid #30edfe;
  top: -0.75rem;
  right: -0.75rem;
}
.circle-animation.cta-1 {
  top: -77%;
  left: 0%;
  border: 0.0625rem solid rgba(18, 129, 255, 0.14);
  width: 16.875rem;
  height: 16.875rem;
}
.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: 0.625rem solid transparent;
  border-right: 0.625rem solid transparent;
  border-bottom: 0.625rem solid #fe238b;
  top: -0.625rem;
  right: -0.625rem;
}
.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: 0.625rem solid transparent;
  border-right: 0.625rem solid transparent;
  border-bottom: 0.625rem solid #1281ff;
  top: -0.625rem;
  right: -0.625rem;
}
.circle-animation.cta-3 {
  top: -29%;
  right: 13%;
  border: 0.0625rem solid rgba(18, 129, 255, 0.14);
  width: 16.875rem;
  height: 16.875rem;
}
.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: 1rem;
  height: 1rem;
  top: -0.5rem;
  right: -0.5rem;
}

@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: 0.3125rem;
}
.basic-pagination ul li:not(:first-child) {
  margin: 0 0.3125rem;
}
@media (max-width: 35.9375rem) {
  .basic-pagination ul li {
    margin-bottom: 0.625rem;
  }
}
.basic-pagination ul li a {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  background: #f2f7ff;
  color: #6a727f;
  font-weight: 700;
  font-size: 0.9375rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
}
.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 3.75rem 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 0.625rem 0.9375rem rgba(25, 25, 25, 0.1);
  background: #ffffff;
}
.header__transparent {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 11;
}
.header__right a.login {
  font-size: 0.9375rem;
  color: #070337;
}
.header__right a.login:hover {
  color: #7127ea;
}
.header__border {
  border-top: 0.25rem solid #f385df;
}
.header__border-bottom {
  border-bottom: 0.0625rem solid #f1f1f3;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .header__padding {
    padding: 0.9375rem 0;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .header__padding {
    padding: 0.9375rem 0;
  }
}
@media (max-width: 35.9375rem) {
  .header__padding {
    padding: 0.9375rem 0;
  }
}
.header__shadow {
  -webkit-box-shadow: 0rem 1.875rem 2.5rem 0rem rgba(10, 0, 48, 0.2);
  -moz-box-shadow: 0rem 1.875rem 2.5rem 0rem rgba(10, 0, 48, 0.2);
  box-shadow: 0rem 1.875rem 2.5rem 0rem rgba(10, 0, 48, 0.2);
  position: relative;
  z-index: 9;
}
.header__shadow-2 {
  -webkit-box-shadow: 0rem 0.625rem 1.25rem 0rem rgba(3, 1, 30, 0.06);
  -moz-box-shadow: 0rem 0.625rem 1.25rem 0rem rgba(3, 1, 30, 0.06);
  box-shadow: 0rem 0.625rem 1.25rem 0rem rgba(3, 1, 30, 0.06);
}
.header__info a {
  color: #6d737a;
  font-size: 0.8125rem;
  font-weight: 600;
}
.header__info a:not(:last-child) {
  margin-right: 1.25rem;
}
.header__info a:hover {
  color: #1c7df8;
}
.header__info a i {
  color: #1c7df8;
  padding-right: 0.1875rem;
  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: 0.8125rem;
  font-weight: 600;
  color: #6d737a;
  display: inline-block;
  margin-right: 0.625rem;
  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: 0.9375rem;
}
.header__social ul li a {
  font-size: 0.8125rem;
  color: #6d737a;
}
.header__social ul li a:hover {
  color: #1c7df8;
}
.header__search a {
  font-size: 1.0625rem;
  color: #011224;
}
.header__btn {
  font-size: 0.9375rem;
  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: 62rem) and (max-width: 74.9375rem) {
  .main-menu {
    padding-left: 2.5rem;
  }
}
.main-menu ul li {
  display: inline-block;
  position: relative;
}
.main-menu ul li:not(:last-child) {
  margin-right: 2.1875rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .main-menu ul li:not(:last-child) {
    margin-right: 1.5625rem;
  }
}
.main-menu ul li.has-dropdown > a {
  position: relative;
}
.main-menu ul li.has-dropdown > a::after {
  content: "";
  -webkit-transform: translateY(0.0625rem);
  -moz-transform: translateY(0.0625rem);
  -ms-transform: translateY(0.0625rem);
  transform: translateY(0.0625rem);
  font-size: 0.875rem;
  color: #070337;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  margin-left: 0.3125rem;
  display: inline-block;
}
.main-menu ul li a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #070337;
  display: block;
  padding: 2.1875rem 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: 12.5rem;
  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: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  box-shadow: 0rem 1.875rem 4.375rem 0rem 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: 0.0625rem solid rgba(0, 0, 0, 0.1);
}
.main-menu ul li .submenu li.has-dropdown > a::after {
  right: 1.5625rem;
  -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: 0.625rem 1.5625rem;
  font-size: 0.8125rem;
  position: relative;
  z-index: 1;
}
.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: 62rem) and (max-width: 74.9375rem) {
  .main-menu-2 {
    padding-left: 1.875rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .main-menu-2 ul li:not(:last-child) {
    margin-right: 1.1875rem;
  }
}
.main-menu-2 ul li a {
  padding: 1.75rem 0;
  padding-bottom: 2rem;
}
.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: 2.1875rem;
}
.main-menu-3 ul li a {
  color: #0a0030;
  padding: 1.5625rem 0;
  padding-bottom: 1.8125rem;
}
.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: 1.875rem 0;
  padding-bottom: 2.0625rem;
}
.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: 75rem) and (max-width: 87.4375rem) {
  .main-menu-5 {
    margin-left: 4.375rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .main-menu-5 {
    margin-left: 0rem;
  }
}
.main-menu-5 ul li:not(:last-child) {
  margin-right: 2.5rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .main-menu-5 ul li:not(:last-child) {
    margin-right: 1.5625rem;
  }
}
.main-menu-5 ul li a {
  color: #011224;
  padding: 1.6875rem 0;
  padding-bottom: 1.9375rem;
}
.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: -21.25rem;
  top: 0;
  width: 20rem;
  height: 100%;
  background: #ffffff none repeat scroll 0 0;
  overflow-y: scroll;
  -webkit-box-shadow: -0.3125rem 0 1.25rem -0.3125rem rgba(0, 0, 0, 0.5);
  -moz-box-shadow: -0.3125rem 0 1.25rem -0.3125rem rgba(0, 0, 0, 0.5);
  box-shadow: -0.3125rem 0 1.25rem -0.3125rem 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: 0rem;
}
.sidebar__wrapper {
  position: relative;
  padding: 1.875rem;
}
.sidebar__close {
  position: absolute;
  top: 1.875rem;
  right: 5rem;
}
.sidebar__close-btn {
  transition: all 450ms cubic-bezier(0.4, 0.25, 0.3, 1.3);
  width: 2.5rem;
  height: 2.5rem;
  position: absolute;
  text-align: center;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #222222;
  border: 0.0625rem solid rgba(34, 34, 34, 0.9);
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  z-index: 99;
}
.sidebar__close-btn:focus {
  border: 0.0625rem 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: 0.875rem;
  font-weight: 900;
  line-height: 2.5rem;
  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: 5rem;
  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: 48rem) and (max-width: 61.9375rem) {
  .sidebar-toggle-btn {
    margin-left: 3.125rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .sidebar-toggle-btn {
    margin-left: 1.875rem;
  }
}
@media (max-width: 35.9375rem) {
  .sidebar-toggle-btn {
    margin-left: 1.875rem;
  }
}
.sidebar-toggle-btn .line {
  width: 1.875rem;
  height: 0.1875rem;
  background-color: #7127ea;
  display: block;
  margin: 0.375rem 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: 0.625rem;
}
.sidebar-toggle-btn:hover .line:nth-child(2) {
  width: 1.25rem;
}
.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: 48rem) and (max-width: 61.9375rem) {
  .search-form {
    width: 80%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .search-form {
    width: 80%;
  }
}
@media (max-width: 35.9375rem) {
  .search-form {
    width: 80%;
  }
}

.search-form input {
  width: 100%;
  height: 3.75rem;
  line-height: 3.75rem;
  border: 0.125rem solid #ffffff;
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
  background-color: transparent;
  padding-left: 1.875rem;
  padding-right: 4.0625rem;
  font-size: 0.875rem;
  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: 0.625rem;
  width: 3.125rem;
  height: 100%;
  text-align: center;
  line-height: 3.75rem;
  background-color: transparent;
  color: #ffffff;
  font-size: 1.125rem;
}
.search-form .search-btn:hover {
  cursor: pointer;
  color: #1c7df8;
}

.search-close {
  position: absolute;
  top: -15.625rem;
  right: -9.375rem;
  color: #ffffff;
  font-size: 1.5625rem;
  z-index: 9999;
}
.search-close:hover {
  color: #1c7df8;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .search-close {
    right: 0;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .search-close {
    right: 0;
  }
}
@media (max-width: 35.9375rem) {
  .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: 0.625rem 0;
  color: #222222;
  border-top: 0.0625rem solid #dedee3;
  font-size: 0.8125rem;
  font-weight: 600;
}

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

.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: 0.125rem;
  height: 0.9375rem;
  line-height: 0.875rem;
  border-bottom: none;
  padding: 0;
  display: inline-block;
  width: 2.5rem;
  height: 2.75rem;
  line-height: 2.75rem;
}

.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: 59.375rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__height {
    min-height: 53.125rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__height {
    min-height: 78.125rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__height {
    min-height: 78.125rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__height {
    min-height: 68.75rem;
  }
}
.hero__height-2 {
  min-height: 47.3125rem;
}
.hero__height-3 {
  min-height: 54.375rem;
}
.hero__height-4 {
  min-height: 53.75rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__height-4 {
    min-height: 43.75rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__height-4 {
    min-height: 75rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__height-4 {
    min-height: 75rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__height-4 {
    min-height: 62.5rem;
  }
}
.hero__height-5 {
  min-height: 51.875rem;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__height-5 {
    min-height: 78.125rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__height-5 {
    min-height: 68.75rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__height-5 {
    min-height: 53.125rem;
  }
}
.hero__title {
  font-size: 4.375rem;
  font-weight: 700;
  line-height: 1.14;
  margin-bottom: 1.25rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__title {
    font-size: 3.75rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__title {
    font-size: 3.3125rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__title {
    font-size: 3.25rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__title {
    font-size: 2.125rem;
  }
}
.hero__title-2 {
  font-size: 3.75rem;
  color: #021937;
  font-weight: 800;
  margin-bottom: 1.25rem;
  text-transform: capitalize;
}
@media (max-width: 35.9375rem) {
  .hero__title-2 {
    font-size: 2.1875rem;
  }
}
.hero__title-3 {
  font-size: 4.375rem;
  line-height: 1.14;
  color: #ffffff;
  margin-bottom: 1.25rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__title-3 {
    font-size: 3.4375rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__title-3 {
    font-size: 2.125rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__title-3 {
    font-size: 3.4375rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__title-3 {
    font-size: 2.1875rem;
  }
}
.hero__title-4 {
  font-size: 4.375rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__title-4 {
    font-size: 4.0625rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__title-4 {
    font-size: 2.8125rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__title-4 {
    font-size: 3.125rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__title-4 {
    font-size: 2rem;
  }
}
.hero__title-4 span {
  color: #6c63ff;
}
.hero__title-5 {
  font-size: 4.375rem;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 0.9375rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__title-5 {
    font-size: 3.9375rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__title-5 {
    font-size: 3.125rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__title-5 {
    font-size: 3.75rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__title-5 {
    font-size: 2.1875rem;
  }
}
.hero__pre-title {
  font-size: 0.875rem;
  color: #179d50;
  display: inline-block;
  height: 1.5rem;
  line-height: 1.5rem;
  padding: 0 1.25rem;
  -webkit-border-radius: 0.75rem;
  -moz-border-radius: 0.75rem;
  border-radius: 0.75rem;
  background: rgba(39, 174, 96, 0.14);
  margin-bottom: 0.9375rem;
}
.hero__content {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__content {
    padding-right: 0;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__content {
    padding-right: 0;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__content {
    padding-right: 0;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__content {
    padding-right: 0;
  }
}
@media (max-width: 35.9375rem) {
  .hero__content {
    padding-right: 0;
  }
}
.hero__content p {
  font-size: 1.25rem;
  line-height: 2rem;
  color: #57556a;
  margin-bottom: 2.8125rem;
}
@media (max-width: 35.9375rem) {
  .hero__content p {
    font-size: 1rem;
  }
}
.hero__content-2 a:hover {
  -webkit-box-shadow: 0rem 1.875rem 2.5rem 0rem rgba(1, 24, 55, 0.16);
  -moz-box-shadow: 0rem 1.875rem 2.5rem 0rem rgba(1, 24, 55, 0.16);
  box-shadow: 0rem 1.875rem 2.5rem 0rem rgba(1, 24, 55, 0.16);
}
.hero__content-2 p {
  font-size: 1.0625rem;
  color: #52575e;
  margin-bottom: 2.8125rem;
}
.hero__content-3 {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__content-3 {
    padding-left: 0;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__content-3 {
    padding-left: 2.8125rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__content-3 {
    padding-left: 0;
  }
}
@media (max-width: 35.9375rem) {
  .hero__content-3 {
    padding-left: 0;
  }
}
.hero__content-3 p {
  font-size: 1.25rem;
  line-height: 2rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  padding-right: 7.8125rem;
  margin-bottom: 2.5rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__content-3 p {
    padding-right: 0;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__content-3 p {
    padding-right: 0;
    font-size: 1rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__content-3 p {
    padding-right: 0;
    font-size: 1rem;
  }
}
.hero__content-4 {
  position: relative;
  z-index: 1;
}
@media (max-width: 35.9375rem) {
  .hero__content-4 {
    padding-right: 0;
  }
}
.hero__content-4 p {
  font-size: 1rem;
  color: #5d5c72;
  padding-right: 5rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 35.9375rem) {
  .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: 1.125rem;
  line-height: 2rem;
  padding-right: 2.1875rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 35.9375rem) {
  .hero__content-5 p {
    padding-right: 0;
    font-size: 1rem;
    line-height: 1.5;
  }
}
.hero__content-5 .play-btn {
  font-size: 0.9375rem;
  color: #ffffff;
  font-weight: 600;
  display: inline-block;
}
@media (max-width: 35.9375rem) {
  .hero__content-5 .play-btn {
    margin-top: 0.9375rem;
  }
}
.hero__content-5 .play-btn span {
  padding-right: 0.9375rem;
}
.hero__content-5 .play-btn span i {
  display: inline-block;
  height: 2.5rem;
  width: 2.5rem;
  line-height: 2.375rem;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  font-size: 1.25rem;
  border: 0.0625rem 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: 2.625rem;
}
@media (max-width: 35.9375rem) {
  .hero__client ul li:not(:last-child) {
    margin-right: 1.25rem;
  }
}
.hero__search input {
  width: 23.125rem;
  height: 3.375rem;
  line-height: 3.125rem;
  padding: 0 1.4375rem;
  background: #ffffff;
  outline: none;
  border: 0.125rem solid #ffffff;
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
  -webkit-box-shadow: 0rem 1.25rem 3.75rem 0rem rgba(15, 0, 40, 0.14);
  -moz-box-shadow: 0rem 1.25rem 3.75rem 0rem rgba(15, 0, 40, 0.14);
  box-shadow: 0rem 1.25rem 3.75rem 0rem rgba(15, 0, 40, 0.14);
  margin-right: 1.25rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__search input {
    width: 17.5rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__search input {
    width: 17.5rem;
  }
}
.hero__search input::placeholder {
  font-size: 0.9375rem;
  color: #8f959d;
}
.hero__search input:focus {
  border-color: #7127ea;
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__search button {
    margin-top: 0.9375rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__search button {
    margin-top: 0.9375rem;
  }
}
.hero__search-info {
  margin-top: 1.25rem;
}
.hero__search-info span {
  font-size: 0.875rem;
  color: #5f5d72;
  margin-right: 1.875rem;
}
.hero__search-info span i {
  padding-right: 0.375rem;
}
@media (max-width: 35.9375rem) {
  .hero__search-info span {
    display: block;
    margin-top: 0.625rem;
  }
}
.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: 36rem) and (max-width: 47.9375rem) {
  .hero__shape-2 img.hero-2-flower {
    bottom: -13%;
  }
}
@media (max-width: 35.9375rem) {
  .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: 48rem) and (max-width: 61.9375rem) {
  .hero__shape-4 img.smile-2 {
    right: 13%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__shape-4 img.smile-2 {
    right: 9%;
  }
}
@media (max-width: 35.9375rem) {
  .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: 62rem) and (max-width: 74.9375rem) {
  .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: 48rem) and (max-width: 61.9375rem) {
  .hero__shape-4 img.cross-2 {
    top: 8%;
  }
}
@media (max-width: 35.9375rem) {
  .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: 35.9375rem) {
  .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: 87.5rem) and (max-width: 100rem) {
  .hero__thumb {
    margin-left: 0;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__thumb {
    margin-left: 0;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__thumb {
    margin-left: 0;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__thumb {
    margin-left: 6.25rem;
    margin-top: 5rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__thumb {
    margin-left: 5rem;
    margin-top: 5rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__thumb {
    margin-left: 0;
    margin-top: 5rem;
  }
}
.hero__thumb-wrapper {
  z-index: 1;
  width: 35.625rem;
  height: 35.625rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__thumb-wrapper {
    width: 31.25rem;
    height: 31.25rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__thumb-wrapper {
    width: 28.125rem;
    height: 28.125rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__thumb-wrapper {
    width: 28.125rem;
    height: 28.125rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__thumb-wrapper {
    width: 28.125rem;
    height: 28.125rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__thumb-wrapper {
    width: 18.125rem;
    height: 18.125rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__thumb-wrapper img {
    width: 100%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__thumb-wrapper img {
    width: 100%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__thumb-wrapper img {
    width: 100%;
  }
}
@media (max-width: 35.9375rem) {
  .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: 0rem 2.5rem 5rem 0rem rgba(7, 26, 90, 0.12);
  -moz-box-shadow: 0rem 2.5rem 5rem 0rem rgba(7, 26, 90, 0.12);
  box-shadow: 0rem 2.5rem 5rem 0rem rgba(7, 26, 90, 0.12);
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .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: 0.6875rem;
  right: 1.9375rem;
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  animation: none;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__thumb-shape.shape-1 {
    top: 1.875rem;
    right: -4.6875rem;
  }
}
.hero__thumb-shape.shape-2 {
  top: 2.1875rem;
  right: 3.75rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__thumb-shape.shape-2 {
    top: 4.375rem;
    right: -4.375rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__thumb-shape.shape-2 {
    top: -0.125rem;
    right: -0.9375rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__thumb-shape.shape-2 {
    width: 12.5rem;
    height: auto;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__thumb-shape.shape-2 {
    width: 12.5rem;
    height: auto;
  }
}
@media (max-width: 35.9375rem) {
  .hero__thumb-shape.shape-2 {
    width: 5.9375rem;
    height: auto;
  }
}
.hero__thumb-shape.shape-3 {
  top: 1.25rem;
  left: -4.375rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__thumb-shape.shape-3 {
    top: 2.1875rem;
    left: -1.875rem;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__thumb-shape.shape-3 {
    top: -2.0625rem;
    left: -4.375rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__thumb-shape.shape-3 {
    top: -1.25rem;
    left: -1.9375rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__thumb-shape.shape-3 {
    width: 9.375rem;
    height: auto;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__thumb-shape.shape-3 {
    width: 9.375rem;
    height: auto;
  }
}
@media (max-width: 35.9375rem) {
  .hero__thumb-shape.shape-3 {
    width: 5rem;
    height: auto;
    left: 0;
  }
}
.hero__thumb-shape.shape-4 {
  bottom: -5.5rem;
  left: -1.4375rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__thumb-shape.shape-4 {
    bottom: -12.5rem;
    left: 0rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__thumb-shape.shape-4 {
    bottom: -7.375rem;
    left: -1.4375rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__thumb-shape.shape-4 {
    bottom: -1.8125rem;
    left: -1.4375rem;
    width: 14.0625rem;
  }
}
.hero__thumb-shape.shape-5 {
  bottom: 7.1875rem;
  left: -13.75rem;
}
@media only screen and (min-width: 87.5rem) and (max-width: 100rem) {
  .hero__thumb-shape.shape-5 {
    display: none;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__thumb-shape.shape-5 {
    display: none;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__thumb-shape.shape-5 {
    display: none;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__thumb-shape.shape-5 {
    left: -6.25rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__thumb-shape.shape-5 {
    left: -6.25rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__thumb-shape.shape-5 {
    left: auto;
    width: 6.25rem;
    right: 0;
    bottom: -2.1875rem;
  }
}
.hero__thumb-inner {
  width: 34.375rem;
  height: 25rem;
}
@media only screen and (min-width: 87.5rem) and (max-width: 100rem) {
  .hero__thumb-inner {
    margin-left: 0;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__thumb-inner {
    margin-left: 0;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__thumb-inner {
    height: auto;
    width: auto;
    margin-left: 0;
  }
}
@media (max-width: 35.9375rem) {
  .hero__thumb-inner {
    height: auto;
    width: auto;
    margin-left: 0;
  }
}
.hero__thumb-inner img {
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
  -webkit-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.12);
  -moz-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.12);
  box-shadow: 0rem 1.875rem 4.375rem 0rem 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: 36rem) and (max-width: 47.9375rem) {
  .hero__thumb-inner img.hero-2-thumb {
    width: 100%;
  }
}
@media (max-width: 35.9375rem) {
  .hero__thumb-inner img.hero-2-thumb {
    width: 100%;
  }
}
.hero__thumb-inner img.hero-2-girl {
  position: absolute;
  left: -6.25rem;
  bottom: -1.4375rem;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
@media (max-width: 35.9375rem) {
  .hero__thumb-inner img.hero-2-girl {
    display: none;
  }
}
.hero__thumb-inner img.hero-2-thumb-sm {
  position: absolute;
  left: 4.1875rem;
  bottom: -2.5rem;
  -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: 35.9375rem) {
  .hero__thumb-inner img.hero-2-thumb-sm {
    display: none;
  }
}
.hero__thumb-inner img.hero-2-thumb-sm-2 {
  position: absolute;
  right: -5.9375rem;
  bottom: 3.125rem;
  -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: 75rem) and (max-width: 87.4375rem) {
  .hero__thumb-inner img.hero-2-thumb-sm-2 {
    right: -1.875rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__thumb-inner img.hero-2-thumb-sm-2 {
    right: -1.875rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__thumb-inner img.hero-2-thumb-sm-2 {
    right: -1.875rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__thumb-inner img.hero-2-thumb-sm-2 {
    display: none;
  }
}
.hero__thumb-inner img.hero-2-thumb-sm-3 {
  position: absolute;
  right: -2.1875rem;
  top: -4.375rem;
  -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: 36rem) and (max-width: 47.9375rem) {
  .hero__thumb-inner img.hero-2-thumb-sm-3 {
    right: 1.875rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__thumb-inner img.hero-2-thumb-sm-3 {
    display: none;
  }
}
.hero__thumb-inner img.hero-2-circle {
  position: absolute;
  right: -12.5rem;
  bottom: -8.4375rem;
  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: 87.5rem) and (max-width: 100rem) {
  .hero__thumb-inner img.hero-2-circle {
    right: -5rem;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__thumb-inner img.hero-2-circle {
    right: -1.875rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__thumb-inner img.hero-2-circle {
    right: -1.875rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__thumb-inner img.hero-2-circle {
    right: -1.875rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__thumb-inner img.hero-2-circle {
    right: -0.625rem;
  }
}
.hero__thumb-inner img.hero-2-circle-2 {
  position: absolute;
  right: 8.75rem;
  top: -5.125rem;
  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: -7.1875rem;
  top: -8.75rem;
  z-index: -1;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__thumb-inner img.hero-2-leaf {
    right: -1.875rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__thumb-inner img.hero-2-leaf {
    right: -1.875rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__thumb-inner img.hero-2-leaf {
    right: -1.875rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__thumb-inner img.hero-2-leaf {
    right: 0rem;
  }
}
.hero__thumb-3 {
  position: relative;
  z-index: 1;
}
.hero__thumb-3 img.hero-phone {
  margin-left: -3.125rem;
}
@media (max-width: 35.9375rem) {
  .hero__thumb-3 img.hero-phone {
    width: 100%;
  }
}
.hero__thumb-3 img.hero-3-gradient {
  position: absolute;
  right: 0;
  top: 5.625rem;
  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: 4.0625rem;
  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: 4.8125rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__thumb-4-wrapper {
    margin-left: 0;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__thumb-4-wrapper {
    margin-left: 0;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__thumb-4-wrapper {
    margin-top: 3.75rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__thumb-4-wrapper {
    margin-top: 3.75rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__thumb-4-wrapper {
    margin-left: 1.875rem;
    margin-top: 3.75rem;
  }
}
.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: 87.5rem) and (max-width: 100rem) {
  .hero__thumb-4 img.girl {
    width: 100%;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__thumb-4 img.girl {
    width: 100%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__thumb-4 img.girl {
    width: 100%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__thumb-4 img.girl {
    width: 100%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__thumb-4 img.girl {
    width: 100%;
  }
}
@media (max-width: 35.9375rem) {
  .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: 87.5rem) and (max-width: 100rem) {
  .hero__thumb-4 img.flower {
    right: -25%;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__thumb-4 img.flower {
    right: -5%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__thumb-4 img.flower {
    right: -5%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__thumb-4 img.flower {
    right: 2%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__thumb-4 img.flower {
    right: 2%;
  }
}
@media (max-width: 35.9375rem) {
  .hero__thumb-4 img.flower {
    display: none;
  }
}
.hero__thumb-5 {
  z-index: 1;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__thumb-5 {
    margin-top: 6.25rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__thumb-5 {
    margin-top: 6.25rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__thumb-5 {
    margin-top: 3.125rem;
  }
}
.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: -6.6875rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__thumb-5 img.hero-5-thumb {
    margin-right: 0;
    width: 100%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__thumb-5 img.hero-5-thumb {
    margin-right: 0;
    width: 100%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__thumb-5 img.hero-5-thumb {
    margin-right: 0;
    width: 100%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__thumb-5 img.hero-5-thumb {
    margin-right: 0;
    width: 100%;
  }
}
@media (max-width: 35.9375rem) {
  .hero__thumb-5 img.hero-5-thumb {
    margin-right: 0;
    width: 100%;
  }
}
.hero__thumb-5 img.hero-5-shape {
  position: absolute;
  right: -8.125rem;
  top: -1.875rem;
  z-index: -1;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .hero__thumb-5 img.hero-5-shape {
    right: 0;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .hero__thumb-5 img.hero-5-shape {
    right: 0;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__thumb-5 img.hero-5-shape {
    right: 0;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .hero__thumb-5 img.hero-5-shape {
    right: 0;
  }
}
@media (max-width: 35.9375rem) {
  .hero__thumb-5 img.hero-5-shape {
    display: none;
  }
}
.hero__app ul li {
  display: inline-block;
  margin-right: 1.25rem;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .hero__app ul li {
    margin-bottom: 1.875rem;
  }
}
@media (max-width: 35.9375rem) {
  .hero__app ul li {
    margin-bottom: 1.875rem;
  }
}
.hero__app ul li a {
  height: 3.75rem;
  text-align: center;
  padding: 0 1.5rem;
  border: 0.125rem solid rgba(255, 255, 255, 0.3);
  background: rgba(127, 108, 193, 0.1);
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
}
.hero__app ul li a:hover, .hero__app ul li a.active {
  background: #0a0030;
  border-color: #0a0030;
  -webkit-box-shadow: 0rem 1.25rem 1.875rem 0rem rgba(10, 0, 48, 0.3);
  -moz-box-shadow: 0rem 1.25rem 1.875rem 0rem rgba(10, 0, 48, 0.3);
  box-shadow: 0rem 1.25rem 1.875rem 0rem rgba(10, 0, 48, 0.3);
}
.hero__app-icon {
  margin-right: 0.9375rem;
}
.hero__app-icon i {
  font-size: 1.5rem;
  color: #ffffff;
}
.hero__app-content h5 {
  font-size: 0.75rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0;
}
.hero__app-content span {
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
}
.hero__features ul {
  margin-bottom: 1.125rem;
}
.hero__features ul li {
  font-size: 0.9375rem;
  color: #0f1432;
  font-weight: 600;
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.9375rem;
}
.hero__features ul li:not(:last-child) {
  margin-right: 2.5rem;
}
.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: 0.9375rem;
  color: #0f1432;
  font-family: "ElegantIcons";
}
@media (max-width: 35.9375rem) {
  .hero__btn-4 a {
    margin-bottom: 1.25rem;
  }
}

@keyframes hero-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-1.875rem);
  }
  60% {
    transform: translateY(-0.9375rem);
  }
}
@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(-1.25rem);
  }
  100% {
    transform: translateY(0rem);
  }
}
@keyframes hero-3-dot-2 {
  0% {
    transform: translateY(-3.125rem);
  }
  100% {
    transform: translateY(0rem);
  }
}
@keyframes hero-3-dot-4 {
  0% {
    transform: translateY(-2.5rem);
  }
  100% {
    transform: translateY(0rem);
  }
}
@keyframes hero-thumb-sm-animation {
  0% {
    -webkit-transform: translateY(-1.25rem) translateX(3.125rem);
    -moz-transform: translateY(-1.25rem) translateX(3.125rem);
    -ms-transform: translateY(-1.25rem) translateX(3.125rem);
    transform: translateY(-1.25rem) translateX(3.125rem);
  }
  100% {
    -webkit-transform: translateY(-1.25rem) translateX(0rem);
    -moz-transform: translateY(-1.25rem) translateX(0rem);
    -ms-transform: translateY(-1.25rem) translateX(0rem);
    transform: translateY(-1.25rem) translateX(0rem);
  }
}
@keyframes hero-thumb-sm-2-animation {
  0% {
    -webkit-transform: translateY(-3.125rem);
    -moz-transform: translateY(-3.125rem);
    -ms-transform: translateY(-3.125rem);
    transform: translateY(-3.125rem);
  }
  100% {
    -webkit-transform: translateY(0rem);
    -moz-transform: translateY(0rem);
    -ms-transform: translateY(0rem);
    transform: translateY(0rem);
  }
}
@keyframes hero-thumb-sm-3-animation {
  0% {
    -webkit-transform: translateX(-3.125rem);
    -moz-transform: translateX(-3.125rem);
    -ms-transform: translateX(-3.125rem);
    transform: translateX(-3.125rem);
  }
  100% {
    -webkit-transform: translateX(0rem);
    -moz-transform: translateX(0rem);
    -ms-transform: translateX(0rem);
    transform: translateX(0rem);
  }
}
@keyframes hero-3-dot {
  0% {
    -webkit-transform: translateX(-3.125rem);
    -moz-transform: translateX(-3.125rem);
    -ms-transform: translateX(-3.125rem);
    transform: translateX(-3.125rem);
  }
  100% {
    -webkit-transform: translateX(0rem);
    -moz-transform: translateX(0rem);
    -ms-transform: translateX(0rem);
    transform: translateX(0rem);
  }
}
@keyframes heroImg {
  0% {
    transform: translateY(-1.25rem);
  }
  100% {
    transform: translateY(0rem);
  }
}
@keyframes hero-heroImg {
  0% {
    -webkit-transform: translateX(-1.25rem);
    -moz-transform: translateX(-1.25rem);
    -ms-transform: translateX(-1.25rem);
    transform: translateX(-1.25rem);
  }
  100% {
    -webkit-transform: translateX(0rem);
    -moz-transform: translateX(0rem);
    -ms-transform: translateX(0rem);
    transform: translateX(0rem);
  }
}
@keyframes hero-circle-2 {
  0% {
    -webkit-transform: translateX(-6.25rem);
    -moz-transform: translateX(-6.25rem);
    -ms-transform: translateX(-6.25rem);
    transform: translateX(-6.25rem);
  }
  100% {
    -webkit-transform: translateX(0rem);
    -moz-transform: translateX(0rem);
    -ms-transform: translateX(0rem);
    transform: translateX(0rem);
  }
}
@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: 1.25rem;
  -moz-border-radius: 1.25rem;
  border-radius: 1.25rem;
  -webkit-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  position: relative;
  padding: 2.5rem 3.125rem;
  padding-bottom: 2.1875rem;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .services__item {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
.services__item.active, .services__item:hover {
  box-shadow: 0rem 1.25rem 3.75rem 0rem rgba(15, 0, 40, 0.2), inset 0rem 0.1875rem 0rem 0rem rgba(113, 39, 234, 0.004);
}
.services__item-2 {
  padding: 3.125rem 2.9375rem;
  padding-right: 4.375rem;
  -webkit-box-shadow: 0rem 2.5rem 4.375rem 0rem rgba(1, 19, 44, 0.08);
  -moz-box-shadow: 0rem 2.5rem 4.375rem 0rem rgba(1, 19, 44, 0.08);
  box-shadow: 0rem 2.5rem 4.375rem 0rem rgba(1, 19, 44, 0.08);
  -webkit-border-radius: 1.25rem;
  -moz-border-radius: 1.25rem;
  border-radius: 1.25rem;
  position: relative;
  z-index: 1;
}
.services__item-3 {
  padding: 2.5rem 4.6875rem;
  -webkit-box-shadow: 0rem 0.625rem 3.75rem 0rem rgba(10, 0, 48, 0.08);
  -moz-box-shadow: 0rem 0.625rem 3.75rem 0rem rgba(10, 0, 48, 0.08);
  box-shadow: 0rem 0.625rem 3.75rem 0rem rgba(10, 0, 48, 0.08);
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .services__item-3 {
    padding-left: 2.8125rem;
    padding-right: 2.8125rem;
  }
}
@media (max-width: 35.9375rem) {
  .services__item-3 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
.services__item-3:hover {
  -webkit-transform: translateY(-1.25rem);
  -moz-transform: translateY(-1.25rem);
  -ms-transform: translateY(-1.25rem);
  transform: translateY(-1.25rem);
}
.services__item-4 {
  padding: 2.5rem 3.75rem;
  -webkit-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .services__item-4 {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
}
@media (max-width: 35.9375rem) {
  .services__item-4 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
.services__item-5 {
  border: 0.125rem solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  padding: 1.25rem 1.875rem;
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
}
.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: 0.625rem;
  border-radius: 1.25rem;
  background: #7127ea;
  height: 50%;
  z-index: -1;
}
.services__inner:hover::before, .services__inner.active::before {
  top: -0.1875rem;
}
.services__inner-2::before {
  background: #2f80ed;
}
.services__inner-2:hover::before, .services__inner-2.active::before {
  top: -0.1875rem;
}
.services__icon {
  min-height: 9.0625rem;
}
.services__icon-2 {
  margin-bottom: 1.375rem;
}
.services__icon-2 > img {
  height: 3.125rem;
}
.services__icon-3 {
  min-height: 9.8125rem;
  margin-bottom: 2.0625rem;
}
.services__thumb-4 {
  min-height: 10rem;
}
.services__img-5 img {
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
}
.services__title {
  font-size: 1.375rem;
  color: #070337;
}
.services__title a:hover {
  color: #7127ea;
}
.services__title-2 {
  font-size: 1.375rem;
  color: #021937;
  margin-bottom: 0.8125rem;
}
.services__title-2 a:hover {
  color: #2f80ed;
}
.services__title-3 {
  color: #0a0030;
  font-size: 1.375rem;
  margin-bottom: 0.625rem;
}
.services__title-3:hover {
  color: #5d41c2;
}
.services__title-4 {
  color: #0f1432;
  font-size: 1.375rem;
  padding-right: 13.4375rem;
  margin-bottom: 0.75rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .services__title-4 {
    padding-right: 11.25rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .services__title-4 {
    padding-right: 5.625rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .services__title-4 {
    padding-right: 0rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .services__title-4 {
    padding-right: 0rem;
  }
}
@media (max-width: 35.9375rem) {
  .services__title-4 {
    padding-right: 0rem;
  }
}
.services__title-4 a:hover {
  color: #6c63ff;
}
.services__title-5 {
  color: #ffffff;
  font-size: 1.25rem;
  margin-bottom: 0;
}
.services__title-6 {
  font-size: 1.625rem;
  font-weight: 700;
  color: #011224;
  margin-bottom: 0.9375rem;
}
.services__content p {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  margin-bottom: 0;
}
.services__content-2 p {
  margin-bottom: 0;
}
.services__content-3 p {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #625e6e;
}
.services__content-4 {
  padding-top: 2rem;
}
.services__content-4 p {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #6c6a8a;
  margin-bottom: 1.25rem;
  padding-right: 3.125rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .services__content-4 p {
    padding-right: 0rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .services__content-4 p {
    padding-right: 0rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .services__content-4 p {
    padding-right: 0rem;
  }
}
@media (max-width: 35.9375rem) {
  .services__content-4 p {
    padding-right: 0rem;
  }
}
.services__content-4 .link-btn:hover {
  color: #6c63ff;
}
.services__content-5 i {
  color: #ffffff;
  font-size: 1.125rem;
  margin-right: 1.0625rem;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .services__content-6 {
    padding-right: 1.875rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .services__content-6 {
    padding-right: 0rem;
  }
}
@media (max-width: 35.9375rem) {
  .services__content-6 {
    padding-right: 0rem;
  }
}
.services__content-6 p {
  color: #6a727f;
  margin-bottom: 1.5625rem;
}
.services__shape img {
  position: absolute;
  z-index: -1;
}
.services__shape img.services-circle-1 {
  top: 8%;
  left: 0;
  opacity: 0.5;
}
@media (max-width: 35.9375rem) {
  .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: 75rem) and (max-width: 87.4375rem) {
  .services__shape img.services-triangle {
    right: 7%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .services__shape img.services-triangle {
    right: 8%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .services__shape img.services-triangle {
    right: 10%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .services__shape img.services-triangle {
    right: 11%;
  }
}
@media (max-width: 35.9375rem) {
  .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: 1.5rem;
  color: #ffffff;
}
.services__text h3 {
  font-size: 1.875rem;
  margin-bottom: 0.9375rem;
}
.services__text p {
  margin-bottom: 2.8125rem;
}
.services__text p span {
  color: #7127ea;
  position: relative;
}
.services__text p span::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: -0.125rem;
  width: 100%;
  height: 0.125rem;
  background: #7127ea;
}
.services__text h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.services__list ul li {
  font-size: 1rem;
  position: relative;
  padding-left: 1.875rem;
  margin-bottom: 0.9375rem;
}
.services__list ul li::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0rem;
  font-family: "Font Awesome 5 Pro";
  font-size: 1rem;
  color: #7127ea;
}
.services__widget {
  padding: 2.6875rem 2.5rem;
  padding-bottom: 2.8125rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .services__widget {
    padding-left: 1.5625rem;
    padding-right: 1.5625rem;
  }
}
@media (max-width: 35.9375rem) {
  .services__widget {
    padding-left: 1.5625rem;
    padding-right: 1.5625rem;
  }
}
.services__widget-title h4 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}
.services__link ul li {
  margin-bottom: 0.9375rem;
}
.services__link ul li:last-child {
  margin-bottom: 0;
}
.services__link ul li a {
  padding-left: 1.25rem;
  position: relative;
}
.services__link ul li a::after {
  position: absolute;
  content: "";
  left: 0;
  top: -0.125rem;
  font-family: "Font Awesome 5 Pro";
  font-size: 1rem;
  color: #7127ea;
}
.services__link ul li a:hover {
  color: #7127ea;
}
.services__link ul li a:hover::after {
  left: 0.3125rem;
}
.services__form input {
  width: 100%;
  height: 3.125rem;
  border: 0.125rem solid transparent;
  background: #ffffff;
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
  padding: 0 1.25rem;
  margin-bottom: 1.25rem;
}
.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: 0.9375rem 1.875rem;
  position: relative;
}
.services__action::after {
  position: absolute;
  content: "";
  top: auto;
  left: 0;
  bottom: 0;
  width: 0.1875rem;
  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: 0.9375rem;
}
.services__action a:hover {
  color: #7127ea;
}
@media (max-width: 35.9375rem) {
  .services__sidebar {
    margin-right: 0;
  }
}

@keyframes services-triangle {
  0% {
    -webkit-transform: rotate(0deg) translateX(-3.125rem);
    -moz-transform: rotate(0deg) translateX(-3.125rem);
    -ms-transform: rotate(0deg) translateX(-3.125rem);
    transform: rotate(0deg) translateX(-3.125rem);
  }
  100% {
    -webkit-transform: rotate(360deg) translateY(6.25rem);
    -moz-transform: rotate(360deg) translateY(6.25rem);
    -ms-transform: rotate(360deg) translateY(6.25rem);
    transform: rotate(360deg) translateY(6.25rem);
  }
}
@keyframes services-circle-2 {
  0% {
    transform: translateY(0rem);
  }
  100% {
    transform: translateY(-6.25rem);
  }
}
@keyframes services-dot {
  0% {
    transform: translateY(0rem);
  }
  100% {
    transform: translateY(6.25rem);
  }
}
/*----------------------------------------*/
/*  05. ABOUT CSS START
/*----------------------------------------*/
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .about__wrapper {
    margin-top: 3.125rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .about__wrapper {
    margin-top: 3.125rem;
  }
}
@media (max-width: 35.9375rem) {
  .about__wrapper {
    margin-top: 3.125rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .about__wrapper-2 {
    margin-left: 0;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .about__wrapper-2 {
    margin-left: 0;
  }
}
@media (max-width: 35.9375rem) {
  .about__wrapper-2 {
    margin-left: 0;
  }
}
.about__wrapper ul {
  margin-bottom: 2.5rem;
}
.about__wrapper ul li {
  padding-left: 1.5rem;
  position: relative;
}
.about__wrapper ul li:not(:last-child) {
  margin-bottom: 0.9375rem;
}
.about__wrapper ul li::after {
  position: absolute;
  content: "";
  font-family: "Font Awesome 5 Pro";
  font-size: 0.9375rem;
  color: #6c6a8a;
  left: 0;
  top: 0.0625rem;
}
.about__wrapper ul li:hover {
  padding-left: 1.25rem;
  color: #7127ea;
}
.about__wrapper ul li:hover::after {
  color: #7127ea;
}
.about__thumb {
  bottom: 0;
  right: 5rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .about__thumb {
    right: 0.9375rem;
  }
}
@media (max-width: 35.9375rem) {
  .about__thumb {
    right: 0.9375rem;
  }
}
.about__thumb img {
  -webkit-box-shadow: 0rem 1.25rem 1.25rem 0rem rgba(86, 5, 46, 0.2);
  -moz-box-shadow: 0rem 1.25rem 1.25rem 0rem rgba(86, 5, 46, 0.2);
  box-shadow: 0rem 1.25rem 1.25rem 0rem rgba(86, 5, 46, 0.2);
  -webkit-border-radius: 1.25rem 1.25rem 0 0;
  -moz-border-radius: 1.25rem 1.25rem 0 0;
  border-radius: 1.25rem 1.25rem 0 0;
}
@media (max-width: 35.9375rem) {
  .about__thumb img.about-big {
    width: 100%;
  }
}
.about__thumb img.about-sm {
  position: absolute;
  bottom: 7.1875rem;
  left: -5.625rem;
  -webkit-box-shadow: 0rem 1.25rem 1.25rem 0rem rgba(86, 5, 46, 0.2);
  -moz-box-shadow: 0rem 1.25rem 1.25rem 0rem rgba(86, 5, 46, 0.2);
  box-shadow: 0rem 1.25rem 1.25rem 0rem rgba(86, 5, 46, 0.2);
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
  -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: 35.9375rem) {
  .about__thumb img.about-sm {
    left: 0.9375rem;
  }
}
.about__thumb img.about-sm.about-sm-2 {
  right: -5.625rem;
  left: auto;
  bottom: 8.3125rem;
}
@media (max-width: 35.9375rem) {
  .about__thumb img.about-sm.about-sm-2 {
    right: -0.9375rem;
  }
}
.about__thumb-2 {
  right: auto;
  left: 5rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .about__thumb-2 {
    left: 1.5625rem;
  }
}
@media (max-width: 35.9375rem) {
  .about__thumb-2 {
    left: 0.9375rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .about__thumb-3 img {
    width: 100%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .about__thumb-3 img {
    width: 100%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .about__thumb-3 img {
    width: 100%;
  }
}
@media (max-width: 35.9375rem) {
  .about__thumb-3 img {
    width: 100%;
  }
}
.about__thumb-4 {
  z-index: 1;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .about__thumb-4 img.about-phone {
    margin-right: 2.5rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .about__thumb-4 img.about-phone {
    margin-right: 0rem;
    margin-left: -3.125rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .about__thumb-4 img.about-phone {
    margin-right: 0rem;
    margin-left: -3.125rem;
  }
}
@media (max-width: 35.9375rem) {
  .about__thumb-4 img.about-phone {
    width: 100%;
    margin-right: 0rem;
    margin-left: -3.125rem;
  }
}
.about__thumb-4 img.about-4-circle {
  position: absolute;
  bottom: 12%;
  right: 0;
  z-index: -1;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .about__thumb-4 img.about-4-circle {
    width: 100%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .about__thumb-4 img.about-4-circle {
    width: 100%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .about__thumb-4 img.about-4-circle {
    width: 100%;
  }
}
@media (max-width: 35.9375rem) {
  .about__thumb-4 img.about-4-circle {
    width: 100%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .about__thumb-wrapper {
    margin-left: 0;
    margin-right: 0;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .about__thumb-wrapper {
    margin-left: 0;
    margin-right: 0;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .about__thumb-wrapper {
    margin-left: 0;
    margin-right: 0;
  }
}
@media (max-width: 35.9375rem) {
  .about__thumb-wrapper {
    margin-left: 0;
    margin-right: 0;
  }
}
.about__thumb-wrapper > img {
  max-width: 100%;
  border-radius: 0.5rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .about__thumb-wrapper > img {
    width: 100%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .about__thumb-wrapper > img {
    width: 100%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .about__thumb-wrapper-2 {
    margin-left: 0;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .about__thumb-wrapper-2 {
    margin-left: 0;
  }
}
@media (max-width: 35.9375rem) {
  .about__thumb-wrapper-2 {
    margin-left: 0;
  }
}
.about__thumb-wrapper-2 img {
  -webkit-border-radius: 1.25rem;
  -moz-border-radius: 1.25rem;
  border-radius: 1.25rem;
}
.about__thumb-wrapper-5 img {
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
  -webkit-box-shadow: 0rem 1.875rem 3.75rem 0rem rgba(2, 0, 35, 0.1);
  -moz-box-shadow: 0rem 1.875rem 3.75rem 0rem rgba(2, 0, 35, 0.1);
  box-shadow: 0rem 1.875rem 3.75rem 0rem rgba(2, 0, 35, 0.1);
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .about__thumb-wrapper-5 img.about-thumb-5-big {
    width: 100%;
    margin-left: 0;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .about__thumb-wrapper-5 img.about-thumb-5-big {
    width: 100%;
    margin-left: 0;
  }
}
@media (max-width: 35.9375rem) {
  .about__thumb-wrapper-5 img.about-thumb-5-big {
    width: 100%;
    margin-left: 0;
  }
}
.about__thumb-wrapper-5 img.about-5-sm {
  margin-left: -1.875rem;
  margin-top: -11.25rem;
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .about__thumb-wrapper-5 img.about-5-sm {
    margin-left: 1.875rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .about__thumb-wrapper-5 img.about-5-sm {
    margin-left: 1.875rem;
  }
}
@media (max-width: 35.9375rem) {
  .about__thumb-wrapper-5 img.about-5-sm {
    margin-top: -5.3125rem;
    width: 10.625rem;
    height: 10.625rem;
    margin-left: 1.875rem;
  }
}
.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: 35.9375rem) {
  .about__shape img.about-circle-2 {
    max-width: 100%;
    top: -10%;
  }
}
.about__shape img.about-circle-3 {
  top: -18%;
  right: 0%;
}
@media (max-width: 35.9375rem) {
  .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: 35.9375rem) {
  .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: 35.9375rem) {
  .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: 62rem) and (max-width: 74.9375rem) {
  .about__content-3 {
    padding-top: 0;
  }
}
.about__content-4 ul {
  margin-bottom: 2.5rem;
}
.about__content-4 ul li {
  padding-left: 1.5rem;
  position: relative;
  color: #625e6e;
  font-weight: 600;
  font-size: 0.9375rem;
}
.about__content-4 ul li:not(:last-child) {
  margin-bottom: 0.9375rem;
}
.about__content-4 ul li::after {
  position: absolute;
  content: "";
  font-family: "Font Awesome 5 Pro";
  font-size: 0.9375rem;
  color: #625e6e;
  left: 0;
  top: 0.0625rem;
  font-weight: 400;
}
.about__content-4 ul li:hover {
  padding-left: 1.25rem;
  color: #5d41c2;
}
.about__content-4 ul li:hover::after {
  color: #5d41c2;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .about__content-5 {
    margin-top: 3.125rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .about__content-5 {
    margin-top: 3.125rem;
  }
}
@media (max-width: 35.9375rem) {
  .about__content-5 {
    margin-top: 3.125rem;
  }
}
.about__list ul {
  margin-bottom: 2.5rem;
}
.about__list ul li {
  padding-left: 1.5rem;
  position: relative;
  color: #011224;
  font-weight: 700;
}
.about__list ul li:not(:last-child) {
  margin-bottom: 0.9375rem;
}
.about__list ul li::after {
  position: absolute;
  content: "";
  font-family: "Font Awesome 5 Pro";
  font-size: 0.9375rem;
  color: #1c7df8;
  left: 0;
  top: 0.0625rem;
  font-weight: 500;
}
.about__list ul li:hover {
  padding-left: 1.25rem;
  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: 4.5rem;
}
@media (max-width: 35.9375rem) {
  .about__counter ul li:not(:last-child) {
    margin-right: 1.875rem;
  }
}
.about__counter-item h4 {
  font-size: 1.875rem;
  font-weight: 700;
  color: #011224;
  margin-bottom: 0rem;
}
.about__counter-item p {
  color: #545b65;
  font-weight: 600;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .about__call-features {
    margin-top: 6.25rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .about__call-features {
    margin-top: 6.25rem;
  }
}
@media (max-width: 35.9375rem) {
  .about__call-features {
    margin-top: 6.25rem;
  }
}
.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: -8.9375rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .about__call-thumb {
    margin-left: 0;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .about__call-thumb {
    margin-left: 0;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .about__call-thumb {
    margin-left: 0;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .about__call-thumb {
    margin-left: 0;
  }
}
@media (max-width: 35.9375rem) {
  .about__call-thumb {
    margin-left: 0;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .about__call-thumb img {
    width: 100%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .about__call-thumb img {
    width: 100%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .about__call-thumb img {
    width: 100%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .about__call-thumb img {
    width: 100%;
  }
}
@media (max-width: 35.9375rem) {
  .about__call-thumb img {
    width: 100%;
  }
}
.about__call-thumb img.about-call-big {
  -webkit-box-shadow: 0rem 1.875rem 3.75rem 0rem rgba(15, 20, 50, 0.2);
  -moz-box-shadow: 0rem 1.875rem 3.75rem 0rem rgba(15, 20, 50, 0.2);
  box-shadow: 0rem 1.875rem 3.75rem 0rem rgba(15, 20, 50, 0.2);
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
}
.about__call-action {
  position: absolute;
  bottom: 2.8125rem;
  left: 7.1875rem;
  width: 100%;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .about__call-action {
    left: 5rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .about__call-action {
    left: 2.5rem;
    width: 80%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .about__call-action {
    left: 2.5rem;
    width: 80%;
  }
}
@media (max-width: 35.9375rem) {
  .about__call-action {
    left: 0.3125rem;
    width: 95%;
  }
}
.about__call-action ul li {
  display: inline-block;
  margin: 0 0.75rem;
}
@media (max-width: 35.9375rem) {
  .about__call-action ul li {
    margin: 0 0.3125rem;
  }
}
.about__call-action ul li a {
  font-size: 1.0625rem;
  color: #ffffff;
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  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: 3.3125rem;
  height: 3.3125rem;
  line-height: 3.3125rem;
  background: #e51515;
  position: relative;
  z-index: 1;
}
.about__call-action ul li.hand-up a::after {
  position: absolute;
  content: "";
  top: -0.25rem;
  left: -0.25rem;
  width: calc(100% + 0.5rem);
  height: calc(100% + 0.5rem);
  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: 2.1875rem 1.875rem;
  padding-bottom: 2.8125rem;
  position: absolute;
  right: 0;
  bottom: -4.375rem;
  -webkit-box-shadow: 0rem 1.875rem 3.75rem 0rem rgba(15, 20, 50, 0.1);
  -moz-box-shadow: 0rem 1.875rem 3.75rem 0rem rgba(15, 20, 50, 0.1);
  box-shadow: 0rem 1.875rem 3.75rem 0rem rgba(15, 20, 50, 0.1);
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .about__call-sm {
    right: -11.25rem;
    bottom: -6.25rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .about__call-sm {
    right: -10.625rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .about__call-sm {
    right: 1.875rem;
  }
}
@media (max-width: 35.9375rem) {
  .about__call-sm {
    display: none;
  }
}
.about__call-sm-thumb {
  margin-bottom: 1.5625rem;
}
.about__call-sm-thumb img {
  width: 4.375rem;
  height: 4.375rem;
  -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: 1.25rem;
}
.about__call-sm-action ul li.call-receive a {
  background-image: linear-gradient(to right bottom, #b3d250, #a7cb4b, #9bc547, #8fbe43, #83b73f);
  -webkit-box-shadow: 0rem 0.9375rem 1.25rem 0rem rgba(155, 197, 71, 0.5);
  -moz-box-shadow: 0rem 0.9375rem 1.25rem 0rem rgba(155, 197, 71, 0.5);
  box-shadow: 0rem 0.9375rem 1.25rem 0rem 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: 0rem 0.9375rem 1.25rem 0rem rgba(236, 108, 127, 0.5);
  -moz-box-shadow: 0rem 0.9375rem 1.25rem 0rem rgba(236, 108, 127, 0.5);
  box-shadow: 0rem 0.9375rem 1.25rem 0rem 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: 0.875rem;
  color: #c3ceda;
  background: #eaeff5;
  width: 2.8125rem;
  height: 2.8125rem;
  line-height: 2.8125rem;
}
.about__call-sm-action ul li a {
  display: inline-block;
  width: 3.75rem;
  height: 3.75rem;
  line-height: 3.75rem;
  text-align: center;
  font-size: 1.5625rem;
  color: #ffffff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.about__call-user {
  font-size: 1rem;
  font-weight: 700;
  color: #0f1432;
  margin-bottom: 0;
}
.about__call-status {
  display: inline-block;
  margin-bottom: 1.0625rem;
}
.about__call-item {
  padding: 1.25rem 2.5rem;
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
}
.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: 1rem;
  color: #378bf5;
  margin-bottom: 0;
}
.about__call-item span {
  font-size: 0.8125rem;
  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(6.25rem);
    -moz-transform: translateX(6.25rem);
    -ms-transform: translateX(6.25rem);
    transform: translateX(6.25rem);
  }
  100% {
    -webkit-transform: translateX(0rem);
    -moz-transform: translateX(0rem);
    -ms-transform: translateX(0rem);
    transform: translateX(0rem);
  }
}
@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(-1.25rem);
  }
  100% {
    transform: translateY(0rem);
  }
}
/*----------------------------------------*/
/*  06. PRICE CSS START
/*----------------------------------------*/
.price__item {
  padding: 2.5rem;
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
  -webkit-box-shadow: 0rem 2.5rem 4.375rem 0rem rgba(8, 0, 41, 0.1);
  -moz-box-shadow: 0rem 2.5rem 4.375rem 0rem rgba(8, 0, 41, 0.1);
  box-shadow: 0rem 2.5rem 4.375rem 0rem rgba(8, 0, 41, 0.1);
  border: 0.125rem 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: 0rem 2.5rem 4.375rem 0rem rgba(8, 0, 41, 0.1);
  -moz-box-shadow: 0rem 2.5rem 4.375rem 0rem rgba(8, 0, 41, 0.1);
  box-shadow: 0rem 2.5rem 4.375rem 0rem 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: 3.75rem;
}
.price__item-3 {
  -webkit-box-shadow: 0rem 1.25rem 2.5rem 0rem rgba(10, 0, 48, 0.08);
  -moz-box-shadow: 0rem 1.25rem 2.5rem 0rem rgba(10, 0, 48, 0.08);
  box-shadow: 0rem 1.25rem 2.5rem 0rem rgba(10, 0, 48, 0.08);
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
}
.price__offer span {
  font-size: 1rem;
  color: #57556a;
  font-weight: 600;
}
.price__tag h3 {
  font-size: 2.5rem;
}
.price__tag h3 span {
  font-size: 0.875rem;
  color: #6c6a8a;
  font-weight: 500;
}
.price__tag-3 {
  margin-bottom: 2rem;
}
.price__tag-3 h3 {
  color: #0a0030;
  font-size: 3.125rem;
  padding-bottom: 1.0625rem;
  border-bottom: 0.0625rem solid #f2f0fa;
}
.price__tag-3 h3 span {
  font-size: 0.9375rem;
  color: #625e6e;
  margin-left: -0.75rem;
  font-weight: 600;
}
.price__text p {
  color: #57556a;
}
.price__features ul li {
  color: #474554;
  font-size: 0.875rem;
  padding-left: 1.4375rem;
  position: relative;
  font-weight: 600;
}
.price__features ul li:not(:last-child) {
  margin-bottom: 0.625rem;
}
.price__features ul li::after {
  position: absolute;
  content: "";
  font-family: "Font Awesome 5 Pro";
  font-size: 0.9375rem;
  color: #6c6a8a;
  left: 0;
  top: 0.0625rem;
  font-weight: 400;
}
.price__features ul li:hover {
  padding-left: 1.25rem;
  color: #7127ea;
}
.price__features ul li:hover::after {
  color: #7127ea;
}
.price__features-2 {
  margin-bottom: 2.6875rem;
}
.price__features-2 ul li {
  font-size: 0.9375rem;
  color: #0a0030;
  font-weight: 600;
  margin-bottom: 0.625rem;
}
.price__features-2 ul li:hover {
  color: #5d41c2;
}
.price__heading {
  padding: 0.625rem 0;
  padding-bottom: 0.8125rem;
  background: #fbe0e9;
}
.price__heading h4 {
  font-size: 1.25rem;
  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: 2.5rem 3.125rem;
  padding-bottom: 3.125rem;
}

/*----------------------------------------*/
/*  07. TESTIMONIAL CSS START
/*----------------------------------------*/
.testimonial__item {
  position: relative;
  -webkit-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
  padding: 3.125rem 2.5rem;
}
@media (max-width: 35.9375rem) {
  .testimonial__item {
    padding-left: 1.5625rem;
    padding-right: 1.5625rem;
  }
}
.testimonial__item::before {
  position: absolute;
  content: "";
  left: 0.625rem;
  right: 0.625rem;
  width: calc( 100% - 1.25rem);
  height: 100%;
  bottom: -1.25rem;
  -webkit-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
  z-index: -1;
  background: #ffffff;
}
.testimonial__item-3 {
  padding: 1.875rem 1.875rem;
  padding-bottom: 3.5625rem;
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
  -webkit-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
}
.testimonial__item-5 {
  padding: 2.8125rem 4.25rem;
  padding-bottom: 3.125rem;
  background: #ffffff;
  -webkit-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .testimonial__item-5 {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .testimonial__item-5 {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
}
@media (max-width: 35.9375rem) {
  .testimonial__item-5 {
    padding-left: 1.5625rem;
    padding-right: 1.5625rem;
  }
}
.testimonial__item-5 p {
  font-size: 1.5rem;
  line-height: 2.25rem;
  color: #011224;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .testimonial__item-5 p {
    font-size: 1.25rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .testimonial__item-5 p {
    font-size: 1.125rem;
    line-height: 1.5;
  }
}
@media (max-width: 35.9375rem) {
  .testimonial__item-5 p {
    font-size: 1.125rem;
    line-height: 1.5;
  }
}
.testimonial__thumb img {
  width: 4.375rem !important;
  height: 4.375rem;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.testimonial__text p {
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: #000;
}
.testimonial__text-3 p {
  color: #0a0030;
  line-height: 1.625rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.testimonial__text-4 p {
  color: #57556a;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 2rem;
}
.testimonial__author h3 {
  font-size: 1.25rem;
  color: #070337;
  margin-bottom: 0;
}
.testimonial__author span {
  font-size: 0.875rem;
  color: #57556a;
}
.testimonial__author-3 h4 {
  font-size: 1.125rem;
  color: #0a0030;
  font-weight: 600;
  margin-bottom: 0;
  line-height: 1;
}
.testimonial__author-3 span {
  font-size: 0.75rem;
  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: 1.5625rem;
  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 0.3125rem;
  width: 0.5rem;
  height: 0.5rem;
  -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: -3.4375rem;
  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 0.3125rem;
  width: 0.5rem;
  height: 0.5rem;
  -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: -3.75rem;
}
.testimonial__slider-4 .owl-dots .owl-dot {
  width: 0.625rem;
  height: 0.625rem;
  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: -4.375rem;
  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 1.25rem;
  width: 0.5rem;
  height: 0.5rem;
  -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: 1.875rem;
  width: 1.875rem;
  border: 0.0625rem 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: 48rem) and (max-width: 61.9375rem) {
  .testimonial__shape-4 img {
    left: 15%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .testimonial__shape-4 img {
    left: 0%;
    width: 100%;
  }
}
@media (max-width: 35.9375rem) {
  .testimonial__shape-4 img {
    left: 0%;
    width: 100%;
  }
}
.testimonial__avater img {
  width: 3.125rem !important;
  height: 3.125rem;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.testimonial__info h4 {
  font-size: 1.375rem;
  color: #011224;
  margin-bottom: 0.125rem;
}
.testimonial__info span {
  font-size: 0.875rem;
  color: #57556a;
}
.testimonial__5-img img {
  position: absolute;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 0.1875rem solid #ffffff;
  -webkit-box-shadow: 0rem 1.875rem 2.5rem 0rem rgba(1, 18, 36, 0.2);
  -moz-box-shadow: 0rem 1.875rem 2.5rem 0rem rgba(1, 18, 36, 0.2);
  box-shadow: 0rem 1.875rem 2.5rem 0rem rgba(1, 18, 36, 0.2);
}
.testimonial__5-img img.testi-big {
  width: 3.75rem;
  height: 3.75rem;
}
.testimonial__5-img img.testi-sm {
  width: 3.125rem;
  height: 3.125rem;
}
.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: 87.5rem) and (max-width: 100rem) {
  .testimonial__5-img img.testi-2 {
    left: 15%;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .testimonial__5-img img.testi-2 {
    left: 12%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .testimonial__5-img img.testi-2 {
    left: 15%;
    bottom: 14%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .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: 62rem) and (max-width: 74.9375rem) {
  .testimonial__5-img img.testi-3 {
    right: 3%;
    bottom: 18%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .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: 87.5rem) and (max-width: 100rem) {
  .testimonial__5-img img.testi-5 {
    right: 20%;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .testimonial__5-img img.testi-5 {
    right: 17%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .testimonial__5-img img.testi-5 {
    right: 9%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .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: 48rem) and (max-width: 61.9375rem) {
  .testimonial__5-img img.testi-7 {
    display: none;
  }
}

.rating {
  margin-bottom: 0.9375rem;
}
.rating ul li {
  display: inline-block;
  font-size: 0.75rem;
  color: #ffb543;
}

/*----------------------------------------*/
/*  08. FEATURES CSS START
/*----------------------------------------*/
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .features__item {
    padding-left: 1.875rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .features__item {
    padding-left: 0rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .features__item {
    padding-left: 0rem;
    margin-bottom: 3.75rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .features__item {
    margin-bottom: 3.75rem;
    padding-left: 0rem;
  }
}
@media (max-width: 35.9375rem) {
  .features__item {
    margin-bottom: 3.75rem;
    padding-left: 0rem;
  }
}
.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: 62.5rem;
  perspective: 62.5rem;
}
.features__icon span {
  display: inline-block;
  width: 3.75rem;
  height: 3.75rem;
  line-height: 4.125rem;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.features__icon span i {
  color: #ffffff;
  font-size: 1.5625rem;
}
.features__title {
  font-size: 1.375rem;
  margin-bottom: 2rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .features__title {
    font-size: 1.25rem;
  }
}
.features__list ul li {
  padding-left: 2.1875rem;
  font-size: 0.9375rem;
  color: #474554;
  font-weight: 600;
  position: relative;
  margin-bottom: 0.9375rem;
}
.features__list ul li::after {
  position: absolute;
  content: "";
  font-family: "Font Awesome 5 Pro";
  left: 0;
  top: 0;
  width: 1.375rem;
  height: 1.375rem;
  line-height: 1.375rem;
  font-size: 0.75rem;
  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: 48rem) and (max-width: 61.9375rem) {
  .features__more {
    margin-top: 0;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .features__more {
    margin-top: 0;
  }
}
@media (max-width: 35.9375rem) {
  .features__more {
    margin-top: 0;
  }
}
.features__tab .nav-tabs {
  display: block;
  border-bottom: none;
}
.features__tab .nav-tabs .nav-item {
  margin-bottom: 1.875rem;
  background-color: #f5f5f5;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}
.features__tab .nav-tabs .nav-item > div {
  font-size: 1.25rem;
  font-weight: 800;
  color: #070337;
}
.features__tab .nav-tabs .nav-item > p {
  margin-bottom: 0;
}
.features__tab .nav-tabs .nav-item .nav-link {
  padding: 1.875rem 1.5625rem;
  border: none;
  background: #ffffff;
  width: 100%;
  text-align: left;
  font-size: 1.125rem;
  font-weight: 700;
  color: #070337;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .features__tab .nav-tabs .nav-item .nav-link {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
.features__tab .nav-tabs .nav-item .nav-link i {
  font-size: 1.25rem;
  padding-right: 0.75rem;
}
.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: 1.125rem;
}
.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: 48rem) and (max-width: 61.9375rem) {
  .features__thumb-inner {
    margin-top: 3.125rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .features__thumb-inner {
    margin-top: 3.125rem;
  }
}
@media (max-width: 35.9375rem) {
  .features__thumb-inner {
    margin-top: 3.125rem;
  }
}
.features__thumb-inner img {
  max-width: 100%;
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
  -webkit-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.12);
  -moz-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.12);
  box-shadow: 0rem 1.875rem 4.375rem 0rem 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: 62rem) and (max-width: 74.9375rem) {
  .features__thumb-inner img.fea-thumb {
    width: 100%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .features__thumb-inner img.fea-thumb {
    width: 100%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .features__thumb-inner img.fea-thumb {
    width: 100%;
  }
}
@media (max-width: 35.9375rem) {
  .features__thumb-inner img.fea-thumb {
    width: 100%;
  }
}
.features__thumb-inner img.fea-sm {
  position: absolute;
  left: 7.8125rem;
  bottom: -3.125rem;
  -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: 35.9375rem) {
  .features__thumb-inner img.fea-sm {
    left: -0.625rem;
  }
}
.features__thumb-inner img.fea-sm-2 {
  position: absolute;
  right: -2.8125rem;
  top: 5.9375rem;
  -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: 62rem) and (max-width: 74.9375rem) {
  .features__thumb-inner img.fea-sm-2 {
    right: -1.25rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .features__thumb-inner img.fea-sm-2 {
    right: -1.25rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .features__thumb-inner img.fea-sm-2 {
    right: -1.25rem;
  }
}
@media (max-width: 35.9375rem) {
  .features__thumb-inner img.fea-sm-2 {
    right: 1.25rem;
  }
}
.features__thumb-inner img.fea-2-shape {
  position: absolute;
  right: -17.9375rem;
  top: -3.4375rem;
  opacity: 0.1;
  z-index: -1;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
@media only screen and (min-width: 87.5rem) and (max-width: 100rem) {
  .features__thumb-inner img.fea-2-shape {
    width: 100%;
    right: -5.3125rem;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .features__thumb-inner img.fea-2-shape {
    width: 100%;
    right: -1.875rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .features__thumb-inner img.fea-2-shape {
    width: 100%;
    right: -1.25rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .features__thumb-inner img.fea-2-shape {
    width: 100%;
    right: -1.25rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .features__thumb-inner img.fea-2-shape {
    width: 100%;
    right: -1.25rem;
  }
}
@media (max-width: 35.9375rem) {
  .features__thumb-inner img.fea-2-shape {
    width: 100%;
    right: 0rem;
  }
}

@keyframes shake {
  10%, 90% {
    -webkit-transform: translate3d(-0.0625rem, 0, 0);
    transform: translate3d(-0.0625rem, 0, 0);
  }
  20%, 80% {
    -webkit-transform: translate3d(0.125rem, 0, 0);
    transform: translate3d(0.125rem, 0, 0);
  }
  30%, 50%, 70% {
    -webkit-transform: translate3d(-0.25rem, 0, 0);
    transform: translate3d(-0.25rem, 0, 0);
  }
  40%, 60% {
    -webkit-transform: translate3d(0.25rem, 0, 0);
    transform: translate3d(0.25rem, 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(-1.25rem);
  }
  100% {
    transform: translateY(0rem);
  }
}
@keyframes features-thumb-sm-animation {
  0% {
    -webkit-transform: translateY(-1.25rem) translateX(6.25rem);
    -moz-transform: translateY(-1.25rem) translateX(6.25rem);
    -ms-transform: translateY(-1.25rem) translateX(6.25rem);
    transform: translateY(-1.25rem) translateX(6.25rem);
  }
  100% {
    -webkit-transform: translateY(0rem) translateX(0rem);
    -moz-transform: translateY(0rem) translateX(0rem);
    -ms-transform: translateY(0rem) translateX(0rem);
    transform: translateY(0rem) translateX(0rem);
  }
}
@keyframes features-thumb-sm-2-animation {
  0% {
    -webkit-transform: translateY(-1.25rem);
    -moz-transform: translateY(-1.25rem);
    -ms-transform: translateY(-1.25rem);
    transform: translateY(-1.25rem);
  }
  100% {
    -webkit-transform: translateY(3.125rem);
    -moz-transform: translateY(3.125rem);
    -ms-transform: translateY(3.125rem);
    transform: translateY(3.125rem);
  }
}
@keyframes features-dot-1 {
  0% {
    transform: translateY(-6.25rem);
  }
  100% {
    transform: translateY(0rem);
  }
}
@keyframes features-dot-2 {
  0% {
    transform: translateX(-6.25rem);
  }
  100% {
    transform: translateX(0rem);
  }
}
/*----------------------------------------*/
/*  09. CTA CSS START
/*----------------------------------------*/
.cta__inner {
  background-image: -moz-linear-gradient(45deg, #6f1ef3 0%, #0d70d6 100%);
  background-image: -webkit-linear-gradient(45deg, #6f1ef3 0%, #0d70d6 100%);
  background-image: -ms-linear-gradient(45deg, #6f1ef3 0%, #0d70d6 100%);
  background-image: linear-gradient(45deg, #6f1ef3 0%, #0d70d6 100%);
  -webkit-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(15, 0, 40, 0.2);
  -moz-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(15, 0, 40, 0.2);
  box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(15, 0, 40, 0.2);
  -webkit-border-radius: 1.25rem;
  -moz-border-radius: 1.25rem;
  border-radius: 1.25rem;
  padding: 5.9375rem 4.375rem;
  padding-bottom: 6.5625rem;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .cta__inner {
    padding: 2.8125rem 3.4375rem;
    padding-bottom: 2.5rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .cta__inner {
    padding: 2.8125rem 3.4375rem;
    padding-bottom: 2.5rem;
  }
}
@media (max-width: 35.9375rem) {
  .cta__inner {
    padding: 2.1875rem 1.875rem;
  }
}
.cta__inner-2 {
  padding: 7.3125rem 5rem;
  padding-bottom: 7.9375rem;
  -webkit-border-radius: 1.25rem;
  -moz-border-radius: 1.25rem;
  border-radius: 1.25rem;
  z-index: 1;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .cta__inner-2 {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .cta__inner-2 {
    padding: 2.5rem 1.875rem;
  }
}
@media (max-width: 35.9375rem) {
  .cta__inner-2 {
    padding: 2.5rem 1.875rem;
  }
}
.cta__inner-3 {
  padding: 5.4375rem 3.75rem;
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-box-shadow: 0rem 2.5rem 4.375rem 0rem rgba(10, 0, 48, 0.2);
  -moz-box-shadow: 0rem 2.5rem 4.375rem 0rem rgba(10, 0, 48, 0.2);
  box-shadow: 0rem 2.5rem 4.375rem 0rem rgba(10, 0, 48, 0.2);
}
@media (max-width: 35.9375rem) {
  .cta__inner-3 {
    padding: 2.8125rem 1.5625rem;
  }
}
.cta__title {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .cta__title {
    margin-bottom: 1.25rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .cta__title {
    margin-bottom: 1.25rem;
    font-size: 1.75rem;
  }
}
@media (max-width: 35.9375rem) {
  .cta__title {
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .cta__title {
    font-size: 1.875rem;
  }
}
@media (max-width: 35.9375rem) {
  .cta__title-2 {
    font-size: 1.5rem;
  }
}
.cta__title-3 {
  font-size: 1.875rem;
  margin-bottom: 0.625rem;
}
.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: -6.5625rem;
  bottom: -5rem;
}
.cta__shape-2 img.cta-2-circle {
  left: 3.125rem;
  top: 3.125rem;
  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: 36rem) and (max-width: 47.9375rem) {
  .cta__content-3 {
    margin-bottom: 1.5625rem;
  }
}
@media (max-width: 35.9375rem) {
  .cta__content-3 {
    margin-bottom: 1.5625rem;
  }
}
.cta__content-3 p {
  color: #ffffff;
  opacity: 0.7;
  margin-bottom: 0;
}
.cta__form input {
  width: 23.125rem;
  height: 3.75rem;
  padding: 0 1.875rem;
  border: none;
  outline: none;
  background: #ffffff;
  -webkit-border-radius: 1.875rem;
  -moz-border-radius: 1.875rem;
  border-radius: 1.875rem;
  margin-right: 1.25rem;
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .cta__form input {
    margin-bottom: 1.25rem;
  }
}
@media (max-width: 35.9375rem) {
  .cta__form input {
    margin-bottom: 1.25rem;
    width: 100%;
  }
}
.cta__form input::placeholder {
  font-size: 0.9375rem;
  color: #8c8c97;
}
.cta__form input:focus {
  -webkit-box-shadow: 0rem 1.25rem 1.875rem 0rem rgba(8, 0, 42, 0.14);
  -moz-box-shadow: 0rem 1.25rem 1.875rem 0rem rgba(8, 0, 42, 0.14);
  box-shadow: 0rem 1.25rem 1.875rem 0rem rgba(8, 0, 42, 0.14);
}
.cta__form button {
  height: 3.75rem;
  line-height: 3.75rem;
  padding: 0 3.3125rem;
  background: #1c213e;
  color: #ffffff;
  font-weight: 600;
  -webkit-border-radius: 1.875rem;
  -moz-border-radius: 1.875rem;
  border-radius: 1.875rem;
}
.cta__form button:hover {
  -webkit-box-shadow: 0rem 1.25rem 1.875rem 0rem rgba(8, 0, 42, 0.14);
  -moz-box-shadow: 0rem 1.25rem 1.875rem 0rem rgba(8, 0, 42, 0.14);
  box-shadow: 0rem 1.25rem 1.875rem 0rem rgba(8, 0, 42, 0.14);
}
.cta__features ul li {
  display: inline-block;
  font-size: 0.9375rem;
  color: #ffffff;
  font-weight: 600;
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.9375rem;
}
.cta__features ul li:not(:last-child) {
  margin-right: 3.125rem;
}
@media (max-width: 35.9375rem) {
  .cta__features ul li:not(:last-child) {
    margin-right: 0.9375rem;
  }
}
.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: 0.9375rem;
  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: 23.75rem;
  height: 28.75rem;
  background: #f4f9fd;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .team__slider::after {
    left: -36%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .team__slider::after {
    opacity: 0;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .team__slider::after {
    left: -57%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .team__slider::after {
    opacity: 0;
  }
}
@media (max-width: 35.9375rem) {
  .team__slider::after {
    opacity: 0;
  }
}
.team__slider .owl-stage-outer {
  overflow: visible;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .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: -3.75rem;
  left: 0;
}
.team__slider .owl-dots .owl-dot {
  margin: 0 0.3125rem;
  width: 0.625rem;
  height: 0.625rem;
  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(0rem);
  -moz-transform: translateX(0rem);
  -ms-transform: translateX(0rem);
  transform: translateX(0rem);
}
.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: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
}
.team__thumb img {
  height: 21.875rem;
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .team__thumb img {
    height: auto;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .team__thumb img {
    height: auto;
  }
}
@media (max-width: 35.9375rem) {
  .team__thumb img {
    height: auto;
  }
}
.team__title {
  font-size: 1.375rem;
  color: #021937;
  margin-bottom: 0;
}
.team__title a:hover {
  color: #2f80ed;
}
.team__position {
  font-size: 0.875rem;
  font-weight: 600;
  color: #57556a;
}
.team__social {
  position: absolute;
  bottom: 1.875rem;
  left: 1.875rem;
  z-index: 1;
}
.team__social ul li {
  display: inline-block;
}
.team__social ul li:not(:last-child) {
  margin-right: 1.875rem;
}
.team__social ul li a {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  color: #ffffff;
  -webkit-transform: translateX(-3.75rem);
  -moz-transform: translateX(-3.75rem);
  -ms-transform: translateX(-3.75rem);
  transform: translateX(-3.75rem);
  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: 75rem) and (max-width: 87.4375rem) {
  .team__shape img.team-triangle {
    left: 1%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .team__shape img.team-triangle {
    bottom: 9%;
    left: 8%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .team__shape img.team-triangle {
    bottom: 9%;
    left: 8%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .team__shape img.team-triangle {
    bottom: 9%;
    left: 8%;
  }
}
@media (max-width: 35.9375rem) {
  .team__shape img.team-triangle {
    bottom: 9%;
    left: 8%;
  }
}
.team__details-inner {
  -webkit-box-shadow: 0rem 3.125rem 5rem 0rem rgba(3, 0, 53, 0.1);
  -moz-box-shadow: 0rem 3.125rem 5rem 0rem rgba(3, 0, 53, 0.1);
  box-shadow: 0rem 3.125rem 5rem 0rem rgba(3, 0, 53, 0.1);
  -webkit-border-radius: 1.875rem;
  -moz-border-radius: 1.875rem;
  border-radius: 1.875rem;
}
.team__details-shape {
  right: -11%;
  bottom: -16%;
  z-index: -1;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .team__details-shape {
    right: 0;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .team__details-shape {
    right: 0;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .team__details-shape {
    right: -3%;
    bottom: -7%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .team__details-shape {
    right: -3%;
    bottom: -7%;
  }
}
@media (max-width: 35.9375rem) {
  .team__details-shape {
    right: -3%;
    bottom: -5%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .team__details-img {
    margin-right: 1.875rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .team__details-img {
    margin-right: 0rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .team__details-img {
    margin-right: 0rem;
  }
}
@media (max-width: 35.9375rem) {
  .team__details-img {
    margin-right: 0rem;
  }
}
.team__details-img img {
  -webkit-border-radius: 1.875rem 0 0 1.875rem;
  -moz-border-radius: 1.875rem 0 0 1.875rem;
  border-radius: 1.875rem 0 0 1.875rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .team__details-content {
    padding-top: 2.5rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .team__details-content {
    padding: 2.5rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .team__details-content {
    padding: 2.5rem;
  }
}
@media (max-width: 35.9375rem) {
  .team__details-content {
    padding: 2.5rem;
  }
}
.team__details-content > span {
  font-size: 1.25rem;
  display: inline-block;
  margin-bottom: 0.4375rem;
}
.team__details-content h3 {
  font-size: 1.875rem;
  margin-bottom: 0.9375rem;
}
.team__details-content p {
  margin-bottom: 2.1875rem;
  padding-right: 5rem;
}
.team__details-contact ul li {
  margin-bottom: 0.5rem;
  display: flex;
}
.team__details-contact ul li .icon i {
  line-height: 1.6875rem;
  color: #7127ea;
  margin-right: 0.9375rem;
}
.team__details-contact ul li .text span {
  font-weight: 500;
}
.team__details-social ul li {
  display: inline-block;
  margin-right: 0.4375rem;
}
.team__details-social ul li a {
  position: relative;
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  background: #f7f7fc;
  font-size: 0.875rem;
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
}
.team__details-social ul li a:hover {
  background: #7127ea;
  color: #ffffff;
}
.team__details-info h4 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5625rem;
}
.team__details-info p {
  margin-bottom: 1.5625rem;
}

@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(-6.25rem);
  }
  100% {
    transform: translateY(0rem);
  }
}
/*----------------------------------------*/
/*  11. FAQ CSS START
/*----------------------------------------*/
.faq__wrapper {
  padding: 0 2.5rem;
  border-top: 0.1875rem solid #2f80ed;
  box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08), inset 0rem 0.1875rem 0rem 0rem rgba(47, 128, 237, 0.004);
  -webkit-border-radius: 1.25rem;
  -moz-border-radius: 1.25rem;
  border-radius: 1.25rem;
}
@media (max-width: 35.9375rem) {
  .faq__wrapper {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
.faq__wrapper .accordion-item {
  padding-top: 2.1875rem;
  padding-bottom: 2.1875rem;
  border-bottom: 0.0625rem solid #eaedff;
}
.faq__wrapper .accordion-item.border-none {
  border-bottom: none;
  padding-bottom: 2.1875rem;
}
.faq__wrapper .accordion-item .accordion-header .accordion-button {
  font-size: 1.125rem;
  font-weight: 600;
  color: #021937;
  border: none;
  padding: 0;
  background: none;
  text-align: left;
}
@media (max-width: 35.9375rem) {
  .faq__wrapper .accordion-item .accordion-header .accordion-button {
    padding-right: 0.9375rem;
  }
}
.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: 1.125rem;
  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: 1.25rem;
}
.faq__wrapper .accordion-item .accordion-body p {
  font-size: 0.9375rem;
  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: 35.9375rem) {
  .faq__counter ul li {
    display: block;
    margin-bottom: 1.875rem;
  }
}
.faq__counter ul li:not(:last-child) {
  margin-right: 2.5rem;
}
@media (max-width: 35.9375rem) {
  .faq__counter ul li:not(:last-child) {
    margin-right: 1.25rem;
  }
}
.faq__counter ul li h3 {
  color: #070337;
  font-size: 2.5rem;
  margin-bottom: 0.1875rem;
}
.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: 48rem) and (max-width: 61.9375rem) {
  .faq__content {
    margin-top: 3.75rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .faq__content {
    margin-top: 3.75rem;
  }
}
@media (max-width: 35.9375rem) {
  .faq__content {
    margin-top: 3.75rem;
  }
}

/*----------------------------------------*/
/*  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: 0rem 1.25rem 1.875rem 0rem rgba(1, 24, 55, 0.16);
  -moz-box-shadow: 0rem 1.25rem 1.875rem 0rem rgba(1, 24, 55, 0.16);
  box-shadow: 0rem 1.25rem 1.875rem 0rem 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: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
}
.blog__thumb img {
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
}
.blog__thumb-3 {
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
}
.blog__thumb-5 {
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
}
.blog__thumb-5 img {
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
}
.blog__meta span {
  text-transform: capitalize;
  font-weight: 600;
  margin-right: 1.5625rem;
}
.blog__meta span.tag {
  color: #2f80ed;
}
.blog__meta span.tag:hover {
  color: #070337;
}
.blog__meta-3 span {
  font-size: 0.875rem;
  color: #625e6e;
  font-weight: 600;
}
.blog__meta-3 span.tag-3 {
  position: absolute;
  top: 2.5rem;
  left: 2.5rem;
}
.blog__meta-3 span.tag-3 a {
  display: inline-block;
  height: 1.625rem;
  line-height: 1.625rem;
  font-size: 0.75rem;
  color: #ffffff;
  background: #5d41c2;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
  padding: 0 0.9375rem;
}
.blog__meta-3 span.tag-3 a:hover {
  background: #ffffff;
  color: #5d41c2;
}
.blog__meta-5 {
  margin-bottom: 0.5rem;
}
.blog__meta-5 span {
  font-size: 0.875rem;
  font-weight: 600;
}
.blog__meta-5 span:not(:last-child) {
  margin-right: 1.0625rem;
}
.blog__meta-5 span.date {
  color: #545b65;
}
.blog__meta-5 span.tag {
  color: #1c7df8;
}
.blog__content {
  padding-right: 3.4375rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .blog__content {
    padding-right: 2.1875rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .blog__content {
    padding-right: 0rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .blog__content {
    padding-right: 0rem;
  }
}
.blog__content-3 {
  padding-top: 1.5625rem;
  padding-right: 8.75rem;
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .blog__content-3 {
    padding-right: 5.9375rem;
  }
}
@media (max-width: 35.9375rem) {
  .blog__content-3 {
    padding-right: 0rem;
  }
}
.blog__content-5 {
  padding-top: 1.25rem;
  padding-right: 3.125rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .blog__content-5 {
    padding-right: 0;
  }
}
@media (max-width: 35.9375rem) {
  .blog__content-5 {
    padding-right: 0;
  }
}
.blog__content-5 .link-btn:hover {
  color: #1c7df8;
}
.blog__title {
  font-size: 1.375rem;
  color: #070337;
  line-height: 1.3;
}
.blog__title a:hover {
  color: #2f80ed;
}
.blog__title-3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0a0030;
  line-height: 1.3;
  margin-bottom: 0.9375rem;
}
@media (max-width: 35.9375rem) {
  .blog__title-3 {
    font-size: 1.375rem;
  }
}
.blog__title-3 a:hover {
  color: #5d41c2;
}
.blog__title-5 {
  font-size: 1.125rem;
  color: #011224;
  line-height: 1.5;
  margin-bottom: 1.5625rem;
}
.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: 48rem) and (max-width: 61.9375rem) {
  .blog__sidebar {
    margin-top: 3.125rem;
    padding-left: 0;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .blog__sidebar {
    margin-top: 3.125rem;
    padding-left: 0;
  }
}
@media (max-width: 35.9375rem) {
  .blog__sidebar {
    margin-top: 3.125rem;
    padding-left: 0;
  }
}

.postbox__item {
  position: relative;
}
.postbox__thumb {
  position: relative;
}
.postbox__thumb img {
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
}
.postbox__video::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(1, 18, 36, 0.3);
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
}
.postbox__title {
  font-size: 1.625rem;
  color: #070337;
  margin-bottom: 0.9375rem;
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .postbox__title {
    font-size: 1.375rem;
  }
}
@media (max-width: 35.9375rem) {
  .postbox__title {
    font-size: 1rem;
  }
}
.postbox__title a:hover {
  color: #1c7df8;
}
.postbox__content {
  padding-top: 1.0625rem;
}
.postbox__content p {
  color: #6a727f;
  margin-bottom: 1.5625rem;
}
.postbox__content .link-btn:hover {
  color: #1c7df8;
}
.postbox__meta span {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #6a727f;
  display: inline-block;
}
.postbox__meta span:not(:last-child) {
  margin-right: 2.0625rem;
}
.postbox__meta span i {
  color: #1c7df8;
  padding-right: 0.125rem;
}
.postbox__meta span a:hover {
  color: #1c7df8;
}
.postbox__date {
  position: absolute;
  top: 1.875rem;
  right: 1.875rem;
  background: #ffffff;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  z-index: 1;
}
.postbox__date h5 {
  font-size: 1.875rem;
  margin-bottom: 0;
  line-height: 1;
  color: #1c7df8;
  font-weight: 800;
}
.postbox__date span {
  font-size: 0.9375rem;
  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: 2.8125rem 3.125rem;
  padding-bottom: 1.125rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
  position: relative;
}
@media (max-width: 35.9375rem) {
  .postbox__quote {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
}
.postbox__quote h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 2.3125rem;
  line-height: 1.5;
}
.postbox__quote span {
  font-weight: 600;
  color: #6a727f;
  position: relative;
  padding-left: 3.125rem;
}
.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: 0.125rem;
  width: 2.5rem;
}
.postbox__quote img.quote {
  position: absolute;
  top: 2.5rem;
  left: 1.875rem;
  opacity: 0.2;
}
@media (max-width: 35.9375rem) {
  .postbox__quote img.quote {
    top: 1.25rem;
    left: 1.25rem;
  }
}
.postbox__tag h3 {
  font-size: 1.375rem;
  color: #011224;
  display: inline-block;
  margin-right: 1.25rem;
  margin-bottom: 0;
}
.postbox__tag a {
  display: inline-block;
  height: 2.1875rem;
  line-height: 2.1875rem;
  text-align: center;
  padding: 0 0.625rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
  background: #f2f7ff;
  color: #6a727f;
  margin-right: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
}
.postbox__tag a:hover {
  background: #1c7df8;
  color: #ffffff;
}
.postbox__share h3 {
  font-size: 1.375rem;
  color: #011224;
  display: inline-block;
  margin-right: 1.25rem;
  margin-bottom: 0;
}
.postbox__share ul li {
  display: inline-block;
  margin-left: 0.625rem;
}
.postbox__share ul li a {
  display: inline-block;
  width: 2.8125rem;
  height: 2.8125rem;
  line-height: 2.8125rem;
  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: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
}
.postbox__author {
  padding: 2.5rem 4.0625rem;
  padding-right: 5.3125rem;
  padding-bottom: 2.8125rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .postbox__author {
    padding-right: 2.5rem;
  }
}
@media (max-width: 35.9375rem) {
  .postbox__author {
    padding: 2.5rem;
  }
}
@media (max-width: 35.9375rem) {
  .postbox__author-thumb {
    margin-bottom: 0.9375rem;
  }
}
.postbox__author-thumb img {
  width: 3.75rem;
  height: 3.75rem;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.postbox__author-content h4 {
  font-size: 1rem;
  margin-bottom: 0;
  margin-bottom: 0.1875rem;
}
.postbox__author-content span {
  display: inline-block;
  font-size: 0.875rem;
  color: #6a727f;
  font-weight: 600;
  margin-bottom: 0.625rem;
}
.postbox__author-content p {
  font-weight: 600;
  margin-bottom: 0;
}
.postbox__form h3 {
  font-size: 1.375rem;
  color: #011224;
  margin-bottom: 2.1875rem;
}
.postbox__form input, .postbox__form textarea {
  width: 100%;
  height: 4.375rem;
  line-height: 4.125rem;
  padding: 0 0.9375rem;
  background: #f2f7ff;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
  outline: none;
  border: 0.125rem solid #f2f7ff;
  margin-bottom: 1.875rem;
}
.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: 9.375rem;
  padding: 1.875rem 0.9375rem;
  line-height: 1;
  resize: none;
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .postbox__agree {
    margin-bottom: 1.25rem;
  }
}
@media (max-width: 35.9375rem) {
  .postbox__agree {
    margin-bottom: 1.25rem;
  }
}
.postbox__agree input {
  margin: 0;
  appearance: none;
  -moz-appearance: none;
  display: block;
  width: 0.875rem !important;
  padding: 0;
  height: 0.875rem;
  background: transparent;
  border: 0.0625rem solid #132339;
  outline: none;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
  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: 0.625rem;
  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: 0.5rem;
  color: #6a727f;
  font-weight: 600;
}
.postbox__agree label:hover {
  cursor: pointer;
}

.sidebar__widget-title {
  font-size: 1.375rem;
  margin-bottom: 1.75rem;
}
.sidebar__category ul li {
  margin-bottom: 0.9375rem;
}
.sidebar__category ul li a {
  color: #6a727f;
}
.sidebar__category ul li a span {
  color: #132339;
  font-weight: 600;
  padding-left: 0.1875rem;
}
.sidebar__category ul li a:hover {
  color: #1c7df8;
}
.sidebar__search {
  position: relative;
}
.sidebar__search input {
  width: 100%;
  height: 3.75rem;
  line-height: 3.5rem;
  font-size: 0.875rem;
  padding: 0 1.5625rem;
  background: #f2f7ff;
  border: 0.125rem solid #f2f7ff;
  outline: none;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
}
.sidebar__search input::placeholder {
  color: #7a8189;
}
.sidebar__search input:focus {
  border-color: #1c7df8;
}
.sidebar__search button {
  font-size: 1rem;
  color: #011224;
  position: absolute;
  top: 50%;
  right: 1.5625rem;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.sidebar__tags a {
  font-size: 0.8125rem;
  color: #6a727f;
  font-weight: 600;
  display: inline-block;
  height: 2.1875rem;
  line-height: 2.1875rem;
  padding: 0 0.9375rem;
  background: rgba(28, 125, 248, 0.08);
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
  margin-right: 0.5rem;
  margin-bottom: 0.625rem;
}
.sidebar__tags a:hover {
  color: #ffffff;
  background: #1c7df8;
}

.rc__thumb img {
  height: 5.625rem;
  width: 5.625rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
}
.rc__title {
  font-size: 1rem;
  font-weight: 700;
  color: #132339;
  line-height: 1.5;
}
.rc__title a:hover {
  color: #1c7df8;
}
.rc__meta span {
  font-size: 0.875rem;
  color: #6a727f;
  font-weight: 600;
}
.rc__comment-icon i {
  font-size: 1.125rem;
  display: inline-block;
  width: 3.125rem;
  height: 3.125rem;
  line-height: 3.125rem;
  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: 1rem;
  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: 1.375rem;
  color: #011224;
}

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

.latest-comments li.children {
  margin-left: 6.5625rem;
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .latest-comments li.children {
    margin-left: 3.75rem;
  }
}
@media (max-width: 35.9375rem) {
  .latest-comments li.children {
    margin-left: 0.9375rem;
  }
}

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

.comments-box {
  border-bottom: 0.0625rem solid #f4f4f4;
  padding-bottom: 1.875rem;
  margin-bottom: 2.8125rem;
}

.comments-text {
  overflow: hidden;
}

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

.avatar-name {
  margin-bottom: 0.625rem;
  overflow: hidden;
  position: relative;
}

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

.avatar-name span {
  font-size: 0.875rem;
  font-weight: 500;
}

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

.comment-reply {
  font-weight: 600;
  font-size: 0.875rem;
  color: #222222;
}

.comment-reply i {
  padding-right: 0.25rem;
}

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

.blog-play-btn {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  line-height: 5.25rem;
  text-align: center;
  font-size: 1.875rem;
  background: #ffffff;
  color: #1c7df8;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.blog-play-btn i {
  text-shadow: 0rem 0.25rem 0.375rem 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(-6.25rem);
  }
  100% {
    transform: translateY(0rem);
  }
}
/*----------------------------------------*/
/*  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: 36rem) and (max-width: 47.9375rem) {
  .promotion__bg::after, .promotion__bg::before {
    top: 0;
    width: 100%;
    height: 50%;
  }
}
@media (max-width: 35.9375rem) {
  .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: 36rem) and (max-width: 47.9375rem) {
  .promotion__bg::before {
    top: auto;
    bottom: 0;
  }
}
@media (max-width: 35.9375rem) {
  .promotion__bg::before {
    top: auto;
    bottom: 0;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .promotion__bg {
    padding: 0;
  }
}
@media (max-width: 35.9375rem) {
  .promotion__bg {
    padding: 1.25rem 0;
  }
}
.promotion__title {
  font-size: 2.125rem;
  color: #ffffff;
  margin-bottom: 0.9375rem;
}
@media (max-width: 35.9375rem) {
  .promotion__title {
    font-size: 1.5625rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .promotion__content {
    padding: 3.125rem 0;
  }
}
.promotion__content p {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 2.1875rem;
}
@media (max-width: 35.9375rem) {
  .promotion__content.promotion__right {
    padding-left: 0;
    margin-top: 2.5rem;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .promotion__content-2 {
    padding-right: 1.25rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .promotion__content-2 {
    padding-right: 0rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .promotion__content-2 {
    padding-right: 0rem;
  }
}
@media (max-width: 35.9375rem) {
  .promotion__content-2 {
    padding-right: 0rem;
  }
}
.promotion__content-2 p {
  font-size: 0.9375rem;
  color: #545b65;
  margin-bottom: 2.8125rem;
}
.promotion__content-2 p.promotion__sub {
  font-size: 1.0625rem;
  color: #011224;
  font-weight: 700;
  margin-bottom: 1.4375rem;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .promotion__content-4 {
    margin-top: 3.125rem;
  }
}
@media (max-width: 35.9375rem) {
  .promotion__content-4 {
    padding-right: 1.875rem;
    margin-top: 3.125rem;
  }
}
.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: 75rem) and (max-width: 87.4375rem) {
  .promotion__shape img.promotion-plus {
    top: 18%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .promotion__shape img.promotion-plus {
    top: 18%;
  }
}
@media (max-width: 35.9375rem) {
  .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: 36rem) and (max-width: 47.9375rem) {
  .promotion__shape img.promotion-dot {
    right: 60%;
  }
}
@media (max-width: 35.9375rem) {
  .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: 36rem) and (max-width: 47.9375rem) {
  .promotion__thumb {
    margin-bottom: 3.125rem;
  }
}
@media (max-width: 35.9375rem) {
  .promotion__thumb {
    margin-bottom: 3.125rem;
  }
}
.promotion__thumb img {
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
}
.promotion__thumb::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(1, 18, 36, 0.6);
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
}
.promotion__thumb-4 {
  z-index: 1;
}
.promotion__thumb-4 img.promotion-4-big {
  margin-left: -1.875rem;
  -webkit-border-radius: 1.25rem;
  -moz-border-radius: 1.25rem;
  border-radius: 1.25rem;
  -webkit-box-shadow: 0rem 1.875rem 3.75rem 0rem rgba(2, 0, 35, 0.1);
  -moz-box-shadow: 0rem 1.875rem 3.75rem 0rem rgba(2, 0, 35, 0.1);
  box-shadow: 0rem 1.875rem 3.75rem 0rem rgba(2, 0, 35, 0.1);
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .promotion__thumb-4 img.promotion-4-big {
    margin-left: -3.75rem;
  }
}
@media (max-width: 35.9375rem) {
  .promotion__thumb-4 img.promotion-4-big {
    margin-left: 0rem;
    width: 100%;
  }
}
.promotion__thumb-4 img.promotion-4-sm {
  margin-left: 17.5rem;
  margin-top: -15rem;
  -webkit-border-radius: 1.25rem;
  -moz-border-radius: 1.25rem;
  border-radius: 1.25rem;
  -webkit-box-shadow: 0rem 1.875rem 3.75rem 0rem rgba(2, 0, 35, 0.1);
  -moz-box-shadow: 0rem 1.875rem 3.75rem 0rem rgba(2, 0, 35, 0.1);
  box-shadow: 0rem 1.875rem 3.75rem 0rem 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: 62rem) and (max-width: 74.9375rem) {
  .promotion__thumb-4 img.promotion-4-sm {
    margin-left: 6.5625rem;
    margin-bottom: -11.25rem;
  }
}
@media (max-width: 35.9375rem) {
  .promotion__thumb-4 img.promotion-4-sm {
    margin-left: 3.125rem;
    width: 80%;
    margin-top: -6.25rem;
  }
}
.promotion__thumb-4 img.promotion-4-circle {
  position: absolute;
  top: -7.0625rem;
  right: -1.25rem;
  opacity: 0.3;
  z-index: -1;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .promotion__thumb-4 img.promotion-4-circle {
    width: 100%;
  }
}
@media (max-width: 35.9375rem) {
  .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: 1.0625rem;
  height: 1.25rem;
}

@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(6.25rem);
    -moz-transform: translateX(6.25rem);
    -ms-transform: translateX(6.25rem);
    transform: translateX(6.25rem);
  }
  100% {
    -webkit-transform: translateX(0rem);
    -moz-transform: translateX(0rem);
    -ms-transform: translateX(0rem);
    transform: translateX(0rem);
  }
}
@keyframes promotion-4-sm {
  0% {
    transform: translateY(-3.125rem);
  }
  100% {
    transform: translateY(0rem);
  }
}
/*----------------------------------------*/
/*  14. PLATFORM CSS START
/*----------------------------------------*/
.platform__item {
  padding: 2rem 3.75rem;
  padding-bottom: 3.125rem;
  -webkit-box-shadow: 0rem 1.25rem 2.5rem 0rem rgba(10, 0, 48, 0.08);
  -moz-box-shadow: 0rem 1.25rem 2.5rem 0rem rgba(10, 0, 48, 0.08);
  box-shadow: 0rem 1.25rem 2.5rem 0rem rgba(10, 0, 48, 0.08);
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .platform__item {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .platform__item {
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }
}
@media (max-width: 35.9375rem) {
  .platform__item {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
}
.platform__item p {
  margin-bottom: 2.0625rem;
}
.platform__title {
  font-size: 1.5rem;
  margin-bottom: 0.625rem;
  color: #0a0030;
}
.platform__name a {
  height: 3.125rem;
  text-align: center;
  padding: 0 0.9375rem;
  border: 0.125rem solid #5d41c2;
  background: #5d41c2;
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
  display: inline-block;
  padding-top: 0.25rem;
}
.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: 0.9375rem;
}
.platform__name-icon i {
  font-size: 1.5rem;
  color: #ffffff;
}
.platform__name-content h5 {
  font-size: 0.75rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0;
}
.platform__name-content span {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}

/*----------------------------------------*/
/*  15. WHY CSS START
/*----------------------------------------*/
.why__item {
  padding: 2.9375rem 1.5625rem;
  padding-bottom: 3.0625rem;
  -webkit-box-shadow: 0rem 1.25rem 2.5rem 0rem rgba(10, 0, 48, 0.08);
  -moz-box-shadow: 0rem 1.25rem 2.5rem 0rem rgba(10, 0, 48, 0.08);
  box-shadow: 0rem 1.25rem 2.5rem 0rem rgba(10, 0, 48, 0.08);
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
}
.why__icon i {
  font-size: 1.875rem;
  color: #5d41c2;
}
.why__content p {
  font-size: 0.75rem;
  color: #625e6e;
  font-weight: 600;
  margin-bottom: 0;
}
.why__title {
  font-size: 2.25rem;
  color: #0a0030;
  margin-bottom: 0.125rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .why__title {
    font-size: 1.875rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .why__title {
    font-size: 1.5625rem;
  }
}
.why__features {
  margin-top: 5.3125rem;
  padding: 2.625rem 2.5rem;
  padding-bottom: 3.3125rem;
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
  -webkit-box-shadow: 0rem 1.25rem 2.5rem 0rem rgba(10, 0, 48, 0.08);
  -moz-box-shadow: 0rem 1.25rem 2.5rem 0rem rgba(10, 0, 48, 0.08);
  box-shadow: 0rem 1.25rem 2.5rem 0rem rgba(10, 0, 48, 0.08);
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .why__features {
    margin-top: 5.4375rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .why__features {
    margin-top: 5rem;
    padding-left: 1.5625rem;
    padding-right: 1.5625rem;
  }
}
.why__features ul {
  margin-bottom: 2.8125rem;
}
.why__features ul li {
  font-size: 1.125rem;
  color: #0a0030;
  padding-left: 1.75rem;
  position: relative;
}
.why__features ul li:not(:last-child) {
  margin-bottom: 1.5625rem;
}
.why__features ul li::after {
  position: absolute;
  content: "";
  font-family: "Font Awesome 5 Pro";
  font-size: 0.9375rem;
  color: #0a0030;
  left: 0;
  top: 0.0625rem;
  font-weight: 400;
}

/*----------------------------------------*/
/*  16. Promotion CSS START
/*----------------------------------------*/
.portfolio__item:hover .portfolio__thumb::after {
  visibility: visible;
  opacity: 1;
}
.portfolio__item:hover .portfolio__content {
  bottom: 1.875rem;
  visibility: visible;
  opacity: 1;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .portfolio__item:hover .portfolio__content {
    bottom: 1.25rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .portfolio__item:hover .portfolio__content {
    bottom: 1.25rem;
  }
}
@media (max-width: 35.9375rem) {
  .portfolio__item:hover .portfolio__content {
    bottom: 0.9375rem;
  }
}
.portfolio__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #011224;
  margin-bottom: 0;
}
.portfolio__title a:hover {
  color: #1c7df8;
}
.portfolio__thumb {
  position: relative;
}
.portfolio__thumb img {
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
}
.portfolio__thumb::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(56, 81, 108, 0.3);
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
  opacity: 0;
  visibility: hidden;
}
.portfolio__content {
  position: absolute;
  bottom: 0rem;
  left: 1.875rem;
  background: #ffffff;
  padding: 1.4375rem 2.5rem;
  padding-bottom: 1.625rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
  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: 62rem) and (max-width: 74.9375rem) {
  .portfolio__content {
    left: 1.25rem;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .portfolio__content {
    left: 1.25rem;
  }
}
@media (max-width: 35.9375rem) {
  .portfolio__content {
    left: 0.9375rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
.portfolio__content span {
  display: inline-block;
  font-size: 0.9375rem;
  color: #011224;
  font-weight: 600;
  margin-bottom: 0.125rem;
}
.portfolio__menu .masonary-menu {
  padding-bottom: 0.125rem;
  border-bottom: 0.125rem solid #f3f3f3;
}
.portfolio__menu button {
  color: #011224;
  font-size: 0.875rem;
  background: transparent;
  outline: none;
  font-weight: 600;
  position: relative;
}
.portfolio__menu button:not(:last-child) {
  margin-right: 2.1875rem;
}
@media (max-width: 35.9375rem) {
  .portfolio__menu button:not(:last-child) {
    margin-right: 0.8125rem;
  }
}
.portfolio__menu button::after {
  position: absolute;
  content: "";
  bottom: -0.25rem;
  left: auto;
  right: 0;
  width: 0%;
  height: 0.125rem;
  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: 35.9375rem) {
  .portfolio__description {
    margin-left: 0;
    margin-right: 0;
  }
}
.portfolio__description h3 {
  font-size: 1.5rem;
  color: #011224;
  margin-bottom: 1.5625rem;
}
.portfolio__description p {
  color: #57556a;
}
@media (max-width: 35.9375rem) {
  .portfolio__category {
    margin-top: 3.125rem;
  }
}
.portfolio__category h3 {
  font-size: 1.25rem;
  color: #011224;
  margin-bottom: 1.5625rem;
}
.portfolio__category ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.9375rem;
}
.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: 0.4375rem;
  height: 0.4375rem;
  -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: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
}
.portfolio__more-btn {
  padding: 2.6875rem 0;
  border-top: 0.0625rem solid #e5e7e9;
  border-bottom: 0.0625rem solid #e5e7e9;
}
.portfolio__more-btn a {
  font-size: 1.25rem;
  color: #57556a;
  font-weight: 600;
}
.portfolio__more-btn a.prev i {
  padding-right: 0.625rem;
}
.portfolio__more-btn a.next i {
  padding-left: 0.625rem;
}
.portfolio__details-content h1 {
  font-size: 3.125rem;
  margin-bottom: 1.875rem;
}
@media (max-width: 35.9375rem) {
  .portfolio__details-content h1 {
    font-size: 2.5rem;
  }
}
.portfolio__meta h4 {
  display: inline-block;
  font-weight: 700;
  font-size: 1rem;
}
.portfolio__info h3 {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.4375rem;
}
.portfolio__overview h2 {
  font-size: 1.25rem;
}

/*----------------------------------------*/
/*  17. SUBSCRIBE CSS START
/*----------------------------------------*/
.subscribe__content p {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #545b65;
  margin-bottom: 0;
}
.subscribe__title {
  font-size: 2.5rem;
  color: #011224;
  font-weight: 800;
  margin-bottom: 0.9375rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .subscribe__form {
    margin-top: 3.125rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .subscribe__form {
    margin-top: 3.125rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .subscribe__form {
    margin-top: 3.125rem;
  }
}
@media (max-width: 35.9375rem) {
  .subscribe__form {
    margin-top: 3.125rem;
  }
}
.subscribe__form input {
  width: 16.875rem;
  height: 3.75rem;
  line-height: 3.5rem;
  background: #ffffff;
  padding: 0 1.875rem;
  margin-right: 1.875rem;
  border: 0.125rem solid #ffffff;
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .subscribe__form input {
    width: 15rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .subscribe__form input {
    width: 15.625rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .subscribe__form input {
    width: 100%;
    margin-bottom: 1.875rem;
  }
}
@media (max-width: 35.9375rem) {
  .subscribe__form input {
    width: 100%;
    margin-bottom: 1.875rem;
  }
}
.subscribe__form input::placeholder {
  font-size: 0.875rem;
  color: #86847d;
}
.subscribe__form input:focus {
  border-color: #1c7df8;
  outline: none;
}
.subscribe__form button {
  height: 3.75rem;
  padding: 0 2.5rem;
}
.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: 0rem 0.1875rem 0.0625rem 0rem rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0rem 0.1875rem 0.0625rem 0rem rgba(11, 6, 70, 0.08);
  box-shadow: 0rem 0.1875rem 0.0625rem 0rem rgba(11, 6, 70, 0.08);
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
  padding: 2.1875rem 3.75rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .support__item {
    padding-left: 2.8125rem;
    padding-right: 2.8125rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .support__item {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .support__item {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
}
.support__item:hover {
  -webkit-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  -moz-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
  box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(11, 6, 70, 0.08);
}
.support__title {
  font-size: 0.9375rem;
  color: #57556a;
  font-weight: 600;
  margin-bottom: 0;
}
.support__title a:hover {
  color: #6c63ff;
}
.support__icon {
  min-height: 4.375rem;
}

/*----------------------------------------*/
/*  19. PAGE TITLE CSS START
/*----------------------------------------*/
.page__title-height {
  min-height: 25rem;
}
.page__title-wrapper {
  margin-bottom: 0.375rem;
}
.page__title-wrapper h3 {
  font-size: 3.75rem;
  color: #ffffff;
  margin-bottom: 0.9375rem;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .page__title-wrapper h3 {
    font-size: 2.8125rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .page__title-wrapper h3 {
    font-size: 2.1875rem;
  }
}
@media (max-width: 35.9375rem) {
  .page__title-wrapper h3 {
    font-size: 2.1875rem;
  }
}
.page__title-wrapper-2 h3 {
  font-size: 2.5rem;
}
@media (max-width: 35.9375rem) {
  .page__title-wrapper-2 h3 {
    font-size: 1.875rem;
  }
}
.page__title-wrapper .breadcrumb {
  margin-bottom: 0;
}
.page__title-wrapper .breadcrumb .breadcrumb-item.active {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ffffff;
}
.page__title-wrapper .breadcrumb .breadcrumb-item.active::before {
  content: ".";
  font-family: "Open Sans", sans-serif;
  font-size: 1.875rem;
  color: #ffffff;
  line-height: 0.75rem;
  padding-right: 0.875rem;
}
.page__title-wrapper .breadcrumb .breadcrumb-item a {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ffffff;
}
.page__title-wrapper .breadcrumb .breadcrumb-item + .breadcrumb-item {
  padding-left: 0.875rem;
}
.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: 4.375rem 6.25rem;
  padding-bottom: 6.25rem;
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
  -webkit-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(57, 32, 147, 0.1);
  -moz-box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(57, 32, 147, 0.1);
  box-shadow: 0rem 1.875rem 4.375rem 0rem rgba(57, 32, 147, 0.1);
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .contact__wrapper {
    padding-left: 4.375rem;
    padding-right: 4.375rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .contact__wrapper {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .contact__wrapper {
    padding-left: 4.375rem;
    padding-right: 4.375rem;
  }
}
@media (max-width: 35.9375rem) {
  .contact__wrapper {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .contact__info {
    padding-right: 2.5rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .contact__info {
    padding-right: 2.5rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .contact__info {
    padding-right: 0rem;
  }
}
@media (max-width: 35.9375rem) {
  .contact__info {
    padding-right: 0rem;
  }
}
.contact__title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #011224;
  margin-bottom: 2.3125rem;
}
.contact__title-2 {
  font-size: 1.375rem;
  color: #021937;
  margin-bottom: 0.625rem;
}
.contact__title-2 a:hover {
  color: #1c7df8;
}
.contact__details ul li {
  margin-bottom: 2.5rem;
}
.contact__details ul li h4 {
  font-size: 1.0625rem;
  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: 1.875rem;
  height: 3.125rem;
  line-height: 2.875rem;
  padding: 0 1.875rem;
  background: #f2f7ff;
  border: 0.125rem solid #f2f7ff;
  outline: none;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}
.contact__form input::placeholder, .contact__form textarea::placeholder {
  color: #7a8189;
  font-size: 0.875rem;
}
.contact__form input:focus, .contact__form textarea:focus {
  border-color: #1c7df8;
}
.contact__form textarea {
  height: 8.75rem;
  padding: 1.875rem;
  resize: none;
  line-height: 1.2;
}
.contact__item {
  padding: 3.125rem 4.375rem;
  -webkit-box-shadow: 0rem 2.5rem 4.375rem 0rem rgba(1, 19, 44, 0.08);
  -moz-box-shadow: 0rem 2.5rem 4.375rem 0rem rgba(1, 19, 44, 0.08);
  box-shadow: 0rem 2.5rem 4.375rem 0rem rgba(1, 19, 44, 0.08);
  -webkit-border-radius: 1.25rem;
  -moz-border-radius: 1.25rem;
  border-radius: 1.25rem;
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .contact__item {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .contact__item {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
}
@media (max-width: 35.9375rem) {
  .contact__item {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
  }
}
.contact__item:hover .contact__icon img {
  -webkit-transform: translate3d(0, -0.625rem, 0);
  -moz-transform: translate3d(0, -0.625rem, 0);
  -ms-transform: translate3d(0, -0.625rem, 0);
  -o-transform: translate3d(0, -0.625rem, 0);
  transform: translate3d(0, -0.625rem, 0);
}
.contact__item-inner {
  position: relative;
  z-index: 1;
}
.contact__item-inner::before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0.625rem;
  border-radius: 1.25rem;
  background: #1c7df8;
  height: 50%;
  z-index: -1;
}
.contact__item-inner:hover::before {
  top: -0.1875rem;
}
.contact__icon {
  min-height: 2.875rem;
  margin-bottom: 1.125rem;
}
.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: 48rem) and (max-width: 61.9375rem) {
  .contact__shape img {
    left: 0%;
    width: 100%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .contact__shape img {
    top: -10%;
    left: 0%;
    width: 100%;
  }
}
@media (max-width: 35.9375rem) {
  .contact__shape img {
    top: -10%;
    left: 0%;
    width: 100%;
  }
}
.contact__map {
  height: 31.25rem;
}
.contact__map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/*----------------------------------------*/
/*  21. ERROR CSS START
/*----------------------------------------*/
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .error__thumb img {
    width: 100%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .error__thumb img {
    width: 100%;
  }
}
@media (max-width: 35.9375rem) {
  .error__thumb img {
    width: 100%;
  }
}
.error__content {
  padding: 0 4.0625rem;
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .error__content {
    padding-left: 1.5625rem;
    padding-right: 1.5625rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .error__content {
    padding-left: 1.5625rem;
    padding-right: 1.5625rem;
  }
}
@media (max-width: 35.9375rem) {
  .error__content {
    padding: 0;
  }
}
.error__content h3 {
  font-size: 2.25rem;
  color: #011224;
  margin-bottom: 0.625rem;
}
.error__content p {
  color: #57556a;
  font-weight: 600;
  margin-bottom: 2.5rem;
}

/*----------------------------------------*/
/*  22. SIGN CSS START
/*----------------------------------------*/
.sign__wrapper {
  padding: 3.125rem 4.375rem;
  padding-bottom: 2.8125rem;
  margin: 0 1.875rem;
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  border-radius: 0.625rem;
  -webkit-box-shadow: 0rem 2.5rem 5rem 0rem rgba(2, 2, 26, 0.14);
  -moz-box-shadow: 0rem 2.5rem 5rem 0rem rgba(2, 2, 26, 0.14);
  box-shadow: 0rem 2.5rem 5rem 0rem rgba(2, 2, 26, 0.14);
  z-index: 11;
}

/*----------------------------------------*/
/*  23. update
/*----------------------------------------*/
.main-menu{
  padding-left: 2.5rem;
}
.drop{
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
}
.drop_option{
  position: relative;
}
.drop_list{
  position: absolute;
  background-color: white;
  overflow: hidden;
  box-sizing: border-box;
  transform: translateY(-1.25rem) scaleY(0);
  transform-origin: top;
  box-shadow: 0rem 0.625rem 1rem 0 rgba(0, 0, 0, 0.1);
  transition: 0.2s;
}
.drop_option:hover .drop_list{  
  transform: translateY(0) scale(1);
}
.drop_list li:hover{
  background-color: #7127ea;
}
.drop_list li:hover a{
  color: white !important;
  transform: translateX(0.375rem);
}
.drop_list li{
  width: 100%;
  margin: 0 !important;
  transition: 0.2s;
}
.drop_list li a{
  white-space: nowrap;
  padding: 0.625rem 1.875rem !important;
  transition: 0.2s;
}
.drop_option:hover .drop_down::after{
  border-color: #7127ea;
  transform: rotate(-45deg);
  top: -0.1875rem;
}
.drop_down::after{
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.625rem;
  border-left: 0.125rem solid black;
  border-bottom: 0.125rem  solid black;
  transform: rotate(135deg);
  position: relative;
  top: 0.1875rem;
  transition: 0.3s;
}
.hero__title{
  font-size: 3.75rem;
}
.hero__content p{
  font-size: 0.875rem;
}

.loved{
  padding-top: 2rem;
}
.loved .section__title-wrapper p{
  text-transform: capitalize;
}

.header__transparent{
  top: 1.25rem;
}

.loved_details{
  margin-bottom: 5rem;
}
.loved_details .row{
  display: flex;
  justify-content: space-between;
}
.loved_details .row > div{
  flex: 1;
  flex-shrink: 0;
}
.loved_details .row:nth-of-type(even){
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.loved_details .row:nth-of-type(even) .image{
  order: 3;
  padding-right: 0;
  margin-left: 5rem;
}
.loved_details .row .image{
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 5rem;
}
.loved_details .row .image img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.625rem;
}
.loved_details .row .image span{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 100;
  font-weight: bold;
  font-size: 2.5rem;
  line-height: 2.5rem;
  font-family: "Open Sans", sans-serif;
  color: white;
  width: calc(100% - 3.75rem);
  display: block;
  text-align: center;
}
.loved_details .row .text{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.loved_details .row .text h2{
 margin-bottom: 1.5625rem;
}
.main-menu ul li a{
  padding: 1.25rem 0;
}
.price_list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.price_list li{
  width: calc(100% / 3 - 1.25rem);
  background-color: white;
  padding: 1.25rem;
  box-sizing: border-box;
  border-radius: 0.625rem;
  box-shadow: 0rem 0.625rem 2.5rem 0rem rgba(57, 32, 147, 0.1);
  margin-bottom: 5rem;
}
.price_list li .price_li_box > div{
  padding: 1.5625rem 1.25rem;
  box-sizing: border-box;
  border-bottom: 0.0625rem dashed #ddd;
}
.price_list li .price_li_box p{
  font-size: 1rem;
  font-weight: 400;
  min-height: 3.125rem;
}
.price_list li .price_li_box a{
  display: block;
  width: 100%;
  background-color: #1c7df8;
  color: white;
  padding: 0.75rem 1.25rem;
  box-sizing: border-box;
  text-align: center;
  margin-top: 0.625rem;
  border-radius: 0.3125rem;
  font-weight: bold;
  font-size: 1.125rem;
  line-height: normal !important;
}
.price_list li .price_li_box a:hover{
  color: #1c7df8;
}
.price_list li .price_li_box > div:last-child{
  border: none;
}
.price_list li .price_title h3{
  font-size: 1.25rem;
  text-align: center;
  color: #ff5a3c;
}
.price_box .whb-price > strong{
  font-weight: bold !important;
}
.price_title{
  position: relative;
}
.hotsImg{
  position: absolute;
  display: block;
  width: 5rem;
  height: auto;
  right: -1rem;
  top: -0.5rem;
}
.whb-price > s{
  font-weight: 400;
  color: yellow;
}
.price_list li .price_li_box a:hover strong{
  color: #1c7df8 !important;
}
.price_list li .price_li_box a:hover s{
  color: black;
  display: none;
}

.services__shape-2{
  overflow: hidden;
}

.other-contact{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  height: 4.8rem;
}
.btn-other{
  display: flex;
  align-items: center;
  width: 30%;
  height: 3rem;
  padding: 0.5rem;
  border-radius: 0.3rem;
}
.btn-other:hover{
  background-color: #1c7df8;
  color: white;
  transform: translateY(-0.3rem);
  box-shadow: 0 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.2);
  border-bottom: 0.2rem solid #145dba;
}
.btn-other img{
  display: block;
  width: 2rem;
  height: 2rem;
  margin-right: 0.6rem;
}

#contact{
  padding: 0;
}
.section__title-wrapper{
  margin-top: 6.25rem;
}

.cta__area{
  margin-bottom: -6.25rem;
}
.cta__inner{
  padding: 5rem;
  box-shadow: 0rem 0.625rem 2.5rem 0rem rgba(15, 0, 40, 0.2);
}
.cta__content{
  flex: 1;
}
.cta__title{
  font-size: 2.125rem;
  text-align: center;
}

footer{
  padding-top: 12.5rem;
}

.footer__top .row{
  display: flex;
  justify-content: space-between;
}
.footer_list{
  width: auto;
  display: flex;
}
.footer__top .row .col-xxl-3{
  width: 40%;
}
.footer_list > div{
  flex-shrink: 0;
  margin-left: 6.25rem;
}
.footer__logo{
  margin-bottom: 2.5rem;
}

.features_main{
  background-size: cover;
}

/*----------------------------------------*/
/*  23. youtube-features
/*----------------------------------------*/

.support__area .container{
  position: relative;
  z-index: 10;
}
.section__title-wrapper-5{
  margin: 0;
}
.section__title-wrapper-5 .section__title-4{
  margin: 0;
}
.anti-new {
  padding: 2.8125rem 0;
  background-color: #132a55;
}

.anti-new h2,
.anti-new p {
  color: white;
}

.anti-new h2 {
  margin-top: 0;
  margin-bottom: 1em;
  font-size: 1.75rem;
}

.anti-new p {
  margin-bottom: 0;
  /*text-indent: 2em;*/
}

.anti-new .swiper {
  width: 100%;
}

.anti-new .newflex > .col{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
}
.anti-new .swiper-slide {
  min-height: auto !important;
}

.anti-new .swiper-slide img {
  width: 100%;
  height: 25rem;
  object-fit: contain;
}

.promotion__area2{
  margin-top: 6.25rem;
}
.contact__support2{
  padding-bottom: 6.25rem !important;
}
.footer__area2{
  padding-top: 6.25rem;
}
.images22{
  transition: 0.3s;
}
.images22:hover{
  transform: scale(1.1);
}

@media (max-width: 35.9375rem) {
  .sign__wrapper {
    margin: 0;
    padding: 1.875rem 1.25rem;
    padding-bottom: 1.5625rem;
  }
}
.sign__shape img {
  position: absolute;
  z-index: -1;
}
.sign__shape img.man-1 {
  left: 28%;
  top: 60%;
  z-index: 1;
}
.hero__area{
  max-width: 100%;
  overflow: hidden;
}


/*  */

@media only screen and (min-width: 87.5rem) and (max-width: 100rem) {
  .sign__shape img.man-1 {
    left: 19%;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .sign__shape img.man-1 {
    left: 16%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .sign__shape img.man-1 {
    left: 7%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .sign__shape img.man-1 {
    left: 2%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .sign__shape img.man-1 {
    left: 1%;
  }
}
@media (max-width: 35.9375rem) {
  .sign__shape img.man-1 {
    display: none;
  }
}
.sign__shape img.man-2 {
  right: 24%;
  top: 65%;
}
@media only screen and (min-width: 87.5rem) and (max-width: 100rem) {
  .sign__shape img.man-2 {
    top: 55%;
    right: 20%;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .sign__shape img.man-2 {
    top: 60%;
    right: 15%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .sign__shape img.man-2 {
    top: 60%;
    right: 7%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .sign__shape img.man-2 {
    top: 60%;
    right: 0%;
    z-index: 1;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .sign__shape img.man-2 {
    top: 60%;
    right: 0%;
    z-index: 1;
  }
}
@media (max-width: 35.9375rem) {
  .sign__shape img.man-2 {
    display: none;
  }
}
.sign__shape img.man-2.man-22 {
  top: 50%;
}
@media only screen and (min-width: 87.5rem) and (max-width: 100rem) {
  .sign__shape img.man-2.man-22 {
    top: 55%;
    right: 20%;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .sign__shape img.man-2.man-22 {
    top: 60%;
    right: 15%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .sign__shape img.man-2.man-22 {
    top: 60%;
    right: 7%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .sign__shape img.man-2.man-22 {
    top: 60%;
    right: 0%;
    z-index: 1;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .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: 87.5rem) and (max-width: 100rem) {
  .sign__shape img.circle {
    right: 25%;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .sign__shape img.circle {
    right: 22%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .sign__shape img.circle {
    right: 11%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .sign__shape img.circle {
    right: 4%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .sign__shape img.circle {
    right: 2%;
  }
}
@media (max-width: 35.9375rem) {
  .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: 87.5rem) and (max-width: 100rem) {
  .sign__shape img.dot {
    right: 29%;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .sign__shape img.dot {
    right: 26%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .sign__shape img.dot {
    right: 18%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .sign__shape img.dot {
    right: 5%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .sign__shape img.dot {
    right: 3%;
  }
}
@media (max-width: 35.9375rem) {
  .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: 48rem) and (max-width: 61.9375rem) {
  .sign__shape img.bg {
    left: 10%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .sign__shape img.bg {
    left: 0%;
  }
}
@media (max-width: 35.9375rem) {
  .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: 87.5rem) and (max-width: 100rem) {
  .sign__shape img.zigzag {
    left: 24%;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .sign__shape img.zigzag {
    left: 23%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .sign__shape img.zigzag {
    left: 11%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .sign__shape img.zigzag {
    left: 3%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .sign__shape img.zigzag {
    left: 2%;
  }
}
@media (max-width: 35.9375rem) {
  .sign__shape img.zigzag {
    display: none;
  }
}
.sign__shape img.flower {
  bottom: 13%;
  right: 30%;
}
@media only screen and (min-width: 87.5rem) and (max-width: 100rem) {
  .sign__shape img.flower {
    right: 24%;
  }
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .sign__shape img.flower {
    right: 24%;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .sign__shape img.flower {
    right: 12%;
  }
}
@media only screen and (min-width: 48rem) and (max-width: 61.9375rem) {
  .sign__shape img.flower {
    right: 3%;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .sign__shape img.flower {
    right: 1%;
  }
}
@media (max-width: 35.9375rem) {
  .sign__shape img.flower {
    right: 1%;
    bottom: 3%;
  }
}
.sign__header {
  padding: 0 2.1875rem;
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .sign__header {
    padding: 0 0.625rem;
  }
}
@media (max-width: 35.9375rem) {
  .sign__header {
    padding: 0rem;
  }
}
.sign__header p {
  margin-bottom: 0;
  color: #7a797f;
  position: relative;
  padding: 0 2.5rem;
  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: 3.125rem;
  background: #eeedf2;
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
  position: relative;
  line-height: 3rem;
  padding-left: 1.4375rem;
  z-index: 1;
  overflow: hidden;
  font-size: 1rem;
}
.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: 13.75rem;
  width: 13.75rem;
  background: #3360bd;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: -1;
}
@media (max-width: 35.9375rem) {
  .sign__social::after {
    left: -62%;
  }
}
.sign__social i {
  color: #ffffff;
  font-size: 1rem;
  margin-right: 3.125rem;
}
@media (max-width: 35.9375rem) {
  .sign__social i {
    margin-right: 2.1875rem;
  }
}
.sign__social:hover {
  color: #ffffff;
}
.sign__social:hover::after {
  width: 100%;
  height: 150%;
  left: 0;
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
}
.sign__social.g-plus::after {
  background: #e93e30;
}
.sign__form h5 {
  font-size: 1rem;
  font-weight: 500;
  color: #021937;
  margin-bottom: 0.6875rem;
}
.sign__input {
  position: relative;
}
.sign__input input {
  width: 100%;
  height: 3.75rem;
  line-height: 3.25rem;
  padding: 0 3.125rem;
  font-size: 0.875rem;
  border: 0.125rem solid transparent;
  background: #f5f5f7;
  color: #222222;
  -webkit-border-radius: 0.375rem;
  -moz-border-radius: 0.375rem;
  border-radius: 0.375rem;
}
.sign__input input::placeholder {
  color: #8e8c94;
}
.sign__input input:focus {
  outline: none;
  background: #ffffff;
  border-color: #1c7df8;
  -webkit-box-shadow: 0rem 0.0625rem 0.25rem 0rem rgba(8, 0, 42, 0.2);
  -moz-box-shadow: 0rem 0.0625rem 0.25rem 0rem rgba(8, 0, 42, 0.2);
  box-shadow: 0rem 0.0625rem 0.25rem 0rem 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: 1.5625rem;
  font-size: 0.875rem;
  color: #8e8c94;
}
.sign__agree input {
  margin: 0;
  appearance: none;
  -moz-appearance: none;
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  background: transparent;
  border: 0.0625rem solid #7a797f;
  outline: none;
  margin-top: 0.125rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
}
.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: 0.625rem;
  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: 0.625rem;
  font-size: 0.875rem;
}
.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(3.125rem);
    -webkit-transform: translateY(3.125rem);
    -moz-transform: translateY(3.125rem);
    -ms-transform: translateY(3.125rem);
    -o-transform: translateY(3.125rem);
  }
}
@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(3.125rem);
    -webkit-transform: translateY(3.125rem);
    -moz-transform: translateY(3.125rem);
    -ms-transform: translateY(3.125rem);
    -o-transform: translateY(3.125rem);
  }
}
@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: 1.125rem;
  margin-bottom: 0;
  padding-top: 0.625rem;
}
.footer__widget-title-3 h3 {
  color: #ffffff;
}
.footer__widget-content p {
  color: #999;
  font-size: 0.75rem;
  line-height: 1.5;
}
.footer__widget-content-3 p {
  color: #9da4ac;
}
.footer__link {
  padding-top: 0.5rem;
}
.footer__link ul li:not(:last-child) {
  margin-bottom: 0.9375rem;
}
.footer__link ul li a {
  color: #57556a;
  font-weight: 600;
  position: relative;
}
.footer__link ul li a::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: -0.375rem;
  width: 100%;
  height: 0.125rem;
  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: -0.125rem;
  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;
}
.footer__social {
  padding-top: 0.875rem;
}
.footer__social ul li {
  display: inline-block;
}
.footer__social ul li:not(:last-child) {
  margin-right: 0.625rem;
}
.footer__social ul li a {
  color: #868d94;
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.375rem;
  text-align: center;
  border: 0.0625rem 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: 0rem 1.25rem 1.875rem 0rem rgba(7, 3, 55, 0.16);
  -moz-box-shadow: 0rem 1.25rem 1.875rem 0rem rgba(7, 3, 55, 0.16);
  box-shadow: 0rem 1.25rem 1.875rem 0rem 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: 0.0625rem solid #e7ecf1;
  padding: 1.5625rem 0;
}
.footer__copyright-2 {
  border-color: rgba(255, 255, 255, 0.1);
}
.footer__copyright-3 {
  border: none;
  padding: 2.1875rem 0;
}
.footer__copyright-wrapper p {
  font-size: 0.875rem;
  font-weight: 600;
  color: #474554;
  margin-bottom: 0;
}
.footer__copyright-wrapper p a {
  color: #7127ea;
}
.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: 4.375rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .footer__pl-70 {
    padding-left: 2.1875rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .footer__pl-70 {
    padding-left: 0rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .footer__pl-70 {
    padding-left: 0rem;
  }
}
@media (max-width: 35.9375rem) {
  .footer__pl-70 {
    padding-left: 0rem;
  }
}
.footer__pl-90 {
  padding-left: 5.625rem;
}
@media only screen and (min-width: 75rem) and (max-width: 87.4375rem) {
  .footer__pl-90 {
    padding-left: 1.25rem;
  }
}
@media only screen and (min-width: 62rem) and (max-width: 74.9375rem) {
  .footer__pl-90 {
    padding-left: 0rem;
  }
}
@media only screen and (min-width: 36rem) and (max-width: 47.9375rem) {
  .footer__pl-90 {
    padding-left: 0rem;
  }
}
@media (max-width: 35.9375rem) {
  .footer__pl-90 {
    padding-left: 0rem;
  }
}

/*# sourceMappingURL=style.css.map */
@media only screen and (max-width: 1300px){
  :root{
    font-size: 14px;
  }
  .hero__thumb{
    transform: scale(0.8);
  }
}
@media only screen and (max-width: 1000px){
  .loved_details .row{
    flex-wrap: wrap;
  }
  .loved_details .row .image{
    margin: 0;
    flex-basis: 100%;
    margin-bottom: 40px;
  }
  .price_list li{
    width: calc(50% - 20px);
  }
  .footer_list > div{
    margin-left: 4rem
  }
}

@media only screen and (max-width: 760px){
  :root{
    font-size: 12px;
  }
  .loved_details .row:nth-of-type(even){

  }
  .loved_details .row:nth-of-type(even) .image{
    margin-left: 0;
    order: 0;
  }
  .container{
    padding: 0 1.25rem;
  }
  .hero__title {
    /* margin-top: 8rem; */
    font-size: 3.5rem !important;
  }
  .hero__thumb{
    display: none;
  }
  .hero__content p{
    font-size: 1rem;
  }
  .loved{
    padding-top: 0rem;
  }
  h2{
    font-size: 2.5rem !important;
  }
  p{
    font-size: 1.4rem !important;
    line-height: 2.5rem;
  }
  button{
    font-size: 1.4rem !important;
  }
  .price_list li .price_li_box a{
    font-size: 1.4rem;
    padding: 0.8rem;
    height: auto;
  }
  .price_list li .price_li_box a::after{
    display: none;
  }
  .pt-150{
    padding-top: 0px;
  }

  .services__area{
    padding-top: 1rem;
  }

  .price__area{
    padding-top: 0;
  }

  .price_list li {
    width: 100%;
  }

  .footer__top .row > div{
    width: 100% !important;
  }
.footer_list{
  flex-wrap: wrap;
}
.footer_list > div{
  width: 100% ;
  margin-left: 0;
}
.footer_list h3 {
  font-size: 2rem;
}

.footer__link ul li a{
  font-size: 1.4rem;
}

.mean-container .mean-nav ul li a{
  font-size: 1.2rem;
}
.sidebar__close{
  right: 2rem;
  top: 2.6rem;
  transform: scale(0.8);
}
.drop_down{
  display: none;
}
.dropdown-opened{
  margin-bottom: 3rem;
}
.drop_list{
  box-shadow: none;
}
.section__title-wrapper{
  margin-top: 0;
}
.about__wrapper{
  margin-top: 2rem;
}
.text-center{
  margin-top: 6rem;
}
.price_list li .price_title h3{
  font-size: 2rem;
}
.price_list li{
  margin-bottom: 2rem;
}
.price_list li .price_li_box p{
  font-size: 1.2rem !important;
  min-height: auto;
}
.contact__item{
  margin-top: 3rem;
  box-shadow: 0rem 1rem 1rem 0rem rgba(1, 19, 44, 0.08);
}
.contact__support .section__title-wrapper{
  margin-bottom: 2rem;
}
.support__item{
  margin-top: 0;
}
.features_main{
  background-position: center;
}
.features .swiper-backface-hidden .swiper-slide{
  padding: 0 2rem;
}
.features .swiper-backface-hidden .swiper-slide .col-12{
  margin: 1rem 0;
}
.features .price__area .section__title-wrapper{
  margin-top: 4rem;
}
}
.browser-fingerprint{
  margin-bottom: 3rem;
}
.browser-fingerprint .img{
  display: flex;
  justify-content: center;
}
.browser-fingerprint img{
  display: block;
  width: 40vw;
  height: auto;
}

.about__area .col-xxl-5{
  display: flex;
  align-items: center;
}

.about__area .col-xxl-6{
  display: flex;
  align-items: center;
}

.about__area .col-xxl-5 .section__title-wrapper{
  margin: 0;
}