<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#040e26">
    <title>PT Alvindo Bangun Sarana Mandiri | INDOKONTRAKTOR</title>
    <link rel="stylesheet" href="BANGUNAN/Colorlib%20_%20Free%20Bootstrap%20Website%20Template_files/font-awesome.min.css">
    <link rel="stylesheet" href="BANGUNAN/Colorlib%20_%20Free%20Bootstrap%20Website%20Template_files/style.css">
    <style>
        :root {
            --alvindo-navy: #040e26;
            --alvindo-accent: #fc5e28;
            --alvindo-light: #f7fbff;
            --alvindo-ink: #0d1b2c;
            --alvindo-muted: #64748b;
            --alvindo-card: rgba(4, 14, 38, 0.88);
            --alvindo-radius: 30px;
        }

        html { scroll-behavior: smooth; }
        body {
            /* overflow-x: hidden paired with an implicit overflow-y: visible forces the
               browser to promote overflow-y to "auto", which breaks position: sticky
               on any descendant (this was why the toolbar detached while scrolling).
               overflow-x: clip does the same horizontal clipping without that side effect. */
            overflow-x: clip;
            color: var(--alvindo-ink);
            background: #fff;
        }

        .site-top {
            background: var(--alvindo-navy);
            color: rgba(255, 255, 255, 0.74);
        }

        .site-top .social-media p a {
            background: rgba(255, 255, 255, 0.08);
        }

        .header-band {
            background: #fff;
        }

        /* header-band selalu berlatar navy gelap (lihat override dark & light
           di bawah), jadi teksnya HARUS terang secara eksplisit di kedua mode
           — sebelumnya ikut warna teks default yang gelap sehingga hilang. */
        .header-band .topper,
        .header-band .topper .text,
        .header-band .topper .text .con,
        .header-band .topper .text .con span {
            color: #eef5ff;
        }

        .header-band .topper .icon {
            color: var(--alvindo-accent);
        }

        /* ===== Rounded "device card" caps =====
           Sticky positioning breaks if any ancestor of the sticky nav clips
           overflow. The nav lives directly under #page-viewport, so we never
           clip #page-viewport itself. Instead we clip only the first block
           (site-top + header-band) and the very last block (footer) — neither
           of those is an ancestor of the sticky nav — to get a fully oval
           top edge and bottom edge with no square corners anywhere. */
        .page-top-cap {
            overflow: hidden;
            border-radius: var(--alvindo-radius) var(--alvindo-radius) 0 0;
        }

        .navbar-brand {
            gap: 14px;
            text-decoration: none;
        }

        .navbar-brand img {
            width: 58px;
            height: 58px;
            object-fit: contain;
        }

        .navbar-brand span {
            color: #111827;
            line-height: 1;
        }

        .navbar-brand span small {
            color: var(--alvindo-accent);
        }

        .header-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            justify-content: flex-end;
            flex-wrap: wrap;
        }

        .header-meta .meta-box {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border-radius: 999px;
            background: #fff;
            border: 1px solid rgba(4, 14, 38, 0.10);
            color: #0f172a;
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
        }

        .header-meta .meta-box i {
            color: var(--alvindo-accent);
        }

        .mode-toggle {
            border: 0;
            cursor: pointer;
        }

        .ftco-navbar-light {
            position: sticky;
            top: 0;
            z-index: 50;
            background: var(--alvindo-navy) !important;
            box-shadow: 0 14px 38px rgba(4, 14, 38, 0.2);
        }

        .ftco-navbar-light .container {
            background: transparent !important;
            flex-wrap: wrap;
            row-gap: 8px;
        }

        .ftco-navbar-light .navbar-collapse {
            display: flex !important;
            align-items: center;
            justify-content: flex-start;
            flex-basis: auto;
            flex-wrap: wrap;
            row-gap: 8px;
            column-gap: 14px;
            padding: 8px 0;
        }

        .ftco-navbar-light .navbar-nav {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            list-style: none;
            margin: 0 !important;
            padding: 0;
        }

        .ftco-navbar-light .navbar-nav > .nav-item {
            list-style: none;
        }

        .ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
            display: block;
            padding: 12px 18px;
            border-radius: 999px;
        }

        .ftco-navbar-light .navbar-toggler {
            display: none;
            order: 1;
        }
        
        /* Tombol Menu selalu berada di atas navbar navy gelap di kedua mode,
           jadi warnanya dikunci terang dengan spesifisitas tinggi supaya
           tidak tertimpa CSS lain (mis. saat mode siang aktif). */
        #ftco-navbar .navbar-toggler,
        #ftco-navbar .navbar-toggler .fa {
            color: #dd6825 !important;
        }

        .ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
            letter-spacing: 0.08em;
            font-weight: 700;
        }

        .ftco-navbar-light .navbar-nav > .nav-item.active > a,
        .ftco-navbar-light .navbar-nav > .nav-item .nav-link.active {
            color: #fff;
            background: var(--alvindo-accent);
        }

        /* Utilities (device-preview chips + theme toggle) live OUTSIDE the
           collapsible nav on purpose, so they stay visible and reachable on
           every breakpoint/simulated size — only the link list collapses
           behind the hamburger. */
        .navbar-utilities {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-left: auto;
            order: 2;
        }

        .navbar-utilities .btn-custom {
            min-height: 44px;
            padding: 10px 18px;
            margin-right: 0;
            border-radius: 999px;
        }

        .navbar-theme-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            background: rgba(255, 255, 255, 0.08);
            color: #fff;
            min-height: 44px;
            padding: 10px 16px;
            border-radius: 999px;
            font-weight: 700;
            transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
            white-space: nowrap;
        }

        .navbar-theme-toggle:hover,
        .navbar-theme-toggle:focus {
            transform: translateY(-1px);
            background: rgba(255, 255, 255, 0.14);
            border-color: rgba(255, 255, 255, 0.28);
            color: #fff;
        }

        .navbar-theme-toggle i {
            font-size: 0.95rem;
        }

        .ftco-navbar-light .btn-custom,
        .hero-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 999px;
            padding: 12px 18px;
            font-weight: 700;
            text-decoration: none;
        }

        .ftco-navbar-light .btn-custom {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            margin-right: 0;
        }

        .ftco-navbar-light .btn-custom.login {
            background: var(--alvindo-accent);
        }

        .hero-wrap {
            position: relative;
            min-height: calc(100vh - 170px);
            background: #07111d;
            overflow: hidden;
        }

        .hero-wrap .hero-video-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            pointer-events: none;
            transform: scale(1.08);
            animation: heroPan 22s ease-in-out infinite alternate;
            filter: saturate(1.05) contrast(1.02) brightness(0.54);
        }

        @keyframes heroPan {
            from { transform: scale(1.08) translateX(-1.5%); }
            to { transform: scale(1.08) translateX(1.5%); }
        }

        .hero-wrap .overlay {
            opacity: .72;
            background:
                linear-gradient(90deg, rgba(4, 14, 38, 0.88) 0%, rgba(4, 14, 38, 0.58) 52%, rgba(4, 14, 38, 0.24) 100%);
            z-index: 1;
        }

        .hero-wrap .container {
            position: relative;
            z-index: 2;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 24px;
        }

        .media-strip {
            position: relative;
            margin-top: 28px;
            overflow: hidden;
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(4, 14, 38, 0.64);
            box-shadow: 0 24px 60px rgba(1, 7, 18, 0.26);
        }

        .media-strip-track {
            display: flex;
            gap: 14px;
            width: max-content;
            padding: 14px;
            animation: stripScroll 34s linear infinite;
        }

        .media-strip-card {
            width: 300px;
            flex: 0 0 auto;
            border-radius: 18px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .media-strip-card img {
            display: block;
            width: 100%;
            height: 180px;
            object-fit: cover;
            object-position: center top;
            transition: transform 0.5s ease;
        }

        .media-strip-card:hover img {
            transform: scale(1.06);
        }

        @keyframes stripScroll {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }

        .hero-wrap h1 {
            font-size: clamp(2.2rem, 4.1vw, 4.15rem);
            line-height: 0.94;
            letter-spacing: -0.045em;
            max-width: 11.5ch;
            text-wrap: balance;
        }

        .hero-wrap .slider-text {
            padding-top: 18px;
            padding-bottom: 28px;
            justify-content: center;
        }

        .hero-wrap .slider-text > .col-lg-6 {
            padding-right: 24px;
            padding-left: 48px;
        }

        .hero-wrap .hero-lede {
            color: rgba(238, 245, 255, 0.78);
            font-size: 1.02rem;
            max-width: 560px;
            margin-top: 16px;
        }

        .hero-lede-mobile {
            display: none;
        }

        .hero-wrap .hero-chip-row {
            max-width: 560px;
        }

        .hero-wrap .subheading {
            font-size: 0.9rem;
            letter-spacing: 0.1em;
        }

        .hero-cta.primary {
            background: var(--alvindo-accent);
            color: #fff;
        }

        .hero-cta.secondary {
            background: rgba(255, 255, 255, 0.08);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.18);
        }

        body[data-theme="light"] .site-top {
            background: #0f1f35;
            color: rgba(255, 255, 255, 0.9);
        }

        body[data-theme="light"] .site-top .social-media p a {
            background: rgba(255, 255, 255, 0.12);
        }

        body[data-theme="light"] .header-band,
        body[data-theme="light"] .ftco-navbar-light {
            background: #0c1830 !important;
        }

        body[data-theme="light"] .navbar-brand span,
        body[data-theme="light"] .navbar-brand small,
        body[data-theme="light"] .ftco-navbar-light .navbar-nav > .nav-item > .nav-link,
        body[data-theme="light"] .ftco-navbar-light .navbar-nav > .nav-item.active > a,
        body[data-theme="light"] .ftco-navbar-light .navbar-nav > .nav-item .nav-link.active,
        body[data-theme="light"] .ftco-navbar-light .navbar-toggler,
        body[data-theme="light"] .ftco-navbar-light .navbar-text {
            color: #f8fbff !important;
        }

        body[data-theme="light"] .navbar-utilities .btn-custom.login,
        body[data-theme="light"] .navbar-theme-toggle {
            color: #fff !important;
            background: #fc5e28;
            border-color: rgba(252, 94, 40, 0.46);
        }

        body[data-theme="light"] .navbar-theme-toggle {
            background: rgba(252, 94, 40, 0.16);
        }

        body[data-theme="light"] .hero-wrap .overlay {
            opacity: .84;
            background:
                linear-gradient(90deg, rgba(4, 14, 38, 0.90) 0%, rgba(4, 14, 38, 0.68) 52%, rgba(4, 14, 38, 0.34) 100%);
        }

        body[data-theme="light"] .hero-wrap h1,
        body[data-theme="light"] .hero-wrap p,
        body[data-theme="light"] .hero-chip,
        body[data-theme="light"] .hero-cta,
        body[data-theme="light"] .section-dark,
        body[data-theme="light"] .section-dark .heading-section h2,
        body[data-theme="light"] .section-dark .heading-section h3,
        body[data-theme="light"] .section-dark .heading-section p,
        body[data-theme="light"] .section-dark .about h3,
        body[data-theme="light"] .section-dark .project .text h3,
        body[data-theme="light"] .section-dark .blog-entry .heading a,
        body[data-theme="light"] .ftco-footer,
        body[data-theme="light"] .ftco-footer a {
            color: #f8fbff;
        }

        @media (max-width: 991.98px) {
            .ftco-navbar-light .navbar-collapse {
                display: none !important;
                flex-direction: column;
                align-items: flex-start;
                width: 100%;
                padding-top: 14px;
                order: 3;
            }

            .ftco-navbar-light .navbar-collapse.show {
                display: flex !important;
            }

            .ftco-navbar-light .navbar-nav {
                width: 100%;
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
                margin-bottom: 12px;
            }

            .ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
                width: 100%;
            }

            .ftco-navbar-light .navbar-toggler {
                display: inline-flex;
                align-items: center;
                gap: 8px;
            }

            .ftco-navbar-light .container {
                justify-content: space-between;
            }

            .navbar-utilities {
                margin-left: 0;
                flex-wrap: wrap;
                justify-content: flex-end;
            }
        }

        @media (max-width: 575.98px) {
            .header-band.pt-4.pb-5 {
                padding-top: 12px !important;
                padding-bottom: 12px !important;
            }

            .header-band .row {
                row-gap: 8px;
            }

            .navbar-brand {
                gap: 8px;
                align-items: flex-start;
            }

            .navbar-brand img {
                width: 38px;
                height: 38px;
            }

            .navbar-brand span {
                font-size: 0.72rem;
                line-height: 1.05;
            }

            .navbar-brand span small {
                display: block;
                font-size: 0.55rem;
                line-height: 1.1;
            }

            .header-band .topper .text .con {
                margin-bottom: 0;
                font-size: 0.72rem;
                line-height: 1.3;
            }

            .header-band .topper .icon {
                width: 28px;
                height: 28px;
                font-size: 0.8rem;
            }

            .hero-wrap {
                min-height: auto;
            }

            .hero-wrap .slider-text {
                padding-top: 12px;
                padding-bottom: 18px;
            }

            .hero-wrap .slider-text > .col-lg-6 {
                padding-left: 18px;
                padding-right: 18px;
            }

            .hero-wrap h1 {
                font-size: clamp(1.45rem, 6.8vw, 2rem);
                line-height: 1.02;
                max-width: none;
            }

            .hero-wrap .subheading {
                font-size: 0.76rem;
                letter-spacing: 0.08em;
            }

            .hero-wrap .hero-lede {
                font-size: 0.84rem;
                line-height: 1.48;
                margin-top: 12px;
            }

            .hero-chip-row {
                gap: 8px;
                margin-top: 16px;
            }

            .hero-chip {
                font-size: 0.7rem;
                padding: 7px 9px;
            }

            .hero-actions {
                gap: 8px;
                margin-top: 16px;
            }

            .hero-cta {
                width: 100%;
                padding: 10px 13px;
                font-size: 0.92rem;
            }

            .media-strip {
                margin-top: 18px;
                border-radius: 18px;
            }

            .media-strip-track {
                gap: 10px;
                padding: 10px;
            }

            .media-strip-card {
                width: 220px;
            }

            .media-strip-card img {
                height: 132px;
            }
        }

        .ftco-section {
            padding-top: 70px;
            padding-bottom: 70px;
        }

        .section-soft {
            background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
        }

        .section-dark {
            background: linear-gradient(180deg, #07111d 0%, #091423 100%);
            color: #eef5ff;
        }

        .section-dark .heading-section h2,
        .section-dark .heading-section p,
        .section-dark .subheading {
            color: #eef5ff;
        }

        .section-dark .services,
        .section-dark .project,
        .section-dark .blog-entry,
        .section-dark .counter-wrap .block-18,
        .section-dark .testimony-wrap,
        .section-dark .about-wrap {
            background: rgba(4, 14, 38, 0.86);
            color: #eef5ff;
        }

        .project .img {
            min-height: 260px;
        }

        .block-18 {
            border-radius: 18px;
            padding: 22px;
            background: #fff;
            box-shadow: 0 12px 28px rgba(31, 45, 61, 0.08);
            gap: 14px;
        }

        .section-dark .block-18 {
            background: rgba(255, 255, 255, 0.06);
        }

        .footer-brand {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .footer-brand img {
            width: 48px;
            height: 48px;
        }

        .footer-note {
            color: rgba(255, 255, 255, 0.68);
        }

        /* ===== About collage: clean imagery, no text stamped over photos ===== */
        .about-collage {
            display: grid;
            gap: 14px;
            grid-template-columns: 1.1fr 0.9fr;
            min-height: 420px;
        }

        .about-collage .col-large,
        .about-collage .col-stack {
            border-radius: 26px;
            overflow: hidden;
            min-height: 100%;
            box-shadow: 0 24px 50px rgba(15, 23, 42, 0.16);
        }

        .about-collage .col-large {
            background: url('assets/homepage/about/about.avif') center top / cover no-repeat;
        }

        .about-collage .col-stack {
            display: grid;
            grid-template-rows: 1fr 1fr;
            gap: 14px;
        }

        .about-collage .stack-one,
        .about-collage .stack-two {
            border-radius: 24px;
            overflow: hidden;
            position: relative;
        }

        .about-collage .stack-one {
            background: url('assets/homepage/about/about-2.avif') center top / cover no-repeat;
        }

        .about-collage .stack-two {
            background: url('assets/homepage/about/about-3.avif') center top / cover no-repeat;
        }

        .about-collage .col-large,
        .about-collage .stack-one,
        .about-collage .stack-two {
            background-position: center top;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover,
        .ftco-navbar-light .btn-custom:hover,
        .device-chip:hover,
        .navbar-theme-toggle:hover {
            background: transparent !important;
        }

        .ftco-navbar-light .navbar-nav > .nav-item > .nav-link:active,
        .ftco-navbar-light .navbar-nav > .nav-item > .nav-link:focus-visible,
        .ftco-navbar-light .navbar-nav > .nav-item .nav-link.active,
        .ftco-navbar-light .btn-custom:active,
        .device-chip:active,
        .navbar-theme-toggle:active {
            background: rgba(255, 255, 255, 0.12) !important;
            color: #fff !important;
        }

        .ftco-navbar-light .navbar-toggler,
        .ftco-navbar-light .navbar-toggler:hover,
        .ftco-navbar-light .navbar-toggler:focus-visible {
            background: transparent !important;
            border-color: rgba(255, 255, 255, 0.15);
        }

        .ftco-navbar-light .navbar-toggler:active {
            background: rgba(255, 255, 255, 0.10) !important;
        }

        .about-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: 999px;
            background: rgba(252, 94, 40, 0.10);
            border: 1px solid rgba(252, 94, 40, 0.24);
            color: var(--alvindo-accent);
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .hero-chip-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 22px;
        }

        .hero-chip {
            padding: 10px 14px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: rgba(255, 255, 255, 0.88);
            font-size: 0.92rem;
        }

        .project .img.img-1 { background-image: url('assets/homepage/project/project-1.avif'); }
        .project .img.img-2 { background-image: url('assets/homepage/project/project-2.avif'); }
        .project .img.img-3 { background-image: url('assets/homepage/project/project-3.avif'); }

        /* ===== Project cards: image + overlapping pill badge + floating text card ===== */
        .project {
            position: relative;
            overflow: visible;
        }

        .project .img {
            border-radius: 20px;
            height: 280px;
            position: relative;
            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
        }

        .project .img .icon {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.92);
            color: var(--alvindo-accent);
            margin: 0 !important;
            opacity: 0;
            transform: translateY(-6px);
            transition: opacity 0.25s ease, transform 0.25s ease;
        }

        .project:hover .img .icon {
            opacity: 1;
            transform: translateY(0);
        }

        .project .project-badge {
            position: absolute;
            left: 24px;
            bottom: -18px;
            z-index: 3;
            display: inline-flex;
            align-items: center;
            padding: 8px 18px;
            border-radius: 999px;
            background: var(--alvindo-accent);
            color: #fff;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            box-shadow: 0 10px 22px rgba(252, 94, 40, 0.35);
        }

        .project .text {
            position: relative;
            z-index: 2;
            background: #fff;
            border-radius: 18px;
            margin: -22px 10px 0;
            padding: 30px 20px 20px;
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10);
        }

        .section-dark .project .text,
        body[data-theme="dark"] .project .text {
            background: rgba(4, 14, 38, 0.92);
        }

        .project .text h3 {
            margin-top: 4px;
        }

        .theme-fab {
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 9998;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            border: 0;
            border-radius: 999px;
            background: linear-gradient(135deg, #0f2742 0%, #214b7b 100%);
            color: #fff;
            box-shadow: 0 18px 36px rgba(15, 39, 66, 0.24);
            cursor: pointer;
            font-weight: 700;
        }

        body[data-theme="dark"] {
            background: #07111d;
            color: #eef5ff;
        }

        body[data-theme="dark"] .site-top,
        body[data-theme="dark"] .ftco-navbar-light {
            background: #040e26 !important;
        }

        body[data-theme="dark"] .header-band {
            background: #08111e;
        }

        body[data-theme="dark"] .header-meta .meta-box {
            background: rgba(255, 255, 255, 0.05);
            color: #eef5ff;
            border-color: rgba(255, 255, 255, 0.10);
        }

        body[data-theme="dark"] .navbar-brand span {
            color: #fff;
        }

        body[data-theme="dark"] .ftco-section.section-soft {
            background: linear-gradient(180deg, #08111e 0%, #0b1729 100%);
        }

        body[data-theme="dark"] .section-soft,
        body[data-theme="dark"] .bg-light {
            background: #08111e !important;
        }

        body[data-theme="dark"] .card,
        body[data-theme="dark"] .blog-entry,
        body[data-theme="dark"] .project,
        body[data-theme="dark"] .about-wrap,
        body[data-theme="dark"] .services-wrap,
        body[data-theme="dark"] .counter-wrap .block-18,
        body[data-theme="dark"] .testimony-wrap {
            background: rgba(4, 14, 38, 0.86) !important;
            color: #eef5ff;
        }

        body[data-theme="dark"] .ftco-footer {
            background: #040e26;
            color: #e5eefb;
        }

        body[data-theme="dark"] .footer-note {
            color: rgba(255, 255, 255, 0.66);
        }

        @media (max-width: 1023.98px) {
            .hero-wrap {
                min-height: auto;
            }

            .hero-wrap .slider-text {
                padding-top: 26px;
                padding-bottom: 16px;
            }

            .hero-wrap h1 {
                max-width: 100%;
                font-size: clamp(1.55rem, 6vw, 2.4rem);
            }

            .hero-wrap .hero-lede {
                max-width: 100%;
            }

            .hero-visual {
                margin-top: 24px;
            }

            .about-collage {
                grid-template-columns: 1fr;
                min-height: auto;
            }
        }

        @media (min-width: 1024px) {
            .hero-wrap {
                min-height: calc(100vh - 170px);
            }

            .media-strip-card img {
                height: 188px;
            }

            .about-collage {
                min-height: 420px;
            }
        }

        @media (max-width: 767.98px) {
            .header-meta {
                justify-content: flex-start;
            }

            .hero-wrap .slider-text > .col-lg-6 {
                padding-right: 0;
                padding-left: 0;
            }

            .hero-wrap h1 {
                font-size: clamp(1.45rem, 6.5vw, 2rem);
                max-width: 100%;
            }

            .hero-wrap .hero-lede {
                font-size: 0.88rem;
            }

            .hero-wrap {
                background-position: left center;
            }

            .hero-visual .mini-stats {
                grid-template-columns: 1fr;
            }

            .ftco-navbar-light .btn-custom {
                margin-top: 10px;
            }

            .about-collage {
                min-height: auto;
            }

            .about-collage .col-large {
                min-height: 220px;
            }

            .about-collage .col-stack {
                min-height: 340px;
            }

            .about-collage .stack-one,
            .about-collage .stack-two {
                min-height: 180px;
            }

            .about-collage .col-large,
            .about-collage .stack-one,
            .about-collage .stack-two {
                min-height: 160px;
                background-position: center center;
            }

            .gallery-strip-card img,
            .media-strip-card img {
                max-height: 150px;
                width: 100%;
                object-fit: cover;
                display: block;
            }

            .hero-wrap .hero-video-bg {
                transform: scale(1);
            }

            .flip-card-front,
            .project .img,
            .service .shot,
            .block-20,
            .image-overlay {
                background-position: center center !important;
            }
        }

        /* ===== Device preview chips (Desktop ready / Tablet friendly / Mobile app feel) ===== */
        .device-toggle-group {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 4px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        .device-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border-radius: 999px;
            border: 0;
            background: transparent;
            color: rgba(255, 255, 255, 0.75);
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
        }

        .device-chip i { font-size: 0.9rem; }

        .device-chip:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.10);
        }

        .device-chip.active {
            background: var(--alvindo-accent);
            color: #fff;
            transform: translateY(-1px);
        }

        body[data-theme="light"] .device-toggle-group {
            background: rgba(252, 94, 40, 0.10);
            border-color: rgba(252, 94, 40, 0.30);
        }

        body[data-theme="light"] .device-chip {
            color: rgba(255, 255, 255, 0.85);
        }

        @media (max-width: 991.98px) {
            .device-toggle-group {
                justify-content: space-between;
            }

            .device-chip { justify-content: center; }
        }

        @media (max-width: 480px) {
            .device-chip .device-chip-label { display: none; }
            .navbar-theme-toggle .navbar-theme-toggle-label { display: none; }
        }

        /* ===== Login pill inside nav, near Contact ===== */
        .ftco-navbar-light .navbar-nav > .nav-item > .nav-link.login-inline {
            background: var(--alvindo-accent);
            color: #fff;
            margin-left: 6px;
        }

        /* ===== Simulated device viewport wrapper =====
           IMPORTANT: no `overflow: hidden` here. An ancestor with overflow
           other than visible breaks `position: sticky` on the navbar inside
           it, and it was clipping/hiding anything that didn't fit the
           simulated width instead of letting it wrap. The rounded oval look
           is achieved on .page-top-cap / footer instead — see above. */
        #page-viewport {
            margin: 0 auto;
            width: 100%;
            background: #fff;
            border-radius: var(--alvindo-radius);
            transition: max-width 0.35s ease, box-shadow 0.35s ease, border-radius 0.35s ease;
        }

        body.device-preview-active {
            background: #d9e2ec;
            padding: 28px 0;
        }

        #page-viewport.device-tablet {
            max-width: 860px;
            box-shadow: 0 30px 70px rgba(15, 23, 42, 0.28);
            border-left: 10px solid #0d1b2c;
            border-right: 10px solid #0d1b2c;
        }

        #page-viewport.device-mobile {
            max-width: 430px;
            box-shadow: 0 30px 70px rgba(15, 23, 42, 0.32);
            border-left: 10px solid #0d1b2c;
            border-right: 10px solid #0d1b2c;
        }

        #page-viewport.device-desktop {
            max-width: 1600px;
            box-shadow: 0 30px 70px rgba(15, 23, 42, 0.16);
        }

        /* ===== Forced compact nav for the tablet/mobile SIMULATION =====
           Real @media queries only react to the actual browser width, but
           our device preview only changes an inner div's max-width, so we
           drive the compact/hamburger nav from JS-added classes instead.
           The utilities row (device chips + theme toggle) is intentionally
           left OUT of this display:none rule so it never disappears. */

           
        #page-viewport.sim-tablet .navbar-collapse,
        #page-viewport.sim-mobile .navbar-collapse {
            display: none !important;
        }

        #page-viewport.sim-tablet .navbar-collapse.show,
        #page-viewport.sim-mobile .navbar-collapse.show {
            display: flex !important;
            flex-direction: column !important;
            align-items: stretch !important;
            width: 100%;
            padding-bottom: 14px;
            order: 3;
        }

        #page-viewport.sim-tablet .navbar-toggler,
        #page-viewport.sim-mobile .navbar-toggler {
            display: inline-flex !important;
        }

        #page-viewport.sim-tablet .container,
        #page-viewport.sim-mobile .container {
            justify-content: space-between;
        }

        #page-viewport.sim-tablet .navbar-nav,
        #page-viewport.sim-mobile .navbar-nav {
            flex-direction: column;
            width: 100%;
            align-items: stretch;
            margin-bottom: 10px;
        }

        #page-viewport.sim-tablet .navbar-nav > .nav-item > .nav-link,
        #page-viewport.sim-mobile .navbar-nav > .nav-item > .nav-link {
            width: 100%;
        }

        #page-viewport.sim-tablet .navbar-utilities,
        #page-viewport.sim-mobile .navbar-utilities {
            margin-left: 0;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        #page-viewport.sim-mobile .device-toggle-group {
            padding: 3px;
        }

        #page-viewport.sim-mobile .device-chip {
            padding: 8px;
        }

        #page-viewport.sim-mobile .device-chip .device-chip-label,
        #page-viewport.sim-mobile .navbar-theme-toggle-label {
            display: none;
        }

        #page-viewport.sim-mobile .navbar-theme-toggle {
            padding: 10px 12px;
        }

        /* Mobile preview: keep the header and hero proportional to the
           simulated phone width. The browser viewport itself is still wide,
           so normal Bootstrap breakpoints cannot do this for #page-viewport. */
        #page-viewport.sim-mobile .site-top {
            display: none;
        }

        #page-viewport.sim-mobile .header-band {
            padding: 12px 0 !important;
        }

        #page-viewport.sim-mobile .header-band .container {
            padding-left: 12px;
            padding-right: 12px;
        }

        #page-viewport.sim-mobile .header-band .row {
            display: flex;
            align-items: center !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        #page-viewport.sim-mobile .header-band .col-md-4 {
            width: auto;
            flex: 1 1 auto;
            margin-bottom: 0 !important;
        }

        #page-viewport.sim-mobile .header-band .col-md-4:nth-child(2),
        #page-viewport.sim-mobile .header-band .col-md-4:nth-child(3) {
            display: none !important;
        }

        #page-viewport.sim-mobile .navbar-brand img {
            width: 34px;
            height: 34px;
        }

        #page-viewport.sim-mobile .navbar-brand span {
            font-size: 0.72rem;
            line-height: 1.05;
        }

        #page-viewport.sim-mobile .navbar-brand span small {
            display: block;
            font-size: 0.52rem;
            line-height: 1.05;
        }

        #page-viewport.sim-mobile .hero-wrap {
            min-height: 430px;
        }

        #page-viewport.sim-mobile .hero-wrap .slider-text {
            min-height: 430px;
            align-items: flex-start !important;
            padding: 48px 0 44px;
        }

        #page-viewport.sim-mobile .hero-wrap .slider-text > .col-lg-6 {
            padding-left: 22px;
            padding-right: 22px;
        }

        #page-viewport.sim-mobile .hero-wrap .mt-6 {
            margin-top: 0 !important;
        }

        #page-viewport.sim-mobile .hero-wrap .hero-eyebrow {
            margin-bottom: 12px;
            padding: 6px 10px;
            font-size: 0.62rem;
            letter-spacing: 0.08em;
        }

        #page-viewport.sim-mobile .hero-wrap h1 {
            max-width: 14ch;
            font-size: 1.7rem;
            line-height: 1.04;
            letter-spacing: -0.025em;
            margin-bottom: 12px !important;
        }

        #page-viewport.sim-mobile .hero-wrap .hero-lede {
            max-width: 315px;
            margin-top: 0;
            font-size: 0.78rem;
            line-height: 1.4;
        }

        #page-viewport.sim-mobile .hero-lede-desktop {
            display: none;
        }

        #page-viewport.sim-mobile .hero-lede-mobile {
            display: block;
            max-width: 315px;
        }

        #page-viewport.sim-mobile .hero-wrap .hero-chip-row {
            gap: 5px;
            margin-top: 14px;
        }

        #page-viewport.sim-mobile .hero-wrap .hero-chip {
            padding: 6px 7px;
            font-size: 0.58rem;
        }

        #page-viewport.sim-mobile .hero-wrap .hero-actions {
            margin-top: 14px;
        }

        #page-viewport.sim-mobile .hero-wrap .hero-cta {
            width: auto;
            padding: 8px 12px;
            font-size: 0.76rem;
        }

        /* ===== Gallery strip section (moved out of the hero/video area) ===== */
        .gallery-strip-section {
            padding: 46px 0;
            background: #050d1c;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .gallery-strip-section .gallery-heading {
            margin-bottom: 22px;
        }

        .gallery-strip-section .gallery-heading span.subheading {
            color: var(--alvindo-accent);
        }

            .gallery-strip-section .media-strip {
                margin-top: 0;
            }

        /* ===== Hero copy tidy-up ===== */
        .hero-wrap .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            background: rgba(252, 94, 40, 0.14);
            border: 1px solid rgba(252, 94, 40, 0.35);
            color: #ffcbb0;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-bottom: 18px;
        }

        .hero-wrap .hero-lede {
            color: rgba(238, 245, 255, 0.78);
            font-size: 1.02rem;
            max-width: 520px;
            margin-top: 16px;
            margin-bottom: 0;
        }

        .hero-wrap .hero-chip-row {
            margin-top: 20px;
            margin-bottom: 0;
        }

        .hero-wrap .hero-actions {
            margin-top: 26px;
            margin-bottom: 0;
        }

        /* ===== Services image showcase ===== */
        .services-showcase {
            margin-top: 40px;
        }

        .services-showcase .shot {
            border-radius: 18px;
            overflow: hidden;
            height: 200px;
            background-size: cover;
            background-position: center;
            box-shadow: 0 16px 34px rgba(1, 7, 18, 0.28);
        }

        /* ===== Blog cards: overlay meta bar on the image (date / admin / comments) ===== */
        .blog-entry {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10);
            background: #fff;
            height: 100%;
        }

        .blog-entry .block-20 {
            position: relative;
            display: block;
            height: 220px;
            background-size: cover;
            background-position: center;
        }

        .blog-entry .meta-overlay {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            padding: 10px 16px;
            background: rgba(4, 14, 38, 0.82);
        }

        .blog-entry .meta-overlay span {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #fff;
            font-size: 0.76rem;
            font-weight: 700;
            letter-spacing: 0.02em;
        }

        .blog-entry .meta-overlay span i {
            color: var(--alvindo-accent);
        }

        .blog-entry .text {
            padding: 22px 20px 24px;
        }

        /* ===== Team section: 8-box flip cards
           Auto-flip 180° on hover (desktop) and on touch (mobile),
           and flip back automatically when the pointer/finger leaves. ===== */
        .team-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        @media (max-width: 991.98px) {
            .team-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 575.98px) {
            .team-grid { grid-template-columns: 1fr; }
        }

        .flip-card {
            height: 300px;
            perspective: 1300px;
            cursor: pointer;
            /* Improves touch responsiveness: don't let the browser wait to
               see if a touch will scroll before firing touchstart/touchend. */
            touch-action: manipulation;
        }

        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 20px;
            box-shadow: 0 18px 40px rgba(1, 7, 18, 0.22);
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

        /* Auto-flip on hover (mouse near the card) */
        .flip-card:hover .flip-card-inner,
        .flip-card.is-flipped .flip-card-inner {
            transform: rotateY(180deg);
        }

        .flip-card-front,
        .flip-card-back {
            position: absolute;
            inset: 0;
            backface-visibility: hidden;
            border-radius: 20px;
            overflow: hidden;
        }

        .flip-card-front {
            background-size: cover;
            background-position: center top;
            background-color: #14243a;
            display: flex;
            align-items: flex-end;
        }

        .flip-card-front .front-caption {
            width: 100%;
            padding: 16px;
            background: linear-gradient(180deg, rgba(4, 14, 38, 0) 0%, rgba(4, 14, 38, 0.9) 100%);
        }

        .flip-card-front .front-caption h4 {
            color: #fff;
            margin-bottom: 2px;
            font-size: 1rem;
        }

        .flip-card-front .front-caption span {
            color: var(--alvindo-accent);
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.03em;
        }

        .flip-card-back {
            transform: rotateY(180deg);
            background: var(--alvindo-accent);
            color: #fff;
            padding: 26px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .flip-card-back .fa-quote-left {
            font-size: 1.5rem;
            opacity: 0.75;
            margin-bottom: 12px;
        }

        .flip-card-back p.quote-text {
            font-size: 0.88rem;
            line-height: 1.5;
            margin-bottom: 14px;
        }

        .flip-card-back strong {
            display: block;
            font-size: 0.92rem;
        }

        .flip-card-back small {
            opacity: 0.85;
        }

        /* ===== Counter section: real image panel with overlapping stat cards ===== */
        .counter-visual {
            position: relative;
            min-height: 420px;
            border-radius: 24px;
            overflow: hidden;
            background: url('assets/homepage/about/about-2.avif') center / cover no-repeat;
            box-shadow: 0 24px 55px rgba(1, 7, 18, 0.32);
        }

        .counter-visual::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(4, 14, 38, 0.05) 0%, rgba(4, 14, 38, 0.55) 100%);
        }

        .counter-logo-badge {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.94);
            box-shadow: 0 10px 24px rgba(1, 7, 18, 0.24);
        }

        .counter-logo-badge img {
            width: 30px;
            height: 30px;
        }

        .counter-logo-badge span {
            color: #0d1b2c;
            font-weight: 700;
            font-size: 0.82rem;
            letter-spacing: 0.03em;
        }

        .counter-stats {
            position: absolute;
            right: 20px;
            bottom: 20px;
            left: 20px;
            z-index: 2;
            display: flex;
            flex-direction: column;
            gap: 14px;
            max-width: 300px;
            margin-left: auto;
        }

        .counter-stats .block-18 {
            width: 100%;
        }

        /* ===== Contact banner (adds imagery above the footer widgets) ===== */
        .contact-banner {
            position: relative;
            padding: 64px 0;
            background: linear-gradient(180deg, rgba(4,14,38,0.86), rgba(4,14,38,0.92)),
                        url('assets/homepage/contact/bg_2.avif') center / cover no-repeat;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .contact-banner .subheading { color: var(--alvindo-accent); }

        .contact-banner .contact-quick {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-top: 18px;
        }

        .contact-banner .contact-quick a {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 18px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.16);
            color: #fff;
            text-decoration: none;
            font-weight: 600;
        }

        .contact-banner .contact-quick a:hover {
            background: var(--alvindo-accent);
            border-color: var(--alvindo-accent);
        }

        /* ===== Footer: rounded bottom cap, no square corner at the very
           bottom of the page (mirrors .page-top-cap at the top) ===== */
        .ftco-footer {
            overflow: hidden;
            border-radius: 0 0 var(--alvindo-radius) var(--alvindo-radius);
        }
    </style>
</head>
<body data-theme="dark" class="hold-transition">
    <a href="#main-content" class="skip-link"></a>

    <div id="page-viewport" class="device-desktop">

    <div class="page-top-cap">
        <div class="site-top py-1">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-sm text-center text-md-start mb-md-0 mb-2 pe-md-4 d-flex topper align-items-center">

                    </div>
                    <div class="col-sm justify-content-center d-flex mb-md-0 mb-2">
                        <div class="social-media">

                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-7 d-flex topper align-items-center text-lg-end justify-content-end">
                        <p class="mb-0 register-link">
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="header-band pt-4 pb-5">
            <div class="container">
                <div class="row d-flex align-items-start align-items-center px-3 px-md-0">
                    <div class="col-md-4 d-flex mb-2 mb-md-0">
                        <a class="navbar-brand d-flex align-items-center" href="index.php">
                            <img src="assets/alvindo-logo.svg" alt="PT Alvindo Bangun Sarana Mandiri">
                            <span class="ms-2">
                                PT ALVINDO
                                <small>BANGUN SARANA MANDIRI</small>
                                <small>INDOKONTRAKTOR</small>
                            </span>
                        </a>
                    </div>
                    <div class="col-md-4 d-flex topper mb-md-0 mb-2 align-items-center">
                        <div class="icon d-flex justify-content-center align-items-center">
                            <span class="fa fa-map"></span>
                        </div>
                        <div class="pe-md-4 ps-md-3 ps-3 text">
                            <p class="con"><span>Support</span> <span>24/7</span></p>
                            <p class="con">System komplain, absensi, dan gaji</p>
                        </div>
                    </div>
                    <div class="col-md-4 d-flex topper mb-md-0 align-items-center">
                        <div class="icon d-flex justify-content-center align-items-center"><span class="fa fa-paper-plane"></span></div>
                        <div class="text ps-3 ps-md-3">
                            <p class="hr mb-0"><span></span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark ftco-navbar-light" id="ftco-navbar" aria-label="Main navigation">
        <div class="container d-flex align-items-center">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="fa fa-bars"></span> Menu
            </button>

            <div class="collapse navbar-collapse" id="ftco-nav">
                <ul class="navbar-nav">
                    <li class="nav-item active"><a href="#main-content" class="nav-link">Home</a></li>
                    <li class="nav-item"><a href="#about-section" class="nav-link">About</a></li>
                    <li class="nav-item"><a href="#services-section" class="nav-link">Services</a></li>
                    <li class="nav-item"><a href="#project-section" class="nav-link">Projects</a></li>
                    <li class="nav-item"><a href="#blog-section" class="nav-link">Blog</a></li>
                    <li class="nav-item"><a href="#contact-section" class="nav-link">Contact</a></li>
                    <li class="nav-item"><a href="middleware/login.php" class="nav-link login-inline">Login</a></li>
                </ul>
            </div>

            <div class="navbar-utilities d-flex align-items-center flex-wrap">
                <div class="device-toggle-group" role="group" aria-label="Simulasi tampilan perangkat">
                    <button type="button" class="device-chip active" data-device="desktop" aria-pressed="true">
                        <i class="fa fa-desktop"></i> <span class="device-chip-label">Desktop ready</span>
                    </button>
                    <button type="button" class="device-chip" data-device="tablet" aria-pressed="false">
                        <i class="fa fa-tablet"></i> <span class="device-chip-label">Tablet friendly</span>
                    </button>
                    <button type="button" class="device-chip" data-device="mobile" aria-pressed="false">
                        <i class="fa fa-mobile"></i> <span class="device-chip-label">Mobile app feel</span>
                    </button>
                </div>
                <button type="button" class="navbar-theme-toggle" data-theme-toggle>
                    <i data-theme-toggle-icon class="fa fa-adjust"></i>
                    <span data-theme-toggle-label class="navbar-theme-toggle-label">Mode Siang</span>
                </button>
            </div>
        </div>
    </nav>

    <main id="main-content">
        <section class="hero-wrap js-fullheight">
            <video class="hero-video-bg" autoplay muted loop playsinline preload="auto" poster="assets/homepage/home/bg_1.avif">
                <source src="assets/video/background-loop.mp4" type="video/mp4">
            </video>
            <div class="overlay"></div>
            <div class="container">
                <div class="row g-0 slider-text js-fullheight align-items-center">
                    <div class="col-lg-6 ftco-animate">
                        <div class="mt-6">
                            <span class="hero-eyebrow"><i class="fa fa-bolt"></i> Sistem Terpadu Perusahaan</span>
                            <h1 class="mb-10">Solusi Tepat &amp;
                                 Pembangunan Tanpa Terhambat </h1>

                            <p class="hero-lede hero-lede-desktop" style="font-size: 26px;">
                            Tinggalkan pelaporan manual,<br>
                            Platform pelaporan digital kami<br>
                            merespons dan memprioritaskan<br>
                            setiap kendala secara sistematis,<br>
                            agar target pembangunan selesai<br>
                            tepat waktu.</p>

                            <p class="hero-lede hero-lede-mobile">Tinggalkan pelaporan manual.<br>Platform pelaporan digital kami<br>merespons dan memprioritaskan<br>setiap kendala secara sistematis<br>agar target pembangunan selesai<br>tepat waktu.</p>
                            <div class="hero-chip-row">
                                <span class="hero-chip"><i class="fa fa-desktop me-1"></i> Desktop ready</span>
                                <span class="hero-chip"><i class="fa fa-tablet me-1"></i> Tablet friendly</span>
                                <span class="hero-chip"><i class="fa fa-mobile me-1"></i> Mobile app feel</span>
                            </div>
                            <p class="hero-actions">
                                <a href="#services-section" class="hero-cta secondary">Lihat Fitur</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="gallery-strip-section">
            <div class="container">
                <div class="gallery-heading text-center">
                    <span class="subheading">Sekilas Sistem Kami</span>
                    <h2 class="mb-0" style="color:#fff;">Home &middot; About &middot; Services &middot; Project &middot; Blog &middot; Contact</h2>
                </div>
                <div class="media-strip">
                    <div class="media-strip-track">
                        <div class="media-strip-card"><img src="assets/homepage/services/services-2.avif" alt="Layanan"></div>
                        <div class="media-strip-card"><img src="assets/homepage/about/about.avif" alt="Tentang kami"></div>
                        <div class="media-strip-card"><img src="assets/homepage/project/project-1.avif" alt="Dashboard proyek"></div>
                        <div class="media-strip-card"><img src="assets/homepage/project/project-2.avif" alt="Tim kerja"></div>
                        <div class="media-strip-card"><img src="assets/homepage/home/bg_1.avif" alt="Lokasi proyek"></div>
                        <div class="media-strip-card"><img src="assets/homepage/blog/image_1.avif" alt="Laporan"></div>
                        <div class="media-strip-card"><img src="assets/homepage/contact/bg_2.avif" alt="Kantor"></div>
                        <div class="media-strip-card"><img src="assets/homepage/services/services-2.avif" alt="Layanan"></div>
                        <div class="media-strip-card"><img src="assets/homepage/about/about.avif" alt="Tentang kami"></div>
                        <div class="media-strip-card"><img src="assets/homepage/project/project-1.avif" alt="Dashboard proyek"></div>
                        <div class="media-strip-card"><img src="assets/homepage/project/project-2.avif" alt="Tim kerja"></div>
                        <div class="media-strip-card"><img src="assets/homepage/home/bg_1.avif" alt="Lokasi proyek"></div>
                        <div class="media-strip-card"><img src="assets/homepage/blog/image_1.avif" alt="Laporan"></div>
                        <div class="media-strip-card"><img src="assets/homepage/contact/bg_2.avif" alt="Kantor"></div>
                    </div>
                </div>
            </div>
        </section>

        <section class="ftco-section ftco-no-pb ftco-services-2 section-dark" id="services-section">
            <div class="container">
                <div class="row justify-content-center mb-5 pb-2">
                    <div class="col-md-8 text-center heading-section">
                        <span class="subheading">Our Services</span>
                        <h2 class="mb-4">We Offer Services</h2>
                    </div>
                </div>
                <div class="row g-0 d-flex">
                    <div class="col-lg-4 d-flex align-self-stretch ftco-animate">
                        <div class="media block-6 services d-flex">
                            <div class="icon justify-content-center align-items-center d-flex"><span class="fa fa-building"></span></div>
                            <div class="media-body ps-4">
                                <h3 class="heading mb-3">Komplain & Pekerjaan</h3>
                                <p>Ringkasan status, pekerjaan berjalan, dan monitoring progres dibuat lebih rapi dan mudah dibaca.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 d-flex align-self-stretch ftco-animate">
                        <div class="media block-6 services services-2 d-flex">
                            <div class="icon justify-content-center align-items-center d-flex"><span class="fa fa-camera"></span></div>
                            <div class="media-body ps-4">
                                <h3 class="heading mb-3">Absensi Kamera HP</h3>
                                <p>Form absensi dibuat mobile-first supaya teknisi dan pelaksana nyaman memakai Android di lapangan.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 d-flex align-self-stretch ftco-animate">
                        <div class="media block-6 services d-flex">
                            <div class="icon justify-content-center align-items-center d-flex"><span class="fa fa-money-bill"></span></div>
                            <div class="media-body ps-4">
                                <h3 class="heading mb-3">Gaji & Rekap</h3>
                                <p>Komponen gaji, rekap harian, dan profil user dirapikan agar mudah dipakai di semua role.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row g-4 services-showcase">
                    <div class="col-md-4">
                        <div class="shot" style="background-image:url('assets/homepage/services/services-1.avif');"></div>
                    </div>
                    <div class="col-md-4">
                        <div class="shot" style="background-image:url('assets/homepage/services/services-4.avif');"></div>
                    </div>
                    <div class="col-md-4">
                        <div class="shot" style="background-image:url('assets/homepage/services/services-5.avif');"></div>
                    </div>
                </div>
            </div>
        </section>

        <section class="ftco-section section-soft" id="about-section">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 d-flex align-items-stretch">
                        <div class="about-collage w-100">
                            <div class="col-large"></div>
                            <div class="col-stack">
                                <div class="stack-one"></div>
                                <div class="stack-two"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 py-5 ps-md-5">
                        <div class="row justify-content-center mb-4 pt-md-4">
                            <div class="col-md-12 heading-section">
                                <span class="about-badge mb-3">Dipercaya Sejak 2015</span>
                                <span class="subheading d-block mt-3">Welcome to Alvindo</span>
                                <h2 class="mb-4">PT Alvindo Bangun Sarana Mandiri</h2>
                                <div class="d-flex about">
                                    <div class="icon"><span class="fa fa-screwdriver-wrench"></span></div>
                                    <h3>Identitas perusahaan, kompro, dan dashboard dibuat dalam satu gaya visual yang konsisten.</h3>
                                </div>
                                <p>Struktur ini siap dipindah ke WordPress atau Elementor, dan bisa dipakai ulang untuk halaman login, register, reset password, serta dashboard admin, pelaksana, dan teknisi.</p>
                                <div class="d-flex video-image align-items-center mt-md-4">
                                    <a href="middleware/login.php" class="video img d-flex align-items-center justify-content-center" style="background-image: url('assets/homepage/about/about-2.avif');">
                                        <span class="fa fa-play-circle"></span>
                                    </a>
                                    <h4 class="ms-4">Masuk ke sistem dengan tampilan yang lebih modern</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="ftco-section section-dark" id="team-section">
            <div class="container">
                <div class="row justify-content-center mb-5 pb-2">
                    <div class="col-md-7 text-center heading-section">
                        <span class="subheading">Our Team</span>
                        <h2 class="mb-4">Our Team</h2>
                    </div>
                </div>
                <div class="team-grid">
                    <div class="flip-card" data-flip>
                        <div class="flip-card-inner">
                            <div class="flip-card-front" style="background-image:url('assets/homepage/about/about-2.avif');">
                                <div class="front-caption"><h4>Ryan Anderson</h4><span>Kepala Teknisi</span></div>
                            </div>
                            <div class="flip-card-back">
                                <i class="fa fa-quote-left"></i>
                                <p class="quote-text">Kualitas pekerjaan di lapangan adalah tanggung jawab kami bersama.</p>
                                <strong>Ryan Anderson</strong>
                                <small>Kepala Teknisi</small>
                            </div>
                        </div>
                    </div>
                    <div class="flip-card" data-flip>
                        <div class="flip-card-inner">
                            <div class="flip-card-front" style="background-image:url('assets/homepage/about/about-3.avif');">
                                <div class="front-caption"><h4>Greg Washer</h4><span>Kepala Teknisi</span></div>
                            </div>
                            <div class="flip-card-back">
                                <i class="fa fa-quote-left"></i>
                                <p class="quote-text">Setiap komplain kami tangani cepat supaya proyek tetap berjalan lancar.</p>
                                <strong>Greg Washer</strong>
                                <small>Kepala Teknisi</small>
                            </div>
                        </div>
                    </div>
                    <div class="flip-card" data-flip>
                        <div class="flip-card-inner">
                            <div class="flip-card-front" style="background-image:url('assets/homepage/project/project-1.avif');">
                                <div class="front-caption"><h4>Tony Henderson</h4><span>Ass. Teknisi</span></div>
                            </div>
                            <div class="flip-card-back">
                                <i class="fa fa-quote-left"></i>
                                <p class="quote-text">Absensi kamera HP membuat pekerjaan lapangan lebih rapi tercatat.</p>
                                <strong>Tony Henderson</strong>
                                <small>Ass. Teknisi</small>
                            </div>
                        </div>
                    </div>
                    <div class="flip-card" data-flip>
                        <div class="flip-card-inner">
                            <div class="flip-card-front" style="background-image:url('assets/homepage/project/project-2.avif');">
                                <div class="front-caption"><h4>Jack Smith</h4><span>Pelaksana</span></div>
                            </div>
                            <div class="flip-card-back">
                                <i class="fa fa-quote-left"></i>
                                <p class="quote-text">Satu sistem yang sama memudahkan koordinasi tim di semua proyek.</p>
                                <strong>Jack Smith</strong>
                                <small>Pelaksana</small>
                            </div>
                        </div>
                    </div>
                    <div class="flip-card" data-flip>
                        <div class="flip-card-inner">
                            <div class="flip-card-front" style="background-image:url('assets/homepage/project/project-3.avif');">
                                <div class="front-caption"><h4>Andi Saputra</h4><span>Teknisi</span></div>
                            </div>
                            <div class="flip-card-back">
                                <i class="fa fa-quote-left"></i>
                                <p class="quote-text">Kerja rapi dan tepat waktu jadi standar kami di setiap lokasi proyek.</p>
                                <strong>Andi Saputra</strong>
                                <small>Teknisi</small>
                            </div>
                        </div>
                    </div>
                    <div class="flip-card" data-flip>
                        <div class="flip-card-inner">
                            <div class="flip-card-front" style="background-image:url('assets/homepage/services/services-1.avif');">
                                <div class="front-caption"><h4>Budi Santoso</h4><span>Pelaksana</span></div>
                            </div>
                            <div class="flip-card-back">
                                <i class="fa fa-quote-left"></i>
                                <p class="quote-text">Monitoring progres jadi lebih mudah lewat dashboard yang sama untuk semua.</p>
                                <strong>Budi Santoso</strong>
                                <small>Pelaksana</small>
                            </div>
                        </div>
                    </div>
                    <div class="flip-card" data-flip>
                        <div class="flip-card-inner">
                            <div class="flip-card-front" style="background-image:url('assets/homepage/blog/image_1.avif');">
                                <div class="front-caption"><h4>Siti Rahma</h4><span>Admin</span></div>
                            </div>
                            <div class="flip-card-back">
                                <i class="fa fa-quote-left"></i>
                                <p class="quote-text">Rekap gaji dan absensi jadi jauh lebih cepat dengan sistem terpusat.</p>
                                <strong>Siti Rahma</strong>
                                <small>Admin</small>
                            </div>
                        </div>
                    </div>
                    <div class="flip-card" data-flip>
                        <div class="flip-card-inner">
                            <div class="flip-card-front" style="background-image:url('assets/homepage/contact/bg_2.avif');">
                                <div class="front-caption"><h4>Dedi Kurniawan</h4><span>Admin</span></div>
                            </div>
                            <div class="flip-card-back">
                                <i class="fa fa-quote-left"></i>
                                <p class="quote-text">Support 24/7 memastikan setiap komplain dari lapangan langsung ditindaklanjuti.</p>
                                <strong>Dedi Kurniawan</strong>
                                <small>Admin</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="ftco-section section-dark ftco-no-pt ftco-no-pb ftco-counter">
            <div class="img image-overlay" style="background-image: url('assets/homepage/about/about.avif');"></div>
            <div class="container">
                <div class="row g-0">
                    <div class="col-md-6 py-5 aside-stretch">
                        <div class="heading-section heading-section-white p-4 ps-md-0 py-md-5 pe-md-5">
                            <span class="subheading">Dashboard Terpusat</span>
                            <h2 class="mb-4">Siap untuk semua role</h2>
                            <h4>Admin, pelaksana, dan teknisi memakai gaya yang sama supaya pengguna tidak perlu belajar tampilan baru lagi.</h4>
                            <p>Layout desktop menampilkan panel lebar, tablet tetap lega, dan mobile lebih sederhana dengan fokus pada aksi utama.</p>
                        </div>
                    </div>
                    <div class="col-md-6 d-flex align-items-center">
                        <div class="counter-visual w-100 ftco-animate">
                            <div class="counter-logo-badge">
                                <img src="assets/alvindo-logo.svg" alt="PT Alvindo">
                                <span>PT ALVINDO</span>
                            </div>
                            <div class="counter-stats">
                                <div class="block-18 bg-primary d-flex align-items-center justify-content-between counter-wrap">
                                    <div class="icon d-flex align-items-center justify-content-center"><span class="fa fa-clipboard-list"></span></div>
                                    <div class="text">
                                        <strong class="number" data-number="48000">0</strong>
                                        <span>Project Completed</span>
                                    </div>
                                </div>
                                <div class="block-18 d-flex align-items-center justify-content-between counter-wrap">
                                    <div class="icon d-flex align-items-center justify-content-center"><span class="fa fa-table-columns"></span></div>
                                    <div class="text">
                                        <strong class="number" data-number="54900">0</strong>
                                        <span>Happy Customers</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="ftco-section" id="project-section">
            <div class="container">
                <div class="row justify-content-center mb-5 pb-3">
                    <div class="col-md-7 text-center heading-section">
                        <span class="subheading">Our Global Work Industries</span>
                        <h2 class="mb-4">Latest Projects</h2>
                    </div>
                </div>
                <div class="row g-4">
                    <div class="col-md-4">
                        <div class="project">
                            <a href="#" class="img img-1 d-flex align-items-center" style="background-image: url('assets/homepage/project/project-1.avif');">
                                <div class="icon d-flex align-items-center justify-content-center"><span class="fa fa-plus"></span></div>
                                <span class="project-badge">Building</span>
                            </a>
                            <div class="text">
                                <h3>Dashboard Admin</h3>
                                <p><span class="fa fa-map-marker me-1"></span> PT Alvindo Bangun Sarana Mandiri</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="project">
                            <a href="#" class="img img-2 d-flex align-items-center" style="background-image: url('assets/homepage/project/project-2.avif');">
                                <div class="icon d-flex align-items-center justify-content-center"><span class="fa fa-plus"></span></div>
                                <span class="project-badge">Building</span>
                            </a>
                            <div class="text">
                                <h3>Dashboard Pelaksana</h3>
                                <p><span class="fa fa-map-marker me-1"></span> Responsive tablet & mobile</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="project">
                            <a href="#" class="img img-3 d-flex align-items-center" style="background-image: url('assets/homepage/project/project-3.avif');">
                                <div class="icon d-flex align-items-center justify-content-center"><span class="fa fa-plus"></span></div>
                                <span class="project-badge">Building</span>
                            </a>
                            <div class="text">
                                <h3>Dashboard Teknisi</h3>
                                <p><span class="fa fa-map-marker me-1"></span> Mobile friendly Android</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="ftco-section ftco-no-pt ftco-no-pb testimony-section img section-dark" style="background-image: url('assets/homepage/home/bg_2.avif');">
            <div class="overlay"></div>
            <div class="container">
                <div class="row ftco-animate justify-content-center">
                    <div class="col-md-6 p-4 ps-md-0 py-md-5 pe-md-5 aside-stretch d-flex align-items-center">
                        <div class="heading-section heading-section-white">
                                                      
                        </div>
                    </div>
                    <div class="col-md-6 ps-md-5 py-4 py-md-5 aside-stretch-right">
                        <div class="testimony-wrap py-4 pb-5">
                            <div class="user-img" style="background-image: url('assets/homepage/home/person_1.avif');">
                                <span class="quote d-flex align-items-center justify-content-center">
                                    <i class="fa fa-quote-left"></i>
                                </span>
                            </div>
                            <div class="text">
                                <p class="mb-4"></p>
                                <p class="name"></p>
                                <span class="position"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="ftco-section bg-light" id="blog-section">
            <div class="container">
                <div class="row justify-content-center mb-5 pb-3">
                    <div class="col-md-10 heading-section text-center">
                        <span class="subheading">Our Blog</span>
                        <h2 class="mb-4">Latest Blog Updates</h2>
                    </div>
                </div>
                <div class="row d-flex g-4">
                    <div class="col-lg-4">
                        <div class="blog-entry">
                            <a href="#" class="block-20" style="background-image: url('assets/homepage/blog/image_1.avif');">
                                <div class="meta-overlay">
                                    <span><i class="fa fa-calendar"></i> 17 Jul 2026</span>
                                    <span><i class="fa fa-user"></i> Admin</span>
                                    <span><i class="fa fa-comment"></i> 3</span>
                                </div>
                            </a>
                            <div class="text d-block">
                                <div class="meta">
                                    <p><a href="#"><span class="fa fa-folder me-2"></span>Dashboard</a></p>
                                </div>
                                <h3 class="heading"><a href="#">Landing page mengikuti template folder aset</a></h3>
                                <p><a href="middleware/login.php" class="btn btn-secondary py-2 px-3">Login</a></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="blog-entry">
                            <a href="#" class="block-20" style="background-image: url('assets/homepage/blog/image_2.avif');">
                                <div class="meta-overlay">
                                    <span><i class="fa fa-calendar"></i> 15 Jul 2026</span>
                                    <span><i class="fa fa-user"></i> Admin</span>
                                    <span><i class="fa fa-comment"></i> 5</span>
                                </div>
                            </a>
                            <div class="text d-block">
                                <div class="meta">
                                    <p><a href="#"><span class="fa fa-folder me-2"></span>Responsive</a></p>
                                </div>
                                <h3 class="heading"><a href="#">Mode desktop, tablet, dan mobile</a></h3>
                                <p><a href="#services-section" class="btn btn-secondary py-2 px-3">Lihat Fitur</a></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="blog-entry">
                            <a href="#" class="block-20" style="background-image: url('assets/homepage/blog/image_3.avif');">
                                <div class="meta-overlay">
                                    <span><i class="fa fa-calendar"></i> 10 Jul 2026</span>
                                    <span><i class="fa fa-user"></i> Admin</span>
                                    <span><i class="fa fa-comment"></i> 2</span>
                                </div>
                            </a>
                            <div class="text d-block">
                                <div class="meta">
                                    <p><a href="#"><span class="fa fa-folder me-2"></span>Mode Tema</a></p>
                                </div>
                                <h3 class="heading"><a href="#">Siang dan malam bisa diganti dengan satu tombol</a></h3>
                                <p><a href="#main-content" class="btn btn-secondary py-2 px-3">Kembali ke atas</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="ftco-footer section-dark" id="contact-section">
        <div class="contact-banner text-center">
            <div class="container">
                <span class="subheading">Contact Us</span>
                <h2 class="mb-2" style="color:#fff;">Message us for more details</h2>
                <p class="footer-note mb-0">Tim support kami siap membantu 24/7 untuk seluruh kebutuhan admin, absensi, dan gaji Anda.</p>
                <div class="contact-quick justify-content-center">
                    <a href="mailto:info@alvindo.co.id"><span class="fa fa-paper-plane"></span> info@alvindo.co.id</a>
                    <a href="middleware/login.php"><span class="fa fa-right-to-bracket"></span> Login ke Sistem</a>
                </div>
            </div>
        </div>
        <div class="container mb-5 pb-4">
            <div class="row g-4">
                <div class="col-lg col-md-6">
                    <div class="ftco-footer-widget">
                        <div class="footer-brand">
                            <img src="assets/alvindo-logo.svg" alt="PT Alvindo Bangun Sarana Mandiri">
                            <h2 class="ftco-heading-2 d-flex align-items-center mb-0">PT ALVINDO</h2>
                        </div>
                        <p class="footer-note mt-3">Bangun Sarana Mandiri | INDOKONTRAKTOR</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="ftco-footer-widget">
                        <h2 class="ftco-heading-2">Links</h2>
                        <ul class="list-unstyled">
                            <li><a href="#project-section"><span class="fa fa-chevron-right me-2"></span>Project</a></li>
                            <li><a href="#about-section"><span class="fa fa-chevron-right me-2"></span>About Us</a></li>
                            <li><a href="#services-section"><span class="fa fa-chevron-right me-2"></span>Services</a></li>
                            <li><a href="middleware/login.php"><span class="fa fa-chevron-right me-2"></span>Login</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg col-md-6">
                    <div class="ftco-footer-widget">
                        <h2 class="ftco-heading-2">Have a Questions?</h2>
                        <div class="block-23 mb-3">
                            <ul>
                                <li><span class="fa fa-map-marker me-3"></span><span class="text">PT Alvindo Bangun Sarana Mandiri</span></li>
                                <li><a href="mailto:info@alvindo.co.id"><span class="fa fa-paper-plane me-3"></span><span class="text">info@alvindo.co.id</span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid bg-primary">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 aside-stretch py-3">
                        <p class="mb-0">Copyright © <script>document.write(new Date().getFullYear());</script> PT Alvindo Bangun Sarana Mandiri</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    </div><!-- /#page-viewport -->

    <script src="BANGUNAN/Colorlib%20_%20Free%20Bootstrap%20Website%20Template_files/bootstrap.bundle.min.js.download" defer></script>
    <script src="assets/sikompro-theme.js" defer></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const navItems = document.querySelectorAll('#ftco-navbar .nav-item');
            const navLinks = document.querySelectorAll('#ftco-navbar .nav-link');

            function setActive(link) {
                navItems.forEach((item) => item.classList.remove('active'));
                const parent = link.closest('.nav-item');
                if (parent) parent.classList.add('active');
            }

            navLinks.forEach((link) => {
                link.addEventListener('click', function () {
                    setActive(this);
                });
            });

            const hash = window.location.hash;
            if (hash) {
                const target = document.querySelector(`#ftco-navbar .nav-link[href="${hash}"]`);
                if (target) setActive(target);
            }

            window.addEventListener('hashchange', function () {
                const current = document.querySelector(`#ftco-navbar .nav-link[href="${window.location.hash}"]`);
                if (current) setActive(current);
            });
        });
    </script>

    <script>
        // Desktop ready / Tablet friendly / Mobile app feel -> live viewport simulator
        document.addEventListener('DOMContentLoaded', function () {
            const viewport = document.getElementById('page-viewport');
            const chips = document.querySelectorAll('.device-chip[data-device]');
            if (!viewport || !chips.length) return;

            function applyDevice(device) {
                viewport.classList.remove('device-desktop', 'device-tablet', 'device-mobile', 'sim-tablet', 'sim-mobile');
                viewport.classList.add('device-' + device);
                if (device === 'tablet') viewport.classList.add('sim-tablet');
                if (device === 'mobile') viewport.classList.add('sim-mobile');
                document.body.classList.toggle('device-preview-active', device !== 'desktop');

                // Always start collapsed when switching into a simulated size
                const navCollapse = document.getElementById('ftco-nav');
                if (navCollapse) navCollapse.classList.remove('show');

                chips.forEach((chip) => {
                    const isActive = chip.getAttribute('data-device') === device;
                    chip.classList.toggle('active', isActive);
                    chip.setAttribute('aria-pressed', isActive ? 'true' : 'false');
                });
            }

            chips.forEach((chip) => {
                chip.addEventListener('click', function () {
                    applyDevice(this.getAttribute('data-device'));
                    viewport.scrollIntoView({ behavior: 'smooth', block: 'start' });
                });
            });
        });
    </script>

    <script>
        // Fallback hamburger toggle in case bootstrap.bundle.min.js.download
        // (BANGUNAN folder, not part of this delivery) hasn't loaded yet.
        document.addEventListener('DOMContentLoaded', function () {
            const toggler = document.querySelector('.navbar-toggler[data-bs-target="#ftco-nav"]');
            const target = document.getElementById('ftco-nav');
            if (!toggler || !target) return;
            toggler.addEventListener('click', function (e) {
                if (window.bootstrap) return; // let real Bootstrap handle it
                e.preventDefault();
                target.classList.toggle('show');
                const expanded = target.classList.contains('show');
                toggler.setAttribute('aria-expanded', expanded ? 'true' : 'false');
            });
        });
    </script>

    <script>
        // Our Team: kartu otomatis flip 180° saat kursor mendekat (hover di desktop)
        // atau saat disentuh di mobile, dan otomatis kembali saat kursor/jari menjauh.
        // CSS :hover sudah menangani mouse; script ini menambahkan dukungan
        // sentuh (touchstart/touchend) untuk perangkat mobile yang tidak
        // punya event hover, plus fallback pointer events.
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.flip-card[data-flip]').forEach(function (card) {
                function flipOn() { card.classList.add('is-flipped'); }
                function flipOff() { card.classList.remove('is-flipped'); }

                // Mobile: jari menyentuh kartu -> flip; jari diangkat/menjauh -> balik
                card.addEventListener('touchstart', flipOn, { passive: true });
                card.addEventListener('touchend', flipOff);
                card.addEventListener('touchcancel', flipOff);

                // Fallback perangkat pointer generik (stylus, dsb.)
                card.addEventListener('pointerenter', flipOn);
                card.addEventListener('pointerleave', flipOff);
            });
        });
    </script>

    <script>
        // Counter numbers (48,000 Project Completed / 54,900 Happy Customers)
        // count up from 0 the moment the block scrolls into view.
        document.addEventListener('DOMContentLoaded', function () {
            const counters = document.querySelectorAll('.number[data-number]');
            if (!counters.length) return;

            function formatNumber(n) {
                return Math.floor(n).toLocaleString('en-US');
            }

            function animateCounter(el) {
                const target = parseInt(el.getAttribute('data-number'), 10) || 0;
                const duration = 1800;
                const start = performance.now();

                function tick(now) {
                    const progress = Math.min((now - start) / duration, 1);
                    const eased = 1 - Math.pow(1 - progress, 3);
                    el.textContent = formatNumber(target * eased);
                    if (progress < 1) {
                        requestAnimationFrame(tick);
                    } else {
                        el.textContent = formatNumber(target);
                    }
                }
                requestAnimationFrame(tick);
            }

            if ('IntersectionObserver' in window) {
                const observer = new IntersectionObserver(function (entries) {
                    entries.forEach((entry) => {
                        if (entry.isIntersecting && !entry.target.dataset.counted) {
                            entry.target.dataset.counted = 'true';
                            animateCounter(entry.target);
                            observer.unobserve(entry.target);
                        }
                    });
                }, { threshold: 0.4 });

                counters.forEach((el) => observer.observe(el));
            } else {
                counters.forEach((el) => animateCounter(el));
            }
        });
    </script>
</body>
</html>
