/********** Template CSS **********/
:root {
--primary: #F3BD00;
--secondary: #757575;
--light: #F3F6F8;
--dark: #0C2B4B;
}
.carousel-item img {
object-fit: cover;
object-position: center;
}
.py-6 {
padding-top: 6rem;
padding-bottom: 6rem;
}
.my-6 {
margin-top: 6rem;
margin-bottom: 6rem;
}
.back-to-top {
position: fixed;
display: none;
right: 30px;
bottom: 30px;
z-index: 99;
}
.text-black {
color: #000000 !important;
}
.card-img-top {
max-height: 900px;
object-fit: cover; /* Memastikan gambar diisi sepenuhnya ke dalam kotak tanpa merubah aspek rasionya */
}
/* Untuk perangkat dengan lebar layar lebih besar dari 768px (misalnya, desktop) */
@media (min-width: 768px) {
.col-lg-8 .card {
margin-bottom: 20px; /* Beri ruang antara kartu */
border: none; /* Hilangkan border */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Tambahkan bayangan halus */
border-radius: 10px; /* Tambahkan radius pada sudut */
}
.col-lg-8 .card-img-top {
height: 500px; /* Tetapkan tinggi gambar */
object-fit: cover; /* Potong gambar agar sesuai dengan ukuran */
border-top-left-radius: 10px; /* Tambahkan radius pada sudut atas */
border-top-right-radius: 10px; /* Tambahkan radius pada sudut atas */
}
.col-lg-8 .card-body {
padding: 20px; /* Sesuaikan padding dalam body card */
}
.col-lg-8 .card-title {
font-size: 24px; /* Ukuran font yang lebih besar untuk judul card */
margin-bottom: 15px; /* Margin bawah untuk judul */
color: #333; /* Warna teks */
}
.col-lg-8 .card-text {
font-size: 16px; /* Ukuran font untuk teks card */
margin-bottom: 15px; /* Margin bawah untuk teks */
color: #555; /* Warna teks */
text-align: justify; /* Rata kiri-kanan */
}
.col-lg-8 .btn {
font-size: 16px; /* Ukuran font untuk tombol */
padding: 10px 20px; /* Sesuaikan padding tombol */
border-radius: 5px; /* Tambahkan radius pada tombol */
display: inline-block; /* Jadikan tombol sebagai inline-block element */
width: auto; /* Biarkan lebar tombol menyesuaikan kontennya */
text-align: center; /* Pusatkan teks pada tombol */
}
.col-lg-8 .small.text-muted {
text-align: left; /* Rata kiri teks kecil */
display: block; /* Jadikan elemen sebagai block */
margin-bottom: 10px; /* Beri jarak bawah */
}
.col-lg-8 .container.py-3 {
padding-left: 15px; /* Sesuaikan padding kiri container */
padding-right: 15px; /* Sesuaikan padding kanan container */
}
.col-lg-8 .row > .col-md-6 {
flex: 0 0 50%; /* Pastikan kolom dalam row mengambil 50% lebar */
max-width: 50%; /* Pastikan kolom dalam row mengambil 50% lebar */
}
.col-lg-8 .row {
margin-left: -15px; /* Sesuaikan margin kiri row */
margin-right: -15px; /* Sesuaikan margin kanan row */
}
}
/* Untuk perangkat dengan lebar layar lebih besar dari 768px (misalnya, desktop) */
@media (min-width: 768px) {
.md-4 {
width: 400px; /* Tentukan lebar kolom */
float: left; /* Mengapit elemen ke kiri */
}
.md-4 .navbar-brand img {
height: 60px; /* Atur tinggi logo */
width: auto; /* Biarkan lebar menyesuaikan secara proporsional */
}
}
/* CSS untuk tombol responsif di perangkat seluler */
@media (max-width: 576px) {
.btn {
padding: 8px 12px; /* Atur padding tombol */
font-size: 14px; /* Ukuran font untuk tombol */
border-radius: 5px; /* Tambahkan sudut lengkung pada tombol */
display: block; /* Jadikan tombol sebagai block element */
width: 100%; /* Pastikan tombol mengisi lebar kontainer */
text-align: center; /* Pusatkan teks pada tombol */
margin-bottom: 10px; /* Atur margin bawah untuk jarak antara tombol */
}
}
/* Untuk perangkat dengan lebar layar kurang dari atau sama dengan 576px (misalnya, perangkat seluler) */
@media (max-width: 576px) {
.col-lg-8 .card {
margin-bottom: 20px; /* Beri ruang antara kartu */
border: none; /* Hilangkan border */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Tambahkan bayangan halus */
border-radius: 10px; /* Tambahkan radius pada sudut */
}
.col-lg-8 .card-img-top {
height: auto; /* Sesuaikan tinggi gambar secara otomatis */
max-height: 300px; /* Batas tinggi gambar */
object-fit: cover; /* Potong gambar agar sesuai dengan ukuran */
border-top-left-radius: 10px; /* Tambahkan radius pada sudut atas */
border-top-right-radius: 10px; /* Tambahkan radius pada sudut atas */
}
.col-lg-8 .card-body {
padding: 15px; /* Sesuaikan padding dalam body card */
}
.col-lg-8 .card-title {
font-size: 20px; /* Ukuran font yang lebih besar untuk judul card */
margin-bottom: 10px; /* Margin bawah untuk judul */
color: #333; /* Warna teks */
text-align: center; /* Pusatkan teks */
}
.col-lg-8 .card-text {
font-size: 14px; /* Ukuran font untuk teks card */
margin-bottom: 10px; /* Margin bawah untuk teks */
color: #555; /* Warna teks */
text-align: justify; /* Rata kiri-kanan */
}
.col-lg-8 .btn {
font-size: 14px; /* Ukuran font untuk tombol */
padding: 8px 12px; /* Kurangi padding tombol */
border-radius: 5px; /* Tambahkan radius pada tombol */
display: block; /* Jadikan tombol sebagai block element */
width: 100%; /* Lebarkan tombol sesuai dengan parent */
text-align: center; /* Pusatkan teks pada tombol */
}
.col-lg-8 .small.text-muted {
text-align: center; /* Pusatkan teks kecil */
display: block; /* Jadikan elemen sebagai block */
margin-bottom: 10px; /* Beri jarak bawah */
}
.col-lg-8 .container.py-3 {
padding-left: 0; /* Hilangkan padding kiri container */
padding-right: 0; /* Hilangkan padding kanan container */
}
.col-lg-8 .row > .col-md-6 {
flex: 0 0 100%; /* Pastikan kolom dalam row mengambil 100% lebar */
max-width: 100%; /* Pastikan kolom dalam row mengambil 100% lebar */
}
.col-lg-8 .row {
margin-left: 0; /* Hilangkan margin kiri row */
margin-right: 0; /* Hilangkan margin kanan row */
}
}
/* CSS untuk kartu di dalam tag "row" */
.row .card {
border: none; /* Hilangkan border */
box-shadow: 0 4px 8px rgb(0 0 0 / 0%); /* Tambahkan bayangan halus */
border-radius: 10px; /* Tambahkan radius pada sudut */
transition: transform 0.3s ease; /* Efek transisi saat dihover */
background-color: #fffffff0;
}
.card-body {
background-color: #ffffff;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-title {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.card-price {
font-size: 1.5rem;
color: #28a745;
font-weight: bold;
margin-bottom: 1rem;
}
.card-details {
font-size: 0.875rem;
margin-bottom: 1rem;
color: #6c757d;
}
.btn-container {
display: flex;
justify-content: space-between;
}
.btn-container .btn {
width: 48%;
}
.view-all-btn {
margin-top: 2rem;
}
@media (max-width: 768px) {
.row {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.col-6 {
flex: 0 0 100%;
max-width: 100%;
}
.testimonial-item {
margin-bottom: 20px;
}
}
@media (min-width: 768px) {
.testimonial-carousel {
display: flex;
justify-content: center;
}
.testimonial-item {
margin-right: 15px;
}
}
/* CSS untuk gambar dalam kartu */
.row .card-img-top {
border-top-left-radius: 10px; /* Tambahkan radius pada sudut atas kiri */
border-top-right-radius: 10px; /* Tambahkan radius pada sudut atas kanan */
object-fit: cover; /* Atur agar gambar mengisi dengan mempertahankan aspek rasio */
height: auto; /* Atur tinggi gambar */
}
/* CSS untuk judul dalam kartu */
.row .card-title {
font-size: 18px; /* Ukuran font judul */
color: #333; /* Warna teks */
text-align: center; /* Pusatkan teks */
margin-top: 10px; /* Atur margin atas */
}
/* CSS untuk teks kecil dalam kartu */
.row .small.text-muted {
text-align: center; /* Pusatkan teks */
display: block; /* Jadikan elemen sebagai block */
margin-top: 5px; /* Atur margin atas */
}
/* CSS untuk tombol dalam kartu */
.row .btn {
font-size: 14px; /* Ukuran font tombol */
padding: 8px 12px; /* Atur padding tombol */
border-radius: 5px; /* Tambahkan radius pada tombol */
margin: 10px auto; /* Atur margin secara otomatis */
}
/* CSS untuk tautan dalam kartu */
.row .text-decoration-none {
text-decoration: none; /* Hilangkan dekorasi tautan */
}
/* CSS untuk kartu "Link Terkait" di perangkat seluler */
@media (max-width: 576px) {
.card2 .card2-img {
width: 100%; /* Pastikan gambar mengisi lebar kontainer */
height: auto; /* Atur tinggi gambar agar proporsional */
border-radius: 10px; /* Tambahkan sudut lengkung ke gambar */
object-fit: cover; /* Atur agar gambar mengisi dengan mempertahankan aspek rasio */
transition: transform 0.3s ease; /* Efek transisi saat dihover */
}
/* CSS untuk efek zoom pada gambar saat dihover di kartu "Link Terkait" */
.card2 .card2-img:hover {
transform: scale(1.05); /* Perbesar gambar saat dihover */
}
/* CSS untuk mengatur tinggi maksimum kartu "Link Terkait" */
.card.mb-4 .card-body {
max-height: none; /* Hapus batasan tinggi maksimum */
overflow-y: hidden; /* Hilangkan scroll vertikal */
}
}
/* CSS untuk tautan kategori di perangkat seluler */
@media (max-width: 576px) {
.card.mb-4 .card-body ul {
list-style: none; /* Hilangkan gaya daftar bawaan */
padding: 0; /* Hilangkan padding */
margin: 0; /* Hilangkan margin */
}
/* CSS untuk tampilan tautan kategori di perangkat seluler */
.card.mb-4 .card-body ul li {
margin-bottom: 10px; /* Atur jarak antara setiap tautan kategori */
}
/* CSS untuk menyesuaikan lebar kolom kategori di perangkat seluler */
.card.mb-4 .card-body .col-sm-6 {
flex: 0 0 100%; /* Pastikan kolom mengambil lebar penuh */
max-width: 100%; /* Pastikan kolom mengambil lebar penuh */
}
}
/* CSS untuk kartu "Link Terkait" di perangkat tablet */
@media (min-width: 577px) and (max-width: 992px) {
.card2 .card2-img {
width: 100%; /* Pastikan gambar mengisi lebar kontainer */
height: auto; /* Atur tinggi gambar agar proporsional */
border-radius: 10px; /* Tambahkan sudut lengkung ke gambar */
object-fit: cover; /* Atur agar gambar mengisi dengan mempertahankan aspek rasio */
transition: transform 0.3s ease; /* Efek transisi saat dihover */
}
/* CSS untuk efek zoom pada gambar saat dihover di kartu "Link Terkait" */
.card2 .card2-img:hover {
transform: scale(1.05); /* Perbesar gambar saat dihover */
}
}
/* CSS untuk tautan kategori di perangkat tablet */
@media (min-width: 577px) and (max-width: 992px) {
.card.mb-4 .card-body ul li {
margin-bottom: 10px; /* Atur jarak antara setiap tautan kategori */
}
}
/* CSS untuk kartu "Link Terkait" di perangkat desktop */
@media (min-width: 993px) {
.card2 .card2-img {
width: 100%; /* Pastikan gambar mengisi lebar kontainer */
height: auto; /* Atur tinggi gambar agar proporsional */
border-radius: 10px; /* Tambahkan sudut lengkung ke gambar */
object-fit: cover; /* Atur agar gambar mengisi dengan mempertahankan aspek rasio */
transition: transform 0.3s ease; /* Efek transisi saat dihover */
}
/* CSS untuk efek zoom pada gambar saat dihover di kartu "Link Terkait" */
.card2 .card2-img:hover {
transform: scale(1.05); /* Perbesar gambar saat dihover */
}
}
/* CSS untuk tautan kategori di perangkat desktop */
@media (min-width: 993px) {
.card.mb-4 .card-body ul li {
margin-bottom: 10px; /* Atur jarak antara setiap tautan kategori */
}
}
/* CSS untuk kartu di perangkat seluler */
@media (max-width: 576px) {
.card {
height: auto; /* Atur tinggi kartu agar disesuaikan dengan konten */
border-radius: 10px; /* Tambahkan sudut lengkung ke kartu */
overflow: hidden; /* Atur agar konten yang melebihi kartu tidak muncul */
}
.card-img-top {
width: 100%; /* Pastikan gambar mengisi lebar kartu */
height: auto; /* Atur tinggi gambar agar proporsional */
border-top-left-radius: 10px; /* Tambahkan sudut lengkung pada sudut kiri atas */
border-top-right-radius: 10px; /* Tambahkan sudut lengkung pada sudut kanan atas */
}
.card-body {
padding: 15px; /* Atur padding dalam body kartu */
}
.card-title {
font-size: 16px; /* Ukuran font untuk judul kartu */
margin-bottom: 10px; /* Atur margin bawah untuk judul kartu */
color: #333; /* Warna teks judul */
}
.small.text-muted {
display: block; /* Jadikan elemen sebagai block */
margin-top: 5px; /* Atur margin atas */
font-size: 12px; /* Ukuran font untuk teks kecil */
color: #666; /* Warna teks */
}
.btn {
font-size: 14px; /* Ukuran font untuk tombol */
padding: 8px 12px; /* Atur padding tombol */
border-radius: 5px; /* Tambahkan sudut lengkung pada tombol */
width: 100%; /* Pastikan tombol mengisi lebar kartu */
}
}
.navbar .navbar-nav .nav-link {
margin-right: 30px;
padding: 25px 0;
color: #fff;
font-weight: 500;
text-transform: uppercase;
outline: none;
}
/* Gaya untuk tampilan mobile dan layar kecil */
@media screen and (max-width: 1440) {
.navbar-toggler {
display: block;
}
.navbar-collapse {
display: none;
}
.navbar-collapse.show {
display: block;
}
.navbar .navbar-nav .nav-link {
margin-right: 30px;
padding: 15px 0; /* Adjusted padding for mobile */
color: #fff;
font-weight: 500;
text-transform: uppercase;
outline: none;
}
.navbar .navbar-nav .nav-item {
width: 100%; /* Ensure nav items take full width on mobile */
}
}
.navbar-scrolled {
box-shadow: 0 4px 2px -2px gray;
transition: box-shadow 0.3s ease-in-out;
}
.overlay {
height: 100%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
transition: 0.5s;
display: none;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
/* Untuk perangkat dengan lebar layar kurang dari atau sama dengan 576px (misalnya, perangkat seluler) */
@media (max-width: 576px) {
.navbar-brand img {
height: 40px; /* Atur tinggi gambar logo */
width: 200px; /* Biarkan lebar menyesuaikan secara proporsional */
max-width: 100%; /* Pastikan lebar gambar tidak melebihi lebar kontainer */
}
.navbar-brand {
text-align: center; /* Pusatkan elemen navbar-brand */
display: flex;
justify-content: center; /* Pusatkan secara horizontal */
align-items: center; /* Pusatkan secara vertikal */
}
/* Tambahkan gaya lainnya sesuai kebutuhan */
}
/* Untuk perangkat dengan lebar layar kurang dari atau sama dengan 576px (misalnya, perangkat seluler) */
@media screen and (max-width: 576px) {
h1 {
font-size: 20px; /* Ukuran font yang lebih kecil untuk H1 */
color: #333; /* Warna teks */
text-align: center; /* Pusatkan teks */
margin: 15px 0; /* Margin atas dan bawah */
padding: 10px; /* Tambahkan padding */
border-radius: 5px; /* Tambahkan radius sudut */
font-family: 'Poppins', sans-serif; /* Gunakan font Poppins */
}
h2 {
font-size: 18px; /* Ukuran font untuk H2 */
color: #444; /* Warna teks */
text-align: center; /* Pusatkan teks */
margin: 12px 0; /* Margin atas dan bawah */
font-family: 'Poppins', sans-serif; /* Gunakan font Poppins */
}
h3 {
font-size: 16px; /* Ukuran font untuk H3 */
color: #555; /* Warna teks */
text-align: center; /* Pusatkan teks */
margin: 10px 0; /* Margin atas dan bawah */
font-family: 'Poppins', sans-serif; /* Gunakan font Poppins */
}
h4 {
font-size: 14px; /* Ukuran font untuk H4 */
color: #666; /* Warna teks */
text-align: center; /* Pusatkan teks */
margin: 8px 0; /* Margin atas dan bawah */
font-family: 'Poppins', sans-serif; /* Gunakan font Poppins */
}
h5 {
font-size: 12px; /* Ukuran font untuk H5 */
color: #777; /* Warna teks */
text-align: center; /* Pusatkan teks */
margin: 6px 0; /* Margin atas dan bawah */
font-family: 'Poppins', sans-serif; /* Gunakan font Poppins */
}
h6 {
font-size: 10px; /* Ukuran font untuk H6 */
color: #888; /* Warna teks */
text-align: center; /* Pusatkan teks */
margin: 4px 0; /* Margin atas dan bawah */
font-family: 'Poppins', sans-serif; /* Gunakan font Poppins */
}
p {
font-size: 14px; /* Ukuran font untuk paragraf */
margin: 10px 0; /* Margin atas dan bawah */
padding: 0 10px; /* Tambahkan padding horizontal */
font-family: 'Poppins', sans-serif; /* Gunakan font Poppins */
}
}
/* Untuk perangkat dengan lebar layar lebih besar dari 576px (misalnya, desktop) */
@media screen and (min-width: 576px) {
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif; /* Ganti font ke Poppins */
font-weight: bold; /* Atur ketebalan font */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Tambahkan efek bayangan teks */
transition: all 0.3s ease; /* Efek transisi */
margin-bottom: 10px; /* Atur margin bawah untuk judul */
padding: 0; /* Hapus padding */
}
p {
font-size: 16px; /* Ukuran font untuk paragraf */
margin-bottom: 15px; /* Atur margin bawah untuk paragraf */
font-family: 'Poppins', sans-serif; /* Gunakan font Poppins */
}
}
/* CSS untuk Layanan pada Perangkat Seluler */
@media (max-width: 576px) {
.container.bg-nav {
padding: 20px 10px; /* Kurangi padding pada perangkat seluler */
}
.container.bg-nav h2.display-6 {
font-size: 24px; /* Ukuran font yang lebih besar untuk judul */
padding-bottom: 5px; /* Kurangi ruang bawah untuk judul */
}
.row.text-center.justify-content-center {
overflow-x: auto; /* Aktifkan scroll horizontal jika diperlukan */
padding-bottom: 15px; /* Tambahkan ruang bawah */
}
.col-lg-2.col-md-3.col-sm-4.mt-2.mb-5 {
flex: 0 0 auto; /* Tetapkan lebar item */
width: calc(50% - 10px); /* Atur lebar item */
margin-right: 10px; /* Beri margin kanan */
}
.card {
border-radius: 10px; /* Tambahkan sudut lengkung ke card */
transition: transform 0.3s ease; /* Efek transisi */
}
.item1-img-top {
border-radius: 10px; /* Tambahkan sudut lengkung ke gambar */
}
}
/* CSS untuk gambar di mode desktop */
@media (min-width: 768px) {
.item1-img-top {
width: 100%; /* Pastikan gambar mengisi lebar kontainer */
height: auto; /* Atur tinggi gambar agar proporsional */
border-radius: 10px; /* Tambahkan sudut lengkung ke gambar */
object-fit: cover; /* Atur agar gambar mengisi dengan mempertahankan aspek rasio */
transition: transform 0.3s ease; /* Efek transisi saat dihover */
}
.item1-img-top:hover {
transform: scale(1.05); /* Perbesar gambar saat dihover */
}
}
/* CSS untuk gambar pada kartu */
.card .card-img-top {
width: 100%; /* Pastikan gambar mengisi lebar kontainer */
height: 280px; /* Atur tinggi gambar */
object-fit: cover; /* Atur agar gambar mengisi dengan mempertahankan aspek rasio */
border-radius: 10px; /* Tambahkan sudut lengkung ke gambar */
}
/* CSS untuk menyesuaikan tinggi gambar pada kartu untuk perangkat seluler */
@media (max-width: 576px) {
.card .card-img-top {
height: 250px; /* Atur tinggi gambar untuk perangkat seluler */
}
}
/* CSS untuk gambar di perangkat seluler */
@media (max-width: 576px) {
.item1-img-top {
width: 100%; /* Pastikan gambar mengisi lebar kontainer */
height: auto; /* Atur tinggi gambar agar proporsional */
border-radius: 10px; /* Tambahkan sudut lengkung ke gambar */
object-fit: cover; /* Atur agar gambar mengisi dengan mempertahankan aspek rasio */
transition: transform 0.3s ease; /* Efek transisi saat dihover */
}
.item1-img-top:hover {
transform: scale(1.05); /* Perbesar gambar saat dihover */
}
}
/* CSS untuk gambar responsif di perangkat seluler */
.card-img-top {
width: 100%; /* Pastikan gambar mengisi lebar kontainer */
height: auto; /* Atur tinggi gambar menjadi otomatis agar proporsional */
border-radius: 10px; /* Tambahkan sudut lengkung ke gambar */
object-fit: cover; /* Atur agar gambar mengisi dengan mempertahankan aspek rasio */
transition: transform 0.3s ease; /* Efek transisi saat dihover */
}
.card-img-top:hover {
transform: scale(1.05); /* Perbesar gambar saat dihover */
}
/*** Spinner ***/
#spinner {
opacity: 0;
visibility: hidden;
transition: opacity .5s ease-out, visibility 0s linear .5s;
z-index: 99999;
}
#spinner.show {
transition: opacity .5s ease-out, visibility 0s linear 0s;
visibility: visible;
opacity: 1;
}
/*** Button ***/
.btn {
font-weight: 500;
transition: .5s;
}
.btn.btn-primary,
.btn.btn-outline-primary:hover {
color: #FFFFFF;
}
.btn-square {
width: 38px;
height: 38px;
}
.btn-sm-square {
width: 32px;
height: 32px;
}
.btn-lg-square {
width: 36px;
height: 36px;
}
.btn-square,
.btn-sm-square,
.btn-lg-square {
padding: 0;
display: flex;
position: bottom: 50px;;
align-items: center;
justify-content: center;
font-weight: normal;
}
/*** Navbar ***/
.navbar.sticky-top {
top: -50px;
transition: .5s;
}
.navbar .navbar-brand,
.navbar a.btn {
height: 50px
}
/* Gaya untuk tampilan desktop */
.navbar .navbar-nav .nav-link {
margin-right: 30px;
padding: 25px 0;
color: #fff;
font-weight: 500;
text-transform: uppercase;
outline: none;
}
/* Gaya untuk tampilan mobile */
@media screen and (max-width: 576px) {
.navbar .navbar-nav .nav-link {
margin-right: 30px;
padding: 5px 0; /* Adjusted padding for mobile */
color: #fff;
font-weight: 500;
text-transform: uppercase;
outline: none;
}
.navbar .navbar-nav .nav-item {
width: 100%; /* Ensure nav items take full width on mobile */
}
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
color: var(--primary);
}
.navbar .dropdown-toggle::after {
border: none;
content: "\f107";
font-family: "Font Awesome 5 Free";
font-weight: 900;
vertical-align: middle;
margin-left: 8px;
}
/* Base styles for the logo */
.navbar-brand img {
width: 100%;
height: auto;
max-width: 200px; /* Adjust as needed */
}
/* Adjustments for larger screens */
@media (min-width: 768px) {
.navbar-brand img {
max-width: 200px; /* Adjust as needed */
}
}
/* Adjustments for very large screens */
@media (min-width: 1200px) {
.navbar-brand img {
max-width: 400px; /* Adjust as needed */
}
}
/*** Header ***/
.carousel-caption {
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: rgb(3 3 3 / 44%);
z-index: 1;
}
.carousel-control-prev,
.carousel-control-next {
width: 15%;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
width: 3rem;
height: 3rem;
background-color: var(--primary);
border: 10px solid var(--primary);
}
@media (max-width: 480px) {
#header-carousel .carousel-item img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
@media (min-width: 480px) and (max-width: 768px) {
#header-carousel .carousel-item {
position: relative;
min-height: 450px;
}
#header-carousel .carousel-item img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover; /* Memastikan gambar tidak pecah dan menutupi area carousel */
object-position: center; /* Pusatkan gambar di dalam area carousel */
}
}
@media (min-width: 768px) {
#header-carousel .carousel-item {
position: relative;
min-height: 450px;
}
#header-carousel .carousel-item img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.page-header {
background: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(../img/carousel-1.jpg) center center no-repeat;
background-size: cover;
}
.breadcrumb-item+.breadcrumb-item::before {
color: #999999;
}
/*** Facts ***/
@media (min-width: 991.98px) {
.facts {
position: relative;
margin-top: -75px;
z-index: 1;
}
}
/*** Courses ***/
.courses {
min-height: 100vh;
background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), url(../img/carousel-1.jpg) center center no-repeat;
background-attachment: fixed;
background-size: cover;
}
.courses-item .courses-overlay {
position: absolute;
width: 100%;
height: 0;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .5);
overflow: hidden;
opacity: 0;
transition: .5s;
}
.courses-item:hover .courses-overlay {
height: 100%;
opacity: 1;
}
.card-content {
max-height: 300px; /* Ganti 300px sesuai kebutuhan Anda */
overflow: auto;
}
/*** Team ***/
.team-items {
margin: -.75rem;
}
.team-item {
padding: .75rem;
}
.team-item::after {
position: absolute;
content: "";
width: 100%;
height: 0;
top: 0;
left: 0;
background: #FFFFFF;
transition: .5s;
z-index: -1;
}
.team-item:hover::after {
height: 100%;
background: var(--primary);
}
.team-item .team-social {
position: absolute;
width: 100%;
height: 0;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .75);
overflow: hidden;
opacity: 0;
transition: .5s;
}
.team-item:hover .team-social {
height: 100%;
opacity: 1;
}
/* General Carousel Styles */
.carousel-image {
width: 100%;
height: 100%;
object-fit: cover;
box-shadow: 0px 0px 10px rgba(240, 208, 208, 0.3);
transition: transform 5s linear;
}
@keyframes zoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
.carousel-item.active .carousel-image {
animation: zoom 10s infinite alternate;
transform: scale(1.05, 1.05);
transition: transform 10000ms linear 0s;
}
/* Optional: Adjust the Previous and Next Buttons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
width: 3rem;
height: 3rem;
background-color: var(--primary);
border: 10px solid var(--primary);
}
.carousel-control-prev,
.carousel-control-next {
width: 15%;
}
/*** Testimonial ***/
.testimonial-carousel .owl-dots {
height: 40px;
margin-top: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.testimonial-carousel .owl-dot {
position: relative;
display: inline-block;
margin: 0 5px;
width: 20px;
height: 20px;
background: #dc3545;
border: 2px solid var(--primary);
transition: .5s;
}
.testimonial-carousel .owl-dot.active {
width: 20px;
height: 20px;
background: var(--primary);
}
.testimonial-carousel .owl-item img {
width: 250px;
height: 250px;
}
.testimonial-carousel .owl-item1 img {
width: 60px;
height: 250px;
}
/*** Footer ***/
.footer .btn.btn-link {
display: block;
margin-bottom: 5px;
padding: 0;
text-align: left;
color: var(--light);
font-weight: normal;
text-transform: capitalize;
transition: .3s;
}
.footer .btn.btn-link::before {
position: relative;
content: "\f105";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: var(--light);
margin-right: 10px;
}
.footer .btn.btn-link:hover {
color: var(--primary);
letter-spacing: 1px;
box-shadow: none;
}
.copyright {
background: #092139;
}
.copyright a {
color: var(--primary);
}
.copyright a:hover {
color: var(--light);
}
/* Gaya dasar untuk kontainer carousel */
.owl-carousel {
display: none;
width: 100%;
overflow: hidden;
}
/* Gaya dasar untuk item carousel */
.owl-carousel .item {
display: inline-block;
width: 100%;
}
/* Gaya untuk tombol navigasi */
.owl-carousel .owl-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
/* Gaya untuk tombol navigasi kiri */
.owl-carousel .owl-nav .owl-prev {
left: 10px;
}
/* Gaya untuk tombol navigasi kanan */
.owl-carousel .owl-nav .owl-next {
right: 10px;
}
/* Gaya untuk titik navigasi (dots) */
.owl-carousel .owl-dots {
text-align: center;
margin-top: 35px;
}
/* Gaya untuk setiap titik navigasi */
.owl-carousel .owl-dot {
display: inline-block;
margin: 0 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
}
/* Gaya untuk titik navigasi aktif */
.owl-carousel .owl-dot.active {
background-color: #555;
}
.floating-whatsapp {
position: fixed;
bottom: 160px; /* Menentukan jarak 100px dari bawah */
right: 40px;
z-index: 1000;
}
/* Style untuk tombol WhatsApp */
.floating-whatsapp a {
display: inline-block;
background-color: #25d366;
color: #fff;
border-radius: 50%;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 24px;
text-decoration: none;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
/* Style untuk hover pada tombol WhatsApp */
.floating-whatsapp a:hover {
background-color: #128C7E;
}
img{
max-width: 100%;
}
.gallery{
background-color: #dbddf1;
padding: 80px 0;
}
.gallery img{
background-color: #ffffff;
padding: 15px;
width: 100%;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
cursor: pointer;
}
#gallery-modal .modal-img{
width: 100%;
}
.item2 {
background: rgb(243 246 248);
padding-block: 25px;
padding-left: 30px;
padding-right: 20px;
}
.card2-img-top {
width: 200px;
height: 100px;
}
.btn-primary:hover {
background-color: #159958;
border-color: #159958;
}
.btn-layanan:hover {
background-color: #ffcc00; /* Warna latar belakang kuning saat dihover */
border-color: #ffcc00; /* Warna border kuning saat dihover */
color: #ffffff; /* Warna teks putih saat dihover */
}
.card2-img-top {
filter: greenscale(100%); /* Membuat gambar menjadi hitam putih */
transition: filter 0.3s ease; /* Animasi perubahan warna */
}
.card2-img-top:hover {
filter: hue-rotate(120deg); /* Mengubah warna gambar menjadi hijau saat dihover */
}
.card2 {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
}
.card1 {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-clip: border-box;
}
.card2 img {
max-width: 100%; /* Menjadikan lebar maksimum logo sesuai dengan lebar parent element */
height: auto; /* Menjaga aspek rasio logo agar tetap proporsional */
}
@media (max-width: 768px) {
.card2 img {
max-width: 100%; /* Mengurangi lebar maksimum logo saat resolusi layar kurang dari atau sama dengan 768px */
}
}
.card2-img {
height: 200px; /* Atur tinggi gambar */
width: 100%; /* Agar gambar dapat menyesuaikan lebar div */
object-fit: cover; /* Pastikan gambar mengisi area dengan mempertahankan aspek rasio */
}
.card2 a {
display: block; /* Agar tag menjadi elemen blok */
height: 100%; /* Set tinggi tag menjadi 100% */
}
/* CSS faq */
.main-content {
padding-top: 100px;
padding-bottom: 100px;
}
.flex-center {
align-items: center;
}
.accordion-button{
margin-bottom: 10px;
}
.accordion-body {
margin-top: 15px;
padding: 25px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 25px -3px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}
.circle-icon {
height: 50px;
width: 50px;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
background: #2b4eff;
border: 5px solid #b2bfff;
color: #fff;
margin-left: -20px;
margin-right: 10px;
transform: scale(1.2);
}
.accordion-item{
border: 0px!important;
}
.accordion-button:not(.collapsed){
border: 0px!important;
color: #0c63e4;
background-color: #ffffff;
box-shadow: inset 0 0px 0 rgb(0 0 0 / 13%);
}
/* search */
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
}
.overlay-content {
position: relative;
top: 46%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: white;
}
.overlay .closebtn:hover {
color: #ccc;
}
.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: none;
float: left;
width: 80%;
background: white;
}
.overlay input[type=text]:hover {
background: #f1f1f1;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: #bbb;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #048d48; /* Warna latar belakang tombol */
color: #22c252; /* Warna teks tombol */
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: #0056b3; /* Warna latar belakang tombol saat dihover */
}
#google_translate_element {
width: auto !important; /* Atur lebar elemen agar mengikuti kontennya */
max-width: 100px; /* Atur lebar maksimum elemen */
display: inline-block;
/* youtube */
.yt-container {
position: relative;
padding-top: 56.25%;
}
.yt-embed {
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
}
.table-responsive {
overflow-x: auto;
}
/* CSS untuk membuat Summernote area responsif */
.note-editor, .note-editable, .note-toolbar, .note-statusbar {
width: 100%;
max-width: 100%;
}
/* CSS untuk membuat tabel dengan garis tepi */
.table-bordered {
border: 1px solid #dee2e6;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #dee2e6;
}
.table-bordered thead th {
border-top: 2px solid #dee2e6;
}
/* Optional: Membuat tabel sedikit lebih ramping pada layar kecil */
@media (max-width: 376px) {
.table-responsive {
overflow-x: scroll;
}
}
/* Default styles */
.container {
max-width: 1140px;
margin: 0 auto;
}
/* Responsive styles */
@media (max-width: 991px) {
/* Adjust the container width */
.container {
max-width: 960px;
}
}
@media (max-width: 767px) {
/* Adjust the container width */
.container {
max-width: 720px;
}
}
@media (max-width: 575px) {
/* Adjust the container width */
.container {
max-width: 540px;
}
}
/* Adjustments for specific elements */
/* Example: Adjusting font size for headings */
h1 {
font-size: 2rem; /* Default font size */
}
@media (max-width: 767px) {
h1 {
font-size: 1.5rem; /* Adjusted font size for smaller screens */
}
}
@media (max-width: 575px) {
h1 {
font-size: 1.2rem; /* Further adjusted font size for smaller screens */
}
}
/* Adjustments for specific components */
/* Example: Adjusting card width */
.card {
width: 100%; /* Default card width */
}
@media (min-width: 768px) {
.card {
width: 48%; /* Adjusted card width for medium screens */
}
}
@media (min-width: 992px) {
.card {
width: 31%; /* Adjusted card width for large screens */
}
}
.bg-layanan {
background: #0d4b532e; center center no-repeat;
}
.bg-cart {
background: #459b32; center center no-repeat;
}
.bg-jumbo {
background: #0d4b532e; center center no-repeat;
}
.bg-berita {
background: #ffffff; center center no-repeat;
}
.bg-orga{
background: #18644c; center center no-repeat;
}
.bg-bptu{
background-color: #18644c !important;
}
.card1 {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #f2f2f200;
background-clip: border-box;
border-radius: 0px;
}
table {
table-layout: auto;
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
/* CSS */
.navbar {
position: relative;
display: flex;
flex-wrap: wrap;
height: 50;
align-items: center;
justify-content: space-between;
padding-top: .5rem;
padding-bottom: .5rem;
z-index: 1000; /* Menambahkan z-index untuk menempatkan navbar di atas konten lain */
}
.navbar-nav {
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
list-style: none;
z-index: 999; /* Menambahkan z-index untuk menempatkan menu dropdown di atas konten lain */
}
.nav-link {
display: block;
padding: .5rem 1rem;
color: #F3BD00; /* Default nav link color */
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.nav-link:hover,
.nav-link:focus {
color: #c29700; /* Nav link hover/focus color */
}
.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0px;
transition: box-shadow 0.15s ease-in-out;
color: rgba(255, 255, 255, 0.55); /* Navbar toggler color */
z-index: 100190; /* Menambahkan z-index untuk menempatkan tombol toggler di atas konten lain */
}
.navbar-toggler:hover,
.navbar-toggler:focus {
text-decoration: none;
outline: 0;
box-shadow: 0 0 0 .25rem;
}
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
/* Navbar Light */
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-toggler {
color: rgba(0, 0, 0, 0.55); /* Navbar light colors */
}
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
color: rgba(0, 0, 0, 0.7); /* Navbar light colors on hover/focus */
}
/* Navbar Dark */
.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-toggler {
color: #fff; /* Navbar dark colors */
}
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
color: #fff; /* Navbar dark colors on hover/focus */
}
.navbar-scrolled {
box-shadow: 0 4px 2px -2px gray;
transition: box-shadow 0.3s ease-in-out;
}
.dropstart .dropdown-toggle::after {
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: ""
}
.dropstart .dropdown-toggle::after {
display: none
}
.dropstart .dropdown-toggle::before {
display: inline-block;
margin-right: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid transparent;
border-right: .3em solid;
border-bottom: .3em solid transparent
}
.navbar.fixed-top.show {
top: 0;
}
/* Navbar */
.navbar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: .5rem;
padding-bottom: .5rem;
z-index: 1000; /* Menambahkan z-index untuk menempatkan navbar di atas konten lain */
}
.navbar-brand {
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
white-space: nowrap;
color: #fff; /* Navbar brand color */
z-index: 1001; /* Menambahkan z-index untuk menempatkan logo di atas konten lain */
}
.navbar-nav {
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
list-style: none;
z-index: 999; /* Menambahkan z-index untuk menempatkan menu dropdown di atas konten lain */
}
.nav-link {
display: block;
padding: .5rem 1rem;
color: #F3BD00; /* Default nav link color */
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.nav-link:hover,
.nav-link:focus {
color: #c29700; /* Nav link hover/focus color */
}
.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0px;
transition: box-shadow 0.15s ease-in-out;
color: rgba(255, 255, 255, 0.55); /* Navbar toggler color */
z-index: 1001; /* Menambahkan z-index untuk menempatkan tombol toggler di atas konten lain */
}
.navbar-toggler:hover,
.navbar-toggler:focus {
text-decoration: none;
outline: 0;
box-shadow: 0 0 0 .25rem;
}
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
/* Navbar Light */
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-toggler {
color: rgba(0, 0, 0, 0.55); /* Navbar light colors */
}
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
color: rgba(0, 0, 0, 0.7); /* Navbar light colors on hover/focus */
}
/* Navbar Dark */
.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-toggler {
color: #fff; /* Navbar dark colors */
}
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
color: #fff; /* Navbar dark colors on hover/focus */
}
/*
Responsive HTML Table With Pure CSS - Web Design/UI Design
Code written by:
π¨π»ββοΈ Coding Design (Jeet Saru)
> You can do whatever you want with the code. However if you love my content, you can **SUBSCRIBED** my YouTube Channel.
πlink: www.youtube.com/codingdesign
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
@media print {
.table, .table__body {
overflow: visible;
height: auto !important;
width: auto !important;
}
}
/*@page {
size: landscape;
margin: 0;
}*/
body {
min-height: 100vh;
background: url(images/html_table.jpg) center / cover;
display: flex;
justify-content: center;
align-items: center;
}
main.table {
width: 82vw;
height: 90vh;
background-color: #fff5;
backdrop-filter: blur(7px);
box-shadow: 0 .4rem .8rem #0005;
border-radius: .8rem;
overflow: hidden;
}
.table__header {
width: 100%;
height: 10%;
background-color: #fff4;
padding: .8rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.table__header .input-group {
width: 35%;
height: 100%;
background-color: #fff5;
padding: 0 .8rem;
border-radius: 2rem;
display: flex;
justify-content: center;
align-items: center;
transition: .2s;
}
.table__header .input-group:hover {
width: 45%;
background-color: #fff8;
box-shadow: 0 .1rem .4rem #0002;
}
.table__header .input-group img {
width: 1.2rem;
height: 1.2rem;
}
.table__header .input-group input {
width: 100%;
padding: 0 .5rem 0 .3rem;
background-color: transparent;
border: none;
outline: none;
}
.table__body {
width: 95%;
max-height: calc(89% - 1.6rem);
background-color: #fffb;
margin: .8rem auto;
border-radius: .6rem;
overflow: auto;
overflow: overlay;
}
.table__body::-webkit-scrollbar{
width: 0.5rem;
height: 0.5rem;
}
.table__body::-webkit-scrollbar-thumb{
border-radius: .5rem;
background-color: #0004;
visibility: hidden;
}
.table__body:hover::-webkit-scrollbar-thumb{
visibility: visible;
}
table {
width: 100%;
}
td img {
width: 36px;
height: 36px;
margin-right: .5rem;
border-radius: 50%;
vertical-align: middle;
}
table, th, td {
border-collapse: collapse;
padding: 1rem;
text-align: left;
}
thead th {
position: sticky;
top: 0;
left: 0;
background-color: #d5d1defe;
cursor: pointer;
text-transform: capitalize;
}
tbody tr:nth-child(even) {
background-color: #0000000b;
}
tbody tr {
--delay: .1s;
transition: .5s ease-in-out var(--delay), background-color 0s;
}
tbody tr.hide {
opacity: 0;
transform: translateX(100%);
}
tbody tr:hover {
background-color: #fff6 !important;
}
tbody tr td,
tbody tr td p,
tbody tr td img {
transition: .2s ease-in-out;
}
tbody tr.hide td,
tbody tr.hide td p {
padding: 0;
font: 0 / 0 sans-serif;
transition: .2s ease-in-out .5s;
}
tbody tr.hide td img {
width: 0;
height: 0;
transition: .2s ease-in-out .5s;
}
.status {
padding: .4rem 0;
border-radius: 2rem;
text-align: center;
}
.status.delivered {
background-color: #86e49d;
color: #006b21;
}
.status.cancelled {
background-color: #d893a3;
color: #b30021;
}
.status.pending {
background-color: #ebc474;
}
.status.shipped {
background-color: #6fcaea;
}
@media (max-width: 1000px) {
td:not(:first-of-type) {
min-width: 12.1rem;
}
}
thead th span.icon-arrow {
display: inline-block;
width: 1.3rem;
height: 1.3rem;
border-radius: 50%;
border: 1.4px solid transparent;
text-align: center;
font-size: 1rem;
margin-left: .5rem;
transition: .2s ease-in-out;
}
thead th:hover span.icon-arrow{
border: 1.4px solid #6c00bd;
}
thead th:hover {
color: #6c00bd;
}
thead th.active span.icon-arrow{
background-color: #6c00bd;
color: #fff;
}
thead th.asc span.icon-arrow{
transform: rotate(180deg);
}
thead th.active,tbody td.active {
color: #6c00bd;
}
.export__file {
position: relative;
}
.export__file .export__file-btn {
display: inline-block;
width: 2rem;
height: 2rem;
background: #fff6 url(images/export.png) center / 80% no-repeat;
border-radius: 50%;
transition: .2s ease-in-out;
}
.export__file .export__file-btn:hover {
background-color: #fff;
transform: scale(1.15);
cursor: pointer;
}
.export__file input {
display: none;
}
.export__file .export__file-options {
position: absolute;
right: 0;
width: 12rem;
border-radius: .5rem;
overflow: hidden;
text-align: center;
opacity: 0;
transform: scale(.8);
transform-origin: top right;
box-shadow: 0 .2rem .5rem #0004;
transition: .2s;
}
.export__file input:checked + .export__file-options {
opacity: 1;
transform: scale(1);
z-index: 100;
}
.export__file .export__file-options label{
display: block;
width: 100%;
padding: .6rem 0;
background-color: #f2f2f2;
display: flex;
justify-content: space-around;
align-items: center;
transition: .2s ease-in-out;
}
.export__file .export__file-options label:first-of-type{
padding: 1rem 0;
background-color: #86e49d !important;
}
.export__file .export__file-options label:hover{
transform: scale(1.05);
background-color: #fff;
cursor: pointer;
}
.export__file .export__file-options img{
width: 2rem;
height: auto;
}
/* CSS untuk gambar pada kartu */
.card3 .card-img-top {
width: 100%; /* Pastikan gambar mengisi lebar kontainer */
height: 100%; /* Atur tinggi gambar */
object-fit: cover; /* Atur agar gambar mengisi dengan mempertahankan aspek rasio */
border-radius: 10px; /* Tambahkan sudut lengkung ke gambar */
}
/* CSS untuk menyesuaikan tinggi gambar pada kartu untuk perangkat seluler */
@media (max-width: 576px) {
.card3 .card-img-top {
height: 100%; /* Atur tinggi gambar untuk perangkat seluler */
}
}
/* CSS untuk gambar di perangkat seluler */
@media (max-width: 576px) {
.card3 .card-img-top {
width: 100%; /* Pastikan gambar mengisi lebar kontainer */
height: auto; /* Atur tinggi gambar agar proporsional */
border-radius: 10px; /* Tambahkan sudut lengkung ke gambar */
object-fit: cover; /* Atur agar gambar mengisi dengan mempertahankan aspek rasio */
transition: transform 0.3s ease; /* Efek transisi saat dihover */
}
.card3 .card-img-top:hover {
transform: scale(1.05); /* Perbesar gambar saat dihover */
}
}
/* CSS untuk gambar responsif di perangkat seluler */
.card3 .card-img-top {
width: 100%; /* Pastikan gambar mengisi lebar kontainer */
height: auto; /* Atur tinggi gambar menjadi otomatis agar proporsional */
border-radius: 10px; /* Tambahkan sudut lengkung ke gambar */
object-fit: cover; /* Atur agar gambar mengisi dengan mempertahankan aspek rasio */
transition: transform 0.3s ease; /* Efek transisi saat dihover */
}
.card3 .card-img-top:hover {
transform: scale(1.05); /* Perbesar gambar saat dihover */
}
/* Selamat datang */
@media (max-width: 768px) {
.row {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.col-6 {
flex: 0 0 100%;
max-width: 100%;
}
.testimonial-item {
margin-bottom: 20px;
}
}
@media (min-width: 768px) {
.testimonial-carousel {
display: flex;
justify-content: center;
}
.testimonial-item {
margin-right: 15px;
}
}
.custom-img {
width: 100%;
height: 400px;
object-fit: cover; /* Mengisi kontainer tanpa terpotong */
object-position: center; /* Pusatkan gambar dalam kontainer */
}
/* Untuk gambar pada layar desktop */
@media only screen and (min-width: 768px) {
.custom-img {
height: 400px; /* Tinggi gambar disesuaikan */
}
}
/* navbar recursive */
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 50%;
margin-left: 0.1rem;
}