.container {
  display: flex;
  flex-direction: column;
  gap :5%;
  width: 100%;
  width: 100%;
}

.header-nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 20%;
  background-color: #ffffff;
  overflow: hidden;
  position: relative;
  z-index: 0;
  padding-bottom: 10%;
}

/*========navbar==========*/
.header-nav .group {
  display: grid;
  width: 100%; /* lebar sesuai Union.svg */
  height: auto; /* tinggi sesuai Union.svg */
  place-items: center;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.header-nav .union,
.header-nav .nav{
  grid-area: 1/1;
}


.header-nav .union {
  
  width: 60%;
  height: auto;
  max-width: 90%;
  justify-content: center;
  align-items: center;
  z-index: 0;
  margin-top: 3%;
}

.header-nav .nav {
  display: flex;
  justify-content: center;  /* tengah secara horizontal */
  align-items: center;      /* tengah vertikal */
  gap: 6%;                /* jarak antar menu */
  flex-wrap: wrap;          /* agar menu turun otomatis di layar sempit */
  margin: 0 auto;
  width: 60%;               /* fleksibel sesuai container */
  max-width: 1200px;        /* optional agar tidak terlalu lebar di desktop */
  transform: translateY(15%)
  translateX(-1%);
}


.header-nav .text-wrapper-4 { /*project*/
  width: 9.19%;
  height: 25.44%;
  font-size: 1.5vw;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #ffffff;
  line-height: normal;
  z-index: 3;
  transform: translateX(13%);
}

.header-nav .text-wrapper-5 { /*hobi*/

  width: 10.74%;
  height: 25.44%;
  font-size: 1.5vw;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #000000;
  line-height: normal;
  z-index: 3;
  transform: translateX(-13%);
}

.header-nav .text-wrapper-6 { /*experience*/

  width: 14.51%;
  height: 25.44%;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  font-size: 1.5vw;
  color: #000000;
  line-height: normal;
  z-index: 3;
}

.header-nav .text-wrapper-7 { /* about me */

  width: 12.51%;
  height: 25.44%;
  font-size: 1.5vw;
  min-width: fit-content;
  font-family: "Inter-SemiBold", Helvetica;
  font-weight: 600;
  color: #000000;
  line-height: normal;
  z-index: 3;
}

.header-nav .logo-link{
  display: inline-block; /* penting agar bisa punya ukuran */
  width: 15%; /* sama seperti .logo */
  height: auto;
  z-index: 3;
}
.header-nav .logo {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/*=======Konten pertama=====*/

.project {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 0 0 0; /* kasih jarak dari atas (PROJECT + navbar) */
}

.project .judul{
  width: 100%;
  height: 20%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.project .text-wrapper-5 {
  width: 50%;
  height: 100%;
  text-align: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #ddadad;
  font-size: 4vw;
  letter-spacing: 0;
  line-height: normal;
}

.project .line-2 {
  width: 25%;
  height: 3px;
}

.project .line-4 {
  width: 25%;
  height: 3px;
}


#projectsContainer {
  display: flex;
  flex-direction: column;   /* susun ke bawah */
  align-items: center;      /* center horizontal */
  justify-content: center;  /* center vertical */
  margin-top: 10%;
  gap: 6vw;
  width: 100%;
  height: auto;
  max-width: 100%;        /* biar gak terlalu lebar */
}

.project .component {
  cursor: pointer;  /* ubah jadi pointer */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project .component:hover {
  transform: translateY(-3px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
}

.project .group {
  width: 70vw;                      /* lebar proporsional terhadap viewport */
  height: calc(40vw * 0.87); 
  box-shadow: 0px 7px 10px #00000040;
  border-radius: 8vw;
  overflow: hidden;
}

.project .rectangle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 2%;
  gap: 1%;
  top: calc(50.00% - 267px);
  left: calc(50.00% - 488px);
  width: 100%;
  height: 100%;
  background: linear-gradient(
    360deg,
    rgba(221, 173, 173, 1) 0%,
    rgba(236, 210, 209, 1) 60%
  );
}

.rectangle .img {
  width: 30%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10% 0px 10% 0px;
  box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.3);
}

.rectangle .isi{
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 10%;
  padding-top: 10%;
  padding-left: 5%;
}

.isi .boosting-focus-with {
  top: 90px;
  left: 444px;
  width: 100%;
  height: 60%;
  text-shadow: 0px 4px 4px #00000040;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #fbfbfb;
  font-size: 3vw;
  letter-spacing: 0;
  line-height: normal;
}
.rectangle .waktu{
  height: 100%;
  width: 10%;
  display: flex;               /* jadikan flex container */
  justify-content: center;     /* rata tengah horizontal */
  align-items: center;         /* rata tengah vertikal */
}
.rectangle .text-wrapper {
  width: 100%;
  height: 10%;
  transform: rotate(-90.00deg);
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 2vw;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;  
}

.project .div {
  width: 20%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 24%,
    rgba(223, 176, 176, 1) 100%
  );
  left: 786px;
  -webkit-background-clip: text !important;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: transparent;
  font-size: 10vw;
  letter-spacing: 0;
  line-height: normal;
}

.project .component {
  width: 70%;
  height: 20%;
  display: flex;
  background-color: #ffffff;
  border-radius: 100px;
  box-shadow: 0px 7px 15px #00000040;
  text-align: center;
  justify-content: center;
  
}

.project .text-wrapper-2 {
  margin-left: 7.33%;
  width: 167px;
  margin-right: 5.24%;
  flex: 1;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #e4bdbd;
  font-size: 2.5vw;
  letter-spacing: 0;
  line-height: normal;
}


.pagination {
  margin-top: 40px;
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
}

.pagination button {
  padding: 10px 20px;
  border: none;
  background: #ddadad;
  color: white;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}
.pagination button:hover {
  background: #c99999;
}

.pagination button:disabled {
  background: #eee;
  color: #aaa;
  cursor: not-allowed;
}

/* Dot indicator */
.pagination-dots {
  display: flex;
  gap: 10px;
  align-items: center;
}

.pagination-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ddd;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pagination-dots span.active {
  background: #ddadad;
  transform: scale(1.2);
}

/* Animasi untuk efek keluar */
.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Animasi untuk efek masuk */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}