@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;600&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

#home,
#profile,
#service,
#location,
#contact {
  scroll-margin-top: 50px;
}

html {
  font-size: 16px;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

main {
  width: 100vw;
}

header {
  width: 100vw;
  padding: 0 10rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  position: fixed;
  top: 0;
  background-color: white;
}

header .logo {
  display: flex;
  align-items: center;
  gap: 1rem;
}

header .logo img {
  width: 2.4rem;
}

header .logo strong {
  font-family: 'Roboto Slab', serif;
  font-weight: 400;
  font-size: 1.6rem;
}

header .menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 20px;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

header .menu-toggle span {
  display: block;
  width: 28px;
  height: 3px;
  background-color: black;
  border-radius: 3px;
  transition: all 0.4s ease;
}

header .menu-toggle span:first-child {
  transform-origin: 0 0;
}

header .menu-toggle span:last-child {
  transform-origin: 0 100%;
}

header .menu-toggle.open-nav span:first-child {
  transform: rotate(45deg) translate(-1px, -1px);
}

header .menu-toggle.open-nav span:last-child {
  transform: rotate(-45deg) translate(-1px, 0);
}

header .menu-toggle.open-nav span:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}

header nav ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.6rem;
}

header nav ul li {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  padding: 0 0.6rem;
  height: 2.6rem;
  border-radius: 0.4rem;
  cursor: pointer;
}

header nav ul li a {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  font-weight: 500;
  color: black;
}

header nav ul li b {
  font-weight: 500;
}

header nav ul li:hover {
  background-color: #dadcd9;
}

header .nav-right {
  display: flex;
  align-items: center;
  gap: 3rem;
}

main {
  margin-top: 4rem;
}

main section.hero {
  padding: 0 10rem;
  display: grid;
  grid-template-areas:
    'welcome data'
    'company data';
  height: calc(100vh - 4rem);
  grid-template-columns: 1fr 0.5fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  position: relative;
}

main section.hero .welcome-wrap {
  grid-area: welcome;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.6rem;
}

main section.hero .welcome-wrap h1 {
  width: fit-content;
  font-size: 3.2rem;
  letter-spacing: 0.3rem;
  background: linear-gradient(90.46deg, #5fd106 1.35%, rgba(198, 228, 8, 0.81) 82.53%, #efe500 123.77%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

main section.hero .welcome-wrap h3 {
  width: fit-content;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
}

main section.hero .welcome-wrap h3 span {
  color: #93c572;
}

main section.hero .welcome-wrap .superiority {
  height: 2rem;
  position: relative;
  overflow: hidden;
  margin: 0.8rem 0;
}

main section.hero .welcome-wrap .superiority ul li {
  list-style: none;
  position: absolute;
  top: 50%;
  transform: translateY(100%);
  font-size: 1.4rem;
  font-weight: 800;
  width: fit-content;
}

main section.hero .welcome-wrap .superiority ul li:first-child {
  background: linear-gradient(91.1deg, #237dbd 12.85%, rgba(35, 125, 189, 0) 130.26%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

main section.hero .welcome-wrap .superiority ul li:nth-child(2) {
  background: linear-gradient(88.7deg, #2ad24f 30.08%, rgba(42, 210, 79, 0) 145.16%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

main section.hero .welcome-wrap .superiority ul li:nth-child(3) {
  background: linear-gradient(93.86deg, #0bccd9 -8.93%, rgba(11, 204, 217, 0) 128.03%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

main section.hero .welcome-wrap .superiority ul li:nth-child(4) {
  background: linear-gradient(91.22deg, #a09a08 -20.95%, rgba(160, 154, 8, 0) 182.94%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

main section.hero .welcome-wrap .superiority ul li.text-in {
  animation: textIn 0.5s ease;
  transform: translateY(-50%);
}

main section.hero .welcome-wrap .superiority ul li.text-out {
  animation: textOut 0.5s ease;
}

@keyframes textIn {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes textOut {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(-200%);
  }
}

main section.hero .welcome-wrap .button-wrap {
  display: flex;
  gap: 2rem;
}

main section.hero .welcome-wrap .button-wrap div {
  height: 2.6rem;
  width: 7rem;
  border-radius: 0.4rem;
  background-color: white;
  position: relative;
  cursor: pointer;
}

main section.hero .welcome-wrap .button-wrap .contact-btn .bg-gradient {
  background: linear-gradient(102.47deg, #19405c -5.71%, rgba(24, 104, 199, 0.572737) 178.35%, #6aaebd 213.2%);
  mix-blend-mode: hard-light;
}

main section.hero .welcome-wrap .button-wrap .contact-btn .bg-gradient::after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  background: linear-gradient(102.47deg, #19405c 45.46%, rgba(24, 104, 199, 0.572737) 178.35%, #6aaebd 213.2%);
  opacity: 0;
  transition: all 1s ease;
  width: 100%;
  height: 100%;
  border-radius: 0.4rem;
}

main section.hero .welcome-wrap .button-wrap .contact-btn:hover .bg-gradient::after {
  opacity: 1;
}

main section.hero .welcome-wrap .button-wrap .profile-btn .bg-gradient {
  background: linear-gradient(102.47deg, #19405c -5.71%, rgba(24, 104, 199, 0.572737) 178.35%, #6aaebd 213.2%);
  mix-blend-mode: hard-light;
}

main section.hero .welcome-wrap .button-wrap .profile-btn .bg-gradient::after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  background: linear-gradient(102.47deg, #19405c 45.46%, rgba(24, 104, 199, 0.572737) 178.35%, #6aaebd 213.2%);
  opacity: 0;
  transition: all 1s ease;
  width: 100%;
  height: 100%;
  border-radius: 0.4rem;
}

main section.hero .welcome-wrap .button-wrap .profile-btn:hover .bg-gradient::after {
  opacity: 1;
}

main section.hero .welcome-wrap .button-wrap div p {
  font-size: 0.94rem;
  font-weight: 500;
  text-decoration: none;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

main section.hero .welcome-wrap .button-wrap div a {
  font-size: 0.94rem;
  font-weight: 500;
  text-decoration: none;
  color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 9;
}

main section.hero .welcome-wrap .button-wrap .profile-btn p {
  color: black;
  background-color: white;
  width: calc(100% - 0.4rem);
  height: calc(100% - 0.4rem);
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

main section.hero .data-wrap .shape-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -99;
}

main section.hero .data-wrap .shape-wrap .shape-area {
  position: relative;
  width: 100%;
}

main section.hero .data-wrap .shape-wrap .shape-area .shape-1 {
  position: absolute;
  top: 1rem;
  right: 24%;
  z-index: -9;
  width: 28rem;
}

main section.hero .data-wrap .shape-wrap .shape-area .shape-1 svg {
  width: 100%;
  height: 100%;
}

main section.hero .data-wrap .shape-wrap .shape-area .shape-1 svg:last-child {
  display: none;
}

main section.hero .data-wrap .shape-wrap .shape-area .shape-2 {
  position: absolute;
  top: 17rem;
  right: 5.4%;
  z-index: -10;
  width: 26rem;
}

main section.hero .data-wrap .shape-wrap .shape-area .shape-2 svg {
  width: 100%;
  height: 100%;
}

main section.hero .data-wrap .shape-wrap .shape-area .shape-2 svg:last-child {
  display: none;
}

main section.hero .data-wrap {
  grid-area: data;
  display: grid;
  grid-template-columns: repeat(2, 10rem);
  grid-template-rows: repeat(2, 16rem);
  column-gap: 3.4rem;
  row-gap: 1.4rem;
  place-items: center;
  justify-content: flex-end;
  padding-right: 2rem;
  padding-top: 4rem;
  position: relative;
}

main section.hero .data-wrap .data-area {
  width: 11rem;
  height: 16rem;
  background-color: transparent;
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

main section.hero .data-wrap .data-area:hover .bg-transparent {
  background-color: rgba(255, 254, 254, 0.9);
}

main section.hero .data-wrap .data-area:hover > p:nth-child(2) {
  opacity: 0;
  visibility: hidden;
}

main section.hero .data-wrap .data-area:hover .title-wrap {
  visibility: visible;
  opacity: 1;
  height: 2.6rem;
}

main section.hero .data-wrap .data-area:hover .image {
  top: 0;
}

main section.hero .data-wrap .data-area:nth-child(4):hover .image:nth-child(3) {
  top: 0;
}

main section.hero .data-wrap .data-area:nth-child(4):hover .image:nth-child(4) {
  top: calc((100% / 3 - 2.6rem / 3) * 1);
}

main section.hero .data-wrap .data-area:nth-child(4):hover .image:nth-child(5) {
  top: calc((100% / 3 - 2.6rem / 3) * 2);
}

main section.hero .data-wrap .data-area:hover .detail {
  visibility: visible;
  opacity: 1;
  top: 2.4rem;
}

main section.hero .data-wrap .data-area .bg-transparent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 9;
  transition: all 0.4s ease;
}

main section.hero .data-wrap .data-area:first-child {
  margin-right: 11rem;
}

main section.hero .data-wrap .data-area:nth-child(2) {
  margin-right: 11rem;
}

main section.hero .data-wrap .data-area > p:nth-child(2) {
  background-color: white;
  width: 100%;
  height: 2.6rem;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  transition: all 0.4s ease;
}

main section.hero .data-wrap .data-area .title-wrap {
  width: 100%;
  height: 0rem;
  position: absolute;
  bottom: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 10;
  transition: all 0.4s ease;
}

main section.hero .data-wrap .data-area .title-wrap .title-area {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: white;
}

main section.hero .data-wrap .data-area .title-wrap .title-area .bg-gradient {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(102.47deg, #19405c -5.71%, rgba(24, 104, 199, 0.572737) 178.35%, #6aaebd 213.2%);
  mix-blend-mode: hard-light;
}

main section.hero .data-wrap .data-area .title-wrap .title-area p {
  color: white;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}

main section.hero .data-wrap .data-area .image {
  width: 100%;
  height: calc(100% - 2.6rem);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 2.6rem;
  transition: all 0.4s ease;
}

main section.hero .data-wrap .data-area:first-child .image {
  background-image: url(../image/truck.png);
}

main section.hero .data-wrap .data-area:nth-child(2) .image {
  background-image: url(../image/autorized.png);
}

main section.hero .data-wrap .data-area:nth-child(3) .image {
  background-image: url(../image/location.png);
}

main section.hero .data-wrap .data-area:nth-child(4) .image {
  height: calc(100% / 3 - 2.6rem / 3);
}

main section.hero .data-wrap .data-area:nth-child(4) .image:nth-child(3) {
  background-image: url(../image/tapioca.png);
  top: 2.6rem;
}

main section.hero .data-wrap .data-area:nth-child(4) .image:nth-child(4) {
  background-image: url(../image/rice.png);
  top: calc((100% / 3 - 2.6rem / 3) * 1 + 2.6rem);
}

main section.hero .data-wrap .data-area:nth-child(4) .image:nth-child(5) {
  background-image: url(../image/bag.jpg);
  top: calc((100% / 3 - 2.6rem / 3) * 2 + 2.6rem);
}

main section.hero .data-wrap .data-area .detail {
  position: absolute;
  top: 4rem;
  width: 100%;
  height: calc(100% - 2.6rem - 2.6rem);
  font-weight: 500;
  display: flex;
  align-items: center;
  font-size: 0.96rem;
  visibility: hidden;
  opacity: 0;
  z-index: 10;
  transition: all 0.4s ease;
}

main section.hero .data-wrap .data-area .detail:not(.list) {
  justify-content: center;
}

main section.hero .data-wrap .data-area .detail ul {
  margin-left: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

main section.hero .data-wrap .data-area .detail p {
  text-align: center;
  line-height: 2.4;
}

main section.hero .company-wrap {
  grid-area: company;
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  width: 80%;
}

main section.hero .company-wrap div {
  display: flex;
  align-items: center;
  gap: 3rem;
}

main section.hero .company-wrap .top img:first-child {
  width: 14rem;
}

main section.hero .company-wrap .top img:nth-child(2) {
  width: 13rem;
}

main section.hero .company-wrap .top img:nth-child(3) {
  width: 6rem;
}

main section.hero .company-wrap .top img:nth-child(4) {
  width: 8rem;
}

main section.hero .company-wrap .bottom img:first-child {
  width: 9rem;
}

main section.hero .company-wrap .bottom img:nth-child(2) {
  width: 6rem;
}

main section.hero .company-wrap .bottom img:nth-child(3) {
  width: 10rem;
}

main section.hero .company-wrap .bottom img:nth-child(4) {
  width: 9rem;
}

main article {
  height: fit-content;
  background-color: #f1f2f1;
  overflow: hidden;
}

main article .about {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10rem;
  width: 100%;
  height: 100vh;
}

main article .about .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

main article .about .content h2 {
  font-size: 2rem;
}

main article .about .content p {
  font-size: 1.1rem;
  line-height: 1.4;
  width: 60%;
}

main article .service {
  width: 100%;
  /* height: 100vh; */
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}

main article .service .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  transition: all 1s ease;
  position: relative;
  z-index: 9;
  height: fit-content;
  margin-top: 4rem;
}

main article .service .content.hide-content {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

main article .service .content h2 {
  font-size: 2rem;
}

main article .service .content .data-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  grid-auto-flow: row dense;
  gap: 2rem;
  margin: 0 20rem;
}

main article .service .content .data-wrap .data-area:last-child {
  grid-column: span 2;
}

main article .service .content .data-wrap .data-area {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: white;
  border: 1px solid #78e723;
  border-radius: 0.4rem;
  padding: 2rem;
  /* width: 24rem; */
  cursor: pointer;
  transition: all 0.4s ease;
}

main article .service .logo-area {
  position: absolute;
  top: 30%;
  left: -26%;
  transition: all 1s ease-in-out;
}

main article .service .content .data-wrap .data-area:hover {
  box-shadow: 0.5px 1px 2.7px rgba(0, 0, 0, 0.001), 1.3px 2.6px 6.9px rgba(0, 0, 0, 0.004), 2.8px 5.6px 14.2px rgba(0, 0, 0, 0.009),
    5.8px 11.6px 29.2px rgba(0, 0, 0, 0.018), 15px 30px 80px rgba(0, 0, 0, 0.06);
}

main article .service .content .data-wrap .data-area:hover a span {
  transform: translateX(20%);
}

main article .service .content .data-wrap .data-area p {
  font-size: 0.96rem;
  line-height: 1.4;
}

main article .service .content .data-wrap .data-area a {
  font-size: 0.94rem;
  font-weight: 500;
  margin-top: 1rem;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #4bab02;
}

main article .service .content .data-wrap .data-area a span {
  font-size: 1.4rem;
  transition: all 0.4s ease;
}

main article .service .detail-content {
  visibility: hidden;
  opacity: 0;
  z-index: 9;
  transition: all 1s ease;
  width: 100vw;
  height: 100%;
}

main article .service .detail-content.show-detail-content {
  visibility: visible;
  opacity: 1;
}

main article .service .detail-content .produsen-tapioka {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 99;
}

main article .service .detail-content .produsen-tapioka h3 {
  text-align: center;
  font-size: 1.6rem;
}

main article .service .detail-content .produsen-tapioka p {
  font-size: 1.1rem;
  line-height: 1.4;
}

main article .service .detail-content .produsen-tapioka .cap-wrap {
  display: flex;
  justify-content: space-between;
}

main article .service .detail-content .produsen-tapioka .cap-wrap .cap-area ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-left: 1.1rem;
}

main article .service .detail-content .produsen-tapioka .cap-wrap .cap-area ul li {
  font-size: 1.1rem;
}

main article .service .detail-content .produsen-beras {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: -20rem;
  padding: 0 14rem;
}

main article .service .detail-content .produsen-beras h3 {
  font-size: 1.6rem;
}

main article .service .detail-content .produsen-beras p {
  font-size: 1.2rem;
  line-height: 1.4;
}

main article .service .detail-content .produsen-beras .image-product {
  width: 50rem;
  height: calc(100vh - 20%);
  position: absolute;
  top: 14%;
  right: 0;
  background-image: url(../image/product_beras.png);
}

main article .service .detail-content .jasa-angkutan {
  display: flex;
  flex-direction: column;
  margin-top: -30rem;
  gap: 2rem;
  z-index: 10;
  width: 100vw;
}

main article .service .detail-content .jasa-angkutan .back-btn {
  margin-left: 14rem;
  z-index: 99;
}

main article .service .detail-content .bg-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('../image/truck_parking.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: opacity(0.1);
}

main article .service .detail-content .jasa-angkutan h3 {
  text-align: center;
  font-size: 1.6rem;
}

main article .service .detail-content .jasa-angkutan > p {
  font-size: 1.1rem;
  line-height: 1.4;
  padding: 0 14rem;
}

main article .service .detail-content .autorized-dealer {
  display: grid;
  grid-template-areas:
    'left right'
    'btn right';
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 2.6rem;
  justify-content: center;
  align-items: center;
  height: 100vh;
  column-gap: 2rem;
  margin: 0 10rem;
  margin-top: -40rem;
}

main article .service .detail-content .autorized-dealer .content-dealer {
  grid-area: left;
  margin-left: 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  z-index: 10;
}

main article .service .detail-content .autorized-dealer .content-dealer h3 {
  font-size: 1.6rem;
}

main article .service .detail-content .autorized-dealer .content-dealer > p {
  font-size: 1.2rem;
  line-height: 1.4;
}

main article .service .detail-content .autorized-dealer .image-info {
  grid-area: right;
  display: flex;
  gap: 2rem;
  width: 100%;
  height: 100%;
  position: relative;
}

main article .service .detail-content .autorized-dealer .image-info .image-area {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

main article .service .detail-content .autorized-dealer .image-info .image-area ul {
  width: 100%;
  height: 100%;
}

main article .service .detail-content .autorized-dealer .image-info .image-area ul li {
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.4s ease;
  width: 100%;
  height: 100%;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

main article .service .detail-content .autorized-dealer .image-info .image-area ul li.show-img {
  opacity: 1;
  visibility: visible;
  pointer-events: visible;
}

main article .service .detail-content .autorized-dealer .image-info .image-area ul li:first-child {
  background-image: url('../image/info-dealer-1.png');
}

main article .service .detail-content .autorized-dealer .image-info .image-area ul li:nth-child(2) {
  background-image: url('../image/info-dealer-2.png');
}

main article .service .detail-content .autorized-dealer .image-info .image-area ul li:nth-child(3) {
  background-image: url('../image/info-dealer-3.png');
}

main article .service .detail-content .autorized-dealer .image-info .image-area ul li:nth-child(4) {
  background-image: url('../image/info-dealer-4.png');
}

main article .service .detail-content .autorized-dealer .image-info .image-area ul li:nth-child(5) {
  background-image: url('../image/info-dealer-5.png');
}

main article .service .detail-content .autorized-dealer .image-info .image-area ul li:nth-child(6) {
  background-image: url('../image/info-dealer-6.png');
}

main article .service .detail-content .autorized-dealer .image-info .btn-area {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background-color: #4bab02;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 100;
}

main article .service .detail-content .autorized-dealer .image-info .btn-area .btn {
  position: relative;
  width: 100%;
  height: 100%;
}

main article .service .detail-content .autorized-dealer .image-info .btn-area .btn span {
  font-size: 1.6rem;
  font-weight: 600;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

main article .service .detail-content .autorized-dealer .image-info .btn-area.prev-btn {
  right: 100%;
}

main article .service .detail-content .autorized-dealer .image-info .btn-area.next-btn {
  transform: rotate(180deg);
  left: 100%;
}

main article .service .detail-content .autorized-dealer .back-btn {
  grid-area: btn;
  margin-top: -20rem;
  margin-left: 6rem;
}

main article .service .detail-content div .back-btn {
  display: flex;
  align-items: center;
  margin-top: 2rem;
  gap: 1rem;
  cursor: pointer;
  transition: all 0.4s ease;
  width: fit-content;
  position: relative;
}

main article .service .detail-content div .back-btn:hover p {
  transform: translateX(10%);
}

main article .service .detail-content div .back-btn .icon-back {
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 2px solid #4bab02;
  background-color: white;
  z-index: 99;
}

main article .service .detail-content div .back-btn .icon-back span {
  font-size: 1.6rem;
  font-weight: 600;
  color: #4bab02;
}

main article .service .detail-content div .back-btn p {
  color: #4bab02;
  font-weight: 500;
  font-size: 1rem;
  transition: all 1s ease;
}

main .client-customors {
  display: flex;
  flex-direction: column;
  background-color: white;
  gap: 4rem;
  padding: 4rem 10rem;
}

main .client-customors h2 {
  font-size: 2rem;
}

main .client-customors :is(.paper, .food) {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

main .client-customors :is(.paper, .food) h3 {
  font-size: 1.5rem;
}

main .client-customors :is(.paper, .food) .wrapper {
  width: 100%;
  margin-inline: auto;
  position: relative;
  height: 8rem;
  overflow: hidden;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0));
}

main .client-customors :is(.paper, .food) .wrapper .item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  animation-name: scrollleft;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

main .client-customors .paper .wrapper .item {
  left: max(calc(12rem * 8), 100%);
}

main .client-customors .food .wrapper .item {
  left: max(calc(12rem * 4), 100%);
}

main .client-customors .paper .wrapper .item1 {
  animation-delay: calc(30s / 8 * (8 - 1) * -1);
}
main .client-customors .paper .wrapper .item2 {
  animation-delay: calc(30s / 8 * (8 - 2) * -1);
}
main .client-customors .paper .wrapper .item3 {
  animation-delay: calc(30s / 8 * (8 - 3) * -1);
}
main .client-customors .paper .wrapper .item4 {
  animation-delay: calc(30s / 8 * (8 - 4) * -1);
}
main .client-customors .paper .wrapper .item5 {
  animation-delay: calc(30s / 8 * (8 - 5) * -1);
}
main .client-customors .paper .wrapper .item6 {
  animation-delay: calc(30s / 8 * (8 - 6) * -1);
}
main .client-customors .paper .wrapper .item7 {
  animation-delay: calc(30s / 8 * (8 - 7) * -1);
}
main .client-customors .paper .wrapper .item8 {
  animation-delay: calc(30s / 8 * (8 - 8) * -1);
}

main .client-customors .food .wrapper .item1 {
  animation-delay: calc(30s / 5 * (5 - 1) * -1);
}
main .client-customors .food .wrapper .item2 {
  animation-delay: calc(30s / 5 * (5 - 2) * -1);
}
main .client-customors .food .wrapper .item3 {
  animation-delay: calc(30s / 5 * (5 - 3) * -1);
}
main .client-customors .food .wrapper .item4 {
  animation-delay: calc(30s / 5 * (5 - 4) * -1);
}
main .client-customors .food .wrapper .item5 {
  animation-delay: calc(30s / 5 * (5 - 5) * -1);
}

main .client-customors :is(.paper, .food) .wrapper .item img {
  width: 4rem;
  height: 4rem;
}

main .client-customors :is(.paper, .food) .wrapper .item p {
  text-align: center;
  width: 9rem;
  font-weight: 500;
}

@keyframes scrollleft {
  to {
    left: -8rem;
  }
}

main section.gallery {
  width: 100vw;
  height: fit-content;
  background-color: #f1f2f1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: red; */
  padding: 2rem 0 4rem 0;
}

main section.gallery .gallery-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10rem;
  gap: 4rem;
}

main section.gallery .gallery-area h2 {
  font-size: 2rem;
}

main section.gallery .gallery-area .gallery-wrap {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

main section.gallery .gallery-area .gallery-wrap figure {
  width: 13rem;
  height: 15rem;
  border-radius: 0.4rem;
  background-color: gainsboro;
  overflow: hidden;
  cursor: pointer;
}

main section.gallery .gallery-area .gallery-wrap figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main section.certification {
  width: 100vw;
  height: fit-content;
  background-color: #f1f2f1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: red; */
  padding: 2rem 0 4rem 0;
}

main section.certification .certification-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10rem;
  gap: 4rem;
}

main section.certification .certification-area h2 {
  font-size: 2rem;
}

main section.certification .certification-area .certification-wrap {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

main section.certification .certification-area .certification-wrap figure {
  width: 13rem;
  height: 15rem;
  border-radius: 0.4rem;
  background-color: gainsboro;
  overflow: hidden;
  cursor: pointer;
}

main section.certification .certification-area .certification-wrap figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main section.contact {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
  gap: 2rem;
  margin: 0 10rem;
  flex-wrap: wrap;
}

main section.contact .content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

main section.contact .content ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

main section.contact .content ul li {
  list-style: none;
  display: flex;
  gap: 1rem;
  align-items: center;
}

main section.contact .content ul li .icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

main section.contact .content .social-media {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

main section.contact .form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  width: 30rem;
}

main section.contact .form input {
  width: 100%;
  height: 3rem;
  color: black;
  padding: 0 0.8rem;
  border: 2px solid #beb9b9;
  border-radius: 0.4rem;
  font-size: 0.9rem;
  transition: all 0.4s ease;
}

main section.contact .form input:focus {
  outline: none;
  border: 2px solid #4bab02;
  color: black;
}

main section.contact .form input::placeholder {
  color: #beb9b9;
}

main section.contact .form textarea {
  resize: none;
  width: 100%;
  height: 10rem;
  padding: 0.8rem;
  border: 2px solid #beb9b9;
  border-radius: 0.4rem;
  font-size: 0.9rem;
  max-height: 10rem;
  overflow: hidden;
}

main section.contact .form textarea::placeholder {
  color: #beb9b9;
}

main section.contact .form textarea:focus {
  outline: none;
  border: 2px solid #4bab02;
  color: black;
}

main section.contact .form button {
  width: 100%;
  height: 3rem;
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

main section.contact .form button .bg-gradient {
  width: 100%;
  height: 100%;
  background: linear-gradient(103.18deg, #19f9a7 8.57%, #1dfaad 135.44%, #1ffbaf 178.9%);
  position: relative;
}

main section.contact .form button .bg-gradient::after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  background: linear-gradient(103.18deg, #5bdeae 8.57%, #00ffa6 135.44%, #00ffa7 178.9%);
  opacity: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.4rem;
  transition: all 1s ease;
}

main section.contact .form button .bg-gradient:hover:after {
  opacity: 1;
}

main section.contact .form button span {
  font-weight: 500;
  font-size: 0.9rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

main section.location {
  width: 100vw;
  height: fit-content;
  background-color: #f1f2f1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}

main section.location .location-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10rem;
  gap: 4rem;
}

main section.location .location-area h2 {
  font-size: 2rem;
}

main section.location .location-area .maps-wrap {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 4rem;
  flex-wrap: wrap-reverse;
}

main section.location .location-area .maps-wrap .maps-area {
  background-color: #a0cf81;
  width: 40rem;
  height: 28rem;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.8rem;
  box-shadow: 2.3px 2.7px 2.2px rgba(0, 0, 0, 0.003), 5.6px 6.5px 5.3px rgba(0, 0, 0, 0.006), 10.5px 12.3px 10px rgba(0, 0, 0, 0.012),
    18.8px 21.9px 17.9px rgba(0, 0, 0, 0.02), 35.1px 40.9px 33.4px rgba(0, 0, 0, 0.034), 84px 98px 80px rgba(0, 0, 0, 0.07);
}

main section.location .location-area .maps-wrap .maps-area iframe {
  width: 100%;
  height: 100%;
  border-radius: 0.4rem;
}

main section.location .location-area .maps-wrap .maps-option ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
}

main section.location .location-area .maps-wrap .maps-option ul li {
  list-style: none;
  height: 3rem;
  width: 18rem;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  background-color: white;
  box-shadow: 2.3px 2.7px 2.2px rgba(0, 0, 0, 0.003), 5.6px 6.5px 5.3px rgba(0, 0, 0, 0.006), 10.5px 12.3px 10px rgba(0, 0, 0, 0.012),
    18.8px 21.9px 17.9px rgba(0, 0, 0, 0.02), 35.1px 40.9px 33.4px rgba(0, 0, 0, 0.034), 84px 98px 80px rgba(0, 0, 0, 0.07);
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

main section.location .location-area .maps-wrap .maps-option ul li.active {
  background-color: #a0cf81;
}

main section.location .location-area .maps-wrap .maps-option ul li.inactive {
  display: none;
}

main section.location .location-area .maps-wrap .maps-option ul li:hover {
  background-color: #a0cf81;
}

main footer {
  width: 100vw;
  height: 4rem;
  background-color: #a0cf81;
  display: flex;
  justify-content: space-between;
  padding: 0 10rem;
  position: relative;
}

main footer .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

main footer .logo img {
  filter: brightness(0);
  width: 2rem;
}

main footer .logo p {
  font-size: 1rem;
}

main footer .copyright {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

main footer .copyright p {
  font-weight: 500;
}

.blur {
  filter: blur(0.6rem);
  pointer-events: none;
  transition: all 0.4s ease;
}

.modal-gallery {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 50%);
  height: calc(100% - 20%);
  z-index: 101;
  background-color: white;
  border-radius: 0.4rem;
  padding-top: 1rem;
  /* display: none; */
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s ease;
}

.modal-gallery .modal-gallery-area {
  width: 100%;
  height: 100%;
  position: relative;
}

.modal-gallery h3 {
  text-align: center;
  font-size: 1.4rem;
}

.modal-gallery figure {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-top: 2rem;
}

.modal-gallery figure :is(img, video) {
  object-fit: cover;
  height: calc(100% - 2rem);
}

.modal-gallery .close-btn {
  position: absolute;
  top: 0;
  right: 1rem;
  cursor: pointer;
  user-select: none;
  color: gray;
  transition: all 0.4s ease;
}

.modal-gallery .close-btn:hover {
  color: black;
}

.modal-gallery .close-btn span {
  font-size: 2.4rem;
}

.modal-gallery .arrow-prev-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  user-select: none;
  color: gray;
  transition: all 0.4s ease;
}

.modal-gallery .arrow-next-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  cursor: pointer;
  user-select: none;
  color: gray;
  transition: all 0.4s ease;
}

.modal-gallery :is(.arrow-prev-btn, .arrow-next-btn) span:hover {
  color: black;
}

.modal-gallery :is(.arrow-prev-btn, .arrow-next-btn) span {
  font-size: 3rem;
}

.modal-certification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 50%);
  height: calc(100% - 20%);
  z-index: 101;
  background-color: white;
  border-radius: 0.4rem;
  padding-top: 1rem;
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s ease;
}

.modal-certification .modal-certification-area {
  width: 100%;
  height: 100%;
  position: relative;
}

.modal-certification h3 {
  text-align: center;
  font-size: 1.4rem;
}

.modal-certification figure {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-top: 2rem;
}

.modal-certification figure :is(img, video) {
  object-fit: cover;
  height: calc(100% - 2rem);
}

.modal-certification .close-btn {
  position: absolute;
  top: 0;
  right: 1rem;
  cursor: pointer;
  user-select: none;
  color: gray;
  transition: all 0.4s ease;
}

.modal-certification .close-btn:hover {
  color: black;
}

.modal-certification .close-btn span {
  font-size: 2.4rem;
}

.modal-certification .arrow-prev-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  user-select: none;
  color: gray;
  transition: all 0.4s ease;
}

.modal-certification .arrow-next-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  cursor: pointer;
  user-select: none;
  color: gray;
  transition: all 0.4s ease;
}

.modal-certification :is(.arrow-prev-btn, .arrow-next-btn) span:hover {
  color: black;
}

.modal-certification :is(.arrow-prev-btn, .arrow-next-btn) span {
  font-size: 3rem;
}

.chart-wrap {
  overflow-x: auto;
  padding-bottom: 10px;
  position: relative;
  width: 92vw;
  height: 500px;
}

.chart-harga {
  padding: 2rem 0 4rem 0;
  /* background-color: red; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 10rem;
  gap: 4rem;
}

.chart-text-wrap {
  text-align: center;
  width: calc(100vw - 20rem);
}

.chart-action {
  display: flex;
  gap: 1.5rem;
  flex-direction: column;
  align-items: center;
}

.chart-action a {
  color: black;
  font-weight: 600;
  text-decoration: none;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  background: linear-gradient(103.18deg, #19f9a7 8.57%, #1dfaad 135.44%, #1ffbaf 178.9%);
  position: relative;
  opacity: 1;
  transition: all 0.5s ease;
}
.chart-action a:hover {
  opacity: 0.8;
}

@media not all and (min-width: 1280px) {
  html {
    font-size: 14px;
  }

  body {
    overflow-x: hidden;
  }

  header {
    padding: 0 4rem;
    background-color: white;
    margin: 0;
  }

  header nav {
    position: absolute;
    background-color: white;
    top: 4rem;
    right: -60vw;
    width: 60vw;
    height: 100vh;
    padding-left: 2rem;
    padding-top: 2rem;
    transition: all 0.4s ease;
  }

  header nav.open-nav {
    right: 0;
  }

  header nav ul {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }

  header .menu-toggle {
    visibility: visible;
    opacity: 1;
    pointer-events: visible;
  }

  header nav ul li {
    font-size: 1.2rem;
  }

  main section.hero {
    padding: 0 0rem;
    display: grid;
    grid-template-areas:
      'welcome'
      'data'
      'company';
    height: fit-content;
    grid-template-columns: auto;
    grid-template-rows: auto;
    gap: 1rem;
  }

  main section.hero .welcome-wrap {
    justify-content: flex-end;
    margin: auto;
    margin-top: 12rem;
  }

  main section.hero .data-wrap .shape-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

  main section.hero .data-wrap .shape-wrap .shape-area {
    position: relative;
    width: 100%;
  }

  main section.hero .data-wrap .shape-wrap .shape-area .shape-1 {
    position: absolute;
    top: 0rem;
    right: 12%;
    z-index: -9;
    width: 22rem;
  }

  main section.hero .data-wrap .shape-wrap .shape-area .shape-1 svg {
    width: 100%;
    height: 100%;
    display: none;
  }

  main section.hero .data-wrap .shape-wrap .shape-area .shape-1 svg:last-child {
    display: block;
  }

  main section.hero .data-wrap .shape-wrap .shape-area .shape-2 {
    position: absolute;
    top: 10rem;
    right: 6.4%;
    z-index: -10;
    width: 18rem;
  }

  main section.hero .data-wrap .shape-wrap .shape-area .shape-2 svg {
    width: 100%;
    height: 100%;
    display: none;
  }

  main section.hero .data-wrap .shape-wrap .shape-area .shape-2 svg:last-child {
    display: block;
  }

  main section.hero .data-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    padding-right: 0;
    margin: 2rem;
    position: static;
  }

  main section.hero .data-wrap .data-area {
    width: 11rem;
    height: 16rem;
    background-color: transparent;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
    overflow: hidden;
  }

  main section.hero .data-wrap .data-area:hover .bg-transparent {
    background-color: rgba(255, 254, 254, 0.9);
  }

  main section.hero .data-wrap .data-area > p:nth-child(2) {
    background-color: #93c572;
  }

  main section.hero .data-wrap .data-area:hover > p:nth-child(2) {
    opacity: 0;
    visibility: hidden;
  }

  main section.hero .data-wrap .data-area:first-child {
    margin-right: 0;
  }

  main section.hero .data-wrap .data-area:nth-child(2) {
    margin-right: 0;
  }

  main section.hero .company-wrap {
    width: 100%;
    margin-bottom: 6rem;
  }

  main section.hero .company-wrap div {
    display: flex;
    align-items: center;
    gap: 3rem;
  }

  main section.hero .company-wrap img {
    width: 10rem;
  }

  main section.hero .company-wrap .top img:first-child {
    width: 14rem;
  }

  main section.hero .company-wrap .top img:nth-child(2) {
    width: 13rem;
  }

  main section.hero .company-wrap .bottom img:first-child {
    width: 9rem;
  }

  main section.hero .company-wrap .bottom img:nth-child(2) {
    width: 6rem;
  }

  main section.hero .company-wrap .bottom img:nth-child(3) {
    width: 10rem;
  }

  main section.hero .company-wrap .bottom img:nth-child(4) {
    width: 9rem;
  }

  main section.location {
    width: 100vw;
    height: fit-content;
    padding: 4rem 0;
  }

  .chart-harga {
    padding: 0 1rem;
    gap: 4rem;
  }

  .chart-text-wrap {
    text-align: center;
    width: calc(100vw - 5rem);
  }
}

@media not all and (min-width: 1024px) {
  main article .about {
    display: flex;
    flex-direction: column;
    height: fit-content;
    gap: 6rem;
  }

  main section.contact {
    height: fit-content;
    gap: 4rem;
    margin: 0 10rem;
    padding: 4rem 0;
  }

  main section.location {
    width: 100vw;
    height: fit-content;
    padding: 4rem 0;
  }

  main section.location .location-area .maps-wrap {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap-reverse;
  }

  main article .service {
    height: fit-content;
  }

  main article .service .detail-content {
    height: fit-content;
    padding: 2rem 0;
  }

  main article .service .detail-content .produsen-tapioka {
    position: static;
    transform: translate(0%, 0%);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0 0;
    margin-top: -44rem;
    height: fit-content;
    padding: 2rem 4rem;
    width: 100vw;
  }

  main article .service .detail-content .produsen-beras {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;
    margin-left: 0;
    width: 100%;
    height: fit-content;
    padding: 0 10rem;
    align-items: center;
  }

  main article .service .detail-content .produsen-beras .image-product {
    width: 38rem;
    height: 18rem;
    position: static;
    z-index: 9;
    background-image: url(../image/product_beras.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  main article .service .detail-content .produsen-beras .back-btn {
    margin-left: -13rem;
  }

  main article .service .detail-content .autorized-dealer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 0 0;
    margin-top: -44rem;
    height: fit-content;
    padding: 2rem 0;
    width: 100vw;
  }

  main article .service .detail-content .autorized-dealer .content-dealer {
    margin-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    z-index: 10;
  }

  main article .service .detail-content .autorized-dealer .image-info {
    grid-area: right;
    display: flex;
    gap: 2rem;
    position: relative;
    height: 40rem;
    width: 40rem;
  }

  main article .service .detail-content .autorized-dealer .image-info .image-area {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
  }

  main article .service .detail-content .autorized-dealer .image-info .image-area ul li {
    list-style: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.4s ease;
  }

  main article .service .detail-content .autorized-dealer .back-btn {
    margin-top: 0;
    margin-left: -31rem;
  }
}

@media not all and (min-width: 768px) {
  html {
    font-size: 12px;
  }

  header {
    margin: 0;
    padding: 0 2rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  main section.hero {
    padding: 0 0;
    display: flex;
    flex-direction: column;
    height: fit-content;
    gap: 0;
  }

  main section.hero .welcome-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    height: 40vh;
    margin-top: 0;
  }

  main section.hero .company-wrap {
    grid-area: company;
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    width: 100%;
    padding: 1rem;
  }

  main section.hero .company-wrap div {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: repeat(2, 1fr);
    flex-wrap: wrap;
  }

  main section.hero .company-wrap .top img:nth-child(3) {
    justify-self: end;
  }

  main article .about {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 100%;
    height: 100vh;
  }

  main article .about .image {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  main article .about .image img {
    width: 80%;
  }

  main article .service .content .data-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin: 0 2rem;
  }

  main article .service .logo-area {
    top: 50%;
    left: -50%;
    transform: translateY(-50%);
  }

  main article .service .detail-content .jasa-angkutan h3 {
    margin-bottom: 2rem;
  }

  main article .service .detail-content .jasa-angkutan > p {
    position: relative;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  main article .service .detail-content .jasa-angkutan > p::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('../image/truck_parking.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    filter: opacity(0.1);
  }

  main article .service .detail-content .bg-image {
    display: none;
  }

  main article .service .detail-content .produsen-tapioka {
    position: static;
    transform: translate(0%, 0%);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0 0;
    margin-top: -44rem;
    height: fit-content;
    padding: 4rem;
    width: 100vw;
  }

  main article .service .detail-content .produsen-tapioka .cap-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-direction: column;
    column-gap: 3rem;
    row-gap: 1rem;
    height: fit-content;
  }

  main article .service .detail-content .produsen-beras {
    padding: 0 2rem;
  }

  main section.contact {
    gap: 6rem;
    margin: 0 2rem;
  }

  main section.location {
    width: 100vw;
    height: fit-content;
    background-color: #f1f2f1;
  }

  main section.location .location-area {
    height: fit-content;
    padding: 0 2rem;
  }

  main section.location .location-area .maps-wrap .maps-area {
    height: 22rem;
  }

  main footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.4rem 0;
    gap: 1.8rem;
    height: fit-content;
  }

  main footer .copyright {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    transform: translate(0, 0);
  }

  main section.hero .data-wrap .shape-wrap .shape-area {
    position: relative;
    width: 100%;
    height: 100%;
  }

  main section.hero .data-wrap .shape-wrap .shape-area .shape-1 {
    position: absolute;
    top: 1rem;
    right: 20%;
    z-index: -9;
    width: 10rem;
  }

  main section.hero .data-wrap .shape-wrap .shape-area .shape-2 {
    position: absolute;
    top: 8rem;
    right: 18%;
    z-index: -10;
    width: 6rem;
  }
}

@media not all and (min-width: 640px) {
  main article .service .content .data-wrap {
    padding: 0 2rem;
  }

  main article .service .detail-content .produsen-tapioka {
    padding: 2rem;
    margin-top: -74rem;
  }

  main article .service .detail-content .autorized-dealer {
    margin-top: -68rem;
  }

  main article .service .detail-content .autorized-dealer .image-info {
    grid-area: right;
    display: flex;
    gap: 2rem;
    position: relative;
    height: 34rem;
    width: 76vw;
  }

  main article .service .detail-content .autorized-dealer .back-btn {
    margin-top: 0;
    margin-left: -19rem;
  }

  main article .service .detail-content .jasa-angkutan {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: -50rem;
  }

  main article .service .detail-content .jasa-angkutan > p {
    position: relative;
    padding: 2rem;
  }

  main article .service .detail-content .jasa-angkutan .back-btn {
    margin-left: 2rem;
  }

  main section.hero .data-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    place-items: center;
    justify-content: center;
    padding: 0;
    min-height: 50vh;
    height: fit-content;
  }
}

@media not all and (min-width: 480px) {
  main section.hero .data-wrap .shape-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -9;
  }

  main section.hero .data-wrap .shape-wrap .shape-area {
    position: relative;
    width: 100%;
    height: 100%;
  }

  main section.hero .data-wrap .shape-wrap .shape-area .shape-1 {
    position: absolute;
    top: 1rem;
    right: 2%;
    z-index: -9;
    width: 10rem;
  }

  main section.hero .data-wrap .shape-wrap .shape-area .shape-2 {
    position: absolute;
    top: 8rem;
    right: 2%;
    z-index: -10;
    width: 6rem;
  }
}