* {
  margin: 0;
  padding: 0;
  font-family: Inter;
}

.user {
  /* background-color: blue; */
  width: 40px;
  height: 40px;
  position: relative;
  top: 6px;
}

.user span {
  color: white;
  background-color: red;
  position: absolute;
  right: 2px;
  top: -9px;
  width: 20px;
  height: 20px;
  text-align: center;
  border-radius: 10px;
}

/* TUGAS ICON MENU */
.icon-menu {
  display: none;
}
#navigasi {
  position: sticky;
  top: 0px;
  background-color: white;
}

#navigasi li {
  position: relative;
}
/* Header */
.container-navigasi {
  /* background-color: bisque; */
  display: flex;
  margin-left: 5%;
  margin-right: 5%;
  justify-content: space-between;
  height: 60px;
  /* font-family: inter; */
  padding-right: 20px;
  align-items: center;
}

.logo-header {
  /* background-color: blueviolet; */
  display: flex;

  font-size: 20px;
  align-items: center;
}

.logo-header img {
  margin-right: 10px;
}

.list-navigasi {
  /* background-color: chocolate; */
  display: flex;
  align-items: center;
}
.list-navigasi li {
  list-style: none;
  margin-left: 30px;
  /* margin-top: 18px; */
  /* background-color:  */

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.dropdown-menu {
  display: none;
  position: absolute;
  list-style: none;
  top: 100%;
  background-color: red;
}
.dropdown-menu a {
  width: 150px;
  display: block;
}

.button-register {
  background-color: #faa613;
  border: none;
  color: white;
  font-size: 18px;
  border-radius: 7px;
  padding: 10px;
}

/* Banner */
#banner {
  background-color: #eeeeee;
}
.container-banner {
  /* background-color: yellow; */
  display: flex;
  margin-left: 5%;
  margin-right: 5%;
  justify-content: space-between;
  font-family: Inter;
  align-items: center;
  margin-bottom: 20px;
}

.belajar {
  /* background-color: chocolate; */
  padding-left: 40px;
  padding-top: 40px;
}

.belajar h1 {
  color: #4d4d4d;
  font-size: 50px;
  margin-bottom: 5px;
}
.belajar h2 {
  color: #faa613;
  font-size: 40px;
  margin-bottom: 20px;
}

.belajar p {
  font-size: 20px;
  margin-bottom: 30px;
  letter-spacing: 1px;
  color: #717171;
}

.belajar button {
  background-color: #faa613;
  color: white;
  border: none;
  font-size: 22px;
  padding: 20px 30px;
  margin-left: 2px;
  border-radius: 10px;
}
.kami {
  text-align: center;
  font-family: Inter;
  font-size: 34px;
  margin-bottom: 7px;
}
.clien {
  font-size: 15px;
  text-align: center;
}
.baka {
  margin-bottom: 25px;
}

.logo {
  justify-content: space-between;
  display: flex;
  margin-left: 120px;
  margin-right: 120px;
  margin-bottom: 60px;
}

.proyek {
  text-align: center;
  font-size: 25px;
  margin-bottom: 20px;
}
/* SAHAM */
.siapa {
  color: #717171;
  text-align: center;
  margin-bottom: 30px;
}

/*  */
.membership {
  justify-content: space-between;
  display: flex;
  text-align: center;
  margin-left: 230px;
  margin-right: 230px;
}

.height {
  margin-bottom: 200vh;
}

.membership {
  display: flex;
  margin-bottom: 40px;
}
/* .first {
    
    box-shadow: 0px 2px rgba(0,0,0,0.1);
    
}

.second {
    box-shadow: 0px 2px rgba(0,0,0,0.1);
}

.third {
    box-shadow: 0px 2px rgba(0,0,0,0.1); */

.satu {
  font-size: 20px;
  font-family: Inter;
  margin-top: 15px;
  font-weight: 600;
}
.satuan {
  font-weight: 400;
  font-family: Inter;
  color: #717171;
  margin-bottom: 20px;
}

.kedua {
  font-size: 20px;
  font-family: Inter;
  margin-top: 15px;
  font-weight: 600;
}
.duaan {
  font-weight: 400;
  font-family: Inter;
  color: #717171;
  margin-bottom: 20px;
}

.tiga {
  font-size: 20px;
  font-family: Inter;
  margin-top: 15px;
  font-weight: 600;
}

.tigaan {
  font-weight: 400;
  font-family: Inter;
  color: #717171;
  margin-bottom: 20px;
}

/* CONTAINER MID (Hal yang terlihat selama tiga tahun di Abudzar )*/
.mid-art {
  display: flex;
  justify-content: space-between;
}
.mid-image {
  margin-left: 200px;
}
.mid-image img {
  width: 400px;
}

.mid-first {
  font-size: 30px;
  color: #4d4d4d;
  margin-bottom: 20px;
  font-family: Inter;
}

.mid-deks {
  color: #4d4d4d;
  font-weight: 350;
  margin-right: 220px;
  margin-bottom: 25px;
}

.learn-more {
  background-color: #faa613;
  border: none;
  color: white;
  font-size: 18px;
  border-radius: 4px;
  padding: 4px;
  height: 60px;
  width: 150px;
  margin-bottom: 70px;
}

/* Membatu Santrimengupgrade dirinya  */
.santri-parent {
  display: flex;
  margin-left: 00px;
  background-color: #e9eef5;
  margin-right: 00px;
  height: 400px;
}

.santri-kiri {
  font-size: 30px;
  margin-top: 100px;
  margin-right: 200px;
  margin-left: 200px;
}
.santri-kiri p {
  font-size: 16px;
}
.santri-parent span {
  color: #faa613;
}

.santri-kanan {
  margin-top: 100px;
}
/* BOX SANTRI */
.boxsantrii {
  margin-bottom: 40px;
}

.boxsantri p {
  margin-left: 60px;
  color: #4d4d4d;
  font-weight: 500;
}
.boxsantri img {
  margin-bottom: -20px;
  margin-left: -20px;
}
.angka {
  font-weight: 700;
  color: #4d4d4d;
  font-size: 30px;
  margin-top: -60px;
  margin-left: 60px;
}

/*                       BOX KOMUNITAS    */

.boxkomunitass {
  margin-bottom: 50px;
  margin-top: -40px;
}
.boxkomunitas p {
  margin-left: 340px;
  color: #4d4d4d;
  font-weight: 500;
  margin-top: 5px;
}

.boxkomunitas img {
  margin-top: -130px;
  margin-left: 270px;
}
.angkakomunitas {
  font-weight: 700;
  color: #4d4d4d;
  font-size: 30px;
  margin-top: -59px;
  margin-left: 340px;
}

/* BOX KOMENTAR */
.boxkomentar p {
  margin-left: 60px;
  color: #4d4d4d;
  font-weight: 500;
  margin-top: -20px;
}

.boxkomentar img {
  margin-top: -40px;
  margin-left: -23px;
}
.angkakomentar {
  font-weight: 700;
  color: #4d4d4d;
  font-size: 30px;
  margin-top: -55px;
  margin-left: 60px;
}

/* BOX PEMBAYARAN */
.boxpembayaran p {
  margin-left: 340px;
  color: #4d4d4d;
  font-weight: 500;
  margin-top: -20px;
}

.boxpembayaran img {
  margin-top: 20px;

  margin-left: 270px;
}

.angkapembayaran {
  font-weight: 700;
  color: #4d4d4d;
  font-size: 30px;
  margin-top: -60px;
  margin-left: 340px;
}

/* KURIKULUM */

.kurikulum {
  display: flex;
}

.gambar {
  margin-top: 100px;
  margin-left: 300px;
}

.bagaimana {
  font-size: 20px;
  color: #4d4d4d;
  margin-top: 100px;
  margin-left: 200px;
}
.bagaimana p {
  font-size: 14px;
  color: #4d4d4d;
  width: 600px;
  margin-bottom: 50px;
}

.buttonswitch {
  background-color: #faa613;
  border: none;
  color: white;
  font-size: 18px;
  border-radius: 4px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 100px;
}
.timehacker {
  background-color:#e7edf5;
}
.timekiri {
  margin-left: 200px;
  display: flex;
}
.timekiri p {
  margin-top: 45px;
  margin-left: 100px;
  width: 600px;
  color: #4d4d4d;
}
.timekiri img {
  margin-left: 80px;
  margin-top: 20px;
  margin-bottom: 20px;
}

  

.timehacker h1 {
  margin-left: 300px;
}



@media only screen and (max-width: 745px) {
  .icon-menu {
    display: block;
  }
}