/*css untuk index/bg */

body, html {
    position: relative;
    Background-color:blue;
    scroll-padding-top:60px; /* Memberikan offset atas sebesar 20px */
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    
}

video {
    width: 100%;
    height: auto;
    object-fit: cover;
    cursor: pointer;
    position:relative;
    /*Background-image: url('images/banner/STEERING-WHEEL.jpg');*/
    Background-color:rgb(13, 5, 70);            
}

.mute-icon {
    position: absolute;
    bottom: 10px;
    left: 20px;
    font-size: 15px;
    color: white;
    z-index: 10;
    cursor: pointer;
    opacity:0.25;
    
}

.container-video {
    width: 96%; /* Pastikan lebar container mengikuti layar penuh */
    height: 37vw;  /*Tinggi container mengikuti layar penuh */
    background-color: black;
    display: flex; /* Flexbox untuk memastikan konten tetap sesuai */
    /*align-items: center;  Tengah vertikal */
    justify-content: center; /* Tengah horizontal */
    padding: 0; /* Hilangkan padding agar video benar-benar menempel */
    position: relative; /* Posisi relatif untuk ikon mute */
    overflow: hidden; /* Pastikan konten tidak melampaui container */
}

/* --- Rasio video 16:9 untuk layar kecil --- */
@media screen and (max-width: 768px) {
    .container-video {
      width: 100%;
      height: calc(100vw * 9 / 16); /* tinggi otomatis sesuai rasio 16:9 */
      max-height: 100vh;
    }
  
    .container-video video {
      width: 100%;
      height: 100%;
      object-fit: cover; /* isi penuh tanpa merusak proporsi */
    }
  }

@media (max-width: 768px) {
    .container-video {
        height: 60vw; /* lebih tinggi di layar kecil */
    }
}

.container-video video {
    width: 100%;
    height: auto;
    object-fit: fill; /* atau: contain, tergantung kebutuhan, cover */
    display: block;
    background-image: url('../images/Picture1.jpg');
}

.container-luar {
    width: 100%;
    height: 100%; /* Pastikan elemen mengambil seluruh tinggi layar */
    background-color: red;
    align-items: center; /* Atur vertikal ke tengah */
    justify-content: center; /* Atur horizontal ke tengah */
    padding-bottom:10px;
    padding-top:15px;
    display: flex; /* Aktifkan Flexbox */
    background-image: url('../images/Picture2.jpg');
    background-size: 100% 100%; /* Memastikan gambar memenuhi seluruh container tanpa pengulangan */
    /*background-position: center; /* Memposisikan gambar di tengah */
    /*background-repeat: no-repeat;*/
}

.contentheader {
    position: absolute;
    z-index: 1;
    color: white;
    text-align: top !important;
    opacity:0.2;
}

 .judul h1 {
    margin: 10px 0;
    font-size: 44px; /* Ukuran font default */
}
.judul h3 {
    margin: 10px 0;
    font-size: 24px; /* Ukuran font default */
}

/* Media query untuk layar kecil (max-width: 768px) */
@media screen and (max-width: 768px) {
    .judul h3,.judul-product h3 {
        font-size: 16px; /* Ukuran font untuk layar kecil */
    }
}

/* Media query untuk layar yang lebih kecil (max-width: 480px) */
@media screen and (max-width: 480px) {
    .judul h3 {
        font-size: 14px; /* Ukuran font untuk layar sangat kecil */
    }
}

.space-atas {
    margin: 70px; /* Tambahkan margin ke semua sisi */
}

/*style di bawahpindahan dari productwuling-voice.php*/

        .container-fluid {
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 10px;
        }
       
        .card {
            font-family: 'Lato', sans-serif;
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 95%;
        }
        .card-body {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-grow: 1;
        }
        .card-title {
            font-size: 1.25rem;
        }
        .search-container {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 20px;
        }
        
        .card-img-top {
            width: 50% !important;
            height: auto;
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
            border-radius: 20%;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card-img-top:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .card-img-top:hover + .hover-text {
            opacity: 1;
        }

        .hover-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            color: white;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            transition: opacity 0.3s ease-in-out;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 5px;
        }
        .keterangan {
            font-family: 'Lato', sans-serif;
            font-size: 8pt;
            color: brown;
        }

        .btn-whatsapp {
            background-color: #4d6082!important;
            color: white!important;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
        }
        .btn-whatsapp:hover {
            background-color: #1EBE5D;
        }
        .btn-whatsapp img {
            margin-right: 8px;
            transition: transform 0.3s ease;
        }
        .btn-whatsapp:hover img {
            transform: scale(1.2);
        }