/* SULTAN AZIZ SYAIFULLAH */




/* Definisikan Font Kustom Anda */

/* Contoh untuk gaya Regular */
@font-face {
    font-family: 'heading-now'; /* Ini adalah nama yang akan Anda gunakan di CSS */
    src: url('./font/HeadingNowTrial-02Light.woff') format('woff');
    font-weight: normal; /* Untuk gaya regular */
    font-style: normal;
    font-display: swap; /* Memuat font secara non-blocking */
}

/* Contoh untuk gaya Bold (jika ada file font bold terpisah) */
@font-face {
    font-family: 'heading-now'; /* Gunakan nama keluarga font yang SAMA */
    src: url('./font/HeadingNowTrial-26Bold.woff') format('woff');
    font-weight: bold; /* Untuk gaya bold */
    font-style: normal;
    font-display: swap;
}

/* --- Pastikan ini ada di bagian paling atas style.css Anda --- */

/* Warna-warna dasar dan gradien */


/* ... CSS lainnya untuk body, hero-section, dll. ... */


/* Warna-warna dasar dan gradien */
:root {
    --primary-gradient: linear-gradient(to right, #1ec718, #2575fc); /* Gradien biru-hijau */
    --secondary-gradient: linear-gradient(to right, #dfec1f, #fd1d1d); /* Contoh gradien oranye-merah */
    --light-gray: #f8f9fa;
    --dark-blue: #0a1128;
}

.bg{
    /* background-image: url('../images/bg-web.webp'); */
    background-repeat: no-repeat;
    background-size:cover;
    /* background: #32cf6e;
    background: linear-gradient(283deg, rgba(50, 207, 110, 1) 0%, rgba(190, 198, 207, 1) 70%); */
    /* background: var(--secondary-gradient); */
    background: #38bed6;
    background: linear-gradient(0deg, rgba(56, 190, 214, 1) 0%, rgba(255, 255, 255, 1) 100%);
    }


/* .py-5 {
    /* background-image: url("../images/bg-2.jpg"); */
    /* background: #22C1C3;
    background: linear-gradient(0deg, rgba(34, 193, 195, 1) 0%, rgba(31, 57, 184, 1) 94%); */



h2 {
    font-weight: bold; /* Ini akan membuat semua judul <h2> menjadi bold */
    color: black; /* Contoh warna teks, sesuaikan jika perlu */
    margin-bottom: 1.5rem; /* Contoh margin bawah, sesuaikan jika perlu */
    text-align: center; /* Karena judul Anda di tengah */
}

body {

    font-family:Arial, Helvetica, sans-serif;
    color: #333333;
    
    
     /* --- Tambahkan kode ini untuk background image --- */

}


/* --- Styling untuk Container Frame --- */
.phone-frame-container {
    position: relative; /* Penting! Menjadi patokan untuk posisi absolut anak-anaknya */
    width: 300px;  /* <-- PERKIRAAN: Sesuaikan lebar total gambar frame Anda */
    height: 580px; /* <-- PERKIRAAN: Sesuaikan tinggi total gambar frame Anda */
    margin: 20px auto; /* Untuk menengahkan container dan memberi jarak dari atas/bawah */
    /*border: 2px dashed red; /* AKTIFKAN ini untuk melihat batas container frame */
  }
  
  /* --- Styling untuk Gambar Frame Handphone --- */
  .phone-frame {
    position: absolute; /* Gambar frame akan ditempatkan absolut di dalam container */
    top: 0;
    left: 0;
    width: 100%; /* Gambar frame akan mengisi penuh lebar container */
    height: 100%; /* Gambar frame akan mengisi penuh tinggi container */
    z-index: 10; /* Pastikan frame berada di LAPISAN ATAS */
    object-fit: contain; /* Memastikan seluruh gambar frame terlihat tanpa terpotong */
  }
  
  /* --- Styling untuk Carousel (Layar Handphone) --- */
  #logoCarousel {
    position: absolute; /* Carousel akan ditempatkan absolut di dalam container frame */
    /* VVVV INI NILAI PERKIRAAN YANG HARUS ANDA SESUAIKAN TELITI VVVV */
    top: 45px;    /* <-- PERKIRAAN: Jarak dari tepi ATAS frame ke awal layar HP */
    left: 20px;   /* <-- PERKIRAAN: Jarak dari tepi KIRI frame ke awal layar HP */
    width: 260px;  /* <-- PERKIRAAN: Lebar area layar HP di dalam frame */
    height: 500px; /* <-- PERKIRAAN: Tinggi area layar HP di dalam frame */
    /* ^^^^ SESUAIKAN DI SINI DENGAN DEVELOPER TOOLS ^^^^ */
    border-radius: 40px;    /* Sudut melengkung, ubah angkanya sesuai keinginan */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Tambahan: bayangan agar lebih estetik */
  
    z-index: 5;     /* Pastikan carousel berada di LAPISAN BAWAH dari frame */
    overflow: hidden; /* Penting: Menyembunyikan bagian slide yang keluar dari "layar" */
    /*border: 2px solid blue; /* AKTIFKAN ini untuk melihat batas carousel */
  }
  
  /* --- Styling untuk Gambar di dalam Slide Carousel --- */
  .carousel-inner {
      height: 100%;
  }
  
  .carousel-item {
      height: 100%;
  }
  
  .carousel-item img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Coba 'cover' (memenuhi area, mungkin terpotong) atau 'contain' (seluruh gambar terlihat, mungkin ada ruang kosong) */
  }
  

/* Header Utama */
.hero-section {
    /* background: var(--primary-gradient); */
    padding: 100px 0; /* Padding atas bawah */
    font-family: Arial, Helvetica, sans-serif;
}

/* Bagian Pendahuluan */
.intro-section {
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    background-image: url('../images/bg-web.webp');
    background-repeat: no-repeat;
    background-size:cover;
}

.intro-section .info-list li a {
    display: block;
    padding: 15px 20px;
    margin-bottom: 10px;
    background: #2A7B9B;
    background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
    border-radius: 50px;
    text-decoration: none;
    color: white;
    font-size: 1.1rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.intro-section .info-list li a:hover {
    background: #2A7B9B;
    background: linear-gradient(270deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
    color: white;
}

.intro-section .info-list li a i {
    margin-right: 15px;
    color: white; /* Warna ikon */
}

.phone-mockup {
    position: relative;
    width: 80%; /* Sesuaikan ukuran mockup */
    max-width: 300px; /* Lebar maksimal */
    margin: 0 auto;
    border: 15px white; /* Frame ponsel */
    border-radius: 40px;
    overflow: hidden;
    /* Untuk memastikan gambar di dalam pas */
    display: flex;
    justify-content: right;
    align-items: center;
    padding: 5px; /* Padding di dalam frame */

}

.col {
    position: relative;
    width: 80%; 
    max-width: 300px; 
    margin: 0 auto;
    border: 15px white; 
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    justify-content: right;
    align-items: center;
    padding: 5px; 
}

.phone-mockup img {
    width: 80%;
    height: auto;
    border-radius: 25px; /* Border radius internal agar sesuai frame */
}


.col-md-8 h2{
    text-align: left;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
}

.lead {
    color: black;
    font-weight: 200;
    font-family: Arial, Helvetica, sans-serif;
}

/* Bagian Apa itu RPJMD */
.what-is-rpjmd-section .magnifying-icon {
    max-width: 300px; /* Sesuaikan ukuran ikon kaca pembesar */

}

.container {
    font-family: Arial, Helvetica, sans-serif;
}

/* Styling Card Umum untuk Bagian Detail */
.card {
    border: none;
    border-radius: 30px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #ffffff;

}

.card-body {
    padding: 20px;
    background-color: white;
    border: none;
    border-radius: 30px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
}

.card-body:hover {
    transform: translateY(-10px); /* Mengangkat kartu sedikit ke atas */
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.15); /* Bayangan yang lebih jelas saat hover */
    cursor: pointer; /* Mengubah kursor menjadi pointer untuk menandakan interaksi */
    /* Anda bisa menambahkan properti lain untuk perubahan visual saat hover, contoh: */
    /* background-color: #f9f9f9; */ /* Sedikit perubahan warna latar belakang */
}


.icon-circle {
    width: 60px;
    height: 60px;
    background: var(--primary-gradient);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px auto;
    color: white;
    box-shadow: #2575fc;
    font-size: 1.8rem;
}

.card-title {
    font-weight: bold;
    color: #343a40;
}

.card img {
    max-height: 150px; /* Tinggi maksimal gambar pratinjau */
    object-fit: contain; /* Agar gambar tidak terpotong dan proporsional */
    width: auto;
    display: block;
    margin: 0 auto 15px auto;
}



/* Styling Linimasa */
.timeline-card {
    border-left: 5px solid var(--primary-gradient);
    border-radius: 0 10px 10px 0;
    box-shadow: none !important; /* Hilangkan shadow default */
}

.timeline-card .card-subtitle {
    font-weight: bold;
    color: #28a745 !important; /* Warna hijau untuk "SELESAI" */
}
/* Anda bisa menambahkan kelas lain untuk status "DALAM PROSES" (biru) dan "BELUM DILAKSANAKAN" (abu-abu) */

/* Override warna tombol "Lihat" (btn-primary) */
.btn-primary {
    background-color: #2575fc; /* Ungu biru */
    border-color: #2575fc;
    color: #fff;
}

.btn-primary:hover {
    background-color: #eeeb26; /* Warna hover */
    border-color: #eeeb26;
    color: #fff;
}


/* Footer dengan Gelombang */
.footer-wave {
    background: var(--primary-gradient); /* Gradien yang sama dengan header */
    position: relative;
    padding-bottom: 20px; /* Untuk memberi ruang pada gelombang di bawah */
    overflow: hidden; /* Penting untuk menyembunyikan bagian gelombang yang keluar */
}

.footer-wave::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px; /* Tinggi gelombang */
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 100" xmlns="http://www.w3.org/2000/svg"><path fill="%23FFFFFF" fill-opacity="1" d="M0,64L48,69.3C96,75,192,85,288,74.7C384,64,480,32,576,32C672,32,768,64,864,64C960,64,1056,32,1152,32C1248,32,1344,64,1392,80L1440,96L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>');
    /* Di sini Anda perlu membuat SVG gelombang. Gunakan tool online seperti https://www.blobmaker.app/ atau https://getwaves.io/ untuk membuatnya. Ganti fill="%23FFFFFF" dengan warna background utama website Anda jika Anda ingin gelombangnya terlihat dari bagian atas, atau dengan warna putih jika Anda ingin gelombang putih di atas background footer gradien. */
    background-repeat: no-repeat;
    background-size: cover;
    transform: translateY(-90%); /* Geser gelombang ke atas agar terlihat */
}


.footer-wave ul {
    padding-left: 0;
}

.footer-wave ul li {
    margin-bottom: 8px;
}

.footer-wave ul li i {
    margin-right: 10px;
}

.footer-wave a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-wave a:hover {
    color: #e0e0e0;
}

/* Responsiveness dasar untuk mobile */
@media (max-width: 768px) {
    .hero-section {
        padding: 60px 0;
    }
    .hero-section h1 {
        font-size: 2.5rem;
    }
    .intro-section .info-list li a {
        font-size: 1rem;
        padding: 12px 15px;
    }
    .bupati {
        width: 100%;
        margin-top: 30px;
        height: auto;
    }
    .footer-wave::before {
        height: 100px; /* Sesuaikan tinggi gelombang untuk mobile */
        transform: translateY(-80%);
    }
}