   <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

        * {
            font-family: "Inter";
        }

        .main-wrapper {
            display: flex;
            flex-direction: column;
        }

        .page-container {
            background-color: #fff;
            display: flex;
            width: 100%;
            flex-direction: column;
            overflow: hidden;
            padding: 32px 0 0px;
        }

        .header-section {
            align-self: center;
            display: flex;
            margin-left: 33px;
            width: 100%;
            max-width: 1265px;
            flex-direction: column;
            font-family: Inter, sans-serif;
            padding: 1px 0;
        }

        .nav-container {
            display: flex;
            width: 100%;
            max-width: 1200px;
            gap: 20px;
            font-size: 16px;
            color: #fff;
            font-weight: 600;
            line-height: 1;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .logo {
            aspect-ratio: 2.54;
            object-fit: contain;
            object-position: center;
            width: 122px;
            max-width: 100%;
            margin: auto 0;
        }

        .contact-button {
            border-radius: 8px;
            background-color: #ffffff;
            /* box-shadow: 0 24px 30px -16px rgba(16, 56, 206, 0.25); */
            padding: 20px;
            color: #0A5193;
            font-weight: 600;
            border: 1px solid #0A5193;
        }

        .hero-content {
            z-index: 10;
            display: flex;
            margin-top: 67px;
            align-items: flex-end;
            gap: 34px;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .hero-text {
            display: flex;
            min-width: 240px;
            flex-direction: column;
            justify-content: flex-start;
            width: 530px;
        }

        .hero-title {
            color: #505050;
            font-size: 40px;
            font-weight: 700;
            line-height: 52px;
        }

        .hero-description {
            color: var(--Neutral-800, #4b505e);
            font-feature-settings: "liga" off;
            font-size: 20px;
            font-weight: 400;
            margin-top: 20px;
        }

        .cta-wrapper {
            display: flex;
            margin-top: 20px;
            width: 198px;
            max-width: 100%;
            flex-direction: column;
            font-size: 16px;
            color: #fff;
            font-weight: 600;
            line-height: 1;
        }

        .cta-button {
            border-radius: 8px;
            background-color: #0a5193;
            box-shadow: 0 24px 30px -16px rgba(16, 56, 206, 0.25);
            padding: 20px;
            color: #FFF;
        }

        .hero-image {
            aspect-ratio: 2.36;
            object-fit: contain;
            object-position: center;
            width: 701px;
            min-width: 240px;
        }

        .decorative-shape {
            border-radius: 18px 5px 10px 5px;
            background-color: #e2ecff;
            align-self: flex-end;
            display: flex;
            width: 261px;
            height: 256px;
            aspect-ratio: 1;
            margin: -257px 143px 0 0;
        }

        .clients-section {
            display: flex;
            margin-top: 100px;
            width: 100%;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 0;
        }

        .clients-header {
            display: flex;
            width: 1110px;
            max-width: 100%;
            flex-direction: column;
            font-family: Inter, sans-serif;
            text-align: center;
            justify-content: flex-start;
        }

        .clients-title {
            color: var(--Neutral-D_Grey, #4d4d4d);
            font-size: 36px;
            font-weight: 600;
            line-height: 1;
        }

        .clients-description {
            color: var(--Neutral-Grey, #717171);
            font-size: 16px;
            font-weight: 400;
            margin-top: 8px;
        }

        .logo-grid {
            display: flex;
            margin-top: 20px;
            height: fit-content;
            max-width: 100%;
            width: 1201px;
            align-items: flex-start;
            gap: 32px 15px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .client-logo {
            aspect-ratio: 2.5;
            object-fit: contain;
            object-position: center;
            width: 140px;
        }

        .features-section {
            display: flex;
            margin-top: 100px;
            width: 100%;
            flex-direction: column;
            font-family: Inter, sans-serif;
            text-align: center;
            justify-content: flex-start;
        }

        .features-header {
            display: flex;
            width: 100%;
            flex-direction: column;
            justify-content: flex-start;
        }

        .features-subtitle {
            color: var(--Neutral-Grey, #717171);
            font-size: 16px;
            font-weight: 400;
        }

        .features-title {
            color: var(--Neutral-D_Grey, #4d4d4d);
            font-size: 36px;
            font-weight: 600;
            line-height: 44px;
            align-self: center;
            margin-top: 8px;
            width: 542px;
        }

        .features-grid {
            display: flex;
            margin-top: 20px;
            width: 100%;
            align-items: center;
            gap: 40px 100px;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 0;
        }

        .feature-card {
            align-items: center;
            border-radius: 8px;
            background: var(--Neutral-White, #fff);
            align-self: stretch;
            display: flex;
            min-width: 240px;
            flex-direction: column;
            justify-content: flex-start;
            width: 299px;
            margin: auto 0;
            padding: 24px 16px;
        }

        .feature-content {
            display: flex;
            max-width: 100%;
            width: 267px;
            flex-direction: column;
            align-items: center;
            font-size: 20px;
            color: var(--Neutral-D_Grey, #4d4d4d);
            font-weight: 700;
            line-height: 36px;
            justify-content: flex-start;
        }

        .feature-icon {
            aspect-ratio: 1.16;
            object-fit: contain;
            object-position: center;
            width: 65px;
        }

        .feature-title {
            margin-top: 16px;
            font-size: 20px;
            font-weight: 700;
        }

        .feature-description {
            width: 251px;
            margin-top: 8px;
            max-width: 100%;
            gap: 8px;
            font-size: 14px;
            color: var(--Neutral-Grey, #717171);
            font-weight: 400;
            line-height: 20px;
        }

        @media (max-width: 991px) {
            .features-grid {
                justify-content: center;
            }

            .page-container {
                max-width: 100%;
            }

            .header-section {
                max-width: 100%;
                margin-left: 0px;
                padding: 0px 32px;
            }

            .nav-container {
                max-width: 100%;
            }

            .contact-button {
                padding: 0 20px;
            }

            .hero-content {
                max-width: 100%;
                margin-top: 40px;
            }

            .hero-text {
                max-width: 100%;
                margin-bottom: 100px;
            }

            .hero-title {
                max-width: 100%;
            }

            .hero-description {
                max-width: 100%;
            }

            .hero-image {
                max-width: 100%;
            }

            .decorative-shape {
                margin: -200px 10px 0 0;
            }

            .clients-section {
                max-width: 100%;
                margin-top: 40px;
                padding: 0 20px;
            }

            .clients-title {
                max-width: 100%;
            }

            .clients-description {
                max-width: 100%;
            }

            .features-section {
                max-width: 100%;
                margin-top: 40px;
            }

            .features-subtitle {
                max-width: 100%;
            }

            .features-title {
                max-width: 100%;
            }

            .features-grid {
                max-width: 100%;
                padding: 0 20px;
            }

            .solution-card {
                width: 100%;
                max-width: 100%;
                margin: auto;
            }
        }

        .services-container {
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
        }

        .services-section {
            background-color: #fff;
            display: flex;
            width: 100%;
            flex-direction: column;
            overflow: hidden;
            align-items: center;
            justify-content: center;
            padding: 50px 80px;
        }

        .services-wrapper {
            display: flex;
            width: 100%;
            max-width: 1200px;
            flex-direction: column;
        }

        .services-header {
            display: flex;
            width: 100%;
            flex-direction: column;
            justify-content: start;
        }

        .services-title-wrapper {
            align-self: center;
            display: flex;
            width: 972px;
            max-width: 100%;
            flex-direction: column;
            align-items: center;
            font-family: Inter, sans-serif;
            text-align: center;
        }

        .services-title {
            color: var(--Neutral-D_Grey, #4d4d4d);
            font-size: 36px;
            font-weight: 600;
            line-height: 1;
        }

        .services-description {
            color: #6b6b6b;
            font-size: 18px;
            font-weight: 500;
            line-height: 29px;
            margin-top: 8px;
        }

        .services-grid {
            display: flex;
            margin-top: 40px;
            width: 100%;
            gap: 20px;
            justify-content: start;
            flex-wrap: wrap;
        }

        .service-card {
            border-radius: 16px;
            background: #fff;
            box-shadow: 0px -2px 12px rgba(0, 0, 0, 0.05),
                0px 4px 6px -2px rgba(16, 24, 40, 0.02);
            display: flex;
            min-width: 240px;
            min-height: 345px;
            width: 100%;
            flex-direction: column;
            justify-content: start;
            flex: 1;
            flex-basis: 0%;
            padding: 15px 12px;
        }

        .service-image-wrapper {
            display: flex;
            width: 100%;
            flex-direction: column;
            overflow: hidden;
        }

        .service-image {
            aspect-ratio: 1.17;
            object-fit: contain;
            object-position: center;
            width: 100%;
            border-radius: 16px;
        }

        .service-content {
            display: flex;
            margin-top: 16px;
            width: 100%;
            flex-direction: column;
            font-family: Inter, sans-serif;
        }

        .service-heading {
            color: #000;
            font-size: 20px;
            font-weight: 600;
            line-height: 1.4;
        }

        .service-text {
            color: var(--color-dark-blue-500, #556472);
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            margin-top: 8px;
        }

        .solutions-section {
            display: flex;
            margin-top: 70px;
            width: 100%;
            flex-direction: column;
            font-family: Inter, sans-serif;
        }

        .solutions-header {
            align-self: center;
            display: flex;
            width: 972px;
            max-width: 100%;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .solutions-title {
            color: var(--Neutral-D_Grey, #4d4d4d);
            font-size: 36px;
            font-weight: 600;
            line-height: 44px;
            width: 604px;
        }

        .solutions-description {
            color: #6b6b6b;
            font-size: 18px;
            font-weight: 500;
            line-height: 29px;
            margin-top: 8px;
        }

        .solutions-grid {
            display: flex;
            margin-top: 40px;
            width: 100%;
            align-items: start;
            gap: 40px;
            font-weight: 500;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .solution-card {
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
            background-color: #fff;
            display: flex;
            min-width: 240px;
            flex-direction: column;
            overflow: hidden;
            width: 48%;
            padding: 100px 0;
        }

        .solution-image {
            aspect-ratio: 2.98;
            object-fit: contain;
            object-position: center;
            width: 649px;
            max-width: 100%;
        }

        .solution-content {
            display: flex;
            margin-top: 80px;
            width: 500px;
            max-width: 100%;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .solution-heading {
            color: #232933;
            font-size: 32px;
            line-height: 36px;
        }

        .solution-text {
            color: var(--Neutral-800, #4b505e);
            font-feature-settings: "liga" off;
            font-size: 20px;
            line-height: 28px;
            margin-top: 24px;
        }

        @media (max-width: 991px) {
            .services-section {
                max-width: 100%;
                padding: 0 20px;
            }

            .services-wrapper {
                max-width: 100%;
            }

            .services-header {
                max-width: 100%;
            }

            .services-title {
                max-width: 100%;
            }

            .services-description {
                max-width: 100%;
            }

            .services-grid {
                max-width: 100%;
            }

            .solutions-section {
                max-width: 100%;
                margin-top: 40px;
            }

            .solutions-title {
                max-width: 100%;
            }

            .solutions-description {
                max-width: 100%;
            }

            .solutions-grid {
                max-width: 100%;
            }

            .solution-card {
                max-width: 100%;
                width: 100%;
                margin: auto;
                padding: 24px;
            }

            .solution-content {
                margin-top: 40px;
            }
        }

        .tech-section {
            background: #fff; 
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .tech-container {
            align-self: center;
            display: flex;
            min-height: 629px;
            width: 100%;
            max-width: 1200px;
            flex-direction: column;
        }

        .tech-header {
            display: flex;
            width: 100%;
            align-items: flex-start;
            gap: 19px;
            font-family: Inter, sans-serif;
            justify-content: center;
            flex-wrap: wrap;
        }

        .tech-title {
            color: var(--Neutral-D_Grey, #4d4d4d);
            font-size: 36px;
            font-weight: 600;
            line-height: 44px;
            width: 580px;
        }

        .tech-description {
            color: #6b6b6b;
            font-size: 18px;
            font-weight: 500;
            line-height: 29px;
            flex: 1;
        }

        .tech-cards-container {
            display: flex;
            margin-top: 40px;
            width: 100%;
            align-items: flex-start;
            gap: 38px;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .tech-card {
            border-radius: 24px;
            background: #fff;
            border: 1px solid #e0e0e0;
            padding: 42px 20px;
            display: flex;
            min-width: 240px;
            min-height: 232px;
            align-items: center;
            gap: 40px 78px;
            justify-content: flex-start;
            flex-grow: 1;
            width: 464px;
        }

        .tech-card-content {
            align-self: stretch;
            display: flex;
            min-width: 240px;
            width: 100%;
            flex-direction: column;
            justify-content: flex-start;
            flex: 1;
        }

        .tech-card-title {
            width: 100%;
            font-size: 20px;
            color: #0a5193;
            font-weight: 600;
            line-height: 1.4;
            font-family: Inter, sans-serif;
        }

        .tech-card-description {
            color: #717171;
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
            margin-top: 16px;
            font-family: Inter, sans-serif;
        }

        .tech-card-images {
            display: flex;
            margin-top: 32px;
            align-items: center;
            gap: 20px;
            justify-content: center;
        }

        .tech-image-grid {
            align-self: stretch;
            display: flex;
            min-width: 240px;
            align-items: center;
            gap: 20px;
            justify-content: center;
            margin: auto 0;
            flex-wrap: wrap;
            /* Membuat elemen turun ke baris berikutnya */

        }

        .tech-image {
            object-fit: contain;
            object-position: center;
            width: 60px;
        }

        .tech-image-grid-small img {
            width: 37px;
        }

        .cloud-section {
            align-self: center;
            display: flex;
            margin-top: 100px;
            /* height: 365px; */
            align-items: center;
            gap: 40px 108px;
            font-family: Inter, sans-serif;
            font-weight: 600;
            justify-content: flex-start;
            flex-wrap: wrap;
            padding: 32px;
        }

        .cloud-image {
            aspect-ratio: 1.41;
            object-fit: contain;
            object-position: center;
            width: 515px;
            align-self: stretch;
            min-width: 240px;
            margin: auto 0;
        }

        .cloud-content {
            align-self: stretch;
            display: flex;
            min-width: 240px;
            flex-direction: column;
            justify-content: flex-start;
            width: 591px;
            margin: auto 0;
        }

        .cloud-title {
            color: #4d4d4d;
            font-size: 36px;
            line-height: 44px;
        }

        .cloud-description {
            color: #6b6b6b;
            font-size: 18px;
            font-weight: 500;
            line-height: 29px;
            margin-top: 19px;
        }

        .cloud-cta {
            display: flex;
            margin-top: 19px;
            width: 100%;
            flex-direction: column;
            align-items: flex-start;
        }

        .selengkapnya-cta {
            display: flex;
            margin-top: 19px;
            width: 100%;
            flex-direction: column;
            align-items: center;
        }

        .cloud-button {
            border-radius: 8px;
            background-color: #0a5193;
            box-shadow: 0 24px 30px -16px rgba(16, 56, 206, 0.25);
            padding: 20px;
            color: #fff;
            font-size: 16px;
            line-height: 1;
            cursor: pointer;
        }

        @media (max-width: 991px) {
            .tech-section {
                /* padding-top: 100px; */
            }

            .tech-container {
                max-width: 100%;
                padding: 32px;
            }

            .tech-title {
                max-width: 100%;
            }

            .tech-description {
                max-width: 100%;
            }

            .tech-cards-container {
                max-width: 100%;
            }

            .tech-card {
                max-width: 100%;
            }

            .cloud-section {
                max-width: 100%;
                margin-top: 40px;
                height: fit-content;
            }

            .cloud-image {
                max-width: 100%;
            }

            .cloud-content {
                max-width: 100%;
            }

            .cloud-cta {
                padding-right: 20px;
            }
        }

        .footer {
            background-color: rgba(245, 250, 255, 1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            justify-content: center;
            padding: 64px 80px;
        }

        .footer-container {
            position: relative;
            display: flex;
            width: 100%;
            max-width: 1280px;
            flex-direction: column;
        }

        .footer-content {
            z-index: 1;
            display: flex;
            width: 100%;
            align-items: flex-start;
            gap: 40px 200px;
            font: 500 16px/20px Inter, sans-serif;
            flex-wrap: wrap;
        }

        .company-info {
            display: flex;
            min-width: 240px;
            flex-direction: column;
            color: rgba(46, 61, 98, 1);
            flex-grow: 1;
            width: 415px;
        }

        .company-logo {
            aspect-ratio: 2.54;
            object-fit: contain;
            width: 267px;
        }

        .company-description {
            margin-top: 24px;
        }

        .contact-section {
            display: flex;
            min-width: 240px;
            min-height: 366px;
            flex-direction: column;
            flex-grow: 1;
            width: 457px;
        }

        .address-block {
            display: flex;
            width: 100%;
            align-items: flex-start;
            gap: 16px;
            font: 14px/20px Inter, sans-serif;
            color: rgba(35, 41, 41, 1);
        }

        .address-content {
            display: flex;
            min-width: 240px;
            width: 100%;
            flex-direction: column;
            flex: 1;
        }

        .address-label {
            font: 500 10px/1.4 Inter, sans-serif;
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }

        .address-text {
            margin-top: 20px;
            width: 273px;
        }

        .sales-address {
            margin-top: 20px;
            width: 273px;
            font-size: 14px;
        }

        .contact-block {
            display: flex;
            margin-top: 40px;
            width: 100%;
            align-items: flex-start;
            gap: 16px;
            line-height: 1.4;
        }

        .contact-content {
            display: flex;
            min-width: 240px;
            width: 100%;
            flex-direction: column;
            flex: 1;
        }

        .contact-label {
            font: 500 10px/1.4 Inter, sans-serif;
            color: rgba(35, 41, 41, 1);
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }

        .contact-details {
            display: flex;
            margin-top: 20px;
            flex-direction: column;
            font-size: 14px;
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            color: rgba(35, 41, 41, 1);
        }

        .contact-email {
            margin-top: 4px;
        }

        .contact-links {
            display: flex;
            margin-top: 12px;
            gap: 20px;
        }

        .whatsapp-link {
            color: rgba(13, 164, 124, 1);
        }

        .maps-link {
            color: rgba(66, 133, 244, 1);
        }

        .footer-bottom {
            z-index: 1;
            display: flex;
            margin-top: 40px;
            width: 100%;
            align-items: center;
            gap: 40px 100px;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .social-media {
            display: flex;
            align-items: center;
            gap: 24px;
            margin: auto 0;
        }

        .social-icon {
            aspect-ratio: 1;
            object-fit: contain;
            width: 16px;
            margin: auto 0;
        }

        .copyright {
            color: rgba(35, 41, 41, 1);
            text-align: right;
            margin: auto 0;
            font: 500 10px/1.4 Inter, sans-serif;
        }

        @media (max-width: 991px) {
            .footer {
                padding: 0 20px;
            }

            .footer-content {
                /* padding: 32px; */
            }

            .footer-bottom {
                padding-bottom: 32px;
            }

            .footer-container,
            .footer-content,
            .company-info,
            .contact-section,
            .address-block,
            .address-content,
            .footer-bottom {
                max-width: 100%;
            }

            .address-label {
                white-space: initial;
            }
        }


        .logo-grid {
            display: flex;
            flex-wrap: wrap; 
            justify-content: center;
            width: 90%;
        }

        .logo-grid-portfolio .client-logo {
            max-width: 180px;
            max-height: 80px;
            object-fit: contain;
            aspect-ratio: 2.5;
        }

        .logo-grid-clients .client-logo {
            max-width: 130px;
            max-height: 60px;
        }

        .client-logo {
            object-fit: contain;
            filter: grayscale(40%);
            opacity: 0.85;
            transform: translateY(20px);
            animation: logoFadeUp 0.6s ease forwards;
            transition:
                transform 0.25s ease,
                filter 0.25s ease,
                opacity 0.25s ease;
        }

        .logo-grid .client-logo:nth-child(1) {
            animation-delay: 0.05s;
        }

        .logo-grid .client-logo:nth-child(2) {
            animation-delay: 0.10s;
        }

        .logo-grid .client-logo:nth-child(3) {
            animation-delay: 0.15s;
        }

        .logo-grid .client-logo:nth-child(4) {
            animation-delay: 0.20s;
        }

        .logo-grid .client-logo:nth-child(5) {
            animation-delay: 0.25s;
        }

        .logo-grid .client-logo:nth-child(6) {
            animation-delay: 0.30s;
        }

        .client-logo:hover {
            filter: grayscale(0%);
            opacity: 1;
            transform: translateY(-4px) scale(1.03);
        }

        @keyframes logoFadeUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 991px) {
            .logo-grid-portfolio .client-logo {
                max-width: 150px;
                max-height: 70px;
            }

            .logo-grid-clients .client-logo {
                max-width: 110px;
                max-height: 50px;
            }
        }

        .portfolio-section {
            margin-top: 100px;
            width: 100%;
            padding: 0 100px;
            text-align: center;
        }

        .portfolio-header {
            margin-bottom: 40px;
        }

        .portfolio-title {
            font-size: 36px;
            font-weight: 700;
            color: #4d4d4d;
        }

        .portfolio-description {
            font-size: 16px;
            color: #717171;
        }

        .portfolio-masonry {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
            overflow-y: auto;
            max-height: 70vh;
        }

        .portfolio-item {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            background: transparent;
        }

        .portfolio-item img {
            width: 100%;
            height: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
            border-radius: 8px;
        }

        .portfolio-overlay {
            position: absolute;
            inset: 0;
            border-radius: 8px;
            background: linear-gradient(to top,
                    rgba(0, 0, 0, 0.55),
                    rgba(0, 0, 0, 0.15));
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            padding: 16px;
            opacity: 0;
            color: #fff;
            transition: opacity 0.3s ease;
        }

        .portfolio-overlay h3 {
            font-size: 16px;
            margin: 0 0 4px 0;
            text-align: left;
        }

        .portfolio-overlay span {
            font-size: 12px;
            opacity: 0.9;
        }

        .portfolio-item:hover img {
            transform: scale(1.05);
            filter: brightness(1.05);
        }

        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }

        @media (max-width: 1199px) {
            .portfolio-masonry {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }

        }

        @media (max-width: 991px) {
            .portfolio-masonry {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .portfolio-section {
                padding: 0 35px;
            }

        }

        @media (max-width: 575px) {
            .portfolio-masonry {
                grid-template-columns: repeat(1, minmax(0, 1fr));
            }

            .portfolio-section {
                padding: 0 35px;
            }

        }
    </style>