@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");

:root {
  --main-green: #009d4c;
  --h3-font-size: 24px;
}

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

* {
  margin: 0;
  padding: 0;
  font: inherit;
  color: #ffffff;
}

html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-height: 100vh;
  background-color: #000000;
}

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

section {
  width: 100%;
}

input:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--main-green);
  transition: box-shadow 0.3s ease;
}

#slider-1,
#slider-2 {
  width: 100%;
  height: 100%;
  position: absolute;
}

#slider-1 div,
#slider-2 div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#slider-1 img,
#slider-2 img {
  transition: opacity 1.5s;
  opacity: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#slider-1 img.fadeIn,
#slider-2 img.fadeIn {
  opacity: 1;
}

/* home section */

#home {
  position: relative;
  height: 100vh;
}

#home header {
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 77px 259px 0 259px;
  z-index: 3;
  transition: padding 0.25s linear;
}

#home header .logo {
  width: 177px;
  transition: width 0.25s linear;
}

#home header #menu {
  position: absolute;
  right: 0;
  width: 42px;
  margin-right: 38px;
  transition: width 0.25s linear;
  cursor: pointer;
}

#nav a,
#nav-mobile a {
  font: 400 18px "Montserrat", sans-serif;
}

#nav {
  margin-left: 228px;
  flex-grow: 1;
}

#nav ul {
  display: flex;
  justify-content: space-between;
}

#nav-mobile {
  display: none;
}

#menu,
#close {
  display: none;
}

.sticking {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 40%,
    rgba(0, 0, 0, 0.8) 60%,
    rgba(0, 0, 0, 1) 100%
  );
  padding: 16px 259px 36px 259px !important;
}

.sticking .logo {
  width: 72px !important;
}

.description-wrapper {
  position: absolute;
  bottom: 195px;
  left: 191px;
  z-index: 2;
}

.description-wrapper h2 {
  color: var(--main-green);
  font: 700 120px/160px "Montserrat", sans-serif;
}

.description-wrapper h3 {
  font: 400 var(--h3-font-size) / 40px "Montserrat";
  letter-spacing: calc(var(--h3-font-size) / 2);
}

.fade {
  position: absolute;
  width: 100%;
  height: 20vh;
  z-index: 0;
}

.fade-top {
  top: 0;
  background: linear-gradient(0deg, transparent 0%, black 60%, black 100%);
}

.fade-bottom {
  bottom: 0;
  background: linear-gradient(0deg, black 0%, black 60%, transparent 100%);
}
/* titles */

.title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 77px;
}

.title-wrapper h3 {
  color: var(--main-green);
  font: 300 var(--h3-font-size) "Montserrat", sans-serif;
  letter-spacing: calc(var(--h3-font-size) / 2);
}
/* lines */
.line {
  border-top: 1px solid;
  margin-top: 22px;
}

.line-1 {
  width: 100px;
  border-color: #ffffff;
}

.line-2 {
  width: 40px;
  border-color: rgba(255, 255, 255, 0.6);
}

.line-3 {
  width: 10px;
  border-color: rgba(255, 255, 255, 0.3);
}

/* offer section */

#offer {
  min-height: 95vh;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#wheels {
  display: grid;
  grid-template-columns: repeat(5, 20% [col-start]);

  width: 100%;
}

.wheel {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 600px;
}

.ellipse-1 {
  animation-delay: 0s;
  animation-name: ellipse-reverse;
  animation-duration: 1s;
  transform-origin: center;
  transform-box: fill-box;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
}

.hovered .ellipse-1 {
  animation: ellipse 1s;
  animation-fill-mode: forwards;
  animation-delay: 0s !important;
}

.circle {
  animation-delay: 0s;
  animation: circle-reverse 1s ease;
  transform-origin: center;
  transform-box: fill-box;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
}

.hovered .circle {
  animation: circle 1s;
  animation-fill-mode: forwards;
  animation-delay: 0s !important;
}
.wheel img {
  position: absolute;
  transform: translateY(100%);
}

.wheel p {
  width: 70%;
  text-align: center;
  font: 300 16px "Montserrat", sans-serif;
}
/* product banner */

#product-banner {
  position: relative;
  min-height: 110vh;
}

#product-banner .description-wrapper {
  top: 59px;
  left: 120px;
}

#product-banner .description-wrapper h3 {
  color: var(--main-green);
}

#product-banner p {
  position: absolute;
  right: 81px;
  bottom: 16px;
  width: 581px;
  font: 400 16px/36px "Montserrat", sans-serif;
}

#product-banner .fade {
  height: 10vh;
}

/* order */
#order {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 130vh;
  padding-bottom: 64px;
}

#order .img-holder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
}

#order .img-holder img {
  width: 80%;
  object-fit: cover;
}

#order .title-wrapper {
  width: 100%;
}

#order .img-holder,
#order form h2 {
  margin-top: 93px;
}

#order form {
  display: flex;
  flex-wrap: wrap;
  width: 530px;
}

#order form h2 {
  color: var(--main-green);
  font: 700 100px/110px "Montserrat", sans-serif;
}

#order form p {
  font: 400 42px "Montserrat", sans-serif;
}

#order form label {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 30px;
  font: 400 14px "Montserrat", sans-serif;
}

#order form input,
#order form textarea {
  width: 100%;
  border: 0.5px solid #6b6b6b;
  margin-top: 7px;
  background: #0d0d0d;
  font: 400 18px "Montserrat", sans-serif;
}

#order form input {
  height: 60px;
  padding: 0 22px;
}

#order form textarea {
  height: 260px;
  padding: 17px 22px;
  resize: none;
}

#order form button {
  margin-left: auto;
  margin-top: 30px;
  border: 1px solid #ffffff;
  border-radius: 30px;
  padding: 12px 50px 12px 50px;
  background: #000000;
  font: 300 24px/36px "Montserrat", sans-serif;
  cursor: pointer;
  transition: color 0.5s;
}

#status-message {
  width: 100%;
  text-align: right;
  padding-top: 42px;
  color: #666666;
  font: 400 18px "Montserrat", sans-serif !important;
}

#order form button:hover {
  color: var(--main-green);
}

#emailValidationMessage,
#phoneValidationMessage,
#textFieldValidationMessage {
  text-align: right;
  color: #f1a4a4;
}

/* about */

#about {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  min-height: 110vh;
  background: url(../images/about-background.png);
  background-size: cover;
  background-position: center;
}

#about .title-wrapper {
  position: absolute;
  top: 52px;
  width: 100%;
}

.about-data p {
  position: relative;
  font: 700 32px "Montserrat", sans-serif;
  z-index: 2;
}

.about-data p span {
  font: 700 100px/110px "Montserrat", sans-serif;
}

.about-data-1 p span {
  color: var(--main-green);
}

.about-data-2 p span {
  color: #ffcc7e;
}

.about-data-3 p span {
  color: #e2a4ff;
}

.about-data-4 p span {
  color: #f1a4a4;
}

/* assortment */

#assortment {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 85vh;
  margin-bottom: 64px;
}

#assortment .img-holder {
  width: 65%;
  position: relative;
}

#assortment .img-holder img {
  width: 100%;
  height: auto;
}

#assortment .rectangle {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 40%;
  transform: translateY(80%);
  background: #068c0c;
  mix-blend-mode: multiply;
  z-index: 1;
}

#assortment .title-wrapper {
  width: 45%;
}

#assortment .title-wrapper p {
  width: 70%;
  font: 300 16px/30px "Montserrat", sans-serif;
}

/* our-mission */
#our-mission {
  display: flex;
  justify-content: space-around;
  position: relative;
  min-height: 120vh;
}

#our-mission .title-wrapper {
  width: 478px;
}

#our-mission .title-wrapper p {
  width: 478px;
  margin-top: 54px;
  font: 300 16px/32px "Montserrat", sans-serif;
}

#our-mission .img-holder {
  position: absolute;
  z-index: -1;
  width: auto;
  margin-right: 100px;
}

#our-mission .img-holder img {
  min-height: 100vh;
  object-position: center;
}

#our-mission .rectangle {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 40%;
  transform: translateY(80%);
  background: #068c0c;
  mix-blend-mode: multiply;
  z-index: 1;
}

#our-mission .fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  z-index: 1;
}

#our-mission .features {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  min-height: 120vh;
}

#our-mission .feature {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 250px;
}

#our-mission .feature p {
  width: 100%;
  margin-top: 25px;
  text-align: center;
  font: 400 18px/32px "Montserrat", sans-serif;
}

/* footer */

footer {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 26vh;
  margin-top: 64px;
  background-size: cover;
  background-position: center;
}

footer > * {
  width: 200px;
}

footer img {
  width: 165px;
}

footer p {
  font: 400 14px/20px "Source Sans Pro", sans-serif;
  line-height: 22px;
}

footer p:nth-of-type(2),
footer p:nth-of-type(2) a {
  color: var(--main-green);
}

footer p b {
  font-weight: 700;
}

#footer-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#footer-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}

.big-break {
  margin-bottom: 11px;
}

@keyframes ellipse {
  from {
    d: path(
      "M90.5 20.002C99.7582 20.0019 108.926 21.8255 117.479 25.3684C126.033 28.9114 133.804 34.1044 140.351 40.6509C146.898 47.1975 152.091 54.9693 155.634 63.5228C159.176 72.0762 161 81.2438 161 90.5019C161 99.7601 159.176 108.928 155.633 117.481C152.091 126.035 146.898 133.806 140.351 140.353C133.804 146.9 126.033 152.093 117.479 155.635C108.926 159.178 99.7582 161.002 90.5 161.002L90.5 90.502L90.5 20.002Z"
    );

    fill-opacity: 1;
  }
  to {
    d: path(
      "M90.5 1.52588e-05C102.385 1.52588e-05 114.153 2.34087 125.133 6.88892C136.113 11.437 146.089 18.1031 154.493 26.5069C162.897 34.9106 169.563 44.8872 174.111 55.8672C178.659 66.8471 181 78.6154 181 90.5C181 102.385 178.659 114.153 174.111 125.133C169.563 136.113 162.897 146.089 154.493 154.493C146.089 162.897 136.113 169.563 125.133 174.111C114.153 178.659 102.385 181 90.5 181L90.5 90.5L90.5 1.52588e-05Z"
    );

    fill-opacity: 0.15;
  }
}

@keyframes ellipse-reverse {
  from {
    d: path(
      "M90.5 1.52588e-05C102.385 1.52588e-05 114.153 2.34087 125.133 6.88892C136.113 11.437 146.089 18.1031 154.493 26.5069C162.897 34.9106 169.563 44.8872 174.111 55.8672C178.659 66.8471 181 78.6154 181 90.5C181 102.385 178.659 114.153 174.111 125.133C169.563 136.113 162.897 146.089 154.493 154.493C146.089 162.897 136.113 169.563 125.133 174.111C114.153 178.659 102.385 181 90.5 181L90.5 90.5L90.5 1.52588e-05Z"
    );

    fill-opacity: 0.15;
  }
  to {
    d: path(
      "M90.5 20.002C99.7582 20.0019 108.926 21.8255 117.479 25.3684C126.033 28.9114 133.804 34.1044 140.351 40.6509C146.898 47.1975 152.091 54.9693 155.634 63.5228C159.176 72.0762 161 81.2438 161 90.5019C161 99.7601 159.176 108.928 155.633 117.481C152.091 126.035 146.898 133.806 140.351 140.353C133.804 146.9 126.033 152.093 117.479 155.635C108.926 159.178 99.7582 161.002 90.5 161.002L90.5 90.502L90.5 20.002Z"
    );

    fill-opacity: 1;
  }
}

@keyframes circle {
  from {
    r: 60.5px;
  }
  to {
    r: 75px;
  }
}

@keyframes circle-reverse {
  from {
    r: 75px;
  }
  to {
    r: 60.5px;
  }
}

@media screen and (max-width: 1920px) {
  #home header {
    width: 100%;
    padding: 36px 259px 0 259px;
    z-index: 3;
  }

  .description-wrapper {
    position: absolute;
    bottom: 84px;
  }

  #product-banner {
    height: 100vh;
  }
}

@media screen and (max-width: 1367px) {
  #nav {
    margin-left: 64px;
    flex-grow: 1;
  }
}

@media screen and (max-width: 1367px) {
  #nav {
    margin-left: 64px;
    flex-grow: 1;
  }

  #home header .logo {
    width: 148px;
  }
}

@media screen and (max-width: 1367px) {
  #nav {
    margin-left: 64px;
    flex-grow: 1;
  }

  #order form {
    width: 40%;
    margin-left: 64px;
  }
}

@media screen and (max-width: 1200px) {
  #home header {
    padding: 48px 64px 0 64px;
  }

  #home header .logo {
    width: 148px;
  }

  #nav {
    margin-left: 64px;
  }

  #nav ul a {
    font: 400 22px "Montserrat", sans-serif;
  }

  .sticking {
    padding: 32px 64px !important;
  }

  .sticking .logo {
    width: 104px !important;
  }

  .description-wrapper {
    position: absolute;
    bottom: 64px;
    left: 64px;
  }

  #order form {
    margin-top: 64px;
  }
}

@media screen and (max-width: 992px) {
  html {
    scroll-snap-type: none;
    scroll-padding-top: 42px;
  }

  #slider-1 img {
    object-position: 70% 50%;
  }

  #home header {
    justify-content: center;
    padding-top: 22px;
  }

  #nav {
    display: none;
  }

  .sticking {
    padding: 22px 64px !important;
  }

  #nav-mobile {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding-top: 64px;
    background-color: rgba(0, 0, 0, 0.95);
  }

  #home header ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }

  #home header li {
    width: 100%;
    height: 84px;
  }

  #home header a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  #home header .title-wrapper h3 {
    font-size: 32px;
  }

  #menu,
  #close {
    display: inline-block;
    -webkit-tap-highlight-color: transparent;
  }

  #close {
    position: absolute;
    top: 32px;
    right: 32px;
    width: 24px;
    cursor: pointer;
  }

  .line {
    border-top: 3px solid;
    margin-top: 28px;
  }

  .line-1 {
    width: 194px;
  }

  .line-2 {
    width: 84px;
  }

  .line-3 {
    width: 24px;
  }

  #wheels {
    display: grid;
    grid-template-columns: repeat(2, 50% [col-start]);

    width: 100%;
  }

  .wheel {
    margin: 44px 16px;
  }

  .wheel p {
    margin-top: 32px;
  }

  .wheel img {
    transform: translateY(100%) scale(0.8);
  }

  .hovered .ellipse-1,
  .hovered .circle {
    animation: none !important;
  }

  .ellipse-1 {
    animation: ellipse 2s ease-out 2s, ellipse-reverse 2s ease-out 4s;
  }
  .circle {
    animation: circle 2s ease-out 2s, circle-reverse 2s ease-out 4s;
  }

  #product-banner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: 100vh;
  }

  #product-banner .description-wrapper {
    position: static;
    width: 80%;
    left: 0;
  }

  #product-banner .description-wrapper h2 {
    width: 100%;
    text-align: left;
    font-size: 64px;
    line-height: 84px;
  }

  #product-banner .description-wrapper h3 {
    width: 100%;
    text-align: left;
  }

  #product-banner p {
    width: 80%;
    font-size: 18px;
  }

  #order img {
    width: 50%;
  }

  #order form {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin-left: 0;
  }

  #order form button {
    width: auto;
    padding: 12px 0;
    border: none;
  }

  #order .img-holder {
    width: 100%;
  }

  #about {
    display: flex;
    align-items: center;
    min-height: 90vh;
    padding: 16px 0 256px 0;
  }

  #about .title-wrapper {
    position: static;
    z-index: 2;
  }

  .about-data {
    width: 100%;
    text-align: center;
    margin: 28px 0;
  }

  #assortment {
    justify-content: center;
    flex-wrap: wrap;
    min-height: 80vh;
  }

  #assortment .img-holder {
    width: 100%;
  }

  #assortment .title-wrapper {
    width: 90%;
  }

  #assortment .title-wrapper p {
    width: 100%;
    margin-top: 64px;
  }

  #our-mission {
    justify-content: center;
    flex-wrap: wrap;
  }

  #our-mission .title-wrapper {
    width: 90%;
  }

  #our-mission .title-wrapper p {
    width: 100%;
    margin-top: 64px;
  }

  #our-mission .img-holder {
    position: relative;
    width: 100%;
    margin: 128px 0 32px 0;
  }

  #our-mission .img-holder img {
    min-width: none;
    width: 100%;
    object-fit: cover;
  }

  #our-mission .features {
    flex-wrap: wrap;
    min-height: 70vh;
  }

  #our-mission .feature {
    width: 80%;
    margin: 16px 0;
  }

  footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    min-height: 80vh;
    margin-top: 128px;
    padding: 64px 0;
  }

  footer > * {
    width: 100%;
    text-align: center;
  }
}

@media screen and (max-width: 992px) and (orientation: landscape) {
  .sticking .logo {
    width: 118px !important;
  }

  .description-wrapper {
    bottom: 32px;
    left: 16px;
  }

  .description-wrapper h2 {
    font-size: 48px;
    line-height: 56px;
  }

  .description-wrapper h3 {
    font-size: 18px;
    letter-spacing: 2px;
  }

  #home header li {
    width: 50%;
    height: 84px;
  }
}

@media screen and (max-width: 768px) {
  #home header .logo {
    width: 118px;
  }

  .sticking .logo {
    width: 118px !important;
  }

  .description-wrapper {
    bottom: 32px;
    left: 16px;
  }

  .description-wrapper h2 {
    font-size: 48px;
    line-height: 56px;
  }

  .description-wrapper h3 {
    font-size: 18px;
    letter-spacing: 2px;
  }

  .title-wrapper h3 {
    font-size: 22px;
  }

  #product-banner .description-wrapper {
    position: static;
    width: 90%;
  }

  #product-banner .description-wrapper h2 {
    width: 100%;
    font-size: 48px;
    line-height: 84px;
  }

  #product-banner .description-wrapper h3 {
    width: 100%;
    font-size: 22px;
  }

  #product-banner p {
    display: flex;
    align-items: end;
    position: static;
    text-align: left;
    width: 90%;
    z-index: 2;
  }

  #product-banner .fade {
    height: 50vh;
  }

  #order {
    padding-bottom: 48px;
  }

  #order form h2 {
    font-size: 36px;
  }

  #order form p {
    font-size: 26px;
  }

  .feature img {
    margin-top: 36px;
  }
}