.main{
	background: #06173e;
	width: 100%;
	margin: 10px auto;
	height: 100%;
}

.main .menu{
	background: cyan;
}
 
.main .menu ul{
	padding: 0;
	margin: 0;
	background: #18377f;
	overflow: hidden;
}
.main .menu ul li{
	float: left;
	list-style-type: none;
	padding: 10px;
}
/*khusus yang page about pake main2*/
.main2{
	background: #bdc6da;
	width: 100%;
	margin: 10px auto;
	height: auto;
}
 
.main2 .menu{
	background: cyan;
}

.main2 .menu ul li{
	float: left;
	list-style-type: none;
	padding: 10px;
}

.main2 .menu ul{
	padding: 0;
	margin: 0;
	background: #18377f;
	overflow: hidden;
}

.clear{
	clear: both;
}
 
.body{
	height: 1080px;
}

.body2{
	height: auto;
}

.bodyimg1{
	height: 1080px;
  background-image: url("image1.png");
  background-size: cover;
}
 
.main .body .content{
	background:#bdc6da;
	float: center;
	height: 100%;
	width: 100%;	
}

h1 {
  color: #ffffff;
}

p {
  color: #050505;
  font-size: 20px;
  padding: 4px 8px;
  font-family: Arial;
}

a {
  color: #ffff;
  background-color: #0a1e4e;
  font-weight: none;
  text-decoration: none;
   padding: 4px 8px;
  border-radius: 4px;
}
 
.center-text {
  text-align: center;
}
.container-center {
  text-align: center;
}

.container-left {
  text-align: left;
}

/* 1. Style the navigation container */
nav {
  display: flex;
  justify-content: flex-end; /* Pushes the menu items to the right side */
  align-items: center;       /* Centers the text vertically */
   /* Matches your dark blue navbar color */
  padding: 15px 30px;        /* Adds breathing room inside the navbar */
}

/* 2. Style the individual menu links */
nav a {
  color: white;              /* Makes the text clean white */
  text-decoration: none;     /* Removes the default underline */
  font-family: sans-serif;   /* Cleans up the font style */
  font-size: 20px;           /* Sets a readable text size */
  padding: 8px 16px;         /* Adds clickable space around each word */
  transition: background 0.3s; /* Smooth hover transition animation */
}

/*form*/
form {
  border-radius: 5px;
  padding: 20px;
}

label {
  display: block;
  text-color: #ffff;
}

input[type=text], select {
  width: 25%;
  padding: 12px;
  margin: 2px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

textarea {
  width: 25%;
  height: 150px;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
  text-align: :center;
  margin-bottom: 10px;
}

input[type=submit] {
  width: 25%;
  background-color: #629edb;
  color: white;
  padding: 14px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #223d95;
}

/*Page Home section 2*/

/* Container that holds both the video and the text */
.media-container {
    display: flex;
    align-items: flex-start; /* Aligns items to the top */
    gap: 24px;              /* Spacing between video and text */
    max-width: 1200px;      /* Restricts maximum layout width */
    margin: 0 auto;         /* Centers the container on the page */
    padding: 20px;
}

/* Left column wrapper for the video */
.video-box {
    flex: 1;                /* Takes up proportional space */
    min-width: 300px;       /* Prevents the video from shrinking too small */
}

/* Ensures the video element itself behaves responsively */
.video-box video {
    width: 100%;
    height: auto;
    border-radius: 8px;     /* Optional: rounds the video corners */

/* Right column wrapper for the text description */
.text-box {
    flex: 1;                /* Takes up equal proportional space to the video */
    text-align: left;  
}

.text-box h2 {
    margin-top: 0;          /* Removes default spacing to align perfectly with video top */
    color: #333;
}

.text-box p {
    color: #555;
    line-height: 1.6;
}

}

/* Responsive Design: Stacks video on top of text on smaller screens (mobiles) */
@media (max-width: 768px) {
    .media-container {
        flex-direction: column;
    }
}

.all-container {
   
    align-items: flex-start; /* Aligns items to the top */
    margin: 0 auto;         /* Centers the container on the page */
    padding: 20px;
}

/*Section 2 about us*/

/* Container Utama */
.landing-wrapper {
  display: flex;
  width: 100%;
  height: 100vh; /* Menyesuaikan tinggi dengan tinggi layar */
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Panel Kiri (Abu-abu) */
.left-panel-robot {
  width: 30%;
  background-color: #dcdcdc;
  border-right: 20px solid #ffffff; /* Garis putih vertikal sebagai pemisah */
  
  /* Gunakan gambar robot kiri di sini */
  background-image: url('image2.png'); 
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* Panel Kanan (Biru) */
.right-panel-info {
  width: 70%;
  background-color: #1a3673; /* Warna biru gelap */
  position: relative;
  display: flex;
  align-items: center; /* Memosisikan teks tepat di tengah secara vertikal */
  padding-left: 8%;
  
  /* Opsional: Masukkan gambar background garis melengkung (wavy) di sini */
  background-image: url('wavy-lines.svg');
  background-size: cover;
  background-position: bottom left;
}

/* Wadah Teks */
.info-block {
  position: relative;
  z-index: 2; /* Memastikan teks berada di atas robot kanan dan background */
}

.headline-text {
  color: #ffffff; /* Didefinisikan ulang agar tidak terpengaruh h1 global kamu */
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}

.desc-text {
  color: #ffffff;
  font-size: 1.4rem;
  line-height: 1.5;
  margin: 0;
}

/* Robot Kanan Bawah */
.bottom-bot {
  position: absolute;
  bottom: -5%; 
  right: 5%;
  width: 500px; 
  height: 500px;
  
  /* Gunakan gambar robot kanan di sini */
  background-image: url('image3.png');
  background-size: contain;
  background-position: bottom right;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Penyesuaian Responsif untuk layar kecil */
@media (max-width: 1024px) {
  .headline-text { font-size: 2.5rem; }
  .desc-text { font-size: 1.1rem; }
  .left-panel-robot { width: 35%; }
  .right-panel-info { width: 65%; }
  .bottom-bot { width: 300px; height: 300px; right: 0; }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    40% {
        opacity: 1;
        transform: translateY(0);
    }
    80% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.fadeInUp {
    animation: fadeInUp 10s ease-out infinite;
}


@keyframes fadeInUpLong {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    40% {
        opacity: 1;
        transform: translateY(0);
    }
    80% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.fadeInUpLong {
    animation: fadeInUpLong 20s ease-out infinite;
}

@keyframes fadeInRight {
    0% {
        opacity: 1;
        transform: translateX(15px);
    }
    20% {
        opacity: 1;
        transform: translateX(0);
    }
    80% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-15px);
    }
}

.fadeInRight {
    animation: fadeInRight 20s ease-out infinite;
}

@keyframes fadeInaja {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.fadeInaja {
    animation: fadeIn 60s ease-out;
}






/*Section 3 next gen*/


/* Container Utama Bagian Bawah */
.next-gen-section {
  background-color: #2b3240; /* Warna biru keabu-abuan gelap */
  display: flex;
  align-items: center;
  position: relative;
  min-height: 80vh;
  padding: 0 10%;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Wadah Teks di Kiri */
.next-gen-content {
  position: relative;
  z-index: 2; /* Selalu di atas gambar */
  max-width: 600px;
}

.next-gen-heading {
  color: #ffffff;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 40px;
  letter-spacing: -1px;
}

.next-gen-paragraph {
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1.5;
  margin-bottom: 60px;
}

/* Menimpa CSS tag <a> global milikmu sebelumnya */
a.next-gen-link {
  color: #ffffff;
  background-color: transparent; /* Menghilangkan background #0a1e4e */
  padding: 0; /* Menghilangkan padding dari <a> global */
  font-size: 1.2rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.3s;
}

a.next-gen-link:hover {
  opacity: 0.7;
}

/* Gambar Robot di Kanan */
.next-gen-robot {
  position: absolute;
  bottom: 0;
  right: 5%;
  width: 50%;
  height: 90%; 
  
  /* Gunakan gambar robot di sini */
  background-image: url('image4.png'); 
  background-size: contain;
  background-position: bottom right;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Responsif untuk layar yang lebih kecil */
@media (max-width: 1024px) {
  .next-gen-heading { font-size: 2.8rem; }
  .next-gen-paragraph { font-size: 1.2rem; }
  .next-gen-robot { width: 45%; height: 70%; right: 0; }
}




/*ini tuh buat halaman About us section 2*/

/* Wadah Utama dengan Background Gambar */
.vision-container {
  /* Ganti path url sesuai lokasi file kamu */
  background-image: url('bgimage1.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  display: flex;
  justify-content: center; /* Memosisikan konten ke tengah secara horizontal */
  align-items: center;     /* Memosisikan konten ke tengah secara vertikal */
  
  min-height: 50vh; /* Tinggi area disesuaikan dengan proporsi gambar */
  padding: 40px 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Kotak Konten Teks */
.vision-box {
  text-align: center;
  max-width: 900px;
}

/* Judul */
.vision-title {
  color: #ffffff;
  font-size: 3.5rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 25px;
  letter-spacing: -1px;
}

/* Paragraf / Kutipan */
.vision-quote {
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1.6;
  font-weight: 400;
  margin: 0;
}

/* Responsif untuk layar kecil / mobile */
@media (max-width: 768px) {
  .vision-title {
    font-size: 2.5rem;
  }
  .vision-quote {
    font-size: 1.2rem;
  }
  .vision-quote br {
    display: none; /* Menghilangkan break agar teks mengalir alami di layar kecil */
  }
}








/*Next ini tuh buat section mission di about us*/
/* Wadah Utama Bagian Mission */
.mission-wrapper {
  background-color: #1c1d26; /* Warna latar gelap sesuai gambar */
  display: flex;
  align-items: center;
  padding: 60px 0 60px 8%;
  overflow: hidden; /* Berfungsi memotong gambar lingkaran di sisi kanan */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Area Teks di Kiri */
.mission-text-area {
  width: 60%;
  padding-right: 40px;
  z-index: 2;
}

.mission-heading {
  color: #ffffff;
  font-size: 3rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 30px;
  text-align: center; /* Menengahkan judul di atas daftar */
}

/* Daftar Bernomor */
.mission-list {
  color: #ffffff;
  font-size: 1.25rem;
  line-height: 1.5;
  padding-left: 20px; /* Jarak untuk angka */
  margin: 0;
}

.mission-list li {
  margin-bottom: 12px;
}

.mission-list strong {
  font-weight: 700;
}

/* Area Gambar di Kanan */
.mission-image-area {
  width: 40%;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Lingkaran Bergaris Putih */
.mission-circle-frame {
  width: 650px;
  height: 650px;
  border-radius: 50%;
  border: 4px solid #ffffff; /* Garis putih pinggir lingkaran */
  
  /* Gunakan gambar anjing robot di sini */
  background-image: url('image5.png'); 
  background-size: cover;
  background-position: center;
  
  /* Menggeser lingkaran ke kanan agar terpotong di tepi layar */
  transform: translateX(35%); 
}

/* Responsif untuk layar kecil / mobile */
@media (max-width: 1024px) {
  .mission-wrapper {
    flex-direction: column;
    padding: 40px 5%;
  }
  .mission-text-area {
    width: 100%;
    padding-right: 0;
    margin-bottom: 50px;
  }
  .mission-image-area {
    width: 100%;
    justify-content: center;
  }
  .mission-circle-frame {
    transform: translateX(0); /* Menghapus efek geser di layar kecil */
    width: 400px;
    height: 400px;
  }
}








/*Buat Page Product*/

/* Container Utama untuk Video Section */
.hc-video-section {
  position: relative;
  width: 100%;
  min-height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Pengaturan Video Background */
.hc-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Memastikan video memenuhi area tanpa terdistorsi */
  z-index: 1;
}

/* Overlay Hitam untuk Menumpuk Di Atas Video */
.hc-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45); /* Memberikan efek redup agar teks putih kontras */
  z-index: 2;
}

/* Kotak Konten Teks */
.hc-content-box {
  position: relative;
  z-index: 3; /* Teks ditempatkan di paling atas */
  text-align: center;
  max-width: 900px;
  padding: 0 20px;
}

.hc-title {
  color: #ffffff;
  font-size: 4.5rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 25px;
  letter-spacing: -1px;
}

.hc-desc {
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1.6;
  font-weight: 400;
  margin: 0;
}

/* Responsif untuk Layar Kecil */
@media (max-width: 768px) {
  .hc-title {
    font-size: 2.8rem;
  }
  .hc-desc {
    font-size: 1.1rem;
  }
}








/*Buat Page Product Yng indurstrial robot*/


/* Container Utama untuk Industrial Robots Section */
.ind-video-section {
  position: relative;
  width: 100%;
  min-height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Pengaturan Video Background */
.ind-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Overlay Hitam Redup */
.ind-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 2;
}

/* Kotak Konten Teks */
.ind-content-box {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 950px;
  padding: 0 20px;
}

.ind-title {
  color: #ffffff;
  font-size: 4.5rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 25px;
  letter-spacing: -1px;
}

.ind-desc {
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1.6;
  font-weight: 400;
  margin: 0;
}

/* Responsif untuk Layar Kecil */
@media (max-width: 768px) {
  .ind-title {
    font-size: 2.8rem;
  }
  .ind-desc {
    font-size: 1.1rem;
  }
}


/*section 3 product*/

/* Container Utama */
.touch-section {
  position: relative;
  width: 100%;
  min-height: 70vh;
  /* Ganti dengan gambar latar kantor */
  background-image: url('bgimage2.png');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Area Konten Tengah */
.touch-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

/* Gambar Panah Melengkung */
.touch-arrow {
  width: 160px;
  height: 90px;
  /* Ganti dengan file panah putih melengkung (PNG/SVG) */
  background-image: url('curved-arrow.png'); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 15px;
  margin-left: 120px; /* Menggeser posisi panah sedikit ke kanan seperti di gambar */
}

/* Menimpa CSS tag <a> global agar berbentuk tombol biru */
a.touch-btn {
  background-color: #143b85; /* Warna biru tombol */
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 700;
  text-decoration: none;
  padding: 18px 45px;
  border-radius: 16px;
  display: inline-block;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, background-color 0.2s;
}

a.touch-btn:hover {
  background-color: #0d285e;
  transform: translateY(-3px); /* Efek terangkat sedikit saat kursor di atasnya */
}

/* Tangan Robot Kiri */
.touch-robot-hand {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 35%;
  height: 80%;
  /* Ganti dengan PNG transparan tangan robot */
  background-image: url('image7.png'); 
  background-size: contain;
  background-position: bottom left;
  background-repeat: no-repeat;
  z-index: 2;
}

/* Tangan Manusia Kanan */
.touch-human-hand {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 35%;
  height: 85%;
  /* Ganti dengan PNG transparan tangan manusia */
  background-image: url('image8.png'); 
  background-size: contain;
  background-position: bottom right;
  background-repeat: no-repeat;
  z-index: 2;
}

/* Responsif Layar Kecil */
@media (max-width: 768px) {
  a.touch-btn {
    font-size: 1.4rem;
    padding: 12px 25px;
  }
  .touch-arrow {
    width: 100px;
    height: 60px;
    margin-left: 50px;
  }
  .touch-robot-hand, .touch-human-hand {
    width: 40%;
    height: 50%;
  }
}








/*buat page solution yang section 1*/

/* Container Utama */
.sol-everyday-section {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 80vh;
  background-color: #8fa0a3; /* Warna dasar latar belakang gambar kiri */
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Gambar Kiri */
.sol-left-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  /* Ganti dengan file gambar robot laptop kamu */
  background-image: url('image6.png');
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* Panel Biru Gelap Kanan */
.sol-right-panel {
  position: relative;
  margin-left: auto;
  width: 40%; /* Tumpuk sedikit area gambar kiri */
  min-height: 80vh;
  background-color: #080325; /* Warna biru sangat gelap sesuai gambar */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 8% 60px 18%;
  z-index: 2;

  /* Membuat bentuk potongan panah lancip ke kiri */
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 15% 100%, 0 50%);
}

/* Area Teks */
.sol-content {
  max-width: 550px;
}

.sol-title {
  color: #ffffff;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 25px;
  letter-spacing: -1px;
}

.sol-desc {
  color: #ffffff;
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
}

/* Penyesuaian Responsif Layar HP/Tablet */
@media (max-width: 900px) {
  .sol-everyday-section {
    flex-direction: column;
  }
  
  .sol-left-img {
    position: relative;
    width: 100%;
    height: 350px;
  }

  .sol-right-panel {
    width: 100%;
    min-height: auto;
    margin-left: 0;
    clip-path: none; /* Menghilangkan potongan lancip di HP agar rapi */
    padding: 40px 20px;
  }

  .sol-title {
    font-size: 2.2rem;
  }

  .sol-desc {
    font-size: 1.1rem;
  }
}



/*buat page solution yang section 2*/

/* Container Utama Bagian Chores */
.chores-video-section {
  position: relative;
  width: 100%;
  min-height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Pengaturan Video Background */
.chores-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Layer Hitam Transparan */
.chores-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35); /* Tingkat kegelapan overlay */
  z-index: 2;
}

/* Wadah Teks */
.chores-content-box {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 950px;
  padding: 0 25px;
}

.chores-text {
  color: #ffffff;
  font-size: 2.5rem;
  line-height: 1.35;
  font-weight: 400;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); /* Bayangan teks agar semakin kontras */
}

.chores-text strong {
  font-weight: 700;
}

/* Penyesuaian Layar Kecil / HP */
@media (max-width: 768px) {
  .chores-text {
    font-size: 1.5rem;
    line-height: 1.4;
  }
}

/*buat page solution yang section 3*/

/* Container Utama */
.prod-solution-section {
  position: relative;
  width: auto;
  min-height: 80vh;
  background-color: #2d3446; /* Warna biru gelap keabu-abuan */
  display: flex;
  align-items: center;
  padding: 0 8%;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Wadah Konten Teks */
.prod-solution-content {
  position: relative;
  z-index: 2;
  max-width: auto;
}

.prod-solution-title {
  color: #ffffff;
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 30px;
  letter-spacing: -1px;
}

.prod-solution-desc {
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
}

/* Gambar Robot Lengan & Kardus di Kanan */
.prod-solution-image {
  position: absolute;
  right: 15%;
  bottom: -5%;
  width: 100%;
  height: 100%;
  /* Ganti dengan nama file gambar lengan robot & kardus transparan (PNG) */
  background-image: url('image9.png'); 
  background-size: 800px auto; /* Menyesuaikan ukuran gambar agar proporsional */
  background-position: bottom right;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Responsif Layar Kecil / HP */
@media (max-width: 900px) {
  .prod-solution-section {
    flex-direction: column;
    justify-content: center;
    padding: 60px 20px;
    min-height: auto;
  }

  .prod-solution-content {
    max-width: 100%;
    text-align: center;
    margin-bottom: 40px;
  }

  .prod-solution-title {
    font-size: 2.4rem;
  }

  .prod-solution-desc {
    font-size: 1.1rem;
  }

  .prod-solution-image {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 300px;
    background-position: center;
  }
}

/*buat page solution yang section 4*/

/* Container Utama Bagian Manufaktur */
.manu-video-section {
  position: relative;
  width: 100%;
  min-height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Pengaturan Video Background */
.manu-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Layer Hitam Transparan */
.manu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 2;
}

/* Wadah Teks */
.manu-content-box {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 950px;
  padding: 0 25px;
}

.manu-text {
  color: #ffffff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 2.8rem;
  line-height: 1.35;
  font-weight: 400;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* Penyesuaian Layar Kecil / HP */
@media (max-width: 768px) {
  .manu-text {
    font-size: 1.6rem;
    line-height: 1.4;
  }
}










/*Design Page lahh ini*/

/* Container Utama Section Design */
.design-hero-section {
  position: relative;
  width: 100%;
  min-height: 80vh;
  /* Ganti dengan nama file gambar latar workshop / rakit robot kamu */
  background-image: url('bgimage3.png');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Overlay Hitam Transparan */
.design-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

/* Box Konten Tengah */
.design-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.design-title {
  color: #ffffff;
  font-size: 4.8rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 20px;
  letter-spacing: -1px;
}

.design-desc {
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1.5;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 45px;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

/* Tombol Submit Your Design */
a.design-btn {
  background-color: #1b438f; /* Biru gelap sesuai gambar */
  color: #ffffff;
  font-family: Georgia, 'Times New Roman', serif; /* Font serif seperti pada sampel gambar */
  font-size: 2.1rem;
  font-weight: 700;
  text-decoration: none;
  padding: 16px 45px;
  border-radius: 14px;
  display: inline-block;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s, background-color 0.2s;
}

a.design-btn:hover {
  background-color: #122e66;
  transform: translateY(-3px);
}

/* Penyesuaian Layar Kecil / HP */
@media (max-width: 768px) {
  .design-title {
    font-size: 3rem;
  }

  .design-desc {
    font-size: 1.1rem;
  }

  a.design-btn {
    font-size: 1.3rem;
    padding: 12px 28px;
  }
}














/*Buat page Contact Us gitu lahh*/

/* Container Utama */
.contact-section {
  position: relative;
  width: 100%;
  min-height: 90vh;
  background-color: #2b3342; /* Warna latar belakang biru gelap */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 8%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-sizing: border-box;
}

.contact-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 1100px;
  gap: 40px;
}

/* Sisi Kiri */
.contact-left {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}

.contact-title {
  color: #ffffff;
  font-size: 3.5rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 35px;
}

.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}

.contact-info-list li {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 22px;
}

.info-icon {
  width: 32px;
  height: 32px;
  margin-right: 18px;
  flex-shrink: 0;
}

.contact-robot-img {
  width: 500px;
  height: 500px;
  /* Ganti dengan nama file PNG robot putih transparan kamu */
  background-image: url('image10.png'); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom left;
  margin-top: auto;
}

/* Sisi Kanan (Form Card) */
.contact-right {
  flex: 1;
  max-width: 500px;
  width: 100%;
}

.contact-form {
  background-color: #1b202c; /* Kartu background lebih gelap */
  border-radius: 16px;
  padding: 35px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.contact-form h3 {
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 25px;
}

.form-group {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
}

.form-group label {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  background-color: #141722; /* Latar input field */
  border: 1px solid #2d3548;
  border-radius: 8px;
  padding: 12px 14px;
  color: #ffffff;
  font-size: 1rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #2b5bc7;
}

.form-group textarea {
  resize: vertical;
}

/* Tombol Submit */
.submit-btn {
  width: 100%;
  background-color: #16409c; /* Warna tombol biru */
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 14px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  margin-top: 10px;
  transition: background-color 0.2s, transform 0.1s;
}

.submit-btn:hover {
  background-color: #0f2e75;
}

.form-disclaimer {
  color: #8c9ba5;
  font-size: 0.7rem;
  text-align: center;
  margin-top: 12px;
  margin-bottom: 0;
}

/* Responsif Layar Kecil / HP */
@media (max-width: 900px) {
  .contact-container {
    flex-direction: column;
    align-items: center;
  }

  .contact-left, .contact-right {
    width: 100%;
    max-width: 100%;
  }

  .contact-title {
    font-size: 2.5rem;
  }

  .contact-info-list li {
    font-size: 1.1rem;
  }

  .contact-robot-img {
    width: 240px;
    height: 240px;
    margin: 0 auto;
  }
}

/* Box Notifikasi Berhasil */
.success-alert {
  display: none; /* Sembunyikan sebelum form di-submit */
  background-color: #10b981; /* Warna hijau sukses */
  color: #ffffff;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  animation: fadeIn 0.3s ease-in-out;
}

/* Animasi Muncul Halus */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

a[href^="https://"] {
  font-weight: normal;
  text-decoration: none;
  color: #ffffff;
  background-color: transparent;