@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
            :root {
                --navy: #20205b;
                --blue: #0874c9;
                --cyan: #16a9b8;
                --yellow: #ffd31a;
                --light: #f7f8fa
            }

            * {
                box-sizing: border-box
            }

            body {
				font-family: "Roboto", sans-serif;
                margin: 0;
                color: var(--navy);
                background: #fff
            }

            
            .navbar {
                height: 82px;
                background: rgba(255, 255, 255, .96)
            }

            .brand-logo {
                width: 105px;
                height: auto
            }

            .nav-link {
               
                color: #20205b !important;
                margin: 0 8px
            }

            .nav-link.active {
                background: var(--yellow);
                border-radius: 0 0 10px 10px;
                padding: 24px 22px !important
            }

            .hero {
                position: relative;
                min-height: 535px;
                overflow: hidden;
                background: linear-gradient(135deg, #fff 0 57%, #f6f9fb 57%)
            }

            .hero:before {
                content: "";
                position: absolute;
                inset: 0;
                background-image: linear-gradient(120deg, transparent 49%, rgba(28, 32, 91, .045) 49.2%, transparent 49.4%);
                background-size: 100px 100px;
                opacity: .45
            }

            .hero-photo {
                position: absolute;
                right: 10px;
                top: 0;
                width: 60%;
                height: 600px;
                background: url('assets/hero.png') bottom/cover no-repeat;
                /*clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%)*/
            }

            .hero-content {
                position: relative;
                z-index: 2;
                padding: 20px 0 30px
            }

            .hero-title {
                font-weight: 900;
                font-style: italic;
                font-size: 64px;
                line-height: .88;
                letter-spacing: -3px;
                margin: 20px 0;
                color: #17205d
            }

            .hero-title span {
                display: block;
                color: #087bc5
            }

            .hero-sub {
                font-size: 20px;
                font-weight: 700;
                line-height: 1.2;
                max-width: 490px;
                margin-top: 28px
            }

            .hero-sub .cyan {
                color: #13a5b1
            }

            .hero-desc {
                line-height: 1.4;
                max-width: 380px;
                margin: 15px 0 20px
            }

            .btn-pill {
                border-radius: 30px;
                padding: 9px 17px;
                
                font-weight: 700
            }

            .btn-primary {
                background: #0876cf;
                border-color: #0876cf
            }

            .btn-outline {
                border: 1px solid #1267a7;
                color: #17205d;
                background: #fff
            }
			.badge-blue {
  background: linear-gradient(135deg, #0052cc 0%, #007bff 50%, #0040a8 100%);
  border-top-right-radius: 2rem !important;
  border-bottom-right-radius: 2rem !important;
}

/* Penyesuaian Border Banner */
.stat-banner {
  border-color: #007bff !important;
  border-width: 1.5px !important;
}

            .statbar {
                position: relative;
                z-index: 5;
                margin-top: -2px
            }

            .stats {
                display: grid;
                grid-template-columns: 1.15fr 1.2fr 1.2fr 1.2fr;
                border: 1px solid #0b69b6;
                border-radius: 22px;
                overflow: hidden;
                background: #fff;
                box-shadow: 0 3px 9px rgba(0, 0, 0, .08)
            }

            .stat {
                padding: 13px 16px;
                display: flex;
                align-items: center;
                gap: 9px;
                
            }

            .stat:first-child {
                color: #fff
            }

            .stat strong {
                display: block;
                font-size: 21px;
                line-height: 1
            }

            .stat small {
                
            }

            .section {
                padding: 36px 0
            }

            .eyebrow {
               
                letter-spacing: 3px;
                font-weight: 800;
                color: #16a7b3;
                text-align: center
            }

            .section-title {
                text-align: center;
                font-size: 22px;
                font-weight: 800;
                margin: 5px 0
            }

            .section-title .cyan {
                color: #0ea7b2
            }

            .section-desc {
                text-align: center;
                
                color: #333;
                max-width: 570px;
                margin: 0 auto 22px
            }

            .brush {
                position: absolute;
                left: 0;
                width: 380px;
                height: 380px;
                background: url('assets/kiri.png') ;
                background-repeat: no-repeat;
				background-position: left center;
				background-size: contain;
				z-index: 0; /* Menempatkan brush di lapisan belakang */
				pointer-events: none; /* Mencegah brush menghalangi klik pada teks/tombol */
            }
			#services .container {
    position: relative;
    z-index: 1; /* Memaksa isi teks & kartu berada di depan brush */
}

            .service-card {
                border: 1px solid #ddd;
                border-radius: 9px;
                overflow: hidden;
                background: #fff;
                box-shadow: 0 3px 8px rgba(0, 0, 0, .06);
                height: 100%
            }

            .service-img {
                height: 145px;
                background-size: cover;
                background-position: center
            }

            .service-body {
                padding: 13px
            }

            .service-icon {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background: #0c86d9;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: -35px;
                position: relative;
                border: 3px solid #fff;
                font-size: 17px
            }

            .service-card:nth-child(2) .service-icon {
                background: #39cfa5
            }

            .service-card:nth-child(3) .service-icon {
                background: #258be0
            }

            .service-card:nth-child(4) .service-icon {
                background: #2dcf9b
            }

            .service-card h3 {
                font-size: 15px;
                margin: 10px 0 8px;
                color: #111
            }

            .service-card p {
                
                line-height: 1.45;
                color: #333;
                min-height: 55px
            }

            .more {
                
                color: #86b800;
                font-weight: 700;
				text-decoration:none;
            }

            .portfolio-tabs {
                text-align: center;
                margin-bottom: 14px
            }

            .portfolio-tabs .btn {
               
                border-radius: 18px;
                margin: 0 3px;
                padding: 7px 16px;
                border-color: #0b6bb3;
                color: #143066
            }

            .portfolio-card {
                border: 1px solid #ddd;
                border-radius: 5px;
                overflow: hidden;
                background: #fff;
                height: 100%
            }

            .portfolio-img {
                height: 92px;
                background-size: cover;
                background-position: center
            }

            .portfolio-body {
                padding: 8px 9px
            }
			.portotitle{
				font-size:18px;
				font-weight:bold;
			}

            .portfolio-body h5 {
                color: #159bb0;
                margin: 0 0 5px
				
            }

            .portfolio-body p {
                
                color: #333;
                margin: 2px 0
            }

            .clients-strip {
                border-top: 1px solid #ddd;
                border-bottom: 1px solid #ddd;
                padding: 25px 0
            }

            .clients-img {
                width: 100%;
                height: 65px;
                object-fit: cover;
                object-position: center
            }

            .about {
                background: #f0f1f2;
                padding: 40px 0
            }

            .about-copy h2 {
                font-size: 23px;
                margin: 6px 0 10px
            }

            .about-copy p {
                
                line-height: 1.5;
                color: #222;
                max-width: 390px
            }

            .office {
                height: 300px;
                background: url('assets/profile.png') top/cover no-repeat;
                position: relative
            }

           .cta {
			  /* Gunakan min-height agar background fleksibel menyelimuti konten jika teks memanjang */
			  min-height: 145px;
			  height: auto; 
			  
			  /* Pengaturan background agar menutupi seluruh area */
			  background: #0878d0 url('assets/bawahbiru.png') center/cover no-repeat;
			  color: #fff;
			  
			  /* Memastikan tata letak responsif */
			  display: flex;
			  align-items: center;
			}

			.cta h2 {
			  font-size: 20px;
			  font-weight: 800;
			  line-height: 1.3;
			}

			.cta p {
			  font-size: 14px;
			  opacity: 0.9;
			}

			/* Opsional: Membuat tombol melebar penuh di layar HP agar lebih rapi */
			@media (max-width: 767.98px) {
			  .cta .btn {
				width: 100%;
				text-align: center;
			  }
			}

            .footer {
                padding: 25px 0;
                background: #f8f9fa
            }

            .footer-logo {
                
            }

            .footer h6 {
                
                color: #10a5b1;
                text-transform: uppercase
            }

            .footer a,
            .footer p,
            .footer li {
                
                color: #20205b;
                text-decoration: none;
                line-height: 1.6
            }

            .footer ul {
                list-style: none;
                padding: 0;
                margin: 0
            }

            .footer-bottom {
                font-size: 12px;
                text-align: center;
                border-top: 1px solid #ddd;
                padding-top: 12px;
                margin-top: 20px
            }

            @media(max-width:767px) {
                .navbar {
                    height: auto
                }

                .nav-link.active {
                    padding: 10px 15px !important;
                    border-radius: 18px
                }

                .hero {
                    min-height: 750px
                }

                .hero-photo {
                    width: 100%;
                    height: 340px;
                    top: auto;
                    bottom: 0;
                    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%)
                }

                .hero-content {
                    padding: 30px 20px
                }

                .hero-title {
                    font-size: 48px
                }

                .hero-sub {
                    font-size: 17px
                }

                .stats {
                    grid-template-columns: 1fr 1fr
                }

                .stat {
                    padding: 10px
                }

                .service-img {
                    height: 160px
                }

                .office {
                    height: 240px
                }

                .container {
                    max-width: 94%
                }
            }
			.footerlist{
				border-left:solid 1px #dadada;
				font-weight:bold;
				font-size:13px;
			}
			.footerlist li {
				font-weight:bold;
			}
			
			.custom-card {
      border: 1px solid #e5e5e5;
      border-radius: 12px;
      overflow: hidden;
     
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }

    .card-img-wrapper {
      position: relative;
      height: 160px;
    }

    .card-img-wrapper .postphoto {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Icon Lingkaran */
    .icon-badge {
      position: absolute;
      bottom: -24px;
      left: 20px;
      width: 48px;
      height: 48px;
      background-color: #0088dc;
      border: 3px solid #ffffff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .card-body-custom {
      padding: 36px 20px 20px 20px;
    }

    .card-title-custom {
      font-size: 1.1rem;
      font-weight: 700;
      color: #0b2545;
      margin-bottom: 10px;
    }

    .card-text-custom {
      font-size: 0.95rem;
      color: #4a5568;
      line-height: 1.5;
      margin-bottom: 20px;
    }

    .card-link-custom {
      color: #8cc63f;
      font-weight: 600;
      text-decoration: none;
      font-size: 0.95rem;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .card-link-custom:hover {
      color: #7ab332;
    }
	
	.brand-card {
      background-color: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
      
      /* 1. Kunci tinggi kartu agar semua seragam */
      height: 100px; 
      
      /* 2. Beri padding aman */
      padding: 12px 20px;
      
      /* 3. Posisi logo tepat di tengah */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .brand-logo {
      /* 4. Kunci batas tinggi logo agar tidak merusak kartu */
      max-height: 100%;
      max-width: 100%;
      object-fit: contain; /* Menjaga proporsi logo agar tidak terdistorsi */
    }