/*!
Theme Name: apexindo themes
Theme URI: http://underscores.me/
Author: syihab
Author URI: http://syihab.online
Description: Description
Version: 2.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: apexindo-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

apexindo themes is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root {
    --font-primary: 'Plus Jakarta Sans', sans-serif;
}

body {
    font-family: var(--font-primary) !important;
    -webkit-font-smoothing: antialiased; /* Agar font terlihat lebih tajam di Mac/iOS */
    -moz-osx-font-smoothing: grayscale;
}
a {
    color: #ffc107;
}

/* Memastikan Heading, Tombol, dan Navbar juga mengikuti */
h1, h2, h3, h4, h5, h6, 
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand, 
.btn, 
.nav-link,
.dropdown-item {
    font-family: var(--font-primary) !important;
}
.text-orange { color: #F58220; }
.bg-orange { background-color: #F58220; }
.rounded-xl { border-radius: 25px; }

/* Hero Section */
.hero {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('rig-hero.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
}

/* Card Styling */
.card-custom {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Footer */
footer {
    background-color: #616365;
    color: #fff;
    padding: 60px 0;
}

.footer-apexindo {
    background-color: #616365; /* Sesuai gambar */
    color: #ffffff;
    padding: 60px 0 20px 0;
}

.footer-apexindo h6 {
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

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

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.85rem;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.footer-links a:hover {
    opacity: 1;
    color: #f58220; /* Warna orange Apexindo */
}

.address-section p {
    line-height: 1.6;
    opacity: 0.9;
}
.office-info {
    font-size: 14px; /* Menyesuaikan ukuran font desain */
    color: #ffffff;
}

/* Mengatur lebar kolom label (kiri) */
.label-office {
    min-width: 80px; 
    font-weight: 500;
    opacity: 0.9;
}

/* Mengatur kolom isi (kanan) */
.content-office {
    flex: 1;
    opacity: 0.9;
    padding-left: 10px;
}

/* Gaya untuk underline judul kantor */
.office-info h6 {
    text-transform: none;
}

.main-navbar {
    background: transparent; /* Awalnya transparan */
    transition: background 0.3s ease-in-out;
}

/* Background berubah saat scroll (opsional dengan JS) */
.main-navbar.scrolled {
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 0;
}

.main-navbar .nav-link {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff !important;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    opacity: 0.9;
    transition: opacity 0.3s;
}

.main-navbar .nav-link:hover {
    opacity: 1;
    color: #f58220 !important; /* Hover warna orange sesuai logo */
}

/* Garis bawah tipis saat aktif/hover jika diinginkan */
.main-navbar .nav-item {
    position: relative;
}

.custom-indicators {
    position: relative;
    margin-top: 30px;
}

.custom-indicators button {
    width: 60px !important;
    height: 4px !important;
    background-color: #dee2e6 !important;
    border: none !important;
    border-radius: 2px;
    margin: 0 5px !important;
}

.custom-indicators button.active {
    background-color: #f58220 !important; /* Warna Orange Apexindo */
}

.bg-orange-custom {
    background-color: #f58220;
}

/* Transisi halus antar slide */
.carousel-item {
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
}

.text-orange { color: #F58220; }

.business-card {
    height: 450px;
    transition: all 0.5s ease;
}

.business-card .card-img {
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
}

.orange-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(245, 130, 32, 0.65); /* Warna orange transparan */
}

/* Swiper Pagination Styling */
.swiper-pagination-bullet {
    width: 40px;
    height: 5px;
    border-radius: 2px;
    background: #ccc;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #F58220 !important;
}

/* Efek Kartu Samping (Penting) */
.swiper-slide {
    width: 80%; /* Kartu utama besar */
    transition: 0.5s;
    opacity: 0.9;
    transform: scale(0.9);
}

.swiper-slide-active {
    opacity: 1;
    transform: scale(1);
    width: 80%;
}
.businessSwiper .swiper-slide:not(.swiper-slide-active) {
    cursor: pointer;
}

.businessSwiper .swiper-slide:not(.swiper-slide-active):hover .business-card {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

/* Pastikan transisi slide terasa smooth saat diklik */
.swiper-wrapper {
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Styling Umum Tab */
.safety-tab {
    /* background-color: #252729f2 !important; */ /* Warna default gelap */
    color: white !important;
    border-radius: 15px !important;
    padding: 15px 25px !important;
    font-weight: 600;
    border: none;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 96px;
    z-index: 1;
}

/* State Aktif */
.safety-tab.active {
    /* box-shadow: 0 0 15px rgba(245, 130, 32, 0.5); */
    /*transform: scale(1.05);*/
    transition: all 0.3s ease;
}
.safety-tab:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: opacity 0.3s ease;
    background: linear-gradient(rgb(248 172 86 / 85%), rgb(110 75 35 / 85%)) !important;
}

.safety-tab.active:after {
    background: linear-gradient(rgb(25 19 13 / 85%), rgb(12 21 38 / 56%)) !important;
}


/* Kontainer Gambar Utama */
.tab-content {
    border-radius: 30px !important;
}

.tab-pane img {
    filter: brightness(0.85);
}

.card-publication {
    background: transparent;
}

/* Kotak abu-abu muda di belakang cover buku */
.report-content-box {
    background-color: #f8f9fa;
    border-radius: 40px; /* Sesuai desain yang sangat membulat */
    border: 1px solid #eee;
    transition: transform 0.3s ease;
}

.report-content-box:hover {
    transform: translateY(-10px);
}

/* Efek bayangan pada cover buku agar terlihat 3D */
.report-shadow {
    box-shadow: 15px 15px 30px rgba(0,0,0,0.15);
    border-radius: 5px;
    max-height: 350px;
}

/* Styling Button Download */
.btn-link {
    font-weight: 500;
    transition: color 0.3s;
}

.btn-link:hover {
    color: #f58220 !important;
}

.esg-card {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.esg-card img {
    height: 250px;
    object-fit: cover;
    transition: filter 0.3s ease;
}

.esg-card:hover img {
    filter: brightness(0.9);
}

.esg-card .card-title {
    font-size: 1.1rem;
    line-height: 1.4;
    color: #333;
    transition: color 0.3s ease;
}

.esg-card:hover .card-title {
    color: #F58220; /* Berubah warna ke orange saat hover */
}

.text-orange {
    color: #F58220;
}
.company-profile-section {
    /* Menggunakan overlay gradasi hitam agar teks putih "pop out" */
    background-size: cover !important;
    background-position: center !important;
    background-attachment: scroll !important; /* Bisa diganti 'fixed' untuk efek parallax */
    min-height: 500px; /* Menyesuaikan tinggi di desain */
    padding: 100px 0;
}

.company-profile-section h2 {
    letter-spacing: -1px;
}

.company-profile-section p {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Hover effect untuk tombol */
.btn-learn-more {
    transition: all 0.3s ease;
}

.btn-learn-more:hover {
    background-color: white !important;
    color: #333 !important;
    transform: translateX(5px);
}

.stats-section {
    /* Menggunakan gambar Component 22.jpg sebagai background */
    background-size: cover;
    background-position: center;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.text-brown {
    color: #4b2c20; /* Warna cokelat tua sesuai desain */
    letter-spacing: 0.5px;
    font-size: 1rem;
}

.stat-number {
    color: #4b2c20;
    margin-bottom: 10px;
}

.stat-label {
    color: #4b2c20;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    opacity: 0.9;
}

/* Responsivitas: Di mobile teks angka sedikit lebih kecil */
@media (max-width: 767.98px) {
    .stat-number {
        font-size: 1.5rem;
    }
    .stat-label {
        font-size: 0.75rem;
    }
    .sub-list li a {
        padding: 5px;
    }

    .megamenu-list li.menu-item {
        display: block !important;
    }
}

.card-btn {
    border: 1px #eee solid;
    border-radius: 20px;
}

/* Warna khas Apexindo */
.text-orange {
    color: #F58220;
}

.btn-orange {
    background-color: #F58220;
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.btn-orange:hover {
    background-color: #d66d15;
    color: white;
    transform: translateY(-2px);
}

/* Penyesuaian Kartu */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

.card-title {
    font-size: 1.1rem;
    line-height: 1.4;
    color: #333;
}

/* Responsivitas untuk teks kiri di Mobile */
@media (max-width: 991px) {
    .header-content {
        text-align: center;
        margin-bottom: 40px;
    }
}

/* Garis pemisah vertikal */
.border-end { border-right: 1px solid #eee !important; }

/* Responsivitas */
@media (max-width: 991px) {
    .megamenu { width: 100%; left: 0 !important; border-radius: 0 !important; }
}


/* Hero Section */
.about-hero {
    height: 400px;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}

/* Sidebar Navigasi */
.sidebar-link {
    display: block;
    padding: 15px 20px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s;
}

.sidebar-link:hover {
    background-color: #f9f9f9;
    color: #F58220; /* Orange Apexindo */
}

/* Style khusus untuk parent menu yang aktif (Organization) */
.active-group .parent-link {
    background-color: #FFE5CC; /* Orange muda background */
    color: #333;
    font-weight: 600;
}

.sidebar-sub-link {
    display: block;
    padding: 10px 20px 10px 15px;
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.2s;
}

/* Sub-link aktif (Board of Directors) */
.sidebar-sub-link.active {
    background-color: #F9A94A;
    color: white;
    border-radius: 5px 0 0 5px; /* Sedikit rounded di kiri */
    /* margin-left: -16px; */ /* Agar menempel ke kiri */
    /* padding-left: 31px; */
}

/* Director Cards */
.director-card {
    transition: transform 0.3s ease;
}

.director-card:hover {
    transform: translateY(-5px);
}

.director-card img {
    filter: grayscale(10%); /* Sedikit desaturasi agar elegan */
}


/* Rounded Modal yang lebih ekstrem sesuai desain */
.modal-content.rounded-5 {
    border-radius: 30px !important;
}

/* Custom Close Button (Lingkaran Orange) */
.btn-close-custom {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #F58220; /* Orange Border */
    background-color: transparent;
    color: #F58220; /* Icon Color */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10; /* Agar selalu di atas */
}

.btn-close-custom:hover {
    background-color: #F58220;
    color: white;
    transform: rotate(90deg); /* Efek putar sedikit saat hover */
}

/* Typography di dalam Modal */
.bio-section h6 {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: #999 !important; /* Abu-abu muda untuk judul section */
}

.bio-section ul li, 
.bio-section p {
    line-height: 1.6;
    color: #444; /* Abu-abu gelap untuk isi teks */
}

/* Transisi halus untuk ikon */
.transition-icon {
    transition: transform 0.3s ease;
}

/* Jika menu terbuka (aria-expanded="true"), putar ikon 180 derajat */
[aria-expanded="true"] .transition-icon {
    transform: rotate(180deg);
}

/* Container Utama */
.sidebar-menu {
    border: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* 1. Style Link Utama (Level 1) */
.sidebar-link {
    display: block;
    padding: 18px 25px; /* Padding lebih besar sesuai gambar */
    color: #212529;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    background-color: #fff;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0,0,0,0.03); /* Garis pemisah sangat halus */
}

/* Hover State untuk Link Biasa */
.sidebar-link:hover {
    color: #F58220;
    background-color: #fff;
}

/* 2. Style Link Parent saat TERBUKA (Accordion Active) 
   Ini yang membuat background jadi Peach/Krem (#FFE9D3)
*/
.sidebar-link[aria-expanded="true"] {
    background-color: #FFE9D3 !important; /* Warna Krem sesuai gambar */
    color: #212529 !important; /* Teks tetap hitam */
    font-weight: 700; /* Teks jadi tebal */
    border-bottom: none;
}

/* Rotasi Ikon Panah */
.transition-icon {
    transition: transform 0.3s ease;
    font-size: 0.9rem;
    color: #212529;
}

/* Putar ikon saat menu terbuka */
.sidebar-link[aria-expanded="true"] .transition-icon {
    transform: rotate(180deg);
}

/* 3. Style Submenu (Level 2) */
.submenu {
    /* padding-top: 5px; */
}

.sidebar-sub-link {
    display: block;
    padding: 14px 25px 14px 45px; /* Indentasi ke dalam */
    color: #444;
    text-decoration: none;
    font-size: 15px;
    transition: 0.2s;
}

.sidebar-sub-link:hover {
    color: #F58220;
}

/* 4. Style Submenu AKTIF (Board of Commisioner)*/
.sidebar-sub-link.active,
.sidebar-link.active {
    background-color: #F9A94A;
    color: #212529;
    font-weight: 600;
}

/* Style Awal (Diam) */
.icon-circle {
    width: 32px;
    height: 32px;
    border: 1px solid #F58220; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F58220; 
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

/* Style Saat Kartu di-Hover */
.director-card:hover .icon-circle , 
.award-card:hover .icon-circle {
    background-color: #F58220; 
    color: #ffffff; 
    box-shadow: 0 4px 10px rgba(245, 130, 32, 0.3); 
}

.director-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.director-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}

.title-card {
    line-height: 1 !important;
    font-size: 19px;
    font-weight: 600 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* Batasi jumlah baris menjadi 3 */
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Latar belakang modal yang gelap pekat tapi transparan */
.bg-opacity-95 {
    background-color: rgb(15 23 42 / 33%) !important;
    backdrop-filter: blur(10px); /* Efek blur di belakang */
}

/* Tombol Close & Fullscreen */
.btn-dark {
    background-color: rgba(255,255,255,0.1);
    transition: all 0.2s;
}

.btn-dark:hover {
    background-color: rgba(255,255,255,0.2);
    border-color: white !important;
}

/* Animasi Muncul Teks */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

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

/* Efek Glow di belakang piala (opsional, biar makin mewah) */
.glow-effect {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(245, 130, 32, 0.3) 0%, rgba(0,0,0,0) 70%);
    z-index: 1;
    pointer-events: none;
}

/* Styling Popup Leaflet agar sesuai desain */
.leaflet-popup-content-wrapper {
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.leaflet-popup-content {
    margin: 5px;
}

.font-jakarta {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Animasi Marker (Bounce effect saat load) */
.custom-map-marker i {
    animation: dropIn 0.5s ease-out;
}

@keyframes dropIn {
    0% { transform: translateY(-20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
/* Styling Text Spacing */
.ls-1 {
    letter-spacing: 1px;
}

/* Card Styling */
.card {
    transition: transform 0.2s;
}

/* Styling Dropdown Filter Chart */
.form-select:focus {
    border-color: #F58220;
    box-shadow: 0 0 0 0.25rem rgba(245, 130, 32, 0.1);
}

/* Warna Indikator Naik/Turun */
.text-danger {
    color: #dc3545 !important; /* Merah untuk turun */
}
.text-success {
    color: #198754 !important; /* Hijau untuk naik (jika nanti dibutuhkan) */
}

/* News Card Styling */
.news-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}

/* Efek Zoom Gambar saat Hover */
.news-img-wrapper {
    overflow: hidden;
}

.news-card img {
    transition: transform 0.5s ease;
}

.news-card:hover img {
    transform: scale(1.05); /* Gambar membesar sedikit */
}

/* Membatasi Judul Berita max 3 baris */
.news-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 75px;
    line-height: 1.2 !important;
}

/* CUSTOM PAGINATION APEXINDO */
.page-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s;
}

/* Halaman Aktif (Orange Background) */
.active-page {
    background-color: #F58220 !important;
    color: white !important;
}

/* Hover Angka Halaman */
.hover-orange:hover {
    background-color: #fff5ec;
    color: #F58220 !important;
}

/* Tombol Next/Prev Text Only */
.page-link.bg-transparent {
    width: auto;
    padding: 0 10px;
}

.hover-text-orange:hover {
    color: #F58220 !important;
}


/* Back Link Hover */
.back-link {
    transition: color 0.2s;
}
.back-link:hover {
    color: #F58220 !important;
}

/* Share Icons Styling */
.share-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease;
    font-size: 0.9rem;
}

.share-icon:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* Custom Carousel Navigation (Tombol Bulat Putih) */
.carousel-nav-btn {
    width: 45px;
    height: 45px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.carousel-control-prev, .carousel-control-next {
    width: 80px; /* Area klik lebih lebar */
    opacity: 1; /* Agar tombol selalu terlihat jelas */
}

.carousel-nav-btn:hover {
    transform: scale(1.1);
    color: #F58220;
}

/* Typography Artikel */
.article-body p {
    line-height: 1.75;
    font-size: 1.05rem;
    color: #444;
}

.article-list li {
    margin-bottom: 10px;
    line-height: 1.6;
}

/* Bullet Point Custom Styling (Opsional) */
.article-list {
    list-style-type: disc;
}
.article-list li::marker {
    color: #666; 
}

/* Reuse Style dari News Listing untuk "Related News" */
.news-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}
.news-card:hover .news-title a {
    color: #F58220 !important;
    transition: color 0.3s ease;
}
.news-img-wrapper { overflow: hidden; }
.news-card img { transition: transform 0.5s ease; }
.news-card:hover img { transform: scale(1.05); }


/* Tombol Close Custom (Lingkaran Kecil) */
.btn-close-custom-small {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid #e9ecef;
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
}
.btn-close-custom-small:hover {
    background-color: #f8f9fa;
    transform: rotate(90deg);
}

/* Social Share Buttons (Bulat Besar) */
.social-share-btn {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    text-decoration: none;
    transition: transform 0.2s ease;
}
.social-share-btn:hover { transform: translateY(-3px); }

/* Warna Spesifik Brand */
.social-share-btn.fb { background-color: #1877F2; color: white; }
.social-share-btn.x-twitter { background-color: #000000; color: white; }
.social-share-btn.wa { background-color: #25D366; color: white; }

/* Input Group Copy Link */
.copy-link-group {
    background-color: #fff;
    border-color: #dee2e6 !important;
}
.copy-link-group input {
    font-size: 0.9rem;
}
/* Tombol Copy Link */
.copy-link-group .btn-dark {
    background-color: #212529;
    padding-top: 8px; padding-bottom: 8px;
    transition: background 0.2s;
}
.copy-link-group .btn-dark:hover {
    background-color: #000;
}

/* Khusus Halaman News Detail (Single Page) */
.single-post{
    padding-top: 60px;
}

/* Warna Active Menu Orange */
.text-orange {
    color: #F58220 !important;
}

/* Navbar Link Hover Effect */
.navbar-light .navbar-nav .nav-link:hover {
    color: #F58220 !important;
}
.card-box {
    background: #fff;
    border-radius: 20px;
}
.bg-grey{
    background: #F9F9F9 !important;
}

/* Styling Teks Artikel */
.article-text p {
    line-height: 1.7;
    font-size: 1rem;
}

/* Gallery Card Container */
.gallery-card {
    height: 360px; /* Tinggi seragam untuk grid */
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-card img {
    transition: transform 0.5s ease;
}

/* Hover Effect */
.gallery-card:hover {
    transform: translateY(-5px);
}

.gallery-card:hover img {
    transform: scale(1.1);
}

/* Overlay Gradasi Hitam */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 40%);
    opacity: 1;
    z-index: 2;
}
/* Styling Accordion Wrapper */
#careerAccordion .accordion-item {
    border: none;
    margin-bottom: 1rem;
}

/* Header Button Styling */
#careerAccordion .accordion-button {
    border-radius: 16px !important;
    transition: all 0.3s ease;
}

/* State saat Accordion Terbuka */
#careerAccordion .accordion-button:not(.collapsed) {
    background-color: #fff;
    color: inherit;
    box-shadow: none;
}


/* MEGA MENU HOVER LOGIC */
@media (min-width: 992px) {
    /* Munculkan menu saat hover pada parent li */
    .nav-item.dropdown.has-megamenu:hover > .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        margin-top: 0; /* Menghilangkan gap agar tidak tertutup saat mouse pindah */
        transform: translateY(0);
    }

    /* Animasi transisi menu */
    .nav-item.dropdown.has-megamenu .dropdown-menu {
        display: block; /* Tetap block tapi diatur opacity */
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        transform: translateY(10px);
        pointer-events: all;
    }
}

/* --- MEGA MENU HOVER LOGIC --- */
@media (min-width: 992px) {
    /* Memicu dropdown muncul saat hover pada parent */
    .nav-item.dropdown.has-megamenu:hover > .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0); /* Slide down halus */
    }

    /* Pengaturan awal dropdown (hidden) */
    .nav-item.dropdown.has-megamenu .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        transform: translate(-50%, 15px); /* Start position sedikit di bawah */
        top: 100%;
        margin-top: 0;
    }
}

/* --- DESIGN STYLING --- */
.megamenu {
    width: 56vw;
    max-width: 1000px;
    left: 100% !important;
    border-radius: 18px !important; /* Sesuai visual referensi */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

/* Navigasi List di Dalam Menu */
.megamenu-list li {
    padding: 10px 15px;
    border-radius: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
    margin-bottom: 4px;
}

.megamenu-list li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Hover & Active State pada Menu Utama (Kiri) */
.megamenu-list li:hover, 
.megamenu-list li.active {
    background-color: #f8f9fa; /* Background abu muda saat hover */
}

.megamenu-list li:hover a,
.megamenu-list li.active a {
    color: #F58220 !important; /* Warna Orange Corporate */
}

/* Sub-list (Kolom Kanan) Styling */
.sub-list li {
    /* padding: 8px 8px; */
}

.sub-list li a {
    color: #666;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    border-radius: 8px;
    padding: 10px 15px;
}

.sub-list li a:hover {
    color: #F58220 !important;
}

/* Image Wrapper Design */
.megamenu-image-wrapper {
    min-height: 400px;
}

.megamenu-image-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Sembunyikan sub-list kecuali yang aktif */
.sub-list.d-none {
    display: none !important;
}

/* Animasi sederhana saat muncul */
.sub-list {
    animation: fadeInMenu 0.3s ease-in-out;
}

@keyframes fadeInMenu {
    from { opacity: 0; transform: translateX(5px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Styling saat menu kiri di-hover */
.megamenu-list li.menu-item {
    transition: all 0.2s ease;
    border-radius: 8px;
    padding: 10px 15px;
}

.megamenu-list li.menu-item.active {
    background-color: #f8f9fa;
}

.megamenu-list li.menu-item.active a {
    color: #F58220 !important;
    font-weight: 600;
}
/* --- DESKTOP HOVER (Hanya untuk 992px ke atas) --- */
@media (min-width: 992px) {
    .nav-item.dropdown.has-megamenu:hover > .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translate(-45%, 0);
    }
}

/* --- MOBILE RESPONSIVE FIX (Dibawah 992px) --- */
@media (max-width: 991.98px) {
    .megamenu {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        transform: none !important;
        border-radius: 20px !important; 
        margin-top: 10px;
        position: static !important; 
    }

    /* Hilangkan kolom gambar di mobile agar tidak sempit */
    .megamenu-image-wrapper {
        display: none;
    }

    /* Kolom kiri dan kanan dibuat stack vertical */
    .col-lg-8.py-5.px-5 {
        padding: 20px !important;
    }

    .col-md-6.border-end {
        border-end: none !important;
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    /* Di mobile, semua sub-menu tampilkan saja agar user tidak bingung */
    .sub-list.d-none {
        display: block !important;
        opacity: 1 !important;
    }
}

.menu-dynamic-img {
    transition: opacity 0.3s ease-in-out;
    object-fit: cover;
}

.megamenu-list .menu-item {
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 8px;
    transition: all 0.2s;
}

.megamenu-list .menu-item.active {
    background-color: #f8f9fa;
    color: #000;
    font-weight: bold;
}
.dropdown-item.active, .dropdown-item:active {
    background: inherit;
}

/* Container Pagination */
nav[aria-label="Asset pagination"] {
    display: flex;
    justify-content: flex-end;
    margin-top: 2rem;
    font-family: 'Plus Jakarta Sans', sans-serif; /* Pastikan font terpasang */
}

/* Base Style untuk semua link pagination */
nav[aria-label="Asset pagination"] .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #212529; /* Dark */
    text-decoration: none;
    margin: 0 4px;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Angka Lingkaran */
nav[aria-label="Asset pagination"] .page-numbers:not(.prev):not(.next):not(.dots) {
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

/* State: Hover pada angka */
nav[aria-label="Asset pagination"] a.page-numbers:hover:not(.prev):not(.next) {
    background-color: #f8f9fa;
    color: #fd7e14; /* Warna orange */
}

/* State: Active (Halaman saat ini) */
nav[aria-label="Asset pagination"] .page-numbers.current {
    background-color: #000; /* Atau warna brand Anda */
    color: #fff !important;
}

/* Tombol Previous & Next */
nav[aria-label="Asset pagination"] .page-numbers.prev,
nav[aria-label="Asset pagination"] .page-numbers.next {
    padding: 0 10px;
    color: #6c757d; /* Muted */
}

nav[aria-label="Asset pagination"] a.page-numbers.prev:hover,
nav[aria-label="Asset pagination"] a.page-numbers.next:hover {
    color: #fd7e14;
    background: transparent;
}

/* Dots (...) */
nav[aria-label="Asset pagination"] .page-numbers.dots {
    color: #6c757d;
    border: none;
    cursor: default;
}

/* Responsif Mobile */
@media (max-width: 576px) {
    nav[aria-label="Asset pagination"] {
        justify-content: center;
    }
    nav[aria-label="Asset pagination"] .page-numbers:not(.prev):not(.next) {
        width: 32px;
        height: 32px;
    }
}

.list-historical li {
    font-weight: 600;
    border-bottom: 1px #d2d2d2 solid;
}

/* Styling Tabel Support Investor */
.table-support thead tr.bg-light-grey {
    background-color: #F0F2F5 !important; 
}

.table-support thead th {
    font-weight: 700;
    color: #333;
    font-size: 0.9rem;
    letter-spacing: 0.2px;
}

.table-support tbody td {
    border-bottom: 1px solid #EDEDED;
    vertical-align: top;
}

.table-support .lh-base {
    line-height: 1.6 !important;
}

.table-support tbody tr:last-child td {
    border-bottom: none;
}

.icon-document-apex {
    width: 64px;
    height: 64px;
    /* background-color: #FFF5EC; */ /* Warna dasar kotak */
    border-radius: 16px;
    flex-shrink: 0;
    
    /* Memasukkan ikon melalui CSS */
    background-image: url('assets/img/icon-document.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 64px; /* Mengatur ukuran ikon di dalam kotak */
    transition: transform 0.3s ease;
}

/* Efek interaktif saat kartu di-hover */

.gallery-item-fade {
    animation: fadeInUp 0.6s ease forwards;
}

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

footer.footer-apexindo ul.menu li {
    list-style: none;
}

footer.footer-apexindo ul.menu {
    padding-left: 0;
}

footer.footer-apexindo ul.menu li a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

footer.footer-apexindo ul.menu li a:hover {
    color: #f6881f;
}

.widget-footer {
    margin-bottom: 1.5rem;
}

/* Efek Transisi Halus */
.transition-all {
    transition: all 0.4s ease-in-out;
}

/* State Saat Navbar Di-scroll (Scrolled) */
.navbar.scrolled {
    background-color: #ffffff !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Perubahan Warna Teks Menu saat Scrolled */
.navbar.scrolled .nav-link {
    color: #333333 !important;
}

.navbar.scrolled .navbar-toggler-icon {
    filter: invert(1); /* Membuat icon burger jadi hitam */
}

/* Toggle Logo */
.navbar.scrolled .logo-white {
    display: none !important;
}

.navbar.scrolled .logo-color {
    display: block !important;
}

/* Warna Separator Bahasa dan Ikon Search */
.navbar.scrolled .lang-switcher .separator,
.navbar.scrolled .lang-switcher .search-icon i {
    color: #333333 !important;
}
.lang-switcher {
    margin-left: 5em !important;
}

h5.card-title a {
    color: #000;
}
a.nav-link.d-inline.p-0.active {
    color: #f9a949 !important;
    font-weight: 700;
}

span.mx-1.separator {
    color: #fff;
}
.btn-apexindo {
    background-color: #ffc107;
}
.btn-apexindo:hover {
    background-color: #f58220;
}
/* Hero Background Settings */
.hero-bg-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 6s ease-in-out; /* Efek Zoom Lambat */
}

.carousel-item.active .hero-bg-overlay {
    transform: scale(1.1);
}

/* Custom Indicators (Garis Horisontal) */
.custom-indicators button {
    width: 40px !important;
    height: 4px !important;
    background-color: rgba(255,255,255,0.4) !important;
    border: none !important;
    margin-right: 10px !important;
    transition: all 0.3s ease !important;
}

.custom-indicators .active {
    background-color: #F58220 !important; /* Orange Apexindo */
    width: 70px !important;
}

/* Text Animation */
.animate-text {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.active .animate-text {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 { transition-delay: 0.3s; }

/* Custom Control Arrows */
.custom-control {
    width: 5%;
    opacity: 0;
    transition: opacity 0.3s;
}

#heroApexindo:hover .custom-control {
    opacity: 1;
}

/* Warna default (Hitam) untuk semua card */
.business-card .card-img-overlay {
    background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
    transition: all 0.5s ease;
}

/* OTOMATIS ORANGE: Slide ke-2 dalam pandangan (Desktop) */
@media (min-width: 992px) {
    .swiper-slide-next .business-card .card-img-overlay,
    .swiper-slide-prev .business-card .card-img-overlay { 
        background: linear-gradient(0deg, rgba(245, 130, 32, 0.9) 0%, rgba(245, 130, 32, 0.2) 100%);
    }
    
    .swiper-slide-next .business-card {
        transform: scale(1); /* Sedikit lebih besar untuk highlight */
        z-index: 2;
    }
}
.swiper {
    padding: 11px;
}

/* Untuk Mobile, biasanya slide pertama yang aktif yang jadi orange */

@media (max-width: 767px) {
    .swiper-slide-next .business-card .card-img-overlay, .swiper-slide-prev .business-card .card-img-overlay {
        background: linear-gradient(0deg, rgba(245, 130, 32, 0.9) 0%, rgba(245, 130, 32, 0.2) 100%);
    }
}

/* Limit Navigasi maksimal 4 item */
.safety-nav-wrapper {
    max-height: 400px; /* Sesuaikan dengan tinggi 4 button + margin */
    overflow-y: auto;
    padding-right: 10px;
}

/* Custom Scrollbar */
.safety-nav-wrapper::-webkit-scrollbar {
    width: 4px;
}
.safety-nav-wrapper::-webkit-scrollbar-thumb {
    background: #F58220;
    border-radius: 10px;
}

.safety-tab {
    height: 85px;
    background-size: cover;
    border-radius: 12px !important;
    color: white !important;
    font-weight: bold;
    transition: 0.3s;
}

/* Button Zoom Style */
.btn-zoom {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    opacity: 0;
    transform: translateY(-10px);
}

.group:hover .btn-zoom {
    opacity: 1;
    transform: translateY(0);
}

.btn-zoom:hover {
    background-color: #F58220;
    color: white;
}

.btn-noborder {
    border: 0;
}

.rounded-6 {
    border-radius: 30px;
}
button:focus:not(:focus-visible) {
    box-shadow: none;
}
.offcanvas-body ul#menu-primary-mega-menu {
    align-items: inherit !important;
}
.stat-number {
    font-variant-numeric: tabular-nums; /* Menjaga lebar angka tetap konsisten saat berganti */
    transition: color 0.3s ease;
}

.stat-item:hover .stat-number {
    color: #F58220 !important; /* Warna orange saat hover */
}
li.breadcrumb-item.active {
    max-width: 215px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.carousel-control-next-icon , .carousel-control-prev-icon{
    display: none !important;
}
.bg-img-popup {
    background: #fff;
    border-radius: 23px;
}

@media (max-width: 768px){
 li.nav-item a.nav-link, .navbar-nav .nav-link.show {
    color: #333;
}
}
@media (max-width: 950px){
    span.count {
        font-size: 34px;
    }
    .nav-link {
        color: #000;
    }
    .border-end {
        border-right: 1px solid #ffffff !important;
    }
    .megamenu-list li.menu-item {
        display: block !important;
    }
}
.megamenu-list li {
    padding: 0;
}

.submenu-display-area {
    transition: opacity 0.2s ease-in-out;
}

.menu-dynamic-img {
    transition: opacity 0.3s ease-in-out;
}

/* Memastikan area hover tidak terputus saat kursor pindah antar kolom */
.megamenu-list .menu-item {
    padding: 10px 15px;
    margin-bottom: 2px;
    border-radius: 8px;
    cursor: pointer;
}