body {
	background:#e7f3fa;
}

.navbar .gt_float_switcher {
    font-family: Arial;
    font-size: 16px;
    border-radius: 2px;
    color: #fff;
    display: inline-block;
    line-height: 18px;
    box-shadow: none;
    background: transparent;
    overflow: hidden;
    transition: all .5scubic-bezier(0.4, 0, 1, 1);
}


.navbar .gt_float_switcher .gt-selected {
    position: relative;
    z-index: 888;
    background: transparent!important;
    cursor: pointer;
    text-transform: uppercase;
    overflow: hidden;
}

.navbar .gt_float_switcher .gt-selected .gt-current-lang {
    padding: 6px 15px;
    color: #4f5f66;
    font-weight: bold;
}

.navbar .gt_float_switcher .gt_options {
	    position: absolute!important;
}

.navbar .gt_float_switcher .gt_options a {
    display: block!important;
    text-decoration: none;
    padding: 6px 15px;
    color: #fff!important;
    transition: color .4slinear;
    background:#020814;
}


.navbar .gt_float_switcher .gt_options a:hover {
    background: #1a5064;
    color: #fff;
}

.top-part {
	background:#020814 url(images/banner-bg.png) no-repeat -200px bottom;
	font-family: "Manrope", sans-serif;
	position:relative;
	padding-bottom:50px;
	
}

.form-control-plaintext {
    display: block;
    width: 100%;
    padding: .375rem 0;
    margin-bottom: 0;
    line-height: 1.5;
    color: white;
    background-color: transparent;
    border: solid transparent;
    border-width: var(--bs-border-width) 0;
}

.nav-link {
	color:white; 
	text-transform:uppercase;
	font-size:14px;
	font-weight:500;
	}


.btn-outline-white {
	border:2px solid white;
	border-radius:36px;
	color:white;
	text-transform:uppercase;
	font-size:14px;
	font-weight:500;
}
.btn-outline-white:hover {
	border: 2px solid #ffffff61;
    color: #ffffff87;
}

.btn-outline-primary {
	border:2px solid #01a7c4;
	border-radius:36px;
	color:white;
	text-transform:uppercase;
	font-size:14px;
	font-weight:500;
}


.btn-outline-primary:hover {
	background: #01a7c4;
	border:2px solid #01a7c4;
}

.block-text {
    color: white;
    padding: 147px 0px 127px;
}

.block-text-sub {
    color: white;
	padding: 80px 0px 57px;
}

.block-text h2 {
font-size: 50px;
    font-weight: 300;
    line-height: 65px;
}

.block-text h2 b {
	color:#0fd4f6;
	font-weight:300;
}

.nav-item {margin:0px 3px;}

.buttons .btn {
	font-size:18px;
	font-weight:500;
	text-transform:uppercase;
	border-radius:36px;
	padding:12px 25px;
	
}



.buttons {padding:4rem 0px;}

.btn-primary {
	background:#01a7c4;
	border:1px solid #01a7c4;
	padding: 10px 25px;
    border-radius: 36px;
}


.btn-primary:hover {
	background:#05bfdf;
	border:1px solid #05bfdf;
}


.banner-graphics img {max-width:100%;

}

.support-form img {max-width:100%; border-radius:16px;}

.block-title {
	background:#e3f8fa;
	padding:10px 15px;
	border-radius:6px;
	color:#26c6da;
	font-weight:600;
	margin-bottom:15px;
}


.integrations {
    text-align: center;
    padding: 3rem 0px;
    background: #e7f3fa;
}



.integrations  img {margin:0px 4px;}


.integrations h3 {margin-bottom:3rem;}

.about {padding:3rem 0px 3rem; background:white;}

.about-features {color:white;     padding-top: 80px;}

.about-features figure {
	text-align:center;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#32a3ee+0,35dbfb+100 */
	background: linear-gradient(to right, #32a3ee 0%,#35dbfb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */	
	border-radius:10px;
	padding:20px;
}

.about h4 {
	color:#878787;
	font-size:14px;
	text-transform:uppercase;
}

.address-block h4 {
	color:#94dde1;
}

.example {
	background: linear-gradient(to right, #32a3ee 0%, #35dbfb 100%);
    border-radius:0px 0px 6px 6px;
    padding: 15px;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
}

.about h3 {
	color:#0b0d0f;
	font-size:36px;
	font-weight:700;
}

.about-text p {
    color: #625d5d;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 0.3rem;
}

.about-text p span {
	color:#05abc8;
}

.about-text ul {margin:10px 0px; padding:0px; }

.about-text ul li {
	list-style:none;
	background: url(images/check.png) no-repeat left center;
	padding-left:40px;
	line-height:40px;
}

.roadmap-text ul li {
    list-style: none;
    background: url(images/check.png) no-repeat left 10px;
    padding-left: 26px;
    line-height: 24px;
    background-size: 18px auto;
    padding-top: 6px;
    padding-bottom: 6px;
}




.about-img {
	text-align:center;
	
}

.about-img .btn-primary {
    font-size: 24px;
    padding: 12px 35px;
    border-radius: 36px;
    margin-bottom: 30px;
}

.roadmap {
	padding:4rem 0px;
	background:#00629f url(images/bg-map.png) no-repeat left bottom;
	
}

.roadmap h2 {
    text-align: center;
    font-size: 42px;
    font-weight: 300;
    color: white;
}

.roadmap .card {
	text-align:center;
	background:transparent;
	border:0px;
}

.percent
{
	position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: inset 0 0 50px #02223e;
    background: #094c87;
    z-index: 1000;
    margin:0px auto;
}
.percent .num
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
}
.percent .num h2
{
    color: #fff;
    font-weight: 700;
    font-size: 42px;
    transition: 0.5s;
}
.roadmap .card:hover .percent .num h2
{
  color:#fff;
  font-size:60px;
}
.percent .num h2 span
{
  color:#fff;
  font-size:24px;
  transition:0.5s;
}
.roadmap .card:hover .percent .num h2 span
{
  color:#fff;
}
.roadmap .text
{
  position:relative;
  color:#777;
  margin-top:20px;
  font-weight:700;
  font-size:18px;
  letter-spacing:1px;
  text-transform:uppercase;
  transition:0.5s;
}
.roadmap .card:hover .text
{
  color:#fff;
}
.roadmap svg
{
  position:relative;
  width:150px;
  height:150px;
  z-index:1000;
}
.roadmap svg circle
{
  width:100%;
  height:100%;
  fill:none;
  stroke:#191919;
  stroke-width:10;
  stroke-linecap:round;
  transform:translate(5px,5px);
}
.roadmap svg circle:nth-child(2)
{
  stroke-dasharray:440;
  stroke-dashoffset:440;
}
.roadmap .card:nth-child(1) svg circle:nth-child(2)
{
  stroke-dashoffset:calc(440 - (440 * 90) / 100);
  stroke:#36d9b5;
}

.meter {
    box-sizing: content-box;
    height: 38px;
    position: relative;
    margin: 60px 0 20px 0;
    background: #032242;
    border-radius: 6px;
    padding: 10px;
    box-shadow: inset 0 -1px 1px rgb(106 178 229 / 68%);
}
.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  background-color: #0cd3a7;
  background-image: linear-gradient(
    center bottom,
    rgb(43, 194, 83) 37%,
    rgb(84, 240, 84) 69%
  );
  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
.meter > span:after,
.animate > span > span {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}

.animate > span:after {
  display: none;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

.road-goals h4 {
    font-size: 18px;
    color: white;
    margin-top: 15px;
}

.box .date {max-width:100px;}

.date {
    background: linear-gradient(45deg, #14ae8c 0%, #36c3a4 100%);
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    width: 86px;
    height: 86px;
    line-height: 72px;
    border-radius: 100%;
    border: 6px solid white;
    color: white;
    min-width: 86px;
    margin-right:20px;
}

.about-img img {max-width:100%;}

.date.empty {background:transparent;}

.divider-vertical {height:30px; width:2px; background:#ffffff36; margin: 0px auto;}

.divider-horizontal {width:100%; height:2px; background:#ffffff36; margin: 0px auto;}

.roadmap .btn-gradient, .garanties .btn-dark-gradient  {
    font-size: 20px;
    padding: 15px 35px;
    border-radius: 36px;
    background: linear-gradient(to right, #01a7c4 0%, #23c2de 100%);
    margin-top: 30px;
    text-transform: uppercase;
    border:0px;
}

.roadmap .btn-gradient:hover {
	background: linear-gradient(to right, #23c2de 0%, #01a7c4 100%);
}

.garanties .btn-dark-gradient {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0b6ba9+1,001a73+100 */
	background: linear-gradient(to right, #0b6ba9 1%,#001a73 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border:0px;
}

.garanties .btn-dark-gradient:hover {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#001a73+0,0b6ba9+100 */
background: linear-gradient(to right, #001a73 0%,#0b6ba9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.blue {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#01a7c4+1,0fb2cf+100 */
	background: linear-gradient(to right, #01a7c4 1%,#0fb2cf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-radius:10px;
	text-align:center;
	color:white;
}

.green {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#14a17f+1,21bb96+100 */
	background: linear-gradient(to right, #14a17f 1%,#21bb96 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-radius:10px;
	text-align:center;
	color:white;
}


.violet {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6d59b6+0,6e5fcc+100 */
	background: linear-gradient(to right, #6d59b6 0%,#6e5fcc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-radius:10px;
	text-align:center;
	color:white;
}


.dark-blue {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00629f+0,0a72b3+100 */
	background: linear-gradient(to right, #00629f 0%,#0a72b3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-radius:10px;
	text-align:center;
	color:white;
}

.contract-inner {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#091224+0,020815+100 */
	background: linear-gradient(to right, #091224 0%,#020815 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	border-radius:10px;
	padding:30px;

}

.contract-inner:hover {
	background: linear-gradient(to right, #020815 0%,#12203c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	    box-shadow: 0px 10px 10px #00000059;
}

.contract-inner h4 {
	color:white;
	text-transform:none;
	font-size:14px;
}

.contract-title {
	border-radius:36px;
	border:2px solid #02a7c4;
	font-size:18px;
	padding:6px 35px;
	display:inline-block;
	min-width:60%;
	margin-bottom:10px;
}

.green .contract-title {border:2px solid #14a17f;}

.violet .contract-title {border:2px solid #6d5ab8;}

.dark-blue .contract-title {border:2px solid #1786cb;}

.plan-percent h3 {
	font-size:30px;
	font-weight:700;
	color:white;

}


.contract {margin-bottom:10px;}

.contract .link {
    color: white;
    text-decoration: none;
    padding: 10px;
    font-size: 18px;
    font-weight: 700;
    display: block;
}


.contract-inner p {
	text-align: left;
    border-bottom: 1px solid white;
    line-height: 32px;
    margin-bottom: 5px;
    font-size: 14px;
}

.contract-inner p span {float:right; font-weight:700;}

.contract-inner p.last {border-bottom:0px;}

.plan-percent p {margin-bottom:5px; margin-left:5px; border-bottom:0px;}

.plan-percent h3 span {
	font-size:24px;
}

.contract-inner h2 {
    font-size:18px;
    font-weight:700;
    color:#0db1cd;
    text-align:left;
}

.green .contract-inner h2 {color:#14a17f;}

.violet .contract-inner h2 {  color: #8571f7;}

.dark-blue .contract-inner h2 {color:#188fd9;}

.garanties {
	background:#e7f3fa;
}

.number {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#078ca3+0,11c8e8+100 */
	background: linear-gradient(45deg, #078ca3 0%,#11c8e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	font-size:48px;
	font-weight:700;
	text-align:center;
	line-height:83px;
	width:83px;
	height:83px;
	border-radius:10px;
	min-width:83px;
	color:white;
	margin-right:20px;
	
	
}

.number:hover {
	background: linear-gradient(45deg, #11c8e8 0%,#078ca3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.text-w h2 {font-size:18px; color:#0b0d0f; font-weight:500; margin-bottom:10px;}

.text-w p {font-size:14px; color:#515356;}

.our-team h4, .our-team h3 {color:white;}

.our-team  {
	background: linear-gradient(to right, rgb(11, 107, 169) 1%, rgb(0, 26, 115) 100%);
	padding-bottom:50px;
}

.team-block {
    background: white;
    border-radius: 16px;
    box-shadow: 0px 10px 10px #00000038;
    padding: 30px 20px;
    text-align: center;
    margin-bottom: -300px;
}

.team-info h4 {
    color: #777b7e;
}

.team-info h3 {
    color: #0b0d0f;
    font-size:18px;
	font-weight:500;
}


.team-info p {
	margin-top:15px;
	color:#777b7e;
	font-size:14px;
}

footer {
	padding-top:300px;
}

.footer-sub {padding-top:30px;}

footer ul {margin-top:30px;}

footer ul li {list-style:none; }

footer ul li a {
	text-decoration:none;
	color:#495054;
	font-size:16px;
	line-height:36px;
	
}


.address-block {
	background: linear-gradient(to right, rgb(11, 107, 169) 1%, rgb(0, 26, 115) 100%);
	padding:20px;
	border-radius:10px;
	margin-bottom:20px;
	color:white;
	position:relative;
	padding-bottom:60px;

	
}

.address-block figure {margin-bottom:0px;}

.address-block b {
    display: block;
    font-size: 14px;
    color: #a2d9f3;
}

.address-block a {
	color:white;
	text-decoration:none;
	    margin-top: 10px;
}

.support-form .form-control {
    display: block;
    width: 100%;
    padding: .675rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #ffffff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #0a1a48;
    background-clip: padding-box;
    border: 0px;
    border-radius: var(--bs-border-radius);
    transition: border-color .15sease-in-out, box-shadow .15sease-in-out;
}

textarea.form-control {
    min-height: calc(2.5em + 3.75rem + calc(var(--bs-border-width)* 2));
}

#banner-img {
    position: relative;
    margin: 0 auto;

}



#banner-img img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#banner-img img.top:hover {
  opacity:0;
}


  @keyframes cf3FadeInOut {
  0% {
  opacity:1;
}
15% {
opacity:0.8;
}
35% {
opacity:0.7;
}
55% {
opacity:0.5;
}
75% {
opacity:0.3;
}

100% {
opacity:0;
}
}

#banner-img img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;
}


#loading {
	position:fixed;
	width:100%;
	height:100vh;
	background:#000;
	z-index:99999;
}

.loader {
  margin: 100px auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}

.loading-frame {
	text-align: center;
    top: 50%;
    left: 50%;
    position: absolute;
    margin-left: -150px;
    margin-top: -100px;
}


.loading-frame frame {margin:0px auto;}


   .company-logo-container {
      margin-bottom: 2rem; /* Space between logo and form */
      text-align: center;
    }
    .company-logo {
      max-width: 200px; /* Adjust as needed */
      height: auto;
    }
    .login-container {
      background-color: white;
      padding: 3rem;
      border-radius: 1rem; /* Rounded corners for the form */
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      width: 100%;
      max-width: 450px; /* Max width for the form */
    }
    .input-group-text {
      border-top-left-radius: 0.5rem !important;
      border-bottom-left-radius: 0.5rem !important;
      border-right: none; /* Remove right border to blend with input */
      background-color: #e9ecef;
    }
    .form-control {
      border-top-right-radius: 0.5rem !important;
      border-bottom-right-radius: 0.5rem !important;
    }
    .back-to-home {
      margin-top: 2rem; /* Space between form and button */
    }

.nav .nav-item button.active {
    background: linear-gradient(to right, rgb(11, 107, 169) 1%, rgb(0, 26, 115) 100%);
    color: #ffffff !important;
    transition: all 0.5s;
}

.login-bg {
	 background: #020814 url(images/banner-bg.png) no-repeat;
	 background-size:cover;
      display: flex;
      flex-direction: column; /* Allow vertical stacking for logo, form, and button */
      justify-content: center;
      align-items: center;
      min-height: 100vh; /* Full viewport height */
      margin: 0;
      padding: 20px; /* Add some padding for smaller screens */

}

.btn-secondary {
	background:#385670;
	border-color:#385670;
}

.btn-secondary:hover {
	background:#365e81;
	border-color:#365e81;
}

.forgot-password a {text-decoration:none; color:#01a7c4; letter-spacing:1;}

.nav-pills .nav-link {
	border-radius: var(--bs-nav-pills-border-radius);
    text-align: right;
    width: 100%;
    padding: 15px 20px;
    transition: all 0.5s;
    background: linear-gradient(to right, #091224 0%, #020815 100%);
}

.nav-pills .nav-item {
    display: block;
    width: 100%;
    margin: 2px 3px;
}

.tab-content {
	background: #e7f3fa;
	padding:20px;
	border-radius:10px;}

.text-primary {
    --bs-text-opacity: 1;
    color: rgb(7 123 167) !important;
}

.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: var(--bs-accordion-active-bg);
    box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
    background: linear-gradient(to right, rgb(11, 107, 169) 1%, rgb(0, 26, 115) 100%);
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-item {
    color: var(--bs-accordion-color);
    background-color: var(--bs-accordion-bg);
    border: var(--bs-accordion-border-width) solid #badbfd;
        padding: 1px;
}

.accordion-body {
    padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
    background: #e7f3fa;
}

.example p {margin-bottom:5px;}

.address-block-longer {padding-bottom:90px;}

.address-block ul {margin-left:20px;}

.support-form  ul li {
    list-style: none;
    background: url(images/check.png) no-repeat left 10px;
    padding-left: 26px;
    line-height: 24px;
    background-size: 18px auto;
    padding-top: 6px;
    padding-bottom: 6px;
}

.support-form  ul {padding:0px;}

.support-form {padding:50px 0px;}

.form {
	background:white;
	border-radius:16px;
	padding:20px;
	box-shadow: 0px 10px 10px #00000038;
	color:#212529;
}

.form h3 {
	color: #26c6da;
	font-size:20px;
	margin-bottom:15px;
}

.form h4 {
	color: #6b7c83;
}

.contacts .address-block {    padding-bottom: 20px;}

  .registration-container {
      background-color: white;
      padding: 3rem;
      border-radius: 1rem;
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      width: 100%;
      max-width: 700px; /* Increased max-width for more fields */
    }


@media (max-width: 991px) {

.roadmap-text figure {text-align:center;}

.h-100 {
    height: auto!important;
}

.address-block {
	padding-bottom: 100px;
}

footer ul {
    margin-top: 0px;
    padding-left: 0px;
    text-align: center;
}

footer {
    padding-top: 300px;
    text-align: center;
}

#banner-img {
    position: relative;
    margin: 0 auto;
    margin-top: -280px;
}
	.roadmap {
		padding: 4rem 0px;
		background: #00629f;
	}
	
.about .roadmap-text h3 {font-size:30px;}
	
	.about-img {
    text-align: center;
    margin-top: -30px;
	}
	
	.about-img2 {margin-top:0px; margin-bottom:20px;}
	
	.meter {margin-top:20px;}
	.goal1 {margin-bottom:15px;}
	.roadmap .btn-gradient {font-size:18px;}
	.about {
		padding: 2rem 0px 3rem;
	}
	
.block-text {
        color: white;
        padding: 47px 0px 17px;
}

.buttons .btn {font-size:16px;}

.block-text h2 {
    font-size: 24px;
    font-weight: 300;
    line-height: 35px;
}

.buttons {
    padding: 1rem 0px;
}
}

@media (max-width: 768px) {


 }

@media (max-width:415px) {

	
	
}