.elementor-3517 .elementor-element.elementor-element-2acb6db{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3517 .elementor-element.elementor-element-29d9e99{--display:flex;--min-height:41px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--flex-wrap:nowrap;border-style:solid;--border-style:solid;border-width:2px 2px 2px 2px;--border-top-width:2px;--border-right-width:2px;--border-bottom-width:2px;--border-left-width:2px;border-color:#9D9DA8;--border-color:#9D9DA8;--border-radius:29px 29px 29px 29px;--margin-top:0px;--margin-bottom:0px;--margin-left:auto;--margin-right:auto;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3517 .elementor-element.elementor-element-29d9e99:not(.elementor-motion-effects-element-type-background), .elementor-3517 .elementor-element.elementor-element-29d9e99 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#3C3C4200;}.elementor-3517 .elementor-element.elementor-element-29d9e99.e-con{--align-self:flex-start;}body:not(.rtl) .elementor-3517 .elementor-element.elementor-element-02388e0{left:16.4px;}body.rtl .elementor-3517 .elementor-element.elementor-element-02388e0{right:16.4px;}.elementor-3517 .elementor-element.elementor-element-02388e0{top:7.4px;}.elementor-3517 .elementor-element.elementor-element-02388e0 .elementor-heading-title{font-family:"Montserrat", Montserrat;font-weight:400;color:#FFFFFF;}.elementor-3517 .elementor-element.elementor-element-8482595{--display:flex;}@media(min-width:768px){.elementor-3517 .elementor-element.elementor-element-29d9e99{--width:10%;}}


.project-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  background: transparent;            /* transparan */
  border: 1.5px solid #e5e5e5;        /* stroke tipis abu */
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 30px;
}

.project-info {
  flex: 1;
}

.project-date {
  font-size: 14px;
  color: #777;
  margin-bottom: 8px;
}

.project-title {
  font-size: 28px;
  font-weight: 600;
  color: #fff;                        /* karena background hitam */
  margin: 10px 0 15px;
}

.project-desc {
  font-size: 14px;       /* kecilin */
  line-height: 1.5;      
  color: #aaa;           
  margin-bottom: 15px;   
}

.project-tags span {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #555;             
  border-radius: 20px;
  font-size: 14px;
  margin: 0 6px 10px 0;
  color: #aaa;
  background: transparent;
}

.project-btn {
  display: inline-flex;              /* biar teks & arrow sejajar */
  align-items: center;
  gap: 6px;
  padding: 8px 16px;                 /* lebih kecil */
  font-size: 14px;
  border: 1.5px solid #888;
  border-radius: 40px;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  margin-top: 20px;                  /* jarak dengan kategori */
  transition: all 0.3s ease;
}

/* Arrow SVG */
.project-btn .arrow-icon {
  width: 18px;                       /* agak besar */
  height: 18px;
  opacity: 0;                        /* sembunyi dulu */
  transform: translateX(-4px);       /* geser kiri */
  transition: all 0.3s ease;
}

.project-btn:hover .arrow-icon {
  opacity: 1;
  transform: translateX(0);
}

.project-image {
  flex: 0 0 320px;
}

.project-image img {
  max-width: 100%;
  border-radius: 12px;
  display: block;
}

/* Responsif */
@media (max-width: 768px) {
  .project-card {
    flex-direction: column;
    text-align: center;
  }

  .project-image {
    margin-top: 20px;
  }
}
.project-btn .arrow-icon {
  width: 18px;
  height: 18px;
  opacity: 0;
  transform: translate(-4px, -2px);   /* ✅ geser kiri & naik dikit */
  transition: all 0.3s ease;
}

.project-btn:hover .arrow-icon {
  opacity: 1;
  transform: translate(0, -2px);      /* tetap naik dikit saat hover */
}
.project-image {
  flex: 1;
  max-width: 450px;   /* ✅ batas maksimal */
}

.project-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;                 /* ✅ jarak teks & gambar lebih lebar */
  background: transparent;
  border: 1.5px solid #e5e5e5;
  border-radius: 24px;       /* sudut lebih halus */
  padding: 70px;             /* ✅ dalamannya lebih lega */
  margin-bottom: 50px;
  max-width: 1400px;         /* ✅ card lebih panjang */
  margin-left: auto;
  margin-right: auto;
}

.project-image {
  flex: 0 0 500px;   /* ✅ gedein lebar gambar (dulu 320px/400px) */
}

.project-image img {
  width: 100%;       /* isi penuh kotaknya */
  height: auto;      /* proporsional */
  border-radius: 16px;
  display: block;
}

.project-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;     /* ✅ lebih kecil dari 8px 16px */
  font-size: 13px;       /* ✅ teks lebih kecil */
  border: 1.5px solid #888;
  border-radius: 40px;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  margin-top: 18px;      /* sedikit lebih rapat */
  transition: all 0.3s ease;
}

.project-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;   /* ⬅️ ini atur jarak dalam */
  font-size: 14px;
  border: 1.5px solid #888;
  border-radius: 40px;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  transition: all 0.3s ease;
}