@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;600;800&display=swap');

.fnt-inter {
  font-family: 'Inter', sans-serif !important;
}

.w-200 {
  font-weight: 200 !important;
}
.w-300 {
  font-weight: 300 !important;
}
.w-400 {
  font-weight: 400 !important;
}
.w-600 {
  font-weight: 600 !important;
}
.w-800 {
  font-weight: 800 !important;
}

body {
  background-color: #0B1120 !important;
  overflow-x: hidden;
}

.nav-link:hover {
  color: #38BDF8 !important;
}
.nav-link {
  transition: 0.15s !important;
}
.get-started {
  background-color: #0EA5E9 !important;
  color: white;
  transition: 0.15s !important;
  padding: 10px 0px 10px 0px !important;
  border: none !important;
    border-top: 2px solid #3EB7ED !important;
}
::placeholder {
  color: white !important;
}
.color-blue {
  border: none !important;
    background-color: #0EA5E9 !important;
  color: white !important;
    border-top: 2px solid #3EB7ED !important;
}
.get-started:hover {
  background-color: #38BDF8 !important;
  border-top: 2px solid #60CAF9 !important;
}
.btn-status {
  background-color: #1E293B !important;
  color: white;
  transition: 0.15s !important;
  border: none !important;
    border-top: 2px solid #293445 !important;
}
.btn-status:hover {
  background-color: #324154 !important;
  border-top: 2px solid #3C4B5F !important;
}

.bg-test {
  background-image: url('../images/netly.gg-test.jpg');
}

.card {
  color: #CBD5E1 !important;
  border-top: 2px solid #293445 !important;
  background-color: #1E293B !important;
}
.modal {
  color: #CBD5E1 !important;
}

.card-header {
  color: #CBD5E1 !important;
    background-color: #1E293B !important;
}
.modal-header {
  color: #CBD5E1 !important;
    background-color: #1E293B !important;
    border-top: 2px solid #293445 !important;
  border: none !important;

}

.card-header {
  color: #CBD5E1 !important;
  border-bottom: 0px solid #ffffff !important;
    background-color: #1E293B !important;
}

.card-body {
  color: #CBD5E1 !important;
  border-top: 0 solid #ffffff !important;
}
.modal-body {
  color: #CBD5E1 !important;
  border: none;
      background-color: #1E293B !important;
  border-radius: 0px 0px 6px 6px;

}

.gc-text {
  color: #CBD5E1 !important;
}

.dot {
  height: 16px;
  width: 16px;
  background-color: #1E293B;
  border-radius: 50%;
  position: relative;
  outline-color: rgba(2, 132, 199, 0.8);
  animation-timing-function: linear;
  outline-width: 0px;
  outline-style: solid;
  animation-iteration-count: infinite;
  display: inline-block;
  cursor: normal !important;
  animation-duration: 2s;
  animation-name: dot;
}
#canada {
  background-image: url("../fonts/ca.svg");
  background-size: 21px;
  background-repeat:no-repeat;
background-position: center center;
    left: 400px;
  bottom: -170px;
}
#helsinki {
background-image: url("../fonts/fi.svg");
  background-size: 21px;
  background-repeat:no-repeat;
background-position: center center;
  left: 640px;
  bottom: -124px;
}
#singapore {
background-image: url("../fonts/sg.svg");
  background-size: 30px 21px;
  background-repeat:no-repeat;
background-position: center center;
  left: 856px;
  bottom: -346px;
}
#australia {
background-image: url("../fonts/au.svg");
  background-size: 25px;
  background-repeat:no-repeat;
background-position: center center;
  left: 977px;
  bottom: -435px;
}
#brazil {
background-image: url("../fonts/br.svg");
  background-size: 25px;
  background-repeat:no-repeat;
background-position: center center;
  left: 375px;
  bottom: -398px;
}
@keyframes dot {
  0% {  outline-width: 0px;}
  50% { outline-width: 7px;}
  100% { outline-width: 0px;}
}

.tooltip-text {
  opacity: 0;
  position: absolute;
  z-index: 1;
  text-align: center;
  width: 120px;
  top: -55px;
  left: -53px;
  transition: 0.3s;
  padding: 6px;
  font-size: 12px;
  border-radius: 10px;
}

.dot:hover .tooltip-text {
    top: -60px;
  opacity: 100;
  transition: 0.3s;
}
#top {
  background-size: 40px 40px;
  background-position: 0px 0px;
  background-image:
  linear-gradient(to right, #18233f 1px, transparent 1px),
  linear-gradient(to bottom, #18233f 1px, transparent 1px);
  /* box-shadow: 0 -30px 40px 40px #0B1120 inset; */
  box-shadow: 0 0px 40px 40px #0B1120 inset;
}
.revealy{
  position: relative;
  transform: translateY(100px);
  opacity: 0;
  transition: 0.7s all ease;
}
.revealy.active{
  transform: translateY(0);
  opacity: 1;
}
.revealyy{
  position: relative;
  transform: translateY(-100px);
  opacity: 0;
  transition: 0.7s all ease;
}
.revealyy.active{
  transform: translateY(0);
  opacity: 1;
}
.revealnav{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 0.7s all ease;
}
.revealnav.active{
  transform: translateY(0);
  opacity: 1;
}
.revealtitle{
  position: relative;
  transform: translateY(40px);
  opacity: 0;
  transition: 0.7s all ease;
}
.revealtitle.active{
  transform: translateY(0);
  opacity: 1;
}
.revealx{
  position: relative;
  transform: translateX(-100px);
  opacity: 0;
  transition: 0.7s all ease;
}
.revealx.active{
  transform: translateX(0);
  opacity: 1;
}
.revealxx{
  position: relative;
  transform: translateX(100px);
  opacity: 0;
  transition: 0.7s all ease;
}
.revealxx.active{
  transform: translateX(0);
  opacity: 1;
}
.revealz{
  position: relative;
  transform: scale(1.4);
  opacity: 0;
  transition: 0.7s all ease;
}
.revealz.active{
  transform: scale(1);
  opacity: 1;
}

.vertical-center {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

.modal {
  position: fixed;
  top: 20px;
  z-index: 50;
}

.modal-transitions {
  transition: 0.3s;
  transform: translateY(0px);
  animation: modal-out 0.3s;
  visibility: visible;
  animation-fill-mode: forwards;
  animation-delay: 5s;
}

@keyframes modal-out {
  from {transform: translateY(0px);opacity:100%;display:block;}
  to {transform: translateY(-30px);opacity:1%;display:none;}
}