/* ===== NAVBAR ===== */
        .navbar {
            transition: background-color 0.4s, box-shadow 0.4s, color 0.4s;
        }
        .hero-content {
            transition: color 0.5s ease;
        }
       .navbar-scrolled {
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: background-color 0.3s, box-shadow 0.3s;
        }

        .navbar-transparent {
            background-color: transparent;
            transition: background-color 0.3s, box-shadow 0.3s;
        }

        .navbar .nav-link {
            font-weight: 500;
            transition: color 0.3s, background-color 0.3s;
            border-radius: 30px;
            padding: 8px 16px;
        }

        .navbar .nav-link:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

        .navbar-scrolled .nav-link {
            color: #000 !important;
        }

        .navbar-transparent .nav-link {
            color: #fff !important;
        }

        /* ===== HERO SECTION ===== */
        .hero {
            background: url('https://images.rawpixel.com/image_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvcHg5MjI4MzItaW1hZ2Uta3d2eGRueDEuanBn.jpg') center/cover no-repeat;
            height: 100vh;
            display: flex;
            align-items: center;
            color: white;
            position: relative;
        }

        .hero::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
        }

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 600px;
            margin-left: 80px;
        }

        /* ===== CONTENT ===== */
        .product-section {
            padding: 80px 0;
        }

        /* ===== WHATSAPP BUTTON STYLE ===== */
        .btn-whatsapp {
            background-color: #25D366;
            color: white;
            border: none;
            transition: 0.3s;
        }

        .btn-whatsapp:hover {
            background-color: #1ebe5b;
            color: white;
        }

        /* ===== FOOTER ===== */
        footer {
            background: linear-gradient(135deg, #111, #222, #111);
            color: #ddd;
            padding: 60px 0 20px;
            font-size: 15px;
        }

        footer h5 {
            color: #fff;
            margin-bottom: 20px;
            font-weight: 600;
        }

        footer a {
            color: #bbb;
            text-decoration: none;
            transition: color 0.3s;
        }

        footer a:hover {
            color: #25D366;
        }

        .social-icons a {
            font-size: 22px;
            color: #bbb;
            margin-right: 15px;
            transition: 0.3s;
        }

        .social-icons a:hover {
            color: #25D366;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            margin-top: 40px;
            padding-top: 20px;
            text-align: center;
            color: #888;
            font-size: 14px;
        }

        /* ===== CARD EQUAL HEIGHT FIX ===== */
        .card {
            height: 100%;
            display: flex;
            flex-direction: column;
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s ease;
        }

        .card-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .card.show {
            opacity: 1;
            transform: translateY(0);
        }

        /* Hover efek lembut */
        .card:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .card-text {
            min-height: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        

        /* ===== SECTION KENAPA MEMILIH KAMI ===== */
        .feature-card {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s ease;
            background-color: #fff;
            border-radius: 16px;
        }

        .feature-card.show {
            opacity: 1;
            transform: translateY(0);
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        /* ===== SECTION KONTAK KAMI ===== */
        .contact-card {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s ease;
            border-radius: 16px;
            background-color: #fff;
        }

        .contact-card.show {
            opacity: 1;
            transform: translateY(0);
        }

        .map-wrapper {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s ease;
            border-radius: 16px;
            overflow: hidden;
        }

        .map-wrapper.show {
            opacity: 1;
            transform: translateY(0);
        }

        /* ===== INFO KONTAK STYLING ===== */
        .contact-card ul li i {
            min-width: 28px;
        }

        .contact-card a.btn-success {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .contact-card a.btn-success:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(25, 135, 84, 0.4);
        }

        /* ===== TENTANG KAMI ===== */
        #tentang-kami img {
            transition: transform 0.5s ease;
        }

        #tentang-kami img:hover {
            transform: scale(1.03);
        }

        #tentang-kami h2 {
            color: #198754;
        }

        /* ===== ANIMASI UNTUK BAGIAN TENTANG KAMI ===== */
        .fade-left,
        .fade-right {
            opacity: 0;
            transform: translateX(60px);
            transition: all 0.8s ease;
        }

        .fade-left {
            transform: translateX(-60px);
        }

        .fade-left.show,
        .fade-right.show {
            opacity: 1;
            transform: translateX(0);
        }

        /* ===== BACK TO TOP BUTTON ===== */
        #backToTop {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 45px;
            height: 45px;
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 999;
            transition: all 0.4s ease;
        }

        #backToTop:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(25, 135, 84, 0.3);
        }

          /* Mini Hero */
        .mini-hero {
            background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)),
                url('https://lasertekservices.com/cdn/shop/articles/6.jpg?v=1641162579') center/cover no-repeat;
            color: white;
            padding: 100px 0 80px;
            text-align: center;
        }

        .mini-hero h1 {
            font-weight: 700;
        }

          .brand-carousel {
            overflow: hidden;
            /* penting agar gambar tidak keluar dari jalur */
            width: 100%;
        }

        .brand-slider {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5rem;
            animation: scrollBrands 20s linear infinite;
            width: max-content;
            /* biar semua logo dalam 1 baris tapi bisa scroll */
        }

        .brand-carousel img {
            height: 80px;
            max-width: 100%;
            object-fit: contain;
            opacity: 0.8;
            transition: all 0.3s ease;
        }

        /* Hover effect */
        .brand-carousel img:hover {
            opacity: 1;
            transform: scale(1.05);
        }

        /* Responsiveness */
        @media (max-width: 768px) {
            .brand-carousel img {
                height: 60px;
            }

            .brand-slider {
                gap: 2rem;
            }
        }

        /* Animasi berjalan terus */
        @keyframes scrollBrands {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-40%);
            }
        }