body {
  width: 100%;
  height: 100vh;
  background-color: rgb( 150, 185, 182 );
  background-image: url('images/bgkesehatan.jpg');
  background-size: 100% 100%;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.dropdown-menu {
  &.show {
    -webkit-animation: fadeIn 0.3s alternate;
    /* Safari 4.0 - 8.0 */
    animation: fadeIn 0.3s alternate;
  }
}

.nav-item.dropdown.dropdown-mega {
  position: static;

  .dropdown-menu {
    width: 90%;
    top: auto;
    left: 5%;
  }
}

.navbar-toggler {
  border: none;
  padding: 0;
  outline: none;

  &:focus {
    box-shadow: none;
  }

  .hamburger-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    z-index: 11;
    float: right;

    .hamburger {
      position: absolute;
      transform: translate(-50%, -50%) rotate(0deg);
      left: 50%;
      top: 50%;
      width: 50%;
      height: 50%;
      pointer-events: none;

      span {
        width: 100%;
        height: 4px;
        position: absolute;
        background: #333;
        border-radius: 2px;
        z-index: 1;
        transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1.0), all 0.2s ease-in-out;
        left: 0px;

        &:first-child {
          top: 10%;
          transform-origin: 50% 50%;
          transform: translate(0% -50%) !important;
        }

        &:nth-child(2) {
          top: 50%;
          transform: translate(0, -50%);
        }

        &:last-child {
          left: 0px;
          top: auto;
          bottom: 10%;
          transform-origin: 50% 50%;
        }
      }

      &.active {
        span {
          position: absolute;
          margin: 0;

          &:first-child {
            top: 45%;
            transform: rotate(45deg);
          }

          &:nth-child(2) {
            left: 50%;
            width: 0px;
          }

          &:last-child {
            top: 45%;
            transform: rotate(-45deg);
          }
        }
      }
    }
  }
}


.icons {
  display: inline-flex;
  margin-left: auto;

  a {
    transition: all 0.2s ease-in-out;
    padding: 0.2rem 0.4rem;
    color: #ccc !important;
    text-decoration: none;

    &:hover {
      color: white;
      text-shadow: 0 0 30px white;
    }
  }
}

.kop {
  font-size: 25px;
  color: #ebeee9;
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
  text-shadow: 0px 0px 0 rgb(-30, 42, 0),
    -1px -1px 0 rgb(-128, -56, 0),
    -2px -2px 1px rgba(230, 213, 64, 0.4),
    -2px -2px 1px rgba(230, 213, 64, 0.5),
    0px 0px 1px rgba(230, 213, 64, .2);
  padding-left: 70px;
  padding-right: 10px;
}

.navbar-nav {
  /* border: 2px solid black; */
}

.menukop {
  background: rgb(55, 147, 146);
  /* background: linear-gradient(90deg, rgba(55, 147, 146, 1) 30%, rgba(0, 212, 255, 0.6570961148131127) 70%); */
  padding-top: 10px;
  padding-bottom: 10px;
  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
  border-radius: 5px;
  /* this doesn't work */
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
}

.logo {
  margin: auto;
  display: block;
}

.navbar-nav>li {
  /* border: 2px solid black; */
  background: rgb(3, 99, 97);
  border: 5px solid whitesmoke;
  border-radius: 30px;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  padding: 10px;
}

.nav-item>a {
  color: gold;
}

.nav-item>a:active a:focus {
  color: whitesmoke;
}

.nav-link {
  color: gold;
}

.dropdown-menu {
  background: rgb(3, 99, 97);
  border: 5px solid whitesmoke;
  border-radius: 30px;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
}

.dropdown-item {
  color: gold;
}

#cari {
  background: rgb(3, 99, 97);
  border: 5px solid whitesmoke;
  border-radius: 30px;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  color: bisque;
}

.logo {
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

/* #slideshow {
  background: rgb(3, 99, 97);
  border: 5px solid whitesmoke;
  border-radius: 30px;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  color: bisque;
} */

.carousel-item>img {
  padding: 3px;
  border-radius: 40px;
  border: 5px solid rgb(146, 212, 15);
  max-height: 400px;
}

.loader {
  width: 120px;
  height: 120px;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: calc(80px / cos(45deg));
  height: 14px;
  background: repeating-linear-gradient(-45deg, rgb(146, 212, 15) 0 15px, #3b5f09d7 0 20px) left/200% 100%;
  animation: l3 2s infinite linear;
  position: fixed;
}

@keyframes l3 {
  100% {
    background-position: right
  }
}

#konten {
  background-color: white;
  padding: 2% 0 2% 0;
  border-top: 5px solid green;
  border-bottom: 5px solid green;
}

#judul {
  transform:
    rotate3d(.5, -.866, 0, 15deg) rotate(1deg);
  box-shadow:
    2em 4em 6em -2em rgba(0, 0, 0, .5),
    1em 2em 3.5em -2.5em rgba(0, 0, 0, .5);
  transition:
    transform .4s ease,
    box-shadow .4s ease;
  border-radius: .5em;

  &:hover {
    transform:
      rotate3d(0, 0, 0, 0deg) rotate(0deg);
  }
}

.guling {
  overflow: hidden;
}

.guling:hover {
  overflow: scroll;
}

.event-time,
.block-number {
  border: #e5e5e5;
  background-color: rgba(255, 4, 4, 0.973);
  display: block;
  float: left;
  height: auto;
  margin: 3px 15px 3px 0 !important;
  padding-top: 5px;
  color: rgb(255, 255, 255);
  border-radius: 5px;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
}

.scripting .block-number {
  margin: 6px 15px 3px 0 !important
}

.event {
  display: block;
  margin: 5px 0 20px;
}

.event-time .date,
.block-number .digit {
  font-size: 100%;
  padding: 9px 10px 25px;
}

.event-time .month,
.block-number .bottom {
  display: block;
  padding-bottom: 2px;
  text-align: center;
  text-transform: uppercase;
  -moz-border-radius: 0 0 4px 4px;
  -webkit-border-radius: 0 0 4px 4px;
  -ms-border-radius: 0 0 4px 4px;
  -o-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
  background-color: rgba(2, 72, 50, 0.808);
  color: white;
  font-size: 60%;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);

}

.block-number .bottom {
  min-height: 7px
}

.content-container {
  padding: 0 0 0 0;
  display: grid;
  width: 100%;
  grid-template-columns: auto auto auto;
  padding: 0px;
  margin: auto;
}

.huruf {
  font-size: 90%;
}

.hurufhit {
  font-size: 70%;
  font-style: italic;
  text-align: left;
}

#hot {
  position: absolute;
  bottom: 10px;
  right: 16px;
  font-size: 18px;
  margin-right: 0px;
  background-color: red;
  color: white;
  padding: 10px;
  font-size: 10px;
  font-weight: 800;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.75);
}

.gambarjudul {
  border: 10px solid #DBA901;
  line-height: 200%;
  -webkit-box-shadow: 2px 12px 20px -5px #000000;
  box-shadow: 2px 12px 20px -5px #000000;
  border-radius: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 200%;
}

#btnkeatas {
  display: none;
  position: fixed;
  width: 40px;
  height: 40px;
  bottom: 16px;
  right: 16px;
  z-index: 99;
  font-size: 12px;
  border: none;
  outline: none;
  background-color: rgb(24, 21, 21);
  color: white;
  cursor: pointer;
  /* padding: 5px; */
  border-radius: 50%;
}

.jadibesar {
  border: 10px solid #DBA901;
  border-radius: 10px;
  -webkit-box-shadow: 2px 12px 20px -5px #000000;
  box-shadow: 2px 12px 20px -5px #000000;
  max-width: fit-content;
  margin: auto;
  display: block;
}

.list-group>a {
  background-color: rgb(239, 240, 241);
  border-radius: 5px;
  border: 1px solid greenyellow;
}

.list-group>a:hover {
  background-color: rgb(9, 139, 129);
  border-radius: 5px;
  border: 1px solid rgb(136, 208, 29);
  color: gold;
}

a:link {
  text-decoration: none;
  color: goldenrod;
  font-weight: 700;
}

a:link:hover {
  text-decoration: wavy;
  color: gold;
  font-weight: 700;
}

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 48.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.container {
  width: 100%;
}

input.form-control, textarea.form-control, select.form-select {
  border: 2px solid rgb(49, 3, 133); /* Garis hitam */
  border-radius: 5px; /* Opsional: membuat sudut sedikit melengkung */
  box-shadow: none; /* Menghilangkan efek bayangan */
}

/* Fokus dengan garis hitam */
input.form-control:focus, 
textarea.form-control:focus, 
select.form-select:focus {
  border-color: rgb(230, 6, 6); /* Garis tetap hitam saat fokus */
  outline: none; /* Menghilangkan outline biru default */
  box-shadow: none; /* Menghindari bayangan fokus */
}

.rak-container {
  display: flex;
  justify-content: center;  /* Menyusun tombol di tengah secara horizontal */
  align-items: center;      /* Menyusun tombol di tengah secara vertikal */
  flex-wrap: wrap;
  background-color: #fafafa;
  min-height: 100%;         /* Membuat kontainer memiliki tinggi minimal sesuai dengan konten */
}

/* Animasi muncul pertama kali */
@keyframes muncul {
  0% {
    opacity: 0;
    transform: translateY(20px); /* Muncul dari bawah */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Posisi normal */
  }
}

.rak-box {
  height: 60px;
  border: 2px solid #006400;
  margin: 10px;
  text-align: center;
  line-height: 60px;
  font-weight: bold;
  background-color: #006400;
  color: white;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.3s, color 0.2s, box-shadow 0.2s, letter-spacing 0.2s;
  outline: none;
  font-size: 18px;
  padding: 10px 20px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  
  /* Menambahkan efek muncul saat pertama kali */
  animation: muncul 0.6s ease-out;
}

/* Hover effect */
.rak-box:hover {
  background-color: #228B22;
  color: gold;
  transform: scale(1.05) translate(0, -5px); /* Menciptakan gerakan vertikal sedikit */
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.4);
  letter-spacing: 2px; /* Tambahkan spasi antara huruf sedikit */
}

.rak-box:active {
  background-color: #2e8b57;
  transform: scale(0.98);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.rak-box span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease; /* Menambahkan transisi untuk pergerakan teks */
}

.rak-box:hover span {
  transform: translate(-50%, -50%) scale(1.1); /* Animasi untuk pergerakan teks lebih besar */
}

.dots {
  font-weight: bold;
  animation: blink 1.5s infinite;
}

@keyframes blink {
  0% {
      opacity: 0;
  }
  25% {
      opacity: 1;
  }
  50% {
      opacity: 0;
  }
  75% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}

.menu-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  background-color: #09790e; /* Hijau PTA Kupang */
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.menu-item {
  background-color: #d4af37; /* Warna emas */
  color: #ffffff;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.menu-item:hover {
  background-color: #b8860b; /* Emas lebih gelap */
  transform: scale(1.1);
}

.menu-arrow {
  color: white;
  font-size: 20px;
  font-weight: bold;
}