

.border-item{
        border:1px solid #262626;border-radius: 10px;
      }
      .image-container {
          position: relative;
          overflow: hidden;
      }

      .text-overlay {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: white;
          font-size: 24px;
          font-weight: bold;
          text-align: center;
          z-index: 1;
          opacity: 1;
          background-color: rgba(0, 0, 0, 0.6); /* Black with 60% transparency */
          padding: 20px;
          border-radius: 10px; /* Optional: adds rounded corners */
          transition: opacity 0.3s ease-in-out;
      }
      .image-container:hover .text-overlay {
          opacity: 1; /* Show the text overlay on hover */
      }


      .image-container img {
          transition: transform 0.3s ease-in-out;
          width: 100%;
          height: auto;
          border-radius: 10px;
      }


      .image-container:hover img {
          transform: scale(1.1); /* Enlarge the image on hover */
      }

      .image-container:hover .text-overlay {
          opacity: 1; /* Show the text overlay on hover */
      }


      .square-image {
            width: 100%;
            height: 0;
            padding-bottom: 100%; /* Maintain square aspect ratio */
            position: relative;
        }
        .square-image img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .thumbnail {
            width: 100%;
            height: auto;
        }

          .whatsapp-btn {
            position: fixed;
            background-color: white;
            border-radius: 50%;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            background: none;
            border: none; 
            cursor: pointer;
          }

.scroll-top-container {
    position: relative; /* Agar bisa diatur */
    display: inline-block; /* Agar bisa dipusatkan */
}

.scroll-top-btn {
    background-color: white; /* Latar belakang putih */
    border-radius: 50%; /* Membuat lingkaran */
    width: 50px; /* Lebar tombol */
    height: 50px; /* Tinggi tombol */
    display: flex;
    justify-content: center; /* Memusatkan ikon secara horizontal */
    align-items: center; /* Memusatkan ikon secara vertikal */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Bayangan untuk efek 3D */
    text-decoration: none; /* Menghilangkan garis bawah */
    transition: background-color 0.3s; /* Efek transisi saat hover */
    padding-top:10px;
}

.scroll-top-btn:hover {
    background-color: #f0f0f0; /* Mengubah warna saat hover */
}

.scroll-top-btn i {
    color: #007bff; /* Warna ikon */
    font-size: 30px; /* Ukuran ikon */
}