* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #000C2C;
}

.material-symbols-rounded {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}

.ubuntu {
  font-family: "Ubuntu", serif;
  font-weight: 300;
  font-style: normal;
}

.ubuntu-bold {
  font-family: "Ubuntu", serif;
  font-weight: 700;
  font-style: normal;
}

.text-white {
  color: white;
}

.text-gray {
  color: #9CA3AF;
}

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

.nav-bar {
  padding: 10px 20px;
  height: 40px;
  max-height: 61px;
  /*20px margin + 40px content + 1 border*/

  border: solid;
  border-width: 0px;
  border-bottom-width: 1px;
  border-color: rgb(63 221 250 / 0.1);

  position: sticky;
  top: 0px;

  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);

  z-index: 1;

  display: flex;
  align-items: center;
}

.nav-bar .logo {
  height: 60%;
  width: auto;
}

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.hero .logo {
  width: 80%;
  height: auto;
  /* filter: drop-shadow(0px 0px 100px #3fdefaa2); */
}

.h-spacer {
  height: 1px;
  width: 90%;
  margin: auto;

  background: linear-gradient(90deg, rgba(6, 34, 66, 1) 0%, rgba(63, 221, 250, 1) 50%, rgba(6, 34, 66, 1) 100%);
}

.features {
  margin: auto;
  margin-top: 100px;
  margin-bottom: 100px;

  width: 90%;
}

@media (max-width: 600px) {
  .features {
    margin-top: 50px;
  }
}

.features .header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  gap: 20px;
}

.cards-container {
  margin-top: 50px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1080px) {
  .cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .cards-container {
    grid-template-columns: repeat(1, 1fr);
  }
}

.card {
  padding: 40px;
  border-radius: 10px;

  display: flex;
  align-content: start;
  justify-content: start;
  flex-direction: column;
  gap: 20px;
  background-color: rgb(255 255 255 / 0.05);

  transition: 100ms;
}

.card .card-icon {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 60px;
  height: 60px;

  background-color: rgb(63 221 250 / 0.1);
  border-radius: 10px;
}

.card .card-icon span {
  color: #3FDDFA;
  font-size: 30px;
}

.card:hover {
  background-color: rgb(255 255 255 / 0.1);
  scale: 1.05;
  transition: 100ms;
}

.card:hover .card-icon {
  background-color: rgb(63 221 250 / 0.2);
}

footer {
  padding: 20px;

  border: solid;
  border-width: 0px;
  border-top-width: 1px;
  border-color: rgb(63 221 250 / 0.1);
}