/* Base */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { 
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; background: #faf7f2; overflow-x: hidden; }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    /* Navbar */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: rgba(92, 61, 46, 0.9);
      display: flex;
      justify-content: center;
      gap: 2rem;
      padding: 1rem;
      z-index: 1000;
    }
    nav a {
      color: white;
      font-weight: bold;
      transition: color 0.3s ease;
    }
    nav a:hover { color: #d4a574; }

    /* Hero Section */
    .hero {
      position: relative;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      overflow: hidden;
      --bg-pos: center;
    }
    .hero::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url('assets/background.avif');
      background-size: cover;
      background-position: var(--bg-pos, center);
      background-attachment: fixed;
      z-index: -3;
    }
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: -2;
    }
    .hero-content {
      max-width: 800px;
      padding: 2rem;
      animation: fadeInUp 1.5s ease-out;
    }
    .hero h1 { font-size: 4rem; margin-bottom: 1rem; }
    .hero p { font-size: 1.5rem; margin-bottom: 2rem; color: #f0e6d2; }
    .btn {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      background: #d4a574;
      color: white;
      border-radius: 30px;
      transition: background 0.3s ease;
    }
    .btn:hover { background: #b38352; }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Sections */
    section { padding: 5rem 2rem; max-width: 1200px; margin: auto; }
    h2 { text-align: center; margin-bottom: 2rem; font-size: 2.5rem; color: #f0e9e5; }

    .grid { display: grid; gap: 2rem; }
    .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .card {
      background: white;
      padding: 1.5rem;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

    /* Gallery */
    .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
    .gallery img { border-radius: 10px; transition: transform 0.3s ease; }
    .gallery img:hover { transform: scale(1.05); }

    /* About Section Text */
    #about p { color: #5c3d2e; font-size: 1.2rem; line-height: 1.8; }

    /* Contact */
    .contact-info { text-align: center; margin-bottom: 2rem; color: #5c3d2e; }
    .contact-info p { margin: 0.5rem 0; font-weight: bold; }
    .contact-form { max-width: 500px; margin: auto; display: flex; flex-direction: column; gap: 1rem; }
    .contact-form input, .contact-form textarea { padding: 0.75rem; border-radius: 8px; border: 1px solid #ccc; width: 100%; }
    .contact-form button { padding: 0.75rem; border: none; border-radius: 30px; background: #d4a574; color: white; font-weight: bold; cursor: pointer; }

    /* Footer */
    footer { background: #5c3d2e; color: white; text-align: center; padding: 2rem 1rem; }

    /* Responsive */
    @media(max-width:768px) {
      nav { gap: 1rem; }
      .hero h1 { font-size: 2.5rem; }
      .hero p { font-size: 1.2rem; }
    }