/**
 * ==============================================================================
 * PADMA RADYA AKTUARIA - DEDICATED TABLET RESPONSIVE STYLESHEET
 * ==============================================================================
 * Target Breakpoint: >767px and <1024px (768px - 1023.98px)
 * 
 * Karakteristik:
 * - Dikhususkan untuk mode tablet / medium screen (iPad, iPad Air, iPad Mini, Surface).
 * - Diisolasi penuh dalam @media screen and (min-width: 768px) and (max-width: 1023.98px).
 * - Tidak mempengaruhi tampilan mobile (<=767px), laptop (1024px-1279px), maupun desktop (>=1280px).
 * - Berlaku untuk semua halaman pada project web_padma.
 * ==============================================================================
 */

@media screen and (min-width: 768px) and (max-width: 1023.98px) {

    /* ==========================================================================
       1. GLOBAL RESET & BASE LAYOUT ADJUSTMENTS
       ========================================================================== */
    html {
        font-size: 15px;
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100%;
    }

    body {
        overflow-x: hidden !important;
        background-color: #FFFFFF !important;
        line-height: 1.6;
    }

    /* Section & Container Padding Normalization */
    .section,
    .section2,
    .section3,
    .section4,
    .section5,
    .sectionartikel,
    .section_services1,
    .section_services2,
    .section_services3,
    .section_eb1,
    .section_eb2,
    .section_eb3,
    .section_eb4,
    .section_eb5,
    .section_eb6,
    .section_ins1,
    .section_ins2,
    .section_ins3,
    .section_artikel1,
    .section_artikel2,
    .section_artikel3,
    .section_about1,
    .section_about2,
    .section_about3,
    .section_tw1,
    .section_tw3,
    .section_tw4,
    .section_pe1,
    .section_pe2,
    .section_pe3,
    .section_pe4,
    .section_pe5,
    .section_pensilab2 {
        min-height: auto !important;
        padding: 3.5rem 5% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Reset hardcoded asymmetrical left paddings from legacy CSS */
    .section_artikel1,
    .section_about1 {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }

    .content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Hero section text alignment and margin reset */
    .section_eb1 .content-wrapper,
    .section_ins1 .content-wrapper,
    .section_pe1 .content-wrapper,
    .section_tw1 .content-wrapper,
    .section_artikel1 .content-wrapper,
    .section_about1 .content-wrapper,
    .section_services1 .content-wrapper {
        margin-left: 0 !important;
        margin-top: 2% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* ==========================================================================
       2. TYPOGRAPHY SCALING (TABLET)
       ========================================================================== */
    h1, .h1 {
        font-size: 38px !important;
        line-height: 1.25 !important;
        letter-spacing: 1px !important;
    }

    h2, .h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
        letter-spacing: 1px !important;
    }

    h3, .h3 {
        font-size: 22px !important;
        line-height: 1.35 !important;
    }

    .m-fs-32 {
        font-size: 38px !important;
        line-height: 1.25 !important;
    }

    .m-fs-24 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    .m-fs-18 {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    .m-fs-16 {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    /* ==========================================================================
       3. HEADER & NAVIGATION BAR
       ========================================================================== */
    .header-wrapper {
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .navbar {
        background-color: #243980 !important;
        opacity: 1 !important;
        padding: 10px 24px !important;
        height: 65px !important;
    }

    .navbar.scrolled {
        background-color: #243980 !important;
        opacity: 1 !important;
        height: 50px !important;
        padding: 6px 20px !important;
    }

    .navbar .logo img {
        max-height: 38px !important;
        width: auto !important;
    }

    .navbar.scrolled .logo img {
        max-height: 30px !important;
    }

    /* Mobile toggle icon on tablet */
    .mobile-toggle {
        display: block !important;
        font-size: 22px !important;
        cursor: pointer;
        padding: 6px;
    }

    /* Keep inline navbar links hidden in favor of slide drawer */
    .navbar ul {
        display: none !important;
    }

    .navbar .search {
        display: flex !important;
        align-items: center;
        gap: 10px;
    }

    /* Tablet Drawer Menu Overlay */
    .mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 380px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        background: #0B0B3E !important;
        box-shadow: -10px 0 35px rgba(0, 0, 0, 0.4) !important;
        z-index: 99999 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateX(100%) !important;
        transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s ease, visibility 0.35s !important;
    }

    .mobile-menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
    }

    .mobile-menu-header {
        padding: 18px 20px !important;
    }

    .mobile-menu-nav {
        padding: 10px 20px 40px 20px !important;
    }

    /* Prevent dropdown panels from hanging open when inactive */
    .dropdown-panel:not(.active) {
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        display: none !important;
    }

    .dropdown-panel.active {
        display: block !important;
        visibility: visible !important;
    }

    /* ==========================================================================
       4. HOMEPAGE SECTIONS
       ========================================================================== */
    /* Hero Featured Perspective */
    .section.bg1 {
        padding: 5rem 6% 4rem 6% !important;
        min-height: 80vh !important;
        display: flex !important;
        justify-content: center !important;
    }

    .section.bg1 .content-wrapper p[style*="font-size: 64px"],
    .section.bg1 .m-fs-32 {
        font-size: 38px !important;
        line-height: 1.25 !important;
        margin-bottom: 15px !important;
    }

    .section.bg1 .content-wrapper p[style*="max-width: 800px"] {
        font-size: 15px !important;
        max-width: 90% !important;
        line-height: 1.6 !important;
    }

    /* Latest Perspectives Grid (2 Columns on Tablet) */
    .section3 .m-grid-1,
    .section3 div[style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .perspective-card {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .perspective-card-img {
        height: 180px !important;
        object-fit: cover !important;
    }

    .perspective-card-content {
        padding: 18px !important;
        flex-grow: 1 !important;
    }

    .desktop-only-header {
        height: auto !important;
        min-height: 120px !important;
        margin-bottom: 12px !important;
    }

    /* ==========================================================================
       Promo Showcase Sections (PensionLab & Course) Directly Below Latest Perspective
       ========================================================================== */
    /* Remove outer padding and dark gaps from the container */
    section:has(.content-wrapper.nonoverlay.flex-row),
    .m-section-p:has(.content-wrapper.nonoverlay.flex-row) {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important;
    }

    /* Container wrapper for PensionLab & Course promo sections */
    .content-wrapper.nonoverlay.flex-row {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 380px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Left & Right columns in Promo Showcase */
    .content-wrapper.nonoverlay.flex-row > div:first-child,
    .content-wrapper.nonoverlay.flex-row > div:last-child {
        flex: 1 1 50% !important;
        max-width: 50% !important;
        min-height: 380px !important;
        box-sizing: border-box !important;
    }

    /* Image side in Promo Showcase (Full-bleed #f0f0f0) */
    .content-wrapper.nonoverlay.flex-row > div[style*="background-color: #f0f0f0"] {
        position: relative !important;
        overflow: hidden !important;
        background-color: #f0f0f0 !important;
        min-height: 380px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .content-wrapper.nonoverlay.flex-row > div[style*="background-color: #f0f0f0"] img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        max-width: none !important;
    }

    /* Text side in Promo Showcase (Full-bleed #EAEDF0) */
    .content-wrapper.nonoverlay.flex-row > div[style*="background-color: #EAEDF0"] {
        background-color: #EAEDF0 !important;
        padding: 44px 6% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .content-wrapper.nonoverlay.flex-row > div[style*="background-color: #EAEDF0"] img[src*="head.png"],
    .content-wrapper.nonoverlay.flex-row > div[style*="background-color: #EAEDF0"] img.m-h-auto {
        max-width: 260px !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 16px 0 !important;
    }

    .content-wrapper.nonoverlay.flex-row > div[style*="background-color: #EAEDF0"] p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
        margin-top: 12px !important;
        margin-bottom: 0 !important;
        color: #1a1a1a !important;
    }

    .content-wrapper.nonoverlay.flex-row > div[style*="background-color: #EAEDF0"] .button_hijau {
        margin-top: 24px !important;
    }

    /* About Padma Stats (Convert 4 cramped columns into 2x2 Grid) */
    .section2 .content-wrapper2.m-stack {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
        margin-top: 40px !important;
        width: 100% !important;
    }

    .section2 .counter.m-fs-32 {
        font-size: 44px !important;
        line-height: 1.1 !important;
        margin-bottom: 8px !important;
    }

    /* Action Buttons Row on Homepage */
    .button_hijau {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .button_hijau.m-stack {
        margin-top: 35px !important;
    }

    .button_hijau .btn-img {
        height: 46px !important;
    }

    /* Globacs Section */
    section[data-scroll-section] .content-wrapper.m-stack {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 20px !important;
    }

    /* ==========================================================================
       Recruitment / Careers Section (Directly Below Globacs) on Tablet
       ========================================================================== */
    .section3.bg5 {
        min-height: auto !important;
        padding: 4rem 6% !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .section3.bg5 .content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .section3.bg5 .m-stack {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 32px !important;
        width: 100% !important;
    }

    /* Left Content Column */
    .section3.bg5 .m-stack > div.m-w-full,
    .section3.bg5 .m-stack > div:first-child {
        flex: 1 1 54% !important;
        max-width: 54% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    /* Title */
    .section3.bg5 .m-stack > div.m-w-full p:first-child,
    .section3.bg5 .m-stack > div.m-w-full .m-fs-24,
    .section3.bg5 .recruitment-title {
        font-size: 30px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        max-width: 100% !important;
        color: #ffffff !important;
        margin: 0 0 16px 0 !important;
    }

    /* Description */
    .section3.bg5 .m-stack > div.m-w-full p:nth-child(2),
    .section3.bg5 .m-stack > div.m-w-full .m-fs-16,
    .section3.bg5 .recruitment-desc {
        font-size: 15px !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
        color: rgba(255, 255, 255, 0.95) !important;
        margin-top: 0 !important;
        margin-bottom: 24px !important;
    }

    /* CTA Button Container */
    .section3.bg5 .button_hijau,
    .section3.bg5 .button_hijau.m-btn-center {
        margin-top: 0 !important;
        margin-right: 0 !important;
        width: auto !important;
        display: flex !important;
    }

    /* Right Media / Image Wrapper */
    .section3.bg5 .m-stack > button.btn-img,
    .section3.bg5 .m-stack > button.m-hide,
    .section3.bg5 .recruitment-media {
        display: flex !important;
        flex: 1 1 46% !important;
        max-width: 46% !important;
        position: relative !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3) !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    /* Main Featured Image */
    .section3.bg5 .m-stack > button.btn-img img:first-child,
    .section3.bg5 .m-stack > button.m-hide img:first-child,
    .section3.bg5 .recruitment-img-main {
        width: 100% !important;
        height: auto !important;
        max-height: 280px !important;
        max-width: 100% !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 14px !important;
    }

    /* Center Badge Icon */
    .section3.bg5 .m-stack > button.btn-img .img-btn,
    .section3.bg5 .m-stack > button.m-hide .img-btn,
    .section3.bg5 .recruitment-img-badge {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 60px !important;
        height: 60px !important;
        max-width: none !important;
        pointer-events: none !important;
        z-index: 5 !important;
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4)) !important;
    }

    /* ==========================================================================
       Contact Us Section on Homepage (Directly Below Recruitment) on Tablet
       ========================================================================== */
    #contact-us,
    #contact-us.m-section-p,
    section#contact-us,
    section.hidden.md\:block#contact-us {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    #contact-us .content-wrapper,
    #contact-us .content-wrapper.flex-row {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Left Column: Contact Info & Hours (Full-bleed Navy Blue #243980) */
    #contact-us .content-wrapper > div:first-child {
        flex: 1 1 50% !important;
        max-width: 50% !important;
        padding: 48px 5% !important;
        box-sizing: border-box !important;
        background-color: #243980 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    #contact-us .content-wrapper > div:first-child > p:first-child,
    #contact-us p[style*="margin-left: 20%"] {
        margin-left: 0 !important;
        margin-bottom: 20px !important;
        font-size: 14px !important;
        text-align: left !important;
        color: #ffffff !important;
    }

    #contact-us .content-wrapper > div:first-child .m-stack {
        margin-left: 0 !important;
        width: 100% !important;
    }

    #contact-us .content-wrapper > div:first-child .m-fs-24 {
        font-size: 26px !important;
        font-weight: 700 !important;
        max-width: 100% !important;
        line-height: 1.3 !important;
        color: #57FEC2 !important;
        margin: 0 0 16px 0 !important;
    }

    #contact-us .content-wrapper > div:first-child p[style*="margin-top: 50px"] {
        margin-top: 22px !important;
        font-size: 14.5px !important;
        line-height: 1.55 !important;
        color: #ffffff !important;
    }

    #contact-us .m-stack.flex-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        margin-top: 20px !important;
    }

    #contact-us .m-stack.flex-row p {
        margin: 0 !important;
        font-size: 14.5px !important;
        line-height: 1.55 !important;
        color: #ffffff !important;
    }

    #contact-us .flex-row[style*="gap: 30px"] {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        margin-top: 12px !important;
        align-items: center !important;
    }

    #contact-us .flex-row[style*="gap: 30px"] img {
        width: 28px !important;
        height: 28px !important;
        object-fit: contain !important;
    }

    /* Right Column: Contact Form (Full-bleed Light Gray #f0f0f0) */
    #contact-us .content-wrapper > div:last-child {
        flex: 1 1 50% !important;
        max-width: 50% !important;
        padding: 48px 5% !important;
        box-sizing: border-box !important;
        background-color: #f0f0f0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    #contact-us .content-wrapper > div:last-child > p:first-child,
    #contact-us .content-wrapper > div:last-child .m-text-center {
        margin: 0 0 20px 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        font-size: 26px !important;
        font-weight: 700 !important;
        color: #2A4491 !important;
        text-align: left !important;
    }

    #contact-us form,
    #contact-us form.m-stack {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #contact-us form input,
    #contact-us form textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 12px !important;
        padding: 11px 15px !important;
        font-size: 14.5px !important;
        border-radius: 8px !important;
        border: 1px solid #2A4491 !important;
        background-color: #2A4491 !important;
        color: #ffffff !important;
    }

    #contact-us form textarea {
        min-height: 95px !important;
        resize: vertical !important;
    }

    #contact-us form div[style*="margin-top: 5%"] {
        margin-top: 18px !important;
        width: 100% !important;
    }

    #contact-us form #submitContactBtn,
    #contact-us form button[type="submit"] {
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        background-color: #2CD6AD !important;
        color: #000000 !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    #contact-us form #submitContactBtn:hover,
    #contact-us form button[type="submit"]:hover {
        background-color: #24b895 !important;
    }

    #contact-us form p[style*="font-size: 12px"] {
        font-size: 12px !important;
        line-height: 1.45 !important;
        color: #555555 !important;
    }

    /* Client Logos Marquee on Tablet */
    .client-marquee {
        padding: 1.2rem 0 !important;
    }

    .client-marquee-track {
        gap: 2.8rem !important;
    }

    .client-marquee-item {
        min-width: 110px !important;
        height: 60px !important;
    }

    .client-marquee-item img {
        max-height: 45px !important;
        width: auto !important;
    }

    /* ==========================================================================
       5. PERSPECTIVES / ARTIKEL PAGES
       ========================================================================== */
    /* Featured Article Banner on Artikel Index */
    .artikel-featured-box {
        display: flex !important;
        flex-direction: row !important;
        padding: 24px 28px !important;
        gap: 24px !important;
        max-width: 100% !important;
        border-radius: 12px !important;
    }

    .artikel-featured-box > div:first-child {
        flex: 1 1 58% !important;
    }

    .artikel-featured-box > div:last-child {
        flex: 1 1 42% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .artikel-featured-box img {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    /* Article Grid (2 Columns on Tablet) */
    .article-grid,
    .container-artikel .grid,
    .sectionartikel .grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
        width: 100% !important;
    }

    /* Category Filter Pills & Search */
    .article-filters,
    .filter-pills-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-bottom: 25px !important;
    }

    /* Article Detail Page */
    .section2.bg2:has(.article-detail-wrapper) {
        padding: 3.5rem 5% 2rem 5% !important;
    }

    .section2.bg2:has(.article-detail-wrapper) .content-wrapper {
        margin-top: 0 !important;
        max-width: 100% !important;
    }

    .article-detail-wrapper,
    .article-detail-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 35px auto !important;
        gap: 28px !important;
        padding: 0 !important;
    }

    .article-meta-col {
        flex: 1 1 56% !important;
        max-width: 56% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .article-title,
    .article-meta-col .article-title,
    p.article-title,
    .article-detail-header h1 {
        font-size: 32px !important;
        line-height: 1.25 !important;
        margin-bottom: 14px !important;
        font-family: 'JetBrains Mono', monospace !important;
        color: #222274 !important;
        font-weight: 700 !important;
    }

    .article-subtitle,
    .article-meta-col .article-subtitle,
    p.article-subtitle {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
        color: #666666 !important;
    }

    .article-author-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .article-by-text {
        font-size: 15px !important;
    }

    .article-author-name,
    .article-meta-col .article-author-name {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #00A4FF !important;
    }

    .article-image-col {
        flex: 1 1 44% !important;
        max-width: 44% !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    .article-main-image,
    .article-detail-featured-img {
        width: 100% !important;
        max-width: 100% !important;
        height: 260px !important;
        max-height: 280px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        box-shadow: 0 6px 20px rgba(34, 34, 116, 0.08) !important;
    }

    .article-author-box {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 35px auto !important;
        padding: 14px 0 !important;
        border-top: 1px solid #E2E8F0 !important;
        border-bottom: 1px solid #E2E8F0 !important;
        gap: 16px !important;
    }

    .article-read-time {
        font-size: 15px !important;
    }

    .article-content-area {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 40px auto !important;
        font-size: 16px !important;
        line-height: 1.75 !important;
        color: #2D3748 !important;
    }

    .article-content-area img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 10px !important;
    }

    .article-content-area h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-top: 28px !important;
        margin-bottom: 14px !important;
    }

    .article-content-area h3 {
        font-size: 20px !important;
        line-height: 1.35 !important;
        margin-top: 22px !important;
        margin-bottom: 12px !important;
    }

    /* Section Author & Legal below content */
    .section-author-legal,
    section.m-section-p:has(.article-legal-list) {
        padding: 2.5rem 5% !important;
        background-color: #ffffff !important;
    }

    .section-author-legal .content-wrapper,
    section.m-section-p:has(.article-legal-list) .content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .article-divider {
        width: 100% !important;
        margin: 0 0 28px 0 !important;
    }

    .article-author-heading {
        width: 100% !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #222274 !important;
        margin-bottom: 12px !important;
        text-align: left !important;
    }

    .article-author-profile-row {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 20px !important;
        margin-bottom: 28px !important;
        padding-bottom: 20px !important;
        border-bottom: 1px solid #E2E8F0 !important;
    }

    .article-author-profile-name {
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    .article-author-profile-role {
        font-size: 14px !important;
        color: #64748b !important;
    }

    .article-author-profile-actions {
        display: flex !important;
        gap: 10px !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .article-legal-wrapper,
    .article-legal-list {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
    }

    .article-legal-list .legal-item {
        width: 100% !important;
        border-radius: 8px !important;
        margin-bottom: 12px !important;
    }

    .article-legal-list .legal-toggle {
        font-size: 15px !important;
        padding: 14px 18px !important;
    }

    .article-legal-list .legal-body {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* ==========================================================================
       Perspektif Terkait (Related Articles) Section on Detail Article Page
       ========================================================================== */
    #section-articles,
    #section-articles.section_eb4,
    .section_eb4:has(.article-grid) {
        min-height: auto !important;
        padding: 3.5rem 5% !important;
        background-color: #F8FAFC !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #section-articles .content-wrapper,
    .section_eb4:has(.article-grid) .content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .related-articles-title,
    #section-articles .related-articles-title,
    #section-articles div[style*="font-family: 'JetBrains'"] {
        margin-left: 0 !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        color: #222274 !important;
        margin-bottom: 24px !important;
        margin-top: 0 !important;
        font-family: 'JetBrains Mono', monospace !important;
        text-align: left !important;
    }

    #section-articles .article-grid,
    .section_eb4 .article-grid,
    .related-articles-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 22px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #section-articles .eb-article-card,
    .section_eb4 .eb-article-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        border-radius: 12px !important;
        background-color: #27397F !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    }

    #section-articles .eb-article-card:hover,
    .section_eb4 .eb-article-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2) !important;
    }

    #section-articles .eb-article-img-wrapper,
    .section_eb4 .eb-article-img-wrapper {
        width: 100% !important;
        height: 180px !important;
        overflow: hidden !important;
        border-radius: 12px 12px 0 0 !important;
    }

    #section-articles .eb-article-img,
    .section_eb4 .eb-article-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    #section-articles .eb-article-body,
    .section_eb4 .eb-article-body {
        padding: 18px 20px !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        background-color: #27397F !important;
        color: #ffffff !important;
    }

    #section-articles .eb-article-category,
    .section_eb4 .eb-article-category {
        display: inline-block !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        padding: 4px 10px !important;
        border-radius: 4px !important;
        background-color: rgba(255, 255, 255, 0.15) !important;
        color: #57FEC2 !important;
        align-self: flex-start !important;
        margin-bottom: 12px !important;
    }

    #section-articles .eb-article-title,
    .section_eb4 .eb-article-title {
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        color: #ffffff !important;
        margin: 0 0 10px 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-decoration: none !important;
        transition: color 0.3s ease !important;
    }

    #section-articles .eb-article-title:hover,
    .section_eb4 .eb-article-title:hover {
        color: #57FEC2 !important;
    }

    #section-articles .eb-article-excerpt,
    .section_eb4 .eb-article-excerpt {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        color: rgba(255, 255, 255, 0.85) !important;
        margin: 0 0 14px 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    #section-articles .eb-article-footer,
    .section_eb4 .eb-article-footer {
        padding: 0 20px 18px 20px !important;
        margin-top: auto !important;
        background-color: #27397F !important;
    }

    #section-articles .eb-read-more,
    .section_eb4 .eb-read-more {
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: #57FEC2 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        text-decoration: none !important;
        transition: color 0.3s ease !important;
    }

    #section-articles .eb-read-more:hover,
    .section_eb4 .eb-read-more:hover {
        color: #ffffff !important;
    }

    /* 6th Card: Custom Promo Banner Card in Related Articles Grid */
    #section-articles .eb-article-card-banner,
    .section_eb4 .eb-article-card-banner,
    #section-articles .eb-article-card:has(img[src*="relatedimg.png"]) {
        position: relative !important;
        min-height: 280px !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        padding: 24px !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        background: #243980 !important;
        border: none !important;
    }

    #section-articles .eb-article-card-banner .eb-banner-img,
    #section-articles .eb-article-card-banner img,
    #section-articles .eb-article-card:has(img[src*="relatedimg.png"]) img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        z-index: 1 !important;
        margin: 0 !important;
    }

    #section-articles .eb-article-card-banner .eb-banner-title,
    #section-articles .eb-article-card-banner p,
    #section-articles .eb-article-card:has(img[src*="relatedimg.png"]) p {
        position: relative !important;
        z-index: 2 !important;
        color: #ffffff !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin: 0 0 16px 0 !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
        max-width: 90% !important;
    }

    #section-articles .eb-article-card-banner .eb-banner-link,
    #section-articles .eb-article-card-banner a,
    #section-articles .eb-article-card:has(img[src*="relatedimg.png"]) a {
        position: relative !important;
        z-index: 2 !important;
        display: inline-block !important;
        text-decoration: none !important;
        margin: 0 !important;
    }

    #section-articles .eb-article-card-banner .eb-banner-btn,
    #section-articles .eb-article-card-banner button,
    #section-articles .eb-article-card:has(img[src*="relatedimg.png"]) button {
        position: static !important;
        margin: 0 !important;
        padding: 9px 20px !important;
        background-color: #ffffff !important;
        color: #222274 !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
        border: none !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
        transition: all 0.2s ease !important;
    }

    #section-articles .eb-article-card-banner .eb-banner-btn:hover,
    #section-articles .eb-article-card:has(img[src*="relatedimg.png"]) button:hover {
        background-color: #222274 !important;
        color: #ffffff !important;
    }

    #section-articles .pagination-wrapper {
        display: flex !important;
        justify-content: center !important;
        margin-top: 30px !important;
        width: 100% !important;
    }

    /* ==========================================================================
       Container Di Bawah Perspektif Terkait (Contact & Subscribe Banner)
       ========================================================================== */
    #section-contact.section_tw4,
    section.section_tw4:has(.contact-section-improved),
    .section_tw4:has(.contact-section-improved) {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    /* Section Contact di halaman EB, Tim, INS (Card Island) */
    .section_eb6,
    #section-contact.section_eb6,
    section.section_eb6,
    .section_ins3,
    .section_pe5 {
        background-color: #FFFFFF !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #section-contact .contact-section-improved,
    .contact-section-improved,
    .section_artikel4 .contact-section-improved,
    .section_tw4 .contact-section-improved {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 30px 5% !important;
        background-color: #09FFB8 !important;
        gap: 28px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    #section-contact .contact-content,
    .contact-section-improved .contact-content,
    .contact-content {
        flex: 1 1 65% !important;
        max-width: 68% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        text-align: left !important;
    }

    #section-contact .contact-text,
    .contact-section-improved .contact-text,
    .contact-text {
        font-size: 20px !important;
        line-height: 1.4 !important;
        color: #222274 !important;
        margin: 0 !important;
        font-family: 'Inter', sans-serif !important;
        font-weight: 500 !important;
        text-align: left !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    #section-contact .contact-text strong,
    .contact-section-improved .contact-text strong,
    .contact-text strong {
        font-weight: 700 !important;
    }

    #section-contact .contact-buttons,
    .contact-section-improved .contact-buttons,
    .contact-buttons {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 32% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-end !important;
    }

    #section-contact .btn-contact-improved,
    .contact-section-improved .btn-contact-improved,
    .btn-contact-improved {
        padding: 14px 28px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        white-space: nowrap !important;
        font-family: 'Inter', sans-serif !important;
        cursor: pointer !important;
        transition: all 0.25s ease !important;
        width: auto !important;
        min-width: 180px !important;
        box-sizing: border-box !important;
    }

    #section-contact .btn-primary-contact,
    .btn-primary-contact {
        background-color: #222274 !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 3px 8px rgba(34, 34, 116, 0.2) !important;
    }

    #section-contact .btn-primary-contact:hover,
    .btn-primary-contact:hover {
        background-color: #2d2d8a !important;
        transform: translateY(-1px) !important;
    }

    #section-contact .btn-secondary-contact,
    .btn-secondary-contact {
        background-color: #ffffff !important;
        color: #222274 !important;
        border: 2px solid #222274 !important;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
    }

    #section-contact .btn-secondary-contact:hover,
    .btn-secondary-contact:hover {
        background-color: #f0f0ff !important;
        transform: translateY(-1px) !important;
    }

    /* ==========================================================================
       6. SERVICES & SOLUTIONS (GENERAL, EB, INS, ME)
       ========================================================================== */
    /* 6.1 Service Overview Page (service.blade.php) - Above Bukti Legalitas */
    /* Hero Banner (section_tw1 on service page) */
    .section_tw1 {
        min-height: auto !important;
        padding: 4.5rem 5% 1.5rem 5% !important;
        background-color: #FFFFFF !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .section_tw1 .content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .section_tw1 p:first-child {
        font-size: 13.5px !important;
        margin-bottom: 8px !important;
    }

    .section_tw1 .m-fs-32 {
        font-size: 34px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        color: #222274 !important;
        margin-top: 6px !important;
        margin-bottom: 14px !important;
    }

    .section_tw1 p[style*="max-width: 90%"] {
        font-size: 16px !important;
        max-width: 100% !important;
        line-height: 1.6 !important;
        color: #333333 !important;
    }

    /* Quick Nav Tab Buttons (section_services1) */
    .section_services1 {
        min-height: auto !important;
        padding: 1rem 5% 2rem 5% !important;
        background-color: #FFFFFF !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .section_services1 .content-wrapper,
    .section_services1 .m-stack {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 14px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .section_services1 .btn-eb {
        width: auto !important;
        flex: 0 0 auto !important;
        padding: 10px 24px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        border: 1.5px solid #222274 !important;
        background-color: #ffffff !important;
        color: #222274 !important;
        cursor: pointer !important;
        transition: all 0.25s ease !important;
        box-shadow: 0 2px 8px rgba(34, 34, 116, 0.06) !important;
    }

    .section_services1 .btn-eb:hover {
        background-color: #222274 !important;
        color: #ffffff !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(34, 34, 116, 0.15) !important;
    }

    /* 3 Service Preview Cards Grid (section_services2 / #section-services) */
    #section-services,
    .section_services2 {
        min-height: auto !important;
        padding: 1.5rem 5% 3.5rem 5% !important;
        background-color: #FFFFFF !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }

    .section_services2 .content-wrapper {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 18px !important;
        background-color: transparent !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        justify-content: center !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    .section_services2 .content-wrapper > div {
        margin: 0 auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        position: relative !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 18px rgba(34, 34, 116, 0.10) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease !important;
        box-sizing: border-box !important;
    }

    .section_services2 .content-wrapper > div:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 8px 24px rgba(34, 34, 116, 0.18) !important;
    }

    .section_services2 .content-wrapper > div img {
        width: 100% !important;
        height: 310px !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 auto !important;
        border-radius: 14px !important;
        transition: transform 0.4s ease !important;
    }

    .section_services2 .content-wrapper > div:hover img {
        transform: scale(1.04) !important;
    }

    .section_services2 .content-wrapper > div p {
        position: absolute !important;
        top: 40% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        text-align: center !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        font-family: 'JetBrains Mono', monospace !important;
        color: #ffffff !important;
        line-height: 1.25 !important;
        margin: 0 auto !important;
        white-space: normal !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
        z-index: 2 !important;
    }

    .section_services2 .content-wrapper > div a {
        position: absolute !important;
        bottom: 12% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 2 !important;
        text-decoration: none !important;
        display: flex !important;
        justify-content: center !important;
        width: auto !important;
        margin: 0 auto !important;
    }

    .section_services2 .content-wrapper > div button {
        position: static !important;
        background-color: #ffffff !important;
        color: #27397F !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        padding: 9px 22px !important;
        border-radius: 6px !important;
        border: none !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
        transition: all 0.25s ease !important;
        margin: 0 auto !important;
    }

    .section_services2 .content-wrapper > div button:hover {
        background-color: #27397F !important;
        color: #ffffff !important;
    }

    /* 6.2 Legal Credentials on Service Page */
    .section_services3 .credentials-title {
        margin-left: 0 !important;
        font-size: 28px !important;
        text-align: left !important;
        margin-bottom: 20px !important;
    }

    .section_services3 .content-wrapper {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    .section_services3 .cred-block {
        width: 100% !important;
    }

    .section_services3 .cred-logo {
        max-width: 110px !important;
        width: auto !important;
    }

    /* Quick Nav Buttons on Service Subpages */
    .btn-eb {
        padding: 8px 18px !important;
        font-size: 13.5px !important;
    }

    /* Hide overflowing decorative images that block tabs */
    .section_eb2 img[src*="insimg"],
    .section_eb2 img[src*="ebimg"],
    .section_eb2 img[src*="meimg"] {
        display: none !important;
    }

    /* Content block headers */
    .section_eb3 > .content-wrapper:first-child,
    .section_eb5 > .content-wrapper:first-child {
        max-width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Dropdown container */
    .eb-dropdown-container {
        margin-left: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Highlight Perspective Card in EB/INS/ME */
    .perspective-card-wrapper {
        display: flex !important;
        flex-direction: row !important;
        max-width: 100% !important;
        padding: 24px 28px !important;
        gap: 24px !important;
    }

    .perspective-text-col {
        flex: 1 1 55% !important;
        max-width: 55% !important;
    }

    .perspective-card-title {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }

    .perspective-img-col {
        flex: 1 1 45% !important;
        max-width: 45% !important;
    }

    .perspective-img-col img {
        height: 200px !important;
        object-fit: cover !important;
    }

    /* Feature & Service Cards Grid */
    .services-grid,
    .eb-features-grid,
    .ins-services-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }

    /* Two-column content blocks */
    .two-column-block,
    .service-split-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 24px !important;
        align-items: center !important;
    }

    .service-split-row > div {
        flex: 1 1 50% !important;
    }

    /* Tables & Calculation Wrappers on Tablet */
    .responsive-table-wrapper,
    .calc-table-container,
    .table-container {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 20px !important;
    }

    /* Tab navigation buttons */
    .tab-btn-wrapper,
    .pension-data-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .tab-btn-wrapper button {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }

    /* Lead Form / Simulation Cards */
    .lead-form-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* Section Contact in EB/INS/ME */
    .section_eb6,
    #section-contact.section_eb6,
    section.section_eb6 {
        background-color: #FFFFFF !important;
    }

    .section_eb6 p.m-text-p {
        max-width: 100% !important;
        font-size: 20px !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .section_eb6 .btn-eb {
        width: auto !important;
        white-space: nowrap !important;
    }

    /* ==========================================================================
       7. PENSIONLAB® & SIMULATION
       ========================================================================== */
    /* 7.1 PensionLab Hero Header & Overview (Tablet) */
    .section_about1.pensionlab-hero-section,
    .section_about1:has(.pensionlab-title-pension),
    .section_about1:has(.pensionlab-title-row) {
        min-height: auto !important;
        padding: 4rem 5% 1.5rem 5% !important;
        background-color: #FFFFFF !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .section_about1.pensionlab-hero-section .content-wrapper,
    .section_about1:has(.pensionlab-title-pension) .content-wrapper,
    .section_about1:has(.pensionlab-title-row) .content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pensionlab-breadcrumb,
    .section_about1.pensionlab-hero-section .pensionlab-breadcrumb {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 12px !important;
        font-size: 13.5px !important;
        text-align: left !important;
        color: #00A4FF !important;
    }

    .pensionlab-title-row,
    .section_about1.pensionlab-hero-section .pensionlab-title-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 10px 0 16px 0 !important;
    }

    .pensionlab-hero-logo,
    .pensionlab-title-row img {
        max-width: 260px !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }

    .pensionlab-desc,
    .section_about1.pensionlab-hero-section .pensionlab-desc {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        font-size: 15.5px !important;
        line-height: 1.65 !important;
        max-width: 100% !important;
        color: #333333 !important;
        text-align: left !important;
    }

    .section_pensilab2 {
        padding: 1rem 5% 3.5rem 5% !important;
    }

    .section_pensilab2 .content-wrapper,
    .section_pensilab2 .content-wrapper[style*="max-width: 80%"] {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    .pensionlab-container {
        padding: 2rem 3% !important;
    }

    .sim-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    .sim-card {
        padding: 22px !important;
        border-radius: 12px !important;
    }

    .sim-card:has(.sim-action-bar),
    .sim-card:has(#btn-simulasi) {
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* PensionLab Simulation Action Bar & Buttons (Tablet Layout) */
    .sim-action-bar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        padding: 20px 24px !important;
        background-color: #EFF6FF !important;
        border-radius: 12px !important;
        gap: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .sim-action-text {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    .sim-action-text p {
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        color: #27397F !important;
        text-align: left !important;
    }

    .sim-action-buttons {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        width: auto !important;
        margin-left: auto !important;
    }

    #btn-reset-pesangon,
    #btn-reset-pajak,
    #btn-reset-alokasi,
    #btn-reset-pensiun {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 20px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        text-align: center !important;
        cursor: pointer !important;
    }

    #btn-simulasi,
    #btn-simulasikan-pajak,
    #btn-simulasi-alokasi,
    #btn-simulasi-pensiun {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 26px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        text-align: center !important;
        cursor: pointer !important;
    }

    /* Ensure nested form grids in pensionlab don't exceed 2 columns on tablet */
    .sim-card-body,
    .sim-card-body[style*="grid-template-columns: 1fr 1fr 1fr"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .sim-result-summary {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .chart-container-wrapper {
        min-height: 320px !important;
        width: 100% !important;
    }

    /* ==========================================================================
       8. WORKSHOP, PAST EVENTS & PADMATALKS
       ========================================================================== */
    /* 8.1 Workshop Page (workshop.blade.php) */
    /* Hero Header (section_tw1) */
    .section_tw1 {
        min-height: auto !important;
        padding: 4.5rem 5% 2rem 5% !important;
        background-color: #FFFFFF !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .section_tw1 .content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .section_tw1 p:first-child {
        font-size: 13.5px !important;
        margin-bottom: 8px !important;
        color: #00A4FF !important;
    }

    .section_tw1 .m-fs-32,
    .section_tw1 div[style*="JetBrains Mono"] {
        font-size: 34px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        color: #222274 !important;
        margin-top: 6px !important;
        margin-bottom: 14px !important;
    }

    .section_tw1 p[style*="max-width: 90%"] {
        font-size: 16px !important;
        max-width: 100% !important;
        line-height: 1.6 !important;
        color: #333333 !important;
    }

    /* Tab Buttons Nav Section (section_tw2) - Clean White background, Center aligned */
    .section_tw2,
    section.section_tw2:not(:has(#faq-container)) {
        min-height: auto !important;
        padding: 0.5rem 5% 2.5rem 5% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        background-color: #FFFFFF !important;
        color: #222274 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .section_tw2 .workshop-tabs-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* Default (Inactive) Tab Button */
    .section_tw2 button.btn-with-icon,
    .section_tw2 .btn-with-icon,
    .section_tw2 .btn-eb {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        flex: 0 0 auto !important;
        padding: 10px 22px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        border: 1.5px solid #222274 !important;
        background-color: #ffffff !important;
        color: #222274 !important;
        cursor: pointer !important;
        transition: all 0.25s ease !important;
        box-shadow: 0 2px 8px rgba(34, 34, 116, 0.06) !important;
        outline: none !important;
    }

    /* Active Tab Button */
    .section_tw2 button.btn-with-icon.active,
    .section_tw2 .btn-with-icon.active {
        background-color: #222274 !important;
        color: #ffffff !important;
        border: 1.5px solid #222274 !important;
        box-shadow: 0 4px 14px rgba(34, 34, 116, 0.22) !important;
    }

    .section_tw2 button.btn-with-icon.active img,
    .section_tw2 .btn-with-icon.active img,
    .section_tw2 .btn-with-icon.active .tab-icon {
        filter: brightness(0) invert(1) !important;
    }

    /* Hover Tab Button */
    .section_tw2 button.btn-with-icon:hover,
    .section_tw2 .btn-with-icon:hover,
    .section_tw2 .btn-eb:hover {
        background-color: #222274 !important;
        color: #ffffff !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(34, 34, 116, 0.18) !important;
    }

    .section_tw2 button.btn-with-icon:hover img,
    .section_tw2 .btn-with-icon:hover img,
    .section_tw2 .btn-with-icon:hover .tab-icon {
        filter: brightness(0) invert(1) !important;
    }

    .section_tw2 .btn-with-icon .icon-text {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        pointer-events: none !important;
    }

    .section_tw2 .btn-with-icon img,
    .section_tw2 .btn-with-icon .tab-icon {
        width: 18px !important;
        height: 18px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
        transition: filter 0.25s ease !important;
    }

    /* Workshop Card Container & Rows (section_tw3) */
    .section_tw3 {
        min-height: auto !important;
        padding: 3rem 5% 4.5rem 5% !important;
        background-color: #FFFFFF !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .section_tw3 .content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .workshop-items-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        width: 100% !important;
    }

    /* Workshop Card Rows (Stacked on tablet for optimal legibility) */
    .workshop-card-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        background: #ffffff !important;
        padding: 24px 28px !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 18px rgba(34, 34, 116, 0.07) !important;
        border: 1px solid #E2E8F0 !important;
        box-sizing: border-box !important;
    }

    .workshop-card-img-wrapper {
        width: 100% !important;
    }

    .workshop-card-img {
        max-height: 280px !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }

    .workshop-card-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .workshop-card-title {
        font-size: 28px !important;
        line-height: 1.25 !important;
        color: #222274 !important;
        margin: 0 !important;
    }

    .workshop-card-desc {
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: #4b5563 !important;
        margin: 0 !important;
    }

    .workshop-card-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 10px !important;
        background: #f9fafb !important;
        padding: 18px 20px !important;
        border-radius: 10px !important;
        border-left: 4px solid #f39c12 !important;
    }

    .workshop-card-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        margin-top: 15px !important;
    }

    .workshop-card-buttons button,
    .workshop-card-buttons a {
        margin-right: 0 !important;
    }

    /* Workshop Section Common Questions (FAQ at bottom of workshop) */
    .section_tw2:has(#faq-container) {
        background-color: #FFFFFF !important;
        padding: 3rem 5% 4rem 5% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .section_tw2:has(#faq-container) > p,
    .section_tw2 p[style*="margin-left: 15%"] {
        margin: 0 auto 20px auto !important;
        max-width: 100% !important;
        width: 100% !important;
        font-size: 28px !important;
        font-family: 'JetBrains Mono', monospace !important;
        font-weight: 700 !important;
        color: #222274 !important;
        text-align: left !important;
    }

    .section_tw2:has(#faq-container) > .content-wrapper,
    .section_tw2 .content-wrapper[style*="max-width: 80%"],
    .section_tw2 .content-wrapper:has(#faq-container) {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        background-color: #ffffff !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 24px 28px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 18px rgba(34, 34, 116, 0.06) !important;
        box-sizing: border-box !important;
    }

    .section_tw2 #faq-container,
    #faq-container {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .section_tw2 .info-dropdown {
        border-bottom: 1px solid #E2E8F0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .section_tw2 .dropdown-toggle {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 16px 0 !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    .section_tw2 .dropdown-toggle span {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #5468B6 !important;
    }

    .section_tw2 .dropdown-content p {
        font-size: 14.5px !important;
        line-height: 1.6 !important;
        color: #4B5563 !important;
    }

    /* Past Events Grid */
    .workshop-grid,
    .past-events-grid,
    .padmatalks-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }

    .workshop-card,
    .event-card {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    .event-card img {
        height: 200px !important;
        object-fit: cover !important;
    }

    /* Past Event Contact Banner */
    .section_pe5 .content-wrapper {
        padding: 24px !important;
        border-radius: 12px !important;
    }

    /* ==========================================================================
       9. ABOUT US & TIM (ABOUT PADMA PAGE)
       ========================================================================== */
    /* 9.1 Hero Banner */
    .section_about1 {
        min-height: auto !important;
        padding: 4.5rem 5% 2.5rem 5% !important;
        background-color: #FFFFFF !important;
    }

    .section_about1 .content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .section_about1 p:first-child {
        font-size: 13.5px !important;
    }

    .section_about1 .m-fs-32 {
        font-size: 34px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        color: #222274 !important;
        margin-top: 6px !important;
        margin-bottom: 14px !important;
    }

    .section_about1 p[style*="max-width: 90%"] {
        font-size: 16px !important;
        max-width: 100% !important;
        line-height: 1.6 !important;
        color: #333333 !important;
    }

    /* 9.2 Core Vision, Mission & Values (Directly Below Tentang Padma) */
    .section_about2 {
        min-height: auto !important;
        padding: 3rem 4% 4rem 4% !important;
        background-color: #FFFFFF !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .section_about2 .content-wrapper,
    .section_about2 .about-grid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        gap: 20px !important;
        box-sizing: border-box !important;
    }

    .section_about2 .about-col {
        flex: 1 1 31% !important;
        max-width: 31% !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    .section_about2 .about-img-col {
        flex: 1 1 34% !important;
        max-width: 34% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        order: 0 !important;
        margin: 0 !important;
    }

    .section_about2 .about-img-col img {
        width: 100% !important;
        height: auto !important;
        max-height: 360px !important;
        object-fit: contain !important;
        border-radius: 12px !important;
    }

    .section_about2 .about-col p[style*="font-size: 24px"] {
        font-size: 19px !important;
        font-weight: 700 !important;
        color: #222274 !important;
        margin-bottom: 12px !important;
        line-height: 1.3 !important;
    }

    .section_about2 .about-col p[style*="font-size: 20px"] {
        font-size: 15.5px !important;
        font-weight: 700 !important;
        margin-top: 8px !important;
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
    }

    .section_about2 .about-col p:not([style*="font-weight: bold"]):not([style*="font-size: 24px"]):not([style*="font-size: 20px"]) {
        font-size: 13px !important;
        line-height: 1.55 !important;
        color: #444444 !important;
    }

    /* 9.3 Our Journey Timeline Section (Perjalanan Kami) */
    .section_about3 {
        min-height: auto !important;
        padding: 4rem 5% 5rem 5% !important;
        background-color: #F9F9F9 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .timeline-header {
        max-width: 100% !important;
        margin: 0 auto 2.5rem auto !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        gap: 20px !important;
    }

    .timeline-header > div:first-child {
        flex: 1 1 auto !important;
        max-width: 75% !important;
    }

    .timeline-label {
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: #00A4FF !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        margin-bottom: 6px !important;
    }

    .timeline-title {
        font-size: 32px !important;
        font-weight: 700 !important;
        color: #222274 !important;
        line-height: 1.25 !important;
        margin: 0 0 8px 0 !important;
    }

    .timeline-subtitle {
        font-size: 15px !important;
        color: #666666 !important;
        max-width: 100% !important;
        line-height: 1.6 !important;
        margin: 0 !important;
    }

    .timeline-header > div:last-child {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex-shrink: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .timeline-header button#timelinePrev,
    .timeline-header button#timelineNext {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    .timeline-outer {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 1.5rem 0 2rem 0 !important;
        cursor: grab !important;
    }

    .timeline-track-wrapper {
        padding: 1% 2% !important;
        min-width: max-content !important;
    }

    .timeline-track {
        display: flex !important;
        align-items: stretch !important;
        gap: 20px !important;
    }

    .timeline-item {
        width: 240px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .timeline-card {
        width: 240px !important;
        min-height: 350px !important;
        height: 100% !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 4px 20px rgba(34, 34, 116, 0.08) !important;
        border: 1.5px solid #e0e7ff !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    .timeline-card-img {
        width: 100% !important;
        height: 160px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    .timeline-card-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .timeline-card-body {
        padding: 16px !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
    }

    .timeline-card-year {
        font-size: 28px !important;
        font-weight: 800 !important;
        color: #27397F !important;
        line-height: 1.1 !important;
        margin-bottom: 8px !important;
        display: inline-block !important;
    }

    .timeline-card-title {
        font-size: 14.5px !important;
        font-weight: 700 !important;
        color: #222274 !important;
        line-height: 1.35 !important;
        margin-bottom: 6px !important;
        position: static !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .timeline-card-desc {
        font-size: 12.5px !important;
        line-height: 1.55 !important;
        color: #555555 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 5 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    .vision-mission-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }

    .team-grid,
    .tim-container .grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }

    .timeline-container {
        padding: 20px 0 !important;
    }

    /* ==========================================================================
       10. CONTACT US & FAQ
       ========================================================================== */
    .contact-page-wrapper {
        padding: 3rem 4% !important;
    }

    /* Contact Us Top Info Cards on Tablet (Grid 3 columns) */
    .bg-slate-50 .grid.lg\:grid-cols-5 {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
    }

    .bg-slate-50 .lg\:col-span-2 {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .bg-slate-50 .lg\:col-span-3 {
        width: 100% !important;
    }

    .faq-accordion-item {
        margin-bottom: 16px !important;
        padding: 18px 20px !important;
    }

    /* ==========================================================================
       11. FOOTER (TABLET ADAPTATION)
       ========================================================================== */
    .footer-section {
        padding: 60px 40px 30px 40px !important;
    }

    .footer-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 35px 40px !important;
        align-items: start !important;
    }

    .footer-left {
        grid-column: 1 !important;
    }

    .footer-center {
        grid-column: 2 !important;
    }

    .footer-right {
        grid-column: 1 / -1 !important;
        margin-top: 10px !important;
    }

    .footer-logo {
        width: 130px !important;
        margin-bottom: 20px !important;
    }

    .footer-company-name {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }

    .footer-address {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .footer-links-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px 25px !important;
    }

    .footer-link {
        font-size: 14px !important;
    }

    .footer-info {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }

    .footer-recaptcha {
        font-size: 13px !important;
    }

    .footer-copyright {
        grid-column: 1 / -1 !important;
        margin-top: 30px !important;
        padding-top: 20px !important;
        font-size: 12px !important;
    }

    /* ==========================================================================
       12. MODALS, FLASH ALERTS & UTILITIES
       ========================================================================== */
    .contact-modal-container {
        width: 90% !important;
        max-width: 620px !important;
        margin: auto !important;
        max-height: 85vh !important;
        padding: 25px !important;
    }

    #flashMessage {
        width: 85% !important;
        max-width: 540px !important;
        top: 80px !important;
    }

    /* Social Media Icons (16px) */
    .business-social-row img,
    .contact-info-grid img[src*="assets/ig.png"],
    .contact-info-grid img[src*="assets/yt.png"],
    .contact-info-grid img[src*="assets/linkedin.png"],
    a[href*="instagram"] img,
    a[href*="youtube"] img,
    a[href*="linkedin"] img,
    .social-icon,
    .social-media-icon {
        width: 16px !important;
        height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        object-fit: contain !important;
    }

    .social-links i,
    .social-icons i,
    a[href*="instagram"] i,
    a[href*="youtube"] i,
    a[href*="linkedin"] i {
        font-size: 16px !important;
    }

    /* Safe utility classes for tablet */
    .t-hide {
        display: none !important;
    }

    .t-block {
        display: block !important;
    }

    .t-flex {
        display: flex !important;
    }

    .t-grid-2 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .t-w-full {
        width: 100% !important;
    }
}