/* Custom font import for Inter, matching Framer's usage */
        @font-face {
            font-family: 'Inter';
            src: url('https://framerusercontent.com/assets/vQyevYAyHtARFwPqUzQGpnDs.woff2') format('woff2');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'Inter';
            src: url('https://framerusercontent.com/assets/d3tHnaQIAeqiE5hGcRw4mmgWYU.woff2') format('woff2');
            font-weight: 500;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'Inter';
            src: url('https://framerusercontent.com/assets/DXD0Q7LSl7HEvDzucnyLnGBHM.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'Inter';
            src: url('https://framerusercontent.com/assets/jn4BtSPLlS0NDp1KiFAtFKiiY0o.woff2') format('woff2');
            font-weight: 900;
            font-style: normal;
            font-display: swap;
        }

        body {
            font-family: 'Inter', sans-serif;
            /* background-color: #000000; /* Matching Framer's background token - Removed */
            /* Menggunakan lebih banyak warna untuk gradien yang lebih dinamis */
            background: linear-gradient(270deg, #0a0a0a, #1a1a1a, #001f3f, #003366, #1a0033, #330066, #004080);
            background-size: 800% 800%; /* Ukuran yang lebih besar untuk pergerakan gradien yang lebih luas */
            animation: animatedBackground 20s ease infinite; /* Animasi berulang dengan durasi 20 detik */
            color: #ffffff; /* Default text color */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Keyframes untuk animasi gradien latar belakang yang lebih kompleks */
        @keyframes animatedBackground {
            0% { background-position: 0% 50%; }
            20% { background-position: 100% 0%; }
            40% { background-position: 50% 100%; }
            60% { background-position: 0% 25%; }
            80% { background-position: 100% 75%; }
            100% { background-position: 0% 50%; }
        }

        /* Custom styles to match Framer's specific design details not covered by basic Tailwind */
        .backdrop-blur-10 {
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .mask-linear-gradient {
            mask-image: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
            -webkit-mask-image: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
        }

        .mask-linear-gradient-horizontal {
            mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12.5%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 0) 100%);
            -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12.5%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 0) 100%);
        }

        /* Specific text styles based on Framer's presets */
        .text-preset-h1 {
            font-size: 40px; /* Mobile default */
            line-height: 110%;
            letter-spacing: -0.06em;
            font-weight: 500;
        }
        @media (min-width: 810px) {
            .text-preset-h1 {
                font-size: 55px; /* Tablet */
            }
        }
        @media (min-width: 1200px) {
            .text-preset-h1 {
                font-size: 64px; /* Desktop */
            }
        }

        .text-preset-h2 {
            font-size: 32px; /* Mobile default */
            line-height: 120%;
            letter-spacing: -0.06em;
            font-weight: 500;
        }
        @media (min-width: 810px) {
            .text-preset-h2 {
                font-size: 36px; /* Tablet */
            }
        }
        @media (min-width: 1200px) {
            .text-preset-h2 {
                font-size: 40px; /* Desktop */
            }
        }

        .text-preset-h3 {
            font-size: 24px; /* Mobile default */
            line-height: 130%;
            letter-spacing: -0.05em;
            font-weight: 500;
        }
        @media (min-width: 810px) {
            .text-preset-h3 {
                font-size: 24px; /* Tablet */
            }
        }
        @media (min-width: 1200px) {
            .text-preset-h3 {
                font-size: 28px; /* Desktop */
            }
        }

        .text-preset-p-lg {
            font-size: 18px; /* Mobile default */
            line-height: 150%;
            letter-spacing: -0.04em;
            font-weight: 500;
        }
        @media (min-width: 810px) {
            .text-preset-p-lg {
                font-size: 20px; /* Tablet & Desktop */
            }
        }

        .text-preset-p-md {
            font-size: 16px;
            line-height: 150%;
            letter-spacing: -0.04em;
            font-weight: 500;
        }

        .text-preset-p-sm {
            font-size: 14px;
            line-height: 150%;
            letter-spacing: -0.04em;
            font-weight: 500;
        }

        .text-preset-xs {
            font-size: 12px;
            line-height: 130%;
            letter-spacing: -0.04em;
            font-weight: 500;
        }

        /* Custom colors based on Framer tokens */
        .bg-custom-dark-gray {
            background-color: rgb(28, 28, 28);
        }
        .bg-custom-medium-gray {
            background-color: rgb(38, 38, 38);
        }
        .bg-custom-light-gray {
            background-color: rgb(17, 17, 17);
        }
        .text-white-48 {
            color: rgba(255, 255, 255, 0.48);
        }
        .text-white-56 {
            color: rgba(255, 255, 255, 0.56);
        }
        .bg-blue-accent {
            background-color: rgb(0, 85, 255);
        }
        .bg-yellow-accent-30 {
            background-color: rgba(255, 217, 0, 0.3);
        }
        .text-yellow-accent {
            color: rgb(255, 232, 102);
        }
        .bg-green-accent-30 {
            background-color: rgba(0, 255, 4, 0.3);
        }
        .text-green-accent {
            color: rgb(120, 255, 147);
        }
        .border-white-10 {
            border-color: rgba(255, 255, 255, 0.1);
        }

        /* Image opacity for hover effect */
        .image-hover-effect .image-active {
            opacity: 1;
        }
        .image-hover-effect .image-inactive {
            opacity: 0;
        }
        .image-hover-effect:hover .image-active {
            opacity: 0;
        }
        .image-hover-effect:hover .image-inactive {
            opacity: 1;
        }

        /* Hide scrollbar for elements with this class */
        .scrollbar-hidden::-webkit-scrollbar {
            display: none; /* For Chrome, Safari, Opera */
        }

        .scrollbar-hidden {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }

        /* Specific padding for mobile testimonial cards */
        @media (max-width: 809px) {
            .testimonial-card-mobile-padding {
                padding-left: 24px;
                padding-right: 24px;
            }
        }
        .project-card-container {
            position: relative;
            overflow: hidden;
            border-radius: 0.5rem; /* rounded-lg */
            border: 1px solid rgba(255, 255, 255, 0.1); /* border border-white-10 */
            background-color: #2D2D2D; /* bg-custom-dark-gray */
        }

        .project-card-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9); /* Black overlay */
            display: flex;
            align-items: flex-start; /* Align content to the start */
            justify-content: space-between; /* Push content and button apart */
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            pointer-events: none; /* Allows clicks to pass through when hidden */
            padding: 1.5rem; /* p-6 */
            text-align: left; /* Align text to left */
            flex-direction: column; /* Stack vertically */
        }

        /* Using group-hover for the overlay and details for cleaner Tailwind integration */
        .group:hover .project-card-overlay {
            opacity: 1;
            pointer-events: auto; /* Enables clicks on the overlay when visible */
        }

        .project-card-overlay p {
            color: white;
            font-size: 1rem; /* text-preset-p-md */
            line-height: 1.5rem; /* leading-relaxed */
            /* Properti scrollable dipindahkan ke .project-overlay-content-scrollable */
        }

        /* New class for the scrollable content wrapper (description and tags) */
        .project-overlay-content-scrollable {
            flex-grow: 1; /* Allow this content to grow and take available space */
            overflow-y: auto; /* Aktifkan scroll vertikal jika konten melebihi max-height */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling di iOS */
            scrollbar-width: none; /* Sembunyikan scrollbar untuk Firefox */
            -ms-overflow-style: none;  /* Sembunyikan scrollbar untuk IE dan Edge */
            display: flex;
            flex-direction: column;
            gap: 0.5rem; /* Jarak antara deskripsi dan tag */
            padding-right: 5px; /* Tambahkan sedikit padding agar teks tidak menyentuh area scrollbar */
            margin-bottom: 2px; /* Menambahkan jarak 2px dari tombol di bawahnya */
        }

        /* Sembunyikan scrollbar untuk Webkit (Chrome, Safari) */
        .project-overlay-content-scrollable::-webkit-scrollbar {
            display: none;
        }

        /* Hide project details on hover, but keep image */
        .group:hover .project-details {
            opacity: 0;
        }
        .project-details { /* Ensure details have transition */
            transition: opacity 0.3s ease-in-out;
        }
        .testimonial-row-container {
            overflow: hidden;
            position: relative;
            width: 100%;
        }

        .testimonial-row {
            display: flex;
            flex-wrap: nowrap; /* Ensure items stay in a single line */
            gap: 24px; /* Tailwind's gap-6 */
            animation: scroll-left 60s linear infinite; /* Adjust duration as needed */
            padding-bottom: 16px; /* Tailwind's pb-4 */
        }

        .testimonial-row.reverse {
            animation: scroll-right 60s linear infinite; /* Adjust duration as needed */
        }

        .testimonial-row:hover {
            animation-play-state: paused;
        }

        @keyframes scroll-left {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-100%); }
        }

        @keyframes scroll-right {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(0%); }
        }

        /* Ensure smooth scrolling behavior on mobile */
        .scrollbar-hidden::-webkit-scrollbar {
            display: none;
        }
        .scrollbar-hidden {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }

        /* Penyesuaian untuk card testimonial di mobile */
        /* Menggunakan kelas baru untuk menargetkan ukuran mobile saja */
        @media (max-width: 767px) { /* Untuk layar di bawah md (768px) */
            .testimonial-card-mobile-size {
                width: 256px; /* Lebar tetap untuk card testimonial agar lebih persegi */
                height: 256px; /* Tinggi tetap untuk card testimonial agar lebih persegi */
            }
        }