.project-detail-container { color: white; padding: 100px; position: relative; } .project-list-section { display: grid; grid-template-columns: repeat(2, 1fr); /* 3 kolom tetap */ gap: 50px; } .project-card { background-color: #1c1c1e; background-size: cover; background-position: center; border-radius: 20px; overflow: hidden; position: relative; height: 400px; display: flex; /* Tambahkan ini untuk menyesuaikan tinggi child */ flex-direction: column; /* Elemen disusun vertikal */ } .project-info { background-color: rgba(0, 0, 0, 0.6); color: white; padding: 15px; border-radius: 0; position: relative; /* Tambahkan ini */ top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: flex-start; /* Pastikan konten ada di atas */ z-index: 1; box-sizing: border-box; height: 100%; } .project-info h3 { font-size: 48px; margin-top: 5px; margin-bottom: 10px; /* Spasi antar elemen */ } .project-info h5 { font-size: 16px; margin-top: 0; } .project-info p { margin: 5px 0; /* Spasi antar paragraf */ } .project-description { text-align: justify; margin-bottom: 15px; /* Spasi dengan tombol */ margin-bottom: 15px; /* Mengatur jarak bawah */ min-height: 120px; } .project-date { display: flex; font-weight: bold; margin-top: 15px; margin-bottom: 15px; padding: 10px; /* Kasih padding biar gak mepet */ gap: 20px; } .project-date-left, .project-date-right { display: flex; flex-direction: column; /* Ngebuat h4 & h6 vertikal */ justify-content: center; /* Centering secara vertical */ align-items: center; /* Centering secara horizontal */ padding: 10px; } .project-date-left { width: auto; border-top-left-radius: 15px; /* Rounded kiri atas */ border-bottom-left-radius: 15px; /* Rounded kiri bawah */ background-color: #f0f0f0; /* Kasih warna background biar kelihatan */ } .project-date-right { width: 80px; /* Bisa diatur sesuai kebutuhan */ border-top-right-radius: 15px; /* Rounded kanan atas */ border-bottom-right-radius: 15px; /* Rounded kanan bawah */ background-color: #f0f0f0; /* Kasih warna background biar kelihatan */ } .project-date h4, .project-date h6 { color: black; /* Semua font jadi warna hitam */ margin: 0; } .project-date h4 { font-size: 20px; /* Ukuran font h4 jadi 20px */ margin-bottom: 10px; } .project-date h6 { font-size: 10px; /* Ukuran font h6 jadi 10px */ } .get-in-touch { background-color: rgba(7, 14, 22, 1); color: white; border: none; padding: 10px 15px; cursor: pointer; border-radius: 5px; position: absolute; /* Pake absolute supaya bisa diposisikan relatif ke parent */ bottom: 30px; /* Posisikan tombol di bawah */ right: 30px; /* Posisikan tombol di kanan */ width: fit-content; } .get-in-touch:hover { background-color: #0056b3; } /* ========== */ .gradient-circle { /* width: 900px; height: 900px; */ width: 200vw; /* 2x lebar viewport */ height: 200vh; background: radial-gradient(circle, rgba(0, 61, 109, 0.5), rgba(0, 61, 109, 0.1)); border-radius: 50%; filter: blur(100px); position: absolute; top: -300px; left: 50%; transform: translateX(-50%); z-index: -1; }