html, body {
  margin: 0;
  padding-top: 0;
  font-family: 'Myriad Pro Regular', sans-serif;
}

@media (min-width: 768px) {
  html, body {
    width: 600px;
    height: 100vh;
    margin: auto; /* Mengatur margin menjadi auto untuk pusat horizontal */
    padding: 0;
  }
}

@media (orientation: portrait) {
  html, body {
    width: 100vw;
    height: 100vh;
  }
}

    .font-myriad-pro {
        font-family: 'Myriad Pro Regular', sans-serif; /* Menambahkan font jenis Myriad Pro Regular */
    }

    .text-xs {
        font-size: 14px; /* Menambahkan ukuran font 10px untuk kelas text-xs */
    }

    .text-xp {
        font-size: 16px; /* Menambahkan ukuran font 10px untuk kelas text-xs */
   
    }

    .text-xl {
        font-size: 20px; /* Menambahkan ukuran font 10px untuk kelas text-xs */
    }
    @font-face {
            font-family: 'Aller Display';
            src: local('Aller Display'), url('assets/AllerDisplay.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        .font-quicksand {
            font-family: 'Quicksand', sans-serif;
        }

        .round-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background-color: #ccc;
            border-radius: 50%;
            margin-right: 8px; /* Adjust margin as needed */
        }


        .portfolio-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .portfolio-item {
            width: 48%;
            margin: 1%;
            position: relative;
            cursor: pointer;
            overflow: hidden;
        }

        .portfolio-item img {
            width: 100%;
            height: auto;
        }

        .card-container {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
      }
  
      .card {
          width: 100%; /* Set width to 100% for mobile view */
          margin: 1%;
          position: relative;
          cursor: pointer;
          overflow: hidden;
          border: 1px solid #ddd; /* Menambah border pada card */
          border-radius: 8px; /* Menambah radius border pada card */
      }
  
      .card-img {
          width: 100%;
          height: auto;
      }
        .popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
            z-index: 999;
        }

        .popup img {
            max-width: 80%;
            max-height: 80%;
            margin: auto;
            display: block;
        }

        .popup-close {
            position: absolute;
            top: 10px;
            right: 10px;
            color: white;
            cursor: pointer;
        }
        
           .centered-container {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        font-size: 11px;
    }


 /* Tambahkan style untuk ikon panah */
    .arrow-icons {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
    }

    .arrow-icon {
      width: 40px;
      height: 40px;
      border: 2px solid #333;
      border-radius: 50%;
      position: relative;
      animation: bounce 1s infinite alternate;
      margin: 0 5px;
    }

    .arrow-icon:before,
    .arrow-icon:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 15px;
      height: 3px;
      background-color: #333;
    }

    .arrow-icon:before {
      transform: rotate(45deg);
    }

    .arrow-icon:after {
      transform: rotate(-45deg);
    }

    /* Animasi bounce */
    @keyframes bounce {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-10px);
      }
    }
 

    /* Tambahkan style untuk ikon panah */
    .arrow-icons {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
    }

    .arrow-icon {
      width: 40px;
      height: 40px;
      border: 2px solid #333;
      border-radius: 50%;
      position: relative;
      animation: bounce 1s infinite alternate;
      margin: 0 5px;
    }

    .arrow-icon:before,
    .arrow-icon:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 15px;
      height: 3px;
      background-color: #333;
    }

    .arrow-icon:before {
      transform: rotate(45deg);
    }

    .arrow-icon:after {
      transform: rotate(-45deg);
    }

    /* Animasi bounce */
    @keyframes bounce {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-10px);
      }
    }