html {
  scroll-behavior: smooth;
}
body{
	font-family: 'Raleway', sans-serif;
    letter-spacing: .01em;
    text-transform: none;
    line-height: 1.6em;
	color: #01161d;
	font-weight: 300;
}
@media(max-width: 550px){
	body{
		font-size:13px
	}
}

.form-control{
	color: #707070;
}
textarea{
	resize: none;
}

strong {
	font-weight: bold;
}
select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}
.selector-for-some-widget {
  box-sizing: content-box;
} 

.select_field select,
.select_field select:focus{
    background-image: url(../image/dropdown_arrow_white.png);
    background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px;
}
.small_font{
	font-size: 0.8rem;
}
.h5-5{
	font-size: 14px;
}
.text-primary{
	color: #01151C!important;
}
.text-pirmary{
	color: #234a4a;
}
.text-secondary{
	color: #01181e;
}

.bg-pirmary{
	background: #f6f8f9;
}
.bg-secondary{
	background: #214a49!important;
}
.bg-white{
	background: #ffffff;
}

.text-gray{
	color: #ababab;
}

.button-primary, .button-secondary{
	border-radius: 50px;
	padding: 12px 35px;
	font-size: 12.8px;
	width:fit-content;
	font-weight: bold;
}
.button-primary{
	background: #234a4a;
	color: #f9fbfb;
}
.button-secondary, .button-secondary:hover{
	background: #9dd0d3;
	color: #295051;	
	border: none;
	font-weight: bold;
}
i{
	font-size: 6.5em;
    color: rgba(0,0,0,.15);
}

.vishide{
	display: none;
}
.logo{
	width: 250px;
}
@media(max-width: 400px){
	.logo{
		width: 200px;
	}
}


/*review*/
.controls-top .btn-floating[data-slide="prev"]{
	position: absolute;
    top: 90px;
    left: -30px;
}

.controls-top .btn-floating[data-slide="next"]{
	position: absolute;
    right: -30px;
    top: 90px;
}
/***** list *****/
ul{
	margin-left: 30px;
}
ul.disc li{
	list-style: disc;
}
/***** slider *****/

.slider {
  width: 100%;
  overflow: hidden;
}

.slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

}
.slides::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.slides::-webkit-scrollbar-thumb {
  background-color: #273F4F;
  border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
  background: transparent;
}
.slides > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  max-width: 500px;
  width: 100%;
  height: 300px;
  margin-right: 50px;
  border-radius: 10px;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Don't need button navigation */
@supports (scroll-snap-type) {
  .slider > a {
    display: none;
  }
}

.container_box .title{
	padding-bottom: 10px;
	padding-top: 20px;
}
.container_box .subtitle{
	padding-top: 70px;
	letter-spacing: .05em;
}


@media (min-width: 550px) {
	.mobile-view{
		display: none;
	}
	.desktop-view{
		display: block;
	}
}	
@media (max-width: 550px) {
	.mobile-view{
		display: block;
	}
	.desktop-view{
		display: none;
	}
	.container_box .subtitle{
		padding-top: 1rem;
	}
}	
@media (max-width: 550px) {
	.display-3{
		font-size: 2.5rem;
	}
	.container-max{
		padding: 1rem!important;
	}
}
@media (max-width: 450px) {
	.display-4{
		font-size: 2.5rem;
	}
}
@media (max-width: 281px) {
	.display-3{
		font-size: 2rem;
	}
}
.container-max{
	max-width: 1550px;
	margin: 0 auto;
}
/****************************
left right
****************************/
.left, .right{
	display: inline-block;
	width: 50%;
	vertical-align: bottom;
}
.left{
	text-align: left;
}
 .right{
	text-align: right;
}
@media(max-width:550px){
	.left, .right{
		width: 100%;
		text-align: center;
	}
}
/****************************
hr
****************************/
.hr{
	width: 75%;
	border-bottom: 1px solid #707070;
	margin: 0 auto;
	padding-top: 70px;
}
@media(max-width: 550px){
	.hr{
		padding-top: 0px;
	}	
}
/****************************
box_container
****************************/
.box_container{
	background: white;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 4.17px 0px;
    margin: 20px 2%;
    padding: 60px 30px;
}
.box_container.ex-padding{
    padding: 120px 30px;
}
.box_container:hover{
	transform: scale(1.05);
	transition: transform 0.3s;
}
.box_container:hover i{
	color: #234a4a;
	transition: color 0.3s;
}
/****************************
powerpay_home
****************************/
#powerpay_home .btn-light:hover{
    color: white;
    background-color: #234a4a;
    border-color: #dae0e5;
}
#powerpay_home .row{
	min-height: 884px;
	height: 85vh;
}
#powerpay_home .mobile-view .mobile_hide{
	float: right;
    z-index: 10;
    position: relative;
    margin-top: 7rem;
}
#powerpay_home .desktop-view.text-right{
	background: url(/image/hero_img.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom left 50%;
}

#powerpay_home hr{
	width: 20%;
    float: left;
}
#powerpay_home  button{
	border: none;
}
#powerpay_home .content div{
		position: absolute;
    	bottom: 100px;
	}
@media (max-width: 767px){
	#powerpay_home .row{
		min-height: 630px;
	}
	#powerpay_home .desktop-view{
		display: none;
	}
	#powerpay_home .mobile-view{
		display: block;
		background: url(/image/hero_img_mobile.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: bottom left 50%;
		transition: all 0.3s;
	}
	#powerpay_home hr{
		width: 50%;
		float: left;
	}
	#powerpay_home p{
		width: 90%!important;
	}
	.layer {
		background-color: rgb(0 0 0 / 28%);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#powerpay_home .logo{
		z-index: 10;
		position: relative;
	}
	#powerpay_home .content div{
    	bottom: 50px;
	}
}
@media (max-height: 650px) and (max-width: 767px){
	#powerpay_home .content div{
		position: absolute;
    	bottom: 30px;

	}
}
@media (max-width: 480px){
	#powerpay_home .mobile-view .mobile_hide{
		display: none;
	}
	#powerpay_home .content div{
    	bottom: 50px;
	}
	#powerpay_home .display-4{
		font-size: 2rem;
	}
	#powerpay_home .row{
		min-height: 500px;
	}
}
@media (max-width: 350px) {
	#powerpay_home .pb-5, #powerpay_home .py-5{
		padding: 1rem!important;
	}
}
/****************************
introducing_powerpay
****************************/
#introducing_powerpay .col-sm{
	border-radius: 20px;
	padding: 0;
	background: white;
	box-shadow: #c3c3c3 2px 2px 5px 0px;
	margin: 20px;
}
#introducing_powerpay .col-sm:hover{
	transform: scale(1.05);
	transition: transform 0.3s;
}
#introducing_powerpay .col-sm img{
	border-radius: 20px 20px 0 0;
}
@media(max-width: 750px){
	#introducing_powerpay .col-sm{
		width: 100%!important;
		margin: 20px 10px;
	}
	#introducing_powerpay .content{
		padding-left: 1rem!important;
		padding-right: 1rem!important;
	}
}
/****************************
power_to_the_people
****************************/
#power_to_the_people{
	padding: 0px 0 0px 0;
}
#power_to_the_people .row{
	margin: 0;
}
/* #power_to_the_people .col-sm .title{
	margin: 0 auto;
	width: 80%;
	padding-bottom: 20px;
	padding-top: 30px;
}
#power_to_the_people .box_container{
	width: 29%;
}
@media(max-width: 1200px){
	#power_to_the_people{
		padding-bottom: 70px;
	}
}
@media(max-width: 950px){
	#power_to_the_people .box_container{
		width: 46%;
	}
}
@media(max-width: 650px){
	#power_to_the_people .box_container{
		width: 100%;
	}
	#power_to_the_people{
		padding-bottom: 1rem;
	}
} */
#power_to_the_people .background{
	background-image: url(../image/feature_benefits_img.jpg);
	background-repeat: no-repeat;
    background-size: cover;
	background-position: bottom right 30%;
}
.feature_benefits_pt{
	padding-bottom: 55px;
	max-width: 550px;
}
.feature_benefits_pt:first-of-type{
	padding-top: 50px;
}
.feature_benefits_pt:last-of-type{
	padding-bottom: 20%;
}
.feature_benefits_icon,
.feature_benefits_content{
	display: inline-block;
	vertical-align: top;
}
.feature_benefits_icon{
	width: 15%;
	text-align: center;
}
.feature_benefits_content{
	width: 80%;
	text-align: left;
}
.feature_benefits_title{
	font-size: 20px;
	font-weight: bold;
	padding: 0 0 10px 0;
}
.feature_benefits_subtitle{
	font-size: 14px;
}
@media(min-width: 1571px){
	.feature_benefits_pt:last-of-type {
		padding-bottom: 200px;
	}
}
@media(min-width: 767px){
	#power_to_the_people .title{
		padding-bottom: 30px;
	}
}
@media(max-width: 767px){
	.feature_benefits_pt:last-of-type {
		padding-bottom: 100px;
	}
}
@media(max-width: 550px){
	.feature_benefits_pt:last-of-type {
		padding-bottom: 50px;
	}
}
@media(max-width: 340px){
	.feature_benefits_icon img{
		width: 30px;
	}
}
/****************************
powerpay_solution
****************************/
#powerpay_solution .row{
	border-bottom: 1px solid #707070;
	position: relative;
	width: 100%;
	min-height: 850px;
	margin: 0 auto;
	/* min-height: 850px;
	background-image: url(../image/HoldingPhone.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain; */
}
#powerpay_solution .col-md-5 {
	margin-left: 12%;
}
#powerpay_solution .hand_img{
    position: absolute;
    right: 10%;
    bottom: 0;
}

@media(max-width: 1026px){
	#powerpay_solution .hand_img img{
		max-width: 130%;
	}
	#powerpay_solution .col-md-5 {
		margin-left: 0%;
	}
}
@media(max-width: 767px){
	#powerpay_solution .hand_img{
		position: relative;
		right: 0;
	}
	#powerpay_solution .hand_img img{
		max-width: 100%;
	}
}
/****************************
payments
****************************/
#payments .box_container{
	width: 29%;
}
#payments .box_container img{
	width: auto;
	max-height: 90px;
}
#payments .paypal > table {
	margin: 0 auto;
}
@media(max-width: 750px){
	#payments .box_container{
		width: 100%;
	}
}
@media(max-width: 850px){
	#payments .w-50{
		width: 90%!important;
	}
}
/****************************
footer
****************************/
.footer{
	border-top: 1px solid white;
	width: 90%;
	margin: 0 auto;
	margin-top: 150px;
	padding-top: 20px;
}
.footer .right .btn{
	float: right;
}
.footer .right p{
	display: inline;
	vertical-align: bottom;
}
.footer .right div{
	display: inline;
	padding-right: 30px;
}
.soclia_media_icon{
	display: inline;
	vertical-align: baseline;
	margin: 0 5px;
}
@media(max-width:850px){
	.footer .mobile-view{
		display: block;
	}
}

@media(max-width:550px){
	.footer{
		margin-top: 40px;
	}
	.footer .right div{
		display: inline-block;
		width: 100%;
		margin: 10px 0;
		padding: 0;
	}
}

.email_link {
	color: white;
}
@media(min-width:550px){
	.email_link {
		margin-right: 50px;
	}
}

/****************************
contact_form_container
****************************/
#contact_form_container{
	height: 100vh;
    position: fixed;
    background: #234a4a;
    top: 0;
	margin: 0 auto;
	overflow: auto;
	z-index: 20;
}
#contact_form_container .row .left, #contact_form_container .row .right {
    display: inline-block;
    width: 50%;
    vertical-align: bottom;
}
#contact_form_container .footer{
	margin-top: 0;
}
.contact_frm{
	max-width: 700px;
	margin: 0 auto;
}

#contact_form_container > div {
	margin-bottom: 0!important;
}
#contact_form_container > div > div:last-of-type {
	color: white;
}
#contact_form_container > div > div:last-of-type > div {
	text-align: left;
	display: inline-block;
	width: 45%;
}

#contact_form_container > div > div:last-of-type > div:last-of-type {
	text-align: right;
}
@media(max-width: 550px){
	.contact_frm{
		padding: 0;
	}
	#contact_form_container > div > div:last-of-type > div,
	#contact_form_container > div > div:last-of-type > div:last-of-type {
		text-align: center;
		width: 100%;
		padding-bottom: 10px;
	}
}
/****************************
form-control
****************************/
.form-control, .form-control:focus{
	background: #254a4a;
	border: 1px solid #ffffff;
    border-radius: 0;
	color: #ffffff;
	padding: 15px;
	height: auto;
}
input, textarea{
    caret-color: white;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: 0;
}
input:-webkit-autofill
{
 -webkit-text-fill-color: white !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active
{
 -webkit-box-shadow: 0 0 0 30px #254a4a inset !important;
}
.form-control::placeholder{
	color: #ffffff;
}
textarea.form-control::placeholder {
	opacity: 0.5;
}
/* - Chrome ≤56,
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile 12-12.1
   - Android Browser 2.1-4.4.4
   - Samsung Internet ≤6.2
   - QQ Browser */
.form-control::-webkit-input-placeholder {
    color: #ffffff;
}

/* Firefox 4-18 */
.form-control:-moz-placeholder {
    color: #ffffff;
}

/* Firefox 19-50 */
.form-control::-moz-placeholder {
    color: #ffffff;
}

/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
.form-control:-ms-input-placeholder {
    color: #ccc !important;
    font-weight: 400 !important;
}

/* Edge (also supports ::-webkit-input-placeholder) */
.form-control::-ms-input-placeholder {
    color: #ffffff;
}

/* CSS Pseudo-Elements Level 4 Editor's Draft
   - Browsers not mentioned in vendor prefixes
   - Browser of newer versions than mentioned in vendor prefixes */
.form-control::placeholder {
    color: #ffffff;
}
.field-error{
	background: #ff1741;
    border-radius: 5px;
    color: white;
    text-align: left;
    padding: 0 10px;
    margin-top: 5px;
}

.page_logo{
	width: 230px;
}

/****************************
DDR Form
****************************/
body.ddr{
	background-color: #f6f6f6;
}
.ddr .container {
	border-radius: 1rem;
	background: white;
	box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1);
	padding: 1.25rem;
	margin: 0 auto;
	width: 30rem;
	margin-top: 20rem;
	text-align: center;
}
.ddr input {
	box-shadow: inset 0 1px 2px rgba(10, 10, 10, .1);
	max-width: 100%;
	width: 100%;
	background-color: #fff;
	border: #dbdbdb 1px solid;
	border-radius: 4px;
	color: #363636;
	padding: 10px;
}
.ddr input::-webkit-input-placeholder {
	color: #c2c2c2;
}
.ddr input[type="submit"] {
	background-color: #214a49;
	border-radius: 20px;
	color: white;
	border: none;
}
@media(max-width: 550px){
	.ddr .container {
		margin-top: 5rem;
	}
}
@media(max-height: 550px){
	.ddr .container {
		margin-top: 5rem;
	}
}