.elementor-261 .elementor-element.elementor-element-4a83579{--display:flex;}.elementor-261 .elementor-element.elementor-element-176c0e8{--display:flex;--min-height:0px;--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;--justify-content:center;}.elementor-widget-call-to-action .elementor-cta__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-call-to-action .elementor-cta__description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-call-to-action .elementor-cta__button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-call-to-action .elementor-ribbon-inner{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-261 .elementor-element.elementor-element-92ecb80 .elementor-cta .elementor-cta__bg, .elementor-261 .elementor-element.elementor-element-92ecb80 .elementor-cta .elementor-cta__bg-overlay{transition-duration:1500ms;}.elementor-261 .elementor-element.elementor-element-92ecb80{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-261 .elementor-element.elementor-element-92ecb80 .elementor-cta__content{text-align:center;}.elementor-261 .elementor-element.elementor-element-92ecb80 .elementor-cta__title{font-family:"Poppins", Sans-serif;font-weight:600;}.elementor-261 .elementor-element.elementor-element-92ecb80 .elementor-cta__description{font-family:"Poppins", Sans-serif;font-weight:400;}.elementor-261 .elementor-element.elementor-element-92ecb80 .elementor-cta__button{font-family:"Poppins", Sans-serif;font-weight:500;}@media(min-width:768px){.elementor-261 .elementor-element.elementor-element-176c0e8{--content-width:1350px;}}/* Start custom CSS for html, class: .elementor-element-47941f0 */:root{
  --bg:#f5f7fa;
  --card:#ffffff;
  --accent:#0ea5a4;
  --muted:#6b7280;
  --radius:18px;
  --maxw:1100px;
}

*{box-sizing:border-box}

body{
  font-family:'Poppins', sans-serif;
  background:var(--bg);
  margin:0;
  color:#111827;
  line-height:1.7;
}

/* ================= CONTAINER ================= */
.container{
  max-width:var(--maxw);
  margin:120px auto;
  padding:100px 40px 200px;
  position:relative;
  background:
    radial-gradient(circle at 80% 20%, rgba(14,165,164,0.08), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(14,165,164,0.06), transparent 60%);
  border-radius:28px;
  overflow:hidden;
}

/* ================= HERO ================= */
.hero{
  display:flex;
  gap:60px;
  align-items:center;
}

.hero-left{flex:1}

.eyebrow{
  font-weight:600;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:14px;
  margin-bottom:8px;
}

.title{
  font-size:44px;
  font-weight:700;
  margin:0 0 24px;
  position:relative;
  display:inline-block;
}

.title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width:60%;
  height:4px;
  background:var(--accent);
  border-radius:4px;
}

.lead{
  color: var(--muted);
  font-size: 16px;
  max-width: 560px;
  margin-bottom: 32px;

  text-align: justify;
  text-justify: inter-word;
  line-height: 1.9;
}

/* ================= STATS ================= */
.quick-stats{
  display:flex;
  gap:20px;
}

.quick-stats div{
  background:var(--card);
  padding:24px 28px;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
  transition:all .3s ease;
  text-align:center;
}

.quick-stats div:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 45px rgba(0,0,0,0.08);
}

.quick-stats strong{
  display:block;
  font-size:34px;
}

.quick-stats span{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}

/* ===== CTA DI DALAM ANGOTA INTI ===== */
.stat-cta{
  display:inline-block;
  margin-top:14px;
  padding:8px 18px;
  font-size:13px;
  font-weight:600;
  color:var(--accent);
  background:rgba(14,165,164,0.08);
  border-radius:20px;
  text-decoration:none;
  transition:all .3s ease;
}

.stat-cta:hover{
  background:var(--accent);
  color:white;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(14,165,164,0.25);
}

/* ================= HERO RIGHT ================= */
.hero-right{
  flex:1;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

.blob{
  position:absolute;
  width:420px;
  height:420px;
  background:linear-gradient(
    135deg,
    rgba(14,165,164,0.45),
    rgba(14,165,164,0.15)
  );
  border-radius:42% 58% 70% 30% / 60% 30% 70% 40%;
  filter:blur(60px);
  animation:blobFloat 12s ease-in-out infinite alternate;
  z-index:0;
}

.hero-image{
  width:85%;
  max-width:520px;
  border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,0.12);
  position:relative;
  z-index:1;
  transition:transform .4s ease;
}

.hero-image:hover{
  transform:scale(1.03);
}

/* ================= RESPONSIVE ================= */
@media (max-width:900px){
  .hero{
    flex-direction:column-reverse;
    text-align:center;
  }

  .lead{
    margin-left:auto;
    margin-right:auto;
  }

  .quick-stats{
    justify-content:center;
    flex-wrap:wrap;
  }

  .blob{
    width:300px;
    height:300px;
  }
}

/* ================= ANIMATION ================= */
@keyframes blobFloat{
  0%{
    transform:translate(0px,0px) scale(1) rotate(0deg);
    opacity:0.9;
  }
  50%{
    transform:translate(25px,-20px) scale(1.05) rotate(4deg);
    opacity:1;
  }
  100%{
    transform:translate(-15px,20px) scale(1.02) rotate(-3deg);
    opacity:0.85;
  }
}/* End custom CSS */