:root {
  scroll-behavior: smooth;
  font-family:"Inter", sans-serif;
  font-size:1.5vw;
  font-weight:500;
  line-height:1.7;
  --color-blue: #1a73e8;
}

* { box-sizing:border-box; }

.desktop { display:unset; }
.mobile { display:none; }
.columns { display:flex; }
.columns .column { width:50%; background-size:cover; background-position:center; }

.animation {
  opacity: 0;
  transition: all 0.7s ease-out;
  transition-delay: 0.4s;
}
.scroll-animation {
  opacity: 1;
}

body {}
h1 { margin-top:0; font-size:2.4rem; font-weight:800; line-height:1.15; }
h2 { margin:0; font-size:2rem; font-weight:700!important; letter-spacing: -.01em !important }
h3 {}
h4 { font-size:2em; }
p { font-weight:500; font-weight:400; line-height:1.6; color:#666; }
a { text-decoration:none; }
button { all:unset; padding:1em; display:flex; }
header { padding:1vw 4vw; }
header img { width:22.5vw; }
footer { padding:2.5vw 5vw; background-color:#f9f9f9; display:flex; flex-direction:row; }
footer img { width:18vw; }
footer menu { padding-left:2vw; display:flex; flex-direction:row; }
footer menu a { padding-left:2vw; display:flex; flex-direction:column; justify-content:center; color:#999; text-decoration:none; }

#hero { height:75vh; display:flex; flex-direction:column; justify-content:center; background-size:cover; background-position:center; }
#hero .content { padding:2vw 4vw; }
#hero .content h1 { margin-bottom:.3em; width:75vw; text-transform:uppercase; }
#hero .content p { width:60vw; font-size:1.2rem; margin-top:.5em; color:#444; line-height:1.5; }
#hero .content button { background-color:var(--color-blue); color:white; line-height:1em; border-radius:.3vw; }
#hero .content button span { margin-right:.2em; font-size:1.3em; line-height:inherit; }

#clients { margin:7.5vw 0;text-align:center; }
#clients h2 { font-weight:normal; color:var(--color-blue); }
#clients img { margin:4vw 0; width:80vw; }

#about { padding:0 4vw; }
#about .columns { gap:2.5vw; }
#about .columns .column { display:flex; flex-direction:column; justify-content:center; }
#about #leader.columns .column:first-of-type { aspect-ratio:5/3;  }
#about #leader.columns .column:first-of-type.animation { transform: translateX(-100px); }
#about #leader.columns .column:first-of-type.scroll-animation { transform: translateX(0); }
#about #leader.columns .column:last-of-type {  }
#about #products.columns { margin:4vw 0; }
#about #products.columns .column:first-of-type {  }
#about #products.columns .column:last-of-type { background-size:contain; background-position:center; background-repeat:no-repeat; }
#about #products.columns .column:last-of-type.animation { transform: translateX(100px); }
#about #products.columns .column:last-of-type.scroll-animation { transform: translateX(0); }

#about #products.columns .column:first-of-type ul { list-style:none; padding:0; }
#about #products.columns .column:first-of-type ul li { display:flex; margin-bottom:.5em; }
#about #products.columns .column:first-of-type ul li::before {
  content: 'select_check_box'; /*display: inline-block;*/ font-family:'Material Symbols Outlined';
  height: 1.5em; min-width: 1.5em; width: 1.5em; color:var(--color-blue);
  /*background-image: url('/_nuxt/images/icon-check.svg'); background-size: 65%; background-position: center left; background-repeat: no-repeat;*/ }

#stats {
  position:relative; margin-bottom:5vw;
  display:flex; flex-direction:column; justify-content:center;
  padding:4vw; min-height:40vw; }
#stats::before {
  content:'';
  position:absolute; z-index:-1; top:0; left:0; width:100%; height:100%;
  background-color:black; background-image:url('img/home-stats-background.jpg'); background-size:cover; background-position:center;
  filter:brightness(.3); }
#stats h2 { font-weight:normal; color:white; text-align:center; }
#stats ul {
  padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:3%;
}
#stats ul.animation { transform: translateY(100px); }
#stats ul.scroll-animation { transform: translateY(0); }
#stats ul li { margin-bottom:3%; padding:2em; text-align:center; color:white; border:.2vw solid white; border-radius:1vw; }
#stats ul li h4 { margin:0; }
#stats p { margin:0; color:white; text-align:center; }

#contact { margin:0 4vw 4vw 4vw; }
#contact input, #contact select, #contact textearea { border: 1px solid #d5d5d5 !important; border-radius: 7px; padding: 12px 19px; background: none; width: 90% !important; }


#secondary #banner { margin:0 0 5vw 0; height:20vw; display:flex; flex-direction:column; justify-content:center; background-size:cover; background-position:center; }
#secondary #banner h1 { text-align:center; text-transform:uppercase; }
#secondary #content { margin:auto; width:80vw; }

@media only screen and (max-width: 767px) {
  :root {
    font-size:3vw;
  }
  .desktop { display:none; }
  .mobile { display:unset; }
  header img { width:40vw; }
  #hero { height:unset; }
  #hero .content { padding:10vw 4vw; }
  #hero .content h1 { width:90%; font-size:1.5em; }
  #hero .content p { width:80%; }
  #about #leader.columns { flex-direction:column; }
  #about #leader.columns .column { width:100%; }
  #about #products.columns { flex-direction:column-reverse; }
  #about #products.columns .column { width:100%; }
  #about #products.columns .column:last-of-type { aspect-ratio:5/3; }
  #contact .columns { flex-direction:column; }
  #contact .columns .column { width:100%; }
  #contact .columns .column::last-of-type {  }
  #stats ul { display:flex; flex-direction:column; }
}