.elementor-19 .elementor-element.elementor-element-56690b3{--display:flex;--min-height:877px;}.elementor-19 .elementor-element.elementor-element-56690b3:not(.elementor-motion-effects-element-type-background), .elementor-19 .elementor-element.elementor-element-56690b3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#7828EA;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-19 .elementor-element.elementor-element-ded2bee{--e-transform-translateY:451px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:1;text-align:center;}.elementor-19 .elementor-element.elementor-element-ded2bee.elementor-element{--align-self:center;}.elementor-19 .elementor-element.elementor-element-ded2bee img{width:100%;max-width:100%;height:352px;}.elementor-19 .elementor-element.elementor-element-4e5c196{--display:flex;--min-height:23px;--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-19 .elementor-element.elementor-element-4e5c196:not(.elementor-motion-effects-element-type-background), .elementor-19 .elementor-element.elementor-element-4e5c196 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#51E265;}.elementor-19 .elementor-element.elementor-global-292{--e-transform-translateX:-369px;--e-transform-translateY:0px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:3;}.elementor-19 .elementor-element.elementor-global-292.elementor-element{--align-self:flex-end;}.elementor-19 .elementor-element.elementor-element-4340d72{--display:flex;--min-height:178px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-19 .elementor-element.elementor-element-4340d72:not(.elementor-motion-effects-element-type-background), .elementor-19 .elementor-element.elementor-element-4340d72 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#7828EA;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-19 .elementor-element.elementor-element-9f09776{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;font-family:"Russo One", Sans-serif;font-size:30px;font-weight:300;text-transform:uppercase;color:#FFFFFF;}.elementor-19 .elementor-element.elementor-element-9f09776 a{color:#61CE70;}@media(max-width:1200px){.elementor-19 .elementor-element.elementor-element-56690b3{--min-height:500px;}.elementor-19 .elementor-element.elementor-element-ded2bee{--e-transform-translateY:130px;}.elementor-19 .elementor-element.elementor-element-ded2bee img{height:258px;}.elementor-19 .elementor-element.elementor-global-292{--e-transform-translateX:-284px;}}@media(max-width:1024px){.elementor-19 .elementor-element.elementor-element-56690b3{--min-height:460px;}.elementor-19 .elementor-element.elementor-element-ded2bee{--e-transform-translateY:-199px;margin:397px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-19 .elementor-element.elementor-element-ded2bee.elementor-element{--align-self:center;}.elementor-19 .elementor-element.elementor-element-ded2bee img{width:97%;max-width:100%;height:159px;}.elementor-19 .elementor-element.elementor-global-292{--e-transform-translateX:-174px;}.elementor-19 .elementor-element.elementor-element-4340d72{--min-height:133px;}.elementor-19 .elementor-element.elementor-element-9f09776{--e-transform-translateY:5px;--e-transform-scale:1.9;font-size:8px;}}@media(max-width:767px){.elementor-19 .elementor-element.elementor-element-56690b3{--min-height:499px;}.elementor-19 .elementor-element.elementor-element-ded2bee{--e-transform-translateY:12px;margin:223px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-19 .elementor-element.elementor-element-ded2bee.elementor-element{--order:-99999 /* order start hack */;}.elementor-19 .elementor-element.elementor-element-ded2bee img{max-width:100%;height:95px;}.elementor-19 .elementor-element.elementor-element-4e5c196{--min-height:0px;}.elementor-19 .elementor-element.elementor-global-292{--e-transform-translateX:-18px;--e-transform-translateY:-1px;--e-transform-scale:0.6;margin:-17px -17px calc(var(--kit-widget-spacing, 0px) + -17px) -17px;}.elementor-19 .elementor-element.elementor-element-4340d72{--min-height:111px;}.elementor-19 .elementor-element.elementor-element-9f09776{--e-transform-translateX:146px;--e-transform-translateY:35px;margin:-57px 18px calc(var(--kit-widget-spacing, 0px) + 0px) -278px;z-index:2;text-align:center;font-size:14px;letter-spacing:-0.8px;word-spacing:0.2em;}.elementor-19 .elementor-element.elementor-element-9f09776.elementor-element{--order:-99999 /* order start hack */;}.elementor-19 .elementor-element.elementor-element-9f09776 p{margin-block-end:0px;}}@media(min-width:768px){.elementor-19 .elementor-element.elementor-element-56690b3{--width:100%;}.elementor-19 .elementor-element.elementor-element-4340d72{--content-width:1250px;}}/* Start custom CSS for global, class: .elementor-global-292 *//* From Uiverse.io by Zameerahmad01 */ 
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- Container Berjejer Horizontal --- */
.example-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row; 
  gap: 50px; 
}

.example-2 .icon-content {
  position: relative;
}

/* --- Gaya Kotak Informasi Teks (Tooltip di ATAS Lingkaran) --- */
.example-2 .icon-content .tooltip {
  position: absolute;
  bottom: 60px; 
  left: 50%;
  transform: translateX(-50%); 
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  font-size: 20px;
  white-space: nowrap; 
  transition: all 0.3s ease-in-out;
  box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.15); 
  font-family: russo one;
  z-index: 10;
  background: #333; /* WARNA DASAR AMAN: Agar box tidak akan pernah hilang/transparan */
}

.example-2 .icon-content:hover .tooltip {
  opacity: 1;
  visibility: visible;
  bottom: 70px; 
}

/* --- Gaya Tombol Lingkaran --- */
.example-2 .icon-content a {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #4d4d4d;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}

.example-2 .icon-content a:hover {
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
  color: white; 
}

/* --- Optimasi SVG & Fix Khusus untuk SVG Custom Website --- */
.example-2 .icon-content a svg {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  fill: currentColor;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out; 
}

.example-2 .icon-content a:hover svg {
  transform: scale(1.1); 
}

.example-2 .icon-content a[data-social="website"] svg {
  width: 20px;  
  height: 20px;
  overflow: visible; 
}

/* --- Efek Background Warna Mengisi dari Bawah --- */
.example-2 .icon-content a .filled {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #333; /* Warna dasar pengisi sebelum diubah brand */
  transition: all 0.3s ease-in-out;
}

.example-2 .icon-content a:hover .filled {
  height: 100%;
}

/* --- PENGATURAN WARNA BRAND (Menggunakan shorthand 'background' agar mutlak menimpa warna dasar) --- */

/* 1. LinkedIn */
.example-2 .icon-content a[data-social="linkedin"] .filled,
.example-2 .icon-content a[data-social="linkedin"] ~ .tooltip {
  background: #0274b3;
}

/* 2. Twitter / X */
.example-2 .icon-content a[data-social="twitter"] .filled,
.example-2 .icon-content a[data-social="twitter"] ~ .tooltip {
  background: #000000;
}

/* 3. Instagram */
.example-2 .icon-content a[data-social="instagram"] .filled,
.example-2 .icon-content a[data-social="instagram"] ~ .tooltip {
  background: linear-gradient(45deg, #405de6, #5b51db, #b33ab4, #c135b4, #e1306c, #fd1f1f);
}

/* 4. Behance */
.example-2 .icon-content a[data-social="behance"] .filled,
.example-2 .icon-content a[data-social="behance"] ~ .tooltip {
  background: #1769ff;
}

/* 5. Personal Website */
.example-2 .icon-content a[data-social="website"] .filled,
.example-2 .icon-content a[data-social="website"] ~ .tooltip {
  background: #7828ea;
}/* End custom CSS */