:root {
  --green-1: #d8f3dc;
  --green-2: #b7e4c7;
  --green-3: #95d5b2;
  --green-4: #74c69d;
  --green-5: #52b788;
  --green-6: #40916c;
  --green-7: #2d6a4f;
  --green-8: #1b4332;
  --green-9: #081c15;
  --text: #222423;
  --light-grey: #fbfbfb;
  --grey: #7c7c7c;
  --dark-grey: #424242;
  --bg-light: #fbfbfb;
}
body {
  background-color: var(--bg-light);
}

a,
.btn-link {
  color: var(--green-6);
}
a:hover,
.btn-link:hover {
  color: var(--green-4);
}
.btn-link {
  font-weight: 600;
}
.btn-link:hover {
  color: var(--green-9) !important;
}
.list-group-item.active {
  background-color: var(--green-5);
  color: white;
  border: 0;
}
/* .course-title {
  min-height: 56px;
}
.course-summary {
  min-height: 86px;
} */

.navbar.navbar-light {
  box-shadow: 0 10px 10px rgba(8, 28, 21, 0.06);
  min-height: 76px;
}

.navbar-brand {
  margin-right: 36px;
}
.nav-item {
  margin-right: 16px;
}
.navbar .nav-link {
  font-weight: 600;
  font-size: 16px;
  transition: ease all 0.2s;
}
.navbar .nav-item .nav-link:hover,
.navbar .nav-item.active .nav-link {
  color: var(--green-6);
}

.navbar .nav-link .bi {
  font-size: 14px;
}
.navbar-light .navbar-nav .nav-link {
  color: var(--green-9);
}

.card-kategori {
  border: 0;
  box-shadow: 0 10px 10px rgba(226, 226, 226, 0.25);
  border-radius: 20px;
  transition: ease all 0.2s;
}

.card-konselor {
  border: 0;
  border-radius: 4px;
  background-color: #f6f6f6;
}

.post h3 a {
  color: var(--green-9);
}
.post h3 a:hover {
  color: var(--green-6);
}
a.kategori {
  color: #000000;
}
a.kategori:hover {
  color: var(--green-7);
  text-decoration: none !important;
}
a.kategori:hover .card-kategori {
  background-color: var(--bg-light);
}
.btn {
  transition: ease all 0.2s;
}

.btn,
.nav-link.btn {
  padding: 0.5rem 1.2rem;
}
.btn-sm {
  padding: 0.25rem 0.5rem;
}
.btn-green {
  background-color: var(--green-5);
  color: white !important;
  font-weight: 600;
  border: 0;
}
.btn-green:hover {
  background-color: var(--green-6);
}

.mt--100 {
  margin-top: -100px !important;
}

.h24 {
  height: 24px !important;
}
.h56 {
  height: 56px !important;
}

.w100p {
  width: 100px;
  height: auto;
}

.op-1 {
  opacity: 1;
}
.op-05 {
  opacity: 0.5;
}
.op-0 {
  opacity: 0;
}

.fw-400 {
  font-weight: 400;
}
.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600;
}
.fw-700 {
  font-weight: 700;
}
.fw-800 {
  font-weight: 800;
}

.bg-green-1 {
  background-color: var(--green-1);
}
.bg-green-2 {
  background-color: var(--green-2);
}
.bg-green-3 {
  background-color: var(--green-3);
}
.bg-green-4 {
  background-color: var(--green-4);
}
.bg-green-5 {
  background-color: var(--green-5);
}
.bg-green-6 {
  background-color: var(--green-6);
}
.bg-green-7 {
  background-color: var(--green-7);
}
.bg-green-8 {
  background-color: var(--green-8);
}
.bg-green-9 {
  background-color: var(--green-9);
}
.bg-light-1 {
  background-color: var(--bg-light);
}
.btn {
  border: 0;
}

.text-red {
  color: red !important;
}
.color-green-1 {
  color: var(--green-1);
}
.color-green-2 {
  color: var(--green-2);
}
.color-green-3 {
  color: var(--green-3);
}
.color-green-4 {
  color: var(--green-4);
}
.color-green-5 {
  color: var(--green-5);
}
.color-green-6 {
  color: var(--green-6);
}
.color-green-7 {
  color: var(--green-7);
}
.color-green-8 {
  color: var(--green-8);
}
.color-green-9 {
  color: var(--green-9);
}
.color-text {
  color: var(--text);
}
.color-orange {
  color: #ffc122;
}
.color-black {
  color: #222 !important;
}

.f12 {
  font-size: 12px;
}

.f14 {
  font-size: 14px;
}

.f16 {
  font-size: 16px;
}

.f18 {
  font-size: 18px;
}

.f20 {
  font-size: 20px;
}

.f22 {
  font-size: 22px;
}
.f24 {
  font-size: 24px;
}

.f30 {
  font-size: 30px;
}

.f36 {
  font-size: 36px;
}

.f40 {
  font-size: 40px;
}

.f48 {
  font-size: 48px;
}

.f56 {
  font-size: 56px;
}

.f64 {
  font-size: 64px;
}

@media (max-width: 768px) {
  .f12-sm {
    font-size: 12px;
  }

  .f14-sm {
    font-size: 14px;
  }

  .f16-sm {
    font-size: 16px;
  }

  .f18-sm {
    font-size: 18px;
  }

  .f20-sm {
    font-size: 20px;
  }

  .f22-sm {
    font-size: 22px;
  }
  .f24-sm {
    font-size: 24px;
  }

  .f30-sm {
    font-size: 30px;
  }

  .f36-sm {
    font-size: 36px;
  }

  .f40-sm {
    font-size: 40px;
  }

  .f48-sm {
    font-size: 48px;
  }

  .f56-sm {
    font-size: 56px;
  }

  .f64-sm {
    font-size: 64px;
  }
}
.cursor-pointer {
  cursor: pointer !important;
}

.carousel-control-prev,
.carousel-control-next {
  color: var(--green-9);
  font-size: 36px;
  transition: ease all 0.2s;
  width: auto;
}

.carousel-control-prev {
  text-align: left;
  left: -24px;
}
.carousel-control-next {
  text-align: right;
  right: -24px;
}
.carousel-control-prev:hover,
.carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: var(--green-7);
}
img {
  max-width: 100% !important;
  height: auto !important;
}
.section {
  padding: 120px 0;
}
footer {
  padding: 64px 0;
  background-color: white;
}
.footer-menu a {
  font-weight: 500;
  font-size: 14px;
  margin-right: 24px;
  color: var(--green-9);
}
.footer-menu a:last-child {
  margin-right: 0;
}
@media (min-width: 1400px) {
  .container {
    /* width: 1200px; */
    max-width: 1200px;
  }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.75);
}

.nav > li > form > button.logout:focus {
  outline: none;
}

@media (max-width: 768px) {
  .section {
    padding: 48px 0;
  }
  h1 {
    font-size: 24px;
  }
}