body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      background-image: url(../../../assets/top/kayu.jpg);
      background-position: center;
      background-size: contain;
      overflow: hidden;
    }

    video {
      width: 100%;
      max-height: 400px;
      border: 2px solid #ccc;
      border-radius: 8px;
      display: block;
      margin: auto;
    }

    .modal {
      display: none;
      position: fixed;
      z-index: 100;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
    }

    .modal img {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 70%;
      max-width: 500px;
      border-radius: 10px;
      opacity: 0.7;
      cursor: pointer;
      transition: opacity 0.3s ease;
    }

    .modal img:hover {
      opacity: 1;
    }

    .nav {
      background-color: #222;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      text-shadow: 0 1px 3px rgb(0 0 0 / 75%);
      z-index: 99;
      border-top: 2px solid #ffae00;
    }

    .nav .menu {
      display: flex;
      justify-content: space-around;
      padding: 5px 0;
      background: linear-gradient(to bottom, #f2ff00 0%, #fc0303 100%);
    }

    .nav .menu a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #f8f8f8;
      max-width: 75px;
      font-size: 12px;
      text-decoration: none;
    }

    .nav .menu img {
      max-width: 30%;
      margin-bottom: 5px;
    }