/*

  1. Generic



  2. Header



  3. Main

    3.1 Intro

    3.2 Pricing

    3.3 Career

    3.4 Reference

    3.5 Dealers

    3.6 About

    3.7 Contact



  4. Footer

*/

/* --- 1. Generic --- */

*,
*:before,
*:after {
  box-sizing: inherit;
}

::selection {
  background-color: #191919;

  color: #fff;
}

::-webkit-scrollbar {
  display: none;
}

html {
  scroll-behavior: smooth;
}

body {
  color: #191919;

  background-color: #fff;

  box-sizing: border-box;

  font-family: "Poppins", sans-serif;

  font-size: 16px;

  font-variant-ligatures: common-ligatures;

  font-weight: 400;

  line-height: 1.75;

  margin: 0;

  min-width: 320px;

  overflow-x: hidden;

  scroll-behavior: smooth;

  text-rendering: optimizeLegibility;

  -webkit-text-size-adjust: 100%;
}

body.no-scroll {
  overflow: hidden;
}

.hidden {
  display: none;
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

hr {
  border: 0;

  border-top: 1px solid #e0e0e0;

  margin-bottom: 16px;

  margin-top: 16px;
}

figure {
  margin: 0;
}

img {
  border-style: none;

  max-width: 100%;

  vertical-align: middle;
}

a {
  cursor: pointer;

  text-decoration: none;

  transition: 0.1s;
}

a:hover {
  text-decoration: underline;
}

p {
  margin-bottom: 16px;

  margin-top: 0;
}

p:empty,
p:last-child {
  margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;

  line-height: 1;

  margin-bottom: 16px;

  margin-top: 0;
}

ul {
  list-style: none;

  margin: 0;

  padding: 0;
}

.button {
  align-items: center;

  background-color: #f04f23;

  border-radius: 4px;

  color: #fff;

  cursor: pointer;

  display: inline-flex;

  font-size: 14px;

  justify-content: center;

  margin-bottom: 8px;

  min-width: 84px;

  outline: none;

  line-height: 24px;

  padding: 7px 16px;

  position: relative;

  text-align: center;

  text-decoration: none;

  transition: transform 0.3s, box-shadow 0.1s;

  user-select: none;
}

.button:hover {
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05), 0px 2px 2px rgba(0, 0, 0, 0.05),
    0px 4px 4px rgba(0, 0, 0, 0.05), 0px 8px 8px rgba(0, 0, 0, 0.05),
    0px 16px 16px rgba(0, 0, 0, 0.05);

  color: #fff;

  transform: translateY(-3px);

  text-decoration: none;
}

.button.is-outline {
  background-color: transparent;

  border: 1px solid #f04f23;

  color: #f04f23;

  padding-bottom: 7px;

  padding-top: 7px;
}

table {
  border-radius: 8px;

  border-collapse: collapse;

  overflow: hidden;

  width: 100%;
}

table th {
  background: linear-gradient(135deg, #fc865b, #f04f23);

  border-radius: 8px 8px 0 0;

  color: #fff;

  font-size: 17px;
}

table tr {
  background-color: #fff;

  border-bottom: 1px solid #eee;

  font-size: 15px;

  text-align: left;
}

table th,
table td {
  padding: 8px 16px;
}

/* --- 2. Header --- */

.header {
  background-color: #fff;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

  height: 100%;

  left: -300px;

  overflow: hidden;

  position: fixed;

  top: 0;

  transition: 0.3s;

  width: 250px;

  z-index: 20;
}

.header.is-open {
  left: 0;
}

.header__brand {
  margin-bottom: 56px;

  margin-top: 32px;

  text-align: center;
}

.header__nav a {
  border-bottom: 3px solid transparent;

  color: inherit;

  display: block;

  font-size: 16px;

  margin-bottom: 24px;

  margin-left: 16px;

  letter-spacing: 0.5px;

  line-height: 22px;

  text-transform: uppercase;

  transition: 0.1s;
}

.header__nav a:not(:last-of-type) {
  margin-right: 16px;
}

.header__nav a:hover {
  color: #191919;

  text-decoration: none;
}

.header.is-active .header__nav a:hover {
  color: #f04f23;
}

.mobilMenu {
  background-color: #fff;

  border-radius: 3px;

  display: block;

  cursor: pointer;

  fill: #333;

  height: 45px;

  opacity: 0.75;

  left: 25px;

  position: fixed;

  top: 25px;

  transition: 0.1s;

  width: 45px;

  z-index: 1;
}

.mobilMenu:after {
  background: #000;

  box-shadow: 0 10px 0 #000, 0 20px 0 #000;

  content: "";

  height: 5px;

  left: 15%;

  opacity: 0.75;

  position: absolute;

  top: 10px;

  width: 70%;
}

@media only screen and (min-width: 992px) {
  .header {
    background-color: transparent;

    box-shadow: none;

    color: #fff;

    height: auto;

    left: 0;

    padding-bottom: 24px;

    padding-top: 24px;

    position: fixed;

    right: 0;

    top: 0;

    transition: background-color 0.3s, padding 0.3s;

    z-index: 10;

    width: 100%;
  }

  .header.is-active {
    background-color: #fff;

    border-bottom: 1px solid #eee;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);

    color: #191919;

    padding-bottom: 16px;

    padding-top: 16px;
  }

  .header.is-active .header__brand {
    width: 50px;
  }

  .header__wrap {
    align-items: center;

    display: flex;

    justify-content: space-between;
  }

  .header__brand {
    margin: 0;

    text-align: unset;
  }

  .header__nav a {
    border-bottom: 3px solid transparent;

    color: inherit;

    display: inline-block;

    font-size: 16px;

    margin: 0;

    letter-spacing: 0.2px;

    line-height: 22px;

    text-transform: none;

    transition: 0.1s;
  }

  .mobilMenu {
    display: none;
  }
}

/* --- 3. Main --- */

section {
  min-height: 800px;

  padding-bottom: 120px;

  padding-top: 80px;
}

section h2 {
  font-size: 32px;

  letter-spacing: 2px;

  margin-bottom: 80px;

  position: relative;

  text-align: center;

  z-index: 1;
}

section h2::before {
  color: rgba(240, 79, 35, 0.075);

  content: attr(aria-placeholder);

  font-size: 64px;

  left: 50%;

  letter-spacing: 5px;

  position: absolute;

  transform: translateX(-50%) translateY(-16px);

  text-transform: uppercase;

  z-index: -1;
}

section h3 {
  font-size: 26px;

  letter-spacing: 2px;

  margin-top: 64px;
}

@media only screen and (min-width: 992px) {
  section {
    padding-top: 160px;
  }
}

/* --- 3.1. Intro --- */

.intro {
  min-height: 80vh;

  padding-top: 256px;

  position: relative;

  text-align: center;
}

.intro__bg {
  background: linear-gradient(135deg, #fc865b, #f04f23);

  position: relative;

  line-height: 1.2;

  overflow: hidden;

  position: absolute;

  top: 0;

  height: 90vh;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: -1;
}

.intro__bg :nth-child(1) {
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));

  bottom: 0;

  height: calc(30rem + 20vw);

  left: 0;

  pointer-events: none;

  position: absolute;

  transform: translate(calc(55vw - 560px), 50%) rotate(-45deg);

  width: calc(30rem + 20vw);
}

.intro__bg :nth-child(2) {
  background: linear-gradient(
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.2)
  );

  border-radius: 50%;

  bottom: 0;

  height: calc(22rem + 20vw);

  left: 0;

  position: absolute;

  pointer-events: none;

  transition: 1.5s transform;

  transform: translate(calc(-10vw + 50px), calc(10vw + -60%)) rotate(45deg);

  width: calc(22rem + 20vw);
}

.intro__bg :nth-child(3) {
  background: linear-gradient(
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.2)
  );

  border-radius: 50%;

  bottom: 0;

  height: calc(22rem + 20vw);

  left: 0;

  position: absolute;

  pointer-events: none;

  transition: 1.5s transform;

  transform: translate(calc(50vw + 250px), 35%) rotate(-135deg);

  width: calc(22rem + 20vw);
}

.intro__title {
  color: #fff;

  font-size: 64px;

  letter-spacing: 2px;

  margin-bottom: 32px;

  text-shadow: 0px 2px 2px #000;

  z-index: 10;
}

@media only screen and (min-width: 992px) {
  .intro__title {
    font-size: 104px;
  }
}

.intro__desc {
  color: #fff;

  font-size: 20px;

  margin: auto;

  width: 70%;

  z-index: 10;
}

.intro .button {
  background-color: transparent;

  border: 2px solid #fff;

  border-radius: 50px;

  margin-top: 32px;

  min-width: 200px;

  padding-bottom: 16px;

  padding-top: 16px;

  text-transform: uppercase;

  transition: transform 0.3s, box-shadow 0.1s, background-color 0.1s, color 0.1s;
}

.intro .button:hover {
  background-color: #fff;

  border-color: transparent;

  color: #f04f23;
}

/* --- 3.2. Pricing --- */

.pricings {
  margin-top: 80px;
}

.pricing__card {
  background-color: #fafafa;

  border-radius: 8px;

  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);

  cursor: default;

  margin-bottom: 16px;

  margin-top: 16px;

  position: relative;

  text-align: center;

  transition: 0.2s;
}

.pricing__card:hover {
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.15);

  transform: scale(1.05);
}

.pricing__card.theme-2,
.pricing__card.theme-2 table {
  border-radius: 0;
}

.pricing__card.theme-2 table th {
  background-image: none;

  border-radius: 0;

  border-top: 2px solid #f04f23;

  color: #f04f23;
}

.pricing__detail {
  margin-top: 80px;
}

.pricing__detail h6 {
  color: #f04f23;

  font-size: 24px;
}

.pricing__card.theme-3 .pricing__title {
  background: linear-gradient(135deg, #fc865b, #f04f23);

  border-radius: 4px;

  color: #fff;

  left: 50%;

  padding: 4px;

  position: absolute;

  transform: translateX(-50%);

  width: 70%;
}

/* --- 3.3. Career --- */

.careers {
  margin-top: 80px;
}

.careers__jobs li > a {
  display: inline-block;

  margin-bottom: 16px;
}

.overlay {
  background-color: rgba(0, 0, 0, 0.2);

  height: 100%;

  left: 0;

  position: fixed;

  top: 0;

  width: 100%;

  z-index: 10;
}

.modal {
  animation: modal 0.3s;

  background-color: #fff;

  border: 0;

  border-radius: 4px;

  display: none;

  left: calc(-50vw + 50%);

  margin: auto;

  max-height: 70vh;

  max-width: 80%;

  overflow: auto;

  padding: 48px;

  position: fixed;

  right: calc(-50vw + 50%);

  top: 40%;

  transform: translateY(-50%);

  width: 800px;

  z-index: 11;
}

.modal.is-open,
.modal[open] {
  display: block;
}

.modal h5 {
  font-size: 18px;
}

.modal ul {
  list-style-type: disc;

  margin-left: 32px;
}

.modal li {
  margin-bottom: 16px;
}

.modal footer {
  text-align: right;
}

.modal .button {
  margin: 32px 0 0 16px;
}

.modal__content article {
  display: inline-block;

  margin-top: 24px;
}

@keyframes modal {
  0% {
    transform: translateY(-50%) scale(0.7);
  }

  45% {
    transform: translateY(-50%) scale(1.05);
  }

  80% {
    transform: translateY(-50%) scale(0.95);
  }

  100% {
    transform: translateY(-50%) scale(1);
  }
}

/* --- 3.4. Reference --- */

.references {
  margin-top: 160px;
}

.reference {
  cursor: pointer;

  padding-bottom: 16px;

  padding-top: 16px;

  text-align: center;

  transition: 0.2s;
}

.reference:hover {
  transform: scale(1.05);
}

/* --- 3.5. Dealers --- */

.dealer {
  border-radius: 4px;

  margin-top: 40px;

  overflow: hidden;

  padding: 16px;

  position: relative;

  text-align: center;

  transition: 0.3s;
}

.dealer h6 {
  font-size: 18px;
}

.dealer img {
  margin-bottom: 32px;
}

/* --- 3.6. About --- */

.accordion {
  background-color: #fff;

  border: 1px solid #eee;

  border-bottom-width: 0;

  border-radius: 4px;
}

.accordion h6 {
  font-size: 16px;

  line-height: 1.5;

  margin-top: 16px;
}

.accordion ul ul {
  margin-left: 16px;
}

.accordion > li {
  border-bottom: 1px solid #eee;
}

.accordion li > a {
  color: #191919;

  display: block;

  padding: 12px 24px;

  text-decoration: none;

  transition: 0.2s;
}

.accordion li > a:hover {
  background-color: rgba(0, 0, 0, 0.025);
}

.accordion li > a.is-active {
  background-color: rgba(0, 0, 0, 0.025);

  color: #f04f23;
}

.accordion__detail {
  font-size: 15px;

  padding: 16px 24px;
}

/* --- 3.7. Contact --- */

.contact {
  padding-bottom: 0;
}

.contact__content {
  margin-bottom: 80px;

  margin-top: 80px;
}
.contact__content__p {
  display: flex;
}
.contact__content a {
  color: #191919;
}

.contact__content a:hover {
  color: #f04f23;
}

.contact__content strong {
  display: inline-block;
  width: 250px;
}

.contact__social {
  display: flex;

  margin-bottom: 64px;

  margin-top: 16px;
}

.contact__map {
  position: relative;

  top: 8px;
}

/* --- 4. Footer --- */

.footer {
  background-color: #1f2023;

  padding-bottom: 24px;

  padding-top: 80px;

  z-index: 10;
}

.footer__brand {
  width: 160px;
}

.footer__social {
  margin-bottom: 64px;

  margin-top: 16px;
}

.footer__social a {
  margin-right: 16px;
}

footer h3 {
  color: #f04f23;

  margin-bottom: 24px;

  margin-top: 0;
}

footer ul {
  margin-bottom: 40px;
}

footer a {
  color: #fff;

  display: inline-block;

  font-size: 14px;

  margin-bottom: 4px;
}

footer a:hover {
  color: #f04f23;

  text-decoration: none;
}

footer address {
  color: #808291;

  font-size: 14px;

  font-style: normal;

  margin-top: 16px;
}

.section__bg > img {
  position: absolute;

  z-index: -1;
}

.section__bg img:nth-child(1) {
  top: 0;

  left: 0;
}

.section__bg img:nth-child(2) {
  right: 0;

  top: 0;
}

.iso-text {
  margin-top: 15px;
  text-align: center;
  font-size: 18px;
}

.footer-company-info {
  color: white;
  display: flex;
  justify-content: center;
}

.footer-company-iss {
  color: white;
  display: flex;
  justify-content: center;
  font-size: 48px;
  text-align: center;
  padding-top: 30px;
}