:root {
  --color-primary: #00ADB5;
  --color-primary-light: #99dbde;
  --color-secondary: #333333;
  --color-bg-card: #ffffff;
  --color-bg-modal: #fefefe;
  --color-text-main: #333333;
  --color-btn-bg: #ffffff;
  --color-btn-text: #00ADB5;
  --color-icon-hover: #ffffff;
}

[data-theme=dark] {
  --color-secondary: #f0f0f0;
  --color-bg-card: #0a121a;
  --color-bg-modal: #040a0f;
  --color-text-main: #f0f0f0;
  --color-btn-bg: #0a121a;
  --color-btn-text: #00ADB5;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

body {
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  color: hsl(0, 0%, 85%);
  background-color: hsl(0, 0%, 10%);
  font-family: "Poopins", sans-serif;
}

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

@keyframes scroll-bg {
  0% {
    background-position: 0px 0px;
  }
  10% {
    background-position: -81.92px -122.88px;
  }
  20% {
    background-position: -184.32px -51.2px;
  }
  30% {
    background-position: -286.72px -256px;
  }
  40% {
    background-position: -409.6px -204.8px;
  }
  50% {
    background-position: -532.48px -460.8px;
  }
  60% {
    background-position: -665.6px -409.6px;
  }
  70% {
    background-position: -798.72px -665.6px;
  }
  80% {
    background-position: -921.6px -614.4px;
  }
  90% {
    background-position: -972.8px -870.4px;
  }
  100% {
    background-position: -1024px -1024px;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.svg-aquore-logo-animated {
  max-width: 280px;
  height: auto;
}
.svg-aquore-logo-animated .svg-slide-01 {
  position: absolute;
  max-width: 15%;
  bottom: 32px;
  left: 32px;
}
.svg-aquore-logo-animated .str0 {
  stroke: #ffffff;
  stroke-width: 2px;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.svg-aquore-logo-animated .fil1 {
  fill: none;
  fill-rule: nonzero;
}
.svg-aquore-logo-animated .fil0 {
  fill: #ffffff;
  fill-rule: nonzero;
}
.svg-aquore-logo-animated .fil2 {
  fill: #99DBDE;
  fill-rule: nonzero;
}
@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 357.2861328125px;
    stroke-dasharray: 357.2861328125px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 357.2861328125px;
  }
}
@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(254, 254, 254);
  }
}
.svg-aquore-logo-animated .svg-elem-1 {
  animation: animate-svg-stroke-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both, animate-svg-fill-1 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}
@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 788.9417114258px;
    stroke-dasharray: 788.9417114258px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 788.9417114258px;
  }
}
@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-aquore-logo-animated .svg-elem-2 {
  animation: animate-svg-stroke-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both, animate-svg-fill-2 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}
@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 103.2180023193px;
    stroke-dasharray: 103.2180023193px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 103.2180023193px;
  }
}
@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(153, 219, 222);
  }
}
.svg-aquore-logo-animated .svg-elem-3 {
  animation: animate-svg-stroke-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both, animate-svg-fill-3 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}
@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 394.7998352051px;
    stroke-dasharray: 394.7998352051px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 394.7998352051px;
  }
}
@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-aquore-logo-animated .svg-elem-4 {
  animation: animate-svg-stroke-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both, animate-svg-fill-4 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}
@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 486.8008117676px;
    stroke-dasharray: 486.8008117676px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 486.8008117676px;
  }
}
@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-aquore-logo-animated .svg-elem-5 {
  animation: animate-svg-stroke-5 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both, animate-svg-fill-5 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s both;
}
@keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 442.1100769043px;
    stroke-dasharray: 442.1100769043px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 442.1100769043px;
  }
}
@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-aquore-logo-animated .svg-elem-6 {
  animation: animate-svg-stroke-6 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both, animate-svg-fill-6 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
}
@keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 412.8741455078px;
    stroke-dasharray: 412.8741455078px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 412.8741455078px;
  }
}
@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-aquore-logo-animated .svg-elem-7 {
  animation: animate-svg-stroke-7 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s both, animate-svg-fill-7 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s both;
}
@keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 2893.8151855469px;
    stroke-dasharray: 2893.8151855469px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 2893.8151855469px;
  }
}
@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(255, 255, 255);
  }
}
.svg-aquore-logo-animated .svg-elem-8 {
  animation: animate-svg-stroke-8 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s both, animate-svg-fill-8 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
}
@keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 1238.1247558594px;
    stroke-dasharray: 1238.1247558594px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1238.1247558594px;
  }
}
@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }
  100% {
    fill: rgb(153, 219, 222);
  }
}
.svg-aquore-logo-animated .svg-elem-9 {
  animation: animate-svg-stroke-9 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s both, animate-svg-fill-9 0.8s cubic-bezier(0.47, 0, 0.745, 0.715) 2.25s both;
}

.hero {
  position: relative;
  height: 100dvh;
  background-image: url("../img/porsan-background.webp");
  background-size: cover;
  background-position: center;
}
.hero .main-logo {
  position: relative;
  top: 32px;
  left: 32px;
}
.hero .download-btn {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 30px;
  font-size: 18px;
  text-decoration: none;
  border-radius: 100px;
  color: white;
  background-color: #51978c;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.25s ease;
}
.hero .download-btn:hover {
  background-color: #71C9BA;
}/*# sourceMappingURL=styles.css.map */