@font-face {
  font-family: 'google-sans-regular';
  src: url(./font-productsans/Product\ Sans\ Regular.ttf);
}
@font-face {
  font-family: 'google-sans-bold';
  src: url(./font-productsans/Product\ Sans\ Bold.ttf);
}
*
{
  margin:0; padding: 0; font-family: 'google-sans-regular', sans-serif; box-sizing: border-box;
}
body
{
  background-color: #000; color: #ffffff; 
}
/*  */
.header
{
  width:100%; height: 100vh;
  background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(net-images/header-image.png);
  background-size: cover; background-position: center; padding: 10px 8%; position: relative;
}
nav
{
  display: flex; align-items: center; justify-content: space-between; padding: 10px 0;
}
.logo
{
  width: 150px; cursor: pointer;
}
nav button
{
   border: 0; outline: 0; background: #db0001; color: #ffffff; padding: 7px 20px; font-size: 12px; border-radius: 3px; margin-left: 10px; cursor: pointer;
}
.language-button
{
  display:inline-flex; align-items: center; background: transparent; border: 1px solid #ffffff; padding: 7px 10px;
}
.language-button img
{
  width: 10px;margin-left: 10px; 
}
.header-content
{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; margin-top: 100px; 
}
.header-content h1
{
  font-size: 60px; line-height: 70px; font-weight: 600; max-width: 650px;
}
.header-content h3
{
  font-weight: 400; margin-bottom: 20px; 
}
.email-data
{
  display: flex; align-items: center; background: #ffffff; border-radius: 4px; margin-top: 30px; overflow: hidden;
}
.email-data input
{
  flex: 1; border: 0; outline: 0; margin-left: 20px;
}
.email-data button
{
  background: #db0001; border: 0; outline: 0; color: #ffffff; font-size: 16px; cursor: pointer; padding: 15px 30px;
}
/*  */
.features
{
  padding: 50px 12%; font-size: 22px; 
}
features h2
{
  font-size: 50px; font-weight: 600; margin-bottom: 20px;
}
.row
{
  display: flex; width: 100%; align-items: center; flex-wrap: wrap; padding: 50px 0;
}
.text-column
{
  flex-basis: 50%; margin-bottom: 20px;
}
.image-column
{
  flex-basis: 50%; margin-bottom: 20px;
}
.image-column img
{
  display: block; width: 90%; margin: auto;
}
/*  */
.faq
{
  padding: 10px 12%; text-align: center; font-size: 18px;
}
.faq h2
{
  font-size: 40px; font-weight: 500; 
}
.accordion
{
  margin: 60px auto; width:100%; max-width: 750px;
}
.accordion li
{
  list-style: none; width: 100%; padding: 5px;
}
.accordion li label
{
  display: flex; align-items: center; padding: 20px; font-size: 18px; font-weight: 500; background-color: #303030; margin-bottom: 2px; cursor: pointer; position: relative;
}
label::after
{
  content:'+'; font-size: 34px; position: absolute; right: 20px; transition: transform 0.5s;
}
input[type="radio"]
{
  display: none;
}
.accordion .faqcontent
{
  background: #303030; text-align: left; padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.5s, padding 0.5s;
}
.accordion input[type="radio"]:checked + label + .faqcontent
{
max-height: 600px; padding: 30px 20px;
} 
.accordion input[type="radio"]:checked + label::after
{
  transform: rotate(135deg);
}
/*  */
.faq .email-data
{
  max-width: 600px; margin: 20px auto; text-align: center;
}
.faq small
{
  font-size: 13px;
}
/*  */
.footer
{
  padding: 50px 15% 10px; border-top: 6px solid #333333; color:#777777 ; margin-top: 50px;
}
.footer h2
{
  font-size: 18px; font-weight: 400px; margin-bottom: 30px;
}
.footer .col
{
  flex-basis: 21%; flex-grow: 1; margin: 20px;
}
.footer .col a
{
  display: block; text-decoration: none; color: #777777; font-size: 14px; margin-bottom: 10px;
}
.footer .row
{
  align-items: flex-start; padding: 10px 0;
}
.footer .language-button
{
  color: #ffffff; padding: 10px 20px; border-radius: 3px; margin-bottom: 30px;
}
.copyright-text
{
  font-size: 14px;
}