@media (max-width: 768px) {

  /* ====================================================================================================
  ============ HEADER NAVBAR UNTUK LAYAR KECIL ==========================================================
  ==================================================================================================== */
  
    #menuToggle {
      display: block;
      position: fixed;
      top: 30px; /* Sesuaikan jarak dari atas */
      right: 20px; /* Sesuaikan jarak dari kanan */
      z-index: 1;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  
    #menuToggle input {
      display: block;
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;
      cursor: pointer;
      opacity: 0; /* Hide the checkbox */
      z-index: 2; /* Position it over the hamburger */
      -webkit-touch-callout: none;
    }
  
    #menuToggle span {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
      background: #cdcdcd;
      border-radius: 3px;
      z-index: 1;
      transform-origin: 4px 0px;
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
                  background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
                  opacity 0.55s ease;
    }
  
    #menuToggle span:first-child {
      transform-origin: 0% 0%;
    }
  
    #menuToggle span:nth-last-child(2) {
      transform-origin: 0% 100%;
    }
  
    #menuToggle input:checked ~ span {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
      background: #232323;
    }
  
    #menuToggle input:checked ~ span:nth-last-child(3) {
      opacity: 0;
      transform: rotate(0deg) scale(0.2, 0.2);
    }
  
    #menuToggle input:checked ~ span:nth-last-child(2) {
      transform: rotate(-45deg) translate(0, -1px);
    }
  
    #menu {
      box-sizing: border-box;
      position: fixed;
      top: 0;
      right: 0;
      width: 100vw; /* Lebar penuh pada layar kecil */
      height: 100vh;
      padding: 20px;
      padding-top: 70px;
      background: #ededed;
      list-style-type: none;
      -webkit-font-smoothing: antialiased;
      transform: translateX(100%);
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    }
  
    #menu > li:not(.dropdown-item) {
      padding: 15px;
      position: relative;
    }
  
    #menuToggle input:checked ~ ul {
      transform: translateX(0);
    }
  
    .navbar-toggler {
      display: none;
    }
  
    #menuToggle a {
      color: rgb(0, 0, 0); /* Warna teks link di menu */
      text-decoration: none; /* Menghapus garis bawah pada link */
    }
  
    #menuToggle a:hover {
      color: rgb(0, 113, 200); /* Warna link saat hover */
    }
  
    /* Styling untuk dropdown menu */
    .dropdown-menu {
      background-color: black; /* Warna latar belakang dropdown menu */
      border: none; /* Menghapus border */
    }
  
    .dropdown-menu a {
      color: white; /* Warna teks link di dropdown menu */
    }
  
    .dropdown-menu a:hover {
      color: rgb(0, 113, 200); /* Warna link saat hover di dropdown menu */
    }
  }

@media (max-width: 992px) and (min-width: 768px) {

    /* ====================================================================================================
    ============ HEADER NAVBAR ============================================================================
    ==================================================================================================== */

      /* Basic menu styling */
      .menuToggle {
        position: relative;
      }

      #menu {
        list-style-type: none;
        padding: 0;
      }

      #menu > li:not(.dropdown-item) {
        padding: 15px;
        position: relative;
      }
      
      #menuToggle {
        display: block;
        position: fixed;
        top: 30px; /* Adjusted for header spacing */
        right: 30px; /* Adjusted for alignment */
        z-index: 1;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
    
      #menuToggle input {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;
        cursor: pointer;
        opacity: 0; /* Hide the checkbox */
        z-index: 2; /* Position it over the hamburger */
        -webkit-touch-callout: none;
      }
    
      #menuToggle span {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;
        background: #cdcdcd;
        border-radius: 3px;
        z-index: 1;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
                    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
                    opacity 0.55s ease;
      }
    
      #menuToggle span:first-child {
        transform-origin: 0% 0%;
      }
    
      #menuToggle span:nth-last-child(2) {
        transform-origin: 0% 100%;
      }
    
      #menuToggle input:checked ~ span {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #232323;
      }
    
      #menuToggle input:checked ~ span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
      }
    
      #menuToggle input:checked ~ span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0, -1px);
      }
    
      #menu {
        box-sizing: border-box;
        position: fixed;
        top: 0;
        right: 0;
        width: 55vw; /* Set the maximum width to 50% of the viewport width */
        height: 100vh;
        padding: 50px;
        padding-top: 125px;
        background: #ededed;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        transform: translateX(100%);
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
      }
    
      #menu li {
        font-size: 22px;
      }
    
      #menuToggle input:checked ~ ul {
        transform: translateX(0);
      }
    
      .navbar-toggler {
        display: none;
      }
    
      #menuToggle a {
        color: rgb(0, 0, 0); /* Warna teks link di menu */
        text-decoration: none; /* Menghapus garis bawah pada link */
      }
    
      #menuToggle a:hover {
        color: rgb(0, 113, 200); /* Warna link saat hover */
      }
    
      /* Styling untuk dropdown menu */
      .dropdown-menu {
        background-color: black; /* Warna latar belakang dropdown menu */
        border: none; /* Menghapus border */
      }
    
      .dropdown-menu a {
        color: white; /* Warna teks link di dropdown menu */
      }
    
      .dropdown-menu a:hover {
        color: rgb(0, 113, 200); /* Warna link saat hover di dropdown menu */
      }
    }