* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

:root {
  --font-family1: "Poppins", sans-serif;
  --font-family2: "Rubik", sans-serif;
  --color-green: #589e54;
  --color-green2: #8bc888;
  --kurus: blue;
  --normal: green;
  --gemuk: orange;
  --obesitas: red;
}

@font-face {
  font-family: myFont;
  src: url(Acid\ Bold.ttf);
}

/* Animasi on scroll start */

.zoom-in-box {
  opacity: 0;
  transform: scale(0.5); 
  transition: transform 0.5s ease, opacity 0.5s ease; 
}

.zoom-in-box.show {
  opacity: 1;
  transform: scale(1); 
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animasi on scroll end */

/* Nav start */
nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 24px 40px;
  width: 100%;
  z-index: 999;
  background-color: whitesmoke;
  position: fixed;
}

nav .title {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-direction: row;
  font-size: 20px;
  cursor: pointer;
  font-family: myFont;
}

nav .title img {
  width: 35px;
  height: 30px;
}

nav .title a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(40, 39, 39);
  font-size: 20px;
  font-weight: bold;
}

nav a {
  text-decoration: none;
  display: flex;
  gap: 4px;
  flex-direction: row;
  color: black;
  font-size: 16px;
  transition: 0.5s;
}

.Navbar {
  display: flex;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-family2);
}

.Navbar .bx {
  display: flex;
  align-items: center;
}

.Navbar button {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 8px 48px;
  border-radius: 4px;
  border: none;
  color: whitesmoke;
  background-color: var(--color-green2);
  transition: 0.5s;
  cursor: pointer;
}

.Navbar button:hover {
  background-color: white;
  color: #8bc888;
}

.Navbar a:hover {
  color: var(--color-green);
  border-bottom: 1px solid black solid var(--color-green);
}

nav.sticky {
 background-color: white;
 transition: .5s;
 padding: 20px 32px;
}

/* Nav End */

/* Hamburger Start */
.nav_hamburger {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  transition: right 0.5s ease;
  z-index: 9999;
}

.nav_hamburger a {
  text-decoration: none;
  display: flex;
  gap: 4px;
  margin: 0 32px;
  color: black;
  font-size: 16px;
  transition: 0.5s;
  justify-content: center;
  font-size: 20px;
}

.nav_hamburger a:hover {
  color: var(--color-green);
}

.nav_hamburger button {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  width: 80%;
  border-radius: 4px;
  border: none;
  color: whitesmoke;
  background-color: var(--color-green2);
  transition: 0.5s;
  cursor: pointer;
}

.nav_hamburger button:hover {
  background-color: white;
  color: #8bc888;
}

.nav_hamburger.active {
  display: flex;
}

.hamburger {
  display: none;
  cursor: pointer;
}

.hamburger .bx {
  font-size: 24px;
}

/* Hamburger End */

/* Hero section start */
section.hero_section {
  display: flex;
  align-items: center;
  font-family: var(--font-family2);
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-image: url(assets/bg-landing-page.jpeg);
  background-position: center;
  background-size: cover;
}

section.hero_section .teks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 63%;
  padding: 60px 0;
  margin-bottom: 20px;
  text-decoration: none;
  backdrop-filter: blur(4px);
  /* background-color:rgba(255, 255, 255, 0.201); */
  border-radius: 12px;
}

section.hero_section .teks h1 {
  text-shadow: 2px 2px 0px #589e54;
  font-size: 80px;
  color: whitesmoke;
}

section.hero_section .teks p {
  font-size: 20px;
  text-shadow: 2px 2px 0px #589e54;
  color: whitesmoke;
  font-weight: bold;
}

section.hero_section .teks button {
  box-shadow: 2px 4px 0px 0px #589e54;
  border: none;
  border-radius: 8px;
  padding: 8px 60px;
  cursor: pointer;
  transition: 0.5s;
}

section.hero_section .teks button:hover {
  transform: scale(1.1);
}

/* Hero section end */

/* About start */
section.about_section {
  display: flex;
  flex-direction: column;
  font-family: var(--font-family2);
  margin: 48px 64px;
}

.detail_about {
  display: flex;
  flex-direction: row;
}

.title_about {
  display: flex;
  justify-content: center;
  font-size: 32px;
}

.detail_about img {
  border-radius: 12px;
  width: 600px;
  height: 400px;
}

.teks_about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 32px;
  gap: 20px;
}

.teks_about h1 {
  font-size: 28px;
}

.teks_about p {
  font-size: 20px;
}

.teks_about button {
  padding: 12px 16px;
  width: 30%;
  border: none;
  background-color: #8bc888;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.5s;
}

.teks_about button:hover {
  color: var(--color-green2);
  background-color: white;
}

/* About end */

/* Second Section Start */
section.second_section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family2);
  padding: 32px 0;
  margin-top: 20vh;
  background-color: #8bc888;
}

section.second_section .title2 h1 {
  display: flex;
  text-align: center;
  color: white;
}

section.second_section .card_manfaat {
  display: flex;
  margin-top: 100px;
  gap: 32px;
  flex-direction: row;
}

section.second_section .card {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgb(255, 255, 255);
  box-shadow: 2px 0px 12px 0px rgb(132, 131, 131);
  border-radius: 12px;
  padding-bottom: 35vh;
}

section.second_section .card img {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom: 2px solid #589e54;
  background-size: cover;
  width: 280px;
  height: 280px;
}

section.second_section .card p {
  display: flex;
  font-size: 20px;
  position: absolute;
  text-align: center;
  margin-top: 74vh;
  width: 250px;
}

section.second_section .card ::before {
  content: "";
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: #589e54;
  left: 40%;
}

section.second_section .card1 ::before {
  content: "1";
  color: white;
  bottom: 28vh;
}

section.second_section .card2 ::before {
  content: "2";
  color: white;
  bottom: 25vh;
}

section.second_section .card3 ::before {
  content: "3";
  color: white;
  bottom: 26vh;
}

section.second_section .card4 ::before {
  content: "4";
  color: white;
  bottom: 22vh;
}

/* Second Section End */

/* Section Konsultasi Start */
.konsultasi {
  display: flex;
  position: absolute;
}

.detail_konsultasi {
  display: flex;
  flex-direction: row;
  position: fixed;
  align-items: center;
  margin-top: 35vh;
  margin-left: 45vh;
  background-color: white;
  color: black;
  padding: 8px 12px;
  border-radius: 12px;
  z-index: 999;
  cursor: pointer;
  gap: 12px;
  transition: 0.5s;
  box-shadow: 2px 0px 12px 0px black;
}

.detail_konsultasi:hover {
  transform: scale(1.1);
  border: 2px solid #a7e6ff;
}

.detail_konsultasi img {
  width: 50px;
  height: 50px;
}

.detail_konsultasi h3 {
  font-size: 16px;
}

/* Section Konsultasi End */

/* Artikel Start */
section.artikel_section {
  margin-top: 20vh;
  padding: 12px 48px;
  font-family: var(--font-family2);
}

.artikel {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  gap: 20px;
}

.artikel .kiri_artikel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  background-image: url(assets/cara-menurunkan-berat-badan-secara-realistis-0-alodokter.jpg);
  background-size: cover;
  width: 220vh;
  height: 500px;
  border-radius: 12px;
  transition: 0.5s;
}

.kiri_artikel a {
  text-decoration: none;
}

.kiri_teks {
  background-color: #ffffff43;
  backdrop-filter: blur(10px);
  color: black;
  padding: 16px 20px;
  display: none;
  transition: 5s;
}

.kiri_artikel:hover .kiri_teks {
  display: block;
}

.kiri_sumber {
  display: flex;
  flex-direction: row;
  gap: 32px;
}

.kiri_sumber .sumber {
  padding: 0px 8px;
  border-radius: 4px;
  width: auto;
  background-color: var(--color-green);
  color: white;
}

.artikel .detail_artikel {
  display: flex;
  flex-direction: row;
  gap: 30px;
}

.artikel .kanan_artikel {
  display: flex;
  flex-direction: column;
  height: 65vh;
  width: 100%;
  overflow: auto;
  gap: 30px;
}

.artikel .kanan_artikel img {
  width: 150px;
  height: 100px;
  border-radius: 12px;
}

.artikel .kanan_artikel .detail_img a {
  display: flex;
  gap: 12px;
  flex-direction: row;
  height: 100%;
  text-decoration: none;
  color: black;
}

.detail_teks {
  display: flex;
  gap: 4px;
  flex-direction: column;
}

.detail_sumber {
  display: flex;
  flex-direction: row;
  gap: 28px;
}

.detail_teks .sumber {
  padding: 0px 8px;
  border-radius: 4px;
  background-color: var(--color-green);
  color: white;
}

.detail_teks .tanggal {
  color: grey;
}

.artikel2 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 10vh;
  padding: 12px 16px;
}

.detail_artikel2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.detail_artikel2 img {
  width: 300px;
  height: 200px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.detail_teks2 {
  padding: 12px 16px;
}

.card_artikel {
  background-color: whitesmoke;
  box-shadow: 2px 0px 12px 0px rgb(132, 131, 131);
  padding-bottom: 8px;
  width: 300px;
  border-radius: 12px;
}

.card_artikel h3 {
  transition: 0.5s;
}
.card_artikel h3:hover {
  color: #589e54;
}

.card_artikel a {
  text-decoration: none;
}

.card_artikel .detail_teks2 {
  color: black;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card_artikel .detail_teks2 .detail_sumber2 {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.detail_sumber2 .sumber {
  display: flex;
  align-items: center;
  padding: 0px 8px;
  border-radius: 4px;
  background-color: var(--color-green);
  color: white;
}

.detail_sumber2 .tanggal {
  color: grey;
}

.selengkapnya {
  display: grid;
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.selengkapnya img {
  width: 300px;
  height: 200px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

#read-more {
  display: flex;
  align-self: center;
  margin-top: 20px;
  padding: 12px 32px;
  border-radius: 8px;
  border: none;
  background-color: #589e54;
  color: white;
  transition: 0.5s;
  cursor: pointer;
}

#read-more:hover {
  color: var(--color-green);
  background-color: #ffffff;
}

/* Artikel End */

/* bmi section start*/
.bmi_main {
  display: flex;
  flex-direction: column;
  font-family: var(--font-family2);
  background-color: #8bc88893;
}

.bmi_main .bmi_title {
  margin-top: 100px;
  padding: 12px 80px;
}

.bmi_main .bmi_gender {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  font-size: 20px;
  margin-top: 70px;
  background-color: whitesmoke;
  padding: 32px;
}

.bmi_gender .gender_pria {
  display: flex;
  flex-direction: column;
  width: 292px;
  height: 165px;
}

.gender_pria .img_pria {
  height: 100%;
}

.gender_pria .img_pria p {
  display: flex;
  font-size: 20px;
  justify-content: center;
  gap: 8px;
}

.gender_pria button {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: 1px solid black;
  cursor: pointer;
}

.bmi_gender .gender_pria img {
  border-radius: 50%;
  height: 90px;
  width: 90px;
}

.bmi_gender .gender_wanita {
  display: flex;
  flex-direction: column;
  width: 292px;
  height: 165px;
}

.gender_wanita .img_wanita {
  height: 100%;
}

.gender_wanita .img_wanita p {
  display: flex;
  font-size: 20px;
  justify-content: center;
  gap: 4px;
}

.gender_wanita button {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: 1px solid black;
  cursor: pointer;
}

.bmi_gender .gender_wanita img {
  border-radius: 50%;
  height: 90px;
  width: 90px;
}

.gender_pria button.active {
  border: 1px solid rgb(0, 238, 255);
  box-shadow: 2px 0px 12px 0px rgba(0, 225, 255, 0.3);
  /* Bayangan berwarna merah */
}

.gender_wanita button.active {
  border: 1px solid var(--color-green);
  box-shadow: 2px 0px 12px 0px rgba(0, 129, 24, 0.3);
  /* Bayangan berwarna merah */
}

.bmi_main .bmi_input {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 150px;
  padding: 0 32px;
  gap: 40px;
}

.bmi_input .img_bmi img {
  border-radius: 12px;
}

.bmi_input .input {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bmi_main .bmi_input input {
  padding: 0 12px;
  width: 600px;
  height: 35px;
  border: none;
  outline: none;
  border-radius: 8px;
}

.bmi_main .bmi_input #heightInput:hover {
  outline: 2px solid #8bc888;
}

.bmi_main .bmi_input #weightInput:hover {
  outline: 2px solid #a7e6ff;
}

.bmi_main .bmi_input p {
  margin-bottom: 10px;
  font-size: 18px;
}

.button_bmi {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.button_bmi button {
  padding: 12px 32px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: 0.5s;
}

.button_bmi button:hover {
  transform: scale(1.1);
  background-color: var(--color-green2);
  color: white;
}

.bmi_hasil {
  display: flex;

  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
  margin-top: 100px;
}

.hidden {
  display: none;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bmi_scale {
  display: flex;
  flex-direction: row;
}

.bmi_scale div {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 12px 32px;
  text-transform: uppercase;
  border-top: 5px solid var(--color);
}

.image_hasil {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 40px;
  align-items: center;
}

.image_hasil .kurus_hasil img,
.image_hasil .normal_hasil img,
.image_hasil .gemuk_hasil img {
  width: 100px;
  height: 120px;
}

.image_hasil .obesitas_hasil img {
  width: 100px;
  height: 120px;
}


.bmi_main .info_bmi {
  display: flex;
  flex-direction: row;
  margin: 30px;
  justify-content: space-around;
}

.bmi_main .info_bmi .pola_makan_kurus,
.bmi_main .info_bmi .pola_makan_ideal {
  display: flex;
  flex-direction: row;
  background-color: #f1f1f1;
  width: 500px;
  padding: 12px 20px;
  border-radius: 10px;
  display: none;
}

.bmi_main .info_bmi .pola_makan_kurus .title_makan,
.bmi_main .info_bmi .pola_makan_ideal .title_makan {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}

.bmi_main .info_bmi .pola_makan_kurus p,
.bmi_main .info_bmi .pola_makan_ideal p {
  font-size: 16px;
}

.bmi_main .info_bmi .pola_makan_kurus .image_makan img,
.bmi_main .info_bmi .pola_makan_ideal .image_makan img {
  width: 100px;
  height: 100px;
  border-radius: 5%;
}

.bmi_main .info_bmi .pola_makan_kurus button,
.bmi_main .info_bmi .pola_makan_ideal button {
  background-color: #a7e6ff;
  padding: 8px;
  width: 80%;
  border-radius: 8px;
  border: none;
  transition: 0.5s;
  cursor: pointer;
}

.bmi_main .info_bmi .pola_makan_kurus button:hover,
.bmi_main .info_bmi .pola_makan_ideal button:hover {
  border-radius: 5%;
  background-color: white;
  padding: 5px;
  border-radius: 8px;
  border: none;
  transform: scale(1.1);
}

.penyakit_obesitas,
.penyakit_kurus,
.penyakit_ideal {
  width: 500px;
  height: 130px;
  background-color: #f1f1f1;
  border-radius: 10px;
  display: none;
}

.penyakit_obesitas h4,
.penyakit_kurus h4,
.penyakit_ideal h4 {
  margin-left: 15px;
  margin-top: 15px;
}

.list_penyakit {
  display: flex;
  justify-content: space-evenly;
}

.penyakit_obesitas ul li,
.penyakit_kurus ul li {
  margin: 10px;
  margin-left: 30px;
  font-size: 14px;
}

.penyakit_obesitas ul li::marker,
.penyakit_kurus ul li::marker {
  color: #a7e6ff;
}

/* program latihan start */

.program_latihan {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: var(--font-family2);
  margin: 32px 40px;
}

.program_obesitas,
.program_kurus,
.program_menjaga {
  display: flex;
  flex-direction: column;
  gap: 32px;
  display: none;
}

.program_cardio,
.program_atas,
.program_core,
.program_fleksibel,
.program_angkat_beban,
.program_hiit,
.program_fungsional,
.program_core,
.program_kekuatan,
.program_kardio,
.program_yoga,
.program_fungsional2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.program1,
.program2,
.program3 {
  width: 300px;
  height: 370px;
  background-color: #a7e6ff;
  border-radius: 11px;
  box-shadow: 2px 0px 12px 0px rgb(132, 131, 131);
  margin-bottom: 50px;
}

.program1_nama h1,
.program2_nama h1,
.program3_nama h1 {
  margin: 8px 32px;
}

.program1_reps,
.program2_reps,
.program3_reps {
  margin: 8px 32px;
}

.program1 img,
.program2 img,
.program3 img {
  width: 300px;
  height: 280px;
  border-radius: 10px;
}

/* program latihan end */

/* bmi section end*/

/* loader start */
.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  z-index: 9999;
}

.loader-container video {
  overflow: hidden;
  width: 300px;
  height: auto;
}

body.loaded .loader-container {
  display: none;
}

/* loader end */

/* Footer Start */
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #589e54;
  gap: 12px;
  padding-top: 20px;
}

.nav_footer {
  display: flex;
  flex-direction: row;
  gap: 12px;
  font-family: var(--font-family1);
  font-size: 20px;
  cursor: pointer;
}

.nav_footer a {
  text-decoration: none;
  color: black;
}

.nav_footer a:hover {
  color: var(--color-green);
  border-bottom: 1px solid black solid var(--color-green);
}

.sosmed {
  display: flex;
  gap: 12px;
  font-size: 20px;
  cursor: pointer;
}

.sosmed .bx {
  color: var(--color-green);
  padding: 8px 8px;
  border-radius: 50%;
  transition: 0.5s;
}

.sosmed .bx:hover {
  color: var(--color-green);
  background-color: white;
  transform: scale(1.5);
}

.Copyright {
  display: flex;
  font-family: var(--font-family2);
  justify-content: center;
  background-color: #589e54;
  color: whitesmoke;
  width: 100%;
  padding: 12px;
}

/* Footer End */

/* Mobile Card */
section.second_section .mobile_card {
  display: none;
}

/* Media Responsive Start */
@media screen and (max-width: 1029px) {

  /* Index Responsive Start */

  .detail_konsultasi {
    margin-left: 38vh;
    padding: 4px 8px;
    gap: 4px;
  }

  .detail_konsultasi h3 {
    font-size: 12px;
  }

  section.about_section {
    margin: 30px 48px;
  }

  .detail_about img {
    width: 500px;
    height: 300px;
  }

  .teks_about {
    padding: 0 32px;
    gap: 20px;
  }

  .teks_about h1 {
    font-size: 20px;
  }

  .teks_about p {
    font-size: 16px;
  }

  .teks_about button {
    padding: 8px 12px;
    width: 30%;
  }

  section.second_section .title2 h1 {
    font-size: 20px;
  }

  section.second_section .card img {
    width: 220px;
    height: 220px;
  }

  section.second_section .card p {
    font-size: 16px;
    margin-top: 70vh;
    width: 220px;
  }

  section.second_section .card {
    padding-bottom: 30vh;
  }

  section.second_section .card1 ::before {
    content: "1";
    bottom: 26vh;
  }

  section.second_section .card2 ::before {
    content: "2";
    bottom: 25vh;
  }

  section.second_section .card3 ::before {
    content: "3";
    bottom: 25vh;
  }

  section.second_section .card4 ::before {
    content: "4";
    bottom: 22vh;
  }

  .artikel .kiri_artikel {
    width: 180vh;
    height: 350px;
  }

  .artikel .kanan_artikel {
    height: 55vh;
  }

  .artikel .kanan_artikel img {
    width: 100px;
    height: 80px;
  }

  .detail_teks .sumber {
    padding: 2px 8px;
    font-size: 12px;
  }

  .detail_teks .tanggal {
    font-size: 14px;
  }

  .card_artikel {
    width: 250px;
  }

  .detail_artikel2 img {
    width: 250px;
    height: 150px;
  }

  .selengkapnya img {
    width: 250px;
    height: 150px;
  }

  .detail_teks2 h3 {
    font-size: 16px;
  }

  .detail_sumber2 .sumber {
    font-size: 12px;
  }

  .detail_sumber2 .tanggal {
    font-size: 12px;
  }

  /* Index Responsive End */

  /* BMI Responsive Start */
  .bmi_main .bmi_input {
    display: flex;
    flex-direction: column;
  }

  .bmi_main .info_bmi .pola_makan_kurus,
  .bmi_main .info_bmi .pola_makan_ideal {
    width: 400px;
    height: 130px;
  }

  .penyakit_obesitas,
  .penyakit_kurus,
  .penyakit_ideal {
    width: 400px;
    height: 130px;
  }

  .penyakit_obesitas h4,
  .penyakit_kurus h4,
  .penyakit_ideal h4 {
    font-size: 14px;
  }

  /* BMI Responsive End */
}

@media screen and (max-width: 996px) {

  /* Index Responsive Start */

  .artikel .detail_artikel {
    display: flex;
    flex-direction: column;
  }

  .artikel .kiri_artikel {
    width: 120vh;
    height: 330px;
  }

  .artikel .kanan_artikel {
    height: 50vh;
    gap: 20px;
  }

  .artikel .kanan_artikel img {
    width: 100px;
    height: 80px;
  }

  .detail_teks p {
    font-size: 20px;
  }

  .detail_teks .sumber {
    font-size: 14px;
  }

  .detail_teks .tanggal {
    font-size: 16px;
  }

  .detail_konsultasi {
    margin-left: 35vh;
  }

  section.second_section .card_manfaat {
    display: none;
  }

  section.second_section .mobile_card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 32px;
    margin-top: 32px;
  }

  .mobile_card .mobile_card1 img {
    width: 280px;
    height: 280px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
  }

  .mobile_card .mobile_card1 p {
    background-color: #ffffff;
    display: flex;
    text-align: center;
    align-items: center;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  .mobile_card .mobile_card1 {
    display: flex;
    flex-direction: row;
  }

  /* Index Responsive End */

  /* BMI Responsive Start */

  .program1,
  .program2,
  .program3 {
    width: 260px;
    height: 370px;
  }

  .program1 img,
  .program2 img,
  .program3 img {
    width: 260px;
    height: 250px;
  }

  .program1_nama h1,
  .program2_nama h1,
  .program3_nama h1 {
    font-size: 16px;
  }

  .program1_reps,
  .program2_reps,
  .program3_reps {
    font-size: 14px;
  }

  .program_obesitas h1,
  .program_kurus h1,
  .program_menjaga h1 {
    font-size: 24px;
  }

  .program_obesitas h2,
  .program_kurus h2,
  .program_menjaga h2 {
    font-size: 20px;
  }

  /* BMI Responsive End */
}

@media screen and (max-width: 928px) {

  /* Index Responsive Start */

  .kiri_teks h2 {
    font-size: 16px;
  }

  .kiri_sumber .sumber {
    display: flex;
    align-items: center;
    font-size: 12px;
  }

  .kiri_sumber .tanggal {
    display: flex;
    align-items: center;
    font-size: 12px;
  }

  .artikel {
    display: flex;
    align-items: center;
  }

  .artikel .kiri_artikel {
    width: 90vh;
    height: 330px;
  }

  .artikel .kanan_artikel {
    width: 100%;
    height: 50vh;
    gap: 20px;
  }

  .detail_teks p {
    font-size: 18px;
  }

  .detail_teks .sumber {
    font-size: 12px;
  }

  .detail_teks .tanggal {
    font-size: 14px;
  }

  .detail_konsultasi {
    margin-left: 26vh;
  }

  .detail_konsultasi h3 {
    font-size: 10px;
  }

  section.about_section {
    margin: 28px 30px;
  }

  .teks_about h1 {
    font-size: 18px;
  }

  .teks_about p {
    font-size: 14px;
  }

  .teks_about button {
    font-size: 12px;
    padding: 8px 12px;
    width: 40%;
  }

  .teks_about {
    padding: 0 28px;
    gap: 20px;
  }

  .mobile_card .mobile_card1 img {
    width: 240px;
    height: 240px;
  }

  .mobile_card .mobile_card1 p {
    font-size: 14px;
  }

  /* Index Responsive End */

  /* BMI Responsive Start */

  .bmi_main .info_bmi {
    gap: 32px;
  }

  .bmi_main .info_bmi .pola_makan_kurus,
  .bmi_main .info_bmi .pola_makan_ideal {
    width: 400px;
    height: 130px;
  }

  .penyakit_obesitas,
  .penyakit_kurus,
  .penyakit_ideal {
    width: 400px;
    height: 130px;
  }


  .bmi_main .info_bmi .pola_makan_kurus p,
  .bmi_main .info_bmi .pola_makan_ideal p {
    font-size: 14px;
  }

  .bmi_main .info_bmi .pola_makan_kurus button,
  .bmi_main .info_bmi .pola_makan_ideal button {
    padding: 6px;
    font-size: 12px;
    width: 60%;
  }

  .penyakit_obesitas h4,
  .penyakit_kurus h4,
  .penyakit_ideal h4 {
    font-size: 14px;
  }

  .bmi_main .info_bmi .pola_makan_kurus .image_makan img,
  .bmi_main .info_bmi .pola_makan_ideal .image_makan img {
    width: 80px;
    height: 80px;
    border-radius: 5%;
  }

  .program1,
  .program2,
  .program3 {
    width: 220px;
    height: 350px;
  }

  .program1 img,
  .program2 img,
  .program3 img {
    width: 220px;
    height: 250px;
  }

  .program1_nama h1,
  .program2_nama h1,
  .program3_nama h1 {
    font-size: 16px;
  }

  .program1_reps p,
  .program2_reps p,
  .program3_reps p {
    font-size: 14px;
  }

  .title_program h1 {
    font-size: 20px;
  }

  .program_obesitas h2,
  .program_kurus h2,
  .program_menjaga h2 {
    font-size: 16px;
  }

  .penyakit_obesitas ul li,
  .penyakit_kurus ul li {
    font-size: 12px;
  }


  /* BMI Responsive End */
}

@media screen and (max-width: 800px) {

  /* Index Responsive Start */

  .card_artikel {
    width: 220px;
  }

  .detail_artikel2 img {
    width: 220px;
    height: 150px;
  }

  .selengkapnya img {
    width: 220px;
    height: 150px;
  }

  .hamburger {
    display: flex;
  }

  .Navbar {
    display: none;
  }

  .nav_hamburger a {
    padding: 15px;
    text-align: center;
  }

  section.hero_section .teks h1 {
    font-size: 60px;
  }

  section.hero_section .teks p {
    font-size: 16px;
  }

  section.hero_section .teks button {
    padding: 8px 32px;
    font-size: 14px;
  }

  .detail_konsultasi {
    margin-left: 20vh;
  }

  section.second_section .title2 h1 {
    font-size: 16px;
  }

  .teks_about p {
    font-size: 14px;
  }

  .teks_about {
    padding: 0 20px;
  }

  .detail_about img {
    width: 450px;
    height: 250px;
  }

  .mobile_card .mobile_card1 img {
    width: 220px;
    height: 220px;
  }

  /* Index Responsive End */


  /* BMI Responsive Start */

  .detail_hasil {
    font-size: 14px;
  }

  .image_hasil .kurus_hasil img,
  .image_hasil .normal_hasil img,
  .image_hasil .gemuk_hasil img {
    width: 80px;
    height: 100px;
  }

  .image_hasil .obesitas_hasil img {
    width: 80px;
    height: 100px;
  }

  .bmi_scale div {
    display: flex;
    padding: 8px 40px;
  }

  .image_hasil {
    gap: 42px;
  }

  .program1,
  .program2,
  .program3 {
    width: 200px;
    height: 340px;
  }

  .program1 img,
  .program2 img,
  .program3 img {
    width: 200px;
    height: 220px;
  }

  .penyakit_obesitas ul li,
  .penyakit_kurus ul li {
    font-size: 10px;
  }



  /* BMI Responsive End */
}

@media screen and (max-width: 728px) {

  /* Index Responsive Start */

  .title4 h1 {
    font-size: 16px;
  }

  .artikel .kiri_artikel {
    width: 75vh;
    height: 330px;
  }

  .artikel .kanan_artikel {
    width: 95%;
    height: 50vh;
    gap: 20px;
  }

  .card_artikel {
    width: 200px;
  }

  .detail_artikel2 img {
    width: 200px;
    height: 150px;
  }

  .selengkapnya img {
    width: 200px;
    height: 150px;
  }

  .detail_teks2 h3 {
    font-size: 14px;
  }

  .detail_sumber2 .sumber {
    font-size: 10px;
  }

  .detail_sumber2 .tanggal {
    font-size: 10px;
  }

  .detail_konsultasi {
    margin-left: 16vh;
  }

  .detail_about img {
    width: 420px;
    height: 220px;
  }

  .teks_about button {
    font-size: 12px;
    padding: 8px 12px;
    width: 40%;
  }

  .teks_about p {
    font-size: 12px;
  }

  /* Index Responsive End */


  /* BMI Responsive Start */

  .bmi_main .bmi_input input {
    height: 45px;
    width: 400px;
  }

  .img_bmi img {
    width: 450px;
    height: 300px;
  }

  .gender_pria button {
    width: 90%;
    height: 90%;
  }

  .gender_wanita button {
    width: 90%;
    height: 90%;
  }

  .program_cardio,
  .program_atas,
  .program_core,
  .program_fleksibel,
  .program_angkat_beban,
  .program_hiit,
  .program_fungsional,
  .program_core,
  .program_kekuatan,
  .program_kardio,
  .program_yoga,
  .program_fungsional2 {
    gap: 26px;
  }

  .penyakit_obesitas ul li,
  .penyakit_kurus ul li {
    font-size: 10px;
  }

  .penyakit_obesitas h4,
  .penyakit_kurus h4,
  .penyakit_ideal h4 {
    font-size: 10px;
  }

  .bmi_main .info_bmi .pola_makan_kurus button,
  .bmi_main .info_bmi .pola_makan_ideal button {
    padding: 8px;
    font-size: 8px;
    width: 60%;
  }

  .bmi_main .info_bmi .pola_makan_kurus .image_makan img,
  .bmi_main .info_bmi .pola_makan_ideal .image_makan img {
    width: 80px;
    height: 80px;
  }

  .bmi_main .info_bmi .pola_makan_kurus p,
  .bmi_main .info_bmi .pola_makan_ideal p {
    font-size: 12px;
  }



  /* BMI Responsive End */
}

@media screen and (max-width: 676px) {

  /* Index Responsive Start */

  .artikel .kiri_artikel {
    width: 70vh;
    height: 300px;
  }

  .card_artikel {
    width: 160px;
  }

  .detail_artikel2 img {
    width: 160px;
    height: 120px;
  }

  .selengkapnya img {
    width: 160px;
    height: 120px;
  }

  .detail_teks2 h3 {
    font-size: 12px;
  }

  .detail_sumber2 .sumber {
    font-size: 8px;
  }

  .detail_sumber2 .tanggal {
    font-size: 8px;
  }

  .detail_konsultasi {
    margin-left: 14vh;
  }

  section.about_section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
  }

  .detail_about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }

  .teks_about {
    display: flex;
    text-align: center;
    align-items: center;
  }

  .detail_about img {
    width: 450px;
    height: 250px;
  }

  .teks_about h1 {
    font-size: 20px;
  }

  .teks_about p {
    font-size: 16px;
  }

  /* Index Responsive End */

  /* BMI Responsive Start */

  .program1,
  .program2,
  .program3 {
    width: 180px;
    height: 320px;
  }

  .program1 img,
  .program2 img,
  .program3 img {
    width: 180px;
    height: 200px;
  }

  .program1_nama h1,
  .program2_nama h1,
  .program3_nama h1 {
    font-size: 14px;
  }

  .program1_reps p,
  .program2_reps p,
  .program3_reps p {
    font-size: 12px;
  }

  .program_cardio,
  .program_atas,
  .program_core,
  .program_fleksibel,
  .program_angkat_beban,
  .program_hiit,
  .program_fungsional,
  .program_core,
  .program_kekuatan,
  .program_kardio,
  .program_yoga,
  .program_fungsional2 {
    gap: 20px;
  }


  /* BMI Responsive End */
}

@media screen and (max-width: 612px) {

  /* Index Responsive Start */

  .artikel .kiri_artikel {
    width: 70vh;
    height: 300px;
  }

  .detail_konsultasi {
    margin-left: 10vh;
  }

  .mobile_card .mobile_card1 img {
    width: 200px;
    height: 200px;
  }

  .mobile_card .mobile_card1 p {
    font-size: 12px;
  }

  /* Index Responsive End */


  /* BMI Responsive Start */

  .bmi_title {
    text-align: center;
  }

  .image_hasil .kurus_hasil img,
  .image_hasil .normal_hasil img,
  .image_hasil .gemuk_hasil img {
    width: 80px;
    height: 100px;
  }

  .image_hasil .obesitas_hasil img {
    width: 80px;
    height: 100px;
  }

  .bmi_scale div {
    display: flex;
    padding: 8px 28px;
  }

  .image_hasil {
    gap: 32px;
  }

  .program_cardio,
  .program_atas,
  .program_core,
  .program_fleksibel,
  .program_angkat_beban,
  .program_hiit,
  .program_fungsional,
  .program_core,
  .program_kekuatan,
  .program_kardio,
  .program_yoga,
  .program_fungsional2 {
    gap: 18px;
  }


  .program1,
  .program2,
  .program3 {
    width: 160px;
    height: 280px;
  }

  .program1 img,
  .program2 img,
  .program3 img {
    width: 160px;
    height: 180px;
  }

  .program1_nama h1,
  .program2_nama h1,
  .program3_nama h1 {
    font-size: 14px;
  }

  .program1_reps p,
  .program2_reps p,
  .program3_reps p {
    font-size: 12px;
  }

  .title_program h1 {
    font-size: 18px;
  }

  .program_obesitas h2,
  .program_kurus h2,
  .program_menjaga h2 {
    font-size: 14px;
  }

  .penyakit_obesitas ul li,
  .penyakit_kurus ul li {
    font-size: 8px;
  }

  .penyakit_obesitas h4,
  .penyakit_kurus h4,
  .penyakit_ideal h4 {
    font-size: 8px;
  }

  .bmi_main .info_bmi .pola_makan_kurus button,
  .bmi_main .info_bmi .pola_makan_ideal button {
    padding: 8px;
    font-size: 6px;
    width: 60%;
  }

  .bmi_main .info_bmi .pola_makan_kurus .image_makan img,
  .bmi_main .info_bmi .pola_makan_ideal .image_makan img {
    width: 60px;
    height: 60px;
  }

  .bmi_main .info_bmi .pola_makan_kurus p,
  .bmi_main .info_bmi .pola_makan_ideal p {
    font-size: 10px;
  }

  /* BMI Responsive End*/
}

@media screen and (max-width: 548px) {

  /* Index Responsive Start*/

  .detail_konsultasi {
    margin-left: 6vh;
  }

  .detail_artikel2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .selengkapnya {
    grid-template-columns: repeat(2, 1fr);
  }

  .artikel .kiri_artikel {
    width: 55vh;
    height: 250px;
  }

  .artikel .kanan_artikel {
    width: 100%;
    height: 50vh;
    gap: 20px;
  }

  .title3 h1 {
    font-size: 16px;
  }

  .detail_teks p {
    font-size: 14px;
  }

  .detail_teks .sumber {
    font-size: 8px;
  }

  .detail_teks .tanggal {
    font-size: 8px;
  }

  .card_artikel {
    width: 200px;
  }

  .detail_artikel2 img {
    width: 200px;
    height: 100px;
  }

  .selengkapnya img {
    width: 200px;
    height: 100px;
  }

  .detail_teks2 h3 {
    font-size: 14px;
  }

  .detail_sumber2 .sumber {
    font-size: 10px;
  }

  .detail_sumber2 .tanggal {
    font-size: 10px;
  }

  /* Index Responsive End */


  /* BMI Responsive Start */

  .img_bmi img {
    width: 400px;
    height: 250px;
  }

  .gender_pria button {
    width: 90%;
    height: 90%;
  }

  .gender_wanita button {
    width: 90%;
    height: 90%;
  }

  .image_hasil .kurus_hasil img,
  .image_hasil .normal_hasil img,
  .image_hasil .gemuk_hasil img {
    width: 60px;
    height: 80px;
  }

  .image_hasil .obesitas_hasil img {
    width: 60px;
    height: 80px;
  }

  .bmi_scale div {
    display: flex;
    padding: 8px 10px;
  }

  .image_hasil {
    gap: 32px;
  }

  .program1,
  .program2,
  .program3 {
    width: 145px;
    height: 260px;
  }

  .program1 img,
  .program2 img,
  .program3 img {
    width: 145px;
    height: 160px;
  }

  .program1_nama h1,
  .program2_nama h1,
  .program3_nama h1 {
    font-size: 12px;
  }

  .program1_reps p,
  .program2_reps p,
  .program3_reps p {
    font-size: 10px;
  }

  .program_cardio,
  .program_atas,
  .program_core,
  .program_fleksibel,
  .program_angkat_beban,
  .program_hiit,
  .program_fungsional,
  .program_core,
  .program_kekuatan,
  .program_kardio,
  .program_yoga,
  .program_fungsional2 {
    gap: 12px;
  }

  .penyakit_obesitas ul li,
  .penyakit_kurus ul li {
    font-size: 6px;
  }

  .penyakit_obesitas h4,
  .penyakit_kurus h4,
  .penyakit_ideal h4 {
    font-size: 6px;
  }

  .bmi_main .info_bmi .pola_makan_kurus .image_makan img,
  .bmi_main .info_bmi .pola_makan_ideal .image_makan img {
    width: 50px;
    height: 50px;
  }

  .bmi_main .info_bmi .pola_makan_kurus p,
  .bmi_main .info_bmi .pola_makan_ideal p {
    font-size: 8px;
  }

  .penyakit_obesitas,
  .penyakit_kurus,
  .penyakit_ideal {
    width: 500px;
    height: 100px;
  }

  .bmi_main .info_bmi .pola_makan_kurus,
  .bmi_main .info_bmi .pola_makan_ideal {
    width: 500px;
    height: 100px;
  }

  

  /* BMI Responsive End */
}

@media screen and (max-width: 472px) {

  /* Index Responsive Start */

  .detail_artikel2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .selengkapnya {
    grid-template-columns: repeat(2, 1fr);
  }

  .artikel .kiri_artikel {
    width: 45vh;
    height: 250px;
  }

  .artikel .kanan_artikel {
    width: 100%;
    height: 50vh;
    gap: 20px;
  }

  .title3 h1 {
    font-size: 16px;
  }

  .detail_teks p {
    font-size: 14px;
  }

  .detail_teks .sumber {
    font-size: 8px;
  }

  .detail_teks .tanggal {
    font-size: 8px;
  }

  .card_artikel {
    width: 150px;
  }

  .detail_artikel2 img {
    width: 150px;
    height: 80px;
  }

  .selengkapnya img {
    width: 150px;
    height: 80px;
  }

  .detail_teks2 h3 {
    font-size: 14px;
  }

  .detail_sumber2 .sumber {
    font-size: 8px;
  }

  .detail_sumber2 .tanggal {
    font-size: 8px;
  }

  section.hero_section .teks {
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    padding: 10px 0px;
    width: 80%;
    /* text-align: center; */
  }

  section.hero_section .teks h1 {
    font-size: 30px;
  }

  section.hero_section .teks p {
    font-size: 14px;
  }

  section.hero_section .teks button {
    padding: 4px 50px;
    font-size: 12px;
  }

  .detail_konsultasi {
    margin-left: 0vh;
  }

  .detail_konsultasi h3 {
    font-size: 10px;
  }

  .detail_konsultasi img {
    width: 30px;
    height: 30px;
  }

  .detail_about img {
    width: 200px;
    height: 150px;
  }

  .teks_about h1 {
    font-size: 18px;
  }

  .teks_about p {
    font-size: 14px;
  }

  .mobile_card .mobile_card1 img {
    width: 100px;
    height: 100px;
  }

  .mobile_card .mobile_card1 p {
    font-size: 10px;
  }

  .nav_footer {
    font-size: 16px;
  }

  .logo_footer img {
    width: 60px;
    height: 45px;
  }

  .Copyright p {
    font-size: 12px;
  }

  /* Index Responsive End */

  /* BMI Responsive Start */

  .bmi_main .bmi_gender {
    gap: 32px;
  }

  .bmi_title h1 {
    font-size: 20px;
  }

  .bmi_title p {
    font-size: 14px;
  }

  .img_bmi img {
    width: 300px;
    height: 200px;
  }

  .bmi_main .bmi_input input {
    height: 45px;
    width: 300px;
  }

  .bmi_main .bmi_input p {
    font-size: 14px;
  }

  .gender_pria button {
    width: 100%;
    height: 90%;
  }

  .gender_wanita button {
    width: 100%;
    height: 90%;
  }

  .program1,
  .program2,
  .program3 {
    width: 110px;
    height: 220px;
  }

  .program1 img,
  .program2 img,
  .program3 img {
    width: 110px;
    height: 120px;
  }

  .program1_nama h1,
  .program2_nama h1,
  .program3_nama h1 {
    font-size: 10px;
    margin: 4px 16px;
  }

  .program1_reps p,
  .program2_reps p,
  .program3_reps p {
    font-size: 8px;
  }

  .title_program h1 {
    font-size: 14px;
  }

  .program_obesitas h2,
  .program_kurus h2,
  .program_menjaga h2 {
    font-size: 12px;
  }


  .program_cardio,
  .program_atas,
  .program_core,
  .program_fleksibel,
  .program_angkat_beban,
  .program_hiit,
  .program_fungsional,
  .program_core,
  .program_kekuatan,
  .program_kardio,
  .program_yoga,
  .program_fungsional2 {
    gap: 8px;
  }

  
  .penyakit_obesitas,
  .penyakit_kurus,
  .penyakit_ideal {
    width: 400px;
    height: 120px;
  }

  .bmi_main .info_bmi .pola_makan_kurus,
  .bmi_main .info_bmi .pola_makan_ideal {
    width: 400px;
    height: 120px;
  }

  .bmi_main .info_bmi .pola_makan_kurus .image_makan img,
  .bmi_main .info_bmi .pola_makan_ideal .image_makan img {
    width: 50px;
    height: 50px;
  }

  .bmi_main .info_bmi .pola_makan_kurus p,
  .bmi_main .info_bmi .pola_makan_ideal p {
    font-size: 6px;
  }

  .bmi_main .info_bmi .pola_makan_kurus button,
  .bmi_main .info_bmi .pola_makan_ideal button {
    padding: 8px;
    font-size: 8px;
    width: 100%;
  }

  .penyakit_obesitas ul li,
  .penyakit_kurus ul li {
    font-size: 6px;
  }

  .penyakit_obesitas h4,
  .penyakit_kurus h4,
  .penyakit_ideal h4 {
    font-size: 6px;
  }

  .image_hasil .kurus_hasil img,
  .image_hasil .normal_hasil img,
  .image_hasil .gemuk_hasil img {
    width: 60px;
    height: 80px;
  }

  .image_hasil .obesitas_hasil img {
    width: 60px;
    height: 80px;
  }

  .bmi_scale div {
    display: flex;
    padding: 8px 10px;
  }

  .image_hasil {
    gap: 32px;
  }

  .kurus h4,
  .gemuk h4,
  .normal h4,
  .obesitas h4{
    font-size: 16px;
  }
  .kurus p,
  .gemuk p,
  .normal p,
  .obesitas p{
    font-size: 12px;
  }




  /* BMI Responsive End */
}

/* Media Responsive End */