@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
:root {
  --black: 0 0% 8%;
  --black-light: 218 30% 9%;
  --grey-dark: 0 0% 51%;
  --grey: 0 0% 75%;
  --white-dark: 0 0% 95%;
  --white: 0 0% 100%;
  --blue-dark: 218 50% 11%;
  --blue-dark-muted: 218 74% 9%;
  --blue: 218 76% 34%;
  --blue-muted: 218 50% 40%;
  --blue-light: 218 100% 63%;
  --blue-light-muted: 218 65% 59%;
  --red: 0 100% 50%;
  --green-dark: 106 100% 28%;
  --green: 106 100% 63%;
  --brown: 30 100% 32%;
  --orange: 24 100% 63%;
  --yellow-dark: 55 100% 43%;
  --test-color: hsl(213, 100%, 50%);
  --test-color: hsl(24, 100%, 63%);
  --test-color: hsla(0, 0%, 0%, 0.725);
  --test-color: hsl(0, 0%, 51%);
  --test-color: hsl(218, 76%, 34%);
  --test-color: #122a52;
  --test-color: hsl(218, 76%, 34%);
  --test-color: hsl(218, 76%, 34%);
  --test-color: hsl(218, 76%, 34%);
  --test-color: hsl(218, 76%, 34%);
  --test-color: hsl(218, 76%, 34%);
  --test-color: hsl(218, 76%, 34%);
  --test-color: #141414;
  --test-color: #10151e;
  --test-color: #828282;
  --test-color: #bfbfbf;
  --test-color: #f2f2f2;
  --test-color: #0e182a;
  --test-color: #154599;
  --test-color: #4287ff;
  --disruptive: 0 62.8% 30.6%;
  --disruptive-foreground: 210 40% 98%;
  --ring: 221.2 83.2% 53.3%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --background: var(--white-dark);
  --foreground: var(--black-light);
  --accent: var(--blue);
  --muted: var(--blue-dark-muted);
  --shadow: var(--grey);
  --card-background: var(--white);
  --card-foreground: var(--white-dark);
  --card-accent: var(--accent);
  --card-shadow: var(--shadow);
  --btn-background: var(--grey);
  --btn-foreground: var(--blue-light);
  --btn-accent: var(--accent);
  --btn-shadow: var(--shadow);
  --txt-dark: var(--black);
  --txt-light: var(--white);
  --txt-accent: var(--blue);
  --txt-destructive: var(--red);
  --txt-warning: var(--orange);
  --facebook: 221, 44%, 41%;
  --linkedin: 201, 100%, 35%;
  --dribbble: 337, 79%, 61%;
  --border-radius-s: 5px;
  --border-radius-m: 10px;
  --border-radius-l: 15px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

html.noOverflow {
  overflow-y: hidden;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--txt-dark));
}
body > header {
  min-height: 600px;
}
body > main {
  display: flex;
  flex-direction: column;
  align-items: start;
  row-gap: 150px;
  margin-block: 150px;
}
body > main.N-btm {
  margin-bottom: 0;
}
body > main.N-tp {
  margin-top: 0;
}
body > main > section {
  width: auto;
}
@media (width < 1180px) {
  body > main > section.container {
    margin-inline: 30px;
  }
}
@media (width > 1180px) {
  body > main > section {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
  }
}

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

a,
button {
  cursor: pointer;
}

#nav {
  background-color: hsl(var(--background));
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  height: 80px;
  transition: 0.3s height;
}
#nav .navigation {
  background-color: hsl(var(--background));
}
#nav .navigation a:where(:hover, :active, .active) {
  color: hsl(var(--txt-accent));
}
#nav .contact_us {
  background-color: hsl(var(--btn-accent));
  color: hsl(var(--txt-light));
}
#nav .contact_us p {
  filter: brightness(95%);
}
#nav .burger {
  background-color: transparent;
}
#nav .language {
  color: hsl(var(--text-dark));
  background-color: hsl(var(--btn-background)/0.251);
  border-radius: 8px;
  border: none;
  transition: linear 200ms background-color, linear 100ms color, linear 200ms font-weight;
}
#nav .language:hover {
  background-color: hsl(var(--btn-accent)/0.2);
}
#nav.down {
  border-bottom-color: hsl(var(--accent)/0.3);
}
#nav > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#nav .logo {
  position: relative;
}
#nav .options {
  display: flex;
  align-items: center;
  gap: 20px;
}
#nav .navigation {
  display: none;
}
#nav .navigation.active {
  position: absolute;
  inset: 80px 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
#nav .navigation.active div {
  display: flex;
  justify-content: center;
  align-items: center;
}
#nav .navigation a {
  display: flex;
  justify-content: center;
  align-items: center;
}
#nav .navigation .language {
  display: flex;
  justify-content: center;
  align-items: center;
}
#nav .contact_us {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (width > 1080px) {
  #nav .navigation {
    display: flex;
    gap: 5px;
  }
  #nav .burger {
    display: none;
  }
}
#nav.down {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
#nav > div {
  width: 100%;
  height: 100%;
  padding-inline: 20px;
}
#nav .navigation a:where(:hover, :active, .active) {
  font-weight: bold;
}
#nav .logo {
  height: 80px;
  width: 80px;
  min-height: 80px;
  min-width: 80px;
}
#nav .navigation.active {
  height: calc(100dvh - 80px);
  transition: 1s height;
}
#nav .navigation.active > * {
  width: 100%;
  min-height: 85px;
  font-size: 1.5rem;
}
#nav .navigation.active .language {
  width: 150px;
  height: 60px;
}
#nav .contact_us {
  width: 115px;
  height: 37px;
  text-align: center;
  font-weight: bold;
  font-size: 0.95rem;
  box-shadow: 3px 3px 0px hsl(var(--grey));
  border-radius: 5px;
}
#nav .contact_us.fi {
  font-size: 0.85rem;
}
#nav .burger {
  height: 30px;
  width: 30px;
  border: none;
}
@media (width > 1080px) {
  #nav {
    height: 150px;
  }
  #nav.down {
    height: 80px;
  }
  #nav .navigation > * {
    width: 115px;
    min-width: 80px;
    text-align: center;
  }
  #nav .navigation > *:where(:hover, :active, .active) {
    font-weight: bold;
  }
  #nav .navigation .language {
    height: 35px;
  }
}
@media (width < 400px) {
  #nav .contact_us {
    width: 105px;
    height: 37px;
    font-size: 0.85rem;
  }
  #nav .contact_us.fi {
    font-size: 0.75rem;
  }
}

#hero {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  padding-top: 150px;
}
#hero .hero span {
  color: hsl(var(--txt-accent));
}
#hero .hero > div {
  background-color: hsl(var(--whitish));
}
#hero .hero {
  display: grid;
  grid-template: 1fr 1fr 1fr 1fr/clamp(272px, 50% + 150px, 850px) 1fr;
  justify-content: start;
  align-items: center;
}
#hero .hero h1 {
  grid-area: 1/1/1 span/1 span;
  align-self: end;
}
#hero .hero > p {
  grid-area: 2/1/2 span/1 span;
}
#hero .hero > div {
  position: absolute;
  left: 65%;
  z-index: -1;
}
#hero .hero {
  width: 90%;
  height: 100%;
  margin-inline: auto;
}
#hero .hero h1 {
  width: max(100%, 375px);
  font-size: 1.3rem;
  font-weight: bold;
  text-transform: uppercase;
  transition: 0.2s font-size;
}
@media (width > 600px) {
  #hero .hero h1 {
    font-size: clamp(1.4rem, 1.13rem + 0.73vw, 2rem);
  }
}
#hero .hero > p {
  font-size: 0.83rem;
  text-align: justify;
  transition: 0.3s font-size;
}
@media (width > 600px) {
  #hero .hero > p {
    font-size: clamp(0.83rem, 0.31rem + 0.85vw, 1.33rem);
  }
}
#hero .hero > div {
  width: 600px;
  transition: translate 1s linear;
  backdrop-filter: blur(11.5px);
  -webkit-backdrop-filter: blur(11.5px);
}
#hero .hero > div img {
  background-size: contain;
  background-repeat: no-repeat;
}
@media (width < 1100px) {
  #hero .hero > div {
    translate: -400px 500px;
  }
}

#footer {
  background-color: hsl(var(--foreground));
  text-align: center;
}
#footer .share a .facebook {
  fill: hsl(var(--facebook));
}
#footer .share a .linkedin {
  fill: hsl(var(--linkedin));
}
#footer .share a .dribbble {
  fill: hsl(var(--dribbble));
}
#footer .credit {
  color: hsl(var(--txt-light));
}
#footer .credit span {
  color: hsl(var(--txt-accent));
}
#footer .links a {
  color: hsl(var(--txt-light));
  border: hsl(var(--grey));
}
#footer .links a:hover {
  color: hsl(var(--txt-accent));
}
#footer .share a {
  display: inline-block;
}
#footer .share .links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}
#footer .share {
  padding: 2rem 0;
}
#footer .share a:hover svg {
  cursor: pointer;
  -moz-animation-name: bounce;
}
#footer .share a svg {
  height: 2rem;
  width: 2rem;
  margin: 0.3rem;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
#footer .links {
  padding: 2rem 0;
}
#footer .links a {
  width: 255.5px;
  padding: 0.7rem 2rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  border-radius: 20px;
}
#footer .links a:hover {
  font-weight: bold;
}
#footer .credit {
  padding: 1.5rem;
  font-weight: lighter;
}
#footer .credit span {
  font-weight: bold;
}

@keyframes bounce {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}