/* ========================================
           WEBGIS CTA BUTTON & MODAL SECTION
           ======================================== */

        /* WebGIS Modal Header with Background */
        .webgis-modal-header {
            background: linear-gradient(135deg, #059669 0%, #047857 50%, #065f46 100%);
            padding: 2rem 1.5rem;
            min-height: 120px;
            display: flex;
            align-items: center;
        }

        .webgis-header-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('/build/images/sawah-drone-kaltim.jpg') center/cover;
            opacity: 0.15;
            pointer-events: none;
        }

        .webgis-modal-header .avatar-title {
            backdrop-filter: blur(10px);
        }

        /* Modal Content Rounded */
        #webgisModal .modal-content {
            border-radius: 1rem;
            overflow: hidden;
        }

        /* CTA Button - Exact Copy from Hero Section .btn-light */
        .webgis-cta-button {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
            border: 3px solid #10b981 !important;
            color: #FFFFFF !important;
            font-weight: 700;
            box-shadow:
                0 8px 25px rgba(16, 185, 129, 0.6),
                0 4px 12px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .webgis-cta-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
            z-index: 0;
        }

        .webgis-cta-button:hover::before {
            left: 100%;
        }

        .webgis-cta-button:hover {
            background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
            border-color: #059669 !important;
            color: #FFFFFF !important;
            box-shadow:
                0 12px 32px rgba(16, 185, 129, 0.7),
                0 6px 16px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
            transform: translateY(-4px) scale(1.02);
        }

        .webgis-cta-button:active {
            transform: translateY(-2px) scale(1);
        }

        /* Ensure icon and text stay on top of ::before shine effect */
        .webgis-cta-button i {
            position: relative;
            z-index: 1;
            filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
            font-size: 1.2em;
            vertical-align: middle;
        }

        /* Kabupaten Grid */
        .kabupaten-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
        }

        .kabupaten-card {
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 1rem;
            padding: 2rem 1.5rem;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        .kabupaten-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #10b981, #059669);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        /* CARD TERSEDIA - Active & Clickable */
        .kabupaten-card.available {
            opacity: 1;
            cursor: pointer;
        }

        .kabupaten-card.available:hover::before {
            transform: scaleX(1);
        }

        .kabupaten-card.available:hover {
            border-color: #10b981;
            box-shadow: 0 6px 20px rgba(16, 185, 129, 0.2);
            transform: translateY(-4px);
        }

        .kabupaten-card.available .kabupaten-icon {
            background: linear-gradient(135deg, #e8f5e9 0%, #d1f4e0 100%);
        }

        .kabupaten-card.available:hover .kabupaten-icon {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            transform: scale(1.05);
        }

        .kabupaten-card.available .kabupaten-icon i {
            color: #10b981;
        }

        .kabupaten-card.available:hover .kabupaten-icon i {
            color: white;
        }

        .kabupaten-card.available .kabupaten-badge {
            background: #10b981;
            color: white;
        }

        .kabupaten-card.available:hover .kabupaten-badge {
            background: #059669;
        }

        .kabupaten-card.available .external-link-icon {
            color: #10b981;
            opacity: 0;
        }

        .kabupaten-card.available:hover .external-link-icon {
            opacity: 1;
        }

        /* CARD SEGERA HADIR - Disabled & Grayscale */
        .kabupaten-card.coming-soon {
            opacity: 0.6;
            cursor: not-allowed;
            filter: grayscale(60%);
        }

        .kabupaten-card.coming-soon::before {
            display: none;
        }

        .kabupaten-card.coming-soon:hover {
            transform: none;
            border-color: #e5e7eb;
            box-shadow: none;
        }

        .kabupaten-card.coming-soon .kabupaten-icon {
            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        }

        .kabupaten-card.coming-soon .kabupaten-icon i {
            color: #9ca3af;
        }

        .kabupaten-card.coming-soon:hover .kabupaten-icon {
            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
            transform: none;
        }

        .kabupaten-card.coming-soon .kabupaten-badge {
            background: #fef3c7;
            color: #92400e;
        }

        .kabupaten-card.coming-soon .kabupaten-name {
            color: #6b7280;
        }

        .kabupaten-card.coming-soon .kabupaten-type {
            color: #9ca3af;
        }

        /* SHARED CARD ELEMENTS */
        .kabupaten-icon {
            width: 90px;
            height: 90px;
            margin: 0 auto 1.25rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .kabupaten-icon i {
            font-size: 2.75rem;
            transition: all 0.3s ease;
        }

        /* Logo Image Styling */
        .kabupaten-icon .kabupaten-logo {
            width: 70px;
            height: 70px;
            object-fit: contain;
            transition: all 0.3s ease;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
        }

        /* Logo hover effects untuk available cards */
        .kabupaten-card.available:hover .kabupaten-logo {
            filter: drop-shadow(0 4px 8px rgba(16, 185, 129, 0.3));
            transform: scale(1.05);
        }

        /* Logo styling untuk coming soon cards */
        .kabupaten-card.coming-soon .kabupaten-logo {
            opacity: 0.6;
            filter: grayscale(20%) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
        }

        .kabupaten-name {
            font-size: 1.15rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            transition: all 0.3s ease;
            color: #1f2937;
            line-height: 1.4;
        }

        .kabupaten-type {
            font-size: 0.875rem;
            margin-bottom: 1.25rem;
            transition: all 0.3s ease;
            color: #6b7280;
        }

        .kabupaten-badge {
            display: inline-block;
            padding: 0.5rem 1rem;
            border-radius: 2rem;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.3px;
            transition: all 0.3s ease;
        }

        .external-link-icon {
            position: absolute;
            top: 1.25rem;
            right: 1.25rem;
            font-size: 1.3rem;
            transition: all 0.3s ease;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .webgis-cta-button {
                width: 100%;
            }

            .kabupaten-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (min-width: 769px) and (max-width: 1024px) {
            .kabupaten-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1025px) {
            .kabupaten-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* ========================================
           CHEERFUL UI ENHANCEMENTS
           ======================================== */

        /* 1. ROUNDED CORNERS - More Friendly */
        .card {
            border-radius: 24px !important;
            overflow: hidden;
        }

        .btn {
            border-radius: 16px !important;
        }

        .badge {
            border-radius: 12px !important;
        }

        #public-map {
            border-radius: 24px !important;
        }

        /* 2. GENEROUS WHITE SPACE */
        .section {
            padding: 100px 0 !important;
        }

        @media (max-width: 768px) {
            .section {
                padding: 60px 0 !important;
            }

            /* Reduce padding for cards */
            .card-body {
                padding: 1.25rem !important;
            }

            /* Optimize margins for mobile */
            .mb-5 {
                margin-bottom: 2rem !important;
            }

            .mb-4 {
                margin-bottom: 1.5rem !important;
            }
        }

        @media (max-width: 576px) {
            .section {
                padding: 50px 0 !important;
            }

            .card-body {
                padding: 1rem !important;
            }

            .mb-5 {
                margin-bottom: 1.5rem !important;
            }

            .mb-4 {
                margin-bottom: 1rem !important;
            }

            /* Reduce gap spacing */
            .gap-3 {
                gap: 0.75rem !important;
            }

            .gap-4 {
                gap: 1rem !important;
            }
        }

        .stats-card .card-body {
            padding: 2.5rem !important;
        }

        /* 3. PLAYFUL HOVER EFFECTS */
        .stats-card {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow:
                0 4px 6px rgba(0, 0, 0, 0.05),
                0 10px 20px rgba(0, 0, 0, 0.08);
        }

        .stats-card:hover {
            transform: translateY(-12px) scale(1.02);
            box-shadow:
                0 8px 12px rgba(0, 0, 0, 0.08),
                0 20px 40px rgba(0, 0, 0, 0.15);
        }

        /* 4. VIBRANT CARD BACKGROUNDS */
        .bg-primary-subtle {
            background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 100%) !important;
        }

        .bg-success-subtle {
            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
        }

        .bg-info-subtle {
            background: linear-gradient(135deg, #e0f2fe 0%, #bfdbfe 100%) !important;
        }

        .bg-warning-subtle {
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
        }

        /* 5. ENHANCED BUTTONS */
        .btn-light {
            box-shadow:
                0 8px 25px rgba(16, 185, 129, 0.4),
                0 4px 12px rgba(0, 0, 0, 0.3) !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        .btn-light:hover {
            transform: translateY(-6px) scale(1.05) !important;
            box-shadow:
                0 12px 35px rgba(16, 185, 129, 0.5),
                0 6px 16px rgba(0, 0, 0, 0.4) !important;
        }

        .btn-warning-custom {
            box-shadow:
                0 6px 20px rgba(251, 191, 36, 0.3),
                0 3px 8px rgba(0, 0, 0, 0.2) !important;
        }

        .btn-warning-custom:hover {
            transform: translateY(-5px) scale(1.03) !important;
            box-shadow:
                0 10px 28px rgba(251, 191, 36, 0.5),
                0 4px 12px rgba(0, 0, 0, 0.3) !important;
        }

        /* 6. SMOOTH ANIMATIONS FOR ICONS */
        .feature-icon {
            transition: all 0.3s ease;
        }

        .stats-card:hover .feature-icon {
            transform: scale(1.15) rotate(5deg);
        }

        /* 7. ENHANCED SHADOWS FOR DEPTH */
        .card.shadow-sm {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.08) !important;
        }

        .card.shadow-lg {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 20px 40px rgba(0, 0, 0, 0.12) !important;
        }

        /* 8. KABUPATEN CARDS - MORE PLAYFUL */
        .kabupaten-card {
            border-radius: 20px !important;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .kabupaten-card.available:hover {
            transform: translateY(-8px) scale(1.02);
        }

        .kabupaten-icon {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .kabupaten-card.available:hover .kabupaten-icon {
            transform: scale(1.15) rotate(-5deg);
        }

        /* 9. MODAL ENHANCEMENTS */
        .modal-content {
            border-radius: 28px !important;
        }

        /* 10. NAV ITEMS - SMOOTHER */
        .kabupaten-nav-item {
            border-radius: 16px !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .kabupaten-nav-item:hover,
        .kabupaten-nav-item.active {
            box-shadow:
                0 4px 12px rgba(16, 185, 129, 0.2),
                0 2px 6px rgba(0, 0, 0, 0.1);
        }

        /* 11. AID ITEMS - ENHANCED */
        .aid-item {
            border-radius: 20px !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .aid-item:hover {
            transform: translateY(-4px);
            box-shadow:
                0 6px 20px rgba(0, 0, 0, 0.12),
                0 3px 8px rgba(0, 0, 0, 0.08);
        }

        /* 12. SPACING ADJUSTMENTS */
        .mb-5 {
            margin-bottom: 4rem !important;
        }

        /* 13. LETTER SPACING FOR HEADINGS */
        h1, h2, h3 {
            letter-spacing: -0.02em;
        }

        h4, h5, h6 {
            letter-spacing: -0.01em;
        }

        /* 14. LINE HEIGHT FOR READABILITY */
        p, .lead {
            line-height: 1.8;
        }

        /* 15. BUTTON TEXT SPACING */
        .btn {
            letter-spacing: 0.025em;
            font-weight: 600;
        }

        /* 16. SVG WAVE DIVIDERS */
        .section {
            position: relative;
        }

        /* 17. GRADIENT OVERLAYS FOR SECTIONS - More Transparent */
        .section.bg-light {
            background: rgba(240, 253, 244, 0.4) !important;
            backdrop-filter: blur(5px) !important;
        }

        /* 18. SMOOTH SCROLL BEHAVIOR */
        html {
            scroll-behavior: smooth;
        }

        /* 19. COUNTER ANIMATION */
        .counter-value {
            display: inline-block;
            transition: all 0.3s ease;
        }

        /* 20. ENHANCED FOCUS STATES - More subtle for better UX */
        .btn:focus-visible {
            outline: 2px solid rgba(16, 185, 129, 0.4);
            outline-offset: 3px;
        }

        /* Remove focus outline on mouse click, keep for keyboard navigation */
        .btn:focus:not(:focus-visible),
        .card:focus:not(:focus-visible) {
            outline: none;
        }

        /* 21. CHEERFUL BACKGROUND - AGRICULTURAL THEME */
        body {
            background: linear-gradient(135deg, #f0fdf4 0%, #fefce8 25%, #f0f9ff 50%, #fef3f2 75%, #f0fdf4 100%) !important;
            background-attachment: fixed !important;
            background-size: 400% 400% !important;
            animation: gradientShift 60s ease infinite !important;
            min-height: 100vh !important;
        }

        /* Extra specificity untuk override */
        body[data-bs-spy="scroll"] {
            background: linear-gradient(135deg, #f0fdf4 0%, #fefce8 25%, #f0f9ff 50%, #fef3f2 75%, #f0fdf4 100%) !important;
            background-attachment: fixed !important;
            background-size: 400% 400% !important;
            animation: gradientShift 60s ease infinite !important;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Overlay subtle pattern for organic feel */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
                radial-gradient(circle at 25% 25%, rgba(16, 185, 129, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(251, 191, 36, 0.02) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }

        /* Ensure content stays on top but below modals */
        .layout-wrapper {
            position: relative;
            z-index: 1;
        }

        /* Ensure modal backdrop and modal are properly layered */
        .modal-backdrop {
            z-index: 1040 !important;
        }

        .modal {
            z-index: 1050 !important;
        }

        /* Fix modal scroll issue */
        body.modal-open {
            overflow: hidden !important;
        }

        /* Ensure modal content is scrollable */
        .modal-dialog-scrollable .modal-body {
            overflow-y: auto !important;
            max-height: calc(100vh - 200px) !important;
        }

        /* Adjust section backgrounds to work with new body background */
        .section {
            background: transparent !important;
        }

        .section.bg-light {
            background: linear-gradient(135deg,
                rgba(240, 253, 244, 0.4) 0%,   /* Very light green with low opacity */
                rgba(255, 255, 255, 0.3) 50%,   /* White with very low opacity */
                rgba(240, 249, 255, 0.4) 100%   /* Very light blue with low opacity */
            ) !important;
            backdrop-filter: blur(5px);
            position: relative;
        }

        /* Section Gradient Mint - For FAQ and similar sections */
        .section-bg-gradient-mint {
            background: linear-gradient(135deg,
                rgba(236, 253, 245, 0.5) 0%,   /* Mint/Green with transparency */
                rgba(255, 255, 255, 0.4) 50%,
                rgba(236, 253, 245, 0.5) 100%
            ) !important;
            position: relative;
            display: block !important;
            visibility: visible !important;
        }

        /* Subtle overlay untuk section bg-light */
        .section.bg-light::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.15);
            pointer-events: none;
            z-index: 0;
        }

        /* Ensure content stays on top of overlay */
        .section.bg-light > .container {
            position: relative;
            z-index: 1;
        }

        /* Cards with frosted glass effect */
        .card {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(20px);
            color: #1f2937;
            border-color: #e5e7eb !important;
        }

        /* Hero section adjustment */
        .hero-section {
            background: transparent;
        }

        /* Navbar adjustment */
        .navbar-landing {
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
        }

        .navbar-landing.is-sticky {
            background-color: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(20px);
        }

        /* ========================================
           FOOTER ENHANCEMENTS
           ======================================== */
        .custom-footer {
            background: #1f2937 !important;
            position: relative;
            z-index: 1;
        }

        .footer-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 2rem;
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.8125rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .footer-badge i {
            color: #10b981;
            font-size: 1rem;
        }

        .footer-badge:hover {
            background: rgba(16, 185, 129, 0.1);
            border-color: rgba(16, 185, 129, 0.3);
            color: #fff;
            transform: translateY(-2px);
        }

        .custom-footer a:hover {
            color: #10b981 !important;
            transition: color 0.3s ease;
        }

        @media (max-width: 768px) {
            .footer-badge {
                font-size: 0.75rem;
                padding: 0.4rem 0.75rem;
            }

            .footer-badge i {
                font-size: 0.875rem;
            }
        }

        /* Footer Badge Small - Compact version for bottom badges */
        .footer-badge-small {
            display: inline-flex;
            align-items: center;
            padding: 0.375rem 0.75rem;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 6px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.75rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .footer-badge-small i {
            color: #3cd188;
            font-size: 0.875rem;
        }

        .footer-badge-small:hover {
            background: rgba(60, 209, 136, 0.08);
            border-color: rgba(60, 209, 136, 0.2);
            color: #fff;
            transform: translateY(-1px);
        }

        .footer-badge-small:hover i {
            color: #3cd188 !important;
        }

        @media (max-width: 768px) {
            .footer-badge-small {
                font-size: 0.7rem;
                padding: 0.3rem 0.6rem;
            }

            .footer-badge-small i {
                font-size: 0.8rem;
            }
        }

        /* Social Media Buttons - Brand Colors + WCAG 2025 Compliant */
        .custom-footer .btn-social-instagram {
            background: rgba(228, 64, 95, 0.15) !important;
            border: 2px solid #E4405F !important;
            color: #ff8fb8 !important;
            font-weight: 600 !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            text-decoration: none !important;
        }

        .custom-footer .btn-social-instagram:hover {
            background: #E4405F !important;
            border-color: #E4405F !important;
            color: #ffffff !important;
            transform: translateY(-3px) !important;
            box-shadow: 0 8px 20px rgba(228, 64, 95, 0.4) !important;
            text-decoration: none !important;
        }

        .custom-footer .btn-social-instagram:active {
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 12px rgba(228, 64, 95, 0.3) !important;
        }

        .custom-footer .btn-social-youtube {
            background: rgba(205, 32, 31, 0.15) !important;
            border: 2px solid #CD201F !important;
            color: #ff6b6b !important;
            font-weight: 600 !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            text-decoration: none !important;
        }

        .custom-footer .btn-social-youtube:hover {
            background: #CD201F !important;
            border-color: #CD201F !important;
            color: #ffffff !important;
            transform: translateY(-3px) !important;
            box-shadow: 0 8px 20px rgba(205, 32, 31, 0.4) !important;
            text-decoration: none !important;
        }

        .custom-footer .btn-social-youtube:active {
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 12px rgba(205, 32, 31, 0.3) !important;
        }

        /* ========================================
           VALUE CARDS - ALTERNATING BLOCK LAYOUT
           ======================================== */
        .value-block {
            position: relative;
            transition: all 0.3s ease;
        }

        .value-image-wrapper {
            position: relative;
            padding: 2rem;
            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
            border-radius: 1.5rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .value-image-wrapper:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(60, 209, 136, 0.15);
        }

        .value-illustration {
            max-height: 300px;
            width: 100%;
            object-fit: contain;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .value-image-wrapper:hover .value-illustration {
            transform: scale(1.05);
        }

        .value-content {
            padding: 1rem 0;
        }

        .value-icon-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
            border-radius: 1.25rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .value-icon-badge i {
            font-size: 32px;
            color: #3cd188;
            transition: all 0.3s ease;
        }

        .value-block:hover .value-icon-badge {
            background: linear-gradient(135deg, #3cd188 0%, #2eb876 100%);
            transform: rotate(5deg) scale(1.1);
        }

        .value-block:hover .value-icon-badge i {
            color: white;
        }

        .value-title {
            font-size: 1.75rem;
            font-weight: 700;
            color: #1f2937;
            line-height: 1.3;
        }

        .value-description {
            font-size: 1.0625rem;
            line-height: 1.8;
            color: #6b7280;
        }

        .value-features {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .feature-item {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: rgba(60, 209, 136, 0.08);
            border-radius: 2rem;
            font-size: 0.9375rem;
            font-weight: 500;
            color: #1f2937;
            transition: all 0.3s ease;
        }

        .feature-item i {
            font-size: 1.125rem;
        }

        .feature-item:hover {
            background: rgba(60, 209, 136, 0.15);
            transform: translateY(-2px);
        }

        @media (max-width: 991px) {
            .value-image-wrapper {
                padding: 1.5rem;
                margin-bottom: 1rem;
            }

            .value-illustration {
                max-height: 250px;
            }

            .value-title {
                font-size: 1.5rem;
            }

            .value-description {
                font-size: 1rem;
            }

            .value-icon-badge {
                width: 60px;
                height: 60px;
            }

            .value-icon-badge i {
                font-size: 28px;
            }
        }

        @media (max-width: 576px) {
            .value-image-wrapper {
                padding: 1rem;
            }

            .value-illustration {
                max-height: 200px;
            }

            .value-title {
                font-size: 1.375rem;
            }

            .value-features {
                gap: 0.5rem;
            }

            .feature-item {
                font-size: 0.875rem;
                padding: 0.375rem 0.75rem;
            }
        }

        /* Nilai SIMANTAN Section Mobile Optimization */
        @media (max-width: 768px) {
            #nilai-simantan {
                padding: 60px 0 !important;
            }

            #nilai-simantan h2 {
                font-size: 1.75rem !important;
            }

            #nilai-simantan .section-subtitle {
                font-size: 0.95rem !important;
            }

            .value-block {
                margin-bottom: 3rem !important;
            }

            .value-content {
                padding: 0.5rem 0;
            }
        }

        @media (max-width: 576px) {
            #nilai-simantan {
                padding: 50px 0 !important;
            }

            #nilai-simantan h2 {
                font-size: 1.5rem !important;
            }

            .value-block {
                margin-bottom: 2rem !important;
            }

            .value-description {
                font-size: 0.95rem !important;
            }
        }

        /* ========================================
           FAQ ACCORDION STYLING
           ======================================== */
        .custom-accordion .accordion-item {
            background: white;
            border: 1px solid rgba(60, 209, 136, 0.15);
            border-radius: 0.75rem !important;
            margin-bottom: 1rem;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .custom-accordion .accordion-item:hover {
            border-color: #3cd188;
            box-shadow: 0 4px 12px rgba(60, 209, 136, 0.1);
        }

        .custom-accordion .accordion-button {
            background: white;
            color: #1f2937;
            font-weight: 600;
            font-size: 1.0625rem;
            padding: 1.25rem 1.5rem;
            border: none;
            box-shadow: none !important;
            transition: all 0.3s ease;
        }

        .custom-accordion .accordion-button:not(.collapsed) {
            background: linear-gradient(135deg, #d1fae5 0%, #f0fdf4 100%);
            color: #2eb876;
        }

        .custom-accordion .accordion-button:not(.collapsed) i {
            color: #3cd188 !important;
        }

        .custom-accordion .accordion-button::after {
            background-image: none;
            content: '\ea4e';
            font-family: 'remixicon';
            font-size: 1.25rem;
            color: #3cd188;
            transition: transform 0.3s ease;
        }

        .custom-accordion .accordion-button:not(.collapsed)::after {
            transform: rotate(-180deg);
        }

        .custom-accordion .accordion-body {
            padding: 1.25rem 1.5rem 1.5rem;
            color: #6b7280;
            line-height: 1.7;
            font-size: 0.9375rem;
        }

        .custom-accordion .accordion-body ul {
            padding-left: 1.25rem;
        }

        .custom-accordion .accordion-body li {
            margin-bottom: 0.5rem;
        }

        .custom-accordion .accordion-body strong {
            color: #1f2937;
        }

        /* Responsive FAQ */
        @media (max-width: 768px) {
            .custom-accordion .accordion-button {
                font-size: 0.9375rem;
                padding: 1rem 1.25rem;
            }

            .custom-accordion .accordion-body {
                padding: 1rem 1.25rem 1.25rem;
                font-size: 0.875rem;
            }

            /* FAQ section optimizations - FORCE VISIBILITY */
            #faq {
                padding: 60px 0 !important;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                overflow: visible !important;
            }

            #faq h2 {
                font-size: 1.75rem !important;
            }

            #faq .section-subtitle {
                font-size: 0.95rem !important;
            }

            /* FAQ search and filter */
            #faq .input-group-lg {
                font-size: 1rem;
            }

            #faq .faq-category-filter {
                font-size: 0.75rem !important;
                padding: 0.375rem 0.75rem !important;
            }

            #faq .badge {
                font-size: 0.7rem !important;
            }

            /* FAQ CTA section - FORCE VISIBILITY */
            .faq-cta-section {
                margin-top: 2rem !important;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }

            .faq-cta-card {
                display: block !important;
                visibility: visible !important;
            }
        }

        @media (max-width: 576px) {
            .custom-accordion .accordion-button {
                font-size: 0.875rem;
                padding: 0.875rem 1rem;
            }

            .custom-accordion .accordion-body {
                padding: 0.875rem 1rem 1rem;
                font-size: 0.8125rem;
            }

            /* FAQ section - FORCE VISIBILITY on mobile */
            #faq {
                padding: 50px 0 !important;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                overflow: visible !important;
                min-height: auto !important;
                max-height: none !important;
            }

            #faq h2 {
                font-size: 1.5rem !important;
            }

            /* Compact FAQ items for small screens */
            .custom-accordion .accordion-item {
                margin-bottom: 0.75rem;
            }

            /* Ensure all FAQ child elements are visible */
            #faq > *,
            #faq .container,
            #faq .container > * {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }

            /* Override AOS (Animate On Scroll) on mobile for FAQ */
            #faq [data-aos],
            #faq .faq-item,
            #faq .faq-cta-section {
                opacity: 1 !important;
                transform: none !important;
                transition-property: none !important;
            }

            /* Ensure section background is visible */
            .section-bg-gradient-mint {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }
        }
        /* Kabupaten Navigation Styles */
        .kabupaten-nav-item {
            background: rgba(255, 255, 255, 0.7);
            border-radius: 10px;
            margin-bottom: 12px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .kabupaten-nav-item:hover {
            background: rgba(255, 255, 255, 0.9);
            border-color: var(--bs-primary);
            transform: translateX(5px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .kabupaten-nav-item.active {
            background: #ffffff;
            border-color: var(--bs-primary);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            transform: translateX(8px);
        }

        .kabupaten-nav-item.active .nav-item-content h6 {
            color: var(--bs-primary);
            font-weight: 600;
        }

        .nav-item-content h6 {
            transition: color 0.3s ease;
            margin-bottom: 5px;
        }

        /* Dynamic Content Area Animations */
        #dynamic-content-area {
            min-height: 400px;
        }

        .kabupaten-detail-view {
            animation: fadeInUp 0.5s ease-out;
        }

        /* Aid Item Hover Effects */
        .aid-item {
            transition: all 0.3s ease;
        }

        .aid-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        /* ========================================
           SEARCH BOX STYLING (FASE 2.2)
           ======================================== */
        .search-box-wrapper {
            animation: fadeInUp 0.5s ease-out;
        }

        .search-box-wrapper .input-group {
            border-radius: 1rem;
            overflow: hidden;
            border: 2px solid #e5e7eb;
            transition: all 0.3s ease;
        }

        .search-box-wrapper .input-group:focus-within {
            border-color: #10b981;
            box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
        }

        .search-box-wrapper .input-group-text {
            border: none;
            padding: 0.75rem 1rem;
        }

        .search-box-wrapper .form-control {
            border: none;
            padding: 0.75rem 1rem;
            font-size: 1rem;
        }

        .search-box-wrapper .form-control:focus {
            box-shadow: none;
            outline: none;
        }

        #clearSearchBtn {
            border: none;
            background: transparent;
            color: #6b7280;
            transition: all 0.3s ease;
        }

        #clearSearchBtn:hover {
            color: #ef4444;
            background: transparent;
        }

        /* Highlight matched text in search results */
        .search-highlight {
            background-color: #fef3c7;
            padding: 0.125rem 0.25rem;
            border-radius: 0.25rem;
            font-weight: 600;
        }

        /* No results state */
        .no-search-results {
            text-align: center;
            padding: 3rem 1rem;
            animation: fadeInUp 0.3s ease-out;
        }

        .no-search-results i {
            font-size: 4rem;
            color: #d1d5db;
            margin-bottom: 1rem;
        }

        /* ========================================
           TOAST NOTIFICATION ANIMATION (FASE 2.3)
           ======================================== */
        @keyframes slideInRight {
            from {
                transform: translateX(400px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        /* ========================================
           PRINT STYLES (FASE 2.3)
           ======================================== */
        @media print {
            /* Hide unnecessary elements */
            nav, footer, .btn, .search-box-wrapper, .hero-video,
            .hero-overlay, .trust-badges-container, .webgis-cta-section,
            #map, button, .navbar, .hero-social-proof {
                display: none !important;
            }

            /* Optimize for print */
            body {
                background: white !important;
                animation: none !important;
            }

            .section {
                page-break-inside: avoid;
                background: white !important;
                padding: 20px 0 !important;
            }

            .card {
                box-shadow: none !important;
                border: 1px solid #dee2e6 !important;
                page-break-inside: avoid;
            }

            /* Show URL after links */
            a[href]:after {
                content: " (" attr(href) ")";
                font-size: 0.8em;
                color: #666;
            }

            /* Ensure charts print correctly */
            canvas {
                max-width: 100% !important;
                height: auto !important;
            }

            h1, h2, h3, h4, h5, h6 {
                page-break-after: avoid;
                page-break-inside: avoid;
            }

            .row {
                page-break-inside: avoid;
            }
        }

        /* Responsive Navigation */
        @media (max-width: 991.98px) {
            .kabupaten-nav-item:hover,
            .kabupaten-nav-item.active {
                transform: none;
            }

            .col-lg-4.bg-primary-subtle {
                background: var(--bs-primary-rgb) !important;
            }

            .kabupaten-nav-item {
                background: rgba(255, 255, 255, 0.9);
            }

            /* Improve mobile layout for distribution section */
            #distribution .col-lg-4 {
                max-height: 400px;
                overflow-y: auto;
                margin-bottom: 1.5rem;
            }

            #distribution .col-lg-8 {
                margin-top: 0;
            }

            /* Optimize kabupaten navigation for mobile */
            .kabupaten-navigation {
                max-height: 350px;
                overflow-y: auto;
            }

            .kabupaten-nav-item {
                padding: 12px;
                margin-bottom: 8px;
            }

            .kabupaten-nav-item h6 {
                font-size: 0.9rem;
            }

            .kabupaten-nav-item small {
                font-size: 0.75rem;
            }
        }

        /* Mobile specific optimizations */
        @media (max-width: 768px) {
            #distribution {
                padding: 60px 0 !important;
            }

            #distribution .card {
                border-radius: 16px !important;
            }

            #distribution .col-lg-4 {
                max-height: 350px;
                margin-bottom: 1rem;
            }

            #distribution .p-4 {
                padding: 1.25rem !important;
            }

            /* Compact kabupaten navigation */
            .kabupaten-navigation {
                max-height: 300px;
            }

            .kabupaten-nav-item {
                padding: 10px;
            }

            .compare-checkbox-wrapper {
                display: none; /* Hide comparison on mobile for cleaner UI */
            }

            /* Dynamic content area */
            #dynamic-content-area {
                min-height: 300px;
            }
        }

        /* Extra small devices */
        @media (max-width: 576px) {
            #distribution .col-lg-4 {
                max-height: 280px;
            }

            #distribution .search-box-wrapper .input-group {
                font-size: 0.9rem;
            }

            .kabupaten-nav-item h6 {
                font-size: 0.85rem;
            }

            .kabupaten-nav-item small {
                font-size: 0.7rem;
            }

            .badge {
                font-size: 0.7rem !important;
                padding: 0.25rem 0.5rem !important;
            }
        }

        /* Enhanced Statistics Cards */
        .card.bg-primary-subtle:hover,
        .card.bg-success-subtle:hover,
        .card.bg-warning-subtle:hover {
            transform: translateY(-3px);
            transition: transform 0.3s ease;
        }

/* ========================================================================
   MODAL COMPONENTS - 2025 CLEAN DESIGN WITH HIGH CONTRAST
   Simplified styles using Bootstrap 5 components with WCAG AA compliance
   ======================================================================== */

/* Office Status Banner - Closed State Override */
.office-status-banner.closed {
    background-color: #fee2e2 !important;
    border-color: #fca5a5 !important;
}

.office-status-banner.closed .avatar-title {
    background-color: #dc2626 !important;
}

.office-status-banner.closed #statusText {
    color: #dc2626 !important;
}

/* Card Hover Effects */
.hover-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Copy to Clipboard Animation */
@keyframes copied {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.btn-copied {
    animation: copied 0.3s ease;
}

/* Responsive Adjustments */
@media (max-width: 576px) {
    .modal-header .avatar-sm {
        width: 2rem;
        height: 2rem;
    }

    .modal-header .avatar-sm .avatar-title {
        font-size: 1.25rem;
    }
}


/* ========================================================================
   FAQ CTA SECTION - 2025 BEST PRACTICE DESIGN
   High visibility, multiple contact options, clear hierarchy
   ======================================================================== */

/* Section Container */
.faq-cta-section {
    animation: fadeInUp 0.5s ease-out;
}

/* Main CTA Card - Split Design */
.faq-cta-card {
    border-radius: 24px !important;
    overflow: hidden;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-cta-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.12),
        0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Left Gradient Side */
.faq-cta-gradient-side {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    position: relative;
    overflow: hidden;
}

.faq-cta-gradient-side::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: gradientPulse 8s ease-in-out infinite;
}

@keyframes gradientPulse {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-20%, -20%); }
}

/* CTA Icon Wrapper */
.faq-cta-icon-wrapper {
    width: 100px;
    height: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.faq-cta-icon-wrapper i {
    font-size: 3rem;
    color: #ffffff;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.faq-cta-card:hover .faq-cta-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Text Colors on Gradient */
.text-white-75 {
    color: rgba(255, 255, 255, 0.85);
}

/* CTA Title with Gradient Text */
.faq-cta-title {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.text-gradient-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Quick Contact Cards */
.faq-contact-quick-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.3s ease;
    height: 100%;
}

.faq-contact-quick-card:hover {
    background: white;
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* Contact Icon */
.faq-contact-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.faq-contact-icon i {
    font-size: 1.5rem;
}

/* Primary Action Buttons */
.faq-cta-btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    font-weight: 600;
    padding: 0.875rem 2rem;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.faq-cta-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.faq-cta-btn-primary:hover::before {
    left: 100%;
}

.faq-cta-btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 28px rgba(59, 130, 246, 0.35);
}

.faq-cta-btn-primary:active {
    transform: translateY(-1px) scale(1);
}

/* Secondary Action Button */
.faq-cta-btn-secondary {
    border: 2px solid #3b82f6;
    color: #3b82f6;
    font-weight: 600;
    padding: 0.875rem 2rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-cta-btn-secondary:hover {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.2);
}

.faq-cta-btn-secondary:active {
    transform: translateY(-1px);
}

/* Responsive Design */
@media (max-width: 767px) {
    .faq-cta-gradient-side {
        padding: 2rem 1rem !important;
    }

    .faq-cta-icon-wrapper {
        width: 80px;
        height: 80px;
    }

    .faq-cta-icon-wrapper i {
        font-size: 2.5rem;
    }

    .faq-cta-title {
        font-size: 1.5rem;
    }

    .faq-cta-btn-primary,
    .faq-cta-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .faq-contact-quick-card {
        margin-bottom: 0.75rem;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .faq-cta-icon-wrapper {
        width: 90px;
        height: 90px;
    }

    .faq-cta-title {
        font-size: 1.625rem;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .faq-cta-section,
    .faq-cta-card,
    .faq-cta-icon-wrapper,
    .faq-contact-quick-card,
    .faq-cta-btn-primary,
    .faq-cta-btn-secondary {
        animation: none !important;
        transition: none !important;
    }

    .faq-cta-card:hover,
    .faq-contact-quick-card:hover {
        transform: none !important;
    }
}

/* Print Styles */
@media print {
    .faq-cta-section {
        display: none !important;
    }
}

/* Focus States - WCAG 2.1 AA Compliant */
.faq-cta-btn-primary:focus-visible,
.faq-cta-btn-secondary:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 3px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .faq-cta-gradient-side {
        background: #1e40af;
    }

    .text-gradient-primary {
        background: none;
        -webkit-text-fill-color: initial;
        color: #1e40af;
    }

    .faq-cta-btn-primary {
        border: 2px solid #1e40af;
    }
}

/* ========================================================================
   SECTION BADGE - 2025 BEST PRACTICE DESIGN
   Category labels for section headers - optimized visibility
   ======================================================================== */

/* Section Badge Base - Enhanced Size & Spacing */
.section-badge {
    font-size: 0.9375rem !important;  /* 15px - optimal for section category */
    font-weight: 600 !important;       /* Semibold for prominence */
    letter-spacing: 0.04em !important; /* Improved readability */
    text-transform: uppercase !important;
    padding: 0.5rem 1.375rem !important; /* Generous padding for modern look */
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;           /* Space between icon and text */
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover State */
.section-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25) !important;
}

/* Primary Color Variant */
.badge-simantan-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

/* Icon Sizing Inside Badge */
.section-badge i {
    font-size: 1.125rem !important; /* 18px - proportional to badge text */
    line-height: 1 !important;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
    .section-badge {
        font-size: 0.875rem !important; /* 14px on mobile */
        padding: 0.4375rem 1.125rem !important;
    }

    .section-badge i {
        font-size: 1rem !important; /* 16px on mobile */
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .section-badge {
        font-size: 0.90625rem !important; /* 14.5px on tablet */
    }
}

/* Accessibility - High Contrast Mode */
@media (prefers-contrast: high) {
    .badge-simantan-primary {
        background: #1e40af !important;
        border: 2px solid #ffffff !important;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .section-badge {
        transition: none !important;
    }

    .section-badge:hover {
        transform: none !important;
    }
}

/* Print Styles */
@media print {
    .section-badge {
        box-shadow: none !important;
        border: 1px solid #3b82f6 !important;
    }
}