.custom-btn {
    background-color: #abb91b !important;
}


body{
font-family: Arial, sans-serif;
background:#788d92;
}

.container{
max-width:900px;
margin:auto;
}

.card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
margin-bottom:30px;
}

h1{
margin-bottom:5px;
}

.subtitle{
color:#777;
margin-bottom:20px;
}

select{
padding:10px;
border-radius:6px;
border:1px solid #ccc;
font-size:15px;
}

button{
padding:10px 20px;
background:#2c7be5;
border:none;
border-radius:6px;
color:white;
font-weight:bold;
cursor:pointer;
margin-left:10px;
transition:0.2s;
}

button:hover{
background:#1a5edb;
}

table{
width:100%;
/* border-collapse:collapse; */
border-spacing:20px;  
border-collapse: separate;
}

th{
background:#f1f3f5;
padding:12px;
text-align:left;
}

td{
padding:10px;
background:#f1f3f5;
border-bottom:1px solid #eee;
text-align: center; 
vertical-align: middle;
}

tr:hover{
background:#fafafa;
}

.download{
background:#28a745;
padding:6px 12px;
border-radius:5px;
color:white;
text-decoration:none;
font-size:14px;
}

.download:hover{
background:#1f8a38;
}


.popup-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
}

.popup-box{
background:white;
padding:40px;
border-radius:12px;
text-align:center;
width:400px;
box-shadow:0 10px 40px rgba(0,0,0,0.3);
animation:popupAnim 0.3s ease;
}

.popup-box h2{
margin-top:0;
color:#28a745;
}

.popup-box p{
font-size:18px;
margin:20px 0;
}

.popup-box button{
padding:12px 30px;
font-size:16px;
background:#2c7be5;
color:white;
border:none;
border-radius:6px;
cursor:pointer;
}

.popup-box button:hover{
background:#1a5edb;
}

@keyframes popupAnim{
from{
transform:scale(0.8);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}

.btn-circle {
  width: 35%;
  aspect-ratio: 1 / 1; /* membuat tinggi otomatis sama dengan lebar */
  background-color: #ffffff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  
}

/* nama kamera */
.centered-container {
  display: flex;
  justify-content: center; /* Tengah secara horizontal */
  align-items: center;    /* Tengah secara vertikal */
  /* height: 100vh;          Tinggi penuh layar */
}

/* judul mid */
.judul-mid{
  font-weight: bold; 
  color: white; 
  display:  flex;
  justify-content:  center;  
  align-items: center;
}

/* card transparan */
.custom-transparent {
  background-color: rgba(255, 255, 255, 0.5); /* Warna putih transparan 50% */
}

.card{
  /* border: 1px solid #ccc; */
    /* box-shadow: 2px 2px 10px rgba(0,0,0,0.1); */
    background: transparent !important; /* Pastikan override gaya lain */
}

.h3-list{
  padding-left: 5%;

}

@media (min-width: 768px) {
    .video-display-download {
        max-width: 80%;
    }
    .section-download{
      padding-top: 50px; 
      background-color: #0b333a; 
      height: auto; 
      padding-bottom: 100px; 
      border-radius:100px 100px 0 0;
    }

    .judul-download{
      width: 70%; 
      margin-left: auto; 
      margin-right: auto;
    }
    .judul-download td h1{
      font-weight: bold;
    }
    .btn-list{
      width: 300px;
    }

    .img-list{
      margin-left:10%; 
      margin-right:8px; 
      vertical-align:middle;
    }
}

@media (max-width: 768px) {
  .judul-download{
      width:80%; 
      font-size: 20px;
      margin-left: auto; 
      margin-right: auto;
    }
    .judul-download td h1{
      font-weight: bold;
      font-size: 20px;
    }

    .section-download{
      padding-top: 20px; 
      background-color: #0b333a; 
      height: auto; 
      padding-bottom: 100px; 
      border-radius:50px 50px 0 0;
    }
   

  p.fleksibel-teks{
    font-size:10px  !important;
    font-weight: bold;
    /* color: #1a5edb; */
  }

  .video-display-download {
      max-width: 100%;
  }
  .bt-download p, .bt-download button {
    font-size: 14px; /* Ukuran font lebih kecil */
    margin: 5px 0;
  }

  .btn-list{
      width: 300px;
    }

    .img-list{
      margin-left:20%; 
      margin-right:8px; 
      vertical-align:middle;
    }
}