/* setting background landingpage */
        .full-width-background {
            position: relative;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            color: white;
            min-height: 810px;
            overflow: hidden;
        
        }

        .full-width-background::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            transition: opacity 1s ease-in-out;
            opacity: 1;
            z-index: 1;
        }

        .full-width-background.fade-out::before {
            opacity: 0;
        }

        /* overlay text */
        /* PENGATURAN TEXT LANDINGPAGE */
        .overlay {
            /* max-width: 1000px; */
            width: auto;
            padding: 10px;
            border-radius: 10px;
            margin-top: 150px; /* atur posisi ke bawah overlay */
            min-height: 340px; /* atur lebar overlay */
            position: relative;
            z-index: 3;
            /* background-color: #007a8d; */
            
        }

        /* overlay foto */
         /* OVERLAY FOTO */
         /* ukuran laptop */
        .bottom-overlay {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%; /* atur lebar overlay */
            background: rgba(255, 255, 255, 0.06); 
           
            z-index: 2;
            /* background-color: rgba(0, 0, 0, 0.1);  */
            background-color: rgba(0, 0, 0, 0); 
            
        }

        .text-container {
            padding-top: -10px; /* atur posisi ke bawah overlay */
        }

        .arrow-down {
            position: absolute;
            bottom: 70px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: color 0.3s ease-in-out;
            background-color: transparent;
        }

        .arrow-down .bi {
            font-size: 3rem;
        }

        .arrow-down:hover {
            color: white;
            background-color: transparent;
        }

        /* .btn-get-started {
            position: relative;
            z-index: 5;
            margin-bottom: -40px;
            
        } */





        /* start your journey here LAPTOPPP */
        /* start your journey here LAPTOPPP */ 
        /* start your journey here LAPTOPPP */  
        /* start your journey here LAPTOPPP */

        /* tombol medxstore */
        /* store */ 
        /* chart */
        /* Payment */
        /* Services */
        .button-container-medxstore {
            display: flex;
            justify-content: flex-start; /* Menjajarkan tombol ke kanan */
            gap: 16px; /* Jarak antar tombol */
            /* flex-wrap: wrap;  */
            /* Agar tombol tetap rapih jika tidak cukup ruang */
            padding-top: 0px;
            padding-left: 240px;
            
        }

        .neumorphism-button {
            display: flex;
            flex-direction: column; /* Menempatkan ikon di atas teks */
            align-items: center;
            justify-content: center;
            border-radius: 15px;
            border: none;
            color: #ffffff;
            font-size: 20px;
            /* padding: 10px 40px; */
            background-color: #e65c00;
            transition: box-shadow 0.3s ease;
            cursor: pointer;
            text-decoration: none;
            box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4), 0px 7px 13px -3px rgba(0, 0, 0, 0.3), inset 0px -3px 0px rgba(0, 0, 0, 0.2);
            margin-top: 10px;
            width: 79px;
            z-index: 1;
        }

        .neumorphism-button:hover {
            font-size: 29px;
            /* padding: 10px 20px; */
            color: #ff6600;
            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
            background-color: #ff6200;
            box-shadow: 0 29px 52px rgba(0,0,0,0.40), 0 25px 16px rgba(0,0,0,0.20);
        }

        .neumorphism-button i {
          font-size: 28px;
          padding-top: 12px;
          padding-right: 12px;
          padding-left: 12px;
          margin-bottom: 5px;
          color: #ffffff;   
        }

        .textokey {
          font-size: 12px;
          color: #ffffff;
          /* font-weight: bold; */
          /* text-shadow: 4px 1px 9px rgba(0, 0, 0, 0.9); */
        }

        
          /* hide ukuran hp */
          @media (max-width: 450px) {
          /* tombol medxstore */
          .button-container-medxstore {
            display: none;
          }

          .neumorphism-button {
            display: none;

          }

          .neumorphism-button:hover {
            display: none;

          }

          .neumorphism-button i {
            display: none;

          }

          .textokey {
            display: none;

          }
        }

        /* start your journey here LAPTOPPP */
        /* start your journey here LAPTOPPP */ 
        /* start your journey here LAPTOPPP */  
        /* start your journey here LAPTOPPP */



        .tombolnew { 
            display: inline-block;
            border-radius: 12px;
            box-shadow: 0px 0px 8px 8px rgba(0,0,0,0.1);
            border: none;
            color: #000;
            font-size: 1.1rem;
            padding: 15px 20px;
            background-color: #ffffff;
            transition: box-shadow 0.3s ease; /* Transisi halus saat hover */
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            margin: 8px; /* Menambahkan margin untuk memberikan jarak antar tombol */
            box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
        }

        .tombolnew:hover {
            box-shadow: 0px 0px 5px 0px rgba(66, 68, 90, 1);
            background-color: #d2dc02;
            color: #fff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Penambahan text-shadow untuk hover */
            font-size: 1.1rem;
        }

        .button-container {
            display: flex;
            justify-content: center;
            gap: 8px; /* Memberikan jarak antar tombol */
            flex-wrap: wrap; /* Agar tombol-tombol bisa terbungkus jika layarnya kecil */
            align-items: left;
           
        }


        /* SAAT LAYAR BESAR LAPTOP */
        /* ladningpage */
        @media (min-width: 1246px) {

          .med {
                margin-top: 100px; 
                font-size:10px;
                border-radius: 10px; 
                font-family: Arial, sans-serif; 
                font-weight: bold; 
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); 
                margin-right: 0px;
                /* saat penambahan gambar di kana medical x di matikan coding ini  */
                padding-right: 10px;
                padding-top: 12px;
                padding-bottom: 0px;  
                color: #ffffff;
                
                /* Matikan */
                display: none;
            }


          .hyper {
                font-size: 10px;
                text-shadow: 3px 2px 5px rgba(0, 0, 0, 0.3);  
                margin-top: -10px;
                font-weight: 100;
                /* Matikan */
                display: none;
            }

          .merupakan {
                margin-right: 180px;
                /* margin-left: 10px; */
                font-size: 10px;
                text-align: justify;
                text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); 
                margin-top: -15px;
                width: 600px;

                /* Matikan */
                display: none;
            }


            /* newwwwwwwwwwwwwwwwwwwwwww */

                .image-container {
                  display: none;
                          
                }
                .button-row-new {
                  display: none;
                }

                .bottom-overlay {
                  display: none;
                }

                #section2X0 {
                  display: none;
                }

                .mitra-kami {
                  display: none;
                }

                /* Hiden carousel-container-mitra */
                .carousel-container-mitra {
                  display: none;
                }

               .pt-medicalxcorp {
                  display: none;

                }

                .domain-pt {
                  display: none;
                }

                .domain-pt i {
                  display: none;
                }

                .no-pt {
                  display: none;
                }

                .no-pt i {
                  display: none;
                }
              }

          /* ||||||||||||||||||||||||||||||||||||||||||||||||| */
          /* ||||||||||||||||||||||||||||||||||||||||||||||||| */
        /* batas hiden element */


/* hiden elemen ukuran hp */
/* hiden elemen ukuran hp */
/* hiden elemen ukuran hp */
/* hiden elemen ukuran hp */

      @media (max-width: 450px) {
          /* hide 1 */
          #section1 {
            display: none;
          }

          /* hide 2*/
          #section2 {
            display: none;
          }

          /* hide 3 */
          #section3 {
            display: none;
          }

          /* hide 4 */
          #terbaru {
            display: none;
          }

          /* hide 5 */
          #pengembangan1 {
            display: none;
          }

          /* HIDE 6 */
          #section4 {
            display: none;
          }

          /* hide 7 */
          #barisgambar1 {
            display: none;
          }
          /* hide 8 */
          #barisgambar2 {
            display: none;
          }

          /* hide 9 */
          #pengalaman1 {
            display: none;
          }

          /* hide 10 */
          #testimonifull {
            display: none;
          }

          /* hide 11 */
          #institusi1 {
            display: none;
          }

          /* hide 12 */
          #spasiorange {
            display: none;
          }

          /* hide 13 */
          #contact {
            display: none;
          }

          .search-section {
            display: none;
          }

          .search-container {
            display: none;
          }

          .autocomplete-suggestions {
            display: none;
          }

          #overlay-image {
            display: none;
          }

          #imge18 {
            display: none;
          }

          .pulse-icon {
            display: none;
          }

          .pencarian {
            display: none;
          }

          .availability1 {
            display: none;
          }

          
          .availability2 {
            display: none;
          }
        }


/* hiden elemen ukuran hp */
/* hiden elemen ukuran hp */
/* hiden elemen ukuran hp */
/* hiden elemen ukuran hp */



          /* SAAT LAYAR HP */
          /* SAAT LAYAR HP */
          /* SAAT LAYAR HP */
          @media (max-width: 450px) {
          .med {
              font-size: 17px;
              margin-top: 20px;
              margin-bottom: 7px;
              
              font-family: Arial, sans-serif; 
              font-weight: bold; 
              text-shadow: 2px 0px 5px rgba(0, 0, 0, 0.7); 
              text-align: left;

              /* modifikasi */
              background: linear-gradient(135deg, #fffdfd, #dddddd, #b8b8b8);
              border-radius: 8px;
              padding: 7px 7px;
              padding-left: 7px;
              max-width: 179px;
          }

          .hyper {
              font-size: 16px;
              text-shadow: 3px 1px 5px rgba(0, 0, 0, 0.3);  
              font-weight: 100;
              margin-bottom: 3px;
              text-align: left;
          }

          .merupakan {
            font-size: 11px;
            padding-right: 179px;
            text-shadow: 3px 2px 5px rgba(0, 0, 0, 0.3);  
            text-align: left;
            margin-top: -2px;
            line-height: 1.3; /* Mengatur jarak antar baris menjadi lebih sempit */
        }


          .mitra-kami {
              font-size: 13px;
              padding-right: 179px;
              text-shadow: 3px 2px 5px rgba(0, 0, 0, 0.3);  
              text-align: left;
              margin-top: -10px;
          }


          /* ANIMASI MITRA */
          /* ANIMASI MITRA */
          /* ANIMASI MITRA */
          /* carousel-container-mitra UKURAN HP */
          .carousel-container-mitra {
            position: relative;
            width: 100%;
            max-width: 105px;
            margin: 0 auto;
            margin-top: -204px;
            margin-left: 10px;
            background-color: #ffffff; 
            border-radius: 10px;
            padding: 18px 0px;
            box-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.16), 0 8px 8px rgba(0,0,0,0.20);
              
          }

          .carousel-image {
            position: absolute;
            width: 94%;
            height: auto;
            top: 6px;
            left: 4px;
            opacity: 0;
            transition: opacity 1s ease-in-out;
          }

          .carousel-image:first-child {
            opacity: 1;
          }
          /* ANIMASI MITRA */
          /* ANIMASI MITRA */
          /* ANIMASI MITRA */

          .pt-medicalxcorp {
              margin-top: 14px;
              /* padding-right: 179px; */
              font-size: 8px;
              text-shadow: 3px 2px 5px rgba(0, 0, 0, 0.3);  
              text-align: left; 
              font-weight: bold;
              margin-left: 10px;
          }

          .domain-pt {
              margin-top: -18px;
              margin-left: 10px;
              padding-right: 179px;
              font-size: 7px;
              text-shadow: 3px 2px 5px rgba(0, 0, 0, 0.3);  
              text-align: left; 
          }

          .domain-pt i {
              margin-right: 1px; /* Memberikan jarak antara ikon dan teks */
              color: #ffffff; /* Warna ikon sesuai keinginan */
              font-size: 6px; /* Mengatur ukuran ikon */
          }

          .no-pt {
            margin-left: 10px;
              margin-top: -18px;
              padding-right: 179px;
              font-size: 7px;
              text-shadow: 3px 2px 5px rgba(0, 0, 0, 0.3);  
              text-align: left; 
          }

          .no-pt i {
            margin-right: 1px; 
            color: #ffffff; 
            font-size: 5px; 
          }


          .button-container {
              text-align: left; /* Ensures button aligns left on small screens */
              padding-left: 0; /* Remove any extra padding */
          }
      }

          /* SAAT LAYAR HP */
          /* SAAT LAYAR HP */
          /* SAAT LAYAR HP */



        @media (min-width: 992px) {
            .text-container {
                text-align: left;
            }
            .button-container {
                justify-content: flex-start;
            }
        }

        .button-row {
          display: none;
                   
        }


        /* SAAT UKURAN HP */
        /* overlay ATAS */
        @media (max-width: 768px) {
          .full-width-background {
              min-height: 700px;
              margin-bottom: -80px;
              background-image: url('https://lh3.googleusercontent.com/pw/AP1GczNFV3c9IUyUd4vdvjJ6wEiAk6A8azzykZpquysrsl4U9DDuXa59afnA-Usbbe605obrzgbutWW4IfxET9OHwQyb-um4piJYeipH2yenVVTH8dT7BzGD8qL7nu5sb8iaHWR53VloUSaot6mauIH4kq9B=w2486-h1398-s-no-gm?authuser=0');
              position: relative;
          }
          /* OVERLAY ATAS */
          /* OVERLAY ATAS */
          /* OVERLAY ATAS */
          .overlay {
              margin-top: -8px; 
              padding-top: 20px;
              padding-bottom: 45px;
              min-height: 370px; 
              /* background-color: rgba(255, 255, 255, 0.009); */
              border-radius: 30px 30px 0 0;
          }
          /* OVERLAY ATAS */
          /* OVERLAY ATAS */
          /* OVERLAY ATAS */
          .text-container {
              padding-top: 20px; 
          }
          .arrow-down {
              bottom: 30px;
          }
          .arrow-down .bi {
              font-size: 2rem; /* Reduce icon size for smaller screens */
          }
          h1 {
              font-size: 1.5rem; /* Adjust font size for smaller screens */
          }
          p {
              font-size: 0.875rem; /* Adjust font size for smaller screens */
          }
          .btn {
              font-size: 0.875rem; /* Adjust button font size for smaller screens */
              padding: 0.5rem 1rem; /* Adjust button padding for smaller screens */
              position: relative; /* Add relative positioning for z-index */
              z-index: 2; /* Set z-index to make sure it appears above the image */
          }
          .btn:hover {
              font-size: 0.875rem; /* Adjust button font size for smaller screens */
              padding: 0.5rem 1rem; /* Adjust button padding for smaller screens */
          }
          



          /* Tombol Medical X Store Tampilan HP */
          /* Tombol Medical X Store Tampilan HP */
          /* Tombol Medical X Store Tampilan HP */
          /* Tombol Medical X Store Tampilan HP */

          .neumorphism-button {
            font-size: 10px;
            padding: 8px 10px;
            box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
            margin-top: 56px;
            background: linear-gradient(60deg, #e1d0b9, #dc8008, #ff6200, #ff6d12);
            display: inline-block; /* Added to align with text */
            align-items: left;
            border-radius: 14px;
            }

            .neumorphism-button:hover {
                font-size: 10px;
                padding: 8px 10px;
                box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
            }

            .button-container-medxstore {
              margin-top: -60px;
              text-align: left; 
              justify-content: left;
              border-radius: 14px;

            }

          /* Tombol Medical X Store Tampilan HP */
          /* Tombol Medical X Store Tampilan HP */
          /* Tombol Medical X Store Tampilan HP */
          /* Tombol Medical X Store Tampilan HP */




          /* gambar pekerja UKURAN HP*/
          /* gambar pekerja UKURAN HP*/
          /* gambar pekerja UKURAN HP*/

          .image-container {
              position: absolute;
              right: -9%;
              top: 10%;
              bottom: 40%;
              z-index: 1; 
              width: 70%;
          }

          /* gambar pekerja */
          .image-container img {
              width: 84%;
              height: auto;
          }
          
          /* gambar pekerja UKURAN HP*/
          /* gambar pekerja UKURAN HP*/
          /* gambar pekerja UKURAN HP*/

          /* overlay ATAS */



          /* Tambahkan styling untuk overlay oranye */
          /* overlay orange hp */
          /* overlay orange hp */
          /* overlay orange hp */
          
          .orange-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%; 
            height: 410px; /* Adjust height as needed */
            background-color: #ffffff;
            /* background: transparent; */
            z-index: 4; /* Ensure it appears above other content */
            border-radius: 25px 25px 0 0;
            display: flex;
            flex-direction: column; /* Ensure that the button rows stack vertically */
            align-items: center; /* Center items horizontally */
            justify-content: center; /* Center items vertically */
            padding: 20px; /* Add padding if needed */
            box-shadow: 0px -25px 20px -20px rgba(0, 0, 0, 0.45);
          }

          /* Styling untuk baris tombol di dalam overlay oranye */
          .button-row {
            display: flex;
            gap: 16px; /* Jarak antar tombol */
            margin-bottom: 20px; /* Jarak antara baris tombol */
            margin-top: -135px;
          }

          /* Styling untuk baris tombol kedua di dalam overlay oranye */
          .button-row-new {
            display: flex;
            gap: 16px; /* Jarak antar tombol */
            /* margin-top: 0px; */
          }



          /* 8 tombol */
          /* 8 tombol */
          /* 8 tombol */
          /* 8 tombol */
          /* Styling untuk tombol-tombol */
          .button-shadow, .button-shadow-new {
            /* font-size: 0.875rem;  */
            /* Ukuran font untuk tombol */
            padding: 11px 11px; /* Padding untuk tombol */
            box-shadow: 
              0px 2px 4px rgba(0, 0, 0, 0.2),  /* Bayangan awal */
              2px 2px 4px #04727c,  /* Bayangan utama di sisi kanan dan bawah */
              1px 2px 4px #04727c, /* Bayangan tambahan untuk efek timbul lebih intens */
              -2px -2px 4px rgba(255, 255, 255, 0.9); /* Bayangan terang di sisi kiri dan atas */

 
            background-color: #ffffff;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* margin-bottom: 8px; */
            width: 70px;
            height: auto;
          }

          .button-shadow:hover, .button-shadow-new:hover {
            font-size: 0.875rem; /* Ukuran font untuk tombol */
            padding: 11px 11px; /* Padding untuk tombol */
            box-shadow: 
              0px 2px 4px rgba(0, 0, 0, 0.2),  /* Bayangan awal */
              2px 2px 4px #06B3C4,  /* Bayangan utama di sisi kanan dan bawah */
              1px 2px 4px #06B3C4, /* Bayangan tambahan untuk efek timbul lebih intens */
              -2px -2px 4px rgba(255, 255, 255, 0.9); /* Bayangan terang di sisi kiri dan atas */
          }
          

          /* 8 tombol */
          /* 8 tombol */
          /* 8 tombol */
          /* 8 tombol */

          /* icon semua 8 tombol */
           /* icon semua 8 tombol */
            /* icon semua 8 tombol */
             /* icon semua 8 tombol */
              /* icon semua 8 tombol */
          .icon-largee {
            font-size: 40px;
            background: linear-gradient(70deg, #e1d0b9, #dc8008, #ff6200, #ff6d12);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;

            /* eror 1 */
            /* text-fill-color: transparent; */



              display: inline-block;
              padding: 2px; /* Menambahkan padding untuk memastikan ikon tidak terpotong */
          }
            /* icon semua 8 tombol */
            /* icon semua 8 tombol */
            /* icon semua 8 tombol */
            /* icon semua 8 tombol */
            /* icon semua 8 tombol */


          /* Styling untuk teks di bawah tombol */
          .button-label {
            margin-top: 8px;
            font-size: 10px; /* Ukuran font untuk teks */
            /* font-weight: bold; */
           
            display: flex;
            flex-direction: column;
            align-items: center;
            /* font-weight: 100; */
            /* background: linear-gradient(70deg, #e1d0b9, #dc8008, #e65c00);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              text-fill-color: transparent; */
              color: #04727c;
              text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);  
          }
          .additional-text {
            font-size: 10px; /* Ukuran font untuk teks tambahan */
            color: #04727c;
            margin-top: -4px;
            /* font-weight: bold; */
            text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);  
          }
        }





          body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .section-text {
            color: white;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 10px; /* Jarak antara teks dan form */
        }

        .search-container {
            display: flex;
            width: 100%;
            max-width: 600px;
            padding: 10px; 
            border: 1px solid #ccc;
            border-radius: 8px;
            background-color: #f9f9f9;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
            z-index: 5;
        }

        .search-container input[type="text"] {
            flex: 1;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px 0 0 4px; /* Membulatkan sudut kiri saja */
            box-sizing: border-box;
            z-index: 6;
        }

        .search-container button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: coral;
            color: white;
            border: 1px solid coral;
            border-radius: 0 4px 4px 0; /* Membulatkan sudut kanan saja */
            cursor: pointer;
            box-sizing: border-box;
        }

        .search-container button:hover {
            background-color: #f8d317;
        }


        /* Dinonaktifkan */
        /* .autocomplete-suggestions {
            position: absolute;
            background-color: transparent;
            background-color: rgba(0, 0, 0, 0.1);
            color: #ffffff;
            border-color: transparent;
            border-radius: 0 0 4px 4px;
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            z-index: 1000;
            top: 100px;
            left: 50%;
            transform: translateX(-50%);
        } */

        /* .autocomplete-suggestion {
            padding: 10px;
            cursor: pointer;
            border-bottom: 1px solid #ccc;
        } */

        .autocomplete-suggestion:last-child {
            border-bottom: none;
        }

        .autocomplete-suggestion:hover {
            background-color: #f0f0f0;
        }

        .articles {
            margin-top: 90px;
            padding: 0 20px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }

        .article {
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #f9f9f9;
        }



        /* Responsiveness for mobile devices */
        @media (max-width: 600px) {
            .search-container {
                width: 100%;
                flex-direction: row; /* Tombol tetap berada di sebelah kanan input form */
            }

            .search-container input[type="text"] {
                border-radius: 4px 0 0 4px; /* Membulatkan sudut kiri saja */
            }

            .search-container button {
                width: auto; /* Pastikan tombol memiliki lebar otomatis */
                border-radius: 0 4px 4px 0; /* Membulatkan sudut kanan saja */
                margin-left: 0; /* Hapus margin */
            }

            /* dinonaktifkan */
            /* .autocomplete-suggestions {
                width: 90%;
            } */
        }



        /* Cari sesuatu... laptop */
        /* iniiiiiiii    Responsiveness for large screens laptop */
        /* Responsiveness for large screens laptop */
        /* Responsiveness for large screens laptop */
        @media (min-width: 1024px) {
            /* FORM SEARCH */
            .search-container {
                margin-top: -222px;
                /* menaikan tombol chart, paymend, services */
                margin-bottom: -74px; 
                margin-left: 240px;
                /* memepetkan jarak search dan tombol 4  */
                border: none;
                padding-bottom: 15px;
                padding-top: 15px;
                padding-left: 15px;
                padding-right: 15px;
                z-index: 2;
                /* background: linear-gradient(135deg, #fffdfd, #dddddd, #b8b8b8); */
                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4), 0px 7px 13px -3px rgba(0, 0, 0, 0.3), inset 0px -3px 0px rgba(0, 0, 0, 0.2);
                border-radius: 39px;
                box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
                max-width: 420px;
            }


            .search-container i {
                margin-right: 10px;
                color: #666; /* Anda bisa mengubah warna sesuai kebutuhan */
            }


            .search-container input[type="text"] {
                font-size: 18px; /* Ukuran font yang lebih besar */
                z-index: 4;
                border-radius: 20px 0 0 20px;
                height: 43px;
                border-color: #ff6600;
                max-width: 350px;
                
            }

            /* Perubahan border saat input diklik atau aktif */
            .search-container input[type="text"]:focus {
                border-color: #ff6600; /* Warna biru tosca */
                outline: none; /* Menghilangkan outline default */
            }
   



            .search-container button {
              padding: 10px 20px;
              font-size: 16px;
              background-color: #ffffff;
              border: 1px solid #ff6200;
              border-radius: 0 20px 20px 0; /* Membulatkan sudut kanan saja */
              cursor: pointer;
              box-sizing: border-box;
              z-index: 5;
              display: flex;
              align-items: center;
              justify-content: center;
              height: 43px;

          }

          .search-container button i {
              font-size: 25px; /* Adjust the icon size if needed */
              color: #ff6200;
              align-items: center;
              justify-content: center;
              padding-left: 10px;        
              
          }

          .search-container button:hover {
              background-color: #c6c3c0;
              border: 1px solid #c6c3c0;
          }

          /* INIIIIIIIII */
           .articles {
            margin-top: 90px;
            padding: 0 20px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            }
        }


        @media (max-width: 1624px) {
      /* option layar laptop agak kecil*/
      /* dinonaktifkan */
      /* .autocomplete-suggestions {
          position: absolute;
          margin-top: 155px;
          margin-bottom: -80px; 
          margin-left: 200px;
          border: none;
          padding-bottom:0px;
          padding-top: 15px;
          padding-left: 15px;
          padding-right: 15px;
          z-index: 2;
          max-width: 380px;
          border-radius: 0px 0px 20px 20px ;
          background: rgba(255, 255, 255, 0.9);
          color: #007a8d;
       } */

      }





  .overlay-container {
    margin-top: -30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .overlay-text {
    flex: 1;
    padding-right: 20px;
  }

  .overlay-imageyy {
    margin-top: 120px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Important: To position the pulse icons on top of the image */
  }

  /* Gambar responsif */
  .overlay-imageyy img {
    width: 90vw; /* Menggunakan vw agar gambar menyesuaikan lebar layar */
    /* max-width: 900px; */
    max-width: 800px;
    height: auto;
    border-radius: 10px;
  }

  /* CSS untuk semua ikon pulse */
  .pulse-icon {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #ff6600;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
  }
  

  /* Setiap icon memiliki posisi yang responsif menggunakan vw dan vh */

  /* Pulau Sumatra */

  /* Sumatera Aceh */
    .pulse-icon-x { top: 11.3vh; left: 3.4vw; animation: pulse 2.5s infinite; background-color: #d2dc02;
   }

  /* Sumatera utara */
  .pulse-icon-1 { top: 15vh; left: 6vw; animation: pulse 3.8s infinite; background-color: #d2dc02;
   }

   /* Sumatera barat */
  .pulse-icon-2 { top: 19.8vh; left: 7.5vw; animation: pulse 3s infinite; background-color:  #d2dc02; }


  /* Jambi */
  .pulse-icon-28 { top: 20.4vh; left: 9.7vw; animation: pulse 3.5s infinite; background-color:  #d2dc02;}


  /* Sumatera Selatan */
  .pulse-icon-3 { top: 26.3vh; left: 10vw; animation: pulse 2.8s infinite; background-color: #d2dc02;}




  /* Pulau Jawa */
   /* Jakarta Jawa Barat */
  .pulse-icon-4 { top: 31.4vh; left: 13.6vw; animation: pulse 2s infinite; background-color:  #d2dc02;}


  /* Jawa tengah */
  .pulse-icon-5 { top: 32.6vh; left: 17vw; animation: pulse 3.7s infinite; background-color:  #d2dc02;}

  /* Jawa Timur */
  .pulse-icon-6 { top: 34vh; left: 20vw; animation: pulse 2.4s infinite; background-color:  #d2dc02; }



  /* Pulau Kalimantan */
  /* Kalimantan Barat */
  .pulse-icon-8 { top: 20.5vh; left: 17.4vw; animation: pulse 3.4s infinite; background-color:  #d2dc02;}

  /* Kalimantan tengah */
  .pulse-icon-9 {  top: 23.7vh; left: 19vw; animation: pulse 4s infinite;  background-color:  #d2dc02;}

  /* Kalimantan selatan */
  .pulse-icon-10 { top: 25.3vh; left: 21.4vw; animation: pulse 2.7s infinite; background-color:  #d2dc02; }

   /* Kalimantan Timur */
  .pulse-icon-12 { top: 20vh; left: 22.1vw; animation: pulse 5s infinite; background-color:  #d2dc02; }

  /* Kalimantan Utara */
  .pulse-icon-13 { top: 15vh; left: 23vw; animation: pulse 3.2s infinite; background-color: #d2dc02; }




  /* Pulau Sulawesi */
  /* Sulawesi Utara */
  .pulse-icon-14 { top: 18vh; left: 30vw; animation: pulse 3.8s infinite; background-color:  #d2dc02;}

  /* Gorontalo */
  .pulse-icon-7 { top: 18.6vh; left: 28vw; animation: pulse 3s infinite; background-color:  #d2dc02;}

   /* Sulawesi tengah */
  .pulse-icon-15 { top: 23vh; left: 26.5vw; animation: pulse 3.2s infinite; background-color:  #d2dc02; }

  /* Sulawesi Barat */
  .pulse-icon-16 { top: 25vh; left: 25.3vw; animation: pulse 3s infinite; background-color:  #d2dc02;}

  /* Sulawesi Selatan */
  .pulse-icon-17 { top: 28vh; left: 26vw; animation: pulse 4s infinite; background-color:  #d2dc02; }

  /* Sulawesi Tenggara */
  .pulse-icon-18 { top: 27vh; left: 28vw; animation: pulse 3.7s infinite; background-color:  #d2dc02;}



  
  /* Nusa tenggara barat */
  .pulse-icon-11 { top: 34.7vh; left: 22.9vw; animation: pulse 4s infinite; background-color:  #d2dc02;}

  /* Nusa Tenggara Timur */
  .pulse-icon-19 { top: 34.5vh; left: 26.5vw; animation: pulse 3s infinite; background-color:  #d2dc02; }



  /* Maluku Utara */
  .pulse-icon-20 { top: 18vh; left: 33.4vw; animation: pulse 3s infinite; background-color:  #d2dc02; }

  /* Maluku */
  .pulse-icon-21 { top: 24.5vh; left: 35vw; animation: pulse 4s infinite; background-color:  #d2dc02; }



  /* Pulau Papua */
  /* Papua Barat Daya */
  .pulse-icon-22 { top: 21.5vh; left: 37.3vw;  animation: pulse 3.7s infinite; background-color:  #d2dc02;}

  /* Papua Barat */
  .pulse-icon-23 { top: 23vh; left: 38.6vw; animation: pulse 3s infinite; background-color:  #d2dc02;}

  /* Papua tengah */
  .pulse-icon-24 { top: 26vh; left: 42vw; animation: pulse 3.3s infinite; background-color:  #d2dc02; }

  /* Papua */
  .pulse-icon-25 { top: 26vh; left: 45vw;  animation: pulse 4s infinite; background-color:  #d2dc02;}

  /* Papua Pegunungan */
  .pulse-icon-26 { top: 31vh; left: 43.6vw;  animation: pulse 2.7s infinite; background-color:  #d2dc02;}

  /* Papua Selatan */
  .pulse-icon-27 { top: 33.3vh; left: 45.2vw; animation: pulse 2.4s infinite;background-color:  #d2dc02;}
  


    /* Animasi Pulse */
    @keyframes pulse {
      0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.7);
      }
      70% {
        transform: scale(1.5);
        box-shadow: 0 0 10px 10px rgba(255, 102, 0, 0);
      }
      100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 102, 0, 0);
      }
    }

    /* Tambahkan media queries untuk menyesuaikan pada ukuran layar yang sangat kecil */
    @media (max-width: 600px) {
      .overlay-image img {
        width: 100vw;
      }

      .pulse-icon {
        width: 6px;
        height: 6px;
      }
    }



    /* Animasi untuk garis vertikal dan teks */
    @keyframes fade-in-out {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }


    /* LOKASI VERTIKAL LINE */
      /* Garis vertikal dan teks untuk Aceh */
      .line-and-textx {
      position: absolute;
      top: calc(14.4vh - 79px); /* Menyesuaikan posisi di atas pulse-icon-1 */
      left: 2.9vw;
      display: flex;
      flex-direction: column-reverse; /* Menempatkan teks di atas garis */
      align-items: center; /* Teks dan garis sejajar tengah */
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 2.5s infinite; /* Durasi animasi disesuaikan dengan pulse-icon-1 */
    }

    .vertical-linex {
      width: 1px;
      height: 20px;
      background-color: #d2dc02;
      margin-top: 4px; /* Jarak antara garis dan teks */
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-textx {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
      /* background-color: rgba(101, 213, 250, 0.1);
      padding: 2px 10px;
      border-radius: 6px; */
    }


    /* Garis vertikal dan teks untuk SumatEra Utara */
    .line-and-text1 {
      position: absolute;
      top: calc(11vh - 30px); /* Menyesuaikan posisi di atas pulse-icon-1 */
      left: 3.8vw;
      display: flex;
      flex-direction: column-reverse; /* Menempatkan teks di atas garis */
      align-items: center; /* Teks dan garis sejajar di tengah */
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 3.8s infinite; /* Durasi animasi disesuaikan dengan pulse-icon-1 */
    }

    .vertical-line1 {
      width: 1px;
      height: 35px;
      background-color: #d2dc02;
      margin-top: 4px; /* Jarak antara garis dan teks */
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text1 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }


      /* Garis vertikal dan teks untuk SumatEra Barat */
      .line-and-text2 {
      position: absolute;
      top: calc(12vh - 3px); 
      left: 5.3vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 3s infinite; 
    }

    .vertical-line2 {
      width: 1px;
      height: 45px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text2 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }

    

      /* Garis vertikal dan teks untuk Jambi */
      .line-and-text28 {
      position: absolute;
      top: calc(17.7vh - 30px); 
      left: 9.1vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 3.5s infinite; 
    }

    .vertical-line28 {
      width: 1px;
      height: 38px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text28 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }


      /* Garis vertikal dan teks untuk Sumatera Selatan */
      .line-and-text3 {
      position: absolute;
      top: calc(21.8vh); 
      left: 7.5vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 2.8s infinite; 
    }

    .vertical-line3 {
      width: 1px;
      height: 14px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text3 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }




      /* Garis vertikal dan teks untuk Jakarta Jawa Barat*/
      .line-and-text4 {
      position: absolute;
      top: calc(27vh - 10px); 
      left: 12.1vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 2s infinite; 
    }

    .vertical-line4 {
      width: 1px;
      height: 20px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text4 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);

    }



    
      /* Garis vertikal dan teks untuk Jawa */
      .line-and-text5 {
      position: absolute;
      top: calc(27.5vh - 5px); 
      left: 15.2vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 3.7s infinite; 
    }

    .vertical-line5 {
      width: 1px;
      height: 20px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text5 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }


        
      /* Garis vertikal dan teks untuk Jawa Timur */
      .line-and-text6 {
      position: absolute;
      top: calc(28.5vh - 5px); 
      left: 18.4vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 2.4s infinite; 
    }

    .vertical-line6 {
      width: 1px;
      height: 20px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text6 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }



      /* Garis vertikal dan teks untuk Kalimantan Barat */
      .line-and-text8 {
      position: absolute;
      top: calc(16vh - 5px); 
      left: 15vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 3.4s infinite; 
    }

    .vertical-line8 {
      width: 1px;
      height: 20px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text8 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }

    
      /* Garis vertikal dan teks untuk Kalimantan tengah */
      .line-and-text9 {
      position: absolute;
      top: calc(18vh - 5px); 
      left: 16.3vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 4s infinite; 
    }

    .vertical-line9 {
      width: 1px;
      height: 25px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text9 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }

  

    /* Garis vertikal dan teks untuk Kalimantan Selatan */
      .line-and-text10 {
      position: absolute;
      top: calc(21.8vh - 5px); 
      left: 18.6vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 2.7s infinite; 
    }

    .vertical-line10 {
      width: 1px;
      height: 10px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text10 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }


      /* Garis vertikal dan teks untuk Kalimantan Timur */
      .line-and-text12 {
      position: absolute;
      top: calc(14vh - 5px); 
      left: 19.5vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 5s infinite; 
    }

    .vertical-line12 {
      width: 1px;
      height: 30px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text12 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }



    /* Garis vertikal dan teks untuk Kalimantan Utara */
      .line-and-text13 {
      position: absolute;
      top: calc(12vh - 30px); 
      left: 20.5vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 3.2s infinite; 
    }

    .vertical-line13 {
      width: 1px;
      height: 24px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text13 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }


    
    /* Garis vertikal dan teks untuk Sulawesi Utara */
    .line-and-text14 {
      position: absolute;
      top: calc(14.5vh - 30px); 
      left: 27.9vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 3.8s infinite; 
    }

    .vertical-line14 {
      width: 1px;
      height: 30px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text14 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }


    /* Garis vertikal dan teks untuk Gorontalo */
      .line-and-text7 {
      position: absolute;
      top: calc(14.5vh - 15px); 
      left: 26.7vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 3s infinite; 
    }

    .vertical-line7 {
      width: 1px;
      height: 20px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text7 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }



      /* Garis vertikal dan teks untuk Sulawesi Tengah */
      .line-and-text15 {
      position: absolute;
      top: calc(20vh - 25px); 
      left: 24vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 3.3s infinite; 
    }

    .vertical-line15 {
      width: 1px;
      height: 20px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text15 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }


      /* Garis vertikal dan teks untuk Sulawesi Barat */
      .line-and-text16 {
      position: absolute;
      top: calc(27vh - 65px); 
      left: 23.2vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 3s infinite; 
    }

    .vertical-line16 {
      width: 1px;
      height: 20px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text16 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }


      /* Garis vertikal dan teks untuk Sulawesi Selatan */
      .line-and-text17 {
      position: absolute;
      top: calc(30vh - 65px); 
      left: 23.4vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 4s infinite; 
    }

    .vertical-line17 {
      width: 1px;
      height: 20px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text17 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }

      /* Garis vertikal dan teks untuk Sulawesi Tenggara */
      .line-and-text18 {
      position: absolute;
      top: calc(29vh - 65px); 
      left: 25.2vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 3.2s infinite; 
    }

    .vertical-line18 {
      width: 1px;
      height: 20px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text18 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }



    /* Garis vertikal dan teks untuk Nusa Tenggara Barat */
      .line-and-text11 {
      position: absolute;
      top: calc(36.4vh - 65px); 
      left: 19.9vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 4s infinite; 
    }

    .vertical-line11 {
      width: 1px;
      height: 20px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text11 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }



      /* Garis vertikal dan teks untuk Nusa Tenggara Timur */
      .line-and-text19 {
      position: absolute;
      top: calc(37.5vh - 65px); 
      left: 23.4vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 3s infinite; 
    }

    .vertical-line19 {
      width: 1px;
      height: 8px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text19 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }


      /* Garis vertikal dan teks untuk Maluku Utara */
      .line-and-text20 {
      position: absolute;
      top: calc(19.4vh - 65px); 
      left: 31.6vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 3s infinite; 
    }

    .vertical-line20 {
      width: 1px;
      height: 20px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text20 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }


    /* Garis vertikal dan teks untuk Maluku */
    .line-and-text21 {
      position: absolute;
      top: calc(26.6vh - 65px); 
      left: 34.1vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 4s infinite; 
    }

    .vertical-line21 {
      width: 1px;
      height: 20px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text21 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }



      /* Garis vertikal dan teks Papua Barat Daya */
      .line-and-text22 {
      position: absolute;
      top: calc(22.2vh - 65px); 
      left: 34.7vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 3.7s infinite; 
    }

    .vertical-line22 {
      width: 1px;
      height: 25px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text22 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }



    /* Garis vertikal dan teks Papua Barat */
    .line-and-text23 {
      position: absolute;
      top: calc(24vh - 65px); 
      left: 37vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 3s infinite; 
    }

    .vertical-line23 {
      width: 1px;
      height: 26px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text23 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }



    /* Garis vertikal dan teks Papua Tengah */
      .line-and-text24 {
      position: absolute;
      top: calc(27vh - 65px); 
      left: 40vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 3.3s infinite; 
    }

    .vertical-line24 {
      width: 1px;
      height: 20px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text24 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }



    /* Garis vertikal dan teks Papua */
      .line-and-text25 {
      position: absolute;
      top: calc(28.5vh - 65px); 
      left: 44.3vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 4s infinite; 
    }

    .vertical-line25 {
      width: 1px;
      height: 13px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text25 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }



    /* Garis vertikal dan teks Papua Pegunungan */
      .line-and-text26 {
      position: absolute;
      top: calc(34vh - 65px); 
      left: 40.7vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 2.7s infinite; 
    }

    .vertical-line26 {
      width: 1px;
      height: 10px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text26 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }



    /* Garis vertikal dan teks Papua Selatan */
      .line-and-text27 {
      position: absolute;
      top: calc(35.5vh - 65px); 
      left: 43.2vw;
      display: flex;
      flex-direction: column-reverse; 
      align-items: center; 
      z-index: 10000;
      opacity: 0;
      animation: fade-in-out 2.4s infinite; 
    }

    .vertical-line27 {
      width: 1px;
      height: 15px;
      background-color: #d2dc02;
      margin-top: 4px; 
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
    }

    .label-text27 {
      font-size: 12px;
      color: black;
      color: #d2dc02;
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.09);
    }







  /* Style untuk Running Text dengan efek neon */
  .runingtext-container-wrapper {
    display: flex;
    align-items: center;
    margin-top: 98px;
    margin-bottom: -55px;
    /* margin-left: -5px;
    margin-right: -5px; */
  }

  .framez {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    height: 20px;
    /* padding: 20px; */
    padding-top: 12px;
    padding-bottom: 15px;
    background-color: #ffffff;
    /* Warna background frame */
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    border-radius: 5px; /* Sudut bulat */
    margin-right: 0px;
    /* z-index: 10000; */
  }

  .runingtext-container {
    height: 45px;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    border: 2px solid #06B3C4; /* Frame warna */
    border-radius: 5px; /* Sudut bulat */
    padding: 0px;
    background-color: rgba(7, 180, 203, 0.8); /* Warna background */
    /* box-shadow: 0 0 20px rgba(6, 179, 196, 0.7), 0 0 30px rgba(6, 179, 196, 0.7);  */
    /* Efek neon pada background */
  }

  .runingtext-content {
    display: inline-block;
    animation: runText 150s linear infinite; /* Animasi running text tanpa fade-in */
    color: #ffffff;
    font-size: 12px;
    text-shadow: 0 0 10px #06B3C4, 0 0 20px #06B3C4, 0 0 30px #06B3C4; /* Efek neon pada teks */
    margin-top: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.09);
  }

  /* Animasi untuk Running Text */
  @keyframes runText {
    0% {
      transform: translateX(0); /* Mulai dari posisi semula */
    }
    100% {
      transform: translateX(-100%); /* Teks bergerak keluar layar di sebelah kiri */
    }
  }



  @media only screen and (max-width: 768px) {
  .runingtext-container-wrapper,
  .framez,
  .runingtext-container,
  .runingtext-content {
    display: none;
  }
}








    #services img {
        width: 100%;
        height: auto; /* Maintain aspect ratio */
        border-radius: 20px 20px 0 0;
    }

    #img1 {
        width: 100%;
        height: auto; /* Maintain aspect ratio */
        border-radius: 20px 20px 0 0;
    }

    .max-size-300 {
        max-width: 700px;
        height: auto; /* This ensures the aspect ratio is maintained */
    }

    max-size-ceo {
        max-width: 500px;
        height: auto; /* This ensures the aspect ratio is maintained */
    }

    .img-custom-margin {
        margin-left: 200px;
    }

    #contact-heading {
        font-size: 30px;
    }

    #footer-text {
        font-size: 15px;
    }


    /* UP ARROW FOOTER */
    .custom-ui {
    color: #06B3C4;
    border-radius: 50%; /* Menambahkan border bulat secara default */
    display: inline-block; /* Menambahkan inline-block untuk memastikan box-shadow berbentuk bulat */
    width: 1.5em; /* Mengatur ukuran tetap */
    height: 1.5em; /* Mengatur ukuran tetap */
    line-height: 1.5em; /* Menyelaraskan ikon di tengah */
    text-align: center; /* Menyelaraskan ikon di tengah */
    transition: box-shadow 0.3s ease; /* Transisi halus saat hover */
    box-shadow: 0px 0px 8px 8px rgba(0,0,0,0.1);
    }

    .custom-ui:hover {
        color: #06B3C4;
        box-shadow: 0px 0px 8px 3px rgba(0,0,0,0.1);
        border-radius: 50%; /* Menjaga border bulat saat hover */
        box-shadow: 0px 0px 5px 0px rgba(66, 68, 90, 1);
        
    }


    .card {
        /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        transition: box-shadow 0.3s ease-in-out;
        border-radius: 20px;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
        
    }

    .card:hover {
        /* -webkit-box-shadow: 1px 3px 19px 8.5px #dddddd;
        -moz-box-shadow: 1px 3px 19px 8.5px #dddddd;
        box-shadow: 1px 3px 19px 8.5px #dddddd; */
        transition: box-shadow 0.3s ease-in-out;
        /* box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; */
        box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    }


    .headerdong {
      margin-top: 200px;
    }