/*******************************************************
    Template Name    : Ripple - Bitcoin & Cryptocurrency Landing Page
    Author           : Cute Themes
    Version          : 1.0
    Created          : 2020
    File Description : Main css file of the template
*******************************************************/

/**************************************
    -- Css Table of Content
    01.Generale Style
    02.Preloader Style
    03.Navber Area Style
    04.Home Section Style
    05.Work Process Section Style
    06.About Section Style
    07.Services Section Style
    08.Overview Section Style
    09.Road Map Section Style
    10.Team Section Style
    11.Testimonials Section Style
    12.Partner Logo Section Style
    13.Faq Section Style
    14.App Download Section Style
    15.Footer Section Style
 *************************************/

/**************************************
 * 01. Generale Style
 *************************************/

body {
	background: #ffffff;
	color: #333;
	font-family: 'Baloo Chettan 2', cursive;
	font-size: 15px;
	font-weight: normal;
	line-height: 26px;
	overflow-x: hidden;
	margin: 0 auto;
	padding: 0;
	letter-spacing: 0.5px;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: 'Baloo Chettan 2', cursive;
	font-weight: normal;
	color: #333;
	line-height: 1.5;
}

h1 {
	font-size: 45px;
	font-weight: 700;
	line-height: 55px;
	margin: 0 0 15px;
	color: #253050;
}

h2 {
	font-size: 32px;
	color: #253050;
	margin: 0 0 15px;
	font-weight: 700;
	line-height: 1.3;
}


h3,h4 {
	margin: 0 0 15px;
	font-weight: 600;
	line-height: 1.5;
	color: #253050;
}

h3 {
	font-size: 18px;
}

h4 {
	font-size: 16px;
}

h5,h6 {
	font-size: 14px;
	margin: 0 0 10px;
}
a {
	color: #30a0d5;
	text-decoration: none !important;
	-moz-transition: all 0.5s ease-in-out 0s;
	-ms-transition: all 0.5s ease-in-out 0s;
	-o-transition: all 0.5s ease-in-out 0s;
	-webkit-transition: all 0.5s ease-in-out 0s;
	transition: all 0.5s ease-in-out 0s;
}
img {
	max-width: 100%;
}
a:hover {
	color: #30a0d5;
	-moz-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	-o-transition: all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}
a:hover,
a:focus {
	color: #30a0d5;
	text-decoration: none;
}
p {
	padding: 0;
	margin: 0;
	font-size: 15px;
	color: #333;
	line-height: 26px;
	font-family: 'Baloo Chettan 2', cursive;
}
.z-index {
	z-index: 9;
}
.position-relative {
	position: relative!important;
}
.form-control:focus {
	box-shadow: none;
	outline: 0 none;
	border-bottom: 1px solid #30a0d5;
}
.btn:focus {
	outline: none !important;
	box-shadow: none;
}
button:focus {
	outline: 0 none;
	box-shadow: none;
}
.button:focus {
	outline: none;
	box-shadow: none;
}

.button {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 8px 30px;
    text-align: center;
    font-size: 15px;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    font-weight: 600;
    border: 2px solid #30a0d5;
    background: #30a0d5;
    border-radius: 30px;
    cursor: pointer;
    color: #fff;
    overflow: hidden;
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
}

.button:hover {
	color: #30a0d5;
}
.button:before, .button:after {
    content: '';
    width: 0;
    height: 100%;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: width 0.4s;
    transition: width 0.4s;
    z-index: -1;
    opacity: .4;
}
.button:after {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    background: #fff;
    opacity: 1;
}
.button:hover:before, .button:hover:after {
    width: 100%;
}
.button:hover:after {
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
}

.bg-gray {
	background-color: #f8f8f9;
}
.bg-none {
	background: none !important;
}
.color-text {
	color: #30a0d5;
}
dl,
ol,
ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
.mr-15 {
	margin-right: 15px;
}
.d-table {
	width: 100%;
	height: 100%;
}

.d-table-cell {
	vertical-align: middle;
}
.bg-fixed {
	background-attachment: fixed;
}
.bg-img {
	background-size: cover;
	background-repeat: no-repeat;
}

.section-padding {
	padding: 100px 0;
}
.section-title {
	text-align: center;
	margin-bottom: 75px;
}
.section-title span {
	font-size: 16px;
    font-weight: 600;
    color: #30a0d5;
}
.section-title h2 {
	font-weight: 700;
	text-transform: capitalize;
	font-size: 38px;
	line-height: 1.3;
	color: #333;
}
.display-table {
	width: 100%;
	height: 100%;
	display: table;
}
.table-cell {
	display: table-cell;
	vertical-align: middle;
}
.mr-0 {
	margin: 0;
}
.mr-top-50 {
	margin-top: 50px;
}
.back-to-top {
	position: fixed;
	cursor: pointer;
	top: 0;
	right: 15px;
	color: #ffffff;
	background: #30a0d5;
	z-index: 4;
	width: 40px;
	text-align: center;
	height: 42px;
	line-height: 42px;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: .9s;
	transition: .9s;
}
.back-to-top:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: #30a0d5;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}
.back-to-top:hover:before,
.back-to-top:focus:before {
	opacity: 1;
	visibility: visible;
}
.back-to-top:hover,
.back-to-top:focus {
	color: #ffffff;
}
.back-to-top.active {
	top: 97%;
	-webkit-transform: translateY(-98%);
	transform: translateY(-98%);
	opacity: 1;
	visibility: visible;
}
.back-to-top i:last-child {
	opacity: 0;
	visibility: hidden;
	top: 60%;
}
.back-to-top:hover i:first-child,
.back-to-top:focus i:first-child {
	opacity: 0;
	top: 0;
	visibility: hidden;
}
.back-to-top:hover i:last-child,
.back-to-top:focus i:last-child {
	opacity: 1;
	visibility: visible;
	top: 50%;
}
.back-to-top i {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0;
	right: 0;
	margin: 0 auto;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	font-size: 20px;
}
.v-middle {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 0;
	-webkit-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}
.valign {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
/* [ Start Overlay ] */

[data-overlay-dark],
[data-overlay-light] {
	position: relative;
}
[data-overlay-dark] .container,
[data-overlay-light] .container {
	position: relative;
	z-index: 2;
}
[data-overlay-dark]:before,
[data-overlay-light]:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}
[data-overlay-dark]:before {
	background: #000;
}
[data-overlay-light]:before {
	background: #fff;
}
[data-overlay-dark] h1,
[data-overlay-dark] h2,
[data-overlay-dark] h3,
[data-overlay-dark] h4,
[data-overlay-dark] h5,
[data-overlay-dark] h6,
[data-overlay-dark] span,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,
.bg-dark span,
.bg-color h1,
.bg-color h2,
.bg-color h3,
.bg-color h4,
.bg-color h5,
.bg-color h6,
.bg-color span {
	color: #fff;
}
[data-overlay-dark] p,
.bg-dark p,
.bg-color p {
	color: #dad6d6;
}
[data-overlay-dark="0"]:before,
[data-overlay-light="0"]:before {
	opacity: 0;
}
[data-overlay-dark="1"]:before,
[data-overlay-light="1"]:before {
	opacity: .1;
}
[data-overlay-dark="2"]:before,
[data-overlay-light="2"]:before {
	opacity: .2;
}
[data-overlay-dark="3"]:before,
[data-overlay-light="3"]:before {
	opacity: .3;
}
[data-overlay-dark="4"]:before,
[data-overlay-light="4"]:before {
	opacity: .4;
}
[data-overlay-dark="5"]:before,
[data-overlay-light="5"]:before {
	opacity: .5;
}
[data-overlay-dark="6"]:before,
[data-overlay-light="6"]:before {
	opacity: .6;
}
[data-overlay-dark="7"]:before,
[data-overlay-light="7"]:before {
	opacity: .7;
}
[data-overlay-dark="8"]:before,
[data-overlay-light="8"]:before {
	opacity: .8;
}
[data-overlay-dark="9"]:before,
[data-overlay-light="9"]:before,
[data-overlay-color="9"]:before {
	opacity: .9;
}
[data-overlay-dark="10"]:before,
[data-overlay-light="10"]:before {
	opacity: 1;
}
/* [ End Overlay ] */

/* owl theme */

.owl-theme .owl-nav.disabled+.owl-dots {
	margin-top: 20px;
}
.owl-theme .owl-dots .owl-dot span {
	width: 10px;
	height: 7px;
	margin: 5px 5px;
	background-color: rgba(0, 0, 0, 0.1);
	display: block;
	-webkit-backface-visibility: visible;
	transition: opacity .2s ease;
	border-radius: 5px;
	transition: .3s;
	border: 2px solid transparent;
}
.owl-theme .owl-dots .owl-dot.active span {
	background-color: #30a0d5 !important;
	width: 15px;
	height: 7px;
	transition: .3s;
	-webkit-box-shadow: 0 1px 5px #30a0d5;
	box-shadow: 0 1px 5px #30a0d5;
}
.owl-theme .owl-dots .owl-dot:hover span {
	background-color: transparent;
	border: 2px solid #30a0d5;
	transition: .3s;
}
/**************************************
 ** - 02 - Preloader Area CSS
 **************************************/
.preloader {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: fixed;
	z-index: 99999999;
	height: 100%;
	width: 100%;
	background-color: #fff;
}
.preloader .preloader-wapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 100vh;
}
.spinner-loader {
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px;
}
.spinner-loader div {
	position: absolute;
	border: 4px solid #30a0d5;
	opacity: 1;
	border-radius: 50%;
	-webkit-animation: spinner-loader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
	animation: spinner-loader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.spinner-loader div:nth-child(2) {
	-webkit-animation-delay: -0.5s;
	animation-delay: -0.5s;
}
@-webkit-keyframes spinner-loader {
	0% {
		top: 35px;
		left: 35px;
		width: 0;
		height: 0;
		opacity: 1;
	}
	100% {
		top: -1px;
		left: -1px;
		width: 70px;
		height: 70px;
		opacity: 0;
	}
}
@keyframes spinner-loader {
	0% {
		top: 35px;
		left: 35px;
		width: 0;
		height: 0;
		opacity: 1;
	}
	100% {
		top: -1px;
		left: -1px;
		width: 70px;
		height: 70px;
		opacity: 0;
	}
}

/**************************************
 * 03.Navber Area Style
 *************************************/
.header-navber-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 999;
  background: transparent;
}

.header-navber-area .nav-top-bar {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 15px;
  padding-bottom: 15px;
}

.header-navber-area .nav-top-bar .call-to-action p {
  margin: 0 13px 0 0;
  display: inline-block;
  color: #333;
  font-size: 15px;
}

.header-navber-area .nav-top-bar .call-to-action p a {
  color: #333;
}

.header-navber-area .nav-top-bar .call-to-action p a:hover, .header-navber-area .nav-top-bar .call-to-action p a:focus {
  color: #30a0d5;
}

.header-navber-area .nav-top-bar .top-login-area {
  float: right;
  padding: 0;
  margin: 0 0 0 10px;
  list-style-type: none;
}

.header-navber-area .nav-top-bar .top-login-area p {
  display: inline-block;
}

.header-navber-area .nav-top-bar .top-login-area p a {
  color: #333;
  font-size: 15px;
  margin-left: 15px;
}

.header-navber-area .nav-top-bar .top-social li a:hover, .header-navber-area .nav-top-bar .top-social li a:focus {
  color: #30a0d5;
}


.header-navber-area .nav-top-bar.template-color-bg {
  background: #30a0d5;
  border-bottom: none;
}

.header-navber-area .nav-top-bar.template-color-bg .call-to-action p a {
  color: #333;
}

.header-navber-area .nav-top-bar.template-color-bg .top-social li a {
  color: #333;
}

.navbar-b {
	transition: all .5s ease-in-out;
	background-color: transparent;
	padding-top: 12px;
	padding-bottom: 12px;
}
.navbar-b.navbar-reduce {
	position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
	box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.06);
}
.navbar-b.navbar-trans .nav-item,
.navbar-b.navbar-reduce .nav-item {
	position: relative;
	padding-right: 0px;
	padding-left: 10px;
}
.navbar-b.navbar-trans .nav-link,
.navbar-b.navbar-reduce .nav-link {
	color: #333;
	text-transform: capitalize;
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 0.5px;
	padding-right: 0;
    padding-left: 15px;
	font-family: 'Baloo Chettan 2', cursive;
}
.navbar-b.navbar-trans .nav-link:hover,
.navbar-b.navbar-reduce .nav-link:hover {
	color: #1B1B1B;
}
.navbar-b.navbar-trans .nav-link:hover {
	color: #333;
}
.navbar-b.navbar-trans .show > .nav-link,
.navbar-b.navbar-trans .active > .nav-link,
.navbar-b.navbar-trans .nav-link.show,
.navbar-b.navbar-trans .nav-link.active {
	color: #333;
}
.navbar-b.navbar-reduce {
	transition: all .5s ease-in-out;
	background-color: #fff;
	padding-top: 15px;
	padding-bottom: 15px;
	-webkit-animation: 500ms ease-in-out 0s normal fadeInDown;
	animation: 500ms ease-in-out 0s normal fadeInDown;
	-webkit-transition: 0.6s;
	transition: 0.6s;
}
.navbar-b.navbar-reduce .nav-link {
	color: #505050;
}
.navbar-b.navbar-reduce .nav-link:hover {
	color: #505050;
}
.navbar-b.navbar-reduce .show > .nav-link,
.navbar-b.navbar-reduce .active > .nav-link,
.navbar-b.navbar-reduce .nav-link.show,
.navbar-b.navbar-reduce .nav-link.active {
	color: #505050;
}
.navbar-b.navbar-reduce .navbar-brand {
	color: #333;
}
.navbar-b.navbar-reduce .navbar-toggler span {
	background-color: #1B1B1B;
}
.navbar-b .navbar-brand {
	color: #333;
	font-size: 1.6rem;
	font-weight: 700;
}
.navbar-b .navbar-nav .dropdown-item.show .dropdown-menu,
.navbar-b .dropdown.show .dropdown-menu,
.navbar-b .dropdown-btn.show .dropdown-menu {
	-webkit-transform: translate3d(0px, 0px, 0px);
	transform: translate3d(0px, 0px, 0px);
	visibility: visible !important;
}
.navbar-b .dropdown-menu {
	margin: 1.12rem 0 0;
	border-radius: 0;
}
.navbar-b .dropdown-menu .dropdown-item {
	padding: .7rem 1.7rem;
	transition: all 500ms ease;
}
.navbar-b .dropdown-menu .dropdown-item:hover {
	background-color: #30a0d5;
	color: #fff;
	transition: all 500ms ease;
}
.navbar-b .dropdown-menu .dropdown-item.active {
	background-color: #30a0d5;
}
.navbar-toggler {
	position: relative;
}
.navbar-toggler:focus,
.navbar-toggler:active {
	outline: 0;
}
.navbar-toggler span {
	display: block;
	background-color: #333;
	height: 3px;
	width: 25px;
	margin-top: 4px;
	margin-bottom: 4px;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	left: 0;
	opacity: 1;
}
.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
	transition: -webkit-transform .35s ease-in-out;
	transition: transform .35s ease-in-out;
	transition: transform .35s ease-in-out, -webkit-transform .35s ease-in-out;
}
.navbar-toggler:not(.collapsed) span:nth-child(1) {
	position: absolute;
	left: 12px;
	top: 10px;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	opacity: 0.9;
}
.navbar-toggler:not(.collapsed) span:nth-child(2) {
	height: 12px;
	visibility: hidden;
	background-color: transparent;
}
.navbar-toggler:not(.collapsed) span:nth-child(3) {
	position: absolute;
	left: 12px;
	top: 10px;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
	opacity: 0.9;
}
.navbar-b .black-logo {
	display: none;
}
.navbar-b.navbar-reduce .navbar-brand .white-logo {
	display: none;
}
.navbar-b.navbar-reduce .navbar-brand .black-logo {
	display: block;
}
/**************************************
 * 04.Home Section Style
 *************************************/

.home-area {
	position: relative;
	z-index: 1;
	height: 100vh;
	padding-top: 150px;
	padding-bottom: 40px;
}

.hero-equal-height {
	position: relative;
	min-height: 100vh;
	-js-display: flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}
.home-area .home-content {
	margin-bottom: 0px;
}
.home-area .home-content h1 {
	font-size: 45px;
	color: #333;
	margin-bottom: 10px;
	font-weight: 700;
	line-height: 1.3;
}
.home-area .home-content p {
	font-size: 15px;
	color: #333;
}
.home-button-box {
    margin-top: 25px;
}
/**************************************
 * 05.Work Process Section Style
 *************************************/

.work-process-content {
    position: relative;
	z-index: 1;
    background: rgba(255, 255, 255, 0.3);
    padding: 30px 15px;
    border-radius: 3px;
    -webkit-box-shadow: 0 3px 10px rgba(218,225,232,.7);
    box-shadow: 0 3px 10px rgba(218,225,232,.7);
    transition: .3s;
}
.work-process-content img {
	margin: auto;
	margin-bottom: 15px;
	width: 70px;
}

/**************************************
 * 06.About Section Style
 *************************************/
.about-area {
	position: relative;
}
.about-wrap img {
	width: 100%;
}

.about-details p {
    margin-bottom: 15px;
}

.about-list {
	margin-bottom: 20px;
}

.about-list li {
	position: relative;
	line-height: 40px;
}

.about-list li i {
    color: #30a0d5;
    margin-right: 5px;
}
.about-details .button {
    margin: 0;
}

/**************************************
 * 07.Services Section Style
 *************************************/
.services-area {
	position: relative;
}
.services-area .section-title {
    margin-bottom: 35px;
}

.services-content {
    background: rgba(255, 255, 255, 0.5);
    padding: 30px 30px;
    border-radius: 3px;
	margin-top: 30px;
    -webkit-box-shadow: 0 3px 10px rgba(218,225,232,.7);
    box-shadow: 0 3px 10px rgba(218,225,232,.7);
    transition: .3s;
}

.services-content img {
	margin-bottom: 15px;
	width: 70px;
}


/**************************************
 * 08.Overview Section Style
 *************************************/
.overview-area {
	position: relative;
}
.overview-images img {
	width: 100%;
}

.overview-details p {
    margin-bottom: 20px;
}

/**************************************
 * 09.Road Map Section Style
 *************************************/

.roadmap-area {
    position: relative;
}

.roadmap-area {
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.roadmap-area::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
.roadmap-area.loaded {
  /* show the timeline after events position has been set (using JavaScript) */
  opacity: 1;
}
.roadmap-area .timeline {
  position: relative;
  height: 100px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.roadmap-area .events-wrapper {
  position: relative;
  height: 100%;
  margin: 0 40px;
  overflow: hidden;
}
.roadmap-area .events-wrapper::after, .roadmap-area .events-wrapper::before {
  /* these are used to create a shadow effect at the sides of the timeline */
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  height: 100%;
  width: 20px;
}
.roadmap-area .events-wrapper::before {
  left: 0;
  background-image: -webkit-gradient(linear, left top, right top, from(#f8f8f8), to(rgba(248, 248, 248, 0)));
  background-image: linear-gradient(to right, #f8f8f8, rgba(248, 248, 248, 0));
}
.roadmap-area .events-wrapper::after {
  right: 0;
  background-image: -webkit-gradient(linear, right top, left top, from(#f8f8f8), to(rgba(248, 248, 248, 0)));
  background-image: linear-gradient(to left, #f8f8f8, rgba(248, 248, 248, 0));
}
.roadmap-area .events {
  /* this is the grey line/timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 49px;
  height: 2px;
  /* width will be set using JavaScript */
  background: #dfdfdf;
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
}
.roadmap-area .filling-line {
  /* this is used to create the green line filling the timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #0099ff;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.roadmap-area .events a {
  position: absolute;
  bottom: 0;
  z-index: 2;
  text-align: center;
  font-size: 14px;
  padding-bottom: 15px;
  color: #383838;
  /* fix bug on Safari - text flickering while timeline translates */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.roadmap-area .events a::after {
  /* this is used to create the event spot */
  content: '';
  position: absolute;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -5px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  border: 2px solid #dfdfdf;
  background-color: #f8f8f8;
  -webkit-transition: background-color 0.3s, border-color 0.3s;
  transition: background-color 0.3s, border-color 0.3s;
}
.no-touch .roadmap-area .events a:hover::after {
  background-color:#0099ff;
  border-color: #0099ff;
}
.roadmap-area .events a.selected {
  pointer-events: none;
}
.roadmap-area .events a.selected::after {
  background-color: #0099ff;
  border-color: #0099ff;
}
.roadmap-area .events a.older-event::after {
  border-color: #0099ff;
}
@media only screen and (min-width: 1100px) {

  .roadmap-area::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
}

.cd-timeline-navigation a {
  /* these are the left/right arrows to navigate the timeline */
  position: absolute;
  z-index: 1;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 34px;
  width: 34px;
  border-radius: 50%;
  border: 2px solid #dfdfdf;
  /* replace text with an icon */
  overflow: hidden;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: border-color 0.3s;
  transition: border-color 0.3s;
}
.cd-timeline-navigation a::after {
  /* arrow icon */
  content: '';
  position: absolute;
  height: 15px;
  width: 15px;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url(../img/rodemap-icon.svg) no-repeat 0 0;
    background-size: 15px;
}
.cd-timeline-navigation a.prev {
  left: 0;
  -webkit-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}
.cd-timeline-navigation a.next {
  right: 0;
}
.no-touch .cd-timeline-navigation a:hover {
  border-color: #0099ff;
}
.cd-timeline-navigation a.inactive {
  cursor: not-allowed;
}
.cd-timeline-navigation a.inactive::after {
  background-position: 0 -16px;
}
.no-touch .cd-timeline-navigation a.inactive:hover {
  border-color: #dfdfdf;
}

.roadmap-area .events-content {
    position: relative;
    width: 75.555%;
    height: auto !important;
    margin-top: 30px;
    overflow: hidden;
    -webkit-transition: height 0.4s;
    transition: height 0.4s;
    margin-left: auto;
    margin-right: auto;
    background: rgba(255, 255, 255, 0.5);
    padding: 30px 30px;
    border-radius: 3px;
    -webkit-box-shadow: 0 3px 10px rgba(218,225,232,.7);
    box-shadow: 0 3px 10px rgba(218,225,232,.7);
}
.roadmap-area .events-content li {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  padding: 0 0;
  opacity: 0;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
.roadmap-area .events-content li.selected {
  /* visible event content */
  position: relative;
  z-index: 2;
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.roadmap-area .events-content li.enter-right, .roadmap-area .events-content li.leave-right {
  -webkit-animation-name: cd-enter-right;
  animation-name: cd-enter-right;
}
.roadmap-area .events-content li.enter-left, .roadmap-area .events-content li.leave-left {
  -webkit-animation-name: cd-enter-left;
  animation-name: cd-enter-left;
}
.roadmap-area .events-content li.leave-right, .roadmap-area .events-content li.leave-left {
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}
.roadmap-area .events-content li > * {
  max-width: 900px;
  margin: 0 auto;
}
.roadmap-area .events-content h2 {
  font-weight: bold;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.roadmap-area .events-content em {
    display: block;
    font-style: normal;
    margin: 10px auto;
    color: #30a0d5;
}
.roadmap-area .events-content em::before {
  content: '- ';
}
.roadmap-area .events-content p {
  font-size: 15px;
  color: #333;
}
.roadmap-area .events-content em, .roadmap-area .events-content p {
  line-height: 1.6;
}
@media only screen and (min-width: 768px) {
  .roadmap-area .events-content h2 {
    font-size: 20px;
  }
  .roadmap-area .events-content em {
    font-size: 14px;
  }
  .roadmap-area .events-content p {
    font-size: 15px;
  }
}

@-webkit-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@-webkit-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

/**************************************
 * 10.Team Section Style
 *************************************/
.team-area {
	background-color: #f7f8f7;
    background: rgb(255, 65, 180, 0.05);
}

.team-area .section-title {
	margin-bottom: 35px;
}
.single-team-box {
	margin-top: 30px;
	border-radius: 3px;
	background: #fff;
	overflow: hidden;
	-webkit-box-shadow: 0px 5px 30px 0px rgba(148, 146, 245, 0.15);
	box-shadow: 0px 5px 30px 0px rgba(148, 146, 245, 0.15);
	-webkit-transition: 0.5s;
	transition: 0.5s;
}
.team-image {
	position: relative;
	z-index: 1;
}
.single-team-box .team-image img {
	width: 100%;
	height: auto;
}
.team-info {
	padding: 20px 15px 25px;
	text-align: center;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}
.team-info h3 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 0;
}
.team-info span {
	color: #13c3c9;
	font-size: 14px;
	font-weight: 500;
	display: block;
}

/**************************************
 * 11.Testimonial Section Style
 *************************************/
.testimonial-area {
	position: relative;
	z-index: 1;
}

.testimonial-item {
    padding: 30px 45px;
    text-align: center;
}

.testimonial-item .clients-thumb img {
    max-width: 100px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 10px solid #f2f2f2;
	margin: auto;
}

.testimonial-item .testi-content {
	margin-top: 20px;
}

.testimonial-item .testi-content p {
    margin-bottom: 10px;
}

.testimonial-item .testi-content h4 {
	font-size: 20px;
}

.testimonial-item .testi-content h4 span {
	display: block;
	font-size: 14px;
}

.testimonial-carousel .owl-nav {
	width: 100%;
	text-align: center;
	margin-top: 30px;
}

.testimonial-carousel .owl-nav div {
	display: inline-block;
	margin: 10px;
	background-color: #f2f2f2;
	padding: 8px 30px;
	border-radius: 3px;
}

.testimonial-carousel .owl-nav div:hover {
	color: #30a0d5;
}

/**************************************
 * 12.Partner Logo Section Style
 *************************************/
.partner-area {
}
.partner-item {
    padding: 20px 20px;
    background: #ffffff;
    border-radius: 5px;
    margin: 25px 15px;
    -webkit-box-shadow: 0 0.3em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02);
    box-shadow: 0 0.3em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02);
}
.partner-area .partner-carousel img {
	opacity: .8;
	max-width: 100%;
	width: inherit!important;
	margin: 0 auto;
}

.partner-area .partner-carousel img:hover {
	opacity: 1;
	cursor: pointer;
}
/**************************************
 * 13.Faq Section Styles
 **************************************/
.faq-area {
}
.faq-accordion .accordion {
  list-style-type: none;
  padding: 0;
  margin: 0;
  padding-left: 0;
  margin-bottom: 0;
  position: relative;
}

.faq-accordion .accordion .accordion-item {
	display: block;
    border-radius: 5px;
	margin-bottom: 20px;
    overflow: hidden;
	-webkit-box-shadow: 0 0.3em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02);
    box-shadow: 0 0.3em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02);
}

.faq-accordion .accordion .accordion-item:last-child {
  margin-bottom: 0;
}

.faq-accordion .accordion .accordion-item .accordion-title {
    padding: 20px;
    color: #333;
    position: relative;
    background: #ffffff;
    font-size: 18px;
    font-weight: 600;
    display: block;
    border: none;
}

.faq-accordion .accordion .accordion-item .accordion-title i {
  position: absolute;
  right: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #767c99;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  font-size: 15px;
}

.faq-accordion .accordion .accordion-item .accordion-title.active i::before {
  content: "\f0d8";
}

.faq-accordion .accordion .accordion-item .accordion-content {
  display: none;
  background-color: #ffffff;
  margin-bottom: 0;
  padding: 20px 15px;
  font-size: 15px;
  border-top: 1px solid #dadada;
}

.faq-accordion .accordion .accordion-item .accordion-content.show {
  display: block;
}
/**************************************
 * 11.App Downloade Section Style
 *************************************/
.download-area {
	position: relative;
	z-index: 1;
	background: rgb(255, 65, 180, 0.05);
}

.download-area .row {
	position: relative;
	z-index: 1;
}


.download-content {
}

.download-content span {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    color: #30a0d5;
}

.download-content h2 {
	margin-bottom: 15px;
}

.download-content .download-btn {
	margin-top: 20px;
}
.download-content .download-btn .app-link-btn-1 {
	display: inline-block;
	margin-right: 10px;
}

.download-content .download-btn a:hover {
	opacity: .8;
}

/**************************************
 * 15.Footer Section Style
 *************************************/
.footer-area {
	position: relative;
	z-index: 1;
}

.footer-content {
}

.footer-content.mid-content {
	padding-left: 130px;
}

.footer-content img {
	margin-bottom: 30px;
}

.footer-link li {
	line-height: 35px;
}

.footer-link li a {
	color: #555;
}

.footer-link li a:hover {
	color: #30a0d5;
	text-decoration: underline;
}

.footer-link li i {
	margin-right: 10px;
	color: #30a0d5;
}

.footer-social {
	margin-top: 20px;
}

.footer-social li {
	display: inline-block;
}

.footer-social li a {
	display: inline-block;
	background-color: #f2f2f2;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	color: #30a0d5;
	font-size: 14px;
	margin-right: 5px;
}

.footer-social li a:hover {
	background-color: #30a0d5;
	color: #fff;
}

/* Subscribe Section Style */

.subscribe-form-wrap {
	margin-top: 15px;
}
.subscribe-form {
	position: relative;
}

.subscribe-form .form-input {
	border: 1px solid #eaeaea;
    width: 100%;
    height: 50px;
    border-radius: 3px;
    padding: 5px 0 5px 30px;
    border-color: rgba(103,114,134,0.2);
    -webkit-box-shadow: 0 0;
    -moz-box-shadow: 0 0;
    box-shadow: 0 0;
    color: #0c2ba4;
}
.form-input:focus{
	outline: 0;
	-webkit-box-shadow:0 0;
	-moz-box-shadow:0 0;
	box-shadow:0 0;
}
.subscribe-form .fa-envelope {
    position: absolute;
    top: 50%;
    left: 12px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #666;
    font-size: 14px;
}
.subscribe-form .submit-btn {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 5px;
    color: #fff;
	background-color: #30a0d5;
    text-transform: capitalize;
    color: #fff;
    font-size: 15px;
    border-radius: 3px;
    line-height: 40px;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    letter-spacing: .5px;
    padding: 0 25px;
    box-shadow: none;
	border: 0;
}
.footer-bottom {
	background-color: #fff;
	display: block;
	color: #fff;
	text-align: center;
	padding: 30px 0;
	border-top: 1px solid #f1f1f1;
}

.footer-bottom p {
	font-size: 14px;
	color: #555;
	margin: 0;
}

/* Основные стили формы */
.contact-form {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Поля ввода */
.contact-form .form-group {
    margin-bottom: 15px;
}

.contact-form label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #333;
}

.contact-form .form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    transition: all 0.3s ease;
}

/* Фокус на полях */
.contact-form .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    outline: none;
}

/* Кнопка отправки */
.contact-form .btn {
    display: inline-block;
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.contact-form .btn:hover {
    background: #0056b3;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 600px) {
    .contact-form {
        padding: 15px;
    }
}


.pt-cus {
  padding-top: 110px;
  padding-bottom: 100px;
  padding-left: 50px;
  padding-right: 50px;

}


@media screen and (max-width: 776px) {
  .pt-cus {
      padding-top: 120px;
      padding-bottom: 50px;
      padding-left: 15px;
      padding-right: 15px;
  }
}
.pt-cus h1,
.pt-cus h2,
.pt-cus h3,
.pt-cus h4,
.pt-cus h5,
.pt-cus p,
.pt-cus li,
.pt-cus a,
.pt-cus strong,
.pt-cus span {
  color: rgb(0, 0, 0);
}

.pt-cus p>a {
  color: red;
}