/* -------------------------------------------------------------------------- */
/*                                    RESET                                   */
/* -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  color: inherit;
  vertical-align: baseline;
  line-height: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

html {
  font-family: system-ui, sans-serif;
  font-size: 1.1em;
  line-height: 1.3;
}

ol, ul {
  list-style: none;
}

textarea {
  resize: none;
}

a {
  color: unset;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
}

/* -------------------------------------------------------------------------- */
/*                                   GENERAL                                  */
/* -------------------------------------------------------------------------- */
html {
  background-color: #1E212B;
  color: #E8E5DA;
  scroll-behavior: smooth;
}

p {
  max-width: 60ch;
}

.h1, .h2 .h1 {
  font-size: 3.5rem;
  font-weight: bold;
}

.h2 {
  font-size: 2rem;
  font-weight: bold;
}

.h3 {
  font-size: 1.5rem;
  font-weight: 500;
}

.hidden {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.content-width {
  max-width: 1300px;
  width: 90%;
  margin: 0 auto;
}

.full-height {
  min-height: 100vh;
  min-height: 100dvh;
}

.center {
  margin: 0 auto;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
}

.m-bottom {
  margin-bottom: 2rem;
}

.m-top {
  margin-top: 1rem;
}

a:not(.ignore-hover, .scroll-top) {
  font-weight: 600;
  position: relative;
}
a:not(.ignore-hover, .scroll-top)::after { /* all navbar text that needs underline hover effect */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.15em;
  height: 0.13em;
  width: 0;
  background-color: #0077FF;
  border-radius: 10px;
  transition: left 300ms, width 300ms;
}
a:not(.ignore-hover, .scroll-top):hover::after {
  left: -2.5%;
  width: 105%;
}

.flex-double {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.flex-double img {
  width: 50vw;
  max-width: 50ch;
}

.scroll-top {
  background-color: #253237;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  border-radius: 0.2em;
  opacity: 0;
  pointer-events: none;
  box-shadow: #1E212B 4px 4px 3px;
  transition: transform ease-out 200ms, opacity 200ms;
}
.scroll-top i {
  display: block;
  height: 0.65em;
}
.scroll-top:hover {
  transform: translateY(-0.2em) scale(1.05);
}
.scroll-top.shown {
  opacity: 1;
  pointer-events: initial;
}

/* -------------------------------------------------------------------------- */
/*                                    PAGE                                    */
/* -------------------------------------------------------------------------- */
/* ----------------------------------- NAV ---------------------------------- */
nav {
  position: fixed;
  height: 3.5em;
  width: 100%;
  z-index: 10;
  transition: background-color 200ms ease-out;
}
nav.background {
  background-color: #253237;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.nav img {
  height: 2em;
}
.nav ul {
  display: flex;
  align-items: stretch;
  gap: 1.5em;
  gap: min(1.5em, 2vw);
}

.burger-btn {
  display: none;
  position: fixed;
  z-index: 100;
  top: 1rem;
  right: 1rem;
  width: 2em;
  cursor: pointer;
  background: none;
  font-size: 2rem;
}

/* --------------------------------- HEADER --------------------------------- */
.header article {
  position: relative;
}
.header div, .header img {
  z-index: 1;
}
.header canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(2px);
}

/* --------------------------------- SERVICE -------------------------------- */
#services {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.lines {
  display: flex;
  align-items: center;
  gap: 0.8em;
  text-align: center;
}
.lines > * {
  min-height: 1.5em;
}
.lines::before, .lines::after {
  content: "";
  display: block;
  background-color: #F58F29;
  height: 0.3ch;
  width: 5ch;
  border-radius: 10em;
}

.card-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2em;
}
.card-container .card {
  text-align: center;
  max-width: 40ch;
  background-color: #253237;
  padding: 2em;
  border-radius: 1rem;
  transition: background-color 200ms ease-out;
}
.card-container .card div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  transition: transform 200ms ease-out;
}
.card-container .card i {
  font-size: 2.5rem;
}
.card-container .card:hover > * {
  transform: scale(1.05);
}

/* ---------------------------------- ABOUT --------------------------------- */
.about-text {
  display: grid;
  gap: 2em;
  text-align: right;
  line-height: 1.7;
}
.about-text i {
  margin-right: 1ch;
  color: #F58F29;
}

/* --------------------------------- contact -------------------------------- */
#contact {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
}
#contact i {
  margin-right: 1ch;
}

/* -------------------------------------------------------------------------- */
/*                                   footer                                   */
/* -------------------------------------------------------------------------- */
footer {
  background-color: #253237;
  padding: 2em 0;
}
footer div {
  display: grid;
  grid-template-columns: 3.5fr 1fr 3.5fr;
  grid-template-rows: 1fr;
  grid-template-rows: 1fr;
  margin-bottom: 0.5em;
}
footer div > * {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
footer div .logo {
  font-size: 2rem;
  justify-self: center;
  align-items: center;
}
footer div .logo img {
  width: 3em;
}
footer div ul {
  line-height: 1.8;
}
footer div .siteplan {
  text-align: right;
}
footer .cp, footer .credit {
  margin: 0 auto;
  text-align: center;
}
footer .credit {
  margin-top: 0.5em;
}

.legal {
  display: flex;
  flex-direction: column;
  gap: 2em;
  line-height: 1.6;
  padding: 5em 0 2em;
}

/* -------------------------------------------------------------------------- */
/*                                   MOBILE                                   */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 85ch) {
  .burger-btn {
    display: block;
  }
  nav {
    height: 0vh;
    overflow: hidden;
    transition: height 100ms;
    background-color: #1E212B;
  }
  nav.oppen {
    height: 100vh;
    height: 100dvh;
  }
  nav .nav {
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  nav .nav img {
    height: 3em;
  }
  nav .nav ul {
    flex-direction: column;
    align-items: center;
    gap: 1.5em;
  }
  .flex-double {
    text-align: center;
  }
  .flex-double img {
    display: none;
  }
  .lines::before, .lines::after {
    display: none;
  }
  .about-text {
    text-align: center;
  }
  footer div {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 2em;
  }
  footer div > * {
    text-align: center;
  }
  footer div .logo {
    grid-row: 1;
  }
  footer div .contact {
    grid-row: 2;
  }
  footer div .contact {
    grid-row: 3;
  }
}/*# sourceMappingURL=style.css.map */