body{
          font-family: "Playfair Display", serif;
          padding-top: 60px;
        }
        
  
      .navbar-brand {
        display: flex;
        align-items: center;          /* vertikal center image & text */
        gap: 12px;                    /* jarak antara image dan text */
        font-family: "Playfair Display", serif;
      }

      .navbar-nav{
        gap: 2rem;
      }

      /* Hover & active warna hijau + transisi halus */
      .nav-link {
        color: #212529;                /* warna default teks */
        transition: color 0.3s ease;   /* animasi halus saat hover */
      }

      .nav-link:hover,
      .nav-link:focus,
      .nav-link.active {
        color: #047857 !important;     /* hijau Bootstrap success, ganti kalau mau warna lain */
      }

      .brand-text {
        line-height: 1.1;
      }

      .brand-main {
        font-size: 1.7rem;            /* besar untuk RUPA ALAM */
        font-weight: 800;
        letter-spacing: 0.04em;
        color: #2c3e50;               /* warna gelap, sesuaikan brand kamu */
        display: block;
      }

      .brand-sub {
        font-size: 0.9rem;            /* kecil untuk sub */
        font-weight: 400;
        color: #6c757d;               /* abu-abu lembut */
        letter-spacing: 0.03em;
        display: block;
      }

      h1.display-4 {
        color: #047857;          /* hijau #047857 seperti request kamu */
        font-weight: 800;        /* biar lebih bold & standout */
      }

      .text-gold{
        color: #c9a96e;          /* emas lembut, ganti kalau mau lebih kuning/gelap */
        font-weight: 600;        /* opsional: biar lebih menonjol */
      }

      .philosophy-img {
        width: 100%;
        max-width: 100%;
        height: auto;
      }

      /* Tombol custom hijau */
      .btn-custom-green {
        background-color: #047857;
        border-color: #047857;
        color: white;
        font-weight: 300;
        transition: all 0.3s ease;
        font-size: 15px;
      }

      .btn-custom-green:hover,
      .btn-custom-green:focus,
      .btn-custom-green:active {
        background-color: #065f46;     /* lebih gelap saat hover */
        border-color: #065f46;
        color: white;
        transform: translateY(-2px);   /* efek angkat sedikit */
        box-shadow: 0 4px 12px rgba(4, 120, 87, 0.3);  /* shadow hijau lembut */
      }

      /* Efek hover untuk card ingredients */
      .ingredient-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 12px;
        overflow: hidden;
      }

      .ingredient-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12) !important;
      }

      /* Default (HP) */
      .retreat-img {
        width: 100%;
        height: auto;
        object-fit: cover;
      }

     /* FOOTER */
      .footer {
        background: #fafaf9;
        border-top: 1px solid #e7e5e4;
        padding: 40px 0;
        font-size: 14px;
        color: #57534e;
      }

      .footer-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        align-items: center;
      }

      .footer-title {
        font-weight: 600;
        color: #1c1917;
        margin-bottom: 6px;
      }

      .footer-links a {
        display: block;
        text-decoration: none;
        color: #57534e;
        margin-bottom: 6px;
        transition: 0.3s;
      }

      .footer-links a:hover {
        color: #047857;
      }

      .footer-copy {
        text-align: right;
      }

    
      @media (min-width: 1200px) {
        .retreat-img {
          width: 75%;
          max-height: 420px;  /* sedikit lebih tinggi */
        }
      }
        
      /* Responsive adjustment */
      @media (max-width: 991px) {     /* di bawah lg breakpoint, stack vertikal */
        body{
          padding-top: 90px;
        }
        .navbar-collapse {
          text-align: center;  /* center text secara umum */
        }
        .navbar-brand {
          flex-direction: column;
          align-items: flex-start;
          gap: 4px;
        }
        .brand-main { 
          font-size: 1.5rem; 
        }
        .brand-sub { 
          font-size: 0.85rem; 
        }
      }

      

      @media (max-width: 576px) {
        .brand-main { font-size: 1.4rem; }
        .brand-sub { font-size: 0.8rem; }
      }