:root {
  --primary-colour: #020f64;
  --text-colour-dark: #111;
  --text-colour-light: #fff;
  --bg-colour-blue: #013b60;
  --colour-grey: #d4d4d4;
  --btn-colour: #9ca3af;
  --btn-hover: #6b7280;
  --colour-social-grey: #353535;
}

.header-home {
  display: flex;
  /* justify-content: space-between; */
  justify-content: space-around;
  align-items: center;

  background-color: var(--text-colour-light);

  /* Because we want header to be sticky later */
  height: 8rem;
  position: relative;

  z-index: 9999;
}

.header-fix {
  display: flex;
  /* justify-content: space-between; */
  justify-content: space-around;
  align-items: center;

  position: sticky;
  top: 0;
  z-index: 2000;
  /* width: 100%; */
  height: 8rem;
  /* padding-top: 0;
  padding-bottom: 0; */
  background-color: var(--text-colour-light);

  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.2);
}

.logo {
  /* height: 5.6rem; */
  height: 7.2rem;
  /* padding-left: 4.8rem; */
}

.logo-container {
  /* width: 20rem; */
}

.main-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  /* gap: 10.8rem; */
  gap: 12rem;
  /* padding-right: 6rem; */
}

.main-nav-link:link,
.main-nav-link:visited,
.symbol {
  display: inline-block;
  text-decoration: none;
  color: var(--text-colour-dark);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.5px;
  /* letter-spacing: 0.5px; */
  /* text-shadow: 0.5px 0.5px 2px rgba(00, 00, 00, 0.8); */

  transition: all 0.3s;
}

.main-nav-link:hover,
.main-nav-link:active {
  text-decoration: underline;
  color: var(--primary-colour);
}

.current-page {
  display: inline-block;

  text-decoration: underline;
  color: var(--primary-colour);
  font-weight: 500;
  font-size: 1.6rem;
  /* letter-spacing: 0.5px; */
  /* text-shadow: 0.5px 0.5px 2px rgba(00, 00, 00, 0.8); */

  transition: all 0.3s;
}

/* MOBILE */
.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;

  display: none;
}

.icon-mobile-nav {
  /* height: 4.8rem;
  width: 4.8rem; */
  height: 5.8rem;
  width: 5.8rem;
  color: var(--text-colour-dark);
  /* color: var(--text-colour-light); */
}

.mobile-white {
  color: var(--text-colour-light);
}
.icon-mobile-nav[name="close-outline"] {
  display: none;
}

.language {
  /* padding-right: 3rem; */
}

/* STICKY NAVIGATION */
.sticky .header-home {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 8rem;
  padding-top: 0;
  padding-bottom: 0;
  /* background-color: #262626; */
  background-color: var(--text-colour-light);

  z-index: 9999;
  /* box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03); */
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.2);
}

.sticky .main-slider {
  margin-top: 8rem;
}

.main-slider {
  height: calc(100vh - 8rem);
  width: 100vw;
  /* width: 100%; */
  /* position: absolute;
  top: 0; */
  overflow: hidden;
}
.slide {
  height: 100%;
  width: 100%;

  /* position: absolute;
  top: 0; */
  display: none;
  /* z-index: -1; */

  position: absolute;
  top: 0;
  overflow: hidden;
}

.slide__active {
  display: block;
  animation: imgFadeInSlide 2s;
}

.slide__active img {
  /* animation: zoomOut 9s; */
  animation: zoomOut 6s;
}

.slide__text {
  color: var(--text-colour-light);
  /* font-size: 8rem; */
  font-weight: 600;
  letter-spacing: 3px;
  background-color: hsla(0, 0%, 7%, 0.598);
  padding: 2rem 5rem;

  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  z-index: 10;
  white-space: nowrap;
}

.slide__text-primary {
  text-align: center;
  /* font-size: 6.4rem; */
  font-size: 4.32rem;
  font-weight: 500;
  line-height: 1.3;
}

.line-break-option {
  display: none;
}

.slide__img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: relative;
  transition: transform 3s;
}

.slide__img__active {
  transform: scale(1.4);
}

/* Animation */
@keyframes imgFadeInSlide {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1.05);
  }
}

/* features section */

.features {
  background-color: var(--bg-colour-blue);
  padding-bottom: 6.4rem;
}

.primary-heading {
  color: var(--text-colour-light);
  padding-top: 8rem;
  /* font-size: 7.2rem; */
  font-size: 4.32rem;
  font-weight: 400;
  letter-spacing: 2px;
  text-align: center;
  margin-top: -2px;
  text-transform: uppercase;
}

.eng-text {
  font-family: "Inter", sans-serif;
}

.secondary-heading {
  color: var(--text-colour-light);
  padding-top: 3rem;
  /* font-size: 4rem; */
  font-size: 2.8rem;
  font-weight: 300;
  /* letter-spacing: 2px; */
  text-align: center;
  text-transform: capitalize;
}

.features-highlights {
  display: flex;
  flex-direction: column;

  align-items: center;
  gap: 9.6rem;
  padding-top: 15rem;
  padding-bottom: 12rem;
}

.features-item {
  color: var(--colour-grey);
  /* font-size: 6.4rem; */
  font-size: 4.32rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.item-active {
  /* color: #2dd4bf; */
  color: #58bc5d;
}

.feature-details {
  width: 90%;
  /* width: 100%; */
  margin: 0rem auto;
  margin-top: 8rem;
  padding-bottom: 8rem;
  /* padding: 8rem auto; */
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 12rem;
  justify-items: center;
  align-items: center;
}

.feature-details picture {
  z-index: 1000;
  width: 100%;
  margin: 0 auto;
  display: block;
  text-align: center;
}

.features-img {
  width: 90%;
  height: 35rem;
  object-fit: cover;
  z-index: 100;
  /* animation: moveFromLeft 1.5s ease-out; */
}

.move-left {
  animation: moveFromLeft 1.5s ease-out;
}

.feature-box {
  position: relative;
  width: 80%;

  background-color: var(--bg-colour-blue);

  padding: 4rem 6rem;
  /* transform: translateX(-20%); */
  /* border: 2px solid black; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
  /* animation: moveFromRight 1.5s ease-out; */
}

.move-right {
  animation: moveFromRight 1.5s ease-out;
}

.feature-text {
  font-size: 2rem;
  /* font-weight: 300; */

  letter-spacing: 0.5px;

  color: var(--text-colour-light);
  z-index: 2000;

  display: flex;
  justify-content: center;
  align-items: center;

  font-weight: 200;
  line-height: 1.5;
}

.feature-box::before {
  content: "";
  position: absolute;
  width: 150%;
  height: 50%;
  background: linear-gradient(
    var(--text-colour-light),
    var(--text-colour-light)
  );
  /* border-radius: 5px; */
  animation: rotate 8s linear infinite;
  /* z-index: -1; */
}

.feature-box::after {
  content: "";
  position: absolute;
  background: var(--bg-colour-blue);
  inset: 3px;
  inset: 1px;
  z-index: 1;
  /* inset: 5px; */
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveFromLeft {
  0% {
    transform: translateX(-80%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes moveFromRight {
  0% {
    transform: translateX(80%);
  }
  100% {
    transform: translateX(0);
  }
}

.feature-heading {
  font-family: "Inter", sans-serif;
  /* font-family: "Cormorant", serif; */
  color: var(--text-colour-light);
  /* font-size: 3.6rem; */
  font-size: 3.2rem;
  font-weight: 300;
  display: flex;
  z-index: 2000;
  align-self: flex-start;
  padding-bottom: 2rem;
  /* margin-top: 2rem; */
}

.dark-text {
  color: var(--text-colour-dark);
}

.primary-heading-thai {
  padding-top: 8rem;
  font-size: 5.6rem;
  font-weight: 600;
  /* letter-spacing: 2px; */
  text-align: center;
  margin-top: -2px;
  color: var(--bg-colour-blue);
}

.light-text {
  color: var(--text-colour-light);
}

.smaller-text {
}

.img-slider-description {
  width: 70%;
  margin: 0 auto;
  /* color: var(--text-colour-light); */
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.6;
  padding-top: 4rem;
  /* padding-bottom: 8rem; */
}

.order-list {
  padding-left: 3rem;
  padding-bottom: 8rem;
}

.products-list {
  width: 70%;
  margin: 0 auto;
  /* padding-left: 3rem; */
  /* color: var(--text-colour-light); */
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.8;
  /* padding-top: 4rem;
  padding-bottom: 8rem; */
}

/* home-products */

/* .our-offerings {
  display: none;
} */

.home-products-description {
  margin-top: -2px;
  /* background-color: var(--text-colour-dark); */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* grid-template-rows: repeat(2, 60vh); */
  grid-template-rows: repeat(3, 70vh);
  /* padding: 6.4rem 0; */
  padding-bottom: 6.4rem;
  align-items: center;
}

.home-products-description picture {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.home-products-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.home-products-text {
  color: var(--primary-colour);
  padding-left: 4rem;
  padding-right: 5.6rem;
}

.home-products-text-heading {
  font-size: 4rem;
  font-weight: 400;
  line-height: 1.4;
}

.home-products-text-heading span {
  font-size: 3.2rem;
  font-weight: 100;
}

.home-products-text-heading-secondary {
  font-size: 3.2rem;
  padding-top: 1rem;
  font-weight: 100;
}

.home-products-text-body {
  color: var(--text-colour-dark);
  padding-top: 3rem;
  font-size: 2.2rem;
  /* font-weight: 100; */
  line-height: 1.7;
  font-weight: 300;
}

.home-about {
  background-color: var(--bg-colour-blue);
  padding-top: 15rem;
  /* padding-bottom: 30rem; */
  padding-bottom: 40rem;
}

.home-about-container {
  display: flex;
  flex-direction: column;
  gap: 35rem;
}

.home-about-item {
  /* height: 40rem; */
  position: relative;
  /* overflow: hidden; */
}

.home-about-img-container {
  overflow: hidden;
}

.home-about-img {
  width: 100%;
  height: 80rem;
  object-fit: cover;
  transition: all 0.5s;
  transition: filter 2s, transform 12s ease-out;
}

.home-about-img:hover {
  /* cursor: pointer; */
  transform: scale(1.4);
  /* filter: brightness(0.6); */
}

.home-about-text {
  display: flex;
  flex-direction: column;
  background-color: var(--text-colour-light);
  width: 45%;
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 50%);
}

.long-text {
  width: 60%;
  padding-left: 3.6rem;
  padding-right: 3.6rem;
}

/* .left-side {
  left: 5%;
} */

.home-about-text-heading {
  /* color: var(--text-colour-yellow); */
  /* font-family: "Cormorant", serif; */
  color: var(--primary-colour);
  font-size: 3.6rem;
  font-weight: 400;
  padding-top: 4rem;
  /* padding-bottom: 3rem; */
  text-align: center;
}

.home-about-text-body {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.5;
  /* letter-spacing: 0.5px; */
  padding-left: 4rem;
  padding-right: 4rem;
  padding-top: 3rem;
  /* padding: 3rem 4rem; */
}

.service-book-btn,
.service-book-btn:link,
.service-book-btn:visited {
  display: inline-block;
  text-decoration: none;
  padding: 1.5rem 3rem;
  color: var(--text-colour-dark);
  font-size: 2rem;
  font-weight: 400;

  margin-top: 3rem;
  margin-bottom: 3rem;
  transition: 0.2s;
  border: none;
  align-self: center;
  background-color: var(--btn-colour);
}

.service-book-btn:hover,
.service-book-btn:active {
  cursor: pointer;
  /* color: var(--text-colour-light); */
  text-decoration: underline;
  background-color: var(--btn-hover);
}

/* customers */

.customer-container {
  display: flex;
  flex-direction: column;
  gap: 9rem;
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.customer-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6.4rem;
}

.customers-img {
  /* border: 2px solid var(--text-colour-dark); */
  height: 15rem;
  width: 20rem;
  object-fit: contain;

  transition: all 0.5s;
}

/* footer */

.footer {
  border-top: 3px solid var(--primary-colour);
  /* background-color: var(--primary-colour); */
}

.footer-container-1 {
  display: flex;
  justify-content: space-between;
  padding: 6rem;
  padding-top: 6rem;
}

.footer-logo {
  width: 25rem;
}

.footer-logo-img {
  /* width: 25rem; */
  width: 20rem;
}

.social {
  display: flex;
  /* gap: 3.6rem; */
  gap: 4.2rem;
  align-items: center;
}

.social-icon {
  color: var(--colour-social-grey);
  height: 4rem;
  width: 4rem;
}

.social-icon:hover {
  cursor: pointer;
}

.footer-social-logo {
  height: 4rem;
  fill: var(--colour-social-grey);
  /* color: #fff; */
  cursor: pointer;
  width: 4rem;
}

.footer-contact {
  align-items: center;
}

.facebook:hover {
  fill: #4267b2;
}

.line:hover {
  fill: #06c755;
}

.twitter:hover {
  color: #00acee;
}

.youtube:hover {
  color: #ff0000;
}

.instagram:hover {
  color: #d62976;
}

.whatsapp:hover {
  color: #25d366;
}

.footer-contact {
  width: 25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.2rem;
}

.footer-contact-item {
  width: 28rem;
  display: flex;
  /* align-items: flex-start;
  justify-content: center; */
  gap: 1.2rem;
}

.footer-text {
  color: var(--text-colour-dark);
  font-size: 1.8rem;
  font-weight: 200;
}

.footer-sms-text {
  font-family: "Inter", sans-serif;

  color: var(--text-colour-dark);
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: 200;
  letter-spacing: 0.5px;
}

.footer-sms-text:hover {
  cursor: pointer;
  text-decoration: underline;
}

.copyright {
  text-align: center;
  color: var(--text-colour-dark);
  font-size: 1.4rem;
  font-weight: 200;
  padding-top: 6rem;
  padding-bottom: 2rem;
  letter-spacing: 0.5px;
}

/* discover - blog */

.discover {
  /* padding-top: 2rem; */
  padding-bottom: 8rem;
}

.discover-grid {
  /* margin-top: 4.8rem; */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 32vw repeat(3, 20vw);
  padding: 0 0.5rem;
  padding-top: 6.4rem;
  padding-bottom: 4rem;
  gap: 0.5rem;
}

.discover-item {
  /* cursor: none; */
  cursor: default;
  position: relative;
  overflow: hidden;
}

.discover-text {
  background-color: hsla(0, 0%, 7%, 0.45);
  display: inline-block;
  text-align: center;
  color: var(--text-colour-light);
  font-size: 2.8rem;
  font-weight: 400;
  letter-spacing: 1px;
  padding: 1rem 3rem;
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.discover-item:first-child {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
}

.discover-item:nth-child(2) {
  grid-column: 4 / -1;
  grid-row: 1 / span 1;
}

.discover-item:nth-child(3) {
  grid-column: 1 / span 2;

  grid-row: 2 / span 1;
}

.discover-item:nth-child(4) {
  grid-column: 3 / span 2;
  grid-row: 2 / span 1;
}

.discover-item:nth-child(5) {
  grid-column: 5 / span 2;
  grid-row: 2 / span 1;
}

.discover-item:nth-child(6) {
  grid-column: 1 / span 4;
  grid-row: 3 / -1;
}

.discover-item:nth-child(7) {
  grid-column: 5 / -1;
  grid-row: 3 / span 1;
}

.discover-item:nth-child(8) {
  grid-column: 5 / -1;
  grid-row: 4 / -1;
}

.discover-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  /* filter: grayscale(100%);
  -webkit-filter: grayscale(100%); */
  transition: all 0.5s;
  transition: filter 2s, transform 12s ease-out;
}

.discover-img:hover {
  transform: scale(1.4);
  filter: brightness(0.6);
}

/* products page */

.heading-page {
  /* font-family: "Inter", sans-serif; */
  text-transform: uppercase;
  color: var(--text-colour-light);
  /* font-size: 8rem; */
  font-size: 4.32rem;
  font-weight: 600;
  letter-spacing: 5px;
  /* background-color: hsla(0, 0%, 7%, 0.5); */
  background-color: hsla(0, 0%, 7%, 0.598);

  padding: 2rem 5rem;

  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  z-index: 10;
  /* text-shadow: 1px 1px 1px rgba(00, 00, 00, 0.8); */
}

.heading-vision {
  white-space: nowrap;
  animation: moveFromBottom 1s ease-out;
}

.hero-img {
  height: calc(100vh - 8rem);
  object-fit: cover;

  /* background-size: cover; */
  animation: heroImage 1s ease-out;
  /* position: relative; */
  width: 100%;
}

.contact-hero-img {
  object-fit: fill;
  /* height: 100%; */
}

.contact-hero-heading {
}

@keyframes heroImage {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  /* 80% {
    transform: translate(0);
  } */

  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveFromBottom {
  0% {
    opacity: 0;
    transform: translate(-50%, 1000%);
  }

  /* 80% {
    transform: translate(-50%, -20%);
  } */

  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* poem */

.poem {
  margin-top: -0.5rem;
  position: relative;
}

.poem-img {
  height: 100vh;
  width: 100%;
  object-fit: cover;
  /* position: relative; */
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: all 2s;
}

.poem-img:hover {
  filter: grayscale(0);
  -webkit-filter: grayscale(0);
}

.poem-text-container {
  color: var(--text-colour-light);

  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);

  white-space: nowrap;
  text-align: center;

  background-color: hsla(0, 0%, 7%, 0.598);

  padding: 2rem 5rem;
}

.poem-text {
  font-size: 5rem;
  font-weight: 200;
  line-height: 1.5;
  letter-spacing: 1px;
}

.poem-small-text {
  display: block;
  padding-top: 3rem;
  font-size: 3rem;
}

/* introduction */

/* massage - types */

.tertiary-heading {
  /* padding-top: 6rem; */
  font-size: 4rem;
  font-weight: 200;
  line-height: 1.2;
  text-align: center;
  margin-top: -2px;
}

.normal-text {
  text-align: center;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.6;
  padding-top: 2rem;
}

/* .plastic-bag-text {
  width: 60%;
  margin: 0 auto;
} */

.product-types {
  background-color: var(--bg-colour-blue);
  /* padding-top: 12rem; */
  padding-top: 8rem;
  /* padding-bottom: 12rem; */
  padding-bottom: 4rem;
}

.product-item-container {
  padding-top: 8rem;
  display: flex;
  flex-direction: column;
  /* gap: 8rem; */
  gap: 4rem;
  padding-bottom: 6.4rem;
}

.product-item-img {
  /* height: 65rem; */
  height: 40rem;
  width: 100%;
  object-fit: cover;
}

.product-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.product-description {
  /* color: var(--text-colour-yellow); */
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* padding-left: 6rem;
  padding-right: 2rem; */
  justify-content: center;
  gap: 0.5rem;
}

.product-type-heading {
  /* font-family: "Cormorant", serif; */
  color: var(--text-colour-light);
  font-size: 2.6rem;
  font-weight: 200;
  line-height: 1.5;
}

.product-type-heading-dark {
  /* font-family: "Cormorant", serif; */
  color: var(--text-colour-dark);
  font-size: 2.6rem;
  font-weight: 200;
  line-height: 1.5;
}

.product-type-sub-heading-dark {
  /* font-family: "Cormorant", serif; */
  color: var(--text-colour-dark);
  font-size: 3rem;
  font-weight: 200;
  line-height: 1.5;
  text-align: center;
  padding-top: 8rem;
  text-decoration: underline;
}

.product-type-text {
  color: var(--text-colour-light);
  font-size: 2rem;
  font-weight: 200;
  line-height: 1.5;
  /* display: flex; */
  /* gap: 6rem;
  padding-top: 1rem;
  align-self: center; */
}

.product-type-text-dark {
  color: var(--text-colour-dark);
  font-size: 2rem;
  font-weight: 200;
  line-height: 1.5;
  padding-right: 2rem;
}

.light-bg {
  background-color: var(--text-colour-light);
}

.primary-colour {
  color: var(--bg-colour-blue);
}

.product-brands-container-1 {
  /* width: 60%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  row-gap: 4.8rem; */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}

.product-brands-container-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}

.products-logistics-container {
  padding-top: 8rem;
}

.product-brand-img {
  height: 6rem;
}

.product-brand-img-small {
  height: 3.6rem;
}

.tasnee-img {
  height: 15rem;
}

/* gallery */

.gallery {
  padding-top: 3.6rem;
  margin-bottom: 4.8rem;
}

.gallery-slider {
  /* width: 70%; */
  width: 60%;
  margin: 0 auto;
  display: block;

  position: relative;
}

.gallery-slide-img {
  width: 100%;
  height: 60rem;
  /* height: 50rem; */
  object-fit: cover;
  display: none;
}

.gallery-slide-img-active {
  display: block;
  animation: imgFadeIn 1.5s;
}

/* Animation */
@keyframes imgFadeIn {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.dots {
  margin-top: 3.2rem;
  display: flex;
  justify-content: center;
  gap: 1.6rem;
}

.dots-dot {
  border-radius: 50%;
  border: 0.15rem solid var(--primary-colour);
  background-color: var(--text-colour-light);

  height: 2rem;
  width: 2rem;
  cursor: pointer;
  transition: all 0.5s;
}

.dots-dot:hover {
  background-color: var(--btn-hover);
  /* background-color: var(--bg-colour-blue); */
}

.dots-dot--active,
.dots-dot--active:hover {
  background-color: var(--primary-colour);
}

.products-parts {
  background-color: var(--bg-colour-blue);
}

.products-parts-list {
  padding-top: 4.8rem;
  font-size: 2rem;
  font-weight: 200;
  line-height: 2;
  text-align: center;
  list-style: inside;
  list-style-type: decimal;
  color: var(--text-colour-light);
}

.parts-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* gap: 1.6rem; */
  gap: 3.2rem;
  padding: 8rem;
}

.parts-gallery-item {
  overflow: hidden;
}

.parts-img {
  display: block;
  width: 100%;
  height: 40rem;
  object-fit: cover;
  transition: all 0.5s;
}

.parts-img:hover {
  transform: scale(1.15);
}

/* about page */

.introduction {
  padding-top: 3rem;
  padding-bottom: 4.8rem;
}

.introduction-img {
  padding-top: 6rem;
  width: 60%;
  height: 50rem;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

.standard-text {
  font-size: 2rem;

  letter-spacing: 0.5px;

  color: var(--text-colour-dark);

  font-weight: 300;
  line-height: 1.5;
  width: 70%;

  margin: 2.4rem auto 1rem;
}

.about-description {
  margin-top: -2px;
  background-color: var(--bg-colour-blue);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 60vh);
  padding: 6.4rem 0;
  align-items: center;
}

.about-description picture {
  /* z-index: 1000; */
  height: 100%;
  width: 100%;
  margin: 0 auto;
  display: block;
  text-align: center;
}

.about-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.about-text {
  color: var(--text-colour-light);
  padding-left: 4rem;
  padding-right: 5.6rem;
}

.about-text-heading {
  font-size: 4.8rem;
  font-weight: 300;
}

.about-text-body {
  padding-top: 3rem;
  font-size: 2.2rem;
  font-weight: 200;
  line-height: 1.7;
}

/* .indent-text {
  padding-left: 2.2rem;
} */

/* contact */

.contact-section {
  padding-bottom: 8rem;
}
.contact-heading {
  /* display: inline; */
  font-size: 3.6rem;
  font-weight: 500;
  color: var(--bg-colour-blue);
  /* text-decoration: underline; */
}

.contact-container {
  padding-top: 6.4rem;
  display: flex;
  flex-direction: column;
  gap: 9.6rem;
  align-items: center;
}

.contact-item-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

.contact-text {
  font-size: 2rem;
  text-align: center;
  line-height: 1.5;
}

.contact-link {
  font-size: 2rem;
  text-align: center;
  line-height: 1.5;
  color: var(--text-colour-dark);
  text-decoration: none;
}

.contact-link:hover {
  cursor: pointer;
  text-decoration: underline;
}

.contact-container-2 {
  padding-top: 8rem;
  display: flex;
  justify-content: center;
  /* gap: 12rem; */
  justify-content: space-evenly;
}

.contact-qr {
  width: 20rem;
}

/* works page */

/* product - hero */

/* .product-hero {
  position: relative;
} */

.product-hero-img-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* height: 100vh; */
}

/* .product-hero {
  height: 100vh;
} */

.product-hero-img {
  width: 100%;
  height: calc(100vh - 8rem);
  object-fit: cover;
}

.product-hero-img-mobile {
  display: none;
}

.img-left {
  animation: moveFromLeft 1.5s ease-out;
}

.img-right {
  animation: moveFromRight 1.5s ease-out;
}

.img-centre {
  animation: imgCentre 1.5s ease-out;
}

.heading-works {
  white-space: nowrap;
  animation: moveFromBottom 1.5s ease-out;
}

@keyframes imgCentre {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  /* 
  80% {
    transform: translateY(-10%);
  } */

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.works-features {
  background-color: var(--bg-colour-blue);
  padding-top: 4rem;
  padding-bottom: 9.6rem;
}

.works-heading {
  color: var(--text-colour-light);
  padding-top: 3rem;
  /* font-size: 4rem; */
  font-size: 3.6rem;
  font-weight: 300;
  /* letter-spacing: 2px; */
  text-align: center;
  text-transform: capitalize;
}

.container-3d {
  display: flex;
  justify-content: center;
  margin-top: 12rem;
}

.container-3d:hover .img-3d,
.container-3d:hover .product-feature-text {
  transform: skewY(0);
}

.container-3d:hover .item-3d:not(:first-child) {
  margin-left: 0;
}

.item-3d {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* margin-left: -200px; */
}

.item-3d:not(:first-child) {
  margin-left: -70px;
  transition: 1s;
}

.img-3d {
  width: 70%;
  align-self: center;
  transform: skewY(-10deg);
  transition: 1s;
}

.product-feature-text {
  font-family: "Inter", sans-serif;
  text-align: center;
  font-weight: 300;
  font-size: 20px;
  transform: skewY(-10deg);
  height: 60px;
  transition: 1s;
  color: var(--text-colour-light);
}

.works-intro-img {
  width: 60%;
  margin: 0 auto;
}

.works-blue-bg {
  background-color: var(--bg-colour-blue);
  border-top: 1px solid var(--text-colour-light);
  padding-bottom: 8rem;
}

.white-text {
  color: var(--text-colour-light);
}

/* products - items */
.product-grid {
  width: 80%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(8, 1fr);
  margin: 12rem auto;
  row-gap: 4.8rem;
}

.product-img-container,
.service-img-container {
  position: relative;
  transition: all 0.5s;
}

.product-img-container:hover,
.service-img-container:hover {
  outline-offset: -0.5rem;
  outline: 0.5rem solid var(--text-colour-dark);
}

.work-item-img,
.service-item-img {
  width: 100%;
  /* display: block; */
  /* display: none; */
  /* object-fit: cover; */
}

/* .img-active {
  display: block;
} */

.product-item-description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--bg-colour-blue);
  /* padding-top: 4.8rem; */
  padding-left: 4rem;
  padding-right: 2.4rem;
}

.product-item-heading {
  color: var(--text-colour-light);
  font-size: 3.2rem;
  font-weight: 300;
}

.product-item-text {
  color: var(--text-colour-light);
  font-size: 2rem;
  font-weight: 200;
  padding-top: 2rem;
  line-height: 1.8;
}