@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
/* Atur tinggi navbar */
.navbar {
    
    height: 80px; /* Atur tinggi navbar */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Shadow lebih tebal dan lebih luas */
    background-color: #f8f9fa; /* Background color light */
}
.navbar-brand img {
    margin-right: 10px; /* Atur jarak antara logo dan teks */
}


/* Navbar Brand (Logo atau Nama Perusahaan) */
.navbar-brand {
    font-size: 1rem; /* Ukuran font untuk brand */
    font-weight: bold;
    color: #333;
    text-transform: uppercase; /* Teks huruf besar */
    padding-top: 10px; /* Menurunkan teks sedikit ke bawah */
    display: flex;
    align-items: center; /* Untuk menyelaraskan teks dan logo secara vertikal */
}

/* Atur ukuran dan warna link di navbar */
.navbar-nav .nav-link {
    font-size: 1.1rem; /* Ukuran font link */
    font-weight: bold;
    color: #555; /* Warna default link */
    padding: 6px 15px; /* Jarak padding antar link */
    transition: color 0.3s ease, background-color 0.3s ease; /* Efek transisi pada hover */
}

/* Hover Effect untuk Link Navbar */
.navbar-nav .nav-link {
    transition: background-color 0.3s, color 0.3s; /* Animasi untuk transisi */
}

.navbar-nav .nav-link:hover {
    color: #f9f6f5; /* Warna teks saat dihover */
    background-color: #fb0303; /* Background saat dihover */
    border-radius: 5px; /* Sudut rounded saat hover */
}

/* Style untuk Link Aktif */
.navbar-nav .nav-link.active {
    color: #f9f6f5; /* Warna teks untuk link aktif */
    background-color: #fb0303; /* Background untuk link aktif */
    border-radius: 5px; /* Sudut rounded untuk link aktif */
}

/* Hover untuk Link Aktif */
.navbar-nav .nav-link.active:hover {
    color: #f9f6f5; /* Warna teks tetap sama saat dihover */
    background-color: #d00202; /* Warna background sedikit lebih gelap saat dihover */
    border-radius: 5px; /* Tetap rounded */
}


/* Shadow saat di-scroll */
.navbar.scrolled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Shadow lebih dalam saat di-scroll */
}

/* Atur untuk responsive collapse seperti default Bootstrap */
@media (max-width: 992px) {
    .navbar-collapse {
        background-color: #f8f9fa; /* Background collapse tetap warna navbar */
    }
    .navbar-brand {
        font-size: 12px; /* Ukuran font untuk brand */
        font-weight: bold;
        color: #333;
        text-transform: uppercase; /* Teks huruf besar */
        padding-top: 10px; /* Menurunkan teks sedikit ke bawah */
        display: flex;
        align-items: center; /* Untuk menyelaraskan teks dan logo secara vertikal */
    }
    
}

/* Header */
/* Class khusus untuk teks responsif di ponsel */
.text-responsive {
    font-size: 2rem; /* Ukuran teks default untuk desktop */
}

/* Aturan untuk layar dengan lebar maksimal 768px (ponsel) */
@media (max-width: 768px) {
    .text-responsive h1 {
        font-size: 1rem; /* Ukuran h1 lebih kecil di ponsel */
    }

    .text-responsive p {
        font-size: 10px; /* Ukuran paragraf lebih kecil di ponsel */
    }

    .text-responsive a.btn {
        font-size: 0.6rem; /* Ukuran tombol lebih kecil di ponsel */
    }
}
/* Warna awal teks dan border berwarna putih */
.btn-outline-danger {
    color: #fff; /* Warna teks putih */
    border-color: #fff; /* Warna border putih */
}

/* Warna saat tombol di-hover */
.btn-outline-danger:hover {
    color: #fff; /* Warna teks merah saat di-hover */
    background-color: #dc3545; /* Warna latar belakang putih saat di-hover */
    border-color: #dc3545; /* Tetap putih untuk border */
}

/* Services */
/* Style untuk section layanan */
.services {
    background-color: #f2f2f2; /* Warna abu-abu muda untuk background */
    padding: 50px 0;
}

/* Style untuk card */
.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek shadow lembut pada card */
    transition: transform 0.3s, box-shadow 0.3s; /* Animasi saat hover */
    border: none; /* Menghilangkan border default pada card */
}

/* Hover pada card */
.card:hover {
    transform: scale(1.05); /* Efek memperbesar card saat di-hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Shadow lebih tebal saat hover */
}

/* Style untuk card title */
.card-title {
    font-weight: bold;
    font-size: 1.25rem;
    text-align: center;
    color: #333; /* Warna teks title */
}
/* Style untuk card-body agar menggunakan flexbox */
.card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%; /* Pastikan card-body memenuhi tinggi card */
}

/* Style untuk button */
.card-body .btn {
    margin-top: auto; /* Tambahkan jarak agar tombol lebih fleksibel */
}


/* Mengatur gambar agar fit dengan card */
.card-img-top {
    width: 100%;
    height: auto;
    object-fit: cover;

}

#advantages {
    background: linear-gradient(to right, #c0392b, #e74c3c); /* Warna background merah gradasi */
    padding: 40px 0; /* Padding untuk section */
    border-radius: 30px; /* Sudut membulat */
    position: relative; /* Mengatur posisi relatif untuk z-index */
    z-index: 10; /* Z-index tinggi untuk memastikan section ini di atas konten lain */
    margin-top: 40px; /* Jarak ke atas dari elemen sebelumnya */
    max-width: 1300px; /* Lebar maksimal pada desktop */
    margin-left: auto; /* Mengatur margin otomatis untuk pusat */
    margin-right: auto; /* Mengatur margin otomatis untuk pusat */
}

/* Responsif untuk layar kecil */
@media (max-width: 576px) {
    #advantages {
        margin-top: 20px; /* Jarak lebih kecil untuk layar ponsel */
        padding: 20px; /* Padding lebih kecil untuk layar ponsel */
        max-width: 90%; /* Mengurangi lebar pada mode ponsel */
        width: 90%; /* Mengatur lebar untuk ponsel */
    }
}

.advantage {
    background: rgba(255, 255, 255, 0.1); /* Background semi transparan untuk setiap keunggulan */
    padding: 20px; /* Padding untuk konten */
    border-radius: 10px; /* Sudut membulat */
    transition: transform 0.3s; /* Efek transisi saat hover */
    position: relative; /* Membuat positioning setiap advantage menjadi relatif */
    z-index: 20; /* Mengatur z-index lebih tinggi untuk card */
}
.advantage:hover {
    transform: scale(1.05); /* Efek zoom saat hover */
}

.advantage-img {
    width: 80px; /* Ukuran gambar */
    height: 80px; /* Tinggi gambar */
    border-radius: 50%; /* Membuat gambar berbentuk lingkaran */
    margin-bottom: 15px; /* Jarak antara gambar dan teks */
}

.advantage-title {
    font-size: 1.5rem; /* Ukuran font judul */
    font-weight: bold; /* Bold */
    color: white; /* Warna teks putih */
    margin-bottom: 10px; /* Jarak antara judul dan deskripsi */
}

.advantage-description {
    color: white; /* Warna deskripsi putih */
}

/* Responsif */
@media (max-width: 576px) {
    .advantage-title {
        font-size: 1.25rem; /* Ukuran font judul lebih kecil untuk ponsel */
    }
    .advantage-img {
        width: 60px; /* Ukuran gambar lebih kecil untuk ponsel */
        height: 60px; /* Tinggi gambar lebih kecil untuk ponsel */
    }
}

/* about */



.text-muted {
    color: #6c757d; /* Warna abu-abu untuk teks paragraf */
    font-size: 15px;
    text-align: justify;
}

.fw-bold {
    font-weight: bold; /* Membuat teks judul menjadi bold */
    margin-top: 5px;
}
.position-relative {
    position: relative;
}

/* CTA */
#cta {
    background: linear-gradient(to right, #28a745, #22541b); /* Gradasi hijau ke kuning-kuningan */
    padding: 60px 0; /* Padding atas dan bawah */
    color: white; /* Warna teks putih */
}

#cta h2 {
    font-size: 2rem; /* Ukuran teks besar */
    font-weight: bold; /* Teks judul bold */
    margin-bottom: 20px; /* Jarak antara teks judul dan paragraf */
}

#cta p {
    font-size: 1.25rem; /* Ukuran teks paragraf */
    margin-bottom: 30px; /* Jarak antara paragraf dan button */
}

#cta .btn {
    font-size: 1.25rem; /* Ukuran teks pada button */
    padding: 10px 30px; /* Padding dalam button */
    border-radius: 50px; /* Membuat button berbentuk oval */
}

#cta .btn i {
    margin-right: 10px; /* Jarak ikon dari teks pada button */
}

/* Artikel */
.article-hover {
    position: relative;
    overflow: hidden;
    border-radius: 10px; /* menambahkan radius jika diperlukan */
}

.article-hover img {
    display: block;
    width: 100%;
    height: auto;
    position: relative; /* agar pseudo-element terhubung dengan gambar */
    z-index: 1;
    transition: transform 0.3s ease; /* efek zoom pada gambar */
}

.article-hover .img-overlay {
    content: '';
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* lapisan hitam transparan */
    z-index: 2;
    transition: bottom 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center; /* memposisikan logo di tengah overlay */
}

.article-hover .img-overlay img {
    width: 50px; /* ukuran logo */
    height: 50px; /* ukuran logo */
    opacity: 0;
    transition: opacity 0.3s ease; /* transisi untuk logo */
}

.article-hover:hover .img-overlay {
    bottom: 0;
}

.article-hover:hover img {
    transform: scale(1.05); /* efek zoom hanya pada gambar */
}

.article-hover:hover .img-overlay img {
    opacity: 1; /* menampilkan logo saat hover */
}

/* CTA Artikel */
/* Class untuk mengatur CTA */
.cta-section {
    background-color: rgba(11, 228, 11, 0.1); /* Hijau transparan */
    padding: 60px;
    border-radius: 8px;
    text-align: center;
    font-size: 1rem; /* Ukuran teks default */
}

/* Styling untuk Button Outline dengan ukuran besar */
.cta-section .btn-outline-custom {
    border-color: #28a745; /* Warna hijau */
    color: #28a745;
    padding: 12px 24px;
    font-size: 1.25rem; /* Ukuran besar default */
    transition: background-color 0.3s, color 0.3s;
}

.cta-section .btn-outline-custom:hover {
    background-color: #28a745;
    color: #fff;
}

/* Responsif untuk layar kecil (ponsel) */
@media (max-width: 768px) {
    .cta-section {
        padding: 15px;
        font-size: 0.5rem; /* Teks lebih kecil di ponsel */
    }
    
    .cta-section h5 {
        font-size: 1.2rem; /* Ukuran heading lebih kecil di ponsel */
    }

    .cta-section .btn-outline-custom {
        padding: 10px 20px; /* Padding lebih kecil di ponsel */
        font-size: 1.1rem;  /* Ukuran font tombol lebih kecil di ponsel */
    }
}