/* ========== RESET ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========== BODY ========== */
body {
  font-family: 'Poppins', sans-serif;
  background-color: #fff;
  color: #333333;
  font-size:1rem;
  overflow-x: hidden;
}
p{
	margin-top:.8rem;
}

a{
	text-decoration:none;
	color:#094f83;
}
a:hover{
	color:#074776;
}

/* === CONTAINER-FLUID === */
.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.container {
    width: 100%;
	max-width: 90%;
    margin:auto;
}

/* ==== ROW ==== */
	.row {
	  display: flex;
	  flex-wrap: wrap;
	  margin-left: -10px;
	  margin-right: -10px;
	}

	/* ==== KOLOM DASAR ==== */
	[class*="col"] {
		padding-left: 10px;
	  padding-right: 10px;

	}

	/* ==== KOLOM AUTO (col) ==== */
	.col {
	  flex: 1 0 0%;
	}

	/* ==== KOLOM FIXED WIDTH (col-1 to col-12) ==== */
	.col-1   { flex: 0 0 8.333%;  max-width: 8.333%;  }
	.col-2   { flex: 0 0 16.666%; max-width: 16.666%; }
	.col-3   { flex: 0 0 25%;     max-width: 25%;     }
	.col-4   { flex: 0 0 33.333%; max-width: 33.333%; }
	.col-5   { flex: 0 0 41.666%; max-width: 41.666%; }
	.col-6   { flex: 0 0 50%;     max-width: 50%;     }
	.col-7   { flex: 0 0 58.333%; max-width: 58.333%; }
	.col-8   { flex: 0 0 66.666%; max-width: 66.666%; }
	.col-9   { flex: 0 0 75%;     max-width: 75%;     }
	.col-10  { flex: 0 0 83.333%; max-width: 83.333%; }
	.col-11  { flex: 0 0 91.666%; max-width: 91.666%; }
	.col-12  { flex: 0 0 100%;    max-width: 100%;    }

	/* ==== RESPONSIVE KOLOM ==== */

	/* sm (≥576px) */
	@media (min-width: 576px) {
	  .col-sm-1   { flex: 0 0 8.333%;  max-width: 8.333%;  }
	  .col-sm-2   { flex: 0 0 16.666%; max-width: 16.666%; }
	  .col-sm-3   { flex: 0 0 25%;     max-width: 25%;     }
	  .col-sm-4   { flex: 0 0 33.333%; max-width: 33.333%; }
	  .col-sm-5   { flex: 0 0 41.666%; max-width: 41.666%; }
	  .col-sm-6   { flex: 0 0 50%;     max-width: 50%;     }
	  .col-sm-7   { flex: 0 0 58.333%; max-width: 58.333%; }
	  .col-sm-8   { flex: 0 0 66.666%; max-width: 66.666%; }
	  .col-sm-9   { flex: 0 0 75%;     max-width: 75%;     }
	  .col-sm-10  { flex: 0 0 83.333%; max-width: 83.333%; }
	  .col-sm-11  { flex: 0 0 91.666%; max-width: 91.666%; }
	  .col-sm-12  { flex: 0 0 100%;    max-width: 100%;    }
	}

	/* md (≥768px) */
	@media (min-width: 768px) {
	  .col-md-1   { flex: 0 0 8.333%;  max-width: 8.333%;  }
	  .col-md-2   { flex: 0 0 16.666%; max-width: 16.666%; }
	  .col-md-3   { flex: 0 0 25%;     max-width: 25%;     }
	  .col-md-4   { flex: 0 0 33.333%; max-width: 33.333%; }
	  .col-md-5   { flex: 0 0 41.666%; max-width: 41.666%; }
	  .col-md-6   { flex: 0 0 50%;     max-width: 50%;     }
	  .col-md-7   { flex: 0 0 58.333%; max-width: 58.333%; }
	  .col-md-8   { flex: 0 0 66.666%; max-width: 66.666%; }
	  .col-md-9   { flex: 0 0 75%;     max-width: 75%;     }
	  .col-md-10  { flex: 0 0 83.333%; max-width: 83.333%; }
	  .col-md-11  { flex: 0 0 91.666%; max-width: 91.666%; }
	  .col-md-12  { flex: 0 0 100%;    max-width: 100%;    }
	}

	/* lg (≥992px) */
	@media (min-width: 992px) {
	  .col-lg-1   { flex: 0 0 8.333%;  max-width: 8.333%;  }
	  .col-lg-2   { flex: 0 0 16.666%; max-width: 16.666%; }
	  .col-lg-3   { flex: 0 0 25%;     max-width: 25%;     }
	  .col-lg-4   { flex: 0 0 33.333%; max-width: 33.333%; }
	  .col-lg-5   { flex: 0 0 41.666%; max-width: 41.666%; }
	  .col-lg-6   { flex: 0 0 50%;     max-width: 50%;     }
	  .col-lg-7   { flex: 0 0 58.333%; max-width: 58.333%; }
	  .col-lg-8   { flex: 0 0 66.666%; max-width: 66.666%; }
	  .col-lg-9   { flex: 0 0 75%;     max-width: 75%;     }
	  .col-lg-10  { flex: 0 0 83.333%; max-width: 83.333%; }
	  .col-lg-11  { flex: 0 0 91.666%; max-width: 91.666%; }
	  .col-lg-12  { flex: 0 0 100%;    max-width: 100%;    }
	}

	/* xl (≥1200px) */
	@media (min-width: 1200px) {
	  .col-xl-1   { flex: 0 0 8.333%;  max-width: 8.333%;  }
	  .col-xl-2   { flex: 0 0 16.666%; max-width: 16.666%; }
	  .col-xl-3   { flex: 0 0 25%;     max-width: 25%;     }
	  .col-xl-4   { flex: 0 0 33.333%; max-width: 33.333%; }
	  .col-xl-5   { flex: 0 0 41.666%; max-width: 41.666%; }
	  .col-xl-6   { flex: 0 0 50%;     max-width: 50%;     }
	  .col-xl-7   { flex: 0 0 58.333%; max-width: 58.333%; }
	  .col-xl-8   { flex: 0 0 66.666%; max-width: 66.666%; }
	  .col-xl-9   { flex: 0 0 75%;     max-width: 75%;     }
	  .col-xl-10  { flex: 0 0 83.333%; max-width: 83.333%; }
	  .col-xl-11  { flex: 0 0 91.666%; max-width: 91.666%; }
	  .col-xl-12  { flex: 0 0 100%;    max-width: 100%;    }
	}

	/* xxl (≥1400px) */
	@media (min-width: 1400px) {
	  .col-xxl-1   { flex: 0 0 8.333%;  max-width: 8.333%;  }
	  .col-xxl-2   { flex: 0 0 16.666%; max-width: 16.666%; }
	  .col-xxl-3   { flex: 0 0 25%;     max-width: 25%;     }
	  .col-xxl-4   { flex: 0 0 33.333%; max-width: 33.333%; }
	  .col-xxl-5   { flex: 0 0 41.666%; max-width: 41.666%; }
	  .col-xxl-6   { flex: 0 0 50%;     max-width: 50%;     }
	  .col-xxl-7   { flex: 0 0 58.333%; max-width: 58.333%; }
	  .col-xxl-8   { flex: 0 0 66.666%; max-width: 66.666%; }
	  .col-xxl-9   { flex: 0 0 75%;     max-width: 75%;     }
	  .col-xxl-10  { flex: 0 0 83.333%; max-width: 83.333%; }
	  .col-xxl-11  { flex: 0 0 91.666%; max-width: 91.666%; }
	  .col-xxl-12  { flex: 0 0 100%;    max-width: 100%;    }
	}

/* ========== GRID RESPONSIVE ========== */

    /* Grid Wrapper */
    .grid {
      display: grid;
      gap: 16px;
      grid-template-columns: repeat(1, 1fr); /* Default: 1 kolom */
    }

    /* Kolom */
    .grid-box {
      background: #e0e0e0;
      border: 1px solid #ccc;
      text-align: left;
      padding: 16px;
      box-sizing: border-box;
    }

    /* Mobile Lanskap (480px – 599px): 2 kolom */
    @media (min-width: 480px) and (orientation: landscape) {
      .grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* Tablet 7 inch Potret (600px – 799px): 2 kolom */
    @media (min-width: 600px) and (max-width: 799px) and (orientation: portrait) {
      .grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* Tablet 7 inch Lanskap (800px – 1023px): 3 kolom */
    @media (min-width: 800px) and (max-width: 1023px) and (orientation: landscape) {
      .grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    /* Tablet 10 inch Potret (800px – 1023px): 3 kolom */
    @media (min-width: 800px) and (max-width: 1023px) and (orientation: portrait) {
      .grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    /* Tablet 10 inch Lanskap (1024px – 1279px): 4 kolom */
    @media (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape) {
      .grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    /* Desktop ≥1280px: 4 kolom */
    @media (min-width: 1280px) {
      .grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ====== HEADER UMUM ====== */
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background-color: transparant;
	transition: all 0.3s ease;
}

/* Container dalam header */
.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: white;
	padding: 1rem 1rem;
	margin: 0 auto;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.box-header-right{
	display: flex;
	background:#fff;
}
.box-header-btn a:hover{
	color:#fff;
}

@media (max-width: 640px) {
	.box-header-btn{
		display:none;
	}
}	
/* Ukuran mengikuti layout kolom */
@media (min-width: 640px) {
	.header-container { width:100%;	}
    .header.scrolled .header-container {
		max-width: 100%;
		border-radius: 0;
		padding-left: 1rem;
		padding-right: 1rem;
	}	
	
	
}
@media (min-width: 768px) {
	.header { top: 50px; }
	.header-container { max-width: 90%; border-radius: 0.75rem; } 
}
@media (min-width: 1024px) {
	.header-container { max-width: 90%; }
	.header.scrolled .header-container {
		max-width: 100%;
		border-radius: 0;
	}
}
@media (min-width: 1280px) {
	.header-container { max-width: 90%; }
	.header.scrolled .header-container {
	  max-width: 100%;
	  border-radius: 0;

	}
}

/* Saat scroll Header */
.header.scrolled { top: 0; background-color: white; }

.logo{
	position:relative;
}

.logo-mobile{
	position:relative;
	z-index:1002;
}





/* Menu Navigator */
nav { position: relative; }
.menu li { position: relative; }
.menu li a {
    color: #101010;
    text-decoration: none;
    padding: 0.5rem 0.5rem;
	display: block;
	display: flex; /* Biar teks & ikon sejajar */
	justify-content: space-between; /* Biar teks kiri, panah kanan */
	align-items: center; /* Sejajarkan vertikal */
}



/* Responsive - Desktop */
@media (min-width: 1024px) {
	.menu-toggle { display:none; }
	.menu {
		list-style: none;
		display: flex;
		gap: 1rem;
		background: #fff;
		color: #101010;
		padding: 1rem;
		position: relative;
		border-radius:5px;
    }
	.menu li a:hover {color:#fe714a;}
	.menu li:not(:has(ul)) > a::after {
  content: "";
  height: 18px;
  padding-top:10px;
  visibility: hidden; /* tetap ambil ruang agar rata */
}
	.menu li ul {
		position: absolute;
		left: 0;
		top: 100%;
		background: #fff;
		min-width: 200px;
		z-index: 999;
		list-style: none; /* Hapus bullet */
		box-shadow:0 10px 20px rgba(0,0,0,.08);
		opacity: 0;
		visibility: hidden;
		transform: translateY(30px); /* posisi lebih bawah dulu */
		transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
		pointer-events: none;
		z-index:99;
    }
	.menu li:hover > ul {
		opacity: 1;
		visibility: visible;
		transform: translateY(0); /* kembali ke posisi normal */
		pointer-events: auto;
	}
	.menu li ul li:hover { background:#f2f2f2;}
	.menu li ul li:hover::before {float:left; padding-left:8px;margin-top:7px; content:"→ ";animation: slideFromLeft 0.2s ease forwards; opacity: 0;}
	.menu li ul li a {
		padding-left:1rem;
	}
	.menu li:hover > ul { display: block; }
	.menu li > ul li ul { left: 100%; top: 0; }
	.menu li:has(ul) > a::after {
		content: "";
		float: right;
		margin-left: 10px;
		width:18px;
		height:18px;
		background-color: currentColor;
		mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z"/></svg>') left / contain no-repeat;
		-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z"/></svg>') left / contain no-repeat;
		padding-top:10px;
		transform: rotate(90deg);
	}
	.menu li > ul li:has(ul) > a::after {
		content: "";
		float: right;
		right: 30px;
		top:0px;
		width:18px;
		height:18px;
		background-color: currentColor;
		mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z"/></svg>') left / contain no-repeat;
		-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z"/></svg>') left / contain no-repeat;
		padding-top:10px;
		transform: rotate(0deg);
    }
	
	
	
	.close-btn { display: none; }
}

/* Responsive - Mobile */
.menu-toggle {
		font-size: 2rem;
		cursor: pointer;
		z-index: 1002;
		color: #fff;
		background-color: #0652B1;
		padding:5px;
		border-radius:8px;
		margin-left:10px;
    }
	.menu-toggle:active {
		font-size: 2rem;
		cursor: pointer;
		z-index: 1002;
		color: #fff;
		background-color: #033a80;
		padding:5px;
		border-radius:8px;
		margin-left:10px;
		box-shadow:5px #0000;
    }
	
	.bar-toggle{
	width:25px;
	border:2px solid #fff;
	position:relative;
	margin:5px;
	border-radius:21px;
}
	
@media (max-width: 1024px) {
    
	
	.menu {
        flex-direction: column;
        position: fixed;
        top: 0;
        left: -300px;
        width: 250px;
        height: 100%;
        background: #fff;
        padding-top: 6rem;
        transition: left 0.3s ease;
        overflow-y: auto;
        z-index: 1001;
	}
	nav.open .menu { left: 0; }
	.menu li{
		
		align-items: center; /* ✅ Sejajarkan vertikal */
	}
	.menu li a {
		
		transition: all 0.1s ease;
		text-decoration: none;
	}
	.menu li a:active {
		color: #0056b3;         /* Warna lebih gelap */
		text-shadow: none;      /* Hilangkan bayangan kalau ada */
		transform: scale(0.98); /* Sedikit mengecil (opsional) */
	}
	.overlay {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
	}
	
	nav.open .overlay { display: block; }
	.menu li:hover > ul { display: none; }
	.menu li > ul {
        display: none;
        position: static;
        background: none;
        list-style: none;
        padding-left: 0.5rem; /* ⬅️ Indent submenu */
	}
	.menu li.active > ul { display: block; }
	.menu li:has(ul) > a::after {
		content: "";
		float: right;
		margin-left: 10px;
		width:18px;
		height:18px;
	}
	.menu li > ul li:has(ul) > a::after {
		content: "";
		float: right;
		right: 30px;
		top:0px;
		width: 28px;
		height: 28px;
		border-radius:5px;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2.4 -2.4 28.8 28.8'><rect x='-2.4' y='-2.4' width='28.80' height='28.80' rx='2.304' fill='%230652b2'/><path d='M7.82054 20.7313C8.21107 21.1218 8.84423 21.1218 9.23476 20.7313L15.8792 14.0868C17.0505 12.9155 17.0508 11.0167 15.88 9.84497L9.3097 3.26958C8.91918 2.87905 8.28601 2.87905 7.89549 3.26958C7.50497 3.6601 7.50497 4.29327 7.89549 4.68379L14.4675 11.2558C14.8581 11.6464 14.8581 12.2795 14.4675 12.67L7.82054 19.317C7.43002 19.7076 7.43002 20.3407 7.82054 20.7313Z' fill='%23ffffff'/></svg>");
		transform: rotate(0deg);
    }
	.menu li:has(ul) > a::after {
        content: "";
        float: right;
		width: 28px;
		height: 28px;
		border-radius:5px;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2.4 -2.4 28.8 28.8'><rect x='-2.4' y='-2.4' width='28.80' height='28.80' rx='2.304' fill='%230652b2'/><path d='M7.82054 20.7313C8.21107 21.1218 8.84423 21.1218 9.23476 20.7313L15.8792 14.0868C17.0505 12.9155 17.0508 11.0167 15.88 9.84497L9.3097 3.26958C8.91918 2.87905 8.28601 2.87905 7.89549 3.26958C7.50497 3.6601 7.50497 4.29327 7.89549 4.68379L14.4675 11.2558C14.8581 11.6464 14.8581 12.2795 14.4675 12.67L7.82054 19.317C7.43002 19.7076 7.43002 20.3407 7.82054 20.7313Z' fill='%23ffffff'/></svg>");
		transform: rotate(0deg);
	}
	.menu li.active > a::after {
        content: "";
		width: 28px;
		height: 28px;
		border-radius:5px;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2.4 -2.4 28.8 28.8'><rect x='-2.4' y='-2.4' width='28.80' height='28.80' rx='2.304' fill='%230652b2'/><path d='M7.82054 20.7313C8.21107 21.1218 8.84423 21.1218 9.23476 20.7313L15.8792 14.0868C17.0505 12.9155 17.0508 11.0167 15.88 9.84497L9.3097 3.26958C8.91918 2.87905 8.28601 2.87905 7.89549 3.26958C7.50497 3.6601 7.50497 4.29327 7.89549 4.68379L14.4675 11.2558C14.8581 11.6464 14.8581 12.2795 14.4675 12.67L7.82054 19.317C7.43002 19.7076 7.43002 20.3407 7.82054 20.7313Z' fill='%23ffffff'/></svg>");
		transform: rotate(90deg);
	}
	.menu li ul li::before {
		content:" ";
		float:left;
		margin-top:15px;
		margin-right:0px;
		width:18px;
		height:18px;
		background-color: currentColor;
		mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z"/></svg>') left / contain no-repeat;
		-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z"/></svg>') left / contain no-repeat;
	}
	
}
.close-btn {
  display: none;              /* sembunyikan awalnya */
  position: fixed;
  top: 10px;
  right: 8px;
  width: 40px;
  height: 40px;
  line-height: 40px;          /* agar “×” pas di tengah */
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  background:#333;
  border-radius: 50%;         /* bikin bentuk lingkaran */
  cursor: pointer;
  transition: all 300s ease;
  z-index: 1100;
}
.btn-contact {
      padding: 12px 24px;
      background-color: #FF7A00;
      color: white;
      text-decoration: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 20px;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      gap: 8px;
	  transition: all 0.3s ease-in-out;
    }

    .btn-contact::before {
      content: "";
      display: inline-block;
      width: 32px;
      height: 32px;
      background-image: url("data:image/svg+xml,%3Csvg fill='white' width='32px' height='32px' viewBox='0 0 0.96 0.96' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.611 0.528a0.28 0.28 0 0 1 0.062 0.028l-0.001 -0.001c0.021 0.009 0.039 0.02 0.056 0.033l-0.001 0q0.001 0.004 0.001 0.008l0 0.001v0c-0.001 0.017 -0.004 0.033 -0.011 0.048l0 -0.001c-0.009 0.019 -0.025 0.033 -0.043 0.04l-0.001 0a0.144 0.144 0 0 1 -0.063 0.016h0a0.332 0.332 0 0 1 -0.12 -0.039l0.002 0.001a0.356 0.356 0 0 1 -0.105 -0.073l0 0a0.82 0.82 0 0 1 -0.09 -0.112l-0.002 -0.003a0.216 0.216 0 0 1 -0.044 -0.12l0 -0.001v-0.005a0.137 0.137 0 0 1 0.046 -0.098l0 0a0.047 0.047 0 0 1 0.032 -0.014h0q0.006 0 0.012 0.001l-0.001 0c0.003 0.001 0.008 0.001 0.012 0.001h0l0.002 0c0.005 0 0.01 0.002 0.014 0.004l0 0c0.004 0.005 0.008 0.01 0.01 0.017l0 0q0.005 0.012 0.02 0.055c0.005 0.013 0.011 0.028 0.015 0.044l0.001 0.003a0.063 0.063 0 0 1 -0.021 0.036l0 0q-0.021 0.023 -0.021 0.029a0.018 0.018 0 0 0 0.003 0.009l0 0a0.28 0.28 0 0 0 0.063 0.085l0 0a0.396 0.396 0 0 0 0.091 0.062l0.002 0.001a0.028 0.028 0 0 0 0.014 0.004h0q0.009 0 0.034 -0.03t0.032 -0.03zm-0.126 0.329h0.001a0.376 0.376 0 0 0 0.153 -0.032l-0.002 0.001c0.094 -0.04 0.168 -0.113 0.207 -0.205l0.001 -0.003c0.02 -0.045 0.031 -0.096 0.031 -0.151s-0.011 -0.106 -0.032 -0.153l0.001 0.002c-0.04 -0.094 -0.113 -0.168 -0.205 -0.207l-0.003 -0.001c-0.045 -0.02 -0.096 -0.031 -0.151 -0.031s-0.106 0.011 -0.153 0.032l0.002 -0.001c-0.094 0.04 -0.168 0.113 -0.207 0.205l-0.001 0.003a0.38 0.38 0 0 0 -0.031 0.151 0.384 0.384 0 0 0 0.075 0.229l-0.001 -0.001 -0.049 0.145 0.15 -0.048a0.378 0.378 0 0 0 0.212 0.064h0.002zm0 -0.857h0.001c0.065 0 0.127 0.014 0.183 0.038L0.666 0.037c0.113 0.048 0.201 0.136 0.248 0.246l0.001 0.003c0.024 0.053 0.037 0.116 0.037 0.181s-0.014 0.128 -0.038 0.184l0.001 -0.003c-0.048 0.113 -0.136 0.201 -0.246 0.248l-0.003 0.001c-0.053 0.024 -0.115 0.037 -0.18 0.037h-0.001c-0.082 0 -0.16 -0.022 -0.227 -0.06l0.002 0.001L0 0.96l0.084 -0.251a0.46 0.46 0 0 1 -0.067 -0.24c0 -0.066 0.014 -0.128 0.038 -0.185l-0.001 0.003C0.102 0.173 0.191 0.085 0.301 0.038L0.304 0.037A0.448 0.448 0 0 1 0.484 0zh0z'/%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
	}

    .btn-contact:hover {
      background-color: #FF9933;
	  box-shadow: 0 4px 10px rgba(255, 122, 0, 0.4);

    }
.btn-default {
      padding: 12px 24px;
      background-color: #FF7A00;
      color: white;
      text-decoration: none;
      border-radius: 30px;
	  font-size:1rem;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      gap: 8px;
	  transition: all 0.3s ease-in-out;
}
.btn-default:hover {
      background-color: #FF9933;
	  box-shadow: 0 4px 10px rgba(255, 122, 0, 0.4);
	  transform: translateY(-2px);

}



.hero .shape-1 {
	width: 600px;
    height: 600px;
    position: absolute;
    z-index: -1;
    top: -180px;
    left: -160px;
    border-radius: 60px;
    background-color: #f0f6ff;
    transform: rotate(22deg);
}
.hero .shape-2 {
    width: 500px;
    height: 500px;
    position: absolute;
	background:#CFE7EF;
    z-index: -1;
    top: 90px;
    left: -410px;
    border-radius: 45px;
    transform: rotate(36deg); 
	animation: waveMotion 2s ease-in-out infinite;
}
	
@keyframes waveMotion {
    0% {
        transform: rotate(36deg) translateY(0px);
    }
    25% {
        transform: rotate(36.5deg) translateY(-10px);
    }
    50% {
        transform: rotate(36deg) translateY(0px);
    }
    75% {
        transform: rotate(35.5deg) translateY(10px);
    }
    100% {
        transform: rotate(36deg) translateY(0px);
    }
}

.hero .shape-3-3 {
    position: absolute;
    height: 900px;
    width: 900px;
    top: -78px;
    right: -370px;
    z-index: -2;
    border-radius: 280px;
    transform: rotate(-54deg) skewX(5deg);
}
	
.hero .shape-4 {
    position: absolute;
    height: 800px;
    width: 455px;
    top: -166px;
    right: -120px;
    z-index: -1;
    border-radius: 60px;
    background-color: #3d5dc8;
    transform: skew(-7deg, 20deg); 
}
  
.hero .shape-5 {
    position: absolute;
    height: 450px;
    width: 215px;
    top: -110px;
    right: -40px;
    z-index: -1;
    border-radius: 60px;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0px 8px 20px 0px rgba(29, 101, 209, 0.3);
    transform: skew(10deg, -22deg); 
}

@keyframes Movetopbottom {
  0% {
    transform: translateZ(0); }
  to {
    transform: translate3d(0, -3%, 0); } }




/* HERO SLIDER */

.hero{
	position:relative;
	z-index:1;
	overflow: hidden;
	background:#eaeaea;
	margin-bottom:50px;
	
}
.hero-container {
		max-width: 90%;
		position: relative;
		justify-content: space-between;
		overflow: hidden;
		margin:auto;
		margin-top:100px;
		min-height:420px;
		
	}
.hero-page{
	position:relative;
	overflow: hidden;
	background:#3371ea;
	margin-bottom:60px;	
}
.blob {
	position:absolute;
	height:700px;
	top:-50px;
  aspect-ratio: 1;
  clip-path: shape(from 87.45% 45.02%,curve to 92.48% 56.45% with 90.99% 50.00%,curve to 92.05% 69.35% with 93.97% 62.91%,curve to 82.42% 77.15% with 90.14% 75.80%,curve to 71.01% 83.22% with 74.69% 78.49%,curve to 61.91% 91.53% with 67.33% 87.95%,curve to 49.74% 96.95% with 56.49% 95.12%,curve to 38.70% 91.46% with 42.99% 98.79%,curve to 25.99% 85.79% with 34.41% 84.13%,curve to 15.38% 80.54% with 17.56% 87.44%,curve to 14.30% 66.90% with 13.20% 73.65%,curve to 13.33% 55.08% with 15.41% 60.16%,curve to 11.20% 44.30% with 11.25% 50.00%,curve to 11.95% 32.32% with 11.14% 38.59%,curve to 16.84% 21.25% with 12.75% 26.06%,curve to 27.31% 15.38% with 20.92% 16.44%,curve to 38.83% 11.12% with 33.70% 14.32%,curve to 50.39% 5.23% with 43.95% 7.93%,curve to 62.85% 5.60% with 56.83% 2.53%,curve to 72.70% 14.03% with 68.88% 8.67%,curve to 79.11% 24.51% with 76.53% 19.39%,curve to 82.80% 34.84% with 81.69% 29.63%,curve to 87.45% 45.02% with 83.91% 40.04%);
background:#3b79f3;
}

.blob2 {
	position:absolute;
	height:450px;
	top:-160px;
	right:-60px;
  aspect-ratio: 1;
  clip-path: shape(from 95.80% 42.98%,curve to 95.45% 56.92% with 93.77% 50.00%,curve to 92.32% 68.97% with 97.13% 63.84%,curve to 80.60% 75.73% with 87.51% 74.11%,curve to 71.51% 84.84% with 73.70% 77.35%,curve to 62.37% 90.00% with 69.33% 92.33%,curve to 50.14% 86.68% with 55.42% 87.68%,curve to 37.34% 89.95% with 44.87% 85.68%,curve to 23.95% 90.52% with 29.80% 94.23%,curve to 13.98% 81.30% with 18.11% 86.80%,curve to 8.29% 69.25% with 9.86% 75.80%,curve to 7.02% 56.35% with 6.73% 62.70%,curve to 10.15% 44.57% with 7.31% 50.00%,curve to 12.08% 32.09% with 12.99% 39.13%,curve to 16.41% 21.17% with 11.16% 25.04%,curve to 28.42% 17.41% with 21.67% 17.30%,curve to 39.52% 12.43% with 35.17% 17.52%,curve to 49.66% 9.73% with 43.87% 7.33%,curve to 62.44% 9.78% with 55.45% 12.12%,curve to 72.19% 14.33% with 69.44% 7.43%,curve to 83.03% 22.40% with 74.94% 21.22%,curve to 94.47% 29.76% with 91.12% 23.57%,curve to 95.80% 42.98% with 97.82% 35.96%);
background:#ffa500;
}

.hero-container-page {
		max-width: 90%;
		position: relative;
		justify-content: space-between;
		overflow: hidden;
		margin:auto;
		margin-top:120px;
		text-align: center;
		
}
.hero-container-page h1{
		color:#dedede;
		font-weight:500;
		font-size:1.8rem;
		line-height:1;
}
		
	
	.hero .shape-4 {
		height:400px;
		width:400px;
		position: absolute;
		z-index: -1;
		right:-280px;
		top:30px;
		border-radius: 50px;
		background-color: #3d5dc8;
		transform: skew(-15deg, 20deg); 
		display:block;
	}
	.hero-text{
		width:75%;
		position:absolute;
		margin-top:25px;
				font-size:1rem;
	}
	.hero-text h1{
		font-size:1.2rem;
		line-height: 1.2;
		animation: slideInFromLeft 0.8s ease-out forwards;opacity: 0;
	}
	.hero-text p{
		margin-top:35px;
		width:90%;
		line-height: 1.2;
		font-size:1rem;
		animation: slideInFromBottom 0.8s ease-out forwards;opacity: 0;
	}
	
	.hero-image{
		float:right;
		width:50%;
		text-align:right;
	}
	.hero img{
		right:0;
		display:block;
		animation: slideInFromRight 1.2s ease forwards; opacity: 0;
		width:100%;
		z-index:-1;
	}
	
/* ====== Breadcrumb ====== */
.breadcrumb ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
}

.breadcrumb li {
  color: #fff;
  display: flex;
  align-items: center;
}

.breadcrumb li + li::before {
  content: "›";
  color: #ddd;
  margin: 0 8px;
}

.breadcrumb a {
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  transition: opacity 0.3s;
}

.breadcrumb a:hover {
  opacity: 0.8;
}

.breadcrumb .active {
  color: #ffd700;
  font-weight: 600;
}

/* Responsif */
@media (max-width: 768px) {
  .page-header {
    padding: 40px 15px;
  }

  .page-header-content h1 {
    font-size: 1.6rem;
  }

  .breadcrumb ul {
    flex-wrap: wrap;
    font-size: 0.9rem;
  }
}

/* SECTION SLIDER SERVICES */
.slider-wrapper {
	width: 100%;
	margin:auto;
	overflow: hidden;
	margin-bottom:50px;
}

.slider-track { margin-left:-10px;margin-right:-10px;display: flex; touch-action: pan-y; transition: transform 1s ease; }
.slide {padding:10px;flex: 0 0 100%; }

.colorBox {
	background: #fff;
	box-shadow:5px;
	border-radius: 10px;
	display: flex;
	padding:20px;
	cursor:grab;
	text-align:left;
	align-items: flex-start;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	border:1px solid #c3d2f2;
	transition: all 0.5s ease-in-out;
}

.services-icon{ float:left; margin-right:10px;border-radius:50px 50px 50px 50px;}
.services-title{ float:left; }
.services-title h2{ margin:0px; font-size:20px; line-height: 1.5; color:#10101; }

@media (min-width: 600px) {
  .slide {
    flex: 0 0 50%; /* 2 kolom */
  }
}

@media (min-width: 900px) {
  .slide {
    flex: 0 0 33.3333%; /* 3 kolom */
  }
}
/* SECIION SLIDER SERVICES SELESAI */

.hide-mobile{
	display:none;
}

.box-list{
	position:relative;
	padding-left:0px;
	overflow: hidden;
	z-index:1;
	overflow: hidden;
}

.box-list h2{
	text-align:center;
	font-size:1.5rem;
	line-height: 1.1;
	padding-bottom:30px;
}
.list-ul{
	list-style-type: none;
	padding-top:30px;
}

.list-ul li {
  position: relative;
  padding-left: 36px; /* ruang untuk SVG */
  margin-bottom: 8px;
  

}

.list-ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-image: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" r="13" stroke="%23013c8a" stroke-width="2" fill="white"/><path d="M8.5 14.5L12.5 18.5L19.5 10.5" stroke="%23013c8a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

.section-title {
    font-size: 2.5rem;
    color: #0073e6;
	line-height:1.3;
}

.post-page-content{
	padding-top:40px;
}
.post-title h1{
		font-weight:500;
		font-size:1.8rem;
		line-height:1.3;
}
/* LAYANAN KAMI */
.package-section {
      max-width: 1200px;
      margin: 60px auto;
      padding: 0 20px;
      text-align: center;
    }

    

    .packages-container {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
	  padding-top:30px;
    }

    @media (min-width: 600px) {
      .packages-container {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .packages-container {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .package-card {
		position:relative;
      border: 1px solid #ddd;
	  border-top:5px solid #FF7A00;
      border-radius: 12px;
      padding: 25px 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .package-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
      border-color: #FF7A00;
    }

    .package-title {
      font-size: 1.2rem;
      font-weight: 500;
      color: #0073e6;
      margin-bottom: 30px;
	  padding: 10px 20px;
	  border-radius:8px;
    }

    .package-price {
      font-size: 1.1rem;
      color: #333;
      margin-bottom: 20px;
    }

    .package-price strong {
      font-size: 1.2rem;
      color: #111;
    }

    .features {
      list-style: none;
      text-align: left;
      padding: 0;
      margin-bottom: 20px;
    }

    .features li {
      font-size: 1rem;
      padding: 8px 0;
      border-bottom: 1px solid #eee;
    }

    .features li::before {
      content: "✔ ";
      color: #28a745;
    }

    .btn-card {
		position: relative;
      display: inline-block;
      margin-top: 10px;
      padding: 10px 25px;
      font-size: 15px;
      font-weight: 600;
      text-transform: uppercase;
      color: #333;
	  border:2px solid #FF7A00;
      border-radius: 10px;
      text-decoration: none;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
      transition: background 0.3s ease;
    }

    .btn-card:hover {
      background: #FF9933;
	   color: #fff;
	   border:none;
    }

/* ===== HERO-STYLE UMKM ===== */
.hero-style-umkm {
  min-height: 70vh;
  background: linear-gradient(135deg, #0056D2 0%, #009FFF 50%, #FF7A00 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  margin: 80px 0;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);

}

.hero-style-umkm h2 {
  letter-spacing: 1px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.hero-style-umkm p {
  color: rgba(255,255,255,0.95);
  max-width: 680px;
  margin: 0 auto 2rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Tombol CTA */
.btn-cta {
  background-color: #FF7A00;
  color: #fff;
  font-weight: 600;
  border-radius: 50px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-cta:hover {
  background-color: #e86e00;
  box-shadow: 0 0 15px rgba(255, 122, 0, 0.5);
  transform: scale(1.05);
}

.btn-outline-light {
  border-radius: 50px;
  border-width: 2px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-outline-light:hover {
  background: #fff;
  color: #0056D2;
  transform: scale(1.05);
}

/* Latar belakang dekoratif */
.hero-style-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 80%, rgba(255,255,255,0.15), transparent 70%),
              radial-gradient(circle at 80% 20%, rgba(255,255,255,0.12), transparent 70%);
  z-index: 1;
  pointer-events: none;
}

/* CARD */
.card {
        display: flex;
        align-items: center;
        gap: 16px;
        background: #ffffff;
        padding: 10px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);


        transition: 0.3s ease;
		border:1px solid #dedede;
    }

    .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    }

    .card-icon {
        width: 140px;
        display: flex;
        font-size: 28px;
    }

    .card-text h3 {
        margin: 0;
        font-size: 17px;
        font-weight: 600;
    }

    .card-text p {
        margin: 6px 0 0;
        color: #555;
        line-height: 1.4;
    }

    /* Responsive Mobile */
    @media (max-width: 480px) {
        .card {
            flex-direction: column;
            text-align: center;
        }

        .card-icon {
            width: 70px;
            height: 70px;
            font-size: 32px;
        }
    }

/* =======================================================
   SECTION: DUKUNGAN UMKM INDONESIA
   ======================================================= */
.umkm-section {
  background: linear-gradient(120deg, #0073e6 0%, #E9F8FF 100%);
  padding: 100px 20px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  width:100%;
  position: relative;
  overflow: hidden;
}

.umkm-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.umkm-text {
  flex: 1 1 55%;
  z-index: 2;
}

.umkm-text h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 15px;
}

.umkm-text p {
  font-size: 1.05rem;
  color: #fff;
  line-height: 1.8;
  margin-bottom: 30px;
}

.umkm-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
.umkm-buttons a:hover{
	color:#fff;
}

/* CTA utama */
.btn-cta {
  background-color: #FF7A00;
  color: #fff;
  padding: 12px 32px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(255,122,0,0.25);
  text-transform: uppercase;
}

.btn-cta:hover {
  background-color: #e86a00;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255,122,0,0.35);
}

/* Tombol sekunder */
.btn-outline {
  border: 2px solid #014D52;
  color: #014D52;
  padding: 12px 32px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  text-transform: uppercase;
}

.btn-outline:hover {
  background-color: #014D52;
  color: #fff;
  transform: translateY(-2px);
}

/* Ilustrasi */
.umkm-illustration {
  flex: 1 1 40%;
  text-align: center;
  z-index: 1;
  margin:auto;
  max-width: 100%;
}

.umkm-illustration img  {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.umkm-illustration svg:hover {
  transform: scale(1.05);
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .umkm-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .umkm-text {
    flex: 1 1 100%;
    margin-bottom: 30px;
  }

  .umkm-illustration {
    flex: 1 1 100%;
  }

  .umkm-text h2 {
    font-size: 1.8rem;
  }

  .umkm-text p {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .umkm-section {
    padding: 70px 15px;
  }

  .umkm-text h2 {
    font-size: 1.6rem;
  }

  .umkm-buttons {
    flex-direction: column;
    align-items: center;
  }

  .btn-cta, .btn-outline {
    width: 80%;
    text-align: center;
  }
}

/* TESTIMONIAL */
.testimonial-section { position:relative;margin-top:50px;padding: 0px 0px; overflow: hidden; }

.testimonial-section h2 {
  font-size: 2.5rem;
    color: #0073e6;
  text-align: center;

  margin-bottom: 50px;
}

.testimonial-slider-container { margin: 0 auto; position: relative; }

.testimonial-nav-container {
  position: absolute;
  top: -50px;
  right: 0;
  display: flex;
  gap: 10px;
}

.testimonial-nav {
  background: white;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 22px;
  color: #ff5e00;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: 0.3s;
}

.testimonial-nav:hover {background-color: #ff5e00;color: white; }

.testimonial-slider-track {
  display: flex;
  transition: transform 0.4s ease;
  gap: 20px;
  padding-right: 20px; /* ruang untuk box terakhir */
  }

.testimonial-slide {
  flex: 0 0 calc((100% - 60px) / 4); /* 4 box dalam 100%, 3 gap x 20px */
  min-width: unset; /* atau min-width: auto; */
  background: #fff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;  
}

.testimonial-card .client-info {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.testimonial-card img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.client-details h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
  color: #0b1e39;
}

.client-details .location {
  font-size: 0.95rem;
  color: #666;
}

.client-details .stars {
  font-size: 1rem;
  color: #ffc107;
}

.testimonial-card .quote {
  font-style: italic;
  font-size: 1.07rem;
  color: #333;
  line-height: 1.6;
}

/*TESTI RESPONSIVE  */
@media (max-width: 1024px) {
  .testimonial-slide {
    flex: 0 0 calc((100% - 20px) / 2);
	min-width: unset;
  }
}

@media (max-width: 768px) {
  .testimonial-slide {
    flex: 0 0 100%;
	min-width: unset;
  }
}
@media (max-width: 575px) {
	.testimonial-section h2{
		font-size:2em;
	}
}

/* EXPERIENCE */
.experience {
	margin-top:50px;
	margin-bottom:50px;
  background-color: #f6faff;
  padding: 80px 0;
  font-family: "Poppins", sans-serif;
}

/* Kiri */
.experience-left {
  text-align: left;
}

.experience-header {
  display: flex;
  align-items: center;
  gap: 15px;
}

.experience-header .number {
  font-size: 120px;
  font-weight: 700;
  color: #ff4b00;
  line-height: 1;
}

.experience-header .years {
  font-size: 20px;
  font-weight: 500;
  color: #636363;
  width:200px;
}

.experience-subtitle {
  font-size: 42px;
  font-weight: 700;
  color: #0b132b;
  margin-top: 25px;
  line-height: 1.3;
}

/* Kanan */
.experience-right {
  width: 100%;
}

.progress-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.progress-item .label {
  flex: 0 0 150px;
  font-weight: 600;
  color: #0b132b;
}

.progress-bar {
  flex: 1;
  background: #e6ecf5;
  border-radius: 10px;
  overflow: hidden;
  height: 10px;
  margin: 0 10px;
}

.progress {
  height: 10px;
  background: linear-gradient(90deg, #3b82f6, #0ea5e9);
  border-radius: 10px;
  width: 0; /* mulai dari 0 */
  transition: width 1.8s ease-in-out;
}

.progress-item .percent {
  flex: 0 0 50px;
  text-align: right;
  font-weight: 600;
  color: #0b132b;
}



/* SECTION POSTINGAN */
.post-section {
  position: relative;
  margin-top: 50px;
  padding: 0px 0px;
  overflow: hidden;
}

.post-section h2 {
  font-size: 2.5rem;
  color: #0073e6;
  text-align: center;
  margin-bottom: 50px;
}

.post-slider-container {
  margin: 0 auto;
  position: relative;
}

.post-nav-container {
  position: absolute;
  top: -50px;
  right: 0;
  display: flex;
  gap: 10px;
}

.post-nav {
  background: white;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 22px;
  color: #ff5e00;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: 0.3s;
}

.post-nav:hover {
  background-color: #ff5e00;
  color: white;
}

.post-slider-track {
  display: flex;
  transition: transform 0.4s ease;
  gap: 20px;
  padding-right: 20px;
}

.post-slide {
  flex: 0 0 calc((100% - 40px) / 3); /* 3 kolom desktop */
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

/* Card konten */
.post-card {
  display: flex;
  flex-direction: column;
}

.post-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.post-content {
  padding: 20px;
}

.post-content h3 {
  font-size: 1.2rem;
  color: #0b1e39;
  margin-bottom: 10px;
}

.post-content p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 15px;
}

.post-content .post-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
  color: #555;
  margin: 0.4rem 0 0.8rem;
}

.post-content .post-meta span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.post-content .post-meta svg {
  width: 16px;
  height: 16px;
  fill: #0652B1; /* warna biru POGI */
}

.post-content .post-meta time {
  font-weight: 500;
}
.porto {

  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

  transition: all 0.5s ease;
}

.porto h2 {
  color: #0ff;
  font-size: 2rem;
  position: relative;
  z-index: 2;
}

.porto::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg, 
    transparent, 
    transparent 30%, 
    rgba(0,255,255,0.3)
  );
  transform: rotate(-45deg);
  transition: all 0.8s ease;
  opacity: 0;
}

.porto:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0,255,255,0.5);
}

.porto:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}


/* RESPONSIVE */
@media (max-width: 1024px) {
  .post-slide {
    flex: 0 0 calc((100% - 20px) / 2); /* 2 kolom tablet */
  }
}

@media (max-width: 768px) {
  .post-slide {
    flex: 0 0 100%; /* 1 kolom mobile */
  }
}

@media (max-width: 575px) {
  .post-section h2 {
    font-size: 2em;
  }
}


/* =======================
   ABOUT SECTION
======================= */
.about-section {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  padding: 60px 0;
  overflow: hidden;
}

.about-section-subtitle{
	font-size:1.5rem;
}

.about-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}

.about-text {
  flex: 1 1 50%;
}

.about-text h5 {
  color: #0078ff;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin-bottom: 10px;
}

.about-text p {
  color: #555;
  line-height: 1.8;
  margin-bottom: 18px;
}

.about-image {
  flex: 1 1 45%;
  position: relative;
  text-align: center;
}

.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-wrapper img {
  border-radius: 15px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  width: 100%;
}

.accent-shape {
  position: absolute;
  top: 30px;
  left: -30px;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(0,120,255,0.1), rgba(0,120,255,0.05));
  z-index: -1;
}

.about-bg-gradient {
  position: absolute;
  top: -150px;
  right: -200px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0,120,255,0.15) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 0;
}

/* =======================
   ACHIEVEMENTS SECTION
======================= */
.achievements-section {
  background: #046db8;
background: linear-gradient(147deg,rgba(4, 109, 184, 1) 0%, rgba(31, 148, 194, 1) 35%, rgba(181, 221, 230, 1) 100%);
  color: #061938;
  position: relative;
  width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; 
  padding-bottom:100px;
}

.achievements-header {
  text-align: center;
  margin-bottom: 80px;
}

.achievements-header .section-title {
  color: #fff;
}

.achievements-header .section-subtitle {
  color: #fff;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 40px;
  text-align: center;
}

.achievement-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #47e5ed;
  border-radius: 15px;
  padding: 40px 25px;
  transition: all 0.4s ease;
  backdrop-filter: blur(6px);
}

.achievement-box:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-8px);
}

.achievement-icon {
  font-size: 2.8rem;
  color: #fff;
  margin-bottom: 18px;
}

.achievement-number {
  font-size: 2.6rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;

}
.achievement-text {
  font-size: 2.6rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;

}

.achievement-box p {
  font-weight: 500;
  color: #fff;

}

/* Fade-in effect */
.fade-anim {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-anim.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 992px) {
  .about-inner { flex-direction: column-reverse; text-align: center; }
  .about-text, .about-image { flex: 1 1 100%; }
  .accent-shape { display: none; }
  .about-bg-gradient { display: none; }
}


.our-client{
	margin-top:100px;
	margin-bottom:100px;
	text-align:center;
}
.title-client{
	margin-bottom:40px;
}
.box-client{
	margin-bottom:20px;
	padding:10px;
	border:1px solid #dedede;
	border-radius:10px;
	text-align:center;
	width:150px;
	height:120px;
}
.box-client img{
	opacity:0.7;
}
.box-client img:hover{
	opacity:1;
}

.title-layanan{
	text-align:center;
	margin-top:90px;
}
.sub-title-layanan{
	text-align:center;
	margin-bottom:40px;
}
.box-kota{
	position:relative;
	text-align:center;
	overflow: hidden;
}

.city-list {
 list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  flex-wrap: wrap;   /* penting: agar turun ke baris berikutnya */
  gap: 8px;          
}

.city-list li {
    margin-bottom: 10px;
	margin-right:15px;
}

.city-list a {
    display: inline-block;
    padding: 5px 10px;
    color: #101010;
    border-radius: 6px;
    text-decoration: none;
    
}

/*section contact us */
.contact-section {
    padding: 70px 0;
}


.title {
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 50px;
}

/* ====== WRAPPER ====== */
.contact-wrapper {
    display: flex;
    gap: 40px;
}

/* ====== FORM ====== */
.contact-form {
    flex: 2;
}

.contact-form .row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
}

.contact-form textarea {
    height: 150px;
    resize: none;
    margin-bottom: 20px;
}

/* Fake captcha box */
.fake-captcha {
    width: 180px;
    border: 1px solid #ccc;
    padding: 12px;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 20px;
}

.btn-submit {
    background: #ff5722;
    padding: 14px 30px;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 600;
}

/* ====== RIGHT INFO CARD ====== */
.contact-info {
    flex: 1.2;
    background: linear-gradient(135deg, #0d6efd, #0973ff, #05b2ff);
    color: #fff;
    padding: 35px 30px;
    border-radius: 14px;
}

.contact-info h3 {
    font-size: 22px;
    margin-top: 15px;
}

.contact-info p {
    font-size: 15px;
    margin: 5px 0 15px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .contact-wrapper {
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .title {
        font-size: 35px;
    }

    .contact-form .row {
        flex-direction: column;
    }

    .btn-submit {
        width: 100%;
    }
}




/*FOOTER*/
.footer{
	position:relative;
	overflow: hidden;
	flex-wrap: wrap;
	margin-top:100px;
	background:#1457e6;
	color:#fff;
	padding-top:100px;
	font-size:1rem;
	
}
.footer img{
	position:relative;
	overflow: hidden;
}
.footer h3{
	font-size:22px;
	font-weight:400;
	padding-bottom:10px;
	position:relative;
	overflow: hidden;
}

.footer a{
	font-size:1rem;
	color:#fff;
	text-align:none;
}
.footer-menu{
	padding-right:20px;
}
.footer-menu ul{
	list-style: none;
	justify-content: center; /* tengah horizontal */
}
.footer-menu ul li{
	position: relative;
  padding-left: 20px; /* ruang untuk panah */
  margin-bottom: 8px; /* jarak antar item */
}

.footer-menu ul li::before {
   content: "▶";
  font-size: 10px;
  color: #4dabff;
  position: absolute;
  left: 0;
  top: 5px;
}

.footer-menu ul li a{
	font-size:15px;
}
.footer-address{
	position:relative;
	overflow: hidden;
	padding-top:20px;
	padding-right:20px;
	font-size:15px;
}

.footer-address ul{
	list-style: none;
	justify-content: center; /* tengah horizontal */
}
.footer-address ul li{
	margin-bottom: 8px;
}
.footer-icon{
	display: flex;
  align-items: center; /* ⬆️ Menyusun ikon & teks di tengah vertikal */
  gap: 8px;            /* 🔹 Jarak antara ikon dan teks */
  font-size: 16px;

}
.footer-icon svg{
	width: 20px;
  height: 20px;
}
.icon-sosmed{
	margin-top:50px;
	padding-bottom:50px;
}
.icon-sosmed svg{
	margin-right:5px;
}
.powered{
	position:relative;
	overflow: hidden;
	margin-top:50px;
	width:100%;
	text-align:center;
	background:#1251d9;
	padding:15px;
	font-size:15px;
}

.scroll-top-btn {
      position: fixed;
      bottom: 50px;
      right: 20px;
      background-color: #FF7A00;
      padding: 12px;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 3px 6px rgba(0,0,0,0.2);
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s ease, visibility 0.4s ease;
	  order:none;
    }
    .scroll-top-btn.show { opacity: 1; visibility: visible;border:none; }
    .scroll-top-btn:hover { background-color: #e04310; order:none;}
    .scroll-top-btn svg { width: 24px; height: 24px; }
	
	
/* ANIMASI */

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}
/*BACKGROUND ANIMATION SELESAI*/
@keyframes slideFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-250%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Skeleton hanya pada elemen dengan class skeleton */
 .skeleton {
  position: relative;
  overflow: hidden;
  background-color: #bebebe !important;
  border-radius: 6px;
  color: transparent !important;
  pointer-events: none;
}

.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  height: 100%;
  width: 50%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: shimmer 1.5s infinite;
  pointer-events: none;
}

/* Biar gambar gak muncul pas skeleton aktif */
.skeleton img,
.skeleton.skeleton-img {
  opacity: 0;
  pointer-events: none;
  
}

/* Kalau kamu langsung kasih class skeleton ke <img>, sembunyikan gambarnya */
img.skeleton {
  opacity: 0;
  pointer-events: none;
  display: block; /* supaya height bisa dikenali */
}
.skeleton svg {
  opacity: 0;
  pointer-events: none;
}

svg.skeleton {
  opacity: 0;
  pointer-events: none;
  display: block; /* supaya height bisa dikenali */
}

@keyframes shimmer {
  100% {
    left: 100%;
  }
}





/* ANIMASI SHINE */
/* Tombol dasar */
    .shine-effect-btn {
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }

    /* Efek shine dengan pseudo-element */
    .shine-effect-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -75%;
      width: 90%;
      height: 100%;
      background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
      );
      transform: skewX(-20deg);
      pointer-events: none;
    }

    /* Animasi keyframes */
    @keyframes shine-left-to-right {
      0% { left: -75%; }
      100% { left: 125%; }
    }

    @keyframes shine-right-to-left {
      0% { left: 125%; }
      100% { left: -75%; }
    }

    /* Apply animasi ke pseudo-element */
    .shine-effect-btn.shine-left-to-right::before {
      animation: shine-left-to-right 1s ease forwards;
    }

    .shine-effect-btn.shine-right-to-left::before {
      animation: shine-right-to-left 1s ease forwards;
    }
	
/* ANIMASI */
@keyframes slideInFromRight {
  0% {
	      opacity: 1;
    transform: translateX(300%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ANIMASI SELESAI */

.cloud-shape-bg3 {
	position:absolute;
    height:300px; /* control the size */
	width:600px;
    aspect-ratio: 1.8;
    --g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
    mask: var(--g) 100% 100%/30% 60%,var(--g) 70% 0/50% 100%,var(--g) 0 100%/36% 68%,var(--g) 27% 18%/26% 40%,linear-gradient(#000 0 0) bottom/67% 58% no-repeat;
    background: #dedede;
	right:0;
	top:0;
	transform: rotate(60deg); 
	opacity:0.4;
	margin-top:100px;
	margin-right:-300px;

}


.bg-footer {
	position:absolute;
    height: 500px; /* control the size */
    aspect-ratio: 1.8;
    --g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
    mask: var(--g) 100% 100%/30% 60%,var(--g) 70% 0/50% 100%,var(--g) 0 100%/36% 68%,var(--g) 27% 18%/26% 40%,linear-gradient(#000 0 0) bottom/67% 58% no-repeat;
    transform: rotate(0deg);
	background: #185df0;
	right:0;
	margin-right:-220px;
}

.bg-footer2 {
	position:absolute;
    height: 300px; /* control the size */
    aspect-ratio: 1.8;
    --g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
    mask: var(--g) 100% 100%/30% 60%,var(--g) 70% 0/50% 100%,var(--g) 0 100%/36% 68%,var(--g) 27% 18%/26% 40%,linear-gradient(#000 0 0) bottom/67% 58% no-repeat;
    transform: rotate(120deg);
	background: #467bed;
	top:0;
	margin-left:-200px;
}

.bg-footer3 {
	position:absolute;
    height: 290px; /* control the size */
    aspect-ratio: 1.8;
    --g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
    mask: var(--g) 100% 100%/30% 60%,var(--g) 70% 0/50% 100%,var(--g) 0 100%/36% 68%,var(--g) 27% 18%/26% 40%,linear-gradient(#000 0 0) bottom/67% 58% no-repeat;
    transform: rotate(120deg);
	background: #185df0;
	top:0;
	margin-left:-200px;
	
}

/* HTML: <div class="hexagon"></div> */
.hexagon-bg {
	position:absolute;
  --b: 8px; /* adjust to control the border  */
  height: 250px; /* adjust to control the size  */
  aspect-ratio: 1/cos(30deg);
  clip-path: 
    polygon(0 50%,50% -50%,100% 50%,50% 150%,0 50%,
    var(--b) 50%,
    calc(25% + var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
    calc(75% - var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
    calc(100% - var(--b)) 50%,
    calc(75% - var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
    calc(25% + var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
    var(--b) 50%);
	transform: rotate(40deg);
  background: #467bed;
  top:0;
  margin-top:-60px;
  margin-left:-30px;
}

.hexagon-bg2 {
	position:absolute;
  --b: 8px; /* adjust to control the border  */
  height: 200px; /* adjust to control the size  */
  aspect-ratio: 1/cos(30deg);
  clip-path: 
    polygon(0 50%,50% -50%,100% 50%,50% 150%,0 50%,
    var(--b) 50%,
    calc(25% + var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
    calc(75% - var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
    calc(100% - var(--b)) 50%,
    calc(75% - var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
    calc(25% + var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
    var(--b) 50%);
	transform: rotate(40deg);
  background: #467bed;
  right:0;
  margin-right:-80px;

}
.hexagon-bg3 {
	position:absolute;
  --b: 5px; /* adjust to control the border  */
  height: 100px; /* adjust to control the size  */
  aspect-ratio: 1/cos(30deg);
  clip-path: 
    polygon(0 50%,50% -50%,100% 50%,50% 150%,0 50%,
    var(--b) 50%,
    calc(25% + var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
    calc(75% - var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
    calc(100% - var(--b)) 50%,
    calc(75% - var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
    calc(25% + var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
    var(--b) 50%);
	transform: rotate(40deg);
  background: #376bdb;
  right:0;
  bottom:0;
  margin-right:-50px;
   margin-bottom:100px;

}

.hexagon-bg4 {
	position:absolute;
  --b: 5px; /* adjust to control the border  */
  height: 200px; /* adjust to control the size  */
  aspect-ratio: 1/cos(30deg);
  clip-path: 
    polygon(0 50%,50% -50%,100% 50%,50% 150%,0 50%,
    var(--b) 50%,
    calc(25% + var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
    calc(75% - var(--b)*cos(60deg)) calc(100% - var(--b)*sin(60deg)),
    calc(100% - var(--b)) 50%,
    calc(75% - var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
    calc(25% + var(--b)*cos(60deg)) calc(var(--b)*sin(60deg)),
    var(--b) 50%);
	transform: rotate(40deg);
  background: #376bdb;
  bottom:-10%;
 left:30%;

}