/* 
  Date : 05 December 2023
  KikyKotak
*/
@font-face {
  font-family: "Montserrat";
  src: url("../font/montserrat-variablefont_wght-webfont.woff2") format('woff2'),
    url("../font/montserrat-variablefont_wght-webfont.woff") format('woff') ;
  font-weight: 100 1000;
}

@font-face {
  font-family: "Gotham";
  src: url("../font/gothambold-webfont.woff2") format('woff2'),
  url("../font/gothambold-webfont.woff") format('woff');
  font-weight: bold;
}

@font-face {
  font-family: "Gotham";
  src: url("../font/gothammedium_1-webfont.woff2") format('woff2'),
  url("../font/gothammedium_1-webfont.woff") format('woff');
  font-weight: 500;
}

@font-face {
  font-family: "Gotham";
  src: url("../font/gothamlight-webfont.woff2") format('woff2'),
  url("../font/gothamlight-webfont.woff") format('woff');
  font-weight: 300;
}

/* Part::Variable */
:root {
  /* Color */
  --brand-color-primary: #f6c61c;
  --brand-color-grey-light: #8d8d8d;
  --brand-color-grey-dark: #5c5c5c;
  --brand-color-grey-white: #d1d0ce;
  /* --color-black-brand: #151515; */
  --color-black-brand: #000000;
  --color-white: #ffffff;
  /* --------------------------------------- */
  /* Font */
  --brand-font-1: "Gotham", sans-serif;
  /* --------------------------------------- */
  /* IMG */
  --img: url(../img/Image0.jpg);
}

/* ------------------------------------------ */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: var(--brand-font-1);
  /* font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; */
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
}

.menu {
  position: sticky;
  background-color: var(--brand-color-primary);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  height: 70px;
  top: 0;
  z-index: 999;
  padding: 30px;
  /* position: relative; */
}

.menu.shadow {
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px;
}

.menu .toggle-menu {
  display: none;
}

.menu .logo {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 25%;
  left: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  border-radius: 100%;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px;
}

.menu .logo a {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.menu .list-menu {
  color: black;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 5vw;
  transition: 1s ease-in-out;
}

.menu .list-menu .close-menu {
  display: none;
}

.menu .list-menu a {
  font-size: 0.9rem;
  text-decoration: none;
  color: #000;
  font-weight: 600;
  position: relative;
  padding: 7px 0;
  text-transform: uppercase;
}

.menu .list-menu a::after {
  position: absolute;
  content: "";
  width: 1px;
  background-color: var(--color-black-brand);
  top: 0;
  bottom: 0px;
  right: -25px;
}

.menu .list-menu a:last-child:after {
  display: none;
  position: absolute;
  content: "";
  width: 1px;
  background-color: var(--color-black-brand);
  top: 0;
  bottom: 0px;
  right: -25px;
}

.content {
  position: relative;
  min-height: 70vh;
  /* border-top: 1px solid var(--color-black-brand); */
  background-color: rgb(145, 145, 145);
  /* display: flex;
  justify-content: center;
  align-items: center;
  align-content: flex-start; */
  scroll-margin-top: 70px;
  overflow: hidden;
}

/* Section::1 */
#section-1 {
  min-height: 100vh;
  height: 100vh;
  background-color: var(--brand-color-primary);
  color: var(--color-white);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: space-between;
  padding: 15vh 1vw;
  position: relative;
}

#section-1::before {
  position: absolute;
  content: "";
  background-color: var(--color-black-brand);
  top: 0;
  bottom: 40vh;
  left: -50vh;
  right: -50vh;
  z-index: 0;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
}

/* #section-1::before {
  position: absolute;
  content: "";
  background-color: var(--color-black-brand);
  height: 50px;
  width: 100%;
  bottom: 50%;
  left: -0vw;
  right: -0vw;
  z-index: 0;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
} */

.seo {
  margin: auto;
  z-index: 1;
}

.seo-1 {
  width: 50%;
  padding-left: 6vw;
}

.seo h2 {
  font-size: 2em;
  line-height: 1.3;
}

.seo-1 h1 {
  font-size: 2.5em;
  color: var(--brand-color-primary);
  line-height: 1.5;
}

.seo-1 h6 {
  font-size: 1em;
  line-height: 1.3;
  font-weight: 300;
  margin-top: -0.5em;
}

.seo-2 {
  text-align: center;
  width: 50%;
  position: relative;
  padding-right: 12vw;
}

.seo-2 img {
  position: absolute;
  width: 24vw;
  /* right: -3vw; */
  right: 0;
  top: 0;
  z-index: -1;
}

.seo-2 h1 {
  font-size: 8em;
}

.seo-2 h1.price {
  font-size: 3.5em;
  margin-bottom: 20px;
  line-height: 1.3;
}

.seo-2 h5 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin-bottom: 10px;
}

.seo-2 .price-nom {
  margin-top: 0.3em;
  line-height: 0.7em;
}

.seo-2 .price-nom,
.seo-2 .price {
  color: var(--brand-color-primary);
}

.seo-3 {
  color: var(--color-black-brand);
  line-height: 0.8;
}

.seo-3 h6 {
  font-size: 1.2rem;
  font-weight: 300;
}

/* Section::2 */
#section-2 {
  background-color: var(--color-black-brand);
  /* background-color: var(--brand-color-primary); */
  min-height: 200vh;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  align-items: center;
  justify-content: flex-start;
  /* gap: 15vh; */
}

/* #section-2::before {
  position: absolute;
  content: "";
  background-color: var(--color-black-brand);
  top: 0;
  bottom: 40vh;
  left: -50vh;
  right: -50vh;
  z-index: 0;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
} */

/* profil */
#section-2 .profil {
  /* background-color:red; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
  z-index: 1;
  padding: 12vh 8vw 0;
}

#section-2 .profil h1 {
  text-align: center;
  color: var(--brand-color-primary);
  margin-bottom: 1.4vh;
  font-size: 2.5em;
}

#section-2 .profil p {
  color: var(--color-white);
  position: relative;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3em;
  margin-top: 2vh;
}

#section-2 .profil p::before {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: -18px;
  width: 4px;
  height: 100%;
  background-color: var(--color-white);
}

#section-2 .profil p span {
  color: var(--brand-color-primary);
  font-weight: 600;
}

#section-2 .wrapp-embed-video iframe {
  /* border-radius: 20px; */
}

#section-2 .layanan {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 65px;
  z-index: 1;
  padding: 18vh 8vw;
}

#section-2 .layanan h1 {
  width: 100%;
  text-align: center;
  color: var(--color-white);
  position: relative;
  line-height: 1em;
  font-size: 2.5em;
  margin-bottom: 5vh;
}

#section-2 .layanan h1::after {
  content: "";
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='8742px' height='267px' style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath style='opacity:0.983' fill='%23fefffe' d='M 4416.5,-0.5 C 4752.17,-0.5 5087.83,-0.5 5423.5,-0.5C 6217.07,2.59231 7010.73,11.4256 7804.5,26C 8111.19,31.6237 8417.86,38.2904 8724.5,46C 8733.54,47.5403 8739.2,52.7069 8741.5,61.5C 8741.5,65.5 8741.5,69.5 8741.5,73.5C 8738.33,82.9923 8731.66,87.9923 8721.5,88.5C 8184.9,74.9501 7648.24,64.4501 7111.5,57C 6509.2,48.5016 5906.86,43.5016 5304.5,42C 4604.15,40.2809 3903.81,43.2809 3203.5,51C 2495.75,58.8468 1788.08,71.5134 1080.5,89C 730.134,97.6676 379.801,107.501 29.5,118.5C 23.8333,118.333 18.1667,118.167 12.5,118C 5.49052,115.429 1.15719,110.595 -0.5,103.5C -0.5,100.167 -0.5,96.8333 -0.5,93.5C 1.33834,84.6875 6.67167,79.1875 15.5,77C 538.088,60.1192 1060.75,46.1192 1583.5,35C 2247.44,20.7423 2911.44,10.7423 3575.5,5C 3856,2.74255 4136.33,0.909217 4416.5,-0.5 Z'/%3E%3C/g%3E%3Cg%3E%3Cpath style='opacity:0.982' fill='%23fefffe' d='M 6298.5,266.5 C 6242.5,266.5 6186.5,266.5 6130.5,266.5C 5088.33,262.746 4046,258.912 3003.5,255C 2994.16,251.475 2989.16,244.642 2988.5,234.5C 2988.84,225.633 2992.84,219.133 3000.5,215C 3038.11,213.842 3075.77,213.342 3113.5,213.5C 4175.5,216.907 5237.5,220.74 6299.5,225C 6311.41,230.993 6315.58,240.493 6312,253.5C 6309.56,260.112 6305.06,264.445 6298.5,266.5 Z'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6vh;
  width: 370px;
  height: 100%;
  margin: auto;
}

#section-2 .layanan .card {
  width: 22vw;
  background-color: var(--brand-color-primary);
  min-height: 20vw;
  display: flex;
  padding: 2vw;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
  position: relative;
}

#section-2 .layanan .card:nth-child(2)::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='847px' height='2556px' style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath style='opacity:0.984' fill='%23f5c61b' d='M 25.5,-0.5 C 29.1667,-0.5 32.8333,-0.5 36.5,-0.5C 122.792,41.6693 203.459,92.5026 278.5,152C 517.664,344.304 685.164,586.804 781,879.5C 819.481,1001.73 841.314,1126.73 846.5,1254.5C 846.5,1288.17 846.5,1321.83 846.5,1355.5C 830.508,1671.96 727.008,1955.62 536,2206.5C 430.715,2343.42 305.549,2457.92 160.5,2550C 155.983,2552.55 151.316,2554.39 146.5,2555.5C 144.833,2555.5 143.167,2555.5 141.5,2555.5C 130.968,2553.15 123.135,2547.15 118,2537.5C 111.967,2522.4 115.134,2509.57 127.5,2499C 268.143,2410.71 388.976,2300.21 490,2167.5C 658.379,1944.91 756.046,1693.91 783,1414.5C 801.037,1164.35 755.037,926.688 645,701.5C 523.5,455.035 346.667,258.201 114.5,111C 80.8016,90.1455 46.1349,70.8122 10.5,53C 5.1903,48.838 1.52363,43.6713 -0.5,37.5C -0.5,33.8333 -0.5,30.1667 -0.5,26.5C 3.4037,12.9294 12.0704,3.92937 25.5,-0.5 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: -3.5vw;
  bottom: -8.5vw;
  height: 70%;
  width: 3vw;
  margin: auto;
  z-index: 1;
  transform: rotate(180deg);
}

#section-2 .layanan .card:nth-child(3)::before {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='847px' height='2556px' style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath style='opacity:0.984' fill='%23f5c61b' d='M 25.5,-0.5 C 29.1667,-0.5 32.8333,-0.5 36.5,-0.5C 122.792,41.6693 203.459,92.5026 278.5,152C 517.664,344.304 685.164,586.804 781,879.5C 819.481,1001.73 841.314,1126.73 846.5,1254.5C 846.5,1288.17 846.5,1321.83 846.5,1355.5C 830.508,1671.96 727.008,1955.62 536,2206.5C 430.715,2343.42 305.549,2457.92 160.5,2550C 155.983,2552.55 151.316,2554.39 146.5,2555.5C 144.833,2555.5 143.167,2555.5 141.5,2555.5C 130.968,2553.15 123.135,2547.15 118,2537.5C 111.967,2522.4 115.134,2509.57 127.5,2499C 268.143,2410.71 388.976,2300.21 490,2167.5C 658.379,1944.91 756.046,1693.91 783,1414.5C 801.037,1164.35 755.037,926.688 645,701.5C 523.5,455.035 346.667,258.201 114.5,111C 80.8016,90.1455 46.1349,70.8122 10.5,53C 5.1903,48.838 1.52363,43.6713 -0.5,37.5C -0.5,33.8333 -0.5,30.1667 -0.5,26.5C 3.4037,12.9294 12.0704,3.92937 25.5,-0.5 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: -3.5vw;
  bottom: -8.5vw;
  height: 70%;
  width: 3vw;
  margin: auto;
  z-index: 1;
}

#section-2 .layanan .card img {
  width: 10vw;
  margin-bottom: 2vw;

}

#section-2 .layanan .card span:nth-child(2) {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.5em;
  line-height: 1em;
}

#section-2 .layanan .card span:nth-child(3) {
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 300;
}

#section-2 .layanan .card:nth-child(2)::after {
  content: "Bawa pulang motor Anda \A dengan kinclong maksimal.";
  white-space: pre;
  position: absolute;
  left: -3em;
  right: -50px;
  bottom: -12vh;
  color: var(--brand-color-primary);
  font-weight: 600;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1em;
}

#section-2 .layanan .card:nth-child(3)::after {
  content: "Proteksi maksimal untuk \A cat motor kesayangan Anda.";
  white-space: pre;
  position: absolute;
  left: -3em;
  right: -50px;
  bottom: -12vh;
  color: var(--brand-color-primary);
  font-weight: 600;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1em;
}

/* benefits */
#section-2 .benefits {
  background-color: var(--brand-color-primary);
  width: 100%;
  padding: 10vw 4vw 5vw 8vw;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3rem;
}

#section-2 .benefits::before {
  position: absolute;
  content: "";
  background-color: var(--color-black-brand);
  /* background-color: red; */
  top: -15vh;
  bottom: 85%;
  left: -10vh;
  right: -10vh;
  z-index: 0;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  z-index: 0;
}

#section-2 .benefits .title {
  width: 100%;
  position: relative;
}

#section-2 .benefits .title::before {
  content: "";
  position: absolute;
  left: -15px;
  top: -1em;
  bottom: 4px;
  width: 5px;
  background-color: var(--color-black-brand);
}

#section-2 .benefits .title h1 {
  font-size: 4em;
  font-weight: 700;
  line-height: 0.8em;
}

#section-2 .benefits .title span {
  font-size: 1em;
  font-weight: 300;
  line-height: 1em;
}

#section-2 .benefits .list {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
  /* background-color: aqua; */
  width: 45%;
}

#section-2 .benefits .list img {
  width: 80px;
  height: auto;
  object-fit: cover;
}

#section-2 .benefits .list .description p {
  font-size: 0.9em;
  font-weight: 300;
  line-height: 1em;
}

#section-2 .benefits .list .description h2 {
  line-height: 1em;
  font-size: 2em;
}

/* Section::3 */
#section-3 {
  background-color: var(--color-black-brand);
  width: 100%;
  padding: 5vw 8vw;
  color: var(--color-white);
}

#section-3::before {
  position: absolute;
  content: "";
  background-color: var(--brand-color-primary);
  top: -80vh;
  bottom: 95%;
  left: -110vh;
  right: -110vh;
  z-index: 0;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  z-index: 0;
}

#section-3 h1 {
  font-size: 4em;
  font-weight: 700;
  line-height: 1em;
  color: var(--brand-color-primary);
  position: relative;
}

#section-3 h1::before {
  content: "";
  position: absolute;
  left: -15px;
  top: -0.01em;
  bottom: -0.1em;
  width: 4px;
  background-color: var(--brand-color-primary);
}

#section-3 .paket {
  padding: 3vw 5vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3vw;
}

#section-3 .paket .card {
  /* background-color: aqua; */
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#section-3 .paket .card:nth-child(1) .nm-paket:nth-child(1) {
  background-color: var(--brand-color-grey-white);
}

#section-3 .paket .card:nth-child(2) .nm-paket:nth-child(1) {
  background-color: var(--brand-color-primary);
}

#section-3 .paket .card .nm-paket {
  color: var(--color-black-brand);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1em;
  padding: 0.5em 0.5em 0.2em 0.5em;
}

#section-3 .paket .card .price {
  font-size: 2rem;
  font-weight: 700;
  padding: 10px 20px;
  color: var(--brand-color-primary);
  line-height: 1;
  padding: 0.5em 0.5em;
}

#section-3 .paket .card .price sup {
  font-size: 1rem;
  font-weight: 300;
}

#section-3 .paket .card .disc {
  font-size: 1.5rem;
  font-weight: 700;
  padding: 10px 20px;
}

#section-3 .paket .card .price-disc {
  color: var(--color-black-brand);
  font-size: 4rem;
  font-weight: 700;
  /* line-height: 1em; */
  padding: 0.5em 0 0.2em 0;
  text-align: center;
}

#section-3 .paket .card:nth-child(1) .price-disc:nth-child(4) {
  background-color: var(--brand-color-grey-white);
}

#section-3 .paket .card:nth-child(2) .price-disc:nth-child(4) {
  background-color: var(--brand-color-primary);
}

#section-3 .paket .card .price-disc sup {
  font-size: 2rem;
  font-weight: 500;
}

#section-3 .list-fitur {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1vw;
}

#section-3 .list-fitur div {
  color: var(--brand-color-primary);
  border: 2px solid var(--brand-color-primary);
  padding: 1em 0.5em;
  font-size: 1.5em;
  line-height: 1em;
  font-weight: 600;
  /* width: 30px; */
  text-align: center;
}

/* Section::4 */
#section-4 {
  display: flex;
  flex-direction: column;
  gap: 25px;
  justify-content: center;
  align-items: center;
  padding: 20vh 10vw;

  background-color: var(--brand-color-primary);
}

#section-4 .table {
  width: 100%;
  background-color: var(--color-white);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  /* justify-content: center; */
  gap: 15px;
  border-radius: 15px;
  overflow: hidden;
  padding-bottom: 15px;
  font-weight: 700;
  box-shadow: 4px 4px 0px var(--color-black-brand);
}

#section-4 .table .table-title {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 25px;
}

#section-4 .table .table-title span:nth-child(1) {
  margin-right: auto;
  background-color: var(--color-black-brand);
  color: var(--brand-color-primary);
  /* padding: 5px 0; */
  min-width: 160px;
  text-align: center;
  padding: 1em 0.5em;
  line-height: 1em;
  font-size: 1em;
}

#section-4 .table .table-title span:nth-child(2),
#section-4 .table .table-title span:nth-child(3) {
  min-width: 75px;
  text-align: center;
  background-color: var(--color-black-brand);
  color: var(--brand-color-primary);
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
  margin-right: 35px;
  position: relative;
  top: 0.5em;
  font-size: 1em;
  font-weight: 700;
  padding: 1em 0.5em;
}

#section-4 .table .table-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 1em;
}

#section-4 .table .table-content .table-row {
  width: 100%;
  display: flex;
  padding: 0.5em 0;
  flex-direction: row;
  justify-content: flex-end;
  gap: 25px;
}

#section-4 .table .table-content .table-row span:nth-child(1) {
  margin-right: auto;
}

#section-4 .table .table-content .table-row span:nth-child(2),
#section-4 .table .table-content .table-row span:nth-child(3) {
  width: 110px;
}

/* #section-4 .table .table-content .table-row span{
  margin: auto;
} */

/* Section 5 */
#section-5 {
  display: flex;
  flex-direction: column;
  background-color: var(--color-black-brand);
}

#section-5::before {
  position: absolute;
  content: "";
  background-color: var(--brand-color-primary);
  top: 0;
  bottom: auto;
  left: -10vw;
  right: -10vw;
  z-index: 0;
  height: 100px;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  z-index: 0;
}

#section-5 h1 {
  width: 100%;
  padding-top: 2vh;

  text-align: center;
  color: var(--color-black-brand);
  z-index: 1;
  line-height: 1em;
  margin-bottom: 2vh;
  position: relative;
  font-size: 4em;
  font-weight: 700;
}

#section-5 h1::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='7829px' height='312px' style='shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath style='opacity:0.986' fill='%23000000' d='M 7791.5,-0.5 C 7795.83,-0.5 7800.17,-0.5 7804.5,-0.5C 7817.26,1.59334 7825.26,8.92668 7828.5,21.5C 7828.5,25.5 7828.5,29.5 7828.5,33.5C 7825.32,46.5082 7816.98,53.6749 7803.5,55C 7766.5,55.3333 7729.5,55.6667 7692.5,56C 5147.33,78.3938 2602.17,100.894 57,123.5C 43.101,123.641 29.2677,123.141 15.5,122C 7.04839,118.391 1.71505,112.225 -0.5,103.5C -0.5,98.8333 -0.5,94.1667 -0.5,89.5C 1.79547,80.0845 7.46214,73.5845 16.5,70C 37.7828,68.7115 59.1161,68.0448 80.5,68C 2651,45.5044 5221.33,22.6711 7791.5,-0.5 Z'/%3E%3C/g%3E%3Cg%3E%3Cpath style='opacity:0.986' fill='%23000000' d='M 4188.5,311.5 C 4178.5,311.5 4168.5,311.5 4158.5,311.5C 4143.4,304.616 4137.9,292.95 4142,276.5C 4145.35,265.817 4152.52,259.317 4163.5,257C 4687.95,234.558 5212.62,219.558 5737.5,212C 5906.16,209.92 6074.83,208.753 6243.5,208.5C 6355.18,208.347 6466.85,209.18 6578.5,211C 6590.99,215.518 6597.33,224.518 6597.5,238C 6597.11,252.722 6589.77,261.722 6575.5,265C 6197.14,262.115 5818.81,264.449 5440.5,272C 5022.86,280.435 4605.52,293.601 4188.5,311.5 Z'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6vh;
  width: 370px;
  height: 100%;
  margin: auto;
}

#section-5 .profit {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 40px;
}

#section-5 .profit .card {
  width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#section-5 .profit .card span:nth-child(1) {
  background-color: var(--brand-color-primary);
  padding: 3px 25px;
  border-radius: 20px;
  line-height: 1em;
  padding: 1em 0.5em;
  font-size: 1.4em;
  font-weight: 700;
  margin-bottom: 10px;
}

#section-5 .profit .card span:nth-child(2) {
  font-size: 2em;
  font-weight: 700;
  line-height: 1.5em;
  color: var(--brand-color-primary);
}

#section-5 .profit .card span:nth-child(2) sup {
  font-weight: 300;
  font-size: 0.6em;
  line-height: 1em;
}

#section-5 .profit .card span:nth-child(3) {
  color: var(--brand-color-primary);
  font-weight: 300;
}

#section-5 .fill {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

#section-5 .fill img {
  position: relative;
  left: -18vw;
  width: 450px;
}

#section-5 .fill span {
  width: 250px;
  font-size: 0.8em;
  font-weight: 400;
  line-height: 1em;
  text-align: start;
  color: var(--brand-color-primary);
  margin-bottom: 50px;
}

/* Seciton-6 */
#section-6 {
  display: flex;
  flex-direction: column;
  background-color: var(--color-black-brand);
}

#section-6 .showcase {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 45px;
  position: relative;
}

#section-6 .showcase .card {
  width: 25vw;
  position: relative;
  z-index: 1;
}

#section-6 .showcase .card img {
  width: 100%;
  object-fit: cover;
}

#section-6 .showcase .card .sub {
  position: absolute;
  left: 0;
  /* background-color: aqua; */
  padding: 17px 0 0 17px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--brand-color-primary);
}

#section-6 .showcase .card .sub span:nth-child(1) {
  font-size: 1.7em;
  font-weight: 700;
  line-height: 0.9;
}

#section-6 .showcase .card .sub span:nth-child(2) {
  font-weight: 300;
  font-size: 0.9em;
}

#section-6 .showcase::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  top: 80%;
  right: 0;
  background-color: var(--brand-color-primary);
}

#section-6 .showcase::after {
  position: absolute;
  content: "";
  bottom: 2rem;
  top: 10%;
  right: -19vw;
  left: -19vw;
  background-color: var(--color-black-brand);
  border-bottom-left-radius: 200%;
  border-bottom-right-radius: 200%;
  z-index: 0;
}

#section-6 .bergabung {
  background-color: var(--brand-color-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-bottom: 10rem;
}

#section-6 .bergabung .title-bergabung {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 7rem 0 3rem 0;
}

#section-6 .bergabung .title-bergabung span:nth-child(1) {
  font-size: 2.7em;
  font-weight: 300;
  line-height: 1.5em;
}

#section-6 .bergabung .title-bergabung span:nth-child(2) {
  font-size: 2.7em;
  font-weight: 700;
  line-height: 1em;
}

#section-6 .bergabung .point {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

#section-6 .bergabung .point .card {
  align-self: stretch;
  width: 30vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

#section-6 .bergabung .point .card img {
  width: 50px;
}

#section-6 .bergabung .point .card .text-point {
  background-color: var(--color-black-brand);
  color: var(--brand-color-primary);
  width: 50%;
  text-align: center;
  padding: 0.8rem;
  font-size: 1.5em;
  line-height: 1em;
  font-weight: 700;
  padding: 1em 0.5em;
}

#section-6 .bergabung .point .card .ket-point {
  text-align: center;
  font-size: 1em;
  font-weight: 300;
  line-height: 1em;
  margin: auto;
}

/* Section::7 */
#section-7 {
  display: flex;
  padding: 7rem 7rem 3rem;
  background-color: var(--color-black-brand);
  color: var(--brand-color-primary);
  flex-direction: column;
  align-content: flex-start;
}

#section-7::before {
  position: absolute;
  content: "";
  background-color: var(--brand-color-primary);
  top: -50vh;
  bottom: 120vh;
  left: -30vw;
  right: -30vw;
  z-index: 0;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
}

#section-7 h1 {
  align-self: flex-start;
  background-color: var(--brand-color-primary);
  color: var(--color-black-brand);
  padding: 0.6rem;
  line-height: 1em;
  padding: 1em 0.5em;
  align-self: flex-start;
  font-size: 2.5em;
}

#section-7 h2 {
  align-self: flex-start;
  color: var(--brand-color-primary);
  padding: 0.6rem;
  font-weight: 400;
  font-size: 1.5em;
  margin-bottom: 4rem;
  line-height: 2em;
}

#section-7 .card-contact {
  align-self: flex-start;
  margin: auto;
  display: flex;
  flex-direction: column;
  padding: 0 30px;
  gap: 20px;
}

#section-7 .card-contact .contact {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 25px;
}

#section-7 .card-contact .contact img {
  width: 35px;
}

#section-7 .card-contact .contact a {
  text-decoration: none;
  font-size: 1.2em;
  font-weight: 700;
  color: var(--brand-color-primary);
}

/* responsif::mobile */
@media screen and (max-width: 600px) {
  .menu {
    position: sticky;
  }

  .menu .logo {
    left: 20px;
  }

  .menu .list-menu {
    display: none;
  }

  .menu .list-menu a {
    width: 100%;
    text-align: left;
  }

  .menu .toggle-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-black-brand);
    padding: 0.4rem;
    color: var(--brand-color-primary);
    border-radius: 100%;
    cursor: pointer;
  }

  .menu .list-menu.active {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--brand-color-primary);
    position: fixed;
    color: var(--color-black-brand);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 6vw;
    padding-top: 80px;
    padding: 80px 3rem 0;
    transition: 1s ease-in-out;
  }

  .menu .list-menu.active a::after {
    display: none;
  }

  .menu .list-menu.active .close-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-black-brand);
    padding: 0.4rem;
    color: var(--brand-color-primary);
    border-radius: 100%;
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 30px;
  }

  #section-1 {
    padding: 10vh 6vw 25px;
    position: relative;
    gap: 0;
    align-content: flex-start;
    justify-content: flex-start;
    height: auto;
    min-height: auto;
    gap: 25px;
  }

  #section-1::before {
    bottom: 160px !important;
  }

  .seo-1,
  .seo-2 {
    width: 100%;
  }

  .seo-1 h1 {
    font-size: 2em;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .seo-1 h2 {
    font-size: 1.5em;
  }

  .seo-1 h6 {
    font-size: 0.8em;
  }

  .seo-2 {
    margin-bottom: 40px;
    padding: 0;
    text-align: center;
  }

  .seo-2 img {
    width: 170px;
    right: -20px;
    top: 20px;
  }

  .seo-3 h2 {
    margin-bottom: 0.5em;
    font-size: 1.2em;
    /* line-height: 1.2; */
  }

  .seo-3 h6 {
    /* line-height: 1.2; */
  }

  #section-2 .profil {
    padding: 10vh 0vw 0vh;
  }

  #section-2 .profil h1 {
    font-size: 2em;
    line-height: 1em;
  }

  #section-2 .wrapp-embed-video {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  #section-2 .wrapp-embed-video iframe {
    border-radius: 15px;
    width: 100%;
    height: 355px !important;
  }

  #section-2 .profil p {
    padding: 0 10vw;
  }

  #section-2 .profil p::before {
    left: 20px;
  }

  #section-2 .layanan {
    flex-direction: column;
  }

  #section-2 .layanan .card {
    width: 100%;
    margin-bottom: 10vh;
  }

  #section-2 .layanan .card:nth-child(2)::after,
  #section-2 .layanan .card:nth-child(3)::after {
    bottom: -8vh;
  }

  #section-2 .layanan .card:nth-child(2)::before,
  #section-2 .layanan .card:nth-child(3)::before {
    display: none;
  }

  #section-2 .benefits {
    padding-top: 100px;
  }

  #section-2 .benefits::before {
    top: 0vh;
    bottom: auto;
    left: -1vh;
    right: -1vh;
    height: 50px;
  }

  #section-2 .benefits .title::before {
    left: -12px;
  }

  #section-2 .benefits .list {
    width: 100%;
  }

  #section-3 {
    padding-top: 100px;
    padding-bottom: 50px;
  }

  #section-3::before {
    top: 0;
    bottom: auto;
    left: -1vh;
    right: -1vh;
    height: 50px;
  }

  #section-3 h1 {
    /* font-size: 2.5em; */
  }

  #section-3 h1::before {
    left: -10px;
  }

  #section-3 .paket {
    gap: 10vw;
  }

  #section-3 .paket .card {
    width: 100%;
  }

  #section-3 .paket .card .disc {
    font-size: 1rem;
    line-height: 1em;
  }

  #section-3 .paket .card .price-disc {
    line-height: 1em;
    font-size: 2em;
  }

  #section-3 .list-fitur {
    flex-direction: column;
    align-content: flex-start;
    gap: 3vw;
  }

  #section-3 .list-fitur span {
    width: auto;
    text-align: center;
  }

  #section-4 {
    padding: 5vh 5vw;
    justify-content: flex-start;
    min-height: auto;
  }

  #section-4 .table .price {
    font-size: 0.7em;
  }

  #section-4 .table .table-content .table-row span:nth-child(1) {
    font-size: 0.7em;
    width: 130px;
  }

  #section-4 .table .table-title span:nth-child(1) {
    padding: 1em 0.5em;
    min-width: 80px;
    font-size: 0.7em;
  }

  #section-4 .table .table-content {
    padding: 1em;
    line-height: 1em;
  }

  #section-4 .table .table-title span:nth-child(2),
  #section-4 .table .table-title span:nth-child(3) {
    margin-right: 20px;
    top: 3px;
    font-size: 0.7em;
    /* padding: 0px 5px; */
  }

  #section-5::before {
    top: 0;
    bottom: auto;
    left: -1vh;
    right: -1vh;
    height: 60px;
  }

  #section-5 .profit {
    gap: 20px;
  }

  #section-5 h1 {
    font-size: 3em;
  }

  #section-5 .profit .card {
    margin-bottom: 5vh;
  }

  #section-6 .showcase .card {
    width: 40%;
  }

  #section-6 .showcase::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    top: auto;
    right: 0;
    height: 50px;
  }

  #section-6 .showcase::after {
    position: absolute;
    content: "";
    bottom: 20px;
    top: auto;
    right: -1vh;
    left: -1vh;
    border-bottom-left-radius: 200%;
    border-bottom-right-radius: 200%;
    z-index: 0;
    height: 50px;
  }

  #section-6 .bergabung .title-bergabung {
    padding-top: 5vh;
    font-size: 0.7em;
  }

  #section-6 .bergabung .point .card {
    width: 100vw;
    margin-bottom: 5vh;
  }

  #section-6 .bergabung {
    padding-bottom: 3rem;
  }

  #section-7 {
    padding: 5vh 2rem;
  }

  #section-7 h2 {
    margin-bottom: 1em;
  }

  #section-7 h1 {
    font-size: 1.5em;
  }

  #section-7 .card-contact {
    padding: 0;
    gap: 10px;
  }

  #section-7 .card-contact .contact {
    gap: 10px;
  }

  #section-7 .card-contact .contact a {
    font-size: 0.9em;
  }
}

/* responsive::Tab */
@media screen and (min-width: 601px) and (max-width: 991px) {
  .menu {
    position: sticky;
  }

  .menu .logo {
    left: 20px;
  }

  .menu .list-menu {
    display: none;
  }

  .menu .list-menu a {
    width: 100%;
    text-align: left;
  }

  .menu .toggle-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-black-brand);
    padding: 0.4rem;
    color: var(--brand-color-primary);
    border-radius: 100%;
    cursor: pointer;
  }

  .menu .list-menu.active {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--brand-color-primary);
    position: fixed;
    color: var(--color-black-brand);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 6vw;
    padding-top: 80px;
    padding: 80px 3rem 0;
    transition: 1s ease-in-out;
  }

  .menu .list-menu.active a::after {
    display: none;
  }

  .menu .list-menu.active .close-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-black-brand);
    padding: 0.4rem;
    color: var(--brand-color-primary);
    border-radius: 100%;
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 30px;
  }

  #section-1 {
    padding: 10vh 6vw 25px;
    position: relative;
    gap: 0;
    align-content: flex-start;
    justify-content: flex-start;
    height: auto;
    min-height: auto;
    gap: 25px;
  }

  #section-1::before {
    bottom: 160px !important;
  }

  .seo-1,
  .seo-2 {
    width: 100%;
  }

  .seo-1 h1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .seo-2 {
    margin-bottom: 40px;
    margin-top: 2vh;
    padding: 0;
    text-align: center;
  }

  .seo-2 img {
    width: 35vw;
    right: -20px;
    top: 20px;
  }

  .seo-3 h2 {
    margin-bottom: 0.5em;
    line-height: 1.2;
    font-size: 1.5em;
  }

  .seo-3 h6 {
    line-height: 1.2;
  }

  #section-2 .profil {
    padding: 10vh 0vw 0vh;
  }

  #section-2 .wrapp-embed-video {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  #section-2 .wrapp-embed-video iframe {
    border-radius: 15px;
    width: 100%;
    height: 355px !important;
  }

  #section-2 .profil p {
    padding: 0 10vw;
  }

  #section-2 .profil p::before {
    left: 20px;
  }

  #section-2 .layanan {
    /* flex-direction: column; */
  }

  #section-2 .layanan .card {
    width: 35vw;
  }

  #section-2 .layanan .card:nth-child(2)::after,
  #section-2 .layanan .card:nth-child(3)::after {
    bottom: -7vh;
    font-size: 1rem;
  }


  #section-2 .layanan .card:nth-child(2)::before,
  #section-2 .layanan .card:nth-child(3)::before {
    display: none;
  }

  #section-2 .benefits {
    padding-top: 100px;
  }

  #section-2 .benefits::before {
    top: 0vh;
    bottom: auto;
    left: -1vh;
    right: -1vh;
    height: 50px;
  }

  #section-2 .benefits .title::before {
    left: -12px;
  }

  #section-2 .benefits .list {
    width: 100%;
  }

  #section-3 {
    padding-top: 100px;
    padding-bottom: 50px;
  }

  #section-3::before {
    top: 0;
    bottom: auto;
    left: -1vh;
    right: -1vh;
    height: 50px;
  }

  #section-3 h1::before {
    left: -10px;
  }

  #section-3 .paket {
    gap: 10vw;
  }

  #section-3 .paket .card {
    width: 100%;
  }

  #section-3 .paket .card .disc {
    font-size: 1.7rem;
  }

  #section-3 .list-fitur {
    flex-direction: row;
    align-content: flex-start;
    align-items: center;
    gap: 0vw;
  }

  #section-3 .list-fitur div {
    /* width: auto; */
    text-align: center;
    font-size: 1em;
    margin-top: 1em;
  }

  #section-4 {
    padding: 5vh 5vw;
    justify-content: flex-start;
    min-height: auto;
  }

  #section-4 .table .price {
    font-size: 0.7em;
  }

  #section-4 .table .table-content .table-row span:nth-child(1) {
    font-size: 0.7em;
    width: 130px;
  }

  #section-4 .table .table-title span:nth-child(1) {
    /* padding: 5px 0; */
    min-width: 80px;
    font-size: 0.7em;
  }

  #section-4 .table .table-content {
    padding: 0 10px;

  }

  #section-4 .table .table-content .table-row {
    line-height: 1em;
    padding: 0;
  }

  #section-4 .table .table-title span:nth-child(2),
  #section-4 .table .table-title span:nth-child(3) {
    margin-right: 20px;
    top: 3px;
    font-size: 0.7em;
    /* padding: 0px 5px; */
  }

  #section-5::before {
    top: 0;
    bottom: auto;
    left: -1vh;
    right: -1vh;
    height: 15vh;
  }

  #section-5 .profit {
    gap: 20px;
  }

  #section-6 .showcase .card {
    width: 40%;
  }

  #section-6 .showcase::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    top: auto;
    right: 0;
    height: 50px;
  }

  #section-6 .showcase::after {
    position: absolute;
    content: "";
    bottom: 20px;
    top: auto;
    right: -1vh;
    left: -1vh;
    border-bottom-left-radius: 200%;
    border-bottom-right-radius: 200%;
    z-index: 0;
    height: 50px;
  }

  #section-6 .bergabung .title-bergabung {
    padding-top: 5vh;
  }

  #section-6 .bergabung .point .card {
    width: 100vw;
  }

  #section-6 .bergabung {
    padding-bottom: 3rem;
  }

  #section-7 {
    padding: 5vh 2rem;
  }

  #section-7 h2 {
    margin-bottom: 2rem;
  }

  #section-7 .card-contact {
    padding: 0;
    gap: 10px;
  }

  #section-7 .card-contact .contact {
    gap: 10px;
  }

  #section-7 .card-contact .contact a {
    font-size: 0.9em;
  }
}