.elementor-1273 .elementor-element.elementor-element-aa53485{--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;}/* Start custom CSS for html, class: .elementor-element-51b489c */.about-section-wrapper {
      padding: 100px 20px;
      background-color: #ffffff; /* Latar belakang putih bersih */
      position: relative;
      overflow: hidden;
    }

    /* Efek cahaya ambient di latar belakang (warna biru dan hijau super pastel) */
    .about-section-wrapper::before {
      content: '';
      position: absolute;
      top: -10%;
      right: -5%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
      border-radius: 50%;
      z-index: 0;
      pointer-events: none;
    }
    
    .about-section-wrapper::after {
      content: '';
      position: absolute;
      bottom: -10%;
      left: -10%;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(16, 185, 129, 0.04) 0%, transparent 70%);
      border-radius: 50%;
      z-index: 0;
      pointer-events: none;
    }

    .about-container {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .about-text-content {
      opacity: 0;
      transform: translateX(-50px);
      transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .about-text-content.visible {
      opacity: 1;
      transform: translateX(0);
    }

    .about-subtitle {
      display: inline-block;
      color: #2563eb; /* Biru cerah (Trust & Professional) */
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-size: 0.9rem;
      margin-bottom: 15px;
      position: relative;
      padding-left: 50px;
    }

    .about-subtitle::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 2px;
      background-color: #2563eb;
    }

    .about-title {
      font-size: 2.8rem;
      color: #0f172a; /* Biru sangat gelap (hampir hitam) untuk judul */
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 25px;
    }

    .about-title span {
      background: linear-gradient(to right, #2563eb, #0ea5e9);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .about-description {
      font-size: 1.1rem;
      line-height: 1.8;
      margin-bottom: 30px;
      color: #475569; /* Abu-abu batu muda */
    }

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

    .feature-list li {
      position: relative;
      padding-left: 35px;
      margin-bottom: 15px;
      font-size: 1.05rem;
      color: #334155;
      display: flex;
      align-items: center;
      font-weight: 500;
    }

    .feature-list li::before {
      content: '✓';
      position: absolute;
      left: 0;
      width: 24px;
      height: 24px;
      background: rgba(37, 99, 235, 0.1);
      color: #2563eb;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: bold;
      border: 1px solid rgba(37, 99, 235, 0.2);
    }

    /* Button Styling */
    .btn-about {
      display: inline-flex;
      align-items: center;
      padding: 14px 32px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #0f172a;
      font-weight: 600;
      text-decoration: none;
      border-radius: 50px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .btn-about:hover {
      background: #2563eb; /* Berubah biru saat kursor mendekat */
      border-color: #2563eb;
      color: #ffffff;
      box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
      transform: translateY(-3px);
    }
    
    /* Hover untuk ikon di dalam button */
    .btn-about:hover svg {
      stroke: #ffffff;
    }

    .about-visual-content {
      position: relative;
      opacity: 0;
      transform: translateX(50px);
      transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition-delay: 0.2s; 
    }

    .about-visual-content.visible {
      opacity: 1;
      transform: translateX(0);
    }

    /* Tampilan gaya bingkai foto modern */
    .image-frame {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15); /* Shadow lebih lembut */
      border: 8px solid #ffffff; /* Efek bingkai putih ala Polaroid modern */
      background-color: #fff;
    }

    .image-frame img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.7s ease;
      border-radius: 12px;
    }

    .image-frame:hover img {
      transform: scale(1.05);
    }

    /* Floating Badges (Elemen Melayang) dengan gaya terang */
    .floating-badge {
      position: absolute;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: 16px;
      padding: 15px 20px;
      display: flex;
      align-items: center;
      gap: 15px;
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08); /* Shadow halus ala Apple design */
      animation: floatBadge 4s infinite ease-in-out alternate;
    }

    .badge-1 {
      bottom: -20px;
      left: -30px;
      animation-delay: 0s;
    }

    .badge-2 {
      top: 40px;
      right: -30px;
      animation-delay: 2s;
    }

    .badge-icon {
      width: 45px;
      height: 45px;
      background: linear-gradient(135deg, #2563eb, #3b82f6);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: white;
      box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
    }

    .badge-text h4 {
      margin: 0 0 2px 0;
      color: #0f172a;
      font-size: 1.1rem;
      font-weight: 700;
    }

    .badge-text p {
      margin: 0;
      color: #64748b;
      font-size: 0.85rem;
    }

    @keyframes floatBadge {
      0% { transform: translateY(0px); }
      100% { transform: translateY(-15px); }
    }

    @media (max-width: 992px) {
      .about-container {
        grid-template-columns: 1fr;
        gap: 50px;
      }
      
      .about-visual-content {
        order: -1; 
        padding: 0 20px;
      }
      
      .badge-1 { left: -10px; bottom: -10px; }
      .badge-2 { right: -10px; top: 10px; }
    }

    @media (max-width: 768px) {
      .about-section-wrapper { padding: 60px 15px; }
      .about-title { font-size: 2.2rem; }
      .floating-badge { padding: 10px 15px; }
      .badge-icon { width: 35px; height: 35px; font-size: 16px; }
      .badge-text h4 { font-size: 0.95rem; }
    }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4ef1add */.stats-section-wrapper {
      /* Gradien segar: Cyan (Ocean) ke Emerald Green */
      background: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%); 
      padding: 80px 20px;
      color: #ffffff;
      position: relative;
      overflow: hidden;
    }
    
    /* Pola jaring tipis di background agar terlihat modern/tech */
    .stats-section-wrapper::before {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
      background-size: 30px 30px;
      opacity: 0.5;
    }

    .stats-container {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      position: relative;
      z-index: 1;
      
      /* Persiapan untuk animasi scroll reveal */
      opacity: 0;
      transform: translateY(40px);
      transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Kelas yang ditambahkan via JS saat section muncul di layar */
    .stats-container.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .stat-item {
      text-align: center;
      padding: 40px 20px;
      background: rgba(255, 255, 255, 0.15); /* Lebih cerah dan transparan */
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: all 0.4s ease;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      position: relative;
      overflow: hidden;
    }

    /* Efek kilauan cahaya (shine) saat di-hover */
    .stat-item::before {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 50%; height: 100%;
      background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
      transform: skewX(-25deg);
      transition: all 0.75s ease;
    }

    .stat-item:hover::before {
      left: 125%;
    }

    .stat-item:hover {
      transform: translateY(-10px);
      background: rgba(255, 255, 255, 0.25);
      border-color: rgba(255, 255, 255, 0.7);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

    .stat-icon {
      font-size: 2.5rem;
      margin: 0 auto 20px auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      background: #ffffff;
      border-radius: 50%;
      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }

    .stat-number-wrapper {
      font-size: 3.5rem;
      font-weight: 800;
      line-height: 1;
      margin-bottom: 15px;
      display: flex;
      justify-content: center;
      align-items: baseline;
      color: #ffffff;
    }

    .stat-plus {
      font-size: 2.2rem;
      color: #fde047; /* Aksen kuning cerah (fresh) untuk tanda tambah */
      margin-left: 4px;
      text-shadow: 0 2px 10px rgba(253, 224, 71, 0.4);
    }

    .stat-label {
      font-size: 1.1rem;
      font-weight: 700;
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: 1.5px;
    }

    @media (max-width: 992px) {
      .stats-container { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    }

    @media (max-width: 768px) {
      .stats-section-wrapper { padding: 60px 20px; }
      .stat-item { padding: 25px 15px; }
      .stat-icon { font-size: 2.5rem; }
      .stat-number-wrapper { font-size: 2.8rem; }
      .stat-label { font-size: 0.95rem; }
    }
    
    @media (max-width: 480px) {
      .stats-container { grid-template-columns: 1fr; }
    }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f7fd7cf */.programs-section-wrapper {
      padding: 100px 20px;
      background-color: #f8fafc; 
      position: relative;
    }

    /* Dekorasi latar belakang (titik-titik samar) */
    .programs-section-wrapper::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
      background-size: 40px 40px;
      opacity: 0.3;
      z-index: 0;
    }

    .programs-container {
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .section-header {
      text-align: center;
      margin-bottom: 60px;
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s ease;
    }

    .section-header.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .section-subtitle {
      display: inline-block;
      color: #10b981; /* Hijau emerald fresh */
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-size: 0.9rem;
      margin-bottom: 10px;
      background: rgba(16, 185, 129, 0.1);
      padding: 6px 16px;
      border-radius: 50px;
    }

    .section-title {
      font-size: 2.5rem;
      color: #0f172a;
      font-weight: 800;
      margin: 0 0 15px 0;
    }

    .section-desc {
      font-size: 1.1rem;
      color: #64748b;
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.6;
    }

    .programs-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }

    .program-card {
      background: #ffffff;
      border-radius: 20px;
      padding: 40px 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
      position: relative;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      border: 1px solid rgba(226, 232, 240, 0.8);
      
      /* Persiapan untuk animasi scroll */
      opacity: 0;
      transform: translateY(50px);
    }

    /* Class untuk memicu animasi masuk (fade in up) */
    .program-card.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Garis warna di bawah kartu yang melebar saat di-hover */
    .program-card::after {
      content: '';
      position: absolute;
      bottom: 0; left: 50%;
      transform: translateX(-50%);
      width: 0; height: 4px;
      background: linear-gradient(90deg, #0ea5e9, #10b981);
      transition: width 0.4s ease;
    }

    .program-card:hover {
      transform: translateY(-15px);
      box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
      border-color: transparent;
    }

    .program-card:hover::after {
      width: 100%;
    }

    .card-icon-wrapper {
      width: 70px;
      height: 70px;
      background: #f1f5f9;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      margin-bottom: 25px;
      transition: all 0.3s ease;
      position: relative;
    }

    .program-card:hover .card-icon-wrapper {
      background: #2563eb;
      color: white;
      transform: scale(1.1) rotate(-5deg);
      box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
    }

    .card-title {
      font-size: 1.3rem;
      font-weight: 700;
      color: #0f172a;
      margin: 0 0 15px 0;
      transition: color 0.3s ease;
    }
    
    .program-card:hover .card-title {
      color: #2563eb;
    }

    .card-desc {
      font-size: 1rem;
      color: #64748b;
      line-height: 1.6;
      margin: 0;
    }

    /* Media Queries untuk responsivitas */
    @media (max-width: 992px) {
      .programs-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 768px) {
      .programs-section-wrapper { padding: 60px 15px; }
      .section-title { font-size: 2rem; }
      .programs-grid { grid-template-columns: 1fr; gap: 20px; }
      .program-card { padding: 30px 20px; }
    }/* End custom CSS */