/* ============================================
           CSS VARIABLES & GLOBAL RESET
           ============================================ */
   :root {
       --primary: #009966;
       --primary-light: #00a67d;
       --primary-dark: #005c44;
       --primary-gradient: linear-gradient(135deg,
               #009966 0%,
               #00a67d 50%,
               #00c896 100%);
       --accent-gold: #d4a843;
       --accent-gold-light: #f0d78c;
       --bg-light: #f5f7fa;
       --bg-section: #fafbfd;
       --text-dark: #1a1f36;
       --text-body: #4a5568;
       --text-muted: #8492a6;
       --white: #ffffff;
       --border-color: #e8ecf1;
       --radius: 16px;
       --radius-sm: 10px;
       --radius-lg: 24px;
       --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
       --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
       --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
       --shadow-primary: 0 8px 30px rgba(0, 120, 90, 0.2);
       --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
       --transition-fast: all 0.2s ease;
   }

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   html {
       scroll-behavior: smooth;
   }

   body {
       font-family:
           "Plus Jakarta Sans",
           -apple-system,
           BlinkMacSystemFont,
           sans-serif;
       color: var(--text-body);
       background-color: var(--white);
       line-height: 1.7;
       overflow-x: hidden;
   }

   a {
       text-decoration: none;
       color: inherit;
       transition: var(--transition-fast);
   }

   img {
       max-width: 100%;
       height: auto;
       display: block;
   }

   .section-padding {
       padding: 100px 0;
   }

   .bg-section {
       background-color: var(--bg-section);
   }

   /* ============================================
           SECTION HEADER
           ============================================ */
   .section-header {
       text-align: center;
       margin-bottom: 60px;
   }

   .section-header .badge-label {
       display: inline-block;
       padding: 6px 20px;
       border-radius: 50px;
       background: linear-gradient(135deg,
               rgba(0, 120, 90, 0.08),
               rgba(0, 166, 125, 0.12));
       color: var(--primary);
       font-size: 0.8rem;
       font-weight: 600;
       letter-spacing: 1.5px;
       text-transform: uppercase;
       margin-bottom: 16px;
   }

   .section-header h2 {
       font-size: 2.5rem;
       font-weight: 800;
       color: var(--text-dark);
       margin-bottom: 16px;
       letter-spacing: -0.5px;
   }

   .section-header p {
       font-size: 1.1rem;
       color: var(--text-muted);
       max-width: 600px;
       margin: 0 auto;
   }

   /* ============================================
           NAVBAR - MEGA DROPDOWN STYLE
           ============================================ */
   .top-bar {
       background: var(--primary-gradient);
       color: rgba(255, 255, 255, 0.9);
       font-size: 0.8rem;
       padding: 8px 0;
   }

   .top-bar a {
       color: rgba(255, 255, 255, 0.9);
   }

   .top-bar a:hover {
       color: var(--white);
   }

   .top-bar .top-bar-left {
       display: flex;
       gap: 20px;
       align-items: center;
   }

   .top-bar .top-bar-right {
       display: flex;
       gap: 16px;
       align-items: center;
   }

   .top-bar .social-icon {
       width: 26px;
       height: 26px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.15);
       transition: var(--transition-fast);
       font-size: 0.7rem;
   }

   .top-bar .social-icon:hover {
       background: rgba(255, 255, 255, 0.3);
   }

   .navbar-main {
       background: transparent;
       transition: var(--transition);
       padding: 0;
       border: none;
       box-shadow: none;
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 1030;
       margin-top: 48px;
   }

   .navbar-main.scrolled {
       background: rgba(255, 255, 255, 0.7);
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
       box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
       padding: 0;
       margin-top: 0;
   }

   /* When scrolled, revert text colors to normal */
   .navbar-main.scrolled .nav-link {
       color: var(--text-dark) !important;
   }

   .navbar-main.scrolled .nav-link:hover,
   .navbar-main.scrolled .nav-link.active {
       color: var(--primary) !important;
   }

   .navbar-main.scrolled .nav-link::after {
       background: var(--primary-gradient);
   }

   .navbar-main.scrolled .navbar-brand {
       color: var(--primary);
   }

   .navbar-main.scrolled .navbar-brand span {
       color: var(--accent-gold);
   }

   .navbar-main.scrolled .navbar-toggler {
       border: none;
       color: var(--primary);
   }

   .navbar-main.scrolled .navbar-toggler-icon {
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23009966' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
   }

   .navbar-main .navbar-brand {
       font-weight: 800;

       font-size: 1.6rem;
       color: var(--white);
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 20px 0;
       transition: var(--transition-fast);
   }

   .navbar-main .navbar-brand .brand-icon {
       width: 45px;
       height: 45px;
       background: var(--primary-gradient);
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       font-size: 1.2rem;
       box-shadow: 0 4px 12px rgba(0, 120, 90, 0.3);
   }

   .navbar-main .navbar-brand span {
       color: var(--accent-gold-light);
   }

   .navbar-main .navbar-toggler {
       border: none;
       border-radius: var(--radius-sm);
       padding: 6px 12px;
       color: white;
       box-shadow: none;
       transition: var(--transition-fast);
   }

   .navbar-main .navbar-toggler:focus {
       box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
   }

   .navbar-main .navbar-toggler-icon {
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
   }

   .navbar-main .nav-item {
       position: relative;
   }

   .navbar-main .nav-link {
       font-weight: 600;
       font-size: 0.9rem;
       color: rgba(255, 255, 255, 0.9) !important;
       padding: 28px 16px !important;
       transition: var(--transition-fast);
       letter-spacing: 0.2px;
       position: relative;
   }

   .navbar-main .nav-link::after {
       content: "";
       position: absolute;
       bottom: 0;
       left: 16px;
       right: 16px;
       height: 3px;
       background: rgba(255, 255, 255, 0.8);
       border-radius: 3px 3px 0 0;
       transform: scaleX(0);
       transition: transform 0.3s ease;
   }

   .navbar-main .nav-link:hover::after,
   .navbar-main .nav-link.active::after {
       transform: scaleX(1);
   }

   .navbar-main .nav-link:hover {
       color: var(--white) !important;
   }

   .navbar-main .nav-link.active {
       color: var(--white) !important;
   }

   /* Dropdown Mega Menu Styling */
   .navbar-main .dropdown-menu {
       border: none;
       border-radius: 0 0 var(--radius-sm) var(--radius-sm);
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
       padding: 0;
       margin-top: 0 !important;
       animation: dropdownFade 0.25s ease;
       border-top: 3px solid var(--primary);
       background: #f0f0f0;
   }

   @media (min-width: 992px) {

       /* Enable hover to open dropdowns on desktop */
       .navbar-main .dropdown:hover>.dropdown-menu {
           display: block;
           animation: dropdownFade 0.25s ease;
       }

       .navbar-main .dropdown:hover>.dropdown-menu.mega-menu {
           display: flex;
       }

       /* Prevent overflow: align all dropdowns to the right so they open towards the left */
       .navbar-main .nav-item .dropdown-menu {
           right: 0;
           left: auto;
       }
   }

   /* Mega menu - multi column layout */
   .navbar-main .dropdown-menu.mega-menu {
       min-width: 520px;
       padding: 28px 30px;
       flex-wrap: wrap;
       gap: 0 40px;
   }

   /* Only apply display flex when the dropdown is shown by Bootstrap */
   .navbar-main .dropdown-menu.mega-menu.show {
       display: flex;
   }

   .mega-menu .mega-col {
       min-width: 200px;
       flex: 1;
   }

   .mega-menu .mega-col-title {
       font-size: 0.95rem;
       font-weight: 800;
       color: var(--text-dark);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       margin-bottom: 12px;
       padding-bottom: 8px;
       border-bottom: 2px solid var(--primary);
       display: inline-block;
   }

   .mega-menu .mega-col ul {
       list-style: none;
       padding: 0;
       margin: 0 0 20px 0;
   }

   .mega-menu .mega-col ul li a {
       display: block;
       padding: 7px 0;
       font-size: 0.88rem;
       font-weight: 500;
       color: #555;
       transition: var(--transition-fast);
       text-decoration: none;
   }

   .mega-menu .mega-col ul li a:hover {
       color: var(--primary);
       padding-left: 6px;
   }

   /* Single column dropdown (for smaller menus) */
   .navbar-main .dropdown-menu.single-col {
       min-width: 260px;
       padding: 16px 20px;
   }

   .single-col .mega-col-title {
       font-size: 0.9rem;
       font-weight: 800;
       color: var(--text-dark);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       margin-bottom: 10px;
       padding-bottom: 6px;
       border-bottom: 2px solid var(--primary);
       display: inline-block;
   }

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

   .single-col ul li a {
       display: block;
       padding: 7px 0;
       font-size: 0.88rem;
       font-weight: 500;
       color: #555;
       transition: var(--transition-fast);
       text-decoration: none;
   }

   .single-col ul li a:hover {
       color: var(--primary);
       padding-left: 6px;
   }

   @keyframes dropdownFade {
       from {
           opacity: 0;
           transform: translateY(8px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .btn-nav-cta {
       background: var(--primary-gradient);
       color: white !important;
       border: none;
       padding: 10px 24px !important;
       border-radius: 50px !important;
       font-weight: 600 !important;
       font-size: 0.88rem !important;
       letter-spacing: 0.3px;
       box-shadow: 0 4px 15px rgba(0, 120, 90, 0.25);
       transition: var(--transition) !important;
       margin-left: 10px;
   }

   .btn-nav-cta:hover {
       box-shadow: 0 6px 25px rgba(0, 120, 90, 0.35);
       transform: translateY(-2px);
       color: white !important;
   }

   /* ============================================
           HERO SECTION
           ============================================ */
   .hero-section {
       position: relative;
       height: 100vh;
       min-height: 650px;
       overflow: hidden;
   }

   .hero-slide {
       position: absolute;
       inset: 0;
       opacity: 0;
       transition: opacity 1s ease-in-out;
       z-index: 1;
   }

   .hero-slide.active {
       opacity: 1;
       z-index: 2;
   }

   .hero-slide::before {
       content: "";
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg,
               rgba(0, 40, 30, 0.85) 0%,
               rgba(0, 60, 45, 0.6) 40%,
               rgba(0, 0, 0, 0.2) 100%);
       z-index: 1;
   }

   .hero-slide img {
       position: absolute;
       inset: 0;
       z-index: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       transform: scale(1.05);
       animation: heroZoom 12s ease-in-out infinite alternate;
   }

   @keyframes heroZoom {
       0% {
           transform: scale(1.05);
       }

       100% {
           transform: scale(1.15);
       }
   }

   .hero-content {
       position: relative;
       z-index: 10;
       height: 100%;
       display: flex;
       align-items: center;
   }

   .hero-text {
       max-width: 650px;
       color: white;
   }

   .hero-text .hero-badge {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 8px 20px;
       border-radius: 50px;
       background: rgba(255, 255, 255, 0.12);
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 255, 255, 0.15);
       font-size: 0.85rem;
       font-weight: 500;
       margin-bottom: 24px;
       color: var(--accent-gold-light);
   }

   .hero-text h1 {
       font-size: 3.8rem;
       font-weight: 800;
       line-height: 1.15;
       margin-bottom: 20px;
       letter-spacing: -1px;
   }

   .hero-text h1 .text-highlight {
       background: linear-gradient(135deg,
               var(--accent-gold-light),
               var(--accent-gold));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }

   .hero-text p {
       font-size: 1.15rem;
       opacity: 0.9;
       margin-bottom: 36px;
       line-height: 1.8;
   }

   .hero-buttons {
       display: flex;
       gap: 16px;
       flex-wrap: wrap;
   }

   .hero-buttons .btn-hero-primary {
       padding: 14px 36px;
       background: var(--primary-gradient);
       color: white;
       border: none;
       border-radius: 50px;
       font-weight: 600;
       font-size: 1rem;
       box-shadow: 0 6px 25px rgba(0, 120, 90, 0.35);
       transition: var(--transition);
   }

   .hero-buttons .btn-hero-primary:hover {
       transform: translateY(-3px);
       box-shadow: 0 10px 35px rgba(0, 120, 90, 0.45);
   }

   .hero-buttons .btn-hero-outline {
       padding: 14px 36px;
       background: transparent;
       color: white;
       border: 2px solid rgba(255, 255, 255, 0.4);
       border-radius: 50px;
       font-weight: 600;
       font-size: 1rem;
       backdrop-filter: blur(5px);
       transition: var(--transition);
   }

   .hero-buttons .btn-hero-outline:hover {
       background: rgba(255, 255, 255, 0.1);
       border-color: white;
       transform: translateY(-3px);
   }

   /* Hero Indicators Wrapper */
   .hero-indicators-wrapper {
       position: absolute;
       bottom: 150px;
       right: 40px;
       z-index: 20;
       display: flex;
       align-items: center;
       gap: 15px;
   }

   @media (max-width: 768px) {
       .hero-indicators-wrapper {
           bottom: 40px;
           right: 40%;
           transform: translateX(50%);
       }
   }

   .slider-nav-btn {
       background: rgba(255, 255, 255, 0.15);
       border: 1px solid rgba(255, 255, 255, 0.25);
       color: #fff;
       width: 45px;
       height: 45px;
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: var(--transition);
       backdrop-filter: blur(10px);
   }

   .slider-nav-btn:hover {
       background: var(--primary);
       border-color: var(--primary);
       color: white;
   }

   /* Hero Indicators */
   .hero-indicators {
       position: static !important;
       flex-direction: row !important;
       gap: 10px !important;
       background: rgba(255, 255, 255, 0.15);
       padding: 10px 20px;
       border-radius: 30px;
       border: 1px solid rgba(255, 255, 255, 0.25);
       backdrop-filter: blur(10px);
       transform: none !important;
       display: flex;
   }

   .hero-indicators .indicator {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background-color: rgba(255, 255, 255, 0.5);
       cursor: pointer;
       transition: var(--transition);
       border: none;
       margin: 0;
   }

   .hero-indicators .indicator.active {
       background: var(--primary);
       width: 25px;
       border-radius: 10px;
       box-shadow: 0 0 10px rgba(0, 153, 102, 0.5);
   }

   /* Hero Floating Stats */
   .hero-stats {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       z-index: 10;
   }

   .hero-stats-inner {
       background: rgba(255, 255, 255, 0.1);
       backdrop-filter: blur(20px);
       border: 1px solid rgba(255, 255, 255, 0.15);
       border-radius: var(--radius-lg) var(--radius-lg) 0 0;
       padding: 30px 50px;
   }

   .stat-item {
       text-align: center;
       color: white;
   }

   .stat-item h3 {
       font-size: 2rem;
       font-weight: 800;
       margin-bottom: 4px;
   }

   .stat-item p {
       font-size: 0.85rem;
       opacity: 0.8;
   }

   /* ============================================
           FEATURE CARDS (Quick Access)
           ============================================ */
   .feature-cards-section {
       margin-top: -60px;
       position: relative;
       z-index: 20;
       padding-bottom: 80px;
   }

   .feature-card {
       background: var(--white);
       border-radius: var(--radius);
       padding: 35px 28px;
       box-shadow: var(--shadow-md);
       text-align: center;
       transition: var(--transition);
       border: 1px solid transparent;
       height: 100%;
   }

   .feature-card:hover {
       transform: translateY(-8px);
       box-shadow: var(--shadow-lg);
       border-color: rgba(0, 120, 90, 0.1);
   }

   .feature-card .icon-wrap {
       width: 70px;
       height: 70px;
       border-radius: 18px;
       background: linear-gradient(135deg,
               rgba(0, 120, 90, 0.08),
               rgba(0, 166, 125, 0.12));
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 20px;
       font-size: 1.6rem;
       color: var(--primary);
       transition: var(--transition);
   }

   .feature-card:hover .icon-wrap {
       background: var(--primary-gradient);
       color: white;
       transform: scale(1.1) rotate(-5deg);
   }

   .feature-card h5 {
       font-size: 1.1rem;
       font-weight: 700;
       color: var(--text-dark);
       margin-bottom: 10px;
   }

   .feature-card p {
       font-size: 0.88rem;
       color: var(--text-muted);
       margin-bottom: 0;
       line-height: 1.6;
   }

   /* Stats Section */
   .stats-section {
       margin-top: -10px;
       position: relative;
       z-index: 20;
   }

   .stats-bar-inner {
       background: white;
       border-radius: var(--radius);
       box-shadow: var(--shadow-lg);
       padding: 30px;
       border: 1px solid var(--border-color);
   }

   .stats-bar-inner h3 {
       font-size: 2.2rem;
       font-weight: 800;
       color: var(--primary);
   }

   .stats-bar-inner p {
       color: var(--text-muted);
       font-weight: 500;
       margin: 0;
   }

   /* Produk & Layanan Section */
   .produk-layanan-header .badge-label {
       background: rgba(0, 166, 125, 0.1);
       color: var(--primary);
       padding: 6px 16px;
       border-radius: 50px;
       font-size: 0.8rem;
       font-weight: 700;
       letter-spacing: 1px;
       display: inline-block;
       margin-bottom: 16px;
   }

   .produk-layanan-header h2 {
       font-size: 2.5rem;
       font-weight: 800;
       color: var(--text-dark);
       margin-bottom: 16px;
   }

   .produk-layanan-header p {
       color: var(--text-muted);
       font-size: 1.1rem;
       max-width: 600px;
       margin: 0 auto;
   }

   .produk-layanan-divider {
       display: flex;
       justify-content: center;
       gap: 8px;
       margin-top: 24px;
   }

   .produk-layanan-divider span {
       height: 4px;
       background: var(--primary);
       border-radius: 4px;
   }

   .produk-layanan-divider span.short {
       width: 12px;
   }

   .produk-layanan-divider span.long {
       width: 40px;
   }

   .layanan-icon.icon-simpanan,
   .layanan-icon.icon-kpr,
   .layanan-icon.icon-mobile,
   .layanan-icon.icon-umkm {
       background: linear-gradient(135deg, rgba(0, 153, 102, 0.08), rgba(0, 153, 102, 0.03));
       color: var(--primary);
       border: 1px solid rgba(0, 153, 102, 0.15);
   }

   .layanan-icon svg {
       width: 28px;
       height: 28px;
       stroke-width: 2px;
   }

   .layanan-link svg {
       width: 16px;
       height: 16px;
       stroke-width: 2.5px;
       margin-top: 1px;
   }

   /* Layanan Cards */
   .layanan-card {
       background: white;
       border: 1px solid #f0f0f0;
       border-radius: 16px;
       padding: 32px 24px;
       height: 100%;
       transition: all 0.3s ease;
   }

   .layanan-card:hover {
       box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
       transform: translateY(-5px);
       border-color: transparent;
   }

   .layanan-icon {
       width: 56px;
       height: 56px;
       border-radius: 16px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.5rem;
       margin-bottom: 24px;
   }

   .layanan-card h4 {
       font-size: 1.25rem;
       font-weight: 800;
       margin-bottom: 12px;
       color: var(--text-dark);
   }

   .layanan-card p {
       color: #666;
       font-size: 0.95rem;
       line-height: 1.6;
       margin-bottom: 24px;
   }

   .layanan-link {
       color: var(--primary);
       font-weight: 700;
       text-decoration: none;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       font-size: 0.95rem;
       transition: gap 0.3s ease;
   }

   .layanan-card:hover .layanan-link {
       gap: 12px;
   }

   /* FAB Chat */
   .fab-chat {
       position: fixed;
       bottom: 30px;
       right: 30px;
       width: 60px;
       height: 60px;
       background: #25d366;
       color: white;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 2rem;
       box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
       z-index: 1000;
       transition: all 0.3s ease;
       text-decoration: none;
   }

   .fab-chat:hover {
       transform: scale(1.1);
       color: white;
       box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
   }

   /* ============================================
           VIDEO TALKSHOW SECTION
           ============================================ */
   .video-card {
       border-radius: var(--radius);
       overflow: hidden;
       background: var(--white);
       box-shadow: var(--shadow-sm);
       transition: var(--transition);
       border: 1px solid var(--border-color);
       height: 100%;
   }

   .video-card:hover {
       box-shadow: var(--shadow-md);
       transform: translateY(-4px);
   }

   .video-thumb {
       position: relative;
       width: 100%;
       aspect-ratio: 16/9;
       overflow: hidden;
   }

   .video-thumb img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.6s ease;
   }

   .video-card:hover .video-thumb img {
       transform: scale(1.08);
   }

   .play-btn {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 56px;
       height: 56px;
       background: var(--primary-gradient);
       color: white;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.2rem;
       box-shadow: 0 4px 20px rgba(0, 120, 90, 0.4);
       transition: var(--transition);
       z-index: 2;
   }

   .video-card:hover .play-btn {
       transform: translate(-50%, -50%) scale(1.15);
       box-shadow: 0 6px 30px rgba(0, 120, 90, 0.5);
   }

   .play-btn-sm {
       width: 42px;
       height: 42px;
       font-size: 0.9rem;
   }

   .video-info {
       padding: 18px 20px;
   }

   .video-info h5 {
       font-size: 1rem;
       font-weight: 700;
       color: var(--text-dark);
       margin-bottom: 6px;
   }

   .video-info p {
       font-size: 0.82rem;
       color: var(--text-muted);
       margin-bottom: 0;
   }

   .main-video-card .video-thumb {
       aspect-ratio: 21/9;
   }

   .main-video-card .video-info h5 {
       font-size: 1.4rem;
   }

   .main-video-card .play-btn {
       width: 70px;
       height: 70px;
       font-size: 1.5rem;
   }

   /* ============================================
           PROMO SECTION
           ============================================ */
   .promo-card {
       border-radius: var(--radius);
       overflow: hidden;
       background: var(--white);
       box-shadow: var(--shadow-sm);
       transition: var(--transition);
       border: 1px solid var(--border-color);
       height: 100%;
   }

   .promo-card:hover {
       box-shadow: var(--shadow-md);
       transform: translateY(-6px);
   }

   .promo-card .promo-img {
       position: relative;
       overflow: hidden;
   }

   .promo-card .promo-img img {
       width: 100%;
       aspect-ratio: 4/3;
       object-fit: cover;
       transition: transform 0.6s ease;
   }

   .promo-card:hover .promo-img img {
       transform: scale(1.08);
   }

   .promo-card .promo-img .promo-badge {
       position: absolute;
       top: 16px;
       left: 16px;
       padding: 6px 14px;
       border-radius: 50px;
       background: var(--primary-gradient);
       color: white;
       font-size: 0.75rem;
       font-weight: 600;
   }

   .promo-body {
       padding: 24px;
   }

   .promo-body h5 {
       font-size: 1.15rem;
       font-weight: 700;
       color: var(--text-dark);
       margin-bottom: 10px;
   }

   .promo-body p {
       font-size: 0.9rem;
       color: var(--text-muted);
       margin-bottom: 18px;
   }

   .btn-promo {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       color: var(--primary);
       font-weight: 600;
       font-size: 0.9rem;
       transition: var(--transition-fast);
   }

   .btn-promo:hover {
       color: var(--primary-dark);
       gap: 12px;
   }

   /* ============================================
           CTA / FORM SECTION
           ============================================ */
   .cta-section {
       background: var(--primary-gradient);
       position: relative;
       overflow: hidden;
   }

   .cta-section::before {
       content: "";
       position: absolute;
       top: -50%;
       right: -20%;
       width: 600px;
       height: 600px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.04);
   }

   .cta-section::after {
       content: "";
       position: absolute;
       bottom: -30%;
       left: -10%;
       width: 400px;
       height: 400px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.04);
   }

   .cta-content {
       position: relative;
       z-index: 2;
   }

   .cta-content h2 {
       font-size: 2.5rem;
       font-weight: 800;
       color: white;
       margin-bottom: 16px;
   }

   .cta-content p {
       color: rgba(255, 255, 255, 0.85);
       font-size: 1.1rem;
       margin-bottom: 40px;
   }

   .cta-form .form-control {
       padding: 16px 20px;
       border-radius: var(--radius);
       border: 2px solid rgba(255, 255, 255, 0.2);
       background: rgba(255, 255, 255, 0.1);
       color: white;
       font-family: "Inter", sans-serif;
       font-size: 0.95rem;
       backdrop-filter: blur(5px);
       transition: var(--transition-fast);
   }

   .cta-form .form-control::placeholder {
       color: rgba(255, 255, 255, 0.6);
   }

   .cta-form .form-control:focus {
       background: rgba(255, 255, 255, 0.15);
       border-color: rgba(255, 255, 255, 0.5);
       box-shadow: none;
       color: white;
   }

   .cta-form .btn-cta {
       padding: 16px 40px;
       background: var(--text-dark);
       color: white;
       border: none;
       border-radius: var(--radius);
       font-weight: 700;
       font-size: 1rem;
       transition: var(--transition);
       width: 100%;
   }

   .cta-form .btn-cta:hover {
       background: #0f172a;
       transform: translateY(-2px);
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
   }

   /* Promo Slider */
   /* Promo Carousel Indicators */
   .promo-carousel-indicators {
       display: flex;
       gap: 8px;
   }

   .promo-carousel-indicators button {
       width: 12px !important;
       height: 12px !important;
       border-radius: 50% !important;
       background-color: rgba(0, 166, 125, 0.3) !important;
       border: none !important;
       padding: 0 !important;
       margin: 0 !important;
       transition: var(--transition) !important;
       text-indent: -999px;
   }

   .promo-carousel-indicators button.active {
       background-color: var(--primary) !important;
       transform: scale(1.3);
   }

   /* Gallery Filter */
   .gallery-filter {
       display: flex;
       justify-content: center;
       gap: 10px;
       margin-bottom: 30px;
       flex-wrap: wrap;
   }

   .gallery-filter button {
       background: rgba(0, 166, 125, 0.1);
       color: var(--primary);
       border: none;
       padding: 8px 24px;
       border-radius: 50px;
       font-weight: 600;
       font-size: 0.9rem;
       transition: var(--transition);
   }

   .gallery-filter button.active,
   .gallery-filter button:hover {
       background: var(--primary);
       color: white;
       box-shadow: 0 4px 15px rgba(0, 166, 125, 0.3);
   }

   .hide-gallery-item {
       display: none !important;
   }

   /* ============================================
           GALLERY MASONRY
           ============================================ */
   .gallery-item {
       border-radius: var(--radius);
       overflow: hidden;
       position: relative;
       margin-bottom: 24px;
       cursor: pointer;
   }

   .gallery-item img {
       width: 100%;
       display: block;
       transition: transform 0.6s ease;
   }

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

   .gallery-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg,
               rgba(0, 120, 90, 0.6),
               rgba(0, 40, 30, 0.7));
       opacity: 0;
       transition: var(--transition);
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       font-size: 1.8rem;
   }

   .gallery-item:hover .gallery-overlay {
       opacity: 1;
   }

   /* ============================================
           CUSTOMER SERVICE SECTION
           ============================================ */
   .cs-section .cs-image-wrapper {
       position: relative;
   }

   .cs-section .cs-image-wrapper img {
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-lg);
   }

   .cs-section .cs-image-wrapper::before {
       content: "";
       position: absolute;
       top: -20px;
       left: -20px;
       width: 100px;
       height: 100px;
       border: 3px solid var(--primary-light);
       border-radius: var(--radius-lg);
       opacity: 0.3;
       z-index: -1;
   }

   .cs-section .cs-image-wrapper::after {
       content: "";
       position: absolute;
       bottom: -15px;
       right: -15px;
       width: 80px;
       height: 80px;
       background: var(--primary-gradient);
       border-radius: var(--radius);
       opacity: 0.15;
       z-index: -1;
   }

   .cs-content-box h2 {
       font-size: 2.5rem;
       font-weight: 800;
       color: var(--primary);
       margin-bottom: 20px;
   }

   .cs-content-box p {
       font-size: 1.05rem;
       color: var(--text-body);
       margin-bottom: 32px;
       line-height: 1.9;
   }

   /* ============================================
           OLD LOKASI SECTION CSS (COMMENTED FOR REFERENCE)
           ============================================ */
   /*
    .lokasi-section {
        background-color: var(--primary);
        background-image: url('../img/map.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 80px 0;
        color: white;
        position: relative;
    }

    .lokasi-section h2 {
        color: white;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .lokasi-section p {
        font-size: 1.05rem;
        margin-bottom: 30px;
        opacity: 0.9;
        line-height: 1.8;
    }

    .btn-lokasi {
        background-color: white;
        color: var(--primary);
        padding: 12px 30px;
        border-radius: 50px;
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        transition: var(--transition);
    }

    .btn-lokasi:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        color: var(--primary);
    }
    */

   /* ============================================
           BUTTONS (Global)
           ============================================ */
   .btn-primary-custom {
       background: var(--primary);
       color: white;
       border: none;
       padding: 14px 32px;
       border-radius: 50px;
       font-weight: 600;
       transition: var(--transition);
       box-shadow: 0 4px 15px rgba(0, 120, 90, 0.25);
   }

   .btn-primary-custom:hover {
       transform: translateY(-2px);
       box-shadow: var(--shadow-primary);
       color: #005c44;
   }

   .btn-outline-custom {
       border: 2px solid var(--primary);
       color: var(--primary);
       padding: 12px 30px;
       border-radius: 50px;
       font-weight: 600;
       background: transparent;
       transition: var(--transition);
   }

   .btn-outline-custom:hover {
       background: var(--primary);
       color: white;
       transform: translateY(-2px);
   }

   .btn-youtube {
       background: #ff0000;
       color: white;
       border: none;
       padding: 12px 30px;
       border-radius: 50px;
       font-weight: 600;
       display: inline-flex;
       align-items: center;
       transition: var(--transition);
       box-shadow: 0 4px 15px rgba(255, 0, 0, 0.25);
   }

   .btn-youtube:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 25px rgba(255, 0, 0, 0.4);
       color: white;
   }

   /* ============================================
           FOOTER
           ============================================ */
   .site-footer {
       background: linear-gradient(180deg, #00382a 0%, #002a1f 100%);
       color: rgba(255, 255, 255, 0.85);
       padding-top: 80px;
   }

   .footer-brand {
       font-size: 1.6rem;
       font-weight: 800;
       color: white;
       display: flex;
       align-items: center;
       gap: 12px;
       margin-bottom: 20px;
   }

   .footer-brand .brand-icon {
       width: 42px;
       height: 42px;
       background: var(--primary-gradient);
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       font-size: 1.1rem;
   }

   .footer-brand .brand-title {
       color: #ffffff;
   }

   .footer-brand span.gold {
       color: var(--accent-gold);
   }

   .footer-tagline-container {
       display: inline-flex;
       align-items: center;
       margin-bottom: 16px;
   }

   .footer-tagline-pill {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       background: linear-gradient(135deg, rgba(212, 168, 67, 0.16) 0%, rgba(212, 168, 67, 0.06) 100%);
       border: 1px solid rgba(212, 168, 67, 0.4);
       color: var(--accent-gold-light, #f0d78c);
       padding: 5px 15px;
       border-radius: 50px;
       font-size: 0.86rem;
       font-weight: 600;
       letter-spacing: 0.4px;
       box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .footer-tagline-pill:hover {
       background: linear-gradient(135deg, rgba(212, 168, 67, 0.25) 0%, rgba(212, 168, 67, 0.12) 100%);
       border-color: rgba(212, 168, 67, 0.65);
       color: #ffffff;
       transform: translateY(-2px);
       box-shadow: 0 6px 20px rgba(212, 168, 67, 0.22);
   }

   .footer-desc {
       opacity: 0.85;
       margin-bottom: 24px;
       font-size: 0.9rem;
       line-height: 1.8;
   }

   .footer-social {
       display: flex;
       gap: 10px;
   }

   .footer-social a {
       width: 40px;
       height: 40px;
       border-radius: 10px;
       background: rgba(255, 255, 255, 0.08);
       display: flex;
       align-items: center;
       justify-content: center;
       transition: var(--transition);
       color: rgba(255, 255, 255, 0.7);
   }

   .footer-social a:hover {
       background: var(--primary-gradient);
       color: white;
       transform: translateY(-3px);
   }

   .footer-title {
       font-size: 1.1rem;
       font-weight: 700;
       color: white;
       margin-bottom: 24px;
       position: relative;
       padding-bottom: 12px;
   }

   .footer-title::after {
       content: "";
       position: absolute;
       bottom: 0;
       left: 0;
       width: 30px;
       height: 3px;
       background: var(--primary-gradient);
       border-radius: 3px;
   }

   .footer-links-list li {
       margin-bottom: 12px;
       list-style: none;
   }

   .footer-links-list li a {
       opacity: 0.7;
       transition: var(--transition-fast);
       font-size: 0.9rem;
       display: inline-flex;
       align-items: center;
       gap: 6px;
   }

   .footer-links-list li a:hover {
       opacity: 1;
       color: var(--primary-light);
       padding-left: 4px;
   }

   .footer-contact li {
       display: flex;
       align-items: flex-start;
       gap: 12px;
       margin-bottom: 16px;
       list-style: none;
       font-size: 0.9rem;
   }

   .footer-contact li i {
       color: var(--primary-light);
       margin-top: 3px;
       width: 16px;
       text-align: center;
   }

   .footer-bottom {
       border-top: 1px solid rgba(255, 255, 255, 0.08);
       padding: 24px 0;
       margin-top: 60px;
   }

   .footer-bottom p {
       font-size: 0.82rem;
       opacity: 0.6;
       margin-bottom: 0;
   }

   .footer-bottom-links a {
       font-size: 0.82rem;
       opacity: 0.6;
       transition: var(--transition-fast);
   }

   .footer-bottom-links a:hover {
       opacity: 1;
   }

   /* ============================================
           SCROLL TO TOP
           ============================================ */
   .scroll-top {
       position: fixed;
       bottom: 30px;
       right: 30px;
       width: 50px;
       height: 50px;
       border-radius: 14px;
       background: var(--primary-gradient);
       color: white;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.1rem;
       box-shadow: 0 6px 20px rgba(0, 120, 90, 0.3);
       transition: var(--transition);
       opacity: 0;
       visibility: hidden;
       z-index: 999;
       border: none;
       cursor: pointer;
   }

   .scroll-top.show {
       opacity: 1;
       visibility: visible;
   }

   .scroll-top:hover {
       transform: translateY(-4px);
       box-shadow: 0 10px 30px rgba(0, 120, 90, 0.4);
   }

   /* ============================================
           RESPONSIVE
           ============================================ */
   @media (max-width: 1199px) {
       .navbar-main .dropdown-menu.mega-menu {
           min-width: 450px;
           padding: 20px;
           gap: 0 20px;
       }

       .hero-text h1 {
           font-size: 3rem;
       }

       .section-header h2 {
           font-size: 2.2rem;
       }
   }

   @media (max-width: 991px) {
       .top-bar {
           display: none;
       }

       .hero-text h1 {
           font-size: 2.6rem;
       }

       .hero-stats-inner {
           padding: 20px 30px;
       }

       .stat-item h3 {
           font-size: 1.5rem;
       }

       .section-padding {
           padding: 70px 0;
       }

       .section-header {
           margin-bottom: 40px;
       }

       .navbar-main {
           position: fixed;
       }


       .navbar-main .navbar-collapse {
           background: var(--white);
           border-radius: 0 0 20px 20px;
           box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
           padding: 20px;
           margin-top: 0;
           border: none;
           max-height: 80vh;
           overflow-y: auto;
       }

       .mobile-menu-header {
           display: flex;
           justify-content: center;
           align-items: center;
           padding-bottom: 15px;
           margin-bottom: 15px;
           border-bottom: 1px solid #eaeaea;
       }

       .mobile-menu-header img {
           width: 45px;
       }

       .mobile-menu-header span {
           font-weight: 800;
           font-size: 1.2rem;
           margin-left: 10px;
           color: var(--primary);
       }

       /* Cascading Animation for nav items */
       .navbar-main .navbar-collapse .nav-item {
           opacity: 0;
           transform: translateX(-20px);
           transition: all 0.4s ease;
       }

       .navbar-main .navbar-collapse.show .nav-item {
           opacity: 1;
           transform: translateX(0);
       }

       .navbar-main .navbar-collapse.show .nav-item:nth-child(1) {
           transition-delay: 0.1s;
       }

       .navbar-main .navbar-collapse.show .nav-item:nth-child(2) {
           transition-delay: 0.15s;
       }

       .navbar-main .navbar-collapse.show .nav-item:nth-child(3) {
           transition-delay: 0.2s;
       }

       .navbar-main .navbar-collapse.show .nav-item:nth-child(4) {
           transition-delay: 0.25s;
       }

       .navbar-main .navbar-collapse.show .nav-item:nth-child(5) {
           transition-delay: 0.3s;
       }

       /* Animated Hamburger to X */
       .navbar-toggler {
           border: none;
           outline: none;
       }

       .navbar-toggler:focus {
           box-shadow: none;
       }

       .navbar-toggler-icon {
           background-image: none !important;
           position: relative;
           width: 24px;
           height: 2px;
           background-color: var(--white);
           transition: all 0.3s ease;
           display: inline-block;
           vertical-align: middle;
       }

       .navbar-main.scrolled .navbar-toggler-icon {
           background-color: var(--text-dark);
       }

       .navbar-toggler-icon::before,
       .navbar-toggler-icon::after {
           content: "";
           position: absolute;
           width: 24px;
           height: 2px;
           background-color: inherit;
           left: 0;
           transition: all 0.3s ease;
       }

       .navbar-toggler-icon::before {
           top: -8px;
       }

       .navbar-toggler-icon::after {
           top: 8px;
       }

       .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
           background-color: transparent !important;
       }

       .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
           top: 0;
           transform: rotate(45deg);
           background-color: var(--primary);
       }

       .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
           top: 0;
           transform: rotate(-45deg);
           background-color: var(--primary);
       }


       .navbar-main .navbar-collapse .nav-link {
           color: var(--text-dark) !important;
           padding: 12px 16px !important;
       }

       .navbar-main .navbar-collapse .nav-link:hover {
           color: var(--primary) !important;
       }

       .navbar-main .nav-link::after {
           display: none;
       }

       .navbar-main .dropdown-menu {
           box-shadow: none;
           border-radius: var(--radius-sm);
           border-top: none;
           padding: 12px 16px;
           background: var(--bg-light);
           animation: none;
       }

       .navbar-main .dropdown-menu.mega-menu {
           min-width: auto;
           flex-direction: column;
           gap: 0;
           padding: 12px 16px;
       }

       .navbar-main .dropdown-menu.single-col {
           min-width: auto;
           padding: 12px 16px;
       }

       .btn-nav-cta {
           margin-left: 0;
           margin-top: 10px;
           text-align: center;
           display: block;
       }

       .hero-stats {
           display: none;
       }

       .cs-section .cs-image-wrapper::before,
       .cs-section .cs-image-wrapper::after {
           display: none;
       }
   }

   @media (max-width: 767px) {
       body {
           font-size: 0.92rem;
           line-height: 1.6;
       }

       h1,
       .hero-text h1 {
           font-size: 1.8rem !important;
       }

       h2,
       .section-header h2,
       .cta-content h2,
       .cs-content-box h2,
       [style*="font-size: 2rem"] {
           font-size: 1.5rem !important;
           margin-bottom: 20px !important;
       }

       h3,
       [style*="font-size: 1.75rem"],
       [style*="font-size: 1.8rem"] {
           font-size: 1.3rem !important;
       }

       h4 {
           font-size: 1.1rem !important;
       }

       p,
       [style*="font-size: 1.15rem"],
       [style*="font-size: 1.1rem"],
       [style*="font-size: 1.05rem"] {
           font-size: 0.92rem !important;
           line-height: 1.6 !important;
       }

       .hero-text p {
           font-size: 0.95rem !important;
       }

       .hero-buttons .btn-hero-primary,
       .hero-buttons .btn-hero-outline {
           padding: 10px 24px;
           font-size: 0.88rem;
       }

       .section-padding {
           padding: 50px 0 !important;
       }

       .sejarah-detail-container .row {
           gap: 1.5rem !important;
           margin-bottom: 2rem !important;
           padding-bottom: 1.5rem !important;
       }
   }

   @media (max-width: 575px) {
       body {
           font-size: 0.88rem;
           line-height: 1.55;
       }

       h1,
       .hero-text h1 {
           font-size: 1.65rem !important;
       }

       h2,
       .section-header h2,
       .cta-content h2,
       .cs-content-box h2,
       [style*="font-size: 2rem"] {
           font-size: 1.35rem !important;
       }

       h3 {
           font-size: 1.2rem !important;
       }

       h4 {
           font-size: 1.05rem !important;
       }

       p,
       [style*="font-size: 1.15rem"],
       [style*="font-size: 1.1rem"],
       [style*="font-size: 1.05rem"] {
           font-size: 0.88rem !important;
           line-height: 1.55 !important;
       }

       .hero-buttons {
           flex-direction: column;
       }

       .hero-buttons .btn-hero-primary,
       .hero-buttons .btn-hero-outline {
           width: 100%;
           text-align: center;
       }
   }

   /* ============================================
           ANIMATIONS
           ============================================ */
   .fade-up {
       opacity: 0;
       transform: translateY(30px);
       transition:
           opacity 0.6s ease,
           transform 0.6s ease;
   }

   .fade-up.visible {
       opacity: 1;
       transform: translateY(0);
   }

   /* ============================================
           DETAIL PAGE (SIMPANAN)
           ============================================ */
   .benefit-card {
       background: var(--white);
       padding: 30px;
       border-radius: var(--radius);
       border: 1px solid var(--border-color);
       box-shadow: var(--shadow-sm);
       transition: var(--transition);
       height: 100%;
   }

   .benefit-card:hover {
       box-shadow: var(--shadow-md);
       transform: translateY(-5px);
       border-color: rgba(0, 153, 102, 0.2);
   }

   .benefit-icon {
       width: 50px;
       height: 50px;
       background: linear-gradient(135deg, rgba(0, 153, 102, 0.1), rgba(0, 153, 102, 0.05));
       color: var(--primary);
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.4rem;
       margin-bottom: 20px;
       transition: var(--transition);
   }

   .benefit-card:hover .benefit-icon {
       background: var(--primary-gradient);
       color: white;
       transform: scale(1.1) rotate(-5deg);
   }

   .benefit-card h5 {
       font-weight: 700;
       color: var(--text-dark);
       margin-bottom: 12px;
       font-size: 1.1rem;
   }

   .benefit-card p {
       color: var(--text-body);
       font-size: 0.95rem;
       line-height: 1.6;
       margin: 0;
   }

   .req-card {
       position: relative;
       background: var(--bg-section);
       padding: 30px;
       border-radius: var(--radius);
       z-index: 1;
       overflow: hidden;
       height: 100%;
       border: 1px solid transparent;
       transition: var(--transition);
   }

   .req-card:hover {
       background: var(--white);
       border-color: rgba(0, 153, 102, 0.2);
       box-shadow: var(--shadow-sm);
   }

   .req-num {
       position: absolute;
       top: -15px;
       right: -10px;
       font-size: 6rem;
       font-weight: 800;
       color: rgba(0, 153, 102, 0.04);
       z-index: -1;
       line-height: 1;
       transition: var(--transition);
   }

   .req-card:hover .req-num {
       color: rgba(0, 153, 102, 0.08);
       transform: scale(1.05);
   }

   .req-card h5 {
       font-weight: 700;
       color: var(--primary);
       margin-bottom: 10px;
   }

   .req-card p {
       color: var(--text-body);
       font-size: 0.95rem;
       margin: 0;
   }

   /* ============================================
           ABOUT PAGE REPORTS
           ============================================ */
   .report-link {
       display: block;
       color: #333;
       text-decoration: underline;
       font-size: 0.9rem;
       margin-bottom: 6px;
       transition: color 0.2s;
   }

   .report-link:hover {
       color: var(--primary);
   }

   .report-hr {
       border: 0;
       border-top: 1px solid #ddd;
       margin: 15px 0;
   }

   /* ============================================
           MOBILE CARD ADJUSTMENTS (2-col layout fix)
           ============================================ */
   @media (max-width: 768px) {

       /* Layanan Card Tweaks */
       .layanan-card {
           padding: 20px 15px;
       }

       .layanan-icon {
           width: 44px;
           height: 44px;
           font-size: 1.25rem;
           margin-bottom: 15px;
           border-radius: 12px;
       }

       .layanan-icon svg {
           width: 22px;
           height: 22px;
       }

       .layanan-card h4 {
           font-size: 0.95rem;
           margin-bottom: 8px;
       }

       .layanan-card p {
           font-size: 0.8rem;
           margin-bottom: 15px;
           line-height: 1.4;
       }

       .layanan-link {
           font-size: 0.8rem;
           gap: 6px;
       }

       .layanan-link svg {
           width: 14px;
           height: 14px;
       }

       /* Video Card Tweaks */
       .video-info {
           padding: 12px 10px;
       }

       .video-info h5 {
           font-size: 0.85rem;
           margin-bottom: 4px;
           line-height: 1.3;
       }

       .video-info p {
           font-size: 0.75rem;
       }

       .video-card .btn-play-sm {
           width: 40px;
           height: 40px;
           font-size: 1rem;
       }

       /* Promo Card Tweaks */
       .promo-body {
           padding: 12px 10px;
       }

       .promo-body h5 {
           font-size: 0.85rem;
           margin-bottom: 4px;
           line-height: 1.3;
       }

       .promo-body p {
           font-size: 0.75rem;
           margin-bottom: 10px;
           line-height: 1.4;
       }

       .promo-card .promo-img .promo-badge {
           top: 8px;
           left: 8px;
           padding: 4px 8px;
           font-size: 0.65rem;
       }

       .promo-body .btn-promo {
           font-size: 0.75rem;
           padding: 6px 12px;
       }

       .promo-body .btn-promo i,
       .promo-body .btn-promo svg {
           width: 12px !important;
           height: 12px !important;
       }

       /* Gallery Item Tweaks */
       .gallery-item {
           margin-bottom: 0;
           /* Let grid gap handle spacing */
       }

       .gallery-overlay {
           font-size: 1.2rem;
       }
   }

   /* ============================================
      RESPONSIVE REDESIGN (MOBILE FIRST)
      Overrides existing rules with strict breakpoints
      ============================================ */

   /* 1. Base Mobile (< 640px) */
   :root {
       --fluid-padding: 30px 16px;
   }

   .section-padding {
       padding: var(--fluid-padding) !important;
   }

   .container {
       padding-left: 16px !important;
       padding-right: 16px !important;
       max-width: 100% !important;
   }

   /* Custom Grid for precise column control */
   .bprs-grid {
       display: grid;
       gap: 16px;
       grid-template-columns: 1fr;
       /* Mobile: 1 col */
       width: 100%;
   }

   .bprs-grid>* {
       max-width: 100%;
   }

   /* Override bootstrap cols inside our grid */
   .bprs-grid [class*="col-"] {
       width: 100% !important;
       max-width: 100% !important;
       flex: none !important;
       padding-left: 0 !important;
       padding-right: 0 !important;
       margin: 0 !important;
   }

   .bprs-grid.mobile-cols-2 {
       grid-template-columns: repeat(2, 1fr);
       gap: 20px 16px;
   }

   /* Typography tweaks */
   h1,
   .hero-section h1 {
       font-size: clamp(2rem, 6vw + 1rem, 3.5rem) !important;
   }

   h2 {
       font-size: clamp(1.5rem, 5vw + 1rem, 2.5rem) !important;
   }

   /* Floating Elements */
   .fab-chat {
       bottom: 20px !important;
       right: 20px !important;
       transform: scale(0.85);
   }

   .fab-ai-assistant {
       bottom: 20px !important;
       left: 20px !important;
       right: auto !important;
       transform: scale(0.85);
   }

   .fab-ai-assistant .fab-tooltip {
       left: 75px !important;
       right: auto !important;
       transform: translateX(-10px) !important;
   }

   .fab-ai-assistant:hover .fab-tooltip {
       transform: translateX(0) !important;
   }

   .ai-chat-window {
       left: 20px !important;
       right: 20px !important;
       width: auto !important;
       bottom: 95px !important;
       max-width: 380px;
   }

   .scroll-top {
       bottom: 90px !important;
       right: 20px !important;
       transform: scale(0.85);
   }

   /* Navbar (Mobile) */
   .navbar-expand-lg .navbar-toggler {
       display: block !important;
   }

   .navbar-expand-lg .navbar-collapse {
       display: none !important;
   }

   .navbar-expand-lg .navbar-collapse.show {
       display: block !important;
   }

   .navbar-nav {
       flex-direction: column !important;
   }

   .nav-item {
       border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   }

   .nav-link {
       padding: 12px 0 !important;
   }

   .dropdown-menu {
       border: none !important;
       box-shadow: none !important;
       background: transparent !important;
       padding-left: 15px !important;
   }

   /* Tables */
   .table-responsive {
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
   }

   /* Forms */
   form .row {
       flex-direction: column;
   }

   form .row>[class*="col-"] {
       width: 100% !important;
       max-width: 100% !important;
       padding-bottom: 12px;
   }

   /* 2. Tablet (640px - 1023px) */
   @media (min-width: 640px) {
       :root {
           --fluid-padding: 50px 24px;
       }

       .container {
           padding-left: 24px !important;
           padding-right: 24px !important;
       }

       .bprs-grid {
           grid-template-columns: repeat(2, 1fr);
           gap: 24px;
       }

       .bprs-grid.cols-3 {
           grid-template-columns: repeat(2, 1fr);
       }

       .bprs-grid.cols-4 {
           grid-template-columns: repeat(2, 1fr);
       }

       /* Forms restore to 2 col if applicable */
       form .row {
           flex-direction: row;
           flex-wrap: wrap;
       }

       form .row>[class*="col-md-6"] {
           width: 50% !important;
       }

       form .row>[class*="col-md-12"] {
           width: 100% !important;
       }
   }

   /* 3. Laptop (1024px - 1279px) */
   @media (min-width: 1024px) {
       :root {
           --fluid-padding: 70px 0;
       }

       .container {
           max-width: 1000px !important;
           padding-left: 15px !important;
           padding-right: 15px !important;
           margin: 0 auto;
       }

       .bprs-grid {
           gap: 30px;
       }

       .bprs-grid.cols-3 {
           grid-template-columns: repeat(3, 1fr);
       }

       .bprs-grid.cols-4 {
           grid-template-columns: repeat(4, 1fr);
       }

       /* Navbar (Desktop/Laptop) */
       .navbar-expand-lg .navbar-toggler {
           display: none !important;
       }

       .navbar-expand-lg .navbar-collapse {
           display: flex !important;
       }

       .navbar-nav {
           flex-direction: row !important;
       }

       .nav-item {
           border-bottom: none;
       }

       .nav-link {
           padding: 8px 16px !important;
       }

       .dropdown-menu {
           background: white !important;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
           padding: 20px !important;
       }

       /* Floating Elements restore */
       .fab-chat {
           transform: scale(1);
       }

       .fab-ai-assistant {
           transform: scale(1);
           left: auto !important;
           right: 30px !important;
           bottom: 30px !important;
       }

       .fab-ai-assistant .fab-tooltip {
           left: auto !important;
           right: 80px !important;
           transform: translateX(10px) !important;
       }

       .ai-chat-window {
           left: auto !important;
           right: 30px !important;
           width: 380px !important;
           bottom: 110px !important;
       }

       .scroll-top {
           transform: scale(1);
           bottom: 110px !important;
       }
   }

   /* 4. Desktop (1280px - 1535px) */
   @media (min-width: 1280px) {
       :root {
           --fluid-padding: 90px 0;
       }

       .container {
           max-width: 1240px !important;
       }
   }

   /* 5. Large Desktop (>= 1536px) */
   @media (min-width: 1536px) {
       :root {
           --fluid-padding: 100px 0;
       }

       .container {
           max-width: 1440px !important;
       }
   }

   /* ============================================
      LAPORAN PERUSAHAAN (TABS & CARDS)
      ============================================ */
   .laporan-tabs {
       border-bottom: 2px solid #e9ecef;
   }

   .laporan-tabs .nav-link {
       border: none;
       border-bottom: 3px solid transparent;
       color: #6c757d;
       font-weight: 600;
       padding: 12px 24px;
       font-size: 1.1rem;
       transition: var(--transition);
       background: transparent;
   }

   .laporan-tabs .nav-link:hover {
       color: var(--primary-color);
   }

   .laporan-tabs .nav-link.active {
       color: var(--primary-color);
       border-bottom-color: var(--primary-color);
       background: transparent;
   }

   .laporan-tahunan-card {
       background: #ffffff;
       border-radius: 20px;
       padding: 30px 20px;
       box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
       border: 1px solid rgba(0, 0, 0, 0.02);
       text-align: center;
       transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
       height: 100%;
       display: flex;
       flex-direction: column;
       position: relative;
   }

   .laporan-tahunan-card:hover {
       box-shadow: 0 15px 40px rgba(0, 153, 102, 0.12);
       transform: translateY(-8px);
   }

   .laporan-cover-wrapper {
       position: relative;
       margin-bottom: 25px;
       padding: 0 25px;
       /* Increased padding to make image smaller */
   }

   .laporan-cover {
       width: 100%;
       aspect-ratio: 3/4;
       object-fit: cover;
       border-radius: 4px 12px 12px 4px;
       box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.15);
       transition: transform 0.5s ease;
   }

   .laporan-tahunan-card:hover .laporan-cover {
       transform: scale(1.03);
   }

   .laporan-overlay {
       position: absolute;
       top: 0;
       left: 25px;
       right: 25px;
       bottom: 0;
       /* Matches wrapper padding */
       background: rgba(0, 153, 102, 0.85);
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       transition: all 0.5s ease;
       /* Match the img transition timing */
       border-radius: 4px 12px 12px 4px;
       backdrop-filter: blur(2px);
   }

   .laporan-tahunan-card:hover .laporan-overlay {
       opacity: 1;
       transform: scale(1.03);
   }

   .btn-icon-laporan {
       width: 45px;
       height: 45px;
       border-radius: 50%;
       background-color: rgba(255, 255, 255, 0.2);
       color: #ffffff;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 1.2rem;
       text-decoration: none;
       transition: all 0.3s ease;
       border: 1px solid rgba(255, 255, 255, 0.5);
       transform: translateY(20px);
       opacity: 0;
   }

   .btn-icon-laporan:hover {
       background-color: #ffffff;
       color: var(--primary-color);
       transform: translateY(0) scale(1.1) !important;
   }

   .laporan-tahunan-card:hover .laporan-overlay .btn-icon-laporan {
       transform: translateY(0);
       opacity: 1;
   }

   /* Staggered animation */
   .laporan-tahunan-card:hover .laporan-overlay .btn-icon-laporan:nth-child(1) {
       transition-delay: 0.05s;
   }

   .laporan-tahunan-card:hover .laporan-overlay .btn-icon-laporan:nth-child(2) {
       transition-delay: 0.15s;
   }

   .laporan-year {
       font-size: 1.25rem;
       font-weight: 600;
       color: #334155;
       margin-bottom: 10px;
       letter-spacing: 0.2px;
   }

   .laporan-separator {
       width: 35px;
       height: 3px;
       background: linear-gradient(90deg, var(--primary-color), #00d285);
       margin: 0 auto 12px;
       border-radius: 10px;
       opacity: 0.8;
   }

   .laporan-title {
       font-size: 0.95rem;
       color: #475569;
       font-weight: 500;
       line-height: 1.6;
       padding: 0 10px;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }

   /* Adjust mobile for Laporan Tabs */
   @media (max-width: 768px) {
       .laporan-tabs {
           flex-wrap: nowrap;
           overflow-x: auto;
           -webkit-overflow-scrolling: touch;
           justify-content: flex-start !important;
           padding-bottom: 8px;
           border-bottom: 2px solid #e9ecef;
           margin-bottom: 2rem !important;
       }

       .laporan-tabs::-webkit-scrollbar {
           height: 4px;
       }

       .laporan-tabs::-webkit-scrollbar-thumb {
           background-color: var(--primary-color);
           border-radius: 10px;
       }

       .laporan-tabs .nav-link {
           white-space: nowrap;
           font-size: 0.95rem;
           padding: 10px 18px;
           margin-right: 15px;
       }

       .laporan-tahunan-card {
           padding: 12px 10px;
           border-radius: 15px;
       }

       .laporan-cover-wrapper {
           padding: 0 5px;
           margin-bottom: 12px;
       }

       .laporan-overlay {
           left: 5px;
           right: 5px;
       }

       .btn-icon-laporan {
           width: 40px;
           height: 40px;
           font-size: 1.1rem;
       }

       .laporan-year {
           font-size: 1rem;
           margin-bottom: 8px;
       }

       .laporan-title {
           font-size: 0.8rem;
           padding: 0 5px;
       }
   }



   /* Berita Terbaru  Style */
   .berita-section {
       padding: 80px 0;
       background-color: #fff;
       text-align: center;
   }

   .berita-title {
       font-size: 2.2rem;
       font-weight: 800;
       color: #222;
       margin-bottom: 15px;
       line-height: 1.3;
   }

   .berita-subtitle {
       font-size: 1.1rem;
       color: #666;
       margin-bottom: 40px;
   }

   .berita-filters {
       display: flex;
       justify-content: center;
       gap: 15px;
       margin-bottom: 40px;
       flex-wrap: wrap;
   }

   .btn-berita-filter {
       background: #fff;
       border: 1px solid #ddd;
       color: #555;
       padding: 10px 25px;
       border-radius: 50px;
       font-weight: 600;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       transition: all 0.3s ease;
       text-decoration: none;
       cursor: pointer;
   }

   .btn-berita-filter:hover,
   .btn-berita-filter.active {
       background: var(--primary-color, #00a67d);
       color: #fff;
       border-color: var(--primary-color, #00a67d);
   }

   .btn-berita-filter i {
       font-size: 1.1rem;
   }

   .berita-container {
       background: transparent;
       border-radius: 30px;
       padding: 20px 0;
       position: relative;
       max-width: 1200px;
       margin: 0 auto;
   }

   .berita-card {
       background: #fff;
       border-radius: 15px;
       overflow: hidden;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
       transition: transform 0.3s ease;
       height: 100%;
       text-align: left;
   }

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

   .berita-img {
       width: 100%;
       height: 200px;
       object-fit: cover;
   }

   .berita-body {
       padding: 20px;
   }

   .berita-card-title {
       font-size: 1.1rem;
       font-weight: 700;
       color: #333;
       margin-bottom: 10px;
       line-height: 1.4;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }

   .berita-card-date {
       font-size: 0.85rem;
       color: #888;
   }

   .btn-berita-link {
       display: inline-block;
       margin-top: 30px;
       color: #009966;
       font-weight: 700;
       text-decoration: underline;
       font-size: 1.1rem;
   }

   .btn-berita-link:hover {
       color: #00a67d;
   }




   /* ============================================
   BBS MOBILE SECTION
   ============================================ */
   .bbs-mobile-section {
       background-color: #fff;
       padding: 80px 0;
   }

   .bbs-mobile-title {
       font-size: 2.2rem;
       font-weight: 800;
       color: #222;
       margin-bottom: 15px;
       line-height: 1.3;
   }

   .bbs-mobile-subtitle {
       font-size: 1.15rem;
       color: #666;
       margin-bottom: 0;
   }

   .bbs-mobile-card {
       background: #fff;
       border: 1.5px solid #eaeaea;
       border-radius: 16px;
       padding: 30px;
       transition: all 0.3s ease;
   }

   .bbs-mobile-card:hover {
       border-color: var(--primary, #00a67d);
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
       transform: translateY(-3px);
   }

   .bbs-mobile-card h4 {
       font-size: 1.25rem;
       color: #333;
   }

   .bbs-mobile-mockup {
       mix-blend-mode: multiply;
   }

   /* Animation for Tab Filtering */
   .berita-card-wrapper {
       transition: all 0.3s ease;
   }

   @keyframes filterZoomIn {
       0% {
           opacity: 0;
           transform: scale(0.95) translateY(15px);
       }

       100% {
           opacity: 1;
           transform: scale(1) translateY(0);
       }
   }

   .filter-show {
       animation: filterZoomIn 0.5s ease forwards;
   }

   /* ============================================
      GLOBAL PAGE BANNER
      ============================================ */
   .page-banner-section {
       margin-top: 0 !important;
   }

   .page-banner-section .banner-wrapper {
       position: relative;
       height: 480px;
       overflow: hidden;
   }

   .page-banner-section .banner-wrapper img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       object-position: center;
   }

   .page-banner-section .banner-overlay {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       background: rgba(0, 0, 0, 0.6);
       padding: 15px 0;
       top: auto;
       display: block;
   }

   .page-banner-section h1 {
       color: #ffffff !important;
       font-weight: 600 !important;
       margin: 0;
       font-size: 1rem !important;
       text-transform: none !important;
   }

   @media (min-width: 992px) {
       .page-banner-section h1 {
           font-size: 2.2rem !important;
       }
   }

   /* ============================================
      COOKIE CONSENT
      ============================================ */
   .cookie-banner-wrapper {
       position: fixed;
       bottom: 20px;
       left: 0;
       right: 0;
       z-index: 1050;
       pointer-events: none;
       display: flex;
       justify-content: center;
       opacity: 0;
       transform: translateY(50px);
       transition: opacity 0.5s ease, transform 0.5s ease;
   }

   .cookie-banner-wrapper.show {
       opacity: 1;
       transform: translateY(0);
       pointer-events: auto;
   }

   .cookie-banner-wrapper.hide {
       opacity: 0;
       transform: translateY(50px);
       pointer-events: none;
   }

   .cookie-banner {
       background-color: var(--white);
       border-radius: var(--radius);
       box-shadow: var(--shadow-lg);
       padding: 20px 25px;
       border: 1px solid var(--border-color);
       max-width: 1000px;
       width: 100%;
   }

   .btn-cookie {
       font-weight: 600;
       font-size: 0.9rem;
       transition: var(--transition-fast);
   }

   .cookie-modal .modal-content {
       border-radius: var(--radius);
       border: none;
       box-shadow: var(--shadow-lg);
   }

   .cookie-option-item {
       border: 1px solid transparent;
       transition: var(--transition-fast);
   }

   .cookie-option-item:hover {
       border-color: rgba(0, 153, 102, 0.2);
       box-shadow: var(--shadow-sm);
   }

   .form-check-input-success:checked {
       background-color: var(--primary);
       border-color: var(--primary);
   }

   @media (max-width: 767.98px) {
       .cookie-banner-wrapper {
           bottom: 0;
       }

       .cookie-banner {
           border-radius: 20px 20px 0 0;
           border-bottom: none;
           padding: 20px 15px;
       }

       .cookie-banner .btn-cookie {
           width: 100%;
           margin-bottom: 8px;
       }
   }

   @media (max-width: 576px) {
       .berita-filters {
           gap: 6px;
           margin-bottom: 25px;
       }

       .btn-berita-filter {
           padding: 6px 12px;
           font-size: 0.75rem;
           gap: 4px;
       }

       .btn-berita-filter i {
           font-size: 0.8rem;
       }
   }

   /* Force remove all border, outline, and shadow glow on mobile navbar toggler */
   .navbar-toggler,
   .navbar-toggler:focus,
   .navbar-toggler:active,
   .navbar-toggler:focus-visible,
   .navbar-main .navbar-toggler,
   .navbar-main .navbar-toggler:focus,
   .navbar-main .navbar-toggler:active,
   .navbar-main .navbar-toggler:focus-visible {
       border: none !important;
       outline: none !important;
       box-shadow: none !important;
   }