:root{
      --brand: #167ac6;
      --brand-600: rgba(22,122,198,0.95);
      --brand-400: rgba(22,122,198,0.7);
      --brand-100: rgba(22,122,198,0.08);
      --muted: #55606a;
    }

    body { font-family: "Poppins", sans-serif; background:#f6fbff; color:#072018; }
    /* nav */
    a {
      text-decoration: none;
    }
    
    .log{
        width:50px;
        height:auto;
        border-radius:10px;
    }
    .hero {
      background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
      color: white;
      padding: 56px 0;
      border-bottom-right-radius: 36px;
      border-bottom-left-radius: 36px;
    }
    .hero h1 { font-weight:700; margin-bottom:8px; }
    .hero p { opacity: .95; margin-bottom:0; }

    .service-card { border-radius:14px; background:#fff; box-shadow:0 10px 30px rgba(10,30,48,0.06); padding:20px; transition:transform .18s ease, box-shadow .18s ease; }
    .service-card:hover { transform:translateY(-6px); box-shadow:0 18px 48px rgba(10,30,48,0.12); }
    .service-icon { width:60px; height:60px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--brand-100); color:var(--brand); font-size:26px; }

    .package-card { border-radius:12px; padding:18px; background:linear-gradient(180deg, #ffffff, #f2fbff); box-shadow:0 8px 24px rgba(10,30,48,0.04); }
    .case-img { width:100%; height:160px; object-fit:cover; border-radius:10px; }

    .faq-item button { width:100%; text-align:left; border:none; box-shadow:none; font-weight:600; padding:18px; }
    .faq-item button:focus { box-shadow:none; outline:none; }

    footer { background:#072018; color:#d4e8dc; padding:28px 0; margin-top:40px; }

    .floating-whatsapp { position: fixed; right:18px; bottom:18px; z-index:9999; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; background:#25D366; color:#fff; box-shadow:0 8px 24px rgba(0,0,0,0.18); font-size:22px; }

    /* Brand utility classes */
    .text-brand { color: var(--brand) !important; }
    .bg-brand { background: var(--brand) !important; color: #fff; }
    .btn-brand { background: var(--brand); color: #fff; border: none; }
    .btn-outline-brand { color: var(--brand); border-color: var(--brand); background: transparent; }
    .btn-outline-brand:hover { background: var(--brand); color: #fff; }

    .price-badge { color: var(--brand); font-weight:700; }
    .case-img{
  height:180px;
  object-fit:cover;
}

    @media (max-width:767.98px){
      .hero { padding:36px 0; border-radius:0 0 18px 18px; }
      .service-icon { width:52px; height:52px; font-size:22px; }
    }