@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
    --hijau-muda: #499636;
    --hijau-tua: #2D7937;
    --bg: #8e8d8d;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
}
body{
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg);
    color: #fff;
}
/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(20, 20, 20);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    
}

.navbar .navbar-logo img {
    margin-left: 40px;
    height: 40px; /* Tinggi default logo */
    width: auto; /* Lebar menyesuaikan proporsi gambar */
    max-width: 100%; /* Hindari overflow */
    object-fit: contain; /* Pastikan gambar tidak terpotong */
    transition: height 0.3s ease-in-out; /* Animasi perubahan ukuran */
}

.navbar .navbar-nav .nav-link.active {
    color: #fff;
    display: inline-block;
    font-size: 1rem;
    margin: 0 0.7rem;
    position: relative;
    text-decoration: none;
}

.navbar .navbar-nav .nav-link:hover {
    color: var(--hijau-muda); /* Warna pada hover */
}

.navbar .navbar-nav .nav-link::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background-color: var(--hijau-muda); /* Warna garis bawah */
    position: absolute;
    bottom: -2px; /* Jarak garis dengan teks */
    left: 50%;
    transform: translateX(-50%);
    transition: width 0.3s ease-in-out;
}

.navbar .navbar-nav .nav-link:hover::after {
    width: 60%; /* Garis penuh saat hover */
}
.navbar-nav {
    display: flex;
    margin-left: auto; /* Menggunakan margin-left auto untuk mendorong ke kanan */
    margin-right: 30px;
}

/* hero section */
.herooo {
    position: relative;
    text-align: center;
    color: white;
}
.carousel-item img {
    height: 100vh;
    object-fit: cover;
}
.content {
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
}
.carousel-controls {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 3;
}
.content h1 {
    font-size: 3rem;
    font-weight: bold;
}
.content p {
    font-size: 1.2rem;
}
.btn.cta {
    display: inline-block;
    padding: 0.5rem 2rem;
    font-size: 0.9rem;
    color: #fff;
    background-color: #2D7937;
    border-radius: 0.3rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
    font-weight: 400;
    white-space: nowrap;
    margin-top: 20px;
}
.btn.cta:hover {
    background-color: #255a2c;
}
.herooo::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Overlay hitam transparan */
    z-index: 1;
}
.herooo .content {
    z-index: 2; /* Agar teks berada di atas overlay */
}


/* Semboyan */
.semboyan{
    margin-top: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #fff;
}
.semboyan .header-text {
    margin-bottom: 20px;
}

.semboyan .header-text p {
    font-size: 1.2rem;
    font-style: italic;
    color: #000;
    margin-bottom: 5px;
}

.semboyan .header-text h1 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
}

/* Section Kata Presiden */
.kata {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #e5e4e4;
    padding: 35px 50px;
}

/* Konten utama (Gambar & Teks) */
.content-box {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 900px;
    gap: 20px; /* Jarak antara gambar dan teks */
}

/* Gaya untuk gambar */
.presma-img img {
    width: 180px; /* Sesuaikan ukuran gambar */
    height: auto;
    border-radius: 10px; /* Opsional: Jika ingin sudut membulat */
}

/* Gaya untuk teks */
.right-box {
    text-align: justify; /* Supaya teks rata kiri */
    max-width: 300px;
}

.right-box h1 {
    font-size: 1.5rem;
    font-weight: bold;
}

.right-box p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

.garis {
    width: 90%; /* Lebar garis (sesuaikan sesuai kebutuhan) */
    height: 1px; /* Ketebalan garis */
    background-color: #2D7937; /* Warna garis */
    margin: 20px auto; /* Memberikan jarak dan memusatkan garis */
    border-radius: 2px; /* Agar ujung garis tidak terlalu tajam */
}




/* toggler */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.8); /* Ubah warna border */
}

.navbar-toggler-icon {
    filter: invert(1); /* Membalik warna ikon menjadi putih */
}

/* Container Berita */
.berita-row {
    display: flex;
    flex-wrap: wrap; /* Supaya elemen bisa pindah baris jika layar kecil */
    gap: 10px; /* Jarak antar elemen (horizontal & vertikal) */
    justify-content: center; /* Pusatkan elemen secara horizontal */
}
/* Kartu Berita */
.card-container {
    width: 270px!important;
    flex: 0 1 calc(40% - 20px); /* Ukuran elemen 1/2 lebar container */
    box-sizing: border-box; /* Pastikan padding tidak menambah ukuran */
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px; /* Tambahkan radius pada gambar (opsional) */
}
.custom-img {
    width: 100%;         /* Membuat gambar mengisi lebar kontainer */
    height: 180px!important ;      /* Menentukan tinggi gambar */
    object-fit: cover;   /* Memotong dan meng-zoom gambar agar mengisi area */
    object-position: center;
}


.card img {
    border-radius: 8px; /* Tambahkan radius pada gambar (opsional) */
}
/* Konten Berita */
.konten-berita {
    padding-left: 10px; /* Menambahkan jarak ke kanan dengan padding */
}
/* Kelas untuk elemen tanggal */
.tanggal {
    text-align: center; /* Memastikan teks berada di tengah */
    display: inline-flex; /* Menjaga elemen gambar dan teks sejajar */
    align-items: center; /* Menjaga gambar dan teks tetap sejajar secara vertikal */
    margin: 0 auto; /* Memberikan margin otomatis untuk memusatkan elemen */
    font-size: 0.9rem; /* Ukuran font lebih kecil agar proporsional */
    color: #6c757d; /* Warna teks abu-abu muda */
}

.tanggal img {
    width: 13px; /* Menentukan lebar ikon jam */
    height: 13px; /* Menentukan tinggi ikon jam */
    margin-right: 5px; /* Memberikan jarak antara gambar dan teks */
}

/* Media Query untuk perangkat dengan lebar layar maksimum 768px (mobile) */
@media (max-width: 768px) {
    .tanggal img {
        width: 10px; /* Menentukan lebar ikon jam */
        height: 10px; /* Menentukan tinggi ikon jam */
    }
    .card-container {
        width: calc(45% - 10px)!important;  /* Menjadikan lebar kontainer sekitar 45% layar untuk 2 kolom */
        height: auto!important;  /* Menyesuaikan tinggi dengan konten */
        flex: 0 1 calc(45% - 10px); /* 2 kolom di satu baris */
    }

    .custom-img {
        height: 150px!important;  /* Menyesuaikan tinggi gambar pada mobile */
    }
    .navbar .navbar-nav .nav-link::after {
        bottom: 0px; /* Jarak garis dengan teks */
    }
    
    .navbar .navbar-nav .nav-link:hover::after {
        width: 90%; /* Garis penuh saat hover */
    }
    .navbar .d-flex .cta{
        margin-top: 10px;
    }
    .navbar .navbar-nav .nav-link.active {
        font-size: 1.2rem;
        font-weight: bold;
    }
    
}

/* Media Query untuk perangkat dengan lebar layar maksimum 480px (small mobile) */
@media (max-width: 480px) {
    .card-container {
        width: calc(45% - 10px)!important;  /* Menjadikan lebar kontainer sekitar 45% layar untuk 2 kolom */
        height: auto!important;  /* Menyesuaikan tinggi dengan konten */
        flex: 0 1 calc(45% - 10px); /* 2 kolom di satu baris */
    }

    .custom-img {
        height: 120px!important;  /* Menyesuaikan tinggi gambar pada perangkat lebih kecil */
    }
}


.video{
    position: relative;
    margin-top: 30px;
    margin-bottom: 20px;
    display: flex;
    background-color: #e5e4e4;
}
.card-container .cta {
    display: inline-block;
    padding: 0.5rem 2rem; /* Padding kecil agar tombol lebih ramping */
    font-size: 0.9rem; /* Ukuran font kecil */
    color: #fff;
    background-color: var(--hijau-muda, #2D7937); /* Gunakan warna hijau */
    border-radius: 0.3rem; /* Sudut tombol kecil */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); /* Efek bayangan halus */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Efek hover halus */
    text-decoration: none; /* Hilangkan garis bawah */
    font-weight: 400; /* Berat font sedang */
    white-space: nowrap; /* Pastikan teks tombol tetap dalam satu baris */
    margin-bottom: 0.9rem;
}

.card-container .cta:hover {
    background-color: #1e5a29; /* Warna hijau lebih gelap saat dihover */
    transform: scale(1.05); /* Efek memperbesar tombol saat dihover */
}

/* judul */
.header-berita h2 {
    color: rgb(0, 0, 0); /* Warna teks utama */
}

/* Laptop */
@media (max-width: 1366px) {
    html {
        font-size: 75%;
    }
    .navbar .navbar-logo img {
        height: 35px;
    }
    
}
/* tablet */
@media (max-width: 800px) {
    
    html {
        font-size: 62,5%;
    }
    .navbar .navbar-logo img {
        height: 30px;

    }
    #footer img {
        width: 20px;
        height: 20px;
    }
    .content h1 {
        font-size: 1.2rem;
        font-weight: bold;
    }
    .kami h1{
        font-size: 1rem;    
    }
    .navbar-nav {
        margin-left: 15px; /* Dorong elemen ke kanan */
        margin-top: 15px;
        color: #fff
    }
    .kata .left-box {
        width: 200px; /* Lebar tetap */
        height: 150px; /* Tinggi tetap */
    }
    .video{
        font-size: 55%;
    }
    .header-berita h2 {
        font-size: 1.9rem; /* Menyesuaikan ukuran font judul */
    }
    
    .carousel-item img {
        height: 35vh;
    }
    .herooo{
        min-height: 35vh;
    }
    
}
/* tablet */
@media (max-width: 563px) {
   
    html {
        font-size: 55%;
    }
    .navbar .navbar-logo img {
        height: 25px;
        margin-left: 10px;
    }
    #video iframe {
        width: 100%; /* Membuat lebar video mengikuti lebar kontainer */
        height: 100%; /* Menjaga rasio aspek */
        max-width: 100%; /* Membatasi lebar maksimal */
    }
    .presma-img img {
        width: 130px; /* Sesuaikan ukuran gambar */
        height: auto;
        border-radius: 10px; /* Opsional: Jika ingin sudut membulat */
    }
    
    

}
/* Tablet dan ukuran layar lebih kecil */

#footer .container {
    display: flex;
    justify-content: space-between; /* Sebarkan elemen secara merata */
    flex-wrap: wrap; /* Default untuk responsif */
    background-color: rgb(33, 33, 33);
    max-width: 2000px; /* Batas maksimal lebar konten */
}

#footer .row {
    flex: 1; /* Agar elemen mengambil ruang yang sama */
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    min-width: 150px; /* Atur minimal lebar */
}

#footer h5 {
    margin-bottom: 0.5rem;
    color: #fff;
}

#footer p, 
#footer ul {
    margin-bottom: 1rem; /* Hilangkan margin default */
    color: #fff;
}
#footer img {
    margin-bottom: 1.5rem; /* Hilangkan margin default */
}
.d-flex a img {
    transition: transform 0.3s ease, opacity 0.3s ease; /* Efek transisi halus */
}

.d-flex a img:hover {
    transform: scale(1.2); /* Perbesar sedikit gambar saat hover */
}

#footer a {
    color: white;
    text-decoration: none;
}

#footer a:hover {
    text-decoration: underline;
}

section.bg-light {
    padding: 20px 0; /* Padding atas dan bawah */
}

section.bg-light .container-py4 {
    padding: 0 15px; /* Padding kiri dan kanan untuk container */
}

section.bg-light .d-flex > div, 
section.bg-light .d-flex > p {
    margin-bottom: 0; /* Pastikan tidak ada margin bawah tambahan */
}
.kami {
    min-height: 75vh;
    display: flex;
    align-items: flex-end; /* Posisi teks di sisi atas kiri */
    justify-content: flex-start; /* Teks di sisi kiri horizontal */
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    color: #fff; /* Warna teks putih untuk kontras */
    text-align: left; /* Teks rata kiri */
    padding: 25px; /* Padding untuk memberi jarak dari tepi halaman */
   
}
@media (max-width: 768px) {
    .kami {
        min-height: 25vh;
    }
}
.kami::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Overlay hitam transparan */
    z-index: 1;
}

.kami .content {
    z-index: 2; /* Agar teks berada di atas overlay */
    width: 100%; /* Pastikan elemen teks mengambil lebar penuh */
}

.kami h1 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
    margin-left: 40px;
}

.kami p {
    font-size: 1.2rem;
    margin-left: 40px;
}

.judul {
    margin-top: 30px;
}

.menuu {
    display: flex;
    gap: 5px; /* Jarak antar tombol */
    justify-content: center; /* Posisikan tombol ke kiri */
    flex-wrap: nowrap; /* Pastikan tombol tetap di satu baris */
    padding: 10px; /* Tambahkan padding dalam elemen */
    overflow-x: auto; /* Menambahkan scroll horizontal pada container */
    -webkit-overflow-scrolling: touch; /* Membuat scroll lebih halus pada iOS */
}
.menuu::-webkit-scrollbar {
    display: none; /* Menyembunyikan scrollbar */
}
.menuu .cta {
    display: inline-block;
    padding: 0.5rem 1.7rem;
    font-size: 0.9rem;
    color: #fff;
    background-color: var(--hijau-muda, #2D7937);
    border-radius: 0.3rem;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
    font-weight: 400;
    white-space: nowrap;
}

.menuu .cta:hover {
    background-color: rgb(25, 83, 33);
}
.menuu .cta.active {
    background-color: #ffffff; /* Warna latar belakang saat aktif */
    color: #2D7937;
    border: 1px solid #2D7937;
}





.kartu {
    display: flex;
    align-items: flex-start; /* Posisi teks di bawah */
    flex-wrap: wrap;
    gap: 10px; /* Jarak antara kotak kiri dan kanan */
    background-color: #ffffff; /* Warna latar belakang */
    display: flex; /* Menggunakan Flexbox untuk mengatur tata letak horizontal */
    justify-content: center; /* Memberikan jarak antar kotak */
    margin-bottom: 20px;
}

.cardd {
    width: 200px;
    background-color: #e0e0e0; /* Warna latar abu-abu */
    border-radius: 15px;
    text-align: center;
    padding: 15px 10px;
}

.cardd-image {
    width: 100%;
    height: 190px;
    background-color: #fff; /* Warna latar putih untuk kotak gambar */
    border-radius: 20px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.cardd-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Gambar menyesuaikan area tanpa terdistorsi */
    border-radius: 20px; /* Membuat sudut gambar menjadi melengkung */
}
.cardd-image img:hover {
    opacity: 0.8; /* Efek transparansi pada hover */
    transition: opacity 0.3s ease; /* Efek transisi yang halus */
}


.cardd-content .title {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0;
    color: #000;
}

.cardd-content .name {
    font-size: 1rem;
    color: #333;
}


.card-content .name {
    font-size: 1rem;
    color: #333;
}
.footer-berita .cta {
    margin-top: 0.1rem; /* Jarak atas tombol */
    display: inline-block;
    padding: 0.5rem 1.5rem; /* Padding lebih kecil agar tombol lebih ramping */
    font-size: 1rem; /* Ukuran font lebih kecil */
    color: #fff;
    background-color: var(--hijau-muda, #2D7937); /* Gunakan variabel warna hijau jika ada */
    border-radius: 0.5rem; /* Sudut tombol lebih kecil */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Efek bayangan lebih halus */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Efek animasi halus */
    text-decoration: none; /* Hilangkan garis bawah default */
    font-weight: 500; /* Berat font sedang */
}

.footer-berita .cta:hover {
    background-color: #245d2a; /* Warna lebih gelap saat hover */
    transform: translateY(-2px); /* Efek mengangkat tombol saat hover */
}
@media (max-width: 758px) {
    .cardd {
        width: 140px; /* Lebar kartu lebih kecil */
        padding: 10px; /* Padding dikurangi */
    }

    .cardd-image {
        height: 140px; /* Tinggi gambar lebih kecil */
    }

    .cardd-image img {
        border-radius: 8px; /* Kurangi sudut melengkung */
    }
    .menuu {
        justify-content:flex-start; /* Posisikan tombol ke kiri */
    }
    .judul {
        margin-top: 18px;
    }
    #detail img.img-fluid {
        max-height: 200px !important; /* Maksimal tinggi gambar */
    }
}
/* Section Visi dan Misi */
.visi {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 20px;
    background-color: #e5e4e4;
    /* background: linear-gradient(to top, #13511b, #17661a); */
    flex-wrap: wrap;
}
.visi-text {
    padding: 40px;
    background-color: #f9f9f9; /* Latar belakang lembut */
    border-radius: 10px; /* Sudut kotak membulat */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan lembut */
    margin: 20px auto;
    max-width: 800px; /* Lebar maksimum kontainer */
    line-height: 1.8; /* Jarak antar baris */
}

.visi-text h1 {
    font-size: 1.8rem;
    font-weight: bold;
    margin-top: 20px;
    color: var(--hijau-muda, #2D7937); /* Gunakan variabel warna hijau atau default */
}

.visi-text p {
    font-size: 1.2rem;
    text-align: justify; /* Rata kanan-kiri */
    margin-bottom: 15px;
    color: #333; /* Warna teks lebih gelap */
}

.visi-text p br {
    margin-bottom: 10px; /* Spasi antar poin */
    display: block;
    content: "";
}

.visi-text p::marker {
    color: var(--hijau-muda, #2D7937);
}
.visi-text .cta {
    margin-top: 0.5rem; /* Jarak atas tombol */
    display: inline-block;
    padding: 0.5rem 1.5rem; /* Padding lebih kecil agar tombol lebih ramping */
    font-size: 1rem; /* Ukuran font lebih kecil */
    color: #fff;
    background-color: var(--hijau-muda, #2D7937); /* Gunakan variabel warna hijau jika ada */
    border-radius: 0.5rem; /* Sudut tombol lebih kecil */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Efek bayangan lebih halus */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Efek animasi halus */
    text-decoration: none; /* Hilangkan garis bawah default */
    font-weight: 500; /* Berat font sedang */
}

.visi-text .cta:hover {
    background-color: #245d2a; /* Warna lebih gelap saat hover */
    transform: translateY(-2px); /* Efek mengangkat tombol saat hover */
}
.misi-list {
    padding-left: 1.5rem; /* Jarak dari kiri */
    list-style-type: decimal; /* Angka untuk daftar */
    font-size: 1.2rem;
    line-height: 1.8; /* Jarak antar baris */
    color: #333; /* Warna teks */
}

.misi-list li {
    margin-bottom: 0.5rem; /* Jarak antar poin */
    text-align: justify; /* Rata kanan-kiri */
}

/* Teks di Atas Kotak */
.penjelasan .header-text {
    padding: 25px;
    width: 100%;
    text-align: left; /* Teks menjadi rata kiri */
}

.penjelasan .header-text p {
    font-size: 1.2rem;
    color: rgb(0, 0, 0);
    text-align: justify; /* Rata kanan-kiri */
    text-justify: inter-word; /* Menambahkan penyesuaian jarak antar kata */
}
.detail{
    margin-top: 75px;
    padding: 10px;
    margin-bottom: 30px
}
#detail img.img-fluid {
    width: 100%; /* Gambar menyesuaikan lebar kontainer */
    max-height: 500px; /* Maksimal tinggi gambar */
    object-fit: cover; /* Agar gambar tidak terdistorsi */
    border-radius: 10px; /* Membuat sudut gambar melengkung */
}
.detail .container .konten-berita .deskrip {
    overflow-wrap: break-word; /* Memungkinkan pemutusan kata saat diperlukan */
    word-wrap: break-word;     /* Mendukung browser lama */
    white-space: normal;       /* Mengatur ulang agar teks bisa membungkus */
    word-break: break-word;    /* Memungkinkan pemutusan kata di tengah kata panjang */
}

.cta {
    display: inline-block;
    padding: 0.5rem 2rem; /* Padding kecil agar tombol lebih ramping */
    font-size: 0.9rem; /* Ukuran font kecil */
    color: #fff;
    background-color: var(--hijau-muda, #2D7937); /* Gunakan warna hijau */
    border-radius: 0.3rem; /* Sudut tombol kecil */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Efek hover halus */
    text-decoration: none; /* Hilangkan garis bawah */
    font-weight: 400; /* Berat font sedang */
    white-space: nowrap; /* Pastikan teks tombol tetap dalam satu baris */
}

/* Efek Hover Tombol */
.cta:hover {
     /* Warna hijau lebih gelap saat di-hover */
    background-color: #2D7937;
}


.courusel{
    margin-bottom: 60px;
}

.slider{
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
}

.item{
    position: absolute;
    width: 220px;
    height: 280px;
    text-align: justify;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    transition: transform 0.5s ease, opacity 0.5s ease;
    left: calc(50% - 100px);
    top: 0;
    transform-origin: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan lembut */
}
.ukm-header {
    display: flex;
    align-items: center; /* Menjadikan logo sejajar vertikal dengan judul */
    gap: 10px; /* Jarak antara logo dan judul */
    margin-bottom: 8px;
}

.ukm-logo img {
    height: 33px; /* Ukuran logo */
    width: auto; /* Menyesuaikan proporsi */
    border: 1px solid #000; /* Garis tepi 1px warna hitam */
    border-radius: 50%; /* Membuat border bundar */
    padding: 2px; /* Memberi sedikit ruang agar border terlihat */
}



.item h1{
    font-size: 1.3rem;
}
.item p{
    font-size: 11px;
}

#next, #prev {
    position: absolute;
    top: 40%;
    color: #2D7937;
    background-color: transparent;
    border: none;
    font-size: xx-large;
    font-family: monospace;
    font-weight: bold;
    transform: translateY(-50%); /* Vertikal tengah */
    transition: transform 0.3s ease, color 0.3s ease; /* Efek transisi halus */
}

#next {
    right: 300px; /* Posisi tombol next di sebelah kanan */
}

#prev {
    left: 300px; /* Posisi tombol prev di sebelah kiri */
}

#next:hover,
#prev:hover {
    color: #40c051;
    transform: scale(1.5) translateY(-50%); /* Gabungkan scale dan translateY */
}
.pagination {
    display: flex;
    justify-content: center;
}

.pagination .dot {
    width: 6px;
    height: 6px;
    margin: 0 5px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: scale(0.8); /* Semua indikator lebih kecil */
}

.pagination .dot.active {
    background-color: #13511b; /* Warna aktif */
    width: 5px;
    height: 5px;
    transform: scale(1.2); /* Indikator aktif lebih besar */
}


@media (max-width: 768px) {
    .pagination .dot {
        width: 4px;
        height: 4px;
        margin: 0 3px;
    }
    .slider {
        height: 300px; /* Sesuaikan tinggi untuk layar kecil */
    }
    .ukm-logo img {
        height: 25px; /* Ukuran logo */
        width: auto; /* Menyesuaikan proporsi */
    }
    .detail{
        margin-top: 65px;
    }
    .item {
        width: 160px; /* Perkecil lebar kartu */
        height: 270px; /* Perkecil tinggi kartu */
        left: calc(50% - 75px); /* Sesuaikan posisi agar tetap di tengah */
        padding: 15px; /* Kurangi padding */
    }

    .item h1 {
        font-size: 1.2rem; /* Kurangi ukuran font */
    }

    .item p {
        font-size: 9px; /* Kurangi ukuran teks */
    }

    #next, #prev {
        display: none;
    }

    #next {
        right: 40px; /* Kurangi jarak tombol di layar kecil */
    }

    #prev {
        left: 40px; /* Kurangi jarak tombol di layar kecil */
    }
}


.hubung{
    min-height: 100vh;
    width: 100%;
    background: #e5e4e4;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .container-hubung{
    width: 85%;
    background: #fff;
    border-radius: 6px;
    padding: 20px 60px 30px 40px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }
  .container-hubung .content-hubung{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .container-hubung .content-hubung .left-side{
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    position: relative;
  }
  .content-hubung .left-side::before{
    content: '';
    position: absolute;
    height: 70%;
    width: 2px;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    background: #13511b;
  }
  .content-hubung .left-side .details{
    margin: 14px;
    text-align: center;
  }
  .content-hubung .left-side .details i{
    font-size: 30px;
    color: #13511b;
    margin-bottom: 10px;
  }
  .content-hubung .left-side .details .topic{
    font-size: 18px;
    font-weight: 500;
  }
  .content-hubung .left-side .details .text-one,
  .content-hubung .left-side .details .text-two{
    font-size: 14px;
    color: #afafb6;
  }
  .content-hubung .left-side .details .text-one a,
  .content-hubung .left-side .details .text-two a{
    color: #afafb6;
  text-decoration: none; /* Menghapus garis bawah jika diperlukan */
  }
  .content-hubung .left-side .details .text-one a:hover,
  .content-hubung .left-side .details .text-two a:hover{
    color: #8e8e92;
  text-decoration: underline; /* Menghapus garis bawah jika diperlukan */
  }
  .container-hubung .content-hubung .right-side{
    width: 75%;
    margin-left: 75px;
  }
  .content-hubung .right-side .topic-text{
    font-size: 30px;
    font-weight: 600;
    color: #13511b;
  }
  .right-side .input-box{
    height: 50px;
    width: 100%;
    margin: 12px 0;
  }
  .right-side .input-box input,
  .right-side .input-box textarea{
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    font-size: 13px;
    background: #F0F1F8;
    border-radius: 6px;
    padding: 0 15px;
    resize: none;
  }
  .right-side .message-box{
    min-height: 150px;
  }
  .right-side .input-box textarea{
    padding-top: 6px;
  }
  .right-side .button{
    display: inline-block;
    margin-top: 12px;
  }
  .right-side .button input[type="submit"]{
    display: inline-block;
    padding: 0.5rem 2rem; /* Padding kecil agar tombol lebih ramping */
    font-size: 1.2rem; /* Ukuran font kecil */
    color: #fff;
    background-color: var(--hijau-muda, #2D7937); /* Gunakan warna hijau */
    border-radius: 0.3rem; /* Sudut tombol kecil */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Efek hover halus */
    text-decoration: none; /* Hilangkan garis bawah */
    font-weight: 400; /* Berat font sedang */
  }
  .button input[type="submit"]:hover{
    background: #176322;
  }
  @media (max-width: 950px) {
    .container-hubung{
      width: 90%;
      padding: 30px 40px 40px 35px ;
    }
    .container-hubung .content-hubung .right-side{
     width: 75%;
     margin-left: 55px;
  }
  }
  @media (max-width: 820px) {
    
    .content-hubung .right-side .topic-text{
        font-size: 22px;
      }
    .container-hubung{
      margin: 40px 0;
      height: 100%;
    }
    .container-hubung .content-hubung{
      flex-direction: column-reverse;
    }
   .container-hubung .content-hubung .left-side{
     width: 100%;
     flex-direction: row;
     margin-top: 40px;
     justify-content: center;
     flex-wrap: wrap;
   }
   .container-hubung .content-hubung .left-side::before{
     display: none;
   }
   .container-hubung .content-hubung .right-side{
     width: 100%;
     margin-left: 0;
   }
  }


  .menu{
    height: 100%;
    display: flex;
    justify-content: center; /* Tengahkan secara horizontal */
    align-items: center; /* Tengahkan secara vertikal */
  }
  .wrapper {
    padding: 10px;
    margin-top: 20px;
    position: relative;
    overflow-x: hidden;
    max-width: 1300px;
    background: #fff;
    border-radius: 13px;
  }
  .wrapper .icon {
    position: absolute;
    top: 0;
    height: 100%;
    width: 120px;
    display: flex;
    align-items: center;
  }
  .icon:first-child {
    left: 0;
    display: none;
    background: linear-gradient(90deg, #fff 60%, transparent);
  }
  .icon:last-child {
    right: 0;
    justify-content: flex-end;
    background: linear-gradient(-90deg, #fff 60%, transparent);
  }
  .icon i {
    width: 65px;
    height: 65px;
    cursor: pointer;
    font-size: 1.3rem;
    text-align: center;
    line-height: 55px;
    border-radius: 50%;
  }
  .icon i:hover {
    background: #ffffff00;
  }
  .icon:first-child i {
    margin-left: 15px;
  } 
  .icon:last-child i {
    margin-right: 15px;
  } 
  .wrapper .tabs-box {
    display: flex;
    gap: 10px;
    list-style: none;
    overflow-x: hidden;
    scroll-behavior: smooth;
  }
  .tabs-box.dragging {
    scroll-behavior: auto;
    cursor: grab;
  }
  .tabs-box .tab {
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap;
    background: #f5f4fd;
    padding: 10px 17px;
    border-radius: 30px;
    border: 1px solid #d8d5f2;
  }
  .tabs-box .tab:hover{
    background: #efedfb;
  }
  .tabs-box.dragging .tab {
    user-select: none;
    pointer-events: none;
  }
  .tabs-box .tab.active{
    color: #fff;
    background: #2D7937;
    border-color: transparent;
  }
  .tabs-box a {
    text-decoration: none; /* Hilangkan garis bawah default pada link */
    color: inherit; /* Warna teks mengikuti elemen induknya */
  }
  
  @media (max-width: 768px) {
    
    .wrapper {
        padding: 25px;
    }
    .tabs-box .tab {
      font-size: 0.9rem;
      padding: 6px 13px;
    }
    .wrapper .tabs-box {
      gap: 7px;
    }
    /* Kurangi lebar gradient saat di mobile */
    .icon:first-child {
      background: linear-gradient(90deg, #fff 80%, transparent);
      width: 60px; /* Perkecil lebar area */
    }
    .icon:last-child {
      background: linear-gradient(-90deg, #fff 80%, transparent);
      width: 60px; /* Perkecil lebar area */
    }
  }
  .slider-profil{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    width: 100%;
    height: 320px;
    overflow: hidden;
    
}
.item-profil {
    position: absolute;
    width: 220px;
    height: 320px;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden; /* Mencegah gambar keluar dari batas kartu */
    padding: 0; /* Hapus padding agar gambar penuh */
    transition: 0.5s;
    left: calc(50% - 100px);
    top: 0;
}

.item-profil img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Agar gambar memenuhi kartu tanpa distorsi */
}

#next-profil, #prev-profil {
    position: absolute;
    top: 50%;
    color: #2D7937;
    background-color: transparent;
    border: none;
    font-size: xx-large;
    font-family: monospace;
    font-weight: bold;
    transform: translateY(-50%); /* Vertikal tengah */
    transition: transform 0.3s ease, color 0.3s ease; /* Efek transisi halus */
}

#next-profil {
    right: 280px; /* Posisi tombol next-profil di sebelah kanan */
}

#prev-profil {
    left: 280px; /* Posisi tombol prev-profil di sebelah kiri */
}

#next-profil:hover,
#prev-profil:hover {
    color: #40c051;
    transform: scale(1) translateY(-50%); /* Gabungkan scale dan translateY */
}

@media (max-width: 768px) {
    .detail{
        margin-top: 45px;
    }
    .slider-profil {
        height: 270px; /* Sesuaikan tinggi untuk layar kecil */
        margin-top: 30px;
    }
    .item-profil {
        width: 180px;
        height: 270px;
        left: calc(50% - 90px);
        
    }

    #next-profil, #prev-profil {
        font-size: xx-large; /* Sesuaikan ukuran tombol */
    }

    #next-profil {
        right: 10px; /* Kurangi jarak tombol di layar kecil */
    }

    #prev-profil {
        left: 10px; /* Kurangi jarak tombol di layar kecil */
    }
    .nav-links a{
        font-size: 10px;
        text-decoration: none;
    }
}
.nav-links a{
    color: #000;
    text-decoration: none;
    font-style: italic;
}
.nav-links a:hover{
    color: #585858;
}
.nav-share-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-share-container:hover {
    color: #777676;
}



.share-icon {
    cursor: pointer;
    font-size: 18px;
    margin-right: 15px;
}