body { font-family: Arial, sans-serif; }

    /* Navbar */
    .navbar { 
      background: #fff; 
      border-bottom: none !important; /* hilangkan garis bawah */
    }

    .navbar-brand img { 
      max-height: 40px; 
      width: auto; 
    }

    .btn-menu {
      background-color: #0094d9 !important; /* warna biru sesuai permintaan */
      border-color: #0094d9 !important;
      color: #fff !important;
    text-align: left;
      }

    .btn-menu:hover {
      background-color: #007bb3 !important; /* efek hover lebih gelap */
      border-color: #007bb3 !important;
    }


    /* Menu desktop */
    @media(min-width: 992px){
      .navbar-nav { margin-left: 20px; }
      .navbar-nav .nav-item { border-bottom: none !important; }
      .navbar-nav .nav-link { 
        color: #004080 !important;  
        font-weight: 600; 
        margin: 0 8px; 
        padding: 8px 0; 
      }
    }

    /* Menu mobile */
    @media(max-width: 991px){
      .navbar-nav .nav-item { border-bottom: 1px solid #ddd; }
      .navbar-nav .nav-link { padding: 12px 0; }
    }

    /* Hero / App embed */
    .hero { padding:0; background:#e6e6e6; }
    .app-frame { width:100%; height:700px; background:#e6e6e6; }
    .app-frame iframe {
      width:100%; height:100%; border:none; display:block; background:#e6e6e6;
    }

    @media(max-width:768px){
      .app-frame { height:635px; }
    }

    /* Our Products section */ 
    .news-section { 
      padding: 60px 0; 
      background: #f5f6f7; 
    }
    .news-section h2 { 
      color: #004080; 
      font-weight: bold; 
      margin-bottom: 40px; 
      font-size: 2rem; 
    }

    /* flex biar semua card sejajar */
    .news-section .row {
      display: flex;
      flex-wrap: wrap;
    }
    .news-section .col-12,
    .news-section .col-md-6,
    .news-section .col-lg-4 {
      display: flex;
    }

    .news-card {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    /* gambar proporsional, seragam tinggi */
    .news-card img {
      object-fit: cover;
      height: 300px;   /* bisa diubah sesuai kebutuhan */
      width: 100%;
    }

    /* isi card fleksibel */
    .news-card .card-body {
      display: flex;
      flex-direction: column;
    }
    .news-card .card-body p {
      flex-grow: 1; /* dorong tombol ke bawah */
    }

    /* Our Product */
    .products-section {
      background-color: #e6e6e6;
      padding: 10px 16px 0;
      text-align: center;
    }

    .products-section h4 {
      margin-bottom: 15px;
      font-weight: bold;
    }

    .products-list {
      display: flex;
      justify-content: center;
      gap: 15px;
      flex-wrap: wrap;
    }

    .product-box {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #ddd;
      border-radius: 10px;
      background: #fff;
      overflow: hidden;
    }

    .product-box img {
      max-width: 80%;
      max-height: 80%;
      object-fit: contain;
    }

    /* Kartu sejajar */
    .news-section .row > div {
      display: flex; /* buat col jadi flex container */
    }
    .news-card { 
      display:flex; 
      flex-direction:column; 
      height:100%; 
      border-radius:8px; 
      overflow:hidden; 
      transition:transform .2s ease; 
    }
    .news-card:hover { transform:translateY(-5px); }
    .news-card img { width:100%; height:220px; object-fit:cover; }

    /* isi card fleksibel */
    .news-card .card-body { 
      display:flex; 
      flex-direction:column; 
    }
    .news-card h5 { 
      font-size:1.1rem; 
      margin-top:15px; 
      color:#004080; 
      font-weight:bold; 
    }
    .news-card p { font-size:0.9rem; }

    /* tombol di bawah */
    .news-card .card-body a {
      margin-top:auto; 
    }

    /* Carousel controls */
    .carousel-control-prev, .carousel-control-next {
      width:50px; height:50px;
      top:50%; transform:translateY(-50%);
      background:#ccc; border-radius:50%;
    }
    .carousel-control-prev { left:-70px; }
    .carousel-control-next { right:-70px; }
    @media(max-width:991px){
      .carousel-control-prev { left:10px; }
      .carousel-control-next { right:10px; }
    }

    /* Welcome section */
    .welcome { background:#7ec379; color:#fff; padding:60px 20px; text-align:center; }
    .welcome h2 { font-weight:bold; margin-bottom:20px; font-size:2rem; }
    .welcome p { max-width:800px; margin:0 auto 30px; font-size:1.1rem; }
    .welcome .btn { border-radius:30px; padding:10px 20px; }

    /* Footer */
    .footer { background:#004a78; color:#fff; padding:60px 20px 30px; }
    .footer h6 { font-weight:bold; margin-bottom:15px; color:#fff; }
    .footer h6 i { color:#6cc24a; } /* hijau icon */
    .footer a { color:#fff; text-decoration:none; }
    .footer a:hover { text-decoration:underline; }
    .footer-line { border-top:1px solid #6cc24a; margin-top:30px; }
    .footer .social a { margin:0 8px; font-size:22px; color:#fff; }

    /* Floating buttons (right side) */
    .floating-buttons {
      position: fixed;
      right: 0;
      bottom: 22px;
      display: flex;
      flex-direction: column;
      gap: 1px;
      z-index: 1100;
    }

    .btn-float {
      background: #0094d9;
      color: #fff;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      border-radius: 0;  /* biar kotak nempel kanan */
      box-shadow: 0 3px 6px rgba(0,0,0,0.2);
      transition: background 0.3s;
    }

    .btn-float:hover {
      background: #007bb3;
    }

    /* Hamburger icons */
    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280,0,0,0.8%29' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
    .navbar-toggler:not(.collapsed) .navbar-toggler-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%280,0,0,0.8%29' stroke-width='2' stroke-linecap='round' d='M7 7l16 16M23 7L7 23'/%3E%3C/svg%3E");
    }

    .text-start a {
      color: white;
      text-decoration: underline;
    }

    .text-start a:hover {
      color: #ddd;
    }