* { box-sizing: border-box; }

    body, html {
      margin: 0;
      padding: 0;
      font-family: 'Cinzel', serif;
      background: #2f1e1e url('https://www.transparenttextures.com/patterns/old-wall.png');
      color: #f8e8c8;
      scroll-behavior: smooth;
    }

    .inside {
      max-width: 900px;
      padding: 40px 20px;
      margin: 0 auto;
    }

    h1, h2, h3 {
      text-align: center;
    }

    h1 {
      font-size: 3.5rem;
      margin-top: 100px;
    }

    hr {
      width: 60%;
      margin: auto;
      border: 1px solid #c9aa71;
    }

    #nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #3e2b1e;
      padding: 15px 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.6);
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      z-index: 999;
    }

    .nav-links {
      display: flex;
      gap: 30px;
    }

    #nav a {
      text-decoration: none;
      color: #f0d9b5;
      font-weight: bold;
      font-size: 1rem;
      padding: 10px;
      transition: 0.3s;
    }

    #nav a:hover {
      background-color: #c9aa71;
      color: #2f1e1e;
      border-radius: 6px;
    }

    .typing-effect {
      font-size: 3.2rem;
      border-right: 3px solid #f8e8c8;
      width: fit-content;
      margin: 100px auto 10px;
      white-space: nowrap;
      overflow: hidden;
      animation: typing 4s steps(7, end) infinite, blink 0.7s step-end infinite;
    }

    @keyframes typing {
      0% { width: 0; }
      50% { width: 7ch; }
      100% { width: 0; }
    }

    @keyframes blink {
      0%, 100% { border-color: transparent; }
      50% { border-color: #f8e8c8; }
    }

    .intro-para {
      font-size: 1.1rem;
      color: #e9d8b5;
      margin-top: 20px;
      text-align: justify;
    }

    .white-bar, .black-bar {
      height: 28px;
      margin-bottom: 10px;
      border-radius: 14px;
    }

    .white-bar {
      background-color: #f3e5ab;
    }

    .black-bar {
      background-color: #8d6e63;
      transition: width 1s ease-in-out;
    }

    .table-rec {
      background-color: #4e342e;
      color: #f8e8c8;
      text-align: center;
      font-size: 1.8rem;
      padding: 20px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }

    .table-rec div {
      margin: 20px;
      animation: bounce 1.5s ease-in-out;
    }

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .price-table {
      background: #5d4037;
      margin: 20px;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 0 15px #3e2723;
      flex: 1;
      max-width: 500px;
      animation: slideup 1s ease-in-out;
    }

    .price-table-head {
      background-color: #c9aa71;
      color: #3e2723;
      font-size: 2rem;
      padding: 20px;
    }

    .price-table-cell {
      background-color: #4e342e;
      color: #f5deb3;
      font-size: 1rem;
      text-align: center;
      padding: 15px 0;
    }

    .price-table-buy {
      text-decoration: none;
      color: white;
      background-color: #3e2723;
      font-weight: bold;
      font-size: 1.25rem;
      padding: 13px 20px;
      display: inline-block;
      border-radius: 5px;
      transition: 0.3s;
    }

    .price-table-buy:hover {
      background-color: #c9aa71;
      color: #3e2723;
    }

    .contact-form-space, textarea {
      width: 100%;
      background-color: #f8ecd1;
      margin-bottom: 15px;
      padding: 10px;
      border: none;
      border-radius: 6px;
      font-family: 'Cinzel', serif;
    }

    textarea {
      height: 120px;
      background-color: #8d6e63;
      color: white;
    }

    .submit {
      background-color: #3e2723;
      color: #f8e8c8;
      font-weight: bold;
      font-size: 1.1rem;
      padding: 12px 25px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }

    .submit:hover {
      transition: ease-in-out 0.2s;
      background-color: #c9aa71;
      color: #3e2723;
    }

    @media (max-width: 768px) {
      .inside { max-width: 95%; }
      h1, .typing-effect { font-size: 2.2rem; }
      .table-rec { flex-direction: column; font-size: 1.3rem; }
      .pricing { flex-direction: column; }
    }

    @media (min-width: 1024px) {
      .responsive-flex {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
      }
      .responsive-half { width: 48%; }
      .pricing {
        display: flex;
        justify-content: center;
        gap: 40px;
      }
    }

    .projects, .testimonials {
      margin-top: 60px;
    }

    .project-item, .testimonial-item {
      background-color: #4e342e;
      padding: 20px;
      margin: 10px 0;
      border-left: 5px solid;
      border-radius: 6px;
    }

    /*  */