/* Mengubah font pada seluruh body halaman */
body {
    font-family: 'Outfit', sans-serif;
}

/* Mengubah font pada elemen navbar dan tombol Bootstrap */
.navbar, .btn, .btn-primary, .btn-info, .back-to-top {
    font-family: 'Inter', sans-serif;
}

/* Mengubah warna tombol btn-info agar sesuai dengan permintaan Anda */
.btn-info, .bg-info {
    background-color: #2195B7 !important;
    border-color: #2195B7 !important;
}

/* Mengubah warna teks dalam tombol menjadi light (putih) */
.btn-info, .btn-info:hover, .btn-info:focus {
    color: #f8f9fa !important;
}

/* Mengubah warna teks dan menambahkan garis bawah pada link yang aktif */
  .navbar-nav .nav-link.active {
    color: #2195B7 !important; /* Mengubah warna teks */
    border-bottom: 2px solid #2195B7; /* Menambahkan garis bawah */
}

.text-info {
color: #2195B7 !important;
}

.btn-outline-info {
    color: #2195B7 !important;
    border-color: #2195B7 !important;
}

.btn-outline-info:hover {
    background-color: #2195B7 !important;
    color: #fff !important;
    border-color: #2195B7 !important;
}

/* Mengubah warna teks normal untuk link tanpa aktif */
.navbar-nav .nav-link {
    color: #000; /* Warna teks default */
}

/* Mengubah warna teks saat hover */
.navbar-nav .nav-link:hover {
    color: #2195B7; /* Mengubah warna teks saat hover */
}

/* CSS untuk memperkecil ukuran teks navbar */
.normal-text {
    font-size: 0.90rem; /* Ukuran font lebih kecil */
}

.small-text {
    font-size: 0.80rem; /* Ukuran font lebih kecil */
}

.overflow-auto {
    overflow-x: auto;
    cursor: grab;
}
.overflow-auto:active {
    cursor: grabbing;
}
.no-select {
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

#kustomerReview, 
#ProdukCCTVLanding, 
#ProdukCCTV, 
#AksesKontrolLanding, 
#ProdukAksesKontrol, 
#PaketCCTVLanding, 
#kameraCCTVBrand,
#aksesKontrolBrand,
#CertificateMetta {
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }

.brand-responsive-mobile {
    max-width: 100px;
    height: auto;
}

/* Layanan Kami */
.img-container {
    width: 50px;
    /* Ukuran lingkaran */
    height: 50px;
    /* Ukuran lingkaran */
    border-radius: 50%;
    /* Membuat kontainer berbentuk lingkaran */
    background-color: #f8f9fa;
    /* Warna latar belakang terang */
    display: flex;
    /* Untuk memusatkan gambar */
    align-items: center;
    /* Memusatkan gambar secara vertikal */
    justify-content: center;
    /* Memusatkan gambar secara horizontal */
    overflow: hidden;
    /* Menyembunyikan bagian gambar yang melebihi lingkaran */
    margin: 0 auto;
    /* Pusatkan kontainer jika diperlukan */
}

.img-container img {
    width: 50%;
    /* Mengatur lebar gambar agar lebih kecil dari lingkaran */
    height: auto;
    /* Mempertahankan rasio aspek gambar */
    object-fit: cover;
    /* Memastikan gambar memenuhi kontainer tanpa terdistorsi */
}

.card-hover {
    position: relative;
    overflow: hidden;
    transition: outline 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    outline: 2px solid #0d6efd;
    /* Warna merah danger dari Bootstrap */
    box-shadow: 0 0 0 2px #0d6efd;
    /* Outline tambahan untuk efek hover */
}

.card-hover .img-container {
    position: relative;
    overflow: hidden;
}

.card-hover .img-container img {
    transition: transform 0.3s ease;
}

.card-hover:hover .img-container img {
    transform: scale(1.1);
}

.card-hover .img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 110, 253, 0.5);
    /* Warna merah dengan transparansi */
    transition: opacity 0.3s ease;
    z-index: 1;
    opacity: 0;
}

.card-hover:hover .img-overlay {
    opacity: 1;
}
/* Layanan Kami End */