/*
  Theme Name: appnox - Product Landing HTML5 Template
  Author: theme_group
  Support: robiulislamfree@gmail.com
  Description: appnox is app landing PSD Template.This is a clean Professional and Creative Design using bootstrap 1170px Grid System.You can use appnox as a better way to present and promote your startup mobile apps,
  Tags: business, clean design, clean layout, marketing, minimal design, minimalist, modern, newsletter, app, app landing, App Showcase, digital, digital product, landing page, mobile apps, modern, sales apps, sass, software, startup,
  Version: 1.0
*/
/* CSS Index
-----------------------------------

1.	google fonts
2.	theme default css
3.	pre loader css
4.	header area css
5.	main menu area css
		i.   sub menu
6.	search form area css
7.	hero area css
8.	services area css
9.	about area css
10.	pricing table area css
11.	videos area css
12.	screen shots area css
13.	call to action area css
14.	faq area css
15.	testimonial area css
16.	latest blog area css
17.	footer area css
		i.   wedget 1 css
		ii.  wedget 2 css
		iii. wedget 3 css
18.	footer copyright css
19.	breadcrumb area css
20.	blog wedget css
21.	widget search area css
		i.   widget latest post area css
		ii.  widget post archive area css
		iii. widget follow us css
		iv.  widget tags area css
22.	blog details area css
		i.   blog details tag & share
		ii.  blog author area css
		iii. related post area css
		iv.  recent comments area css
		v.   comments form area css
23.	contact area css
		i.   contact form area css
24.	error area css


*/

/* google fonts */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap");
/* theme default css */

body {
  font-family: "Noto Sans TC", "PingFang TC", "Helvetica Neue", "Helvetica",
    "Arial", sans-serif;
  font-weight: normal;
  font-style: normal;
}

img {
  max-width: 100%;
  height: auto;
  transition: all 0.3s ease-out 0s;
}

a,
.button,
.btn {
  -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,
.btn:focus {
  text-decoration: none;
  outline: none;
}

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

a.btn-google:hover {
  color: rgba(0, 0, 0, 0.65);
  background: #DDDDDA;
}
a.btn-fb:hover {
  color: white;
  background: #3A5B9A;
}
.btn-type-6:hover{
  color: inherit;
}
.btn:focus,
button:focus,
input:focus,
input:focus,
textarea,
textarea:focus,
.form-control:focus {
  outline: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  border-color: inherit;
  background: #fff;
  color: #000;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Avenir", "Noto Sans TC", sans-serif;
  color: #353858;
  margin: 0px;
  padding: 0px;
  font-style: normal;
  font-weight: 700;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

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

li {
  list-style: none;
}

p {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: #656970;
  margin: 0px;
}

hr {
  border-bottom: 1px solid #eceff8;
  border-top: 0 none;
  margin: 5px 0 20px 0;
  padding: 0;
}

label {
  color: #7e7e7e;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
}

*::-moz-selection {
  background: #d6b161;
  color: #fff;
  text-shadow: none;
}

::-moz-selection {
  background: #444;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #106ad2;
  color: #fff;
  text-shadow: none;
}

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

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

@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}

.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spinner-border 0.75s linear infinite;
  animation: spinner-border 0.75s linear infinite;
}

/* pre loader css */

.preloader {
  background: -webkit-linear-gradient(
    310deg,
    #d754ad 0%,
    #f96785 67%,
    #fe7333 100%
  );
  background: -o-linear-gradient(310deg, #d754ad 0%, #f96785 67%, #fe7333 100%);
  background: linear-gradient(40deg, #d754ad 0%, #f96785 67%, #fe7333 100%);
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 999999999;
}

.preloader .loader {
  width: 250px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-family: helvetica, arial, sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.2em;
}

.loader::before,
.loader::after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: #ff2782;
  position: absolute;
  -webkit-animation: load 0.7s infinite alternate ease-in-out;
  animation: load 0.7s infinite alternate ease-in-out;
}

.loader::before {
  top: 0;
}

.loader::after {
  bottom: 0;
}

@-webkit-keyframes load {
  0% {
    left: 0;
    height: 30px;
    width: 15px;
  }

  50% {
    height: 8px;
    width: 40px;
  }

  100% {
    left: 235px;
    height: 30px;
    width: 15px;
  }
}

@keyframes load {
  0% {
    left: 0;
    height: 30px;
    width: 15px;
  }

  50% {
    height: 8px;
    width: 40px;
  }

  100% {
    left: 235px;
    height: 30px;
    width: 15px;
  }
}

/* header area css */
.tv-area {
  width: 100%;
  box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
  z-index: 9999;
  -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
  animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
  -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background-color: rgba(255, 255, 255, 0.72);
  transition: 0.3s;
}

.sticky {
  left: 0;
  margin: auto;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
  animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background-color: rgba(255, 255, 255, 0.72);
  transition: 0.3s;
}

.header-area {
  border-bottom: 1px rgba(0, 0, 0, 0.16) solid;
}

.header-logo {
}

.header-logo a {
  display: block;
  margin: auto;
  max-width: 120px;
}

.header-top-area {
  background-color: #222;
  font-size: 15px;
  padding: 10px 0;
}

.header-top-area a,
.header-top-area {
  color: #fff;
}

.header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 40px;
}

.header-top-area i {
  color: #f7be49;
}

/* main menu area css */
.main-menu ul {
  display: inline-block;
}

.main-menu nav > ul > li {
  display: inline-block;
  position: relative;
}

.main-menu nav > ul > li:last-child a {
  padding-right: 0;
}

.main-menu nav > ul > li:first-child a {
  padding-left: 0;
}

.main-menu nav > ul > li > a {
  color: #111111;
  display: block;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 13px;
  transition: all 0.3s ease 0s;
  line-height: 1.25;
  font-family: "Avenir", sans-serif;
  text-transform: capitalize;
}

.main-menu nav > ul > li:hover > a,
.main-menu nav > ul > li.active > a {
  color: #fab939;
}

/* sub menu */
.main-menu nav > ul > li .sub-menu {
  background: #ffffff none repeat scroll 0 0;
  border-top: 3px solid #fab939;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  right: 0;
  opacity: 0;
  position: absolute;
  top: 100%;
  transition: all 0.4s ease-out;
  visibility: hidden;
  width: 220px;
  z-index: 9;
  transform-origin: top;
  transform: scaleY(0);
  text-align: center;
  border-radius: 8px;
}

.main-menu nav > ul > li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}

.main-menu nav > ul > li .sub-menu li {
  display: block;
  position: relative;
  font-weight: 700;
  margin-top: 5px;
}

.main-menu nav > ul > li .sub-menu li a {
  color: #666666;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  padding: 8px 20px;
  text-transform: capitalize;
  display: block;
  font-family: "Avenir", sans-serif;
}

.main-menu nav > ul > li:hover > .sub-menu li > a:hover {
  text-decoration: underline;
}

/* sub menu */
.main-menu nav > ul > li > .sub-menu > li > .sub-menu {
  background: #ffffff none repeat scroll 0 0;
  border-top: 3px solid #ff60a3;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  left: 100%;
  opacity: 0;
  position: absolute;
  top: 120%;
  transition: all 0.3s ease 0s;
  visibility: hidden;
  width: 220px;
  z-index: 9;
}

.main-menu nav > ul > li > .sub-menu > li:hover .sub-menu {
  top: 0 !important;
  opacity: 1;
  top: 100%;
  visibility: visible;
}

ol.sub-menu {
  padding-left: 0px;
}

.header-top-btn {
  margin-left: 20px;
  margin-right: 20px;
  display: inline-block;
}

.header-top-btn a {
  color: #1d1d1f;
}

.header-top-btn a:hover {
  color: #ffb939;
}

/* search form area css */

ul.header-search {
  display: inline-block;
  margin: 5px 0px 0px 25px;
}

ul.header-search li a {
  color: #111111;
}

ul.header-search li a:hover {
  color: #ffb939;
}

#search-overlay {
  display: none;
}

.search-form-area {
  background-image: -moz-linear-gradient(
    178deg,
    rgb(249, 103, 133) 0%,
    rgb(254, 115, 51) 100%
  );
  background-image: -webkit-linear-gradient(
    178deg,
    rgba(249, 103, 133, 0.9) 0%,
    rgba(254, 115, 51, 0.9) 100%
  );
  background-image: -ms-linear-gradient(
    178deg,
    rgb(249, 103, 133) 0%,
    rgb(254, 115, 51) 100%
  );
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  text-align: center;
  border: #a0a0a0 solid 1px;
  margin: 0;
  z-index: 99999;
}

.search-form-area:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: 0;
}

.search-form-centered {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
  padding: 10px 15px;
  color: #fff;
  border: none;
  background: transparent;
}

#search-box {
  position: relative;
  width: 100%;
  margin: 0;
}

.search-form input.form-control {
  box-shadow: none;
  color: #777777;
  height: 80px;
  background: #f8f8f8;
  border: none;
  border-radius: 30px;
  padding: 20px 30px;
}

.search-form button {
  background: #fab939;
  position: absolute;
  top: 10px;
  right: 10px;
  text-align: center;
  line-height: 42px;
  border-width: 0;
  border-radius: 30px;
  cursor: pointer;
  padding: 9px 50px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
}

#close-btn {
  position: fixed;
  top: 1em;
  right: 1em;
}

#close-btn:hover {
  cursor: pointer;
}

/* hero area css */

.hero-bg {
  /*background-image: url(assets/img/hero/hero-bg-2.png);*/
  background-position: center center;
  background-size: cover;
  color: #fff;
  height: 1230px;
  overflow: hidden;
}

.hero-bg:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(
    130deg,
    #d754ad 0%,
    #f96785 67%,
    #fe7333 100%
  );
  background: linear-gradient(-40deg, #d754ad 0%, #f96785 67%, #fe7333 100%);
  opacity: 1;
}

.hero-content {
  padding-top: 120px;
}

.hero-content h2 {
  color: #fff;
  font-size: 54px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 25px;
}

.hero-content p {
  font-size: 24px;
  color: #fff;
  margin-bottom: 25px;
  line-height: 1.5;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
}

.hero-btn .appstore-cta {
  flex-direction: column;
  width: 200px;
}

.hero-btn a.btn:first-child,
.hero-btn span:nth-child(2) {
  margin-right: 35px;
}

.hero-mobile-img {
  position: absolute;
  left: 60%;
  top: 115px;
}

/* services area css */
.appnox-services-area {
  background-position: fixed;
  background-image: -webkit-linear-gradient(
    310deg,
    #fe7142 0%,
    #cb4fc2 50%,
    #9a57e8 75%,
    #53a0e8 100%
  );
  background-image: linear-gradient(
    140deg,
    #fe7142 0%,
    #cb4fc2 50%,
    #9a57e8 75%,
    #53a0e8 100%
  );
  -webkit-transition: -webkit-transform 400ms ease-in-out 200ms;
  transition: -webkit-transform 400ms ease-in-out 200ms;
  transition: transform 400ms ease-in-out 200ms;
  transition: transform 400ms ease-in-out 200ms,
    -webkit-transform 400ms ease-in-out 200ms;
}

.appnox-services-area .section-title h3 {
  color: #fff;
}

#appnox-services-area .section-title p {
  font-weight: 500;
}

.single-services {
  box-shadow: 0 0 36px 0px rgba(0, 0, 0, 0.14);
  /*padding: 46px 25px 35px;*/
  overflow: hidden;
  border-radius: 18px;
  background-color: rgba(255, 255, 255, 0.85);
  height: 100%;
}

.single-services-account-opening {
  margin-top: 120px;
}

.single-services-account-opening-row {
  justify-content: space-between;
  height: 100%;
}

.single-services-transaction {
  margin-bottom: 120px;
}

@media screen and (max-width: 768px) {
  .single-services-account-opening {
    margin-top: 0;
  }

  .single-services-transaction {
    margin-bottom: 0;
  }
}

.single-services-account-opening .single-services-content h2,
.single-services-transaction .single-services-content h2 {
  text-align: center;
}

.single-services-account-opening .single-services-content p,
.single-services-transaction .single-services-content p {
  color: #979797;
}

.style-shape {
  position: absolute;
}

.hero-style-shape .shape-1 {
  top: 10%;
  left: 0px;
}

.services-shape .style-shape.shape-1 {
  left: -60px;
  top: 0;
  z-index: 1;
  opacity: 0.5;
}

.services-shape .style-shape.shape-2 {
  left: 0;
  top: 0;
  z-index: -1;
}

.appnox-services-area .col-xl-4:nth-child(odd) .single-services {
  margin-top: 40px;
}

.single-services-content h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  margin: 57px 0 22px 0;
}

.single-services-content h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin: 50px 0 22px 0;
}

.single-services-content {
  margin-top: 26px;
  padding: 0px 20px 40px 20px;
}

.single-services-content i {
  margin-right: 10px;
  float: left;
}

.single-services-content span {
  display: table;
  margin-bottom: 20px;
  font-weight: 400;
  line-height: 28px;
  color: #656970;
}

.single-services-content p {
  color: #778395;
  text-align: justify;
}

.main-chart {
  padding: 30px;
}

.key-counter > .about-single-counter {
  text-align: left;
  padding-left: 15px;
  padding-right: 15px;
}

.key-counter > .about-single-counter h3 > span.counter {
  font-size: 2.5rem;
}

.sc-section {
  overflow: hidden;
  height: 100vh;
  position: relative;
}

.sc-pic {
  position: fixed;
  left: 50px;
  top: 50px;
}

.sc-content {
  padding-left: 50px;
  position: absolute;
  left: 10%;
  top: 50%;
}

.sc-content h2,
.sc-content p {
  color: #fff;
}

.ser-img-account-opening {
  background-image: url(assets/img/services/account_opening.png);
}

.ser-img-transaction {
  background-image: url(assets/img/services/transaction.png);
}

.ser-img-quality-score {
  background-image: url(assets/img/services/quality_score.png);
}

.ser-img-reasonable-value {
  background-image: url(assets/img/services/reasonable_value.png);
}

.ser-img-take-courses-in-app {
  background-image: url(assets/img/services/take_courses_in_app.png);
}

.ser-img-stock-filter {
  background-image: url(assets/img/services/stock_filter.png);
}

.ser-img {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center right;
}

.ser-img::after {
  content: "";
  display: block;
  padding-bottom: 80%;
}

.app-area {
  background-color: rgba(0, 0, 0, 0.15);
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)),
    url(assets/img/hero/hero-bg-5.png) fixed;
  background-size: cover;
  background-position: center;
}

.app-area h3,
.app-area p {
  color: #fff;
}

.app-area .section-title {
  text-shadow: 3px 0px 10px rgba(10, 10, 15, 0.5);
}

.ser-title p {
  font-size: 60px;
  line-height: 1.2;
}

/* about area css */
.appnox-about-area {
  position: relative;
}

.appnox-about-img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
}

.about-single-counter {
  position: relative;
  padding: 30px 0;
  text-align: center;
  border-radius: 15px 0 15px 15px;
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.14);
  margin-bottom: 30px;
  overflow: hidden;
}

.about-single-counter .counter {
  font-size: 48px;
  line-height: 50px;
  font-weight: 700;
  margin-bottom: 10px;
}

.about-single-counter span {
  font-size: 22px;
  line-height: 32px;
  font-weight: 500;
  color: #8b95a3;
  text-transform: capitalize;
}

.counter-shape {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.3;
  transition: all 0.3s;
}

.about-single-counter:hover .counter-shape {
  transform: scale(1.5);
  opacity: 1;
}

/* pricing table area css */

.appnox-pricing-area {
  position: relative;
  background-position: center center;
  background-size: cover;
  background-attachment: inherit;
  position: relative;
  height: 100%;
  /*background-image: url(assets/img/prictable/prictable-bg.png);*/
  background-repeat: no-repeat;
}

.pricing-area {
  padding-top: 100px;
}

.pricing-area.pricing-area-3 {
  margin-top: 0px;
}

ul.price-nav {
  display: inline-block;
  border: 1px solid #e7e7e7;
  border-radius: 30px;
}

ul.price-nav li {
  display: inline-block;
}

.price-header h4 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 22px;
  font-family: "Avenir", sans-serif;
}

ul.price-nav li a {
  padding: 20px 40px;
  line-height: 1;
  font-size: 15px;
  font-weight: 700;
  color: #878991;
  border-radius: 30px 0px 0px 30px;
}

ul.price-nav li a.active {
  color: #fff;
  background: #042c5c;
  -webkit-border-radius: 30px 0px 0px 30px;
  -moz-border-radius: 30px 0px 0px 30px;
  -ms-border-radius: 30px 0px 0px 30px;
  -o-border-radius: 30px 0px 0px 30px;
}

ul.price-nav li:nth-child(2) a {
  border-radius: 0px 30px 30px 0px;
  -webkit-border-radius: 0px 30px 30px 0px;
  -moz-border-radius: 0px 30px 30px 0px;
  -ms-border-radius: 0px 30px 30px 0px;
  -o-border-radius: 0px 30px 30px 0px;
}

.pricing-area {
  margin-bottom: -240px;
}

.single-price-area {
  background: #ffffff;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  padding: 0 50px 40px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: 15px 16px 28px 0px rgba(0, 0, 0, 0.14);
  -webkit-box-shadow: 15px 16px 28px 0px rgba(0, 0, 0, 0.14);
}

.single-price-bg {
  background-position: center center;
  background-size: cover;
  background-attachment: inherit;
  position: absolute;
  height: 100%;
  background-image: url(assets/img/prictable/prictable-bg.png);
  background-repeat: no-repeat;
  left: 0;
  right: 0;
  bottom: -30px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: -1;
}

.single-price-area:hover .price-header {
  background: #fab939;
}

.single-price-area:hover .price-header h4,
.single-price-area:hover .price-header h2 {
  color: #fff;
}

.single-price-area:hover .btn {
  color: #ffffff;
  background: #ffd246;
}

.single-price-area:hover {
  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.15);
}

.single-price-area.active .price-header {
  background: #ffd246;
}

.single-price-area.active .btn {
  color: #ffffff;
  background: #fab939;
}

.single-price-area.active {
  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.15);
}

.price-header {
  position: relative;
  border-radius: 50%;
  display: inline-block;
  margin-top: -60px;
  text-align: center;
  background: #e8e8ed;
  width: 200px;
  height: 200px;
  padding: 85px 0 0;
  margin-bottom: 30px;
  transition: all 0.3s;
}

.price-img {
  padding: 0 0 30px;
}

.price-header > span {
  font-size: 18px;
  color: #30323d;
  margin-bottom: 15px;
  font-weight: 600;
}

.price-header h2 {
  font-size: 45px;
  font-weight: 600;
  font-family: "Avenir", sans-serif;
  transition: all 0.3s;
}

.price-item-list ul li {
  font-size: 17px;
  margin-bottom: 17px;
}

.price-item-list ul li:last-child {
  margin-bottom: 0px;
}

.price-btn .btn-type-4 {
  background-color: #e8e8e8;
  color: #1c1c1c;
}

.btn-type-5 {
  background-color: rgb(0, 145, 255);
  color: #ffffff;
}

/* videos area css */
.appnox-videos-area {
  position: relative;
  background: url("assets/img/hero/hero-bg-3.png");
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
}

.appnox-videos-area:after {
  content: "";
  padding-bottom: 40%;
  display: block;
}

.appnox-videos {
  position: relative;
}

.appnox-videos:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: #1c006d;
  opacity: 0.851;
}

.videos-icon-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.videos-icon-text i {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  height: 140px;
  width: 140px;
  color: #fff;
  font-size: 30px;
  line-height: 140px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  animation: heartbeat 1s infinite alternate;
  margin-bottom: 40px;
}

.videos-icon-text h3 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #ffffff;
}

/* screen shots area css */
.appnox-screenshot-slider .screenshot-item {
  padding: 15px;
  margin: 15px;
  transition: all 0.3s;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.14);
  border: 1px solid #f1f1f1;
  border-radius: 5px;
}

.appnox-screenshot-slider.owl-theme .owl-dots .owl-dot span {
  background: #5e2ced none repeat scroll 0 0;
  border-radius: 50%;
  display: inline-block;
  height: 15px;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  width: 15px;
  transition: all 0.3s;
  margin: 0 4px;
}

.appnox-screenshot-slider.owl-theme .owl-dots .owl-dot.active span {
  background: #ff2782;
  border: medium none;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  width: 30px;
  height: 15px;
  border-radius: 7.5px;
}

.appnox-screenshot-slider.owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: 30px;
}

/* call to action area css */
.appnox-cta-area {
  background-position: center center;
  background-size: cover;
  background-attachment: inherit;
  position: relative;
  height: 100%;
  background-image: url(assets/img/cta/cta-bg.jpg);
  background-color: #1a2b3c;
  background-repeat: no-repeat;
}

.appnox-cta-area:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(
    130deg,
    #d754ad 0%,
    #f96785 67%,
    #fe7333 100%
  );
  background: linear-gradient(-40deg, #d754ad 0%, #f96785 67%, #fe7333 100%);
  opacity: 0.8;
}

.cta-content h2 {
  font-size: 40px;
  color: #fff;
  font-weight: 500;
  line-height: 55px;
  display: inline-block;
  text-transform: capitalize;
}

.cta-content p {
  color: #ffffff;
  text-transform: capitalize;
  margin: 25px 0 30px 0;
}

.cta-btn {
  margin: 13px 0;
}

/* faq area css */

.faq-shape {
  position: absolute;
  right: -35px;
  top: 3px;
  z-index: -1;
}

.appnox-accordion-wrapper p {
  margin: 0;
  font-size: 18px;
  color: #878991;
}

.appnox-accordion-wrapper .card {
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.14);
  border: 0;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.appnox-accordion-wrapper .btn.btn-link {
  display: block;
  text-align: left;
  padding: 30px 35px 0;
  font-size: 24px;
  border: none;
  font-family: "Avenir", sans-serif;
  font-weight: 700;
  background: #fff;
  text-transform: capitalize;
}

.appnox-accordion-wrapper .btn.btn-link.collapsed {
  display: block;
  text-align: left;
  padding: 30px 35px;
  font-size: 24px;
  border: none;
  font-family: "Avenir", sans-serif;
  font-weight: 700;
  background: #fff;
}

.appnox-accordion-wrapper .btn.collapsed {
  background: #fff;
  border-radius: 15px;
}

.appnox-accordion-wrapper .card-header:first-child {
  border-radius: 15px;
}

.appnox-accordion-wrapper .card-header {
  padding: 0;
  border-bottom: 1px solid #fff;
}

.appnox-accordion-wrapper .card-body {
  padding: 20px 35px 25px 35px;
}

.appnox-accordion-wrapper .accordion > .card:first-of-type {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}

.appnox-accordion-wrapper .accordion > .card {
  border-radius: 10px !important;
  -webkit-border-radius: 10px !important;
  -moz-border-radius: 10px !important;
  -ms-border-radius: 10px !important;
  -o-border-radius: 10px !important;
}

.appnox-accordion-wrapper h2 a.btn {
  color: #fab939;
  position: relative;
}

.appnox-accordion-wrapper h2 a.btn:hover {
  text-decoration: none;
}

.appnox-accordion-wrapper h2 a.btn.collapsed {
  color: #353858;
  text-transform: capitalize;
}

.appnox-accordion-wrapper h2 a.btn::after {
  content: "\f106";
  position: absolute;
  right: 25px;
  top: 35px;
  height: 25px;
  width: 25px;
  color: #fab939;
  text-align: center;
  line-height: 25px;
  border-radius: 30px;
  font-family: fontawesome;
}

.appnox-accordion-wrapper h2 a.btn.collapsed::after {
  content: "\f107";
  position: absolute;
  right: 25px;
  top: 35px;
  height: 25px;
  width: 25px;
  color: #353858;
  text-align: center;
  line-height: 25px;
  border-radius: 30px;
  font-family: fontawesome;
}

.faq-thumb img {
  margin-left: -45px;
}

.faq-bottom-area h2 {
  font-weight: 600;
  font-size: 30px;
  color: #30323d;
  line-height: 40px;
}

/* testimonial area css */

.appnox-testimonial-area {
  background-position: center center;
  background-size: cover;
  background-attachment: inherit;
  position: relative;
  /*background-image: url(assets/img/testimonial/testimonial-bg.png);*/
}

.testimonial-wraper {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 16px 16px 28px 0 rgba(0, 0, 0, 0.14);
  -webkit-box-shadow: 16px 16px 28px 0 rgba(0, 0, 0, 0.14);
}

.single-testimonial {
  padding: 40px 60px;
}

.single-testimonial img {
  width: 100px !important;
  height: 100px;
  display: inline-block;
  margin: 0 auto;
  border-radius: 50%;
  /*border: 5px solid #ff2782;*/
}

.single-testimonial p {
  margin: 30px 0;
}

.single-testimonial h4 {
  text-transform: capitalize;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.testimonial-wraper .owl-nav div {
  left: -130px;
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
  transition: all 0.3s ease 0s;
  text-align: center;
  line-height: 95px;
  font-size: 30px !important;
  background: #ffeeb8 !important;
  border-radius: 50% !important;
  color: #fff !important;
  width: 100px;
  height: 100px;
}

.testimonial-wraper .owl-nav div.owl-next {
  left: auto;
  right: -130px;
}

.testimonial-wraper .owl-nav div:hover {
  background: #ffab00;
}

/* footer area css */

.appnox-footer-area {
  background-position: center center;
  background-size: cover;
  background-attachment: inherit;
  /*background-image: url(assets/img/footer/foot-bg.png);*/
  background-color: #1c1c1e;
}

/* wedget 1 css */

.footer-widget {
  margin-bottom: 30px;
}

.widget-1 p {
  color: #fff;
  font-size: 15px;
}

ul.footer-social {
  padding-top: 30px;
  margin-top: 25px;
  border-top: 1px solid #ffffff;
}

ul.footer-social li {
  display: inline-block;
  margin-right: 25px;
}

ul.footer-social li a {
  color: #fff;
  font-size: 16px;
}

ul.footer-social li a i {
}

.footer-logo {
  margin-bottom: 28px;
}

/* wedget 2 css */
.footer-widget.widget-2 {
  margin-left: 60px;
}

.footer-widget > h3 {
  font-weight: 500;
  color: #fff;
  margin-bottom: 35px;
  text-transform: capitalize;
  font-size: 28px;
}

.footer-popu-link {
}

.footer-popu-link li {
  display: block;
  margin-bottom: 15px;
}

.footer-popu-link li:hover a {
  color: #fab939;
  margin-left: 4px;
  font-family: "Avenir", sans-serif;
}

.footer-popu-link li:last-child {
  margin-bottom: 0;
}

.footer-popu-link li a {
  font-family: "Avenir", sans-serif;
  color: #fff;
  text-transform: capitalize;
  font-weight: 600;
  font-size: 15px;
}

.footer-popu-link li a i {
}

/* wedget 3 css */
.footer-newsletter-form-area input.form-control {
  border-radius: 50px;
  box-shadow: none;
  color: #353858;
  height: 50px;
  margin-bottom: 20px;
  background: #ffffff;
  padding: 15px;
  border: 1px solid #ffffff;
}

/* footer copyright css */
.sign_footer-leagal {
  color: #515154;
  font-size: 14px;
  background-color: #f5f5f7;
  border-top: 1px rgba(0, 0, 0, 0.16) solid;
}

.sign_footer-leagal span a {
  color: #515154;
}

.sign_footer-leagal span a:hover {
  text-decoration: underline;
}

.footer-copyright p {
  color: #fff;
  font-size: 16px;
}

.footer-copyright {
  border-top: 1px solid #ffffff;
  margin-top: 100px;
}

.footer-copyright p a {
  color: #fff;
  font-weight: 700;
}

/* breadcrumb area css */

.appnox-breadcrumb-area {
  background-position: center center;
  background-size: cover;
  position: relative;
  background-image: url(assets/img/breadcrumb/breadcrumb.png);
  padding: 135px 0 250px 0;
}

.appnox-breadcrumb-area h2 {
  color: #fff;
  font-size: 50px;
  font-weight: 500;
  margin-bottom: 15px;
  text-transform: capitalize;
}

.appnox-breadcrumb-area .breadcrumb {
  background: inherit;
  padding: 0;
  margin: 0;
}

.breadcrumb .breadcrumb-item {
  font-family: "Avenir", sans-serif;
  font-size: 24px;
}

.appnox-breadcrumb-area .breadcrumb .breadcrumb-item,
.appnox-breadcrumb-area .breadcrumb-item.active a,
.appnox-breadcrumb-area .breadcrumb .breadcrumb-item.active {
  color: #fff;
  text-transform: capitalize;
}

.appnox-breadcrumb-area .breadcrumb .breadcrumb-item a {
  color: #ffffff;
  text-transform: capitalize;
}

.appnox-breadcrumb-area .breadcrumb-item + .breadcrumb-item::before {
  color: #fff;
}

/* contact area css */
.contact-info-area {
  margin: 100px 0;
}

.contact-info-box {
  display: flex;
  margin-bottom: 40px;
}

.contact-info-box:last-child {
  margin-bottom: 0;
}

.contact-info-icon {
  background: #ffffff;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.14);
  margin-right: 20px;
}

.contact-info-icon img {
  padding: 25px 0;
}

ul.contact-info {
  padding: 10px 0;
}

ul.contact-info li,
ul.contact-info li a {
  font-size: 20px;
  line-height: 30px;
  color: #656970;
  font-weight: 500;
  margin-bottom: 0px;
  font-family: "Avenir", sans-serif;
}

#appnox-map {
  width: 100%;
  height: 400px;
  border-radius: 30px;
}

/* contact form area css */
.appnox-contact-form-area {
  padding: 0;
  margin: 0;
  background: #ffffff;
  /* box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.14); */
  border-radius: 10px;
}

.appnox-contact-form input.form-control {
  box-shadow: none;
  color: #777777;
  height: 50px;
  margin-bottom: 30px;
  background: #ffffff;
  border: 1px solid #e7eaf0;
  border-radius: 8px;
  padding: 5px 20px;
  /* transition: all 0.3s; */
}

/* .appnox-contact-form button.btn {
  margin-top: 17px;
} */

.appnox-contact-form textarea.form-control:focus,
.appnox-contact-form input.form-control:focus,
.appnox-contact-form select.form-control:focus {
  box-shadow: 0px 10px 14px 0px rgba(12, 0, 46, 0.06);
  outline: none;
  border: 1px solid #399aff;
}

.appnox-contact-form textarea.form-control {
  height: 133px;
  box-shadow: none;
  color: #777777;
  margin-bottom: 30px;
  background: #ffffff;
  border: 1px solid #e7eaf0;
  border-radius: 25px;
  padding: 15px 20px;
  transition: all 0.3s;
}

p.form-message {
  font-size: 12px;
  color: red;
}

p.form-message-3rd {
  font-size: 16px;
  background: #6194EF;
  color: white;
  width: 160px;
  margin: auto;
}

.appnox-contact-form-area hr {
  border: 0px !important;
  position: relative;
  height: auto;
  text-align: center;
}

.appnox-contact-form-area hr:before {
  background: #eaeaea;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  top: 50%;
  width: 100%;
}

.appnox-contact-form-area hr:after {
  background-color: #fff;
  color: #595959;
  content: attr(data-content);
  display: inline-block;
  font-size: 14px;
  font-weight: 300;
  line-height: 21px;
  padding: 0 0.5em;
  position: relative;
}

.appnox-contact-form select {
  box-shadow: none;
  color: #777777;
  height: 50px;
  margin-bottom: 30px;
  /* background: #ffffff; */
  border: 1px solid #e7eaf0;
  border-radius: 25px;
  padding: 5px 20px;
  transition: all 0.3s;
  background-position: center right 1.3rem;
}

.thanks-area {
  padding: 0px 15px;
  margin: 20px auto;
}

.check-form {
  padding: 0px 15px;
}

.promotion-code {
  box-shadow: none;
  display: flex;
  color: #777777;
  height: 50px;
  /* margin-bottom: 30px; */
  /* background: #ffffff; */
  border: 1px solid #e7eaf0;
  border-radius: 25px;
  padding: 5px 20px;
  transition: all 0.3s;
  background-position: center right 1.3rem;
  align-items: center;
  overflow: hidden;
}

.promotion-code input {
  border: none;
  flex: auto;
  /* width: 100%; */
}

.promotion-code-btn {
  cursor: pointer;
  padding: 5px 8px;
  background: #e3e3e3;
  border-radius: 8px;
  color: white;
  line-height: 1.5rem;
  white-space: nowrap;
}

.promotion-code-btn.active {
  background-color: #1a2b3c;
}

.promotion-code.error {
  box-shadow: 0px 10px 14px 0px rgba(12, 0, 46, 0.06);
  outline: none;
  border: 1px solid #ff2d55;
  color: #ff2d55;
}

.promotion-code.success {
  box-shadow: 0px 10px 14px 0px rgba(12, 0, 46, 0.06);
  outline: none;
  border: 1px solid #44d7b6;
  color: #44d7b6;
}

/* account */
.account-board {
  box-shadow: 15px 16px 28px 0px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  border-radius: 18px;
  background-color: rgba(255, 255, 255, 0.85);
  margin-bottom: 30px;
}

.board-header {
  padding: 35px 25px 15px 25px;
  background: -webkit-linear-gradient(
    130deg,
    #d754ad 0%,
    #f96785 67%,
    #fe7333 100%
  );
  background: linear-gradient(-40deg, #d754ad 0%, #f96785 67%, #fe7333 100%);
}

.board-content {
  padding: 15px 35px 35px 35px;
}

.board-content h3 {
  margin-bottom: 10px;
}

.board-content h4 {
  font-size: 20px;
  margin-bottom: 15px;
}

.account-img .avatar {
  width: 100px;
  height: 100px;
  border-radius: 100px;
}

/* legal area css */
.legal-area {
}

.legal-content p {
  color: #000000;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.legal-content dt {
  font-weight: bolder;
  font-size: 20px;
  margin-bottom: 1rem;
}

.legal-content dd {
  margin-left: 1.5rem;
  display: list-item;
}

/* error area css */

.error-content {
  margin-top: 100px;
}

.error-content h2 {
  color: #1a2b3c;
  font-family: "Avenir", sans-serif;
  font-size: 60px;
  font-weight: 700;
  text-transform: capitalize;
}

.error-content p {
  margin: 55px 0 33px;
  font-size: 23px;
  line-height: 36px;
}

.signup li {
  font-size: 16px;
  line-height: 2rem;
}

.signup li i {
  color: #44d7b6;
  padding-right: 5px;
}

.card-header h2 > a.btn {
  white-space: normal;
}

.circle {
  border-radius: 12pt;
  height: 24pt;
  width: 24pt;
  color: #fff;
  display: inline-block;
  /* font-size: 14pt; */
  line-height: 24pt;
}

.blue-circle {
  margin: 0 5px;
  background-color: rgb(97, 148, 239);
}

.gray-circle {
  margin: 0 5px;
  background-color: rgb(196, 196, 196);
}

.line {
  width: calc(20% - 48pt);
  height: 13pt;
  display: inline-block;
  padding: 0;
  margin: 0;
  margin-left: 3pt;
}

.blue-line {
  border-bottom: solid 2pt rgb(97, 148, 239);
}

.gray-line {
  border-bottom: solid 2pt rgb(204, 204, 204);
}

.arrow {
  display: inline-block;
  padding: 0;
  margin: -6pt;
  font-size: 14pt;
  line-height: 24pt;
  margin-right: 3pt;
}

.blue-arrow {
  color: rgb(97, 148, 239);
}

.gray-arrow {
  color: rgb(204, 204, 204);
}

.platform-control {
  display: flex;
  flex-direction: column;
}

.signup-block-mb {
  display: block;
}

.signup-block-pc {
  display: none;
}

.thumbnail {
  position: relative;
}

.caption {
  position: absolute;
  top: 13%;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.signup-title {
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 20px;
}

.signup-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.signup-content p {
  font-size: 14px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  letter-spacing: 1px;
}

.step-block {
  margin-top: 0px;
}

.banner {
  background-image: url('/assets/img/banner/register_50_coin.png');
  background-repeat: no-repeat;
  background-size: contain;
  height: 110px;
}