@charset "utf-8";
/* CSS Document */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");


body{
    background-color: var(--white);
    font-family: "Open Sans", Sans-serif;
}

p {	color:#5d6871;
}

a {
	color: #c23034;
	text-decoration: none;
}
.navbar-toggler {
	border: none;
}

.nav-link {
	font-size: 16px;
}

.footer-item a:active {
	font-weight: 100;
}

.nav-link:active {
	font-weight: 700;
}

a:hover{
	opacity: 80%;
	color: #c23034;
}
.hero {    
	background-image: url("assets/brand/image-background.png"); 
	background-repeat: no-repeat; 
	background-size: cover; 
	padding-top: 70px;
/*	background-position: 25% 58%;*/
}

h2 {font-weight: 700;  color:#222222;}

.hero h1 {
 
    color: #000;
   backdrop-filter: blur(3px);
    background: rgba(0,0,0,.4);
    border-radius: 5px;
    font-family: "Open Sans",sans-serif;
    font-style: normal;
    font-weight: 400;
    padding: 10px;
}

.btn {
  max-width: 250px;
  font-weight: 500;
}

.btn-center {
	margin: auto;
}

.bg-dark {
	--bs-bg-opacity: 1;
    background-color: #000E25!important; /*Change background-color of menu*/
}

.navbar-toggler-icon {
	background-image: url("assets/brand/menu_black.svg"); 
}

.navbar-custom {padding-top:15px; padding-bottom:15px;     background-color: #fff;
     box-shadow: rgba(0, 0, 0, 0.48) 0px 2px 13px 0px;
    border-bottom: 1px solid #fff;
}


.navbar-nav {    
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: 1.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: #777;
    --bs-nav-link-hover-color: #555;
    --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
    display: flex;
     flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
	font-weight: 400;
	color: #ffffff;
}

.navbar-nav > li{
  padding-left:20px;
  padding-right:20px;
}




.btn-custom {background:#c23034; border-color:#c23034;} /*Change button color*/



.btn-custom {
    --bs-btn-color: #fff;
    --bs-btn-bg: #fff; /*Change menu link color*/
    --bs-btn-border-color: #fff; /*Change menu link color*/
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1b3563; /*Change menu link color*/
    --bs-btn-hover-border-color: #1b3563; /*Change menu link color*/
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #fff; /*Change menu link color*/
    --bs-btn-active-border-color: #fff; /*Change menu link color*/
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
   
}

.btn-custom:hover {
	background-color: #1b3563;
	color: #ffffff;
	opacity: 100%;
}



.footer {background-color:#F4F7FB;}

.bg-gradient{
    background: #152935!important;
}

.icon-link {    color: #152935!important;
}


.form-container { margin:auto;
    max-width: 960px;
}

.cvv-info:hover + .popover {
	display: block; 
		
}

.popover {
	display: none;
}

.special-color { color: #90ce40; }

.apple-btn {
	background-color: transparent;
	border: 3px solid #c23034;
	color: #c23034;
}


.apple-btn:hover {
	background-color: transparent; 
	border: 3px solid #1b3563;
	color: #1b3563;
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 320px) {
	.contact-placeholder-img {
		height: 55%;
		margin-top: 80px;
	}
	
	.icon-container {
		padding: 0px 60px;
	}
	
	
	.lead {
		margin-right: 25px;
		font-size: 16px;
		line-height: 1.4;
	}
	
	.footer {
		padding: 0px 20px;
	}
	
	.nav-item {
		border-bottom: 1px solid #777;
	}
	
	.footer-item {
		border: none;
	}
	
	.language-picker__button {
		margin-left: 10px;
		margin-top: 10px;
		margin-bottom: 5px;
		color: #000; /*Change text color*/
		border: 1px solid #555;
	}
	
	.language-picker__button:hover {
		color: #000;
		border: 1px solid #777;
		
	}
	
	.fa-info-circle {
		translate: -20px;
	}
	
	.my-card {
		margin-bottom: 50px;
		box-shadow: 0 0 20px 1px #fff;
		border-radius: 10px;
		width: 70%;
		text-align: center;
	}
	

	
	.register-info {
		margin: 0px 55px;
	}
	
	.featurette-heading {
		text-align: center;
	}
	
	.popover__wrapper-register {
		position: absolute;
		left: 80px;
		bottom: 17px;
	}
	
	.home-lead {
		text-align: center;
		margin-right: 0px;
		padding: 0px 9px;
	}
	
	.home-btn {
		margin: auto;
		margin-top: 0px;
		margin-bottom: 50px;
	}
	
	.home-text {
		padding: 0px 25px;
	}
	
	.img-padding {
		padding-right: 20px;
	}
	
	.app-lead {
		margin-top: 20px;
	}
	
	.app-btn {
		display: block;
		margin: auto;
	}
	
	.download-container {
		margin-top: 50px;
	}
	
	.popover__wrapper {
	  margin-top: 1.5rem;
	  display: inline-block;
		position: absolute;
		left: 80px;
		bottom: 17px;
	}
	.popover__content, .popover__content-register {
	  opacity: 0;
	  visibility: hidden;
	  position: absolute;
	  left: -150px;
		top: -90px;
	  transform: translate(0, 10px);
	  background-color: #fff;
		border-radius: 0.5em;
	  padding: 1.5rem;
	  box-shadow: -3px 2px 10px 0 rgba(0, 0, 0, 0.3);
	  width: auto;
	}
	.popover__content:before, .popover__content-register:before {
	  position: absolute;
	  z-index: -1;
	  content: "";
	  translate: -40px 30px;
	  border-style: solid;
	  border-width: 0 10px 10px 10px;
	  border-color: transparent transparent #fff transparent;
	  transition-duration: 0.3s;
	  transition-property: transform;
		transform: rotate(-90deg);
		
	}
	.popover__wrapper .popover__content, .popover__wrapper-register .popover__content-register {
	  z-index: 10;
	  opacity: 1;
	  visibility: visible;
	  transform: translate(190px, 40px);
	  transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
	}
	
	
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
.language-picker__button {
		margin-left: 7px;
		color: #000; /*Change text color*/
		border: 1px solid #555;
	}
		.popover__wrapper {
	  margin-top: 1.5rem;
	  display: inline-block;
		position: absolute;
		left: 80px;
		bottom: 17px;
	}
	
	.icon-container {
		padding: 0px 60px;
	}
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.contact-placeholder-img {
		height: 40%;
		margin-top: 0px;

	}
	
	.icon-container {
		padding: 0px 20px;
	}
	
	.popover__wrapper-register {
		position: absolute;
		left: 40px;
		bottom: 17px;
	}
	
	.lead {
		margin-right: 20px;
		font-size: 16px;
		line-height: 1.4;
	}
	
	.nav-item {
		border-bottom: 1px solid #777;
	}
	
	.footer-item {
		border: none;
	}
	
	.hero h1 {
		margin: 0px 60px;
	}
	
	.fa-info-circle {
		translate: 20px;
	}
	
	.featurette-heading {
		font-size: 30px;
		text-align: left;
		
	}
	
	.language-picker__button {
		margin-left: 7px;
		color: #000; /*Change text color*/
		border: 1px solid #555;
		margin-top: 20px;
}
	
	.home-lead {
		text-align: left;
		padding: 0px;
	}
	
	.home-btn {
		margin: 0px;
		max-width: 200px;
	}
	
	.set-img {
		max-width: 370px;
		margin-left: 0px;
		translate: -50px;
	}
	
	.icon-text {
		padding: 0px 90px;
	}
	
	.app-btn {
		margin: 0px;
	}
	
	.my-card {
		width: 50%;
	}
	
		.popover__wrapper {
	  margin-top: 1.5rem;
	  display: inline-block;
		position: absolute;
		left: 80px;
		bottom: 17px;
	}
	
	.popover__content {
	  opacity: 0;
	  visibility: hidden;
	  position: absolute;
	  left: -150px;
	  transform: translate(0, 10px);
	  background-color: #fff;
		border-radius: 0.5em;
	  padding: 1.5rem;
	  box-shadow: 5px 2px 15px 0px rgba(0, 0, 0, 0.4);
	  width: auto;
	}
	.popover__content:before {
	  position: absolute;
	  z-index: -1;
	  content: "";
	bottom: 122px;
		translate: 25px -40px;
	  border-style: solid;
	  border-width: 0 10px 10px 10px;
	  border-color: transparent transparent #fff transparent;
	  transition-duration: 0.3s;
	  transition-property: transform;
		transform: rotate(0deg);
		
	}
	.popover__wrapper .popover__content{
	  z-index: 10;
	  opacity: 1;
	  visibility: visible;
	  transform: translate(120px, 130px);
	  transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
	}
	
	.popover__content-register {
		opacity: 0;
	  visibility: hidden;
	  position: absolute;
	  left: -150px;
		top: -90px;
	  transform: translate(0, 10px);
	  background-color: #fff;
		border-radius: 0.5em;
	  padding: 1.5rem;
	  box-shadow: -3px 2px 10px 0 rgba(0, 0, 0, 0.3);
	  width: auto;
	}
	
	.popover__content-register:before {
		 position: absolute;
	  z-index: -1;
	  content: "";
	  translate: -40px 30px;
	  border-style: solid;
	  border-width: 0 10px 10px 10px;
	  border-color: transparent transparent #fff transparent;
	  transition-duration: 0.3s;
	  transition-property: transform;
		transform: rotate(-90deg);
	}
	
	.popover__wrapper-register .popover__content-register {
		  z-index: 10;
	  opacity: 1;
	  visibility: visible;
	  transform: translate(230px, 40px);
	  transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
	}


}


/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.lead {
		margin-right: 50px;
		font-size: 18px;
		line-height: 1.4;
	}
	
	.p-md-5 {
		padding: 1.5rem !important;
	}
	
	.language-picker__button {
		margin-left: 7px;
		color: #000; /*Change text color*/
		border: 1px solid #555;
		margin-top: 0px;
}
	.hero h1 {
		margin: 0px;
	}
	.fa-info-circle {
		translate: 0px;
	}
	
	.popover__wrapper-register {
		position: absolute;
		left: 60px;
		bottom: 17px;
	}
	
	.nav-item {
		border: none;
	}
	
	.icon-container {
		padding: 0px;
	}
	
	.icon-text {
		padding: 0px 15px;
	}
	
	.feature {
		padding: 0px 15px;
	}
	
	.set-img {
		max-width: 130%;
	}
	
	.featurette-heading {
		margin-top: 20px;
	}
	
	.home-lead {
		translate: 0px -25px;
	}
	
	.register-info {
		margin: 0px 50px;
	}
	
	.home-btn {
		translate: 0px -45px;
	}
	
	.app-lead {
		translate: 0px 30px;
	}
	
	.download-container {
		margin-top: 80px;
	}
	
	.my-card {
		width: 60%;
	}
	
	.popover__wrapper {
	  position: absolute;
		left: 60px;
		bottom: 17px;
	  margin-top: 1.5rem;
	  display: inline-block;
	}
	.popover__content {
	  opacity: 0;
	  visibility: hidden;
	  position: absolute;
	  left: -150px;
	  transform: translate(0, 10px);
	  background-color: #fff;
		border-radius: 0.5em;
	  padding: 1.5rem;
	  box-shadow: 5px 3px 15px 0px rgba(0, 0, 0, 0.4);
	  width: auto;
	}
	.popover__content:before {
	  position: absolute;
	  z-index: -1;
	  content: "";
	  translate: 85px -40px;
	  border-style: solid;
	  border-width: 0 10px 10px 10px;
	  border-color: transparent transparent #fff transparent;
	  transition-duration: 0.3s;
	  transition-property: transform;

		
	}
	.popover__wrapper .popover__content {
	  z-index: 10;
	  opacity: 1;
	  visibility: visible;
	  transform: translate(40px, 130px);
	  transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
	}
	
	.popover__content-register {
	  opacity: 0;
	  visibility: hidden;
	  position: absolute;
	  left: -150px;
	  transform: translate(0, 10px);
	  background-color: #fff;
		border-radius: 0.5em;
	  padding: 1.5rem;
	  box-shadow: 5px 2px 15px 0px rgba(0, 0, 0, 0.4);
	  width: auto;
	}
	
	.popover__wrapper-register .popover__content-register {
		  z-index: 10;
	  opacity: 1;
	  visibility: visible;
	  transform: translate(205px, 40px);
	  transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
	}
	
	.popover__content-register {
		box-shadow: -3px 2px 10px 0 rgba(0, 0, 0, 0.3);
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1170px) {
	.contact-placeholder-img {
		height: 65%;
		margin-top: 0px;

	}
	
	.lead {
		margin-right: 120px;
		font-size: 19px;
		line-height: 1.4;
	}

	
	.nav-item {
		border: none;
	}
	
	.hero h1 {
		margin: 0px;
	}
	
	.fa-info-circle {
		translate: -5px;
	}
	
	.set-img {
		max-width: 630px;
		margin-left: 0px;
		translate: -50px;
	}
	
	.app-img {
		translate: -90px;
	}
	
	.featurette-heading {
		font-size: 50px;
		text-align: left;
		
	}
	
	.register-info {
		margin: 0px ;
	}
	
	.home-lead {
		text-align: left;
	}
	
	.home-btn {
		margin: 0px;
		padding: 0px;
		translate: 0px -70px;
	}
	
	.icon-text {
		padding: 0px 15px;
	}
	
	.app-lead {
		translate: 0px -30px;
		margin-right: 0px;
	}
	
	.app-container {
		display: grid; 
		grid-template-rows: 150px 100px;
		margin-top: 100px;
	}
	
	.android-btn {
		margin-right: 50px;
	}
	
	.app-btn {
		display: inline;
	}
	
	.download-container {
		margin-top: 0px;
		translate: 0px -30px;
	}
	
	.feature {
		padding: 0px 36px 0 0;
	}
	
	.popover__wrapper {
	  margin-top: 1.5rem;
	  display: inline-block;
		position: absolute;
		left: 80px;
		bottom: 17px;
	}
	.popover__content {
	  opacity: 0;
	  visibility: hidden;
	  position: absolute;
	  left: -150px;
		top: -90px;
	  transform: translate(0, 10px);
	  background-color: #fff;
		border-radius: 0.5em;
	  padding: 1.5rem;
	  box-shadow: -2px 5px 10px 0 rgba(0, 0, 0, 0.3);
	  width: auto;
	}
	.popover__content:before {
	  position: absolute;
	  z-index: -1;
	  content: "";
	  translate: -40px 30px;
	  border-style: solid;
	  border-width: 0 10px 10px 10px;
	  border-color: transparent transparent #fff transparent;
	  transition-duration: 0.3s;
	  transition-property: transform;
		transform: rotate(-90deg);
		
	}
	.popover__wrapper .popover__content {
	  z-index: 10;
	  opacity: 1;
	  visibility: visible;
	  transform: translate(200px, 40px);
	  transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
	}


}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
	and (min-device-width : 320px) {
	.navbar-toggler-icon {
		width: 40px; 
		height: 40px;
	}
	
	
		
}

/* Tablets (portrait and landscape) ----------- */
@media only screen 
	and (min-device-width : 768px) 
and (max-device-width : 992px) {
	.navbar-toggler-icon {
		width: 50px;
		height: 50px;
	}
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1400px) {
	.col-xxl-8 {
		width: 65%;
	}
}