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

* {
  font-family: 'Inter', sans-serif;
  color: var(--white);
  --white: #f5f5fa;
  --blue: #0093cd;
  --black-1: #1e1e1e;
}
body {
  background-color: #0a0a0a;
}

.text-light-blue {
  color: var(--blue);
}

.border-left-blue {
  border-left: var(--bs-border-style) var(--blue) !important;
}

.bg-black-1 {
  background-color: var(--black-1);
}

.circle-gradient {
  width: 50px;
  height: 50px;
  background: linear-gradient(130deg, #00b7ff 19.7%, #f5f5fa 109.76%);
}

.circle-lightblue {
  width: 38px;
  height: 38px;
  background-color: #b8ebff;
}

.bg-icon-sosmed {
  width: 38px;
  height: 38px;
  background: rgba(245, 245, 250, 0.15);
}

.bg-linear-blue {
  background: linear-gradient(100deg, #0a0a0a 0%, #091428 23.96%, #081d45 51.56%, rgba(39, 65, 120, 0.75) 78.65%, rgba(65, 90, 165, 0.53) 100%);
}

.btn-outline-blue {
  --bs-btn-color: var(--white);
  --bs-btn-border-color: var(--blue);
  --bs-btn-hover-bg: var(--blue);
  --bs-btn-hover-border-color: var(--white);
  --bs-btn-active-border-color: var(--blue);
  --bs-btn-border-width: 3px;
}

.overlay1 {
  width: 100%;
  height: 13%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(10, 10, 10, 1) 100%); */
  background: linear-gradient(0deg, #0a0a0a 50%, rgba(10, 10, 10, 0) 100%, rgba(100, 65, 165, 0.6) 100%);
}
.overlay2 {
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(10, 10, 10, 1) 100%); */
  background: linear-gradient(0deg, #0a0a0a 50%, rgba(10, 10, 10, 0) 100%, rgba(100, 65, 165, 0.6) 100%);
}

.overlay3 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 10, .3);
}

@media (min-width: 768px) {
  .navbar-nav .nav-link {
    color: var(--white);
  }
  .navbar-nav .nav-link.active,
  .navbar-nav .show > .nav-link {
    color: var(--blue);
    font-weight: bold;
  }

  .min-h-600px {
    min-height: 600px !important;
  }
}

.btntest {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 0.9rem;
  color: var(--white);
  text-align: left;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: var(--bs-accordion-transition);
}

.btntest::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.33301 7.99967H7.99967M7.99967 7.99967H12.6663M7.99967 7.99967V3.33301M7.99967 7.99967V12.6663' stroke='%23F5F5FA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform 0.2s ease-in-out;
}

.btntest:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.4286 8C15.4286 8.55313 14.9179 9 14.2857 9H1.7143C1.08216 9 0.571442 8.55313 0.571442 8C0.571442 7.44687 1.08216 7 1.7143 7H14.2857C14.9179 7 15.4286 7.44687 15.4286 8Z' fill='white'/%3E%3C/svg%3E%0A");
  transition: transform 0.2s ease-in-out;
}

.card-custom {
  background-color: var(--black-1);
  border-color: var(--white);
}

.text-linear {
  background: linear-gradient(90deg, #00b7ff 0%, rgba(245, 245, 250, 0.9) 38.95%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 17H21M3 12H21M3 7H21' stroke='%23F5F5FA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.getintouch > div > .form-control {
  background-color: transparent;
  border: none;
  border-radius: 0%;
  border-bottom: 2px solid #a0a0a0;
  color: #f5f5fa;
}

.circle-blue1 {
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: #0093cd;
  filter: blur(200px);
  z-index: -1;
}

.border-white-gradient {
  border-width: 0.05rem;
  border-style: solid;
  border-image: linear-gradient(215deg, rgba(245, 245, 250, 1), rgba(245, 245, 250, 0) 15%, rgba(245, 245, 250, 0) 85%, rgba(245, 245, 250, 1) 100%) 1;
  background: rgba(245, 245, 250, 0.02);
}