/*
-------------------------------
Import CSS and Google Fonts
-------------------------------
*/
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700,900|Work+Sans:400,500,600,700');


/* ==========================================================================
   GLOBAL STYLING & RESET (Penyempurnaan)
   ========================================================================== */

/* Tetapkan variabel warna untuk memudahkan penyesuaian */
:root {
    --color-brand: #2BB04D;        /* Hijau Utama */
    --color-brand-dark: #1e8e3e;   /* Hijau Gelap */
    --color-text-dark: #1f2937;    /* Hampir Hitam (Dark Slate) */
    --color-text-soft: #6b7280;    /* Abu-abu Soft */
    --color-background: #f7f9fb;   /* Light Gray Background */
    --shadow-main: 0 8px 30px rgba(0, 0, 0, 0.08); /* Shadow card utama */
    --shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.15); /* Shadow card hover */
}

body {
    /* Tetap Poppins, tapi gunakan warna yang lebih 'Dark Mode' friendly */
    color: var(--color-text-soft); 
    background-color: var(--color-background); 
    font-size: 17px; /* Naikkan sedikit lagi untuk kesan elegan */
    line-height: 1.75; 
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-dark); /* Heading lebih pekat */
    font-weight: 800; /* Heading sangat tebal */
}

a:hover {
    color: var(--color-brand-dark); 
    /* Tambahkan underline halus pada hover link biasa */
    text-decoration: underline; 
    text-underline-offset: 4px; 
}

/* ==========================================================================
   UTILITIES & LAYOUT (Penyempurnaan Headline)
   ========================================================================== */

/* Headline - Judul Bagian */
.headline {
    /* Hapus padding-bottom dan ganti dengan pseudo-element */
    padding-bottom: 0; 
    margin-bottom: 60px; /* Jarak lebih besar */
}

.headline h2 {
    font-size: 42px; /* Judul lebih menonjol */
    font-weight: 900; /* Sangat tebal */
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

/* Tambahkan garis pemisah modern di bawah Judul */
.headline h2:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px; /* Lebar garis */
    height: 4px; /* Ketebalan garis */
    background: var(--color-brand);
    border-radius: 2px;
}

.headline h3 {
    font-size: 19px; /* Sub-heading lebih besar */
    color: var(--color-text-soft);
}

/* ==========================================================================
   BUTTONS & FORM ELEMENTS (Wajib Dibuat Kekinian!)
   ========================================================================== */

/* Form Input Focus */
input:focus,
textarea:focus,
.form-control:focus,
select:focus {
    border-color: var(--color-brand);
    /* Ganti shadow bawaan Bootstrap menjadi glow yang lebih halus dan luas */
    box-shadow: 0 0 0 4px rgba(43, 176, 77, 0.15) !important; 
}


/* General Button Style (Magic Button) */
.button-df a, .btn, .slider-text ul li a {
    /* Ganti border-radius agar terlihat lebih berisi */
    border-radius: 10px !important; 
    padding: 15px 40px; /* Padding lebih besar */
    font-weight: 700;
    background-color: var(--color-brand); 
    border: 3px solid var(--color-brand); /* Border lebih tebal */
    /* Shadow dramatis, memberikan kesan terangkat */
    box-shadow: 0 10px 20px rgba(43, 176, 77, 0.4); 
    transform: translateY(0);
}

.button-df a:hover, .btn:hover, .slider-text ul li a:hover {
    background: var(--color-brand-dark); 
    border-color: var(--color-brand-dark);
    /* Efek terangkat: Naik lebih tinggi dan shadow lebih jelas */
    transform: translateY(-5px); 
    box-shadow: 0 15px 30px rgba(43, 176, 77, 0.5);
}

/* Secondary Button (Outline Style) */
.btn.btn2 {
    background-color: transparent; /* Transparan */
    color: var(--color-brand);
    border: 3px solid var(--color-brand);
    box-shadow: none;
}

.btn.btn2:hover {
    background-color: var(--color-brand);
    color: #ffffff;
    /* Hilangkan shadow saat hover untuk outline button */
    box-shadow: 0 4px 15px rgba(43, 176, 77, 0.2); 
    transform: translateY(-2px);
}
/* ==========================================================================
   CHOOSE / FEATURE / SERVICES ITEMS (Cards) - ENHANCED MODERN
   ========================================================================== */

/* --- ITEM CARD UTAMA --- */
.choose-item, .feature-item, .services-item {
    padding: 40px; 
    border-radius: 12px; /* Sedikit lebih membulat */
    /* Gunakan transition penuh untuk semua perubahan */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Shadow default lebih lembut */
    margin-bottom: 30px;
    height: 100%;
    border: 1px solid #eaeaeb; /* Border yang sangat tipis */
    transform-style: preserve-3d;
    background-color: #ffffff;
}

.choose-item:hover, .feature-item:hover, .services-item:hover {
    /* Efek terangkat: Lebih jelas dan mulus */
    transform: translateY(-10px); 
    /* Shadow hover yang lebih dramatis */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); 
    border-color: var(--color-brand-light); /* Tambahkan aksen border saat hover */
}

/* --- IKON DENGAN BACKGROUND MELINGKAR --- */
.choose-icon, .feature-icon, .services-icon {
    font-size: 30px; /* Ukuran ikon dikurangi agar pas di dalam lingkaran */
    color: var(--color-brand);
    margin-bottom: 25px;
    transform: translateZ(10px); 
    
    /* Tambahan Keren: Lingkaran Latar Belakang */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 65px; /* Ukuran lingkaran */
    height: 65px;
    border-radius: 50%;
    /* Gunakan warna brand yang transparan untuk latar belakang ikon */
    background-color: rgba(43, 176, 77, 0.1); /* Contoh: 10% opacity dari #2BB04D */
    transition: all 0.4s ease;
}

/* Efek Hover pada Ikon: Lingkaran menjadi solid */
.choose-item:hover .choose-icon, 
.feature-item:hover .feature-icon, 
.services-item:hover .services-icon {
    background-color: var(--color-brand); /* Lingkaran menjadi warna brand penuh */
    color: #ffffff; /* Ikon menjadi putih */
}

/* --- Judul/Nama Layanan --- */
.choose-text h4, .feature-text h4, .services-text h3 {
    font-size: 24px; /* Judul yang lebih besar dan berani */
    font-weight: 800;
    margin-bottom: 10px;
    color: #333333; /* Pastikan judul sangat mudah dibaca */
    line-height: 1.3;
}

/* --- Deskripsi Teks --- */
.choose-text p, .feature-text p, .services-text p {
    color: #777777; /* Warna teks yang lebih halus */
    font-size: 15px; /* Sedikit lebih kecil untuk hierarki */
    line-height: 1.7;
    margin-bottom: 0;
}

/* Services Photo */
.services-photo {
    height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.image-effect:after, .image-effect:before {
    /* Ubah efek hover gambar agar lebih modern (hilangkan kotak overlay) */
    opacity: 0; 
    transition: all 0.4s ease;
}
.effect-item:hover .image-effect:after, .effect-item:hover .image-effect:before {
    opacity: 0; /* Menonaktifkan efek default image-effect yang kurang modern */
}

/* Ganti efek hover untuk service item menjadi efek zoom */
.services-item a:hover .services-photo {
    transform: scale(1.05);
}
.services-photo {
    transition: transform 0.4s ease;
}

.button-bn a {
    color: #2BB04D;
    font-weight: 600;
}
.button-bn a:hover {
    color: #1e8e3e;
}


/* UNIT/BRAND AREA */
.brand-item {
    padding: 20px;
    text-align: center;
}
.brand-item img {
    opacity: 0.7;
    transition: opacity 0.4s ease;
    max-width: 150px; /* Batasi ukuran logo */
    height: auto;
}
.brand-item:hover img {
    opacity: 1;
}
.brand-item p {
    margin-top: 10px;
    font-size: 14px;
}

/* PRICING TABLE (COUNTERUP AREA) */
/*
===================================================
COUNTER UP AREA - PARALLAX EFFECT
===================================================
*/
.counterup-area {
    position: relative;
    /* Parallax effect */
    background-attachment: fixed; 
    background-size: cover;
    background-position: center center; /* Pastikan gambar terlihat baik */
    padding: 80px 0; /* Tambahkan padding agar konten terlihat */
}

.bg-counterup {
    /* Overlay gelap untuk kontras yang lebih baik */
    background: rgba(0, 0, 0, 0.8); 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* --- Style untuk Angka dan Teks di dalam Counter --- */
.counter-item {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    margin-bottom: 30px;
}
.counter-item i {
    font-size: 40px;
    color: var(--color-brand);
    margin-bottom: 15px;
    display: block;
}
.counter-item .counter {
    font-size: 52px;
    font-weight: 800;
    display: block;
    line-height: 1;
    margin-bottom: 5px;
}
.counter-item p {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    text-transform: uppercase;
    opacity: 0.9;
}

/* TESTIMONIAL AREA */
.testimonial-area {
    position: relative;
    background-attachment: fixed;
    background-size: cover;
}

.bg-testimonial {
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.testimonial-item {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    margin: 10px; /* Jarak antar item di carousel */
}

.testimonial-photo img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid #2BB04D;
}

.testimonial-name h4 {
    font-size: 18px;
    margin-bottom: 5px;
}
.testimonial-name p {
    color: #777;
    font-size: 14px;
}

.testimonial-description p {
    font-style: italic;
    color: #555;
}

/* BOOKING AREA & FAQ */
.booking-area {
    position: relative;
    background-attachment: fixed;
    background-size: cover;
}
.bg-booking {
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.booking-gallery {
    padding: 20px 0;
}
.booking-form {
    background: rgba(255, 255, 255, 0.95); /* Sedikit transparan agar background terlihat */
    padding: 30px;
    border-radius: 12px;
}

.faq-item.card {
    border: none;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
}

.faq-header {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
}

.faq-button {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    transition: all 0.3s ease;
}

.faq-button:hover, .faq-button:not(.collapsed) {
    color: #2BB04D;
    background: #ffffff;
}

.faq-button i {
    margin-right: 10px;
    transition: transform 0.3s ease;
}
.faq-button.collapsed i {
    transform: rotate(0deg);
}
.faq-button:not(.collapsed) i {
    transform: rotate(90deg);
}

.faq-body {
    background: rgba(255, 255, 255, 0.85);
    padding: 15px 20px;
    border-top: 1px solid #eee;
    color: #555;
    border-radius: 0 0 8px 8px;
}

/*
-------------------------------
Preloader
-------------------------------
*/
#preloader {
    /* Memastikan preloader menutupi seluruh viewport dan berada di atas segalanya */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Latar belakang abu-abu muda lembut (lebih bagus dari putih) */
    background-color: #f0f4f8; 
    z-index: 999999;
    /* Tambahkan transisi agar layar menghilang dengan mulus */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

/* 2. SPINNER CONTAINER */
#status {
    /* Posisi di tengah layar */
    position: absolute;
    left: 50%;
    top: 50%;
    /* Gunakan transform untuk centering yang lebih akurat dan performa tinggi */
    transform: translate(-50%, -50%);
    width: 60px; /* Ukuran yang lebih kecil, 200px terlalu besar */
    height: 60px;
    /* Hapus properti background yang berlebihan karena kita akan menggunakan CSS Spinner */
}
/* 3. ANIMASI SPINNER MURNI (CSS) */
#status::after {
    content: '';
    display: block;
    width: 60px;
    height: 60px;
    margin: 1px;
    border-radius: 50%;
    border: 6px solid #e0e6ed; 
    border-top-color: #2BB04D; /* Warna brand/highlight */
    border-right-color: #2BB04D;
    
    /* Animasi putaran */
    animation: spin 1.2s linear infinite;
}

/* 4. KEYFRAMES UNTUK ANIMASI BERPUTAR */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 5. STATE SAAT SUDAH DIMUAT (untuk JS) */
/* Saat halaman selesai dimuat, kita tambahkan class 'loaded' ke body atau #preloader */
.loaded #preloader {
    opacity: 0; /* Membuat preloader transparan */
    visibility: hidden; /* Menyembunyikan preloader agar tidak menghalangi klik */
}

/*
-------------------------------
Header-Area
-------------------------------
*/
/*
==============================================
HEADER AREA (TOP BAR) STYLING - Keren & Bersih
==============================================
*/

.header-area {
    clear: both;
    /* Hapus border-bottom: Header yang modern tidak selalu butuh garis pemisah. */
    border-bottom: none; 
    padding: 12px 0; /* Sedikit mengurangi padding agar lebih ringkas */
    /* Ganti warna biru default ke warna brand */
    background: #2BB04D; 
    color: #fff; /* Teks default di bar ini harus putih */
    font-size: 14px; /* Sedikit lebih kecil agar fokus tidak teralihkan dari navigasi utama */
}

/* ------------------ LEFT SIDE: Info & Social ------------------ */

.header-social ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Menggunakan flexbox untuk penataan yang lebih mudah */
    align-items: center;
}

.header-social li {
    position: relative;
    /* Ganti margin-right agar lebih modern dan ringkas */
    margin-right: 25px; 
    padding-right: 25px; /* Tambah padding kanan untuk jarak dengan pemisah */
}

.header-social li:before {
    position: absolute;
    content: "";
    width: 1px; /* Gunakan garis yang lebih tipis */
    height: 60%; /* Tinggi hanya 60% agar terlihat elegan */
    background-color: rgba(255, 255, 255, 0.3); /* Putih dengan opacity rendah */
    top: 20%; /* Posisikan di tengah vertikal */
    right: 0; /* Letakkan di sebelah kanan item */
    left: auto; /* Hilangkan left: -15px */
}

.header-social li:first-child:before {
    display: none;
}

/* ------------------ RIGHT SIDE: Info & Language ------------------ */

.header-info {
    text-align: right;
    float: right; /* Pertahankan float jika menggunakan layout lama */
}

.header-info ul.first {
    /* Gunakan flexbox pada header-info juga untuk konsistensi */
    display: flex; 
    justify-content: flex-end; /* Taruh item di kanan */
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-info ul.first li {
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: 14px; /* Konsisten dengan ukuran .header-area */
    margin-left: 25px; 
    padding-left: 25px; /* Padding kiri untuk jarak dengan pemisah */
}

.header-info ul.first li:first-child {
    margin-left: 0;
    padding-left: 0;
}

.header-info ul.first li:before {
    position: absolute;
    content: "";
    width: 1px;
    height: 60%; 
    background-color: rgba(255, 255, 255, 0.3);
    top: 20%;
    left: 0; /* Letakkan di sebelah kiri item */
    right: auto;
    display: block; /* Pastikan pembatas muncul di sini */
}

.header-info ul.first li:first-child:before {
    display: none; /* Pembatas tidak ada di item pertama */
}

.header-info ul.first li i {
    margin-right: 7px;
    color: #fff;
}

/* ------------------ SOCIAL BAR ICONS ------------------ */

.social-bar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.social-bar li {
    display: inline-block !important;
    margin-right: 12px !important; /* Kurangi margin agar ikon terlihat rapat */
}

.social-bar li:last-child {
    margin-right: 0 !important;
}

.social-bar li a {
    color: #fff;
    font-size: 16px; /* Ukuran ikon yang pas */
    text-decoration: none;
    transition: all 0.3s;
}

.social-bar li a:hover {
    /* Efek hover untuk social media: sedikit cerah */
    color: rgba(255, 255, 255, 0.7); 
}

/* ------------------ LANGUAGE DROPDOWN ------------------ */

.language a {
    text-decoration: none;
    color: #fff;
    font-family: 'Poppins', sans-serif; /* Konsisten dengan font utama */
    font-size: 14px;
    font-weight: 500;
}

.language a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.language i {
    margin-right: 7px;
}

.dropdown-menu {
    border-radius: 6px; /* Sudut membulat pada dropdown */
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.dropdown-menu a {
    text-decoration: none;
    color: #313131;
    font-family: 'Poppins', sans-serif;
    padding: 8px 15px; /* Tambah padding untuk area klik */
}

.dropdown-menu a:hover {
    background-color: rgba(43, 176, 77, 0.1); /* Latar belakang hover transparan dengan warna brand */
    color: #2BB04D;
}

/*
===================================================
LOGO AND MAIN MENU STYLING - MODERN & CLEAN (V2)
===================================================
*/

/* --- Logo --- */
.logo {
    min-height: 90px;
    display: flex; 
    align-items: center;
}

.logo img {
    width: auto;
    height: 50px; 
    transition: all 0.3s ease;
}

/* --- Main Menu Container --- */
.main-menu-item {
    float: right;
    display: flex;
    align-items: center;
    height: 100%;
}

ul.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; 
    align-items: center;
}

ul.nav-menu li {
    position: relative;
    display: block;
}

/* --- Main Menu Links --- */
ul.nav-menu li a {
    font-size: 15px; 
    font-weight: 700; 
    color: #4a4a4a; 
    text-decoration: none;
    padding: 0 16px; 
    min-height: 90px; 
    display: flex;
    align-items: center;
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

ul.nav-menu li:hover > a,
ul.nav-menu li.active > a {
    color: #2BB04D; 
    border-bottom: 3px solid #2BB04D; 
}

/* --- Dropdown Menu (Submenu) --- */
ul.nav-menu li ul {
    position: absolute;
    width: 250px; 
    top: 100%;
    left: 0;
    z-index: 1000; 
    background: #ffffff;
    border-top: 4px solid #2BB04D; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); 
    border-radius: 0 0 10px 10px; 
    visibility: hidden; 
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    transform: translateY(15px); 
}

/* Tampilkan Submenu saat hover */
ul.nav-menu li:hover > ul {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

ul.nav-menu li ul > li {
    float: none;
    display: block; 
}

ul.nav-menu li ul li a {
    font-size: 14px;
    font-weight: 500;
    padding: 14px 25px; 
    color: #444444; 
    border-bottom: 1px solid #f0f0f0; 
    min-height: auto;
    display: block; 
}

ul.nav-menu li ul li:last-child a {
    border-bottom: none;
    border-radius: 0 0 10px 10px; 
}

/* Sub-Submenu positioning (level 3) */
ul.nav-menu li ul li ul {
    left: 100%;
    top: 0; 
    border-radius: 10px; 
    border-left: 4px solid #2BB04D; 
    border-top: none; 
}

/* Submenu Hover Effect */
ul.nav-menu li ul li:hover > a {
    background: #f4f4f4; 
    color: #2BB04D; 
    border-bottom-color: #f4f4f4;
}


/* --- Menu Item With Children Arrow (Dropdown Icon) --- */
.menu-item-has-children a.chl {
    padding-right: 30px; 
}

.menu-item-has-children a.chl:after {
    content: '\f107'; 
    font-family: 'FontAwesome';
    font-size: 11px;
    position: absolute;
    right: 12px;
    top: 50%; 
    transform: translateY(-50%);
    color: #777;
    transition: all 0.3s ease;
}

ul.nav-menu li:hover > a.chl:after {
    color: #2BB04D;
    transform: translateY(-50%) rotate(0); 
}
ul.nav-menu li.menu-item-has-children:hover > a.chl:after {
    transform: translateY(-50%) rotate(180deg); 
}

/* --- Sticky Menu --- */
#strickymenu.sticky {
    background-color: #fff;
    border-bottom: 1px solid #ddd; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
    height: 70px; 
}

#strickymenu.sticky .logo {
    min-height: 70px;
}

#strickymenu.sticky .logo img {
    height: 35px; 
}

#strickymenu.sticky ul.nav-menu li a {
    min-height: 70px; 
    padding: 0 16px; 
    border-bottom: none !important;
}

/* Tambahkan garis bawah saat hover/active pada sticky menu */
#strickymenu.sticky ul.nav-menu li:hover > a,
#strickymenu.sticky ul.nav-menu li.active > a {
    border-bottom: 3px solid #2BB04D; 
}

/*
===================================================
PENTING: MENGHILANGKAN SEARCH BAR
===================================================
*/

/* Ganti .search-bar-element dengan kelas atau ID HTML yang sesuai di struktur Anda */
.search-bar-element, 
.header-search, 
.hambuger-search,
.header-action .search-box { 
    display: none !important;
    visibility: hidden !important;
}
/*
-------------------------------
SLIDER STYLING - IMPACTFUL
-------------------------------
*/
/*
/*
===================================================
SLIDER STYLING - REFINED FOR 2025 IMPACT
===================================================
*/
:root {
    --color-brand: #2BB04D;
    --color-brand-dark: #1e8e3e;
}

/* --- Slider Container & Background --- */
.slider-item {
    height: 80vh; /* Gunakan vh untuk responsivitas vertikal yang lebih baik */
    min-height: 650px; /* Minimal tinggi agar tidak terlalu kecil di desktop */
    color: #fff;
    /* Tambahkan animasi masuk halus saat slider dimuat */
    animation: fadeIn 1s ease-out forwards; /* Tambahkan forwards agar properti tetap setelah animasi */
    /* Pastikan gambar latar belakang diatur (harus diatur di HTML atau JS, tapi properti ini penting) */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.bg-slider {
    /* Gradien yang lebih dramatis, memastikan kontras di area teks */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 70%, transparent 100%);
}

/* --- Animated Text (Heading & Content) --- */
.slider-content-wrapper {
    /* Kelas tambahan yang membungkus teks agar bisa dianimasikan */
    animation: slideInUp 1s ease-out 0.5s forwards;
    opacity: 0; /* Mulai tersembunyi */
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.text-animated h1 {
    font-size: 4.8rem; /* Lebih besar dari 58px, lebih berdampak */
    font-weight: 900; /* Lebih tebal */
    line-height: 1.05;
    text-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); /* Bayangan teks yang lebih jelas */
    margin-bottom: 20px;
}

.text-animated h1 span {
    font-weight: 700; /* Tetap tebal agar menonjol */
    color: #fff; /* Warna putih agar kontras dengan glow */
    /* Glow effect yang lebih halus dan futuristik */
    text-shadow: 0 0 15px rgba(43, 176, 77, 0.8), 0 0 5px rgba(43, 176, 77, 0.5); 
}

.text-animated p {
    font-size: 1.25rem; /* Teks deskripsi lebih besar */
    max-width: 750px; /* Lebar teks deskripsi yang lebih luas */
    margin-bottom: 45px;
    opacity: 0.85;
}

/* --- Call To Action (CTA) Buttons - Consistency with Global Style --- */
.text-animated ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 20px;
    /* Tambahkan efek 3D kecil pada container tombol */
    transform-style: preserve-3d;
}

.text-animated li a {
    /* Sesuaikan dengan gaya tombol global (Pill/Capsule Button) */
    font-size: 17px;
    padding: 15px 45px; /* Padding lebih besar */
    border-radius: 10px; /* Gunakan sudut membulat modern */
    font-weight: 700;
    letter-spacing: 0.5px;
    /* Menggunakan easing modern yang sama untuk semua tombol */
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); 
    box-shadow: 0 8px 20px rgba(43, 176, 77, 0.5); /* Bayangan yang lebih kuat */
}

.text-animated li a:hover {
    background: var(--color-brand-dark); 
    border-color: var(--color-brand-dark);
    /* Efek terangkat yang lebih kuat */
    transform: translateY(-5px) translateZ(10px); 
    box-shadow: 0 12px 25px rgba(43, 176, 77, 0.7);
}

.text-animated li:last-child a {
    /* Tombol sekunder: Outline White (Glass effect) */
    background: rgba(255, 255, 255, 0.1); 
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: none;
    backdrop-filter: blur(5px); /* Efek Glassmorphism yang nyata */
}

.text-animated li:last-child a:hover {
    background: #fff;
    color: var(--color-brand);
    border-color: #fff;
    transform: translateY(-3px) translateZ(5px);
    box-shadow: 0 6px 15px rgba(255, 255, 255, 0.3);
}

/* --- Owl Carousel Navigation (Arrows) - Futuristik Glassmorphism --- */
.slider-one .owl-nav {
    position: absolute;
    right: 5%; 
    bottom: 5%; 
    display: flex;
    gap: 15px;
    z-index: 20;
}

.slider-one .owl-nav .owl-prev,
.slider-one .owl-nav .owl-next {
    font-size: 20px; /* Ikon lebih besar */
    width: 50px; /* Lebih besar */
    height: 50px;
    line-height: 46px; /* Disesuaikan untuk line-height 50px */
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    /* Glassmorphism background */
    background: rgba(255, 255, 255, 0.15); 
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    backdrop-filter: blur(10px); /* Efek blur yang kuat */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.slider-one .owl-nav .owl-prev:hover,
.slider-one .owl-nav .owl-next:hover {
    color: #fff;
    background: var(--color-brand); 
    border-color: var(--color-brand);
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(43, 176, 77, 0.5);
}

/* --- Media Query for Mobile Responsiveness (Kekinian) --- */
@media (max-width: 992px) {
    .slider-item {
        height: 550px;
    }
    .text-animated h1 {
        font-size: 3rem; /* Kembali ke ukuran yang lebih aman */
    }
    .text-animated p {
        font-size: 1.1rem;
        max-width: 90%;
    }
    .text-animated li a {
        padding: 12px 30px;
        font-size: 15px;
    }
    .slider-one .owl-nav {
        right: 50%;
        transform: translateX(50%); /* Centering navigasi di mobile */
        bottom: 5%;
    }
}

/*
-------------------------------
About
-------------------------------
*/
/*
===================================================
HEADLINE LEFT & ABOUT SECTION (Tabs/Video) - MODERN
===================================================
*/

/* --- Headline Left --- */
.headline-left{
    margin-bottom: 40px; /* Sedikit dikecilkan */
    text-align: left;
}

.headline-left h2 {
    font-size: 36px; /* Ukuran yang lebih proporsional */
    font-weight: 800; /* Lebih tebal */
    text-transform: capitalize; /* Lebih elegan daripada uppercase */
    letter-spacing: 0;
    line-height: 1.2;
    color: #313131;
    margin-bottom: 5px;
}

.headline-left h2 span {
    font-size: 36px;
    display: block;
    font-weight: 300;
    color: #2BB04D; /* Highlight dengan warna brand */
    margin-top: 5px;
}

/* --- Progress Bars Container --- */
.progress-gallery.main-prog{
    margin-top: 40px;
}

/* --- Progress Bar Styling --- */
.progress-gallery.main-prog .bar-container .progress{
    height: 10px; /* Sedikit lebih tebal */
    border-radius: 5px; /* Sudut membulat */
    background-color: #e9ecef; /* Latar belakang bar yang lebih netral */
}
/* Anda perlu menambahkan CSS untuk .progress-bar di tempat lain agar menggunakan #2BB04D */
/* Contoh:
.progress-bar {
    background-color: #2BB04D;
    transition: width 0.6s ease;
}
*/

/* --- About Tab/Image Area (with internal menu/video) --- */
.about-tab{
    position: relative;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 450px; /* Sedikit lebih tinggi */
    border-radius: 12px; /* Sudut membulat */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.about-tab:before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(43, 176, 77, 0.85); /* Overlay warna brand dengan opacity yang pas */
    /* background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 100%); */
}

/* --- Internal Tab Menu Styling --- */
.about-tab ul{
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute; /* Posisikan di bawah gambar */
    bottom: 0;
    width: 100%;
    z-index: 99;
    display: flex;
    justify-content: center;
}
.about-tab ul li{
    display: block; /* Menggunakan display block di dalam flex container */
}

.about-tab ul li a{
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    background: rgba(255, 255, 255, 0.9); /* Latar belakang putih semi-transparan */
    color: #313131;
    padding: 12px 25px;
    margin-left: 0; /* Hilangkan margin negatif */
    transition: all 0.3s ease;
}

.about-tab ul li a:hover {
    background: #ffffff;
    color: #2BB04D;
}

.about-tab ul li a.active{
    background: #2BB04D; /* Warna brand saat aktif */
    color: #fff;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1);
}

/* --- Video Play Button (Modernized) --- */
/*
===================================================
VIDEO PLAY BUTTON - HYPER-MODERN STYLING
===================================================
*/

.video-button {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: content-box;
    display: block;
    width: 25px; 
    height: 25px;
    border-radius: 50%;
    padding: 20px; 
    cursor: pointer;
    /* Tambahkan transition pada transform untuk hover effect */
    transition: transform 0.3s ease-out;
}

.video-button:hover {
    transform: translate(-50%, -50%) scale(1.05); /* Sedikit membesar saat hover */
}

/* --- Layer Animasi Gelombang Luar (Pulse Effect) --- */
.video-button:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 100px; /* Ukuran gelombang sedikit diperbesar */
    height: 100px;
    background: rgba(43, 176, 77, 0.4); /* Gelombang menggunakan warna brand semi-transparan */
    border-radius: 50%;
    /* Gunakan cubic-bezier untuk animasi yang lebih organik */
    animation: video-pop 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite; 
}

/* --- Layer Lingkaran Inti (Glassmorphism Effect) --- */
.video-button:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 70px; 
    height: 70px;
    /* Gunakan background semi-transparan untuk Glassmorphism ringan */
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    transition: all 300ms ease;
    /* Bayangan lebih lembut dan menyebar */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    /* Efek Blur (Glassmorphism) */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3); /* Garis tepi tipis */
}
.video-button:hover:after {
    background: #fff; /* Menjadi solid putih saat hover */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

/* --- Segitiga Play Icon --- */
.video-button span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    /* Membuat segitiga yang lebih tajam */
    border-top: 8px solid transparent; 
    border-bottom: 8px solid transparent;
    border-left: 14px solid #2BB04D; 
    margin-left: 3px; /* Disesuaikan untuk centering visual */
}

/* --- Keyframes Animasi Gelombang --- */
@keyframes video-pop {
    0% {
        transform: translate(-50%, -50%) scale(0.85);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.7); 
        opacity: 0;
    }
}
/*
-------------------------------
MODAL STYLING (Pop-up)
-------------------------------
*/
.modal.show .modal-dialog.hb-style {
    /* Posisikan modal sedikit lebih tinggi di tengah */
    transform: translate(0px, 15%); 
}
.modal-content {
    border-radius: 12px; /* Sudut membulat pada konten modal */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    border: none;
}

.modal-header {
    border-bottom: 1px solid #eee;
    padding: 15px 20px;
}

.modal-header h3 {
    font-size: 22px; /* Sedikit dikecilkan */
    font-weight: 700;
    color: #2BB04D; /* Warna brand untuk judul modal */
    margin: 0;
}

.modal-footer .btn {
    /* Menggunakan button style yang sudah dimodifikasi di awal */
    border-radius: 8px !important;
}
/*
-------------------------------
About Detail
-------------------------------
*/
.about-page .headstyle h4 {
	margin-bottom: 20px;
}

.about-page p a {
	font-family: 'Work Sans', sans-serif;
	text-decoration: underline;
	font-weight: 700;
	font-size: 15px;
}

.about-menu {
	margin-top: 30px;
}

.about-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-menu ul li {
	position: relative;
	margin-bottom: 8px;
}

.about-menu ul li:last-child {
	margin-bottom: 0;
}

.about-menu ul li a {
	display: block;
	font-size: 16px;
	font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid #e1e1e1;
	padding-bottom: 8px;
	padding-left: 12px;
	position: relative;
}

.about-menu ul li a:before {
	position: absolute;
	content: '\f0da';
	font-family: fontawesome;
	top: 0;
	left: 0;
}

.about-menu ul li a.active {
	color: #3367c1;
	border-bottom: 1px solid #3367c1;
}

.company-detail {
	margin-top: 30px;
}

.about-carousel {
	margin-bottom: 30px;
}

.company-detail h5 {
	font-size: 16px;
    font-weight: 700;
	line-height: 1.4;
	margin-bottom: 15px;
}

.company-detail p:last-child {
	margin: 0;
}

.history-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.history-list ul li {
	font-size: 15px;
	margin-bottom: 15px;
	padding-bottom: 8px;
}

.history-list ul li span {
    font-size: 16px;
	font-weight: 700;
	color: #3367c1;
}

.about-carousel {
	border: 1px solid #e1e1e1;
}

.about-carousel .owl-nav .owl-prev,
.about-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 18px;
	position: absolute;
	width: 40px;
	height: 50px;
	line-height: 48px;
	top: 50%;
	margin-top: -25px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.about-carousel .owl-nav .owl-prev {
	left: 0;
}

.about-carousel .owl-nav .owl-next {
	right: 0;
}

.about-carousel .owl-nav .owl-prev:hover,
.about-carousel .owl-nav .owl-next:hover {
	color: #fff;
	background: #313131;
}

.mission-detail {
	margin-top: 15px;
}

.mission-item {
	text-align: center;
	margin-top: 15px;
	background: #f5f5f5;
	border: 1px solid #e1e1e1;
	padding: 15px;
	min-height: 228px;
}

.mission-item img {
	width: 60px;
	height: 60px;
	margin: 0 auto;
	margin-bottom: 15px;
}

.mission-item i {
	font-size: 40px;
    color: #3367c1;
	margin: 0 auto;
	margin-bottom: 20px;
}

.mission-item h4 {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 15px;
}

.mission-item p {
	margin: 0;
}

.progress-gallery {
	margin-top: 15px;
}

.progress-gallery .bar-container {
	position: relative;
	font-size: 15px;
	margin-bottom: 15px;
}

.progress-gallery .bar-container p {
	font-weight: 500;
	margin-bottom: 5px;
}

.progress-gallery .bar-container .progress {
	height: 10px;
}

.progress-gallery .bar-container .progress .progress-bar-custom {
	background-color: #3367c1;
}

.progress-gallery .bar-container .percentage-show {
	font-weight: 500;
	position: absolute;
	top: 0px;
	right: 0;
	z-index: 9;
}

.progress-gallery .progress-bar {
	transition-duration: 3s;
}


/*
-------------------------------
Benefits
-------------------------------
*/
.benefits-photo img {
    max-width: 100%;
    height: auto;
}

.benefits-right h3 {
	font-size: 40px;
	font-weight: 700;
    text-transform: uppercase;
	margin-bottom: 25px;
}
.benefits-right h3 span{
    font-weight: 400;
}

.benefits-right p {
	margin-bottom: 20px;
}

.benefits-right ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.benefits-right ul li {
    font-size: 16px;
    font-weight: 500;
	position: relative;
	padding-left: 25px;
	margin-top: 5px;
    color: #3367c1;
}

.benefits-right ul li:before {
	position: absolute;
	content: '\F178';
	font-family: 'fontawesome';
	top: 0;
	left: 0;
	color: #3367c1;
}


/*
-------------------------------
Choose Items
-------------------------------
*/
.choose-item {
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	text-align: center;
	margin-top: 30px;
	padding: 15px;
	position: relative;
	height: 300px;
}

.choose-item:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #3367c1;
	opacity: 0.8;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.choose-item:hover:before {
	opacity: 1;
}

.choose-icon {
	position: relative;
	margin-bottom: 20px;
}

.choose-icon img {
	width: 60px;
	height: 60px;
}
.choose-icon i{
    font-size: 60px;
    color: #fff;
}

.choose-text {
	position: relative;
}

.choose-text h4 {
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 15px;
	text-transform: uppercase;
}

.choose-text p {
	color: #d6ddff;
	margin: 0;
}


/*
-------------------------------
Featured
-------------------------------
*/
/*
===================================================
FEATURE ITEM STYLING - MODERN 2025 FLEXBOX LAYOUT
===================================================
*/

.feature-item {
    /* Mengganti display: table dengan Flexbox */
    display: flex;
    align-items: flex-start; /* Ikon dan teks sejajar di atas */
    width: 100%;
    margin-top: 30px;
    background: #ffffff; /* Latar belakang item putih */
    border-radius: 12px; /* Sudut membulat modern */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Bayangan soft awal */
    overflow: hidden; /* Penting untuk border-radius */
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); /* Transisi halus dan cepat */
}

/* --- Ikon Container (Kiri) --- */
.feature-icon {
    /* Mengatur lebar ikon */
    flex-shrink: 0; /* Mencegah ikon menyusut */
    width: 80px; /* Ukuran ikon sedikit lebih besar */
    height: 100%; /* Agar bisa mengisi tinggi item */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    
}

.feature-icon img,
.feature-icon i {
    /* Ikon/Gambar itu sendiri */
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f0f0; /* Latar belakang ikon abu-abu ringan */
    color: #2BB04D; /* Warna brand untuk ikon */
    border-radius: 10px; /* Sudut sedikit membulat (bukan 50px) */
    font-size: 24px;
    transition: all 0.4s ease;
    box-shadow: none; /* Hilangkan shadow ganda */
    padding: 0; /* Hilangkan padding berlebihan */
}

.feature-icon i {
    background: #2BB04D; /* Latar belakang ikon warna brand */
    color: #fff; /* Ikon berwarna putih */
}

/* --- Teks Konten (Kanan) --- */
.feature-text {
    /* Membiarkan teks mengisi sisa ruang */
    flex-grow: 1;
    padding: 25px; /* Padding yang lebih besar */
    background: transparent; /* Transparan di atas background .feature-item */
    border: none; /* Hilangkan border */
    transition: all 0.4s ease;
}

.feature-text h4 {
    font-size: 20px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 8px;
    color: #313131; /* Warna teks gelap */
    text-transform: capitalize; /* Lebih modern dari uppercase */
    transition: color 0.4s ease;
}

.feature-text p {
    margin: 0;
    font-size: 15px;
    color: #6c757d; /* Warna teks body abu-abu */
}

/* --- Feature Two (Alternative/Squared Style) --- */
/* Menggunakan kelas feature-two untuk override ke style yang lebih minimalis */
.feature-two .feature-icon img,
.feature-two .feature-icon i {
    border-radius: 50%; /* Menggunakan lingkaran penuh untuk varian ini */
    background: #f0f0f0;
    color: #2BB04D;
}
.feature-two .feature-icon i {
    background: transparent;
    border: 2px solid #2BB04D;
}


/* ----------------------------------------------- */
/* --- HOVER EFFECT (Clean & Interactive) --- */
/* ----------------------------------------------- */

.feature-item:hover {
    transform: translateY(-5px); /* Item melayang naik sedikit */
    box-shadow: 0 15px 30px rgba(43, 176, 77, 0.2); /* Bayangan warna brand yang kuat */
}

/* Hover: Mengubah ikon agar kontras dengan latar belakang teks */
.feature-item:hover .feature-icon i {
    background: #fff;
    color: #2BB04D; 
    box-shadow: 0 0 0 5px rgba(43, 176, 77, 0.2); /* Efek cincin halus */
}

/* Hover: Mengubah latar belakang teks menjadi warna brand */
.feature-item:hover .feature-text {
    background: #2BB04D; 
    color: #fff;
}

.feature-item:hover .feature-text h4,
.feature-item:hover .feature-text p {
    color: #fff; /* Semua teks menjadi putih */
}

/*
===================================================
SERVICES AREA STYLING - MODERN CARD EFFECT
===================================================
*/

/* --- Kontainer Utama --- */
.services-area {
    /* Hanya memastikan ada ruang di atas dan bawah */
    padding-top: 90px;
    padding-bottom: 90px;
    background-color: #f9f9f9; /* Background abu-abu muda untuk kontras */
}

/* --- Headline/Judul --- */
.headline {
    text-align: center;
    margin-bottom: 50px;
}
.headline h2 {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}
.headline h3 {
    font-size: 18px;
    font-weight: 400;
    color: #666;
    margin: 0;
}

/* --- Services Item (The Card) --- */
.services-item {
    background-color: #fff;
    border-radius: 10px; /* Sudut membulat */
    overflow: hidden; /* Penting untuk efek pada gambar */
    margin-bottom: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Bayangan halus saat normal */
    transition: all 0.4s ease-in-out;
}

/* Efek Hover Keren pada Kartu */
.services-item:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Bayangan lebih dalam saat hover */
    transform: translateY(-5px); /* Sedikit terangkat */
}

/* --- Gambar Layanan (Latar Belakang) --- */
.services-photo {
    height: 200px; /* Tinggi yang tegas untuk thumbnail */
    background-size: cover;
    background-position: center center;
    transition: transform 0.4s ease-in-out; /* Tambahkan transisi ke gambar */
}

/* Efek Zoom Ringan pada Gambar saat Hover */
.services-item:hover .services-photo {
    transform: scale(1.05);
}

/* --- Teks Layanan --- */
.services-text {
    padding: 25px;
    text-align: center;
}

.services-text h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.services-text h3 a {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.services-item:hover .services-text h3 a {
    color: #2BB04D; /* Warna brand saat hover */
}

.services-text p {
    font-size: 15px;
    color: #777;
    line-height: 1.6;
    height: 60px; /* Batasi tinggi deskripsi */
    overflow: hidden; /* Sembunyikan jika terlalu panjang */
    margin-bottom: 20px;
}

/* --- Tombol Baca Selengkapnya --- */
.button-bn a {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #2BB04D; /* Warna brand */
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    padding-bottom: 5px;
}

.button-bn a:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #2BB04D;
    bottom: 0;
    left: 0;
    transform: scaleX(0); /* Garis bawah hilang saat normal */
    transform-origin: bottom right;
    transition: transform 0.3s ease;
}

/* Garis bawah muncul dari kiri saat hover */
.services-item:hover .button-bn a:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.button-bn a i {
    margin-left: 5px;
    transition: margin-left 0.3s ease;
}
/* Panah bergerak saat hover */
.services-item:hover .button-bn a i {
    margin-left: 10px; 
}
/*
-------------------------------
Single Service
-------------------------------
*/

/*
-------------------------------
1. SINGLE CAROUSEL NAV (MODERN)
-------------------------------
*/

.single-ser-carousel {
    margin-bottom: 30px;
}

.single-ser-carousel .owl-nav button { /* Menggunakan 'button' lebih spesifik */
    text-align: center;
    font-size: 16px; /* Sedikit lebih kecil */
    position: absolute;
    width: 48px; /* Lebih kotak */
    height: 48px;
    line-height: 48px;
    top: 50%;
    transform: translateY(-50%);
    
    /* Modern Styling */
    border-radius: 50%; /* Bulat sempurna */
    background: rgba(51, 103, 193, 0.9); /* Warna brand dengan sedikit transparansi */
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Shadow lembut */
    transition: all 0.4s ease;
    border: none; /* Pastikan tidak ada border default */
    outline: none;
}

.single-ser-carousel .owl-nav .owl-prev {
    left: 20px; /* Jarak dari tepi ditingkatkan */
}

.single-ser-carousel .owl-nav .owl-next {
    right: 20px; /* Jarak dari tepi ditingkatkan */
}

.single-ser-carousel .owl-nav button:hover {
    background: #313131; /* Warna gelap / hover yang kontras */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25); /* Shadow sedikit lebih dalam */
    transform: translateY(-50%) scale(1.05); /* Efek zoom tipis */
}

/*
-------------------------------
2. SERVICE SIDEBAR (CLEAN & MINIMALIST)
-------------------------------
*/

.service-sidebar {
    margin-top: 30px;
}

.service-sidebar-item {
    margin-top: 25px; /* Margin sedikit dikurangi agar lebih ringkas */
    border: 1px solid #e0e0e0; /* Border lebih tipis dan terang */
    border-radius: 8px; /* Sudut membulat */
    padding: 30px;
}

.service-sidebar-item:first-child {
    margin-top: 0;
}

.service-sidebar-item h3 {
    font-size: 24px; /* Sedikit lebih kecil */
    font-weight: 600; /* Lebih tebal dari 500 */
    margin-bottom: 20px;
}

.service-sidebar-item ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-sidebar-item ul li {
    padding: 10px 0; /* Padding vertikal ditingkatkan untuk readability */
    border-bottom: 1px solid #f0f0f0; /* Garis pemisah halus */
}

.service-sidebar-item ul li:last-child {
    border-bottom: none;
}

.service-sidebar-item ul li a {
    font-family: 'Work Sans', sans-serif;
    display: block; /* Ganti inline-block agar area klik lebih besar */
    text-decoration: none;
    color: #444;
    transition: color 0.3s;
    position: relative;
    padding-left: 15px; /* Jarak untuk ikon baru */
}

.service-sidebar-item ul li a:before {
    /* Mengganti ikon chevron FontAwesome */
    content: '\f054'; /* Ikon 'chevron-right' yang lebih modern */
    font-family: 'Font Awesome 5 Free'; /* Jika menggunakan FontAwesome 5+ */
    font-weight: 900; /* Untuk solid icon */
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    color: #3367c1; /* Warna ikon brand */
    font-size: 10px; /* Ukuran ikon lebih kecil dan halus */
}

.service-sidebar-item ul li a:hover {
    color: #3367c1; /* Hover warna brand */
    padding-left: 20px; /* Efek geser saat hover */
}
/* Efek geser ikon saat hover */
.service-sidebar-item ul li a:hover:before {
    left: 5px;
}

.service-sidebar-item .form-group textarea {
    height: 110px;
}

/*
-------------------------------
3. SERVICE INFO (HEADER)
-------------------------------
*/
.service-info {
    margin-top: 30px;
}

.service-info h2 {
    font-size: 32px; /* Lebih menonjol */
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    color: #313131;
}

.service-info p {
    line-height: 1.7; /* Meningkatkan readability teks */
    color: #555;
    margin-bottom: 15px; /* Tambahkan margin bawah untuk paragraf */
}

.service-info p:last-child {
    margin-bottom: 0;
}


/*
-------------------------------
Counter
-------------------------------
*/
.counterup-area {
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	position: relative;
}

.bg-counterup {
	position: absolute;
	background-color: #3367c1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0.9;
}

.counter-item {
	position: relative;
	text-align: center;
	color: #fff;
	border: 1px solid #fff;
	margin-top: 30px;
	padding: 15px;
	min-height: 225px;
}

.counter-item:before,
.counter-item:after {
	position: absolute;
	content: '';
	width: 50%;
	height: 5px;
	background: #fff;
	transition: all 0.4s;
}

.counter-item:before {
	top: 0;
	right: 0;
}

.counter-item:after {
	bottom: 0;
	left: 0;
}

.counter-item:hover:before {
	right: 50% !important;
}

.counter-item:hover:after {
	left: 50% !important;
}

.counter-item img {
	width: 56px;
	height: 56px;
	margin: 0 auto;
	margin-bottom: 15px;
}
.counter-item i {
	font-size: 56px;
	margin-bottom: 15px;
}

.counter-item h2.counter {
	font-size: 36px;
	font-weight: 700;
	margin-top: 0;
	color: #fff;
}

.counter-item h4 {
	font-size: 20px;
	color: #fff;
	margin: 0;
}


/*
-------------------------------
Portfolio
-------------------------------
*/

.portfolio-menu {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 6px;
}

.portfolio-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.portfolio-menu li {
	cursor: pointer;
	font-size: 18px;
	font-weight: 600;
	font-family: 'Roboto Condensed', sans-serif;
	display: inline-block;
	border-bottom: 1px solid #e1e1e1;
	color: #313131;
	padding: 5px 10px;
	padding-top: 0;
	margin: 0 10px;
	margin-top: 10px;
	position: relative;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.portfolio-menu li:hover {
	color: #3367c1;
}

.portfolio-menu li.filtr-active {
	border-bottom: 1px solid #3367c1;
	color: #3367c1;
}

.portfolio-menu li.filtr-active:before {
	border-color: #3367c1 transparent transparent;
	border-style: solid;
	position: absolute;
	content: "";
	border-width: 6px 6px 0;
	left: 50%;
	margin-left: -6px;
	bottom: -6px;
	text-decoration: none;
}

.portfolio-group {
	border: 1px solid #ededed;
	margin-top: 30px;
}

.portfolio-photo {
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 196px;
	position: relative;
}

.portfolio-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #3367c1;
	visibility: hidden;
	opacity: 0;
	transform: scale(0);
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
}

.portfolio-group:hover .portfolio-bg {
	opacity: 0.7;
	transform: scale(1);
	visibility: visible;
}

.portfolio-table {
	display: table;
	width: 100%;
	height: 100%;
}

.portfolio-icon {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.portfolio-icon a {
	position: relative;
	font-size: 26px;
	color: #fff;
	text-decoration: none;
	z-index: 99;
}

.portfolio-group:hover .portfolio-icon {
	opacity: 1;
	visibility: visible;
}

.portfolio-text {
	text-align: center;
	background: #f5f5f5;
	padding: 20px;
}

.portfolio-text h3 a {
	font-size: 20px;
    font-weight: 700;
	text-decoration: none;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	margin-bottom: 8px;
}

.portfolio-text h3 a:hover {
	color: #3367c1;
}

.portfolio-text p {
	position: relative;
	font-size: 15px;
	border-top: 1px solid #ddd;
	margin: 0;
	padding-top: 8px;
}

.portfolio-text p:before {
	position: absolute;
	content: '';
	left: 0;
	top: -1px;
	width: 0%;
	height: 1px;
	background: #3367c1;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.portfolio-group:hover .portfolio-text p:before {
	width: 100%;
}

.portfolio-text p span {
	margin-right: 8px;
}

.project-page .portfolio-menu {
	margin-top: 0;
	margin-bottom: 5px;
}

.project-page li {
	margin-top: 0;
	margin-bottom: 10px;
}


/*
-------------------------------
Portfolio Details
-------------------------------
*/

.portfolio-carousel {
	overflow: hidden;
	margin-top: 30px;
}

.portfolio-photo-item {
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	height: 370px;
	position: relative;
}

.portfolio-carousel .owl-nav .owl-prev,
.portfolio-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 18px;
	position: absolute;
	top: 50%;
	width: 40px;
	height: 50px;
	line-height: 48px;
	background: #3367c1;
	color: #fff;
	margin-top: -25px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.portfolio-carousel .owl-nav .owl-prev {
	left: 0;
}

.portfolio-carousel .owl-nav .owl-next {
	right: 0;
}

.portfolio-carousel .owl-nav .owl-prev:hover,
.portfolio-carousel .owl-nav .owl-next:hover {
	color: #fff;
	background: #313131;
}

.portfolio-details-text h3 {
	font-size: 26px;
	font-weight: 700;
    text-transform: uppercase;
	margin: 0;
	margin-top: 30px;
}

.portfolio-details-text p {
	margin: 0;
	margin-top: 20px;
}

.portfolio-sidebar {
	margin-top: 30px;
}

.portfolio-details,
.portfolio-form{
    border: 1px solid #ddd;
    padding: 30px;
}

.portfolio-details ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.portfolio-details ul li {
	font-size: 15px;
	font-weight: 400;
	color: #313131;
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: 1px solid #dddddd;
}

.portfolio-details ul li span {
	font-weight: 600;
	color: #3367c1;
	margin-right: 5px;
}


.portfolio-form .form-group textarea {
	height: 110px;
}

.recent-project .portfolio-text {
	background: #fff;
}

.project-carousel .owl-nav .owl-prev,
.project-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 18px;
	position: absolute;
	width: 40px;
	height: 40px;
	line-height: 38px;
	top: 0;
	margin-top: -20px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.project-carousel .owl-nav .owl-prev {
	right: 0;
	margin-right: 40px;
}

.project-carousel .owl-nav .owl-next {
	right: 0;
	margin-right: 0px;
}

.project-carousel .owl-nav .owl-prev:hover,
.project-carousel .owl-nav .owl-next:hover {
	color: #fff;
	background: #313131;
}


/*
-------------------------------
Team
-------------------------------
*/

.team-item {
	overflow: hidden;
	border: 1px solid #ddd;
	margin-top: 30px;
	position: relative;
}

.team-item img {
	width: 100%;
	height: auto;
}

.team-text {
	text-align: center;
	color: #fff;
	background: #3367c1;
	padding: 15px;
    position: relative;
    z-index: 99;
}

.team-text a {
	display: inline-block;
	font-size: 20px;
	font-weight: 700;
    text-transform: uppercase;
	color: #fff;
	margin-bottom: 4px;
	text-decoration: none;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.team-text p {
	margin: 0;
}

.team-social {
	text-align: center;
    position: absolute;
    width: 100%;
    bottom: 20px;
    background: #eef1f5;
    padding: 10px 0;
    visibility: hidden;
    opacity: 0;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.team-social ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.team-social li {
	display: inline-block;
    margin-left: -5px;
}

.team-social li a {
	display: block;
	width: 35px;
	height: 33px;
	line-height: 33px;
	background: #f1f1f1;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #eaeaea;
	text-decoration: none;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.team-social li a:hover {
	color: #fff;
	background: #3367c1;
	border-top: 1px solid #3367c1;
	border-bottom: 1px solid #3367c1;
}

.team-item:hover .team-social {
    bottom: 88px;
	visibility: visible;
    opacity: 1;
}

.team-carousel .owl-nav .owl-prev,
.team-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 18px;
	position: absolute;
	width: 40px;
	height: 40px;
	line-height: 38px;
	top: 0;
	margin-top: -20px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.team-carousel .owl-nav .owl-prev {
	right: 0;
	margin-right: 40px;
}

.team-carousel .owl-nav .owl-next {
	right: 0;
	margin-right: 0px;
}

.team-carousel .owl-nav .owl-prev:hover,
.team-carousel .owl-nav .owl-next:hover {
	color: #fff;
	background: #313131;
}

.team-social-two {
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 85px;
	background: #eef1f5;
	padding: 10px 0;
}

.team-social-two ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.team-social-two ul li {
	display: inline-block;
	margin-left: -5px;
}

.team-social-two ul li a {
	display: block;
	width: 35px;
	height: 33px;
	line-height: 33px;
	background: #f1f1f1;
	border-left: 1px solid #fff;
	border-right: 1px solid #eaeaea;
	text-decoration: none;
}

.team-social-two ul li:first-child a {
	border-left: 1px solid #eaeaea;
}

.team-social-two li a:hover {
	color: #fff;
	background: #3367c1;
	border-left: 1px solid #3367c1;
	border-right: 1px solid #3367c1;
}


/*
-------------------------------
Team Details
-------------------------------
*/

.team-detail-photo {
	margin-top: 30px;
}

.team-detail-text {
	margin-top: 30px;
}

.team-detail-text h4 {
	font-size: 26px;
	font-weight: 700;
	margin-bottom: 7px;
}

.team-detail-text p {
	margin-top: 20px;
}

.team-detail-text ul {
	list-style: none;
	margin: 0;
	margin-top: 15px;
	padding: 0;
}

.team-detail-text ul li {
	text-align: center;
	display: inline-block;
	margin-right: 7px;
	margin-top: 5px;
}

.team-detail-text ul li:last-child {
	margin-right: 0;
}

.team-detail-text ul li a {
	display: block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
}

.team-detail-text ul li a:hover {
	background: #313131;
	color: #fff;
}

.team-info {
	background: #f5f5f5;
	border: 1px solid #e1e1e1;
	padding: 30px;
	margin-top: 30px;
}

.team-info ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.team-info ul li {
	padding-bottom: 5px;
}

.team-info ul li span {
	color: #3367c1;
	margin-right: 10px;
}

.team-skill {
	background: #f5f5f5;
	border: 1px solid #e1e1e1;
	padding: 30px;
	margin-top: 30px;
}

.team-skill ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.team-skill ul li {
	position: relative;
	padding-left: 20px;
	padding-bottom: 5px;
}

.team-skill ul li:before {
	content: '\f14a';
	font-family: FontAwesome;
	position: absolute;
	top: 0;
	left: 0;
	color: #3367c1;
}
/*
===================================================
PRICING TABLE STYLING - MODERN CARD DESIGN
===================================================
*/

/* --- Base Card Container --- */
.pricing-item {
    text-align: center;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e1e1e1; /* Border halus */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-top: 30px;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.pricing-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* --- Plan Title --- */
.pricing-title h3 {
    font-size: 24px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--color-text-dark);
    text-transform: capitalize;
}
.pricing-title p {
    font-size: 15px;
    color: var(--color-text-soft);
    margin-bottom: 20px;
}

/* --- Price Block --- */
.pricing-price {
    margin-bottom: 25px;
    padding: 15px 0;
    background: #f9f9f9;
    border-radius: 8px;
    border-bottom: 2px solid #e1e1e1;
}
.pricing-price h2 {
    font-size: 48px;
    font-weight: 800;
    color: var(--color-brand-dark);
    margin: 0;
    line-height: 1.2;
}
.pricing-price h2 span {
    font-size: 20px;
    font-weight: 600;
    position: relative;
    top: -20px;
    margin-right: 5px;
}
.pricing-price h2 small {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-soft);
}

/* --- Feature List --- */
.pricing-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 30px;
}
.pricing-list ul li {
    font-size: 16px;
    color: var(--color-text-dark);
    padding: 10px 0;
    border-bottom: 1px dashed #e1e1e1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pricing-list ul li:last-child {
    border-bottom: none;
}
.pricing-list ul li i {
    color: var(--color-brand);
    margin-right: 8px;
    font-size: 16px;
}

/* --- CTA Button --- */
.pricing-btn a {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 12px 30px;
    border-radius: 50px;
    background: #fff;
    color: var(--color-brand);
    border: 2px solid var(--color-brand);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    text-decoration: none;
}
.pricing-btn a:hover {
    background: var(--color-brand);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(43, 176, 77, 0.4);
}

/*
--- Highlighted/Featured Plan (The Cool Part) ---
*/
.pricing-item.featured {
    transform: scale(1.05); /* Sedikit membesar */
    border: 2px solid var(--color-brand);
    box-shadow: 0 15px 40px rgba(43, 176, 77, 0.3);
    background: #fff;
    z-index: 10;
}
.pricing-item.featured:hover {
    transform: scale(1.08) translateY(-5px);
    box-shadow: 0 20px 50px rgba(43, 176, 77, 0.5);
}

.pricing-item.featured .pricing-title h3 {
    color: var(--color-brand-dark);
}

.pricing-item.featured .pricing-price {
    background: var(--color-brand);
    border-bottom: 2px solid var(--color-brand-dark);
}
.pricing-item.featured .pricing-price h2 {
    color: #fff;
}
.pricing-item.featured .pricing-price small {
    color: #e0ffe9;
}
.pricing-item.featured .pricing-list ul li i {
    color: var(--color-brand-dark);
    /* Gunakan warna putih pada list jika background fitur berwarna */
}

/* Optional: Tambahkan pita "Populer" */
.pricing-item.featured:before {
    content: "POPULAR";
    position: absolute;
    top: 20px;
    right: -30px;
    background: #dc3545; /* Merah untuk menarik perhatian */
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 30px;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/*
-------------------------------
PRICE-PAGE (Tampilan di Halaman Harga)
-------------------------------
*/

.price-page .price-item {
    border: 1px solid #e1e1e1; /* Mempertahankan border di halaman harga */
    background: #fbfbfb; /* Background lebih terang */
    box-shadow: none; /* Hilangkan shadow default agar terlihat rata */
}

/* Membuat item unggulan menonjol di Price Page */
.price-page .price-item.featured { 
    background: #fff; 
    border-color: #3367c1; /* Border warna brand */
    transform: scale(1.05); /* Menonjol sedikit */
    box-shadow: 0 15px 40px rgba(51, 103, 193, 0.2); /* Shadow warna brand */
}

.price-page .price-item.featured .price-header h2 {
    color: #313131; /* Harga menjadi warna teks utama */
}


/*
-------------------------------
Testimonial
-------------------------------
*/

.testimonial-area {
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
}

.bg-testimonial {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* BIRU #3367c1 diubah menjadi HIJAU BRAND #2BB04D */
    background: #2BB04D;
    opacity: 0.8;
}

.testimonial-item {
    text-align: center;
    color: #fff;
    border: 1px solid #fff;
    padding: 30px;
}

.testimonial-description {
    margin: 0 auto;
}

.testimonial-description p {
    position: relative;
    padding-top: 15px;
    margin-top: 15px;
    margin-bottom: 0;
}

.testimonial-description p:before {
    position: absolute;
    content: '';
    width: 120px;
    height: 3px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    background: #fff;
}

.testimonial-photo {
    width: 95px;
    height: 95px;
    margin: 0 auto;
}

.testimonial-photo img {
    width: 100%;
    height: auto;
}

.testimonial-name {
    margin-top: 15px;
}

.testimonial-name h4 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.testimonial-name p {
    font-size: 15px;
    margin: 0;
}

/* --- OWL DOTS (NAVIGASI BAWAH) --- */
.testimonial-carousel .owl-dots {
    text-align: center;
    margin-top: 30px;
}

.testimonial-carousel .owl-dots .owl-dot {
    width: 24px;
    height: 24px;
    /* BIRU #3367c1 diubah menjadi HIJAU BRAND #2BB04D */
    background: #2BB04D;
    border: 7px solid #fff;
    border-radius: 50%;
    display: inline-block;
    margin: 0 5px;
}

.testimonial-carousel .owl-dots .owl-dot.active {
    width: 24px;
    height: 24px;
    /* ABU-ABU GELAP #313131 diubah menjadi ABU-ABU #444444 */
    background: #444444;
    border: 7px solid #fff;
}

/* --- OWL NAV (PANAH SAMPING) UNTUK TIPE 1 --- */
.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    text-align: center;
    font-size: 18px;
    position: absolute;
    top: 50%;
    width: 40px;
    height: 50px;
    line-height: 48px;
    background: #fff;
    /* BIRU #3367c1 diubah menjadi HIJAU BRAND #2BB04D */
    color: #2BB04D;
    margin-top: -25px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

.testimonial-carousel .owl-nav .owl-prev {
    left: 0;
}

.testimonial-carousel .owl-nav .owl-next {
    right: 0;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    /* BIRU #3367c1 diubah menjadi HIJAU BRAND #2BB04D */
    color: #2BB04D;
    background: #fff;
}

/* --- TIPE 2 (GRID / TWO CAROUSEL) --- */
.testimonial-grid .testimonial-item,
.testimonial-two-carousel .testimonial-item {
    /* ABU-ABU GELAP #313131 diubah menjadi ABU-ABU #444444 */
    color: #444444;
    background: #f5f5f5;
    border: 1px solid #e1e1e1;
    padding: 30px;
}

.testimonial-grid .testimonial-description,
.testimonial-two-carousel .testimonial-description {
    width: 100%;
}

.testimonial-grid .testimonial-description p,
.testimonial-two-carousel .testimonial-description p {
    padding-top: 15px;
    padding-bottom: 0;
    margin-top: 15px;
    margin-bottom: 0;
}

.testimonial-grid .testimonial-description p:before,
.testimonial-two-carousel .testimonial-description p:before {
    bottom: 100%;
    /* BIRU #3367c1 diubah menjadi HIJAU BRAND #2BB04D */
    background: #2BB04D;
}

.testimonial-grid .testimonial-name h4,
.testimonial-two-carousel .testimonial-name h4 {
    /* ABU-ABU GELAP #313131 diubah menjadi ABU-ABU #444444 */
    color: #444444;
}

/* --- OWL NAV (PANAH SAMPING) UNTUK TIPE 2 --- */
.testimonial-two-carousel .owl-nav .owl-prev,
.testimonial-two-carousel .owl-nav .owl-next {
    text-align: center;
    font-size: 18px;
    position: absolute;
    top: 50%;
    width: 40px;
    height: 50px;
    line-height: 48px;
    /* BIRU #3367c1 diubah menjadi HIJAU BRAND #2BB04D */
    background: #2BB04D;
    color: #fff;
    margin-top: -25px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

.testimonial-two-carousel .owl-nav .owl-prev {
    left: 0;
}

.testimonial-two-carousel .owl-nav .owl-next {
    right: 0;
}

.testimonial-two-carousel .owl-nav .owl-prev:hover,
.testimonial-two-carousel .owl-nav .owl-next:hover {
    color: #fff;
    /* ABU-ABU GELAP #313131 diubah menjadi ABU-ABU #444444 */
    background: #444444;
}

/*
-------------------------------
Booking
-------------------------------
*/

/*
-------------------------------
BOOKING AREA - PREMIUM & FOCUSED
-------------------------------
*/

.booking-area {
    background-size: cover;
    background-position: center center; /* Lebih baik center center */
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    overflow: hidden; /* Mengamankan konten agar tidak keluar dari area */
}

/* Overlay Warna Brand (Left Half) */
.booking-area:before {
    position: absolute;
    content: '';
    width: 55%; /* Sedikit diperluas */
    height: 100%;
    top: 0;
    left: 0;
    background: #3367c1;
    opacity: 0.9; /* Opacity ditingkatkan untuk kontras yang lebih baik */
}

/* Background Overlay Umum (Jika ada) */
.bg-booking {
    position: absolute;
    background-color: #3367c1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.1; /* Opacity dikurangi agar tidak terlalu mendominasi */
}

.booking-gallery {
    position: relative;
    padding-right: 30px;
    z-index: 998;
    margin-top: 30px
}

/*
-------------------------------
BOOKING FORM - TRANSPARANT & ELEGANT (TEXT HITAM)
-------------------------------
*/

/* --- INPUTS: Transparan dengan teks HITAM --- */
.booking-form input,
.booking-form select,
.booking-form textarea {
    /* Background tetap semi-transparan, tapi kini lebih terang */
    background-color: rgba(255, 255, 255, 0.7) !important; 
    color: #000 !important; 
    border: 1px solid rgba(0, 0, 0, 0.4) !important;
    border-radius: 8px !important;
    padding: 12px 18px !important;
    transition: all 0.3s ease;
}

/* Penyesuaian focus agar garis tepi tetap menonjol */
.booking-form input:focus,
.booking-form textarea:focus,
.booking-form select:focus {
    border-color: #000 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2); 
}

.form-button {
    margin-top: 25px;
}
.form-button .btn {
    font-weight: 700;
    letter-spacing: 1px; 
    width: 100%;
    /* Tombol utama HIJAU BRAND */
    background: #2BB04D; 
    color: #fff; /* Teks tombol tetap putih */
    padding: 14px 18px;
    border-radius: 8px; 
    border: 2px solid #2BB04D; 
    box-shadow: 0 8px 20px rgba(43, 176, 77, 0.5); 
    transition: all 0.3s ease;
}

.form-button .btn:hover {
    background: #1e8e3e;
    border-color: #1e8e3e;
    color: #fff;
    transform: translateY(-2px); 
    box-shadow: 0 10px 25px rgba(43, 176, 77, 0.7);
}

/*
-------------------------------
Blog
-------------------------------
*/
.blog-item {
	border: 1px solid #f5f5f5;
	margin-top: 30px;
}

.blog-image {
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	height: 196px;
}

.blog-text {
	background: #f5f5f5;
	padding: 20px;
}

.blog-item h3 a {
	font-size: 26px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	margin-bottom: 8px;
}

.blog-item h3 a:hover {
	color: #3367c1;
}

.blog-item span {
	display: block;
	font-size: 15px;
}

.blog-item span i {
	margin-right: 5px;
	color: #3367c1;
}

.blog-item p {
	margin-top: 15px;
	margin-bottom: 5px;
}

.blog-author {
	overflow: hidden;
	background: #e6e6e6;
}

.blog-author ul {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-left: 5px;
}

.blog-author li {
	display: inline-block;
}

.blog-author li a {
	display: inline-block;
	font-size: 15px;
	font-weight: 700;
	padding: 15px 10px;
	text-decoration: none;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.blog-author li a i {
	margin-right: 5px;
	color: #3367c1;
}

.blog-author li a:hover {
	color: #3367c1;
}

.blog-author li.blog-button {
	background: #3367c1;
	float: right;
}

.blog-author li.blog-button a {
	background: #3367c1;
	padding: 15px 30px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.blog-author li.blog-button i {
	color: #fff;
	margin: 0;
}

.blog-author li.blog-button a:hover {
	background: #313131;
}

.blog-carousel .owl-nav .owl-prev,
.blog-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 16px;
	position: absolute;
	width: 40px;
	height: 40px;
	line-height: 38px;
	top: 0;
	margin-top: -20px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.blog-carousel .owl-nav .owl-prev {
	right: 0;
	margin-right: 40px;
}

.blog-carousel .owl-nav .owl-next {
	right: 0;
	margin-right: 0px;
}

.blog-carousel .owl-nav .owl-prev:hover,
.blog-carousel .owl-nav .owl-next:hover {
	color: #fff;
	background: #313131;
}

.blog-one-item {
	margin-top: 30px;
}

.blog-one-item img {
	width: 100%!important;
}

.blog-one-text {
	margin-top: 20px;
}

.blog-one-text ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.blog-one-text ul li {
	display: inline-block;
	margin-right: 15px;
	margin-bottom: 5px;
}

.blog-one-text ul li:last-child {
	margin-right: 0;
}

.blog-one-text ul li a {
    font-family: 'Work Sans', sans-serif;
	text-decoration: none;
}

.blog-one-text ul li i {
	color: #3367c1;
	margin-right: 5px;
}
.blog-one-text h3{
    margin-bottom: 15px;
}
.blog-one-text h3 a {
	font-size: 28px;
	font-weight: 700;
	text-decoration: none;
    display: inline-block;
	margin-top: 15px;
}

.blog-one-text h3 a:hover {
	color: #3367c1;
}

.blog-one-text p {
	margin-bottom: 20px;
}

/*
-------------------------------
Sidebar
-------------------------------
*/
/*
===================================================
SIDEBAR STYLING - MODERN CARD & CLEAN TYPOGRAPHY
===================================================
*/

.sidebar {
    margin-top: 30px;
}

/* --- Sidebar Item Card --- */
.sidebar-item {
    margin-top: 35px; /* Jarak antar item sedikit dilebarkan */
    /* Menghilangkan border dan mengganti dengan soft card shadow */
    border: none;
    background: #ffffff;
    padding: 30px;
    border-radius: 10px; /* Sudut membulat */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Bayangan yang halus */
    transition: box-shadow 0.3s ease;
}
.sidebar-item:first-child {
    margin-top: 0;
}

/* --- Heading (Widget Title) --- */
.sidebar-item h3 {
    display: block; /* Judul mengisi lebar penuh */
    position: relative;
    font-size: 24px; /* Lebih besar dan menonjol */
    font-weight: 700;
    text-transform: capitalize; /* Lebih modern daripada uppercase */
    padding-bottom: 10px;
    margin-bottom: 25px;
    color: #313131;
}

/* Menghilangkan garis ganda, hanya menyisakan satu garis tebal sebagai aksen */
.sidebar-item h3:before {
    position: absolute;
    content: '';
    width: 40px; /* Hanya garis pendek sebagai aksen */
    height: 4px; /* Lebih tebal */
    background: #2BB04D; /* Warna brand */
    left: 0;
    bottom: 0;
    border-radius: 2px;
}
.sidebar-item h3:after {
    /* Hapus garis kedua yang tebal */
    content: none;
}

/* --- Input & Button Styling (Search/Newsletter) --- */
.sidebar-item input {
    width: 100%;
    font-size: 16px;
    height: 45px; /* Sedikit lebih tinggi */
    border: 1px solid #e1e1e1;
    border-radius: 8px; /* Sudut membulat */
    padding: 10px 15px;
    margin-bottom: 10px;
    transition: border-color 0.3s ease;
}
.sidebar-item input:focus {
    border-color: #2BB04D; /* Fokus input dengan warna brand */
    outline: none;
}

.sidebar-item button {
    width: 100%;
    height: 45px;
    font-size: 16px;
    background: #2BB04D; /* Warna brand */
    border: 1px solid #2BB04D;
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    transition: background 0.3s, border-color 0.3s;
}

.sidebar-item button:hover {
    background: #1e8e3e;
    border-color: #1e8e3e;
    cursor: pointer;
}

/* --- List Styling (Categories/Menu) --- */
.sidebar-item ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-item ul li {
    padding: 10px 0; /* Padding lebih lega */
    border-bottom: 1px solid #f0f0f0; /* Garis pemisah halus */
}
.sidebar-item ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.sidebar-item ul li:first-child {
    padding-top: 0;
}

.sidebar-item ul li a {
    display: flex; /* Menggunakan flex untuk ikon dan teks */
    align-items: center;
    text-decoration: none;
    padding-left: 0; /* Menghapus padding lama */
    color: #6c757d;
    transition: color 0.3s;
}

.sidebar-item ul li a:before {
    /* Mengubah ikon panah menjadi titik atau ikon yang lebih modern */
    content: '\f105'; /* Menggunakan angle-right (ikon yang umum digunakan) */
    font-family: 'Font Awesome 5 Free'; /* Jika menggunakan FA5 */
    font-weight: 900;
    position: static; /* Mengubah posisi agar sejajar dengan flex */
    color: #2BB04D; /* Warna brand untuk ikon */
    margin-right: 8px;
    transition: transform 0.3s ease;
}

.sidebar-item ul li a:hover {
    color: #2BB04D;
}
.sidebar-item ul li a:hover:before {
    transform: translateX(3px); /* Ikon bergerak sedikit saat hover */
}


/* --- Recent Posts (Recent-item) - Menggunakan Flexbox --- */
.sidebar-recent-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.recent-photo {
    flex-shrink: 0;
    width: 80px; /* Lebar thumbnail yang ringkas */
    padding-right: 15px; /* Jarak antara foto dan teks */
}

.recent-photo img {
    width: 100%;
    height: 80px; /* Tinggi tetap untuk konsistensi */
    object-fit: cover;
    border-radius: 6px;
}

.recent-text {
    flex-grow: 1;
    padding-left: 0;
}

.recent-text a {
    display: block;
    margin-bottom: 5px;
    text-decoration: none;
    font-weight: 500;
    line-height: 1.4;
    color: #313131;
    transition: color 0.3s;
}

.recent-text a:hover {
    color: #2BB04D;
}

.rpwwt-post-date {
    position: relative;
    font-size: 14px;
    color: #999;
    padding-left: 18px;
    margin-top: 5px;
}

.rpwwt-post-date:before {
    position: absolute;
    content: '\f073'; /* Ikon kalender */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    left: 0;
    top: 0;
    color: #b7b7b7;
}

/* --- Tag Cloud --- */
.tagcloud a {
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    border: 1px solid #e1e1e1;
    padding: 8px 15px;
    margin-right: 7px;
    margin-bottom: 8px;
    border-radius: 4px;
    text-decoration: none;
    color: #313131;
    transition: all 0.3s;
}

.tagcloud a:hover {
    color: #fff;
    background: #2BB04D;
    border-color: #2BB04D;
}


/*
-------------------------------
Pagination
-------------------------------
*/
.pagination a:hover {
	text-decoration: none;
}


/*
-------------------------------
Blog Single
-------------------------------
*/

.single-blog {
	margin-top: 30px;
}

.single-blog img {
	margin-bottom: 30px;
}

.single-blog h3 {
	font-size: 24px;
    text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 15px;
}

.single-blog ul {
	list-style: none;
	margin: 0;
	padding: 0
}

.single-blog ul li {
	display: inline-block;
	margin-top: 2px;
	margin-right: 15px;
	font-size: 14px;
	font-family: 'Work Sans', sans-serif;
}

.single-blog ul li i {
	color: #3367c1;
	margin-right: 5px;
}

.single-blog ul li a {
	text-decoration: none;
	font-size: 14px;
	font-family: 'Work Sans', sans-serif;
}

.single-blog p {
	margin: 0;
	margin-top: 15px;
}

.comment-form span {
	font-size: 16px;
	color: #3367c1;
}

.comment-form textarea {
	height: 220px;
}

.comment-form .btn {
	cursor: pointer;
	display: inline-block;
	font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
	padding: 14px 30px;
	border: 1px solid #3367c1;
	background: #3367c1;
	color: #fff;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.comment-form .btn:hover {
	color: #fff;
	background: #313131;
	border: 1px solid #313131;
}

.comment-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list ul li {
	border-bottom: 1px solid #ddd;
	padding-bottom: 30px;
	margin-bottom: 30px;
}

.comment-list ul li:last-child {
	border: 0;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.comment-list .comment-item {
	overflow: hidden;
	display: table;
	width: 100%;
}

.comment-list .thumb {
	display: table-cell;
	vertical-align: top;
	width: 80px;
}

.comment-list .com-text {
	display: table-cell;
	vertical-align: top;
	padding: 0 15px;
}

.comment-list .com-text h5 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 7px;
}

.comment-list .com-text span.date {
	margin-right: 30px;
	font-size: 14px;
}

.comment-list .com-text span.date i {
	color: #3367c1;
	margin-right: 3px;
}

.comment-list .com-text span a {
	display: inline-block;
    text-decoration: none;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
	padding: 5px 10px;
	background: #3367c1;
	color: #fff;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.comment-list .com-text span a:hover {
	background: #313131;
	color: #fff;
}

.comment-list .com-text p {
	margin-top: 12px;
	margin-bottom: 0;
}

.comment-list ul ul.children {
	margin-top: 20px;
	margin-left: 40px;
}

.comment-list ul ul.children li {
	border: 0;
	padding-bottom: 0px;
	margin-bottom: 0px;
	margin-top: 40px;
}


/*
-------------------------------
Brand
-------------------------------
*/

.brand-item img {
	max-width: 100%;
	height: auto;
}


/*
-------------------------------
Call To Action
-------------------------------
*/

.call-us {
	position: relative;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding-top: 55px;
    padding-bottom: 70px;
}
.call-us:before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #3367c1;
    opacity: 0.8;
}
.call-text {
	margin-top: 33px;
}

.call-text h3 {
	font-size: 24px;
    font-weight: 500;
    color: #fff;
	margin: 0;
}

.call-us .button {
	margin-top: 15px;
}

.call-us .button a {
	font-size: 18px;
    text-transform: uppercase;
	background: #313131;
	border: 0;
	padding: 17px 30px;
}

.call-us .button a:hover {
	color: #313131;
	background: #fff;
}

/*
-------------------------------
Footer
-------------------------------
*/

/*
===================================================
FOOTER AREA STYLING - MODERN & PREMIUM
===================================================
*/
.footer-area {
    /* Ganti background menjadi warna abu-abu yang lebih dalam dan elegan */
    background: #f7f7f7; 
    padding: 70px 0 0; /* Tambahkan padding atas yang lega */
    position: relative;
}

.footer-item {
    color: #4a4a4a; /* Warna teks yang lebih lembut */
    margin-top: 30px;
}

/* --- Heading (Widget Title) --- */
.footer-item h3 {
    display: block;
    position: relative;
    font-size: 24px; /* Judul sedikit lebih besar */
    font-weight: 700;
    text-transform: capitalize; /* Lebih modern daripada uppercase */
    color: #313131;
    padding-bottom: 15px; /* Jarak bawah yang bersih */
    margin-bottom: 30px;
}

/* Mengganti garis ganda dengan satu garis aksen yang tebal */
.footer-item h3:before {
    position: absolute;
    content: '';
    width: 45px; /* Garis pendek sebagai aksen utama */
    height: 4px; 
    background: #2BB04D; /* Warna brand */
    left: 0;
    bottom: 0;
    border-radius: 2px;
}
.footer-item h3:after {
    content: none; /* Hilangkan garis kedua */
}

/* --- Navigasi Link List --- */
.footer-item ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-item ul li {
    display: block;
    margin-bottom: 10px; /* Jarak vertikal yang lebih lega */
}

.footer-item ul li a {
    position: relative;
    display: inline-flex; /* Menggunakan flex untuk ikon */
    align-items: center;
    color: #4a4a4a;
    padding-left: 0; /* Ikon berada di awal, jadi padding-left tidak diperlukan */
    transition: all 0.3s;
}

.footer-item ul li a:before {
    position: static; /* Ikon menjadi bagian dari alur teks */
    content: '\f105'; /* Menggunakan angle-right (ikon yang umum) */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #2BB04D; /* Warna brand untuk ikon */
    margin-right: 8px;
    transition: transform 0.3s ease;
}

.footer-item ul li a:hover {
    color: #2BB04D; /* Hover warna brand */
    transform: translateX(3px); /* Efek pergeseran ringan */
}

.footer-item ul li a:hover:before {
    transform: none; /* Jangan dobel transform pada ikon */
}


/* --- Kontak & Alamat --- */
.footer-item p,
.footer-item a {
    text-decoration: none;
    color: #4a4a4a;
}
.footer-address-item {
    position: relative;
    padding-left: 35px; /* Ruang lebih untuk ikon */
    margin-bottom: 18px; /* Jarak vertikal lebih lebar */
}

.footer-address-item .icon {
    position: absolute;
    top: 3px;
    left: 0;
    font-size: 18px;
    color: #2BB04D; /* Warna brand untuk ikon kontak */
}

.footer-address-item .text {
    font-size: 16px;
    line-height: 1.5;
}


/* --- Form Newsletter (Input Group) --- */
.footer-item .input-group {
    margin-top: 25px;
}
.footer-item .form-control {
    font-size: 16px;
    height: 50px; /* Lebih tinggi untuk area klik yang baik */
    border: 1px solid #ddd; /* Lebih halus dari 2px solid */
    border-radius: 6px 0 0 6px; /* Sudut membulat hanya di kiri */
    z-index: 1 !important;
    padding: 10px 15px;
}

.footer-item .btn {
    cursor: pointer;
    font-size: 16px;
    height: 50px;
    padding: 0 25px;
    border: 1px solid #2BB04D;
    background: #2BB04D; /* Warna brand */
    color: #fff;
    border-radius: 0 6px 6px 0; /* Sudut membulat hanya di kanan */
    z-index: 2 !important;
    transition: all 0.3s;
}
.footer-item .btn:hover {
    background: #1e8e3e;
    border-color: #1e8e3e;
}


/* --- Recent Posts (Menggunakan Flexbox) --- */
.footer-recent-item {
    /* Mengganti display: table dengan Flexbox */
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.footer-recent-photo {
    flex-shrink: 0;
    width: 80px;
    padding-right: 15px;
}

.footer-recent-photo img {
    width: 100%;
    height: 80px; /* Tinggi tetap */
    object-fit: cover;
    border-radius: 6px; /* Sudut membulat */
}

.footer-recent-text {
    flex-grow: 1;
    padding-left: 0;
}

.footer-recent-text a {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    line-height: 1.4;
    color: #313131;
    transition: color 0.3s;
}

.footer-recent-text a:hover {
    color: #2BB04D;
}

.footer-post-date {
    font-size: 14px;
    color: #999;
}

.footer-post-date:before {
    color: #999;
}


.footer-social {
    /* Menghapus bullet default list */
    list-style: none;
    padding: 0;
    margin: 0; 
    
    /* PENTING: Mengaktifkan Flexbox untuk menyusun item secara horizontal */
    display: flex;
    
    /* Mengatur jarak antara ikon secara otomatis */
    justify-content: flex-start; /* Atau center jika ingin di tengah */
    align-items: center;
}

.footer-social li {
    /* Memberi sedikit jarak antar ikon */
    margin-right: 15px; 
}
footer-social li a {
    /* Properti Flexbox untuk penempatan di tengah */
    display: flex;
    justify-content: center; /* Menengahkan secara horizontal */
    align-items: center;     /* Menengahkan secara vertikal */
    
    /* Properti Tampilan Kotak Ikon */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    
    /* Hapus line-height yang lama karena sudah digantikan oleh align-items: center */
    /* line-height: 40px; */ 
    
    /* ... (properti gaya lain seperti warna dan transisi) ... */
    color: #fff;
    background-color: #2BB04D; 
    transition: all 0.3s ease;
}

/* Jika ikon (<i>) terlalu besar atau kecil, atur ukurannya di sini */
.footer-social li a i {
    font-size: 18px; /* Contoh: Ukuran ikon yang pas */
}
/* Penyesuaian ikon itu sendiri (jika diperlukan) */
.footer-social li a {
    /* Gaya untuk link ikon */
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px; /* Untuk menengahkan ikon secara vertikal */
    text-align: center;
    border-radius: 50%;
    /* Contoh warna: Ikon putih dengan background hijau brand */
    color: #fff;
    background-color: #2BB04D; 
    transition: all 0.3s ease;
}

.footer-social li a:hover {
    /* Efek hover */
    background-color: #1e8e3e;
    transform: translateY(-2px);
}

/*
-------------------------------
FOOTER BOTTOM - COPRAYRIGHT AREA
-------------------------------
*/

.footer-bottom {
    background: #313131; /* Abu-abu gelap (kontras) */
    padding: 20px 0; /* Padding yang ringkas */
    text-align: center;
}

.footer-menu {
    border-bottom: none; /* Hapus garis pemisah di atas menu */
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.footer-menu ul li {
    margin: 0px 15px;
    padding-bottom: 0;
}

.footer-menu ul li a {
    font-size: 14px;
    color: #999; /* Warna teks lebih lembut */
    transition: color 0.3s;
}

.footer-menu ul li a:hover {
    color: #2BB04D; /* Warna brand saat hover */
}

.copy-text p {
    font-size: 14px;
    color: #999;
    margin: 0;
}

.copy-text a {
    color: #2BB04D;
    font-weight: 600;
}


/*
===================================================
PENYESUAIAN KHUSUS BANNER/SLIDER UNTUK TAMPILAN ELEGAN
===================================================
*/

/* --- Area Slider/Banner --- */
.banner-area {
    /* Pastikan slider memenuhi layar atau memiliki tinggi yang tegas */
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center; /* Konten di tengah vertikal */
}

/* --- Teks Slider Umum (Judul dan Subjudul) --- */
.slider-text h1 {
    font-size: 68px; /* Judul yang besar dan berani */
    font-weight: 800;
    color: var(--white-color);
    line-height: 1.1;
    margin-bottom: 20px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4); /* Shadow tipis untuk keterbacaan */
}

.slider-text h3 {
    font-size: 24px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9); /* Sedikit transparan */
    margin-bottom: 40px;
}

/* --- Text Animated (Jika digunakan untuk CTA di Slider) --- */
.text-animated li a {
    /* Tombol utama di slider dibuat lebih besar dan mewah */
    font-size: 18px;
    font-weight: 700;
    padding: 15px 35px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

/* Tombol Aksen (Diisi Warna Tema) */
.text-animated li:first-child a {
    background: var(--theme-color);
    color: var(--white-color);
    border: 2px solid var(--theme-color);
}

.text-animated li:first-child a:hover {
    background: var(--secondary-dark);
    border-color: var(--secondary-dark);
    color: var(--white-color);
}

/* Tombol Sekunder (Garis Tepi) */
.text-animated li:last-child a {
    background: transparent; /* Latar belakang transparan */
    color: var(--white-color); /* Teks putih */
    border: 2px solid var(--white-color); /* Garis tepi putih */
}

.text-animated li:last-child a:hover {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: var(--white-color);
}

/* --- Navigasi Slider (Panah Kiri/Kanan) --- */
.slider-one .owl-nav .owl-prev, 
.slider-one .owl-nav .owl-next {
    /* Panah di luar layar untuk tampilan elegan, atau didesain ulang */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    opacity: 0.8;
    transition: all 0.3s ease;
    background: var(--theme-color); /* Latar belakang warna tema */
    color: var(--white-color); /* Ikon putih */
}

.slider-one .owl-nav .owl-prev:hover, 
.slider-one .owl-nav .owl-next:hover {
    opacity: 1;
    background: var(--secondary-dark); /* Hover ke warna gelap sekunder */
    color: var(--white-color);
}

/* --- Titik Navigasi (Dots) --- */
.slider-one .owl-dots {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

.slider-one .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: rgba(255, 255, 255, 0.5); /* Titik default transparan */
    display: block;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.slider-one .owl-dots .owl-dot.active span {
    width: 12px;
    height: 12px;
    background: var(--theme-color); /* Titik aktif menggunakan warna tema */
}
/*
-------------------------------
Scroll To Top
-------------------------------
*/

.scroll-top {
	cursor: pointer;
	text-align: center;
	font-size: 22px;
	position: fixed;
	width: 50px;
	height: 50px;
	line-height: 46px;
	bottom: 20px;
	right: 20px;
	background: #3367c1;
	color: #fff;
	opacity: 0.7;
	z-index: 9999;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.scroll-top:hover {
	opacity: 1;
	color: #fff;
	background: #313131;
}

/*
-------------------------------
Event
-------------------------------
*/

.event-item {
	border: 1px solid #ddd;
	background: #f1f1f1;
	padding: 30px;
	padding-top: 15px;
	margin-top: 30px;
}

.event-photo {
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 175px;
	margin-top: 15px;
}

.event-body {
	margin-top: 15px;
}

.event-header {
	overflow: hidden;
	margin-bottom: 15px;
	display: table;
	width: 100%;
}

.event-header ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

li.event-header-left {
	float: left;
	vertical-align: top;
	display: table-cell;
	width: 100%;
	padding-right: 10px;
}

li.event-header-left h4 {
	font-size: 22px;
    font-weight: 700;
	margin-bottom: 5px;
}

li.event-header-left span {
	margin-right: 15px;
}

li.event-header-left span:last-child {
	margin-right: 0;
}

li.event-header-left i {
	color: #3367c1;
	margin-right: 4px;
}

li.event-header-right {
	float: right;
	vertical-align: top;
	display: table-cell;
}

li.event-header-right h5 {
	font-size: 16px;
    font-family: 'Work Sans', sans-serif;
	margin-bottom: 2px;
}

li.event-header-right span {
	color: #3367c1;
	font-size: 26px;
	font-weight: 700;
}

li.event-header-right p {
	font-size: 18px;
    font-weight: 700;
	margin: 0;
}

.event-content .button a {
	padding: 12px 20px;
}

/*
-------------------------------
Event Detail
-------------------------------
*/

.event-detail-content {
	margin-top: 30px;
}

.event-contact-item {
	text-align: center;
	background: #3367c1;
    color: #fff;
	padding: 30px 5px;
	margin-top: 30px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.event-contact-icon {
	width: 50px;
	height: 50px;
	line-height: 50px;
    color: #fff;
	border: 1px solid #fff;
	margin: 0 auto;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.event-contact-icon img {
	width: 25px;
	height: 25px;
}
.event-contact-icon i {
	font-size: 18px;
}
.event-contact-text {
	margin-top: 20px;
}

.event-contact-text h4 {
	font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
	margin-bottom: 5px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.event-contact-text p {
	margin: 0;
}

.event-contact-item:hover{
    background: #f5f5f5;
    color: #313131;
}
.event-contact-item:hover .event-contact-icon{
    color: #3367c1;
	border: 1px solid #3367c1;
}
.event-contact-item:hover .event-contact-text h4{
    color: #313131;
}

.event-carousel {
	border: 1px solid #e1e1e1;
}

.event-carousel .owl-nav .owl-prev,
.event-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 18px;
	position: absolute;
	width: 40px;
	height: 50px;
	line-height: 48px;
	top: 50%;
	margin-top: -25px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.event-carousel .owl-nav .owl-prev {
	left: 0;
}

.event-carousel .owl-nav .owl-next {
	right: 0;
}

.event-carousel .owl-nav .owl-prev:hover,
.event-carousel .owl-nav .owl-next:hover {
	color: #fff;
	background: #313131;
}

.event-detail-text {
	margin-top: 30px;
}

.event-detail-text h3 {
	font-size: 22px;
	font-weight: 700;
    text-transform: uppercase;
	margin-bottom: 15px;
}

.event-map {
	margin-top: 30px;
}

.event-map iframe {
	width: 100%;
	height: 350px;
}


/*
-------------------------------
Gallery
-------------------------------
*/

/*
===================================================
GALLERY FILTER MENU - MODERN & CLEAN
===================================================
*/
.gallery-menu {
    text-align: center;
    margin-bottom: 25px; /* Jarak yang lebih lega ke konten */
}

.gallery-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.gallery-menu li {
    cursor: pointer;
    font-size: 16px; /* Ukuran font yang lebih halus */
    font-weight: 500;
    display: inline-block;
    border-bottom: none; /* Hapus border lama */
    color: #6c757d; /* Warna teks abu-abu lembut */
    padding: 8px 15px; /* Padding yang lebih besar untuk area klik */
    margin: 0 5px 10px;
    position: relative;
    transition: all 0.3s ease;
    border-radius: 50px; /* Bentuk pill/kapsul */
}

.gallery-menu li:hover {
    color: #313131;
    background: #f0f0f0;
}

/* Style untuk kategori yang aktif (Pill Shape Indikator) */
.gallery-menu li.filtr-active {
    background: #2BB04D; /* Background warna brand */
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(43, 176, 77, 0.3);
}

.gallery-menu li.filtr-active:before {
    /* Hapus indikator segitiga lama */
    content: none; 
}


/*
===================================================
GALLERY ITEM (CARD) STYLING
===================================================
*/

.gallery-group {
    /* Hapus border tebal */
    border: none;
    margin-top: 30px;
    background: #ffffff;
    border-radius: 8px; /* Sudut membulat */
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Soft shadow */
    transition: all 0.3s ease;
}

.gallery-group:hover {
    transform: translateY(-3px); /* Efek angkat halus */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.gallery-photo {
    height: 250px; /* Naikkan tinggi gambar sedikit */
    background-position: center center; /* Posisikan gambar di tengah */
    position: relative;
    overflow: hidden;
}

/* --- Overlay/Hover BG (Dibuat lebih modern) --- */
.gallery-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(43, 176, 77, 0.8); /* Warna brand semi-transparan */
    visibility: hidden;
    opacity: 0;
    /* Menggunakan transisi scale yang lebih halus */
    transform: scale(1.1); 
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gallery-group:hover .gallery-bg {
    opacity: 1; /* Opacity penuh saat hover */
    transform: scale(1); /* Kembali ke ukuran normal saat hover */
    visibility: visible;
}

.gallery-table {
    /* Mengganti display: table dengan Flexbox untuk centering */
    display: flex; 
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* --- Hover Icon (Zoom/Lightbox) --- */
.gallery-icon {
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease 0.1s; /* Delay untuk animasi icon */
    /* Tambahkan efek transform untuk ikon */
    transform: translateY(20px); 
    z-index: 10;
}

.gallery-icon a {
    position: relative;
    font-size: 24px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2); /* Ikon semi-transparan */
    backdrop-filter: blur(5px); /* Efek Glassmorphism ringan */
    transition: all 0.3s;
}
.gallery-icon a:hover {
    background: #fff;
    color: #2BB04D;
}

.gallery-group:hover .gallery-icon {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Ikon meluncur ke posisi */
}


/* --- Footer Teks Galeri --- */
.gallery-text {
    text-align: center;
    background: #fff; /* Latar belakang putih bersih */
    padding: 20px;
}

.gallery-text a {
    color: #313131;
    text-decoration: none;
    transition: all 0.3s;
}

.gallery-text h3 {
    margin-bottom: 5px;
}

.gallery-text .photo-name {
    font-size: 20px; /* Ukuran judul lebih besar */
    font-weight: 700;
    letter-spacing: 0;
    color: #313131;
}

.gallery-text p {
    position: relative;
    font-size: 14px;
    color: #6c757d;
    border-top: 1px solid #f0f0f0; /* Garis pemisah yang sangat halus */
    margin: 0;
    padding-top: 10px;
}

.gallery-text p:before {
    position: absolute;
    content: '';
    left: 50%; /* Posisikan di tengah */
    transform: translateX(-50%);
    top: -1px;
    width: 0%;
    height: 2px; /* Garis aksen lebih tebal */
    background: #2BB04D;
    transition: width 0.3s ease;
}

.gallery-group:hover .gallery-text p:before {
    width: 40px; /* Garis aksen pendek muncul di tengah saat hover */
}

.gallery-text span {
    margin-right: 5px;
}

/*
-------------------------------
Shop
-------------------------------
*/

.product-item {
	text-align: center;
	border: 1px solid #e1e1e1;
	margin-top: 30px;
}

.product-photo {
	overflow: hidden;
	position: relative;
}

.product-cart {
	position: absolute;
	width: 100%;
	bottom: -20px;
	left: 0px;
	background: #3367c1;
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.product-item:hover .product-cart {
	visibility: visible;
	opacity: 1;
	bottom: 0;
}

.product-cart ul {
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.product-cart ul li {
	float: left;
	width: 50%;
}

.product-cart ul li:first-child {
	border-right: 1px solid #ddd;
}

.product-cart ul li a {
	display: block;
	font-size: 13px;
    font-weight: 500;
    font-family: 'Work Sans', sans-serif;
	background: #3367c1;
    color: #fff;
	padding: 12px 5px;
	text-decoration: none;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.product-cart ul li a:hover {
	color: #fff;
	background: #313131;
}

.product-cart ul li i {
	margin-right: 5px;
}

.product-text {
	border-top: 1px solid #e1e1e1;
	padding: 15px 10px;
}

.product-text h3 a {
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	margin-bottom: 12px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	text-transform: uppercase;
}

.product-text h3 a:hover {
	color: #3367c1;
}

.product-text h4 {
	font-size: 17px;
    font-family: 'Work Sans', sans-serif;
	margin-bottom: 12px;
}

.product-text del {
	color: #313131;
	font-size: 17px;
	font-weight: 400;
	margin-left: 8px;
}

.product-star i {
	color: #3367c1;
}

.shop-sidebar {
	margin-top: 30px;
	border: 1px solid #e1e1e1;
	padding: 30px;
}

.shop-widget {
	margin-top: 30px;
}

.shop-widget:first-child {
	margin-top: 0;
}

.shop-widget input {
	font-size: 15px;
	height: 40px;
	border: 1px solid #e1e1e1;
}

.shop-widget button {
	background: #3367c1;
    color: #fff;
	border: 1px solid #3367c1;
}

.shop-widget button:hover {
	cursor: pointer;
}

.shop-widget h4 {
	display: inline-block;
	position: relative;
	font-size: 22px;
	font-weight: 700;
	padding-bottom: 12px;
	margin-bottom: 24px;
}

.shop-widget h4:before {
	position: absolute;
	content: '';
	width: 70%;
	height: 1px;
	background: #3367c1;
	left: 0;
	bottom: 0;
}

.shop-widget h4:after {
	position: absolute;
	content: '';
	width: 100%;
	height: 1px;
	background: #3367c1;
	left: 0;
	bottom: -5px;
}

.price-range p {
	font-size: 15px;
	margin-bottom: 15px;
}

.price-range span {
	font-weight: 600;
}

.shop-widget .ui-widget.ui-widget-content {
	border: 1px solid #e1e1e1;
}

.shop-widget .ui-widget-header {
	background: #3367c1;
}

.shop-widget .ui-state-default,
.shop-widget .ui-widget-content .ui-state-default {
	border: 1px solid #e1e1e1;
}

.shop-widget .ui-state-active,
.shop-widget .ui-widget-content .ui-state-active {
	background: #3367c1;
	border: 1px solid #3367c1;
}

.shop-widget .button-df {
	margin-top: 25px;
}

.shop-widget .button-df a {
	padding: 10px 30px;
}

.product-rated-item {
	display: table;
	width: 100%;
	border-bottom: 1px solid #e1e1e1;
	margin-bottom: 15px;
	padding-bottom: 15px;
}

.product-rated-item:last-child {
	border-bottom: 0px;
	margin-bottom: 0;
	padding-bottom: 0;
}

.product-rated-photo {
	vertical-align: top;
	display: table-cell;
	float: left;
	width: 105px;
	padding-right: 8px;
}

.product-rated-photo img {
	max-width: 100%;
	height: auto;
}

.product-rated-text {
	vertical-align: top;
	display: table-cell;
	width: 100%;
	padding-left: 5px;
}

.product-rated-text a {
	font-size: 16px;
    font-weight: 600;
    font-family: 'Work Sans', sans-serif;
	text-decoration: none;
	color: #313131;
	margin-bottom: 5px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.product-rated-text a:hover {
	color: #3367c1;
}

.product-rated-text h5 {
	font-size: 15px;
    font-family: 'Work Sans', sans-serif;
	margin-bottom: 5px;
}

.product-rated-text del {
	margin-left: 8px;
}

.shop-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-widget ul li {
	padding: 10px 0;
	border-top: 1px solid #e1e1e1;
}

.shop-widget ul li:first-child {
	border-top: 0px;
}

.shop-widget ul li a {
    font-family: 'Work Sans', sans-serif;
    display: inline-block;
	position: relative;
	text-decoration: none;
	padding-left: 10px;
}

.shop-widget ul li span {
	margin-left: 15px;
}

.shop-widget ul li a:before {
	position: absolute;
	content: '\F105';
	font-family: fontawesome;
	top: 0;
	left: 0;
	color: #313131;
}

/*
-------------------------------
Product Detail
-------------------------------
*/

.product-photo-item {
	padding: 30px;
}
.product-photo-item img {
    max-height: 370px;
    width: auto !important;
    margin: 0 auto;
}
.review-table h2{
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.review-table .table thead th, 
.review-table .table tbody td{
    text-align: left;
}
.review-form h2{
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.review-form label{
    font-size: 15px;
    font-weight: 600;
}
.review-form .review-star{}
.review-form textarea{
    height: 220px;
}
.review-form .btn{
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px 30px;
    border: 1px solid #3367c1;
    background: #3367c1;
    color: #fff;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.review-form .btn:hover{
    color: #fff;
    background: #313131;
    border: 1px solid #313131;
}

.product-carousel {
	border: 1px solid #e1e1e1;
	margin-top: 30px;
}

.product-carousel .owl-nav .owl-prev,
.product-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 18px;
	position: absolute;
	width: 40px;
	height: 50px;
	line-height: 48px;
	top: 50%;
	margin-top: -25px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.product-carousel .owl-nav .owl-prev {
	left: 0;
}

.product-carousel .owl-nav .owl-next {
	right: 0;
}

.product-carousel .owl-nav .owl-prev:hover,
.product-carousel .owl-nav .owl-next:hover {
	color: #fff;
	background: #313131;
}

.shop-detail-text {
	margin-top: 30px;
}

.shop-detail-text h3 {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 15px;
}

.shop-detail-text h4 {
	font-size: 20px;
	font-weight: 500;
    font-family: 'Work Sans', sans-serif;
	margin-bottom: 15px;
}

.shop-detail-text h4 del {
	font-size: 20px;
	font-weight: 400;
	margin-left: 8px;
	color: red;
}

.shop-detail-text p {
	margin: 0;
	margin-top: 15px;
}

.shop-detail-choose {
	margin-top: 15px;
}

.shop-detail-cart {
	margin-top: 0px;
}

.shop-detail-cart ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.shop-detail-cart ul li {
	display: inline-block;
	margin-top: 15px;
	margin-right: 15px;
}

.shop-detail-cart ul li a.cart-btn {
	font-weight: 600;
	display: inline-block;
	background: #3367c1;
	color: #fff;
	text-decoration: none;
	padding: 15px 30px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.shop-detail-cart ul li a.cart-btn:hover {
	color: #fff;
	background: #313131;
}

.shop-detail-cart ul li i {
	margin-right: 5px;
}

.shop-detail-cart ul li .ui-spinner {
	width: 125px;
	border: 1px solid #3367c1;
	border-radius: 0;
	margin-bottom: 1px;
}

.shop-detail-cart ul li input {
	font-size: 16px;
	height: 50px;
	text-indent: 30px;
	margin: 0;
	padding: 0;
}

.shop-detail-cart ul li .ui-button {
	cursor: pointer;
	padding: 0 25px;
	border-left: 1px solid #3367c1;
	border-radius: 0;
	background: #3367c1;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.shop-detail-cart ul li .ui-button:hover {
	background: #313131;
}

.shop-detail-cart ul li .ui-button .ui-icon {
	background-image: url("../images/ui-icons_ffffff_256x240.png");
}

.shop-detail-cat {
	margin-top: 20px;
}

.shop-detail-cat p {
	margin: 0;
}

.shop-detail-cat span {
	font-weight: 600;
}

.shop-detail-tab ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.shop-detail-tab ul li {
	display: inline-block;
	margin-top: 15px;
	margin-right: 15px;
}

.shop-detail-tab ul li:last-child {
	margin-right: 0;
}

.shop-detail-tab ul li a {
	display: block;
	font-size: 15px;
	font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
	color: #fff;
	background: #313131;
	padding: 12px 25px;
	text-decoration: none;
}

.shop-detail-tab ul li a.active {
	color: #fff;
	background: #3367c1;
}

.shop-detail-content {
	margin-top: 30px;
}

.owlproduct-carousel .owl-nav .owl-prev,
.owlproduct-carousel .owl-nav .owl-next {
	text-align: center;
	font-size: 18px;
	position: absolute;
	width: 40px;
	height: 40px;
	line-height: 38px;
	top: 0;
	margin-top: -20px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.owlproduct-carousel .owl-nav .owl-prev {
	right: 0;
	margin-right: 40px;
}

.owlproduct-carousel .owl-nav .owl-next {
	right: 0;
	margin-right: 0px;
}

.owlproduct-carousel .owl-nav .owl-prev:hover,
.owlproduct-carousel .owl-nav .owl-next:hover {
	color: #fff;
	background: #313131;
}

/*
-------------------------------
Shopping Cart
-------------------------------
*/

.cart-table .table {
	width: 100%;
}

.table {
	margin-bottom: 0;
}

.table thead th,
.table tbody td {
	vertical-align: middle;
	text-align: center;
	border: 1px solid #e1e1e1;
}

.cart-table .table thead th {
	font-size: 16px;
	font-weight: 700;
	font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: #3367c1;
	color: #fff;
	padding: 15px 5px;
}

.cart-table th.c-photo {
	min-width: 160px;
	width: 160px;
}

.cart-table th.c-name {
	min-width: 180px;
}

.cart-table th.c-qnt {
	min-width: 120px;
}

.cart-table th.c-price,
.cart-table th.c-total {
	min-width: 90px;
}

.cart-table .table tbody td {
	font-size: 15px;
	color: #313131;
}

.cart-table .table tbody td span {
	font-weight: 600;
}

.cart-table .table tbody td a {
	font-size: 15px;
    font-family: 'Work Sans', sans-serif;
	color: #313131;
	text-decoration: none;
}

.cart-table .table tbody td a:hover {
	color: #3367c1;
}

.cart-table .table tbody td img {
	max-width: 100%;
	height: auto;
}

.cart-table .table tbody td input {
	border: 1px solid #e1e1e1;
	padding: 10px 15px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.cart-table .table tbody td input:focus {
	border-color: #3367c1;
}

.cart-action {
	margin-top: 25px;
}

.update-cart {
	margin-top: 15px;
}

.update-cart a {
	display: inline-block;
	font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
	text-decoration: none;
	padding: 15px 30px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.update-cart a:hover {
	background: #313131;
	color: #fff;
}

.coupon-cart {
	font-size: 15px;
	height: 51px;
	margin-top: 15px;
}

.coupon-cart input {
	font-size: 15px;
	border-radius: 0;
}

.coupon-cart .btn {
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
	border: 1px solid #3367c1;
	border-radius: 0;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.btn.focus,
.btn:focus {
	box-shadow: none;
}

.coupon-cart .btn:hover {
	border: 1px solid #313131;
	background: #313131;
	color: #fff;
}

.total-cart {
	margin-top: 40px;
}

.total-cart td {
	text-align: left !important;
	padding: 20px;
}

.total-cart td.t-bold {
	font-size: 16px;
	font-weight: 600;
	padding: 20px;
}

.proceed-cart {
	margin-top: 15px;
}

.proceed-cart a {
	display: inline-block;
	font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
	text-decoration: none;
	padding: 20px 40px;
	background: #3367c1;
	color: #fff;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.proceed-cart a:hover {
	background: #313131;
	color: #fff;
}

/*
-------------------------------
Checkout
-------------------------------
*/

.checkout-form {
	margin-top: 30px;
}

.checkout-form textarea {
	height: 120px;
}

.checkout-table {
	margin-top: 30px;
}

.checkout-table table th,
.checkout-table table td {
	text-align: left;
}

.checkout-table table th {
    font-size: 16px;
	font-weight: 700;
    text-transform: uppercase;
	font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 0.5px;
	color: #fff;
    background: #3367c1;
}

.checkout-table table td.t-bold {
	font-size: 15px;
	font-weight: 600;
	color: #313131;
}

.payment-select {
	text-align: center;
	margin-top: 30px;
}

.payment-select.headstyle h4:before {
	width: 118px;
	left: 50%;
	margin-left: -59px;
}

.payment-select-group .form-check-input:only-child {
	position: absolute;
}

.payment-order-button {
	margin-top: 30px;
}

.payment-order-button a {
	display: block;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: #3367c1;
	padding: 15px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.payment-order-button a:hover {
	color: #fff;
	background: #313131;
}


/*
-------------------------------
Contact
-------------------------------
*/

/*
===================================================
CONTACT ITEMS & FORM - MODERN CARD STYLING
===================================================
*/
.contact-item {
    text-align: center;
    /* Hilangkan border, ganti dengan shadow halus */
    border: none; 
    min-height: 200px; /* Tingkatkan min-height */
    position: relative;
    background: #ffffff;
    padding: 35px 20px;
    padding-top: 75px; /* Sesuaikan dengan ikon yang lebih besar */
    margin-top: 60px; /* Jarak atas disesuaikan */
    border-radius: 12px; /* Sudut membulat */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.contact-item:hover {
    transform: translateY(-5px); /* Efek angkat saat hover */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

.contact-icon {
    position: absolute;
    width: 90px; /* Ikon lebih besar */
    height: 90px;
    line-height: 90px;
    top: 0px;
    left: 50%;
    background: #fff;
    color: #2BB04D; /* Warna brand */
    border-radius: 50%;
    border: 3px solid #e1e1e1; /* Border sedikit lebih tebal */
    margin-top: -45px; /* (Tinggi/2) */
    transform: translate(-50%, 0%);
    transition: all 0.3s;
}

.contact-icon img {
    width: 40px;
    height: 40px;
}

.contact-icon i {
    font-size: 38px;
}

.contact-item:hover .contact-icon{
    background: #2BB04D;
    color: #fff;
    border: 3px solid #2BB04D;
    transform: translate(-50%, 0%) rotateY(360deg); /* Animasi putar saat hover */
}

.contact-text {
    margin-top: 5px;
}

.contact-text h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #313131;
}

.contact-text p {
    margin: 0;
    color: #6c757d;
}

/* --- Contact Form --- */
.contact-form textarea {
    height: 180px; /* Sedikit lebih ringkas */
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e1e1e1;
    width: 100%;
    margin-bottom: 15px;
    transition: border-color 0.3s;
}
.contact-form textarea:focus,
.contact-form input:focus {
    border-color: #2BB04D;
    outline: none;
}

.contact-form .btn {
    cursor: pointer;
    display: block; /* Tombol mengisi lebar penuh (modern form) */
    width: 100%;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 30px; /* Padding lebih besar */
    border: 2px solid #2BB04D; /* Border tebal warna brand */
    background: #2BB04D;
    color: #fff;
    border-radius: 8px;
    transition: all 0.3s;
}

.contact-form .btn:hover {
    color: #fff;
    background: #1e8e3e; /* Hijau lebih gelap */
    border-color: #1e8e3e;
    box-shadow: 0 4px 10px rgba(43, 176, 77, 0.4);
}

.map-area iframe {
    width: 100%;
    height: 500px; /* Peta sedikit lebih tinggi */
    margin-bottom: -5px;
}

/* --- Form Message States (Feedback) --- */
.error-class,
.success-class {
    padding: 15px 20px;
    margin-bottom: 20px;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    /* Tambahkan bayangan ringan untuk menonjol */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
}

.error-class {
    background: #dc3545; /* Merah standar modern */
    color: #fff;
}

.success-class {
    background: #28a745; /* Hijau standar modern */
    color: #fff;
}


---

## 404 Error Page (Minimalist & Impactful)

Kita akan menyederhanakan tampilan `404` dengan fokus pada tipografi besar dan menghilangkan *border* berlebihan.

```css
/*
===================================================
404 ERROR PAGE - MODERN TYPOGRAPHY
===================================================
*/
.error-page {
    text-align: center;
    padding: 80px 0;
}

.error-head {
    display: inline-block;
    background: transparent; /* Hapus background abu-abu */
    border: none; /* Hapus border */
    padding: 0;
}

.error-head h1 {
    font-size: 140px; /* Angka yang sangat besar untuk dampak */
    font-weight: 900;
    color: #2BB04D; /* Warna brand */
    margin-bottom: 10px;
    line-height: 1;
}

.error-head h1 span {
    color: #313131;
}

.error-head h3 {
    font-size: 38px; /* Lebih menonjol */
    font-weight: 700;
    margin: 0;
    color: #313131;
    text-transform: capitalize;
}

.error-body {
    margin-top: 40px;
}

.error-body h4 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #4a4a4a;
}

.error-body p {
    margin: 0 0 30px 0;
    font-size: 16px;
    color: #6c757d;
}
/* Tombol di 404 harus menggunakan style .contact-form .btn */


/* Language Button */
.lang-right {
	float: left;
	border-bottom: 0;
	margin: 0;
	padding: 0;
	padding-left: 35px;
}

.lang-right select {
	padding: 0;
	font-size: 14px;
}

.lang-right select.form-control:not([size]):not([multiple]) {
	height: 26px!important;
	background: transparent;
	color: #fff!important;
	border: 0;
}

.lang-right select option {
	color: #000!important;
	padding: 5px 10px!important;
}


/* Tetapkan warna brand */
:root {
    --color-brand: #2BB04D;
    --color-brand-dark: #1e8e3e;
    --color-text-dark: #313131;
    --color-text-soft: #6c757d;
}

/*
===================================================
TOASTR NOTIFICATIONS - MODERN AESTHETICS
(Mengganti shadow lama dan menambahkan border-radius)
===================================================
*/
.toast {
    opacity: 1 !important;
    /* Ganti shadow lama dengan box-shadow modern */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); 
    border-radius: 8px !important; /* Sudut membulat modern */
    padding: 15px 20px;
}
/* Mengganti warna background toastr dengan skema warna yang lebih standar dan profesional */
#success_toastr {background: #28a745;} /* Hijau (Success) */
#error_toastr {background: #dc3545;} /* Merah (Error) */
#warning_toastr {background: #ffc107; color: var(--color-text-dark);} /* Kuning (Warning) */
#info_toastr {background: #17a2b8;} /* Biru Muda (Info) */
#question_toastr {background: #6c757d;} /* Abu-abu (Question) */


/*
===================================================
CAPTCHA SECTION - FLEXIBLE LAYOUT
(Mengganti float dengan Flexbox untuk responsivitas)
===================================================
*/
.captcha-section {
    font-size: 16px;
    width: 100%;
    display: flex; /* Menggunakan flexbox */
    align-items: center;
    margin-bottom: 15px;
}

.captcha-section-1 {
    width: 90px;
    /* Hapus float: left; */
    padding-top: 0; /* Padding disesuaikan */
    flex-shrink: 0;
    margin-right: 15px;
}

.captcha-section-2 {
    /* Hapus float: left; */
    width: 100px;
    flex-shrink: 0;
}

span.input-group-btn {
    /* Jika ini adalah tombol refresh/submit Captcha */
    background: var(--color-brand);
    border-radius: 0 6px 6px 0;
}

/*
===================================================
FORM & IMAGE UTILITIES
(Form fixes dan gambar blog)
===================================================
*/
.footer-item .input-group .btn {
    /* Menyelaraskan padding tombol footer newsletter */
    padding: 0 15px; /* Sesuaikan padding agar terlihat seimbang */
    height: 45px; /* Tambahkan tinggi agar sejajar dengan input */
}

.service-sidebar-item .form-group {
    width: 100%;
    margin-bottom: 15px;
}

.portfolio-details .form-group {
    width: 100%;
    margin-bottom: 15px;
}

.single-blog img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Tambahkan sudut membulat pada gambar blog */
    object-fit: cover;
}


/*
===================================================
SHARE BUTTONS - CIRCULAR & MODERN
(Mempertahankan gaya share buttons yang sudah direvisi)
===================================================
*/
.share_buttons a {
    text-align: center;
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.3s;
}
.share_buttons a i {
    /* Mengubah border lama menjadi transparan dan shadow modern */
    border: 2px solid transparent; 
    color: #fff!important;
    width: 45px; /* Ukuran sedikit disesuaikan */
    height: 45px;
    line-height: 41px; 
    border-radius: 50%;
    display: inline-block;
    font-size: 18px;
    margin-right: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Facebook */
.share_buttons a.facebook i { background: #3b5998; border-color: #3b5998; }
.share_buttons a.facebook:hover i { color: #3b5998 !important; background: #fff; border-color: #3b5998; }

/* Twitter */
.share_buttons a.twitter i { background: #00aced; border-color: #00aced; }
.share_buttons a.twitter:hover i { color: #00aced !important; background: #fff; border-color: #00aced; }

/* Pinterest */
.share_buttons a.pinterest i { background: #EB4823; border-color: #EB4823; }
.share_buttons a.pinterest:hover i { color: #EB4823 !important; background: #fff; border-color: #EB4823; }

/* LinkedIn */
.share_buttons a.linkedin i { background: #0e76a8; border-color: #0e76a8; }
.share_buttons a.linkedin:hover i { color: #0e76a8 !important; background: #fff; border-color: #0e76a8; }