/* =========================
   GLOBAL
========================= */
      body {
        font-family: 'Poppins', sans-serif;
        background: #f7f9fc;
        color: #333;
      }

      img {
        border-radius: 20px;
        max-width: 100%;
      }

      .section {
        padding: 80px 0;
      }

      /* =========================
   TOPBAR
========================= */
      .topbar {
        background: #003b95;
        color: #fff;
        padding: 8px;
        text-align: center;
        font-size: 14px;
      }

      /* =========================
   NAVBAR
========================= */
      .navbar {
        background: #fff;
      }

      /* =========================
   HERO
========================= */
      .hero {
        background:
          linear-gradient(rgba(255, 255, 255, .88),
            rgba(255, 255, 255, .88)),
          url('https://assets/img/banner.png?q=80&w=1200?q=80&w=1600');
        background-size: cover;
        background-position: center;
        padding: 120px 0;
      }

      .hero h1 {
        font-size: 4rem;
        font-weight: 800;
        color: #0b3c8c;
        line-height: 1.15;
      }

      .btn-main {
        background: #1565d8;
        color: #fff;
        border-radius: 40px;
        padding: 14px 28px;
        font-weight: 600;
        border: none;
      }

      .btn-main:hover {
        background: #0d47a1;
        color: #fff;
      }

      /* =========================
   FEATURE SECTION
========================= */
      .feature-wrapper {
        margin-top: -55px;
        position: relative;
        z-index: 20;
      }

      .feature-box {
        background: #fff;
        border-radius: 22px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
        overflow: hidden;
      }

      .feature-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 28px 24px;
        min-height: 110px;
      }

      .feature-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #eef4ff;
        color: #1565d8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        flex-shrink: 0;
      }

      .feature-item h6 {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: #222;
      }

      .feature-item p {
        margin: 4px 0 0;
        font-size: 13px;
        color: #666;
        line-height: 1.5;
      }

      .border-feature {
        border-left: 1px solid #ececec;
        border-right: 1px solid #ececec;
      }

      /* =========================
   CARD
========================= */
      .card-modern {
        background: #fff;
        border: none;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
      }

      /* =========================
   WELCOME
========================= */
      .welcome-premium {
        background: #fff;
        padding: 90px 0;
      }

      .welcome-premium .title {
        text-align: center;
        font-size: 54px;
        font-weight: 700;
        color: #0b3c8c;
      }

      .welcome-premium .line {
        width: 60px;
        height: 4px;
        background: #1565d8;
        margin: 15px auto 30px;
        border-radius: 20px;
      }

      .welcome-premium .desc {
        max-width: 900px;
        margin: auto;
        text-align: center;
        color: #555;
        line-height: 1.9;
        font-size: 18px;
      }

      .certification-box {
        background: #f7f9fd;
        border-radius: 20px;
        margin-top: 50px;
        overflow: hidden;
      }

      .cert-item {
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 30px;
      }

      .cert-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid #1565d8;
        color: #1565d8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
      }

      .cert-item h6 {
        margin: 0;
        color: #0b3c8c;
        font-weight: 700;
      }

      .cert-item span {
        color: #666;
        font-size: 14px;
      }

      .cert-border {
        border-left: 1px solid #e5ebf5;
        border-right: 1px solid #e5ebf5;
      }

      /* =========================
   TRUST SECTION
========================= */
      .trust-section {
        margin-top: 30px;
      }

      .trust-box {
        background: #0047B3;
        border-radius: 22px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
      }

      .trust-item {
        display: flex;
        align-items: center;
        gap: 15px;
        color: #fff;
      }

      .trust-item i {
        font-size: 34px;
      }

      /* =========================
		FOOTER
		========================= */
      .footer-links {
        background: #fff;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
      }

      .footer-links ul {
        list-style: none;
        margin: 0;
        padding: 25px 0;
        display: flex;
        justify-content: center;
        gap: 35px;
        flex-wrap: wrap;
      }

      .footer-links a {
        text-decoration: none;
        color: #444;
        font-weight: 500;
      }

      .footer-main {
        background: #fff;
        padding: 40px 0;
      }

      .brand-logo {
        font-size: 34px;
        color: #1565d8;
      }

      .brand-name {
        font-size: 22px;
        font-weight: 700;
        line-height: 1.2;
      }

      .payment {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 60px;
        height: 40px;
        border: 1px solid #ddd;
        border-radius: 10px;
        background: #fff;
        margin-left: 6px;
        font-size: 12px;
        font-weight: 700;
      }

      /* =========================
   MOBILE
========================= */
      @media (max-width:991px) {
        .border-feature {
          border: none;
        }

        .feature-item {
          border-bottom: 1px solid #f1f1f1;
        }
      }

      @media (max-width:768px) {
        .hero h1 {
          font-size: 2.2rem;
        }

        .section {
          padding: 50px 0;
        }

        .welcome-premium .title {
          font-size: 34px;
        }

        .cert-border {
          border: none;
        }

        .trust-item {
          flex-direction: column;
          text-align: center;
        }

        .footer-links ul {
          gap: 15px;
        }

        .feature-item {
          padding: 20px;
        }
      }

      /* HEADER */
      .main-header {
        background: #fff;
        border-top: 3px solid #0B43C9;
        border-bottom: 1px solid #edf2f7;
      }

      .logo-wrap img {
        height: 60px;
      }

      .navbar {
        min-height: 85px;
      }

      .nav-link {
        color: #2d3748 !important;
        font-size: 15px;
        font-weight: 500;
        padding: 12px 16px !important;
      }

      .nav-link:hover {
        color: #1565d8 !important;
      }

      .active-menu {
        color: #1565d8 !important;
        font-weight: 700;
        position: relative;
      }

      .active-menu::after {
        content: '';
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 0;
        height: 3px;
        background: #1565d8;
        border-radius: 20px;
      }

      .header-right {
        display: flex;
        align-items: center;
        gap: 22px;
      }

      .language-switch {
        font-size: 15px;
        color: #333;
      }

      .header-icon {
        color: #111827;
        font-size: 22px;
        text-decoration: none;
      }

      .header-icon:hover {
        color: #1565d8;
      }

      /* BARIS MENU KE-2 */
      .sub-menu {
        padding: 0 0 18px 175px;
        display: flex;
        gap: 40px;
      }

      .sub-menu a {
        color: #374151;
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
      }

      .sub-menu a:hover {
        color: #1565d8;
      }

      @media(max-width:991px) {
        .sub-menu {
          padding: 10px 0;
          gap: 20px;
          flex-wrap: wrap;
        }

        .header-right {
          margin-top: 15px;
        }
      }
	  
	  .hero{
    background:#fff;
}

.hero-banner{

    background:linear-gradient(
        135deg,
        #f6f9ff,
        #edf4ff
    );

    border-radius:25px;

    min-height:420px;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center; 
}

.hero-content{
    width:45%;
    z-index:2;
}

.hero-tag{

    background:#eaf2ff;

    color:#1565d8;

    font-size:12px;

    font-weight:700;

    padding:7px 14px;

    border-radius:30px;

    display:inline-block;

    margin-bottom:15px;
}

.hero-content h1{

    font-size:52px;

    font-weight:800;

    color:#0b3c8c;

    line-height:1.15;
}

.hero-content p{

    color:#64748b;

    margin:20px 0;
}

.hero-image{

    position:absolute;

    right:0px;

    bottom:0;
}

.hero-image img{
	position:relative;
    width:100%;
}

.promo-card{

    background:#f8fbff;

    border-radius:25px;

    min-height:200px;

    position:relative;

    overflow:hidden;

    padding:25px;

    transition:.3s;
}

.promo-card:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.promo-tag{

    background:#eaf2ff;

    color:#1565d8;

    padding:6px 12px;

    border-radius:30px;

    font-size:11px;

    font-weight:700;

    display:inline-block;

    margin-bottom:12px;
}

.promo-card h4{

    font-weight:800;

    color:#0b3c8c;
}

.promo-card p{

    color:#64748b;
}

.promo-card a{

    text-decoration:none;

    color:#1565d8;

    font-weight:700;
}

.promo-card img{

    position:absolute;

    right:10px;

    top:10px;

    width:140px;
}

@media(max-width:991px){

    .hero-content{
        width:100%;
    }

    .hero-content h1{
        font-size:38px;
    }

    .hero-image{

        position:relative;
		width:100%;
        right:auto;

        margin-top:30px;

        text-align:center;
    }

     
}

/* ===========================
   EXPERTISE
=========================== */

.expertise-section{

    padding-top:0px;
    padding-bottom:0px;

}

.expertise-box{

    background:#f8fbff;

    border-radius:30px;

    overflow:hidden;

}

.expertise-content{

    padding:60px;

}

.expertise-tag{

    display:inline-block;

    background:#eaf2ff;

    color:#1565d8;

    font-size:12px;

    font-weight:700;

    padding:8px 14px;

    border-radius:30px;

    margin-bottom:20px;

}

.expertise-content h2{

    font-size:48px;

    font-weight:800;

    line-height:1.15;

    color:#0b3c8c;

    margin-bottom:20px;

}

.expertise-content h5{

    font-weight:700;

    color:#0b3c8c;

    margin-bottom:15px;

}

.expertise-content p{

    color:#64748b;

    line-height:1.8;

    margin-bottom:25px;

}

.expertise-list{

    list-style:none;

    padding:0;

    margin:0 0 30px;

}

.expertise-list li{

    margin-bottom:12px;

    color:#374151;

    font-weight:500;

}

.expertise-list i{

    color:#1565d8;

    margin-right:10px;

}

.btn-expertise{

    display:inline-flex;

    align-items:center;

    background:#1565d8;

    color:white;

    padding:14px 30px;

    border-radius:12px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.btn-expertise:hover{

    background:#0b3c8c;

    color:white;

}

.expertise-image{

    height:100%;

}

.expertise-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    min-height:520px;

}

/* MOBILE */

@media(max-width:991px){

    .expertise-content{

        padding:35px;

    }

    .expertise-content h2{

        font-size:34px;

    }

    .expertise-image img{

        min-height:300px;

    }

}


/* ==========================
   ADVANCED TECHNOLOGY
========================== */

.technology-section{

    padding-top:0px; 

}

.technology-box{

    background:#f8fbff;

    border-radius:30px;

    overflow:hidden;

}

.technology-image img{

    width:100%;

    height:100%;

    min-height:520px;

    object-fit:cover;

}

.technology-content{

    padding:60px;

}

.section-tag{

    display:inline-block;

    background:#eaf2ff;

    color:#1565d8;

    padding:8px 15px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    margin-bottom:20px;

}

.technology-content h2{

    font-size:52px;

    font-weight:800;

    line-height:1.15;

    color:#0b3c8c;

    margin-bottom:20px;

}

.technology-content p{

    color:#64748b;

    font-size:17px;

    line-height:1.8;

    margin-bottom:25px;

}

.check-list{

    list-style:none;

    padding:0;

    margin-bottom:30px;

}

.check-list li{

    margin-bottom:12px;

    font-weight:500;

    color:#374151;

}

.check-list i{

    color:#1565d8;

    margin-right:10px;

}

.btn-primary-custom{

    display:inline-flex;

    align-items:center;

    background:#1565d8;

    color:#fff;

    text-decoration:none;

    padding:14px 30px;

    border-radius:12px;

    font-weight:700;

    transition:.3s;

}

.btn-primary-custom:hover{

    background:#0b3c8c;

    color:#fff;

}

@media(max-width:991px){

    .technology-content{

        padding:35px;

    }

    .technology-content h2{

        font-size:36px;

    }

    .technology-image img{

        min-height:300px;

    }

}


/* ==========================
   HERO LAB
========================== */

.hero-lab{

    position:relative;

    min-height:720px;

     
    overflow:hidden;
 
    background:url('../assets/img/banner.png')
    center center / cover no-repeat;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(255,255,255,.95),
        rgba(255,255,255,.75),
        rgba(255,255,255,.15)
    );

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:650px;

    padding-top:120px;

    padding-left:60px;

}

.hero-content h1{

    font-size:50px;

    line-height:1.05;

    font-weight:900;

    color:#0b3c8c;

    margin-bottom:30px;

}

.hero-content h1 span{

    color:#1565d8;

}

.hero-content p{

    font-size:24px;

    line-height:1.8;

    color:#374151;

    max-width:600px;

    margin-bottom:35px;

}

.hero-btn{

    display:inline-flex;

    align-items:center;

    padding:18px 40px;

    border-radius:50px;

    background:#1565d8;

    color:white;

    text-decoration:none;

    font-weight:700;

}

.hero-btn:hover{

    background:#0b3c8c;

    color:white;

}

/* TRUST BAR */

.trust-bar{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:30px;

    width:90%;

    background:white;

    border-radius:25px;

    padding:30px;

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;

    z-index:5;

    box-shadow:
    0 20px 40px rgba(0,0,0,.10);

}

.trust-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.trust-icon{

    width:65px;

    height:65px;

    border-radius:50%;

    background:#eef5ff;

    color:#1565d8;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    flex-shrink:0;

}

.trust-item h6{

    font-weight:700;

    margin-bottom:8px;

}

.trust-item p{

    font-size:14px;

    color:#6b7280;

    margin:0;

}

/* MOBILE */

@media(max-width:991px){

    .hero-content{

        padding:40px;

    }

    .hero-content h1{

        font-size:42px;

    }

    .hero-content p{

        font-size:16px;

    }

    .trust-bar{

        position:relative;

        width:100%;

        left:auto;

        bottom:auto;

        transform:none;

        margin-top:30px;

        grid-template-columns:1fr;

    }

}