body {
  max-width: 100vw;
  width: 100vw;
  overflow-x: hidden;
  background-color: var(--color-black);
}

.hero-image {
  max-width: 100vw;
  position: relative;
  text-align: center;
}

.hero-image img {
  width: 100%;
  max-width: 100%;
}

.hero-heading {
  position: absolute;
  top: 10px;
  left: 50px;
}

.hero-heading {
  text-align: center;
}

.hero-text {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50px;
  left: 50px;
}

.hero-text .desktop-text {
  margin-top: 40px;
  color: white;
  text-align: left;
  font-size: 70px;
}

.hero-text .desktop-mobile-holder {
  display: none;
}

.hero-text button {
  align-items: center;
  display: grid;
  grid-template-columns: 2fr 1fr;
  margin-top: 70px;
  width: 250px;
  height: 40px;
  background-color: #2b2b2b00;
  color: white;
  border-radius: 10px;
  border: solid var(--color-almost-green);
  font-size: 17px;
  cursor: pointer;
  padding-left: 10px;
}

.hero-text button .arrow {
  font-size: 1.5rem;
}

.hero-text button:hover {
  background-color: var(--color-almost-green);
}

.hero-text button:hover {
  transition: 0.5s ease-in;
}

/* ---Products css--- */

.products {
  width: 100%;
  height: 850px;
  background-color: var(--color-almost-black);
}

.products .products-desktop-view {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 15px;
}

.products-desktop-view .products-desktop-left {
  height: 800px;
  background-color: none;
}

.products-desktop-left h2 {
  padding-top: 60px;
  color: var(--color-white);
  font-size: var(--hero-text-mobile);
}

.products-desktop-left p {
  padding-top: 20px;
  color: var(--color-white);
  font-size: var(--nav-link-size);
}

.products-desktop-left img {
  padding-top: 40px;
}

.products-desktop-view .products-desktop-right {
  height: 800px;
  background-color: none;
}

.products-desktop-right img {
  padding-top: 70px;
}

.products-desktop-right .products-desktop-right-items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 20px;
  padding-top: 60px;
}

.products-desktop-right-items h2 {
  font-size: 10rem;
  background-color: none;
  color: var(--color-almost-green);
}

.products-desktop-right-items-text {
  background-color: none;
  color: var(--color-white);
}

.products-desktop-right-items-text h3 {
  font-size: 2.4rem;
  padding-bottom: 10px;
}

.products .products-mobile-view {
  display: none;
}

/* ---specifications css--- */

.specifications {
  background-color: var(--color-black);
  width: 1440px;
  height: 846px;
}

.specifications .specifications-desktop-view {
  display: grid;
  grid-template-columns: 35rem 1fr;
  height: 830px;
}

.specifications-desktop-view .specifications-desktop-left {
  background-color: none;
  padding-left: 90px;
}

.specifications-desktop-view .specifications-desktop-left h2 {
  color: var(--color-white);
  padding-top: 40px;
  font-size: 3rem;
}

.specifications-desktop-view .specifications-desktop-left p {
  color: var(--color-white);
  padding-top: 20px;
  font-size: 17px;
}

.specifications-desktop-view .specifications-desktop-left h3 {
  color: var(--color-almost-green);
  background-color: none;
  font-size: 15rem;
}

.specifications-desktop-view .specifications-desktop-left button {
  width: 310px;
  height: 40px;
  background-color: #2b2b2b00;
  color: var(--color-white);
  border-radius: 10px;
  border: solid var(--color-almost-green);
  font-size: 17px;
  cursor: pointer;
}

.specifications-desktop-view .specifications-desktop-left button:hover {
  background-color: var(--color-almost-green);
  transition: 0.5s ease-in;
}

.specifications-desktop-view .specifications-desktop-right {
  background-color: none;
}

.specifications-desktop-view .specifications-desktop-right img {
  margin-left: 0;
  width: 880px;
  height: 845px;
}

.specifications .specifications-mobile-view {
  display: none;
}

.order {
  background-color: var(--color-almost-black);
  width: 100%;
  height: 655px;
}

.order .order-text {
  display: none;
}

.order .order-desktop-view {
  display: grid;
  grid-template-columns: 34rem 1fr;
  /* height: 550px; */
}

.order-desktop-view .order-desktop-left {
  background-color: none;
}

.order-desktop-view .order-desktop-left img {
  width: 560px;
  height: 655px;
}

.order-desktop-view .order-desktop-right {
  background-color: none;
  padding-left: 23%;
  padding-top: 110px;
}

.order-desktop-view .order-desktop-right h4 {
  background-color: none;
  width: 580px;
  font-size: 4.2rem;
  color: var(--color-white);
}

.order-desktop-view .order-desktop-right p {
  font-size: 20px;
  color: var(--color-white);
  padding-top: 30px;
  line-height: 1.5;
}

.order-desktop-right .email-and-button {
  width: 520px;
  height: 62px;
  background-color: none;
  margin-top: 70px;
}

.email-and-button input {
  width: 340px;
  height: 40px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 8px;
  background-color: #8f8f8f;
  color: var(--color-white);
}

.email-and-button button {
  width: 160px;
  height: 40px;
  background-color: #2b2b2b00;
  color: white;
  border-radius: 10px;
  border: solid var(--color-almost-green);
  font-size: 17px;
  cursor: pointer;
  margin-left: 10px;
}

.email-and-button button:hover {
  background-color: var(--color-almost-green);
  transition: 0.5s ease-in;
}
.email-and-button input::placeholder {
  color: var(--color-white);
  font-size: 1.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='17' viewBox='0 0 20 17' fill='white' fill-rule='evenodd'%3E%3Cpath d='M18 0.5H2C0.9 0.5 0.00999999 1.4 0.00999999 2.5L0 14.5C0 15.6 0.9 16.5 2 16.5H18C19.1 16.5 20 15.6 20 14.5V2.5C20 1.4 19.1 0.5 18 0.5ZM18 14.5H2V4.5L10 9.5L18 4.5V14.5ZM10 7.5L2 2.5H18L10 7.5Z'%3E%3C/path%3E%3C/svg%3E")
    right / contain no-repeat;
}

/* --- Merch section--- */

.merch-header .merch-image {
  width: 1440px;
}

.merch-header img {
  max-width: 100%;
  max-height: 100%;
}

.merch-header h3 {
  font-size: 2.4rem;
  color: white;
  position: absolute;
  right: 30px;
  letter-spacing: 1px;
  padding: 90px;
}
.merch {
  background-color: var(--color-black);
  width: 100%;
  height: 764px;
  margin: 0 auto;
  display: flex;
}

.merchwrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 30px;
}

.card {
  display: flex;
  background-color: var(--color-almost-black);
  height: 481px;
  min-width: 300px;
  width: 362px;
  border-radius: 10px;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.merch .card img {
  width: 330px;
  height: 330px;
  border-radius: 10px;
  margin-bottom: 20px;
}

/* -----Card Hover---- */

.merch .card .textOverImage {
  position: relative;
  width: 300px;
  height: 330px;
  border-radius: 10px;
  margin-bottom: 20px;
  float: left;
  background-size: 100%;
  background-position: center;
  transition: 0.5s;
  overflow: hidden;
  box-shadow: 0 0 4px #000;
}

.merch .card .textOverImage:hover {
  background-size: 110%;
}

.merch .card .textOverImage:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  background-color: rgba(0, 0, 0, 0.3);
  padding: 0 8px;
  content: attr(data-title);
  transition: 0.5s 0.1s;
  color: var(--color-almost-green);
  font-weight: bold;
  font-size: 1.2em;
}

.merch .card .textOverImage:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  padding: 8px;
  content: attr(data-text);
  transition: 0.5s;
  padding-top: 2em;
  margin-top: 18px;
  transform: translateY(100%);
  opacity: 0;
}

.merch .card .textOverImage:hover:after {
  transform: translateY(0);
  transition: 0.5s 0.1s;
  opacity: 1;
}
.merch .card .textOverImage:hover:before {
  transform: translateY(0);
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.6);
  transition: 0.5s;
}

/* -------END-------- */

.merch button {
  align-items: center;
  display: flex;
  width: 330px;
  height: 40px;
  background-color: var(--color-light-grey);
  color: white;
  border-radius: 10px;
  border: none;
  font-size: 17px;
  cursor: pointer;
  justify-content: center;
}

.merch h3 {
  margin-bottom: 20px;
  font-size: 27px;
  color: var(--color-white);
}

.merch button .arrow {
  font-size: 1.5rem;
}

.merch button:hover {
  background-color: var(--color-grey);
}

.merch button:hover {
  transition: 0.5s ease-in;
}
.merch button::after {
  background-color: var(--color-almost-green);
}

.merch button:hover .arrow {
  color: var(--color-almost-green);
}

@media (max-width: 768px) {
  /* ---Hero Section--- */

  .hero-image {
    max-height: 753px;
  }

  .hero-text button {
    position: relative;
    margin-top: 310px;
    margin-left: 35px;
  }

  .hero-text .desktop-mobile-holder {
    display: unset;
  }

  .hero-text .mobile-text {
    margin-top: 40px;
    text-align: left;
    max-width: 180px;
    font-size: var(--hero-text-mobile);
  }

  .hero-text .desktop-text-holder {
    display: none;
  }

  /* ---products css--- */

  .products {
    width: 414px;
    height: 1250px;
    padding: 0px;
    background-color: var(--color-almost-black);
  }

  .products .products-desktop-view {
    display: none;
  }

  .products .products-mobile-view {
    display: inherit;
  }

  .products .products-text {
    width: 300px;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
    background-color: none;
    color: var(--color-white);
  }

  .products-text h2 {
    font-size: var(--hero-text-mobile);
    padding-top: 30px;
  }

  .products-text p {
    padding-top: 10px;
    font-size: var(--nav-link-size);
    color: var(--color-almost-green);
  }

  .products .range {
    width: 380px;
    height: 390px;
    margin-left: auto;
    margin-right: auto;
    background-color: none;
    color: var(--color-white);
  }

  .range h2 {
    height: 200px;
    text-align: center;
    font-size: var(--large);
    color: var(--color-almost-green);
  }

  .range h3 {
    font-size: var(--product-text-mobile);
  }

  .range h3,
  .range p {
    margin-left: 25px;
    padding-bottom: 15px;
  }

  /* ---specifications css--- */

  .specifications .specifications-mobile-view {
    display: inherit;
  }

  .specifications .specifications-desktop-view {
    display: none;
  }

  .specifications {
    width: 414px;
    height: 1030px;
  }
  .specifications img {
    width: 414px;
    height: 376px;
  }

  .specifications h3 {
    text-align: left;
    width: 360px;
    height: 150px;
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--product-text-mobile);
    background-color: none;
    color: var(--color-white);
  }

  .specifications-text {
    width: 360px;
    height: 400px;
    background-color: none;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-white);
  }

  .specifications-text p {
    padding-top: 20px;
  }

  .specifications-text h4 {
    padding: 0px;
    height: 180px;
    text-align: center;
    font-size: var(--large);
    color: var(--color-almost-green);
    background-color: none;
  }

  .button-holder {
    width: 360px;
    height: 62px;
    background-color: none;
    margin-left: auto;
    margin-right: auto;
    padding-top: 22px;
  }

  .specifications-text button {
    width: 360px;
    height: 40px;
    background-color: #2b2b2b00;
    color: white;
    border-radius: 10px;
    border: solid var(--color-almost-green);
    font-size: 17px;
    cursor: pointer;
    padding-left: 10px;
  }

  /* ---order css--- */

  .order {
    width: 414px;
    height: 500px;
    background-color: var(--color-almost-black);
  }

  .order .order-desktop-view {
    display: none;
  }

  .order .order-text {
    display: inherit;
  }

  .order h4 {
    text-align: left;
    width: 360px;
    height: 180px;
    padding-top: 40px;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--product-text-mobile);
    background-color: none;
    color: var(--color-white);
  }

  .order p {
    text-align: left;
    width: 360px;
    height: 110px;
    padding-top: 40px;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--product-text-mobile);
    background-color: none;
    color: var(--color-white);
    font-size: var(--nav-link-size);
  }

  .order .email-holder {
    width: 360px;
    height: 70px;
    padding-top: 40px;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--product-text-mobile);
    background-color: none;
    color: var(--color-white);
    font-size: var(--nav-link-size);
  }

  .order input {
    width: 360px;
    height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 8px;
    background-color: #8f8f8f;
    color: var(--color-white);
  }

  .email-holder input::placeholder {
    color: var(--color-white);
    font-size: 1.2em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='17' viewBox='0 0 20 17' fill='white' fill-rule='evenodd'%3E%3Cpath d='M18 0.5H2C0.9 0.5 0.00999999 1.4 0.00999999 2.5L0 14.5C0 15.6 0.9 16.5 2 16.5H18C19.1 16.5 20 15.6 20 14.5V2.5C20 1.4 19.1 0.5 18 0.5ZM18 14.5H2V4.5L10 9.5L18 4.5V14.5ZM10 7.5L2 2.5H18L10 7.5Z'%3E%3C/path%3E%3C/svg%3E")
      right / contain no-repeat;
  }

  .button-notify {
    width: 360px;
    height: 62px;
    background-color: none;
    margin-left: auto;
    margin-right: auto;
    padding-top: 22px;
  }

  .button-notify button {
    width: 160px;
    height: 40px;
    background-color: #2b2b2b00;
    color: white;
    border-radius: 10px;
    border: solid var(--color-white);
    font-size: 17px;
    cursor: pointer;
    padding-left: 10px;
  }

  /* ---Merch css--- */

  .merch-header {
    display: none;
  }

  .merch {
    width: 414px;
    height: 1640px;
    background-color: var(--color-black);
    display: flex;
    flex-direction: column;
  }

  .merchwrap {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
  }
  .merchnames {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .merchnames button {
    width: 300px;
    height: 43px;
  }
}