/*------------------------------------------------------ Frontend ------------------------------------------------------*/
/*fonts*/
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* global */
@media (min-width: 1200px) {
  .container{
    max-width: 1440px !important; 
  }
}



.open-sans-startap {
  font-family: "Gilroy","Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

a:hover {
  color: #2F8880;
}

.accordion-button:not(.collapsed) {
  color: #2F8880;
}

/* custom dropzone  */

.file-attachment-input {
	position: relative;
	display: block;
	background-color: #f8fafd;
	border: 0.125rem dashed #585c59;
	text-align: center;
	overflow: hidden;
	cursor: pointer;
	border-radius: 0.3125rem;
	padding: 2rem 0rem;
	margin-bottom: 0;
}

.file-attachment-input:hover {
	background-color: #e7eaf3;
}

.file-attachment-input-label {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	min-width: 100%;
	min-height: 100%;
	cursor: inherit;
	opacity: 0;
}

/*Sizings*/

.paymentImages{
	width:5rem;
}

.max-w-st-5{
	max-width:5rem;
}

.max-w-st-10{
	max-width:10rem;
}

.max-w-st-15{
	max-width:15rem;
}

.max-w-st-25{
	max-width: 25rem;
}

.max-w-st-35{
	max-width: 35rem;
}

.min-h-st-4{
	min-height:4rem;
}

.min-h-st-5{
	min-height:5rem;
}

.min-h-st-10{
	min-height:10.5rem;
}

.min-h-st-11{
	min-height:11.5rem;
}

.min-h-st-13{
	min-height:13.5rem;
}

.min-h-st-14{
	min-height:14rem;
}

.min-h-st-16{
  min-height:16rem;
}

.min-h-st-20{
	min-height:20rem;
}

.max-h-st-8{
  max-height: 8rem;
}

.mt-lg-n10 {
    margin-top: -7.5rem;
}
@media (min-width: 1200px) {
  .mb-lg-n12 {
    margin-top: -12rem;
}
}


.w-2r{
  width: 2rem;
}

.w-3r{
  width: 3rem;
}
.w-8r{
  width: 8rem;
}

.w-15r{
  width: 15rem;
}

.w-5 {
  width:5%!important
}

.w-10 {
  width:10%!important
}

.w-15 {
  width:15%!important
}

.w-85{
  width: 85%;
}

@media (min-width: 992px) { 
  .min-h-st-lg-16{
    min-height:16rem;
  }
  .min-h-st-lg-20{
    min-height:20rem;
  }
 }


/*Color*/

.color-web-primary{
  color: #18589A;
}

.color-st-secondary{
	color:#061A22;
}

.color-st-highlight{
	color:#D7DD00;
}

.form-check-input.is-invalid, .was-validated .form-check-input:invalid {
  background: #ffeded;
}

.form-check-input:checked {
  background-color: #2F8880;
}

.form-check-input {
  width: 2em;
  height: 2em;
}

/*Background Colors*/
.bg-light {
  --bs-bg-opacity: 1;
  background-color: #eff2ff !important;
}

.bg-st-primary {
  /* --bs-bg-opacity: 1; */
  background-color: #16424E;
}

.bg-st-secondary {
  /* --bs-bg-opacity: 1; */
  background-color: #061A22;
}

.bg-st-terciary {
  --bs-bg-opacity: 1;
  background-color: #226397;
}

.bg-st-gradient {
  background-image: linear-gradient(180deg,rgba(6, 26, 34, 0.1),rgba(6, 26, 34, 0.66)) !important;
}

.bg-st-highlight{
	background-color:#D7DD00;
}

.gradient-y-overlay-st-secondary-one::before {
  background-image: linear-gradient(to bottom,rgba(6, 26, 34,.12),rgba(6, 26, 34,.88));
}

.gradient-y-overlay-st-white-one::before {
	background-image: linear-gradient(to bottom,rgba(255, 255, 255,.12),rgba(255, 255, 255,.95));
}

.bg-st-lightgray{
  background-color: #f7f7f7;
}

.bg-st-lightblue{
  background-color:#E4ECF7;
}


/*Buttons*/
.btn-soft-primary {
  color: #2D8299;
}

.btn-soft-primary:focus, .btn-soft-primary:hover {
  color: #fff;
  background-color: #16424E;
}

.btn-soft-primary.disabled, .btn-soft-primary:disabled {
  color: #16424E;
  background-color: #16424E36;
}

.btn-ghost-primary {
  color: #127970;
}

.btn-ghost-primary:focus, .btn-ghost-primary:hover {
  color: #127970;
}

.btn-st-secondary{
	background-color:#061A22 !important;
	color:#D7DD00;
}

.navbar.navbar-scrolled.navbar-dark {
  background-color: #061A22;
}

.devices-rotate-15 {
  transform: rotate(15deg);
}

.swiper-pagination-bullet-active {
  color: #061A22 !important;
  background: #16424E !important;
  border-color: #16424E !important;
}

.swiper-pagination-bullet-active::before, .swiper-pagination-bullet-active:hover::before {
  background-color: #061A22 !important;
}

.swiper-pagination-bullet {
  width: 1.85rem !important;
  height: 1.85rem !important;
}

.gradient-x-overlay-lg-dark-video::before {
	background-image: linear-gradient(to right,rgba(6, 26, 34, 0.905) 0,rgba(6, 26, 34, 0.985) 100%);
}

.form-control-lg {
  font-size: 1.24rem;
}

.form-select-lg {
  font-size: 1.23rem;
}

.w-fit{
  width: fit-content;
}

.w-80 {
  width: 80% !important;
}

.w-90 {
  width: 90% !important;
}

.w-95 {
  width: 95% !important;
}

.min-vh-cc-35 {
  min-height: 35vh;
}

.min-vh-cc-55 {
  min-height: 55vh;
}

.min-vh-cc-65 {
  min-height: 65vh;
}

.min-vh-cc-75 {
  min-height: 75vh;
}

.min-vh-cc-85 {
  min-height: 85vh;
}

.min-vh-cc-90 {
  min-height: 90vh;
}

.min-vh-cc-100 {
  min-height: 100vh;
}

.avatar-4xl {
	width: 12.3333333333rem!important;
/*	height:auto;*/
}

.avatar-showcase {
	width: 19rem !important;
	height:auto;
	
}

.start-30{
	left:30%;
}

.filepond--credits{
  display: none;
}

/* On offs */

#tabs .nav-link {
  color: black;
  border-bottom: 1px solid black;
  padding: .5rem 1rem
}

#tabs .nav-link.active {
  color: #18589A;
  border-bottom: 3px solid #18589A;
  background-color: transparent;
  box-shadow: none;
}

.navbar-brand-logo {
  width: 100%;
  min-width: 7.5rem;
  max-width: 10rem !important;
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(9%);
	}
	100% {
		transform: translatey(0px);
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

.floatIcon1{
  animation: float 7s ease-in-out infinite;
}
.floatIcon2{
  animation: float 6s ease-in-out infinite;
}
.floatIcon3{
  animation: float 5s ease-in-out infinite;
}
.floatIcon4{
  animation: float 4s ease-in-out infinite;
}
.floatIcon5{
  animation: float 3s ease-in-out infinite;
}
.pulseIcon1{
  animation: pulse 3s ease-in-out infinite;
}

.handWithCard{
  width: 130%;
  top: 5%;
  left: -40%;
}


@media (min-width: 992px) { 
  .handWithCard{
    width: 60%;
    left: -15%;
    top: 15%;
  }
}

@media (min-width: 1440px) { 
  .handWithCard{
    width: 50%;
    left: -9%;
    top: 8%;
  }
}

@media (min-width: 1920px) { 
  .handWithCard{
    width: 40%;
    left: 0%;
    top: 0%;
  }
}