* {
        font-family: "Inter", sans-serif;
      }
      body {
        scroll-behavior: smooth;
        background-color: #ffffff;
        overflow-x: hidden;
      }
      .top-header {
        background-color: #0a192f;
        color: white;
        font-size: 0.85rem;
        padding: 8px 0;
        position: relative;
        z-index: 1030;
      }
      .top-header a {
        color: white;
        text-decoration: none;
        transition: 0.3s;
      }
      .top-header a:hover {
        color: #00a8ff;
      }
      .whatsapp-top-btn {
        background-color: #25d366;
        padding: 4px 12px;
        border-radius: 30px;
        font-weight: 500;
        font-size: 0.8rem;
        transition: 0.3s;
      }
      .whatsapp-top-btn:hover {
        background-color: #128c7e;
        color: white !important;
      }
      .navbar {
        background-color: white !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        transition: all 0.3s;
        padding: 12px 0;
      }
      .navbar-brand {
        font-weight: 800;
        font-size: 1.6rem;
        color: #0a192f;
      }
      .navbar-brand span {
        color: #0077b6;
      }
      .nav-link {
        font-weight: 500;
        color: #1e2a3e !important;
        margin: 0 4px;
        transition: 0.3s;
      }
      .nav-link:hover {
        color: #0077b6 !important;
      }
      .hero-slider-item {
        background-size: cover;
        background-position: center;
        min-height: 85vh;
        display: flex !important;
        align-items: center;
        position: relative;
      }
      .hero-slider-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
      }
      .hero-content {
        position: relative;
        z-index: 2;
        color: white;
        width: 100%;
      }
      .btn-custom-primary {
        background-color: #0077b6;
        border: none;
        padding: 12px 28px;
        font-weight: 600;
        border-radius: 40px;
        transition: 0.3s;
      }
      .btn-custom-primary:hover {
        background-color: #023e8a;
        transform: translateY(-3px);
      }
      .btn-wa {
        background-color: #25d366;
        border: none;
      }
      .btn-wa:hover {
        background-color: #128c7e;
      }
      .section-title {
        font-size: 2.2rem;
        font-weight: 700;
        color: #0a192f;
        position: relative;
        display: inline-block;
        margin-bottom: 3rem;
      }
      .section-title:after {
        content: "";
        position: absolute;
        bottom: -12px;
        left: 0;
        width: 70px;
        height: 4px;
        background: #0077b6;
        border-radius: 5px;
      }
      .card-service,
      .card-product,
      .testimonial-card,
      .why-card {
        border-radius: 20px;
        transition:
          transform 0.3s,
          box-shadow 0.3s;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        height: 100%;
        border: none;
      }
      .card-service:hover,
      .why-card:hover,
      .testimonial-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
      }
      .testimonial-card {
        background: white;
        padding: 1.5rem;
      }
      .star-rating {
        color: #ffc107;
        margin-bottom: 1rem;
      }
      .icon-lg {
        font-size: 2.8rem;
        color: #0077b6;
      }
      .process-step {
        text-align: center;
        padding: 20px;
      }
      .step-icon {
        background: #e6f4ff;
        width: 80px;
        height: 80px;
        line-height: 80px;
        border-radius: 50%;
        margin: 0 auto 20px;
        font-size: 2rem;
        color: #0077b6;
        transition: 0.3s;
      }
      .process-step:hover .step-icon {
        transform: scale(1.1);
        background: #0077b6;
        color: white;
      }
      .gallery-img {
        border-radius: 20px;
        cursor: pointer;
        transition: 0.3s;
        width: 100%;
        height: 200px;
        object-fit: cover;
      }
      .gallery-img:hover {
        opacity: 0.9;
        transform: scale(1.02);
      }
      .footer {
        background-color: #0a192f;
        color: #cbd5e1;
      }
      .floating-wa,
      .floating-call {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 999;
        background-color: #25d366;
        width: 55px;
        height: 55px;
        border-radius: 50%;
        text-align: center;
        line-height: 55px;
        font-size: 28px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        transition: 0.2s;
        text-decoration: none;
        display: block;
      }
      .floating-call {
        background-color: #e9dc27f8;
        bottom: 90px;
        right: 20px;
      }
      .floating-wa:hover,
      .floating-call:hover {
        transform: scale(1.08);
        color: white;
      }
      @media (max-width: 768px) {
        .hero-slider-item {
          min-height: 60vh;
        }
        .section-title {
          font-size: 1.8rem;
        }
      }
      .carousel-control-prev,
      .carousel-control-next {
        width: 5%;
        opacity: 0.8;
        z-index: 10;
      }
      .carousel-control-prev-icon,
      .carousel-control-next-icon {
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        padding: 20px;
        background-size: 50%;
      }
      .carousel-indicators {
        z-index: 10;
        margin-bottom: 2rem;
      }
      /* Smooth scroll offset for fixed header */
      html {
        scroll-padding-top: 70px;
      }

      /* Fix for carousel images */
      .carousel-item {
        transition: transform 0.6s ease-in-out;
      }