hr {
      border: none;
      border-top: 2px solid #888;
      margin: 0;
      width: 100%;
    }

    /* Contact Section */
    .contact-hero {
      padding: 40px 20px;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="50,0 61,35 98,35 68,57 79,91 50,70 21,91 32,57 2,35 39,35" fill="none" stroke="#b5651d" stroke-width="2"/></svg>') repeat;
      background-color: #eceada;
      border: 3px solid #b5651d;
      border-radius: 15px;
      margin: 40px auto;
      max-width: 1400px;
      box-sizing: border-box;
      opacity: 0;
      animation: fadeIn 1s ease-out forwards;
      transition: box-shadow 0.3s ease;
    }

    .contact-hero:hover {
      box-shadow: 0 0 15px rgba(181, 101, 29, 0.5);
    }

    .contact-hero h1 {
      font-size: 54px;
      font-family: 'TT Background', serif;
      color: #3a2f2d;
      border-bottom: 2px solid #b5651d;
      display: inline-block;
      margin: 0 auto 20px;
      text-align: center;
      opacity: 0;
      animation: slideInLeft 1s ease-out 0.5s forwards;
      transition: color 0.3s ease;
    }

    .contact-hero h1:hover {
      color: #b5651d;
    }

    .contact-content {
      display: flex;
      justify-content: space-between;
      gap: 40px;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 20px;
      flex-wrap: wrap;
    }

    .contact-info {
      flex: 1;
      min-width: 300px;
      opacity: 0;
      animation: fadeInUp 1s ease-out 0.7s forwards;
    }

    .contact-info h2 {
      font-size: 36px;
      font-family: 'TT Commons Pro', sans-serif;
      color: #3a2f2d;
      margin: 0 0 20px;
      text-transform: uppercase;
      transition: color 0.3s ease;
    }

    .contact-info h2:hover {
      color: #b5651d;
    }

    .contact-info p {
      font-size: 18px;
      color: #3a2f2d;
      margin: 10px 0;
      transition: color 0.3s ease;
    }

    .contact-info p:hover {
      color: #b5651d;
    }

    .contact-info p strong {
      font-weight: bold;
      transition: color 0.3s ease;
    }

    .contact-info p strong:hover {
      color: #b5651d;
    }

    /* Contact Form */
    .contact-form {
      flex: 1;
      min-width: 300px;
      background-color: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      opacity: 0;
      animation: fadeInUp 1s ease-out 0.9s forwards;
      transition: box-shadow 0.3s ease;
    }

    .contact-form:hover {
      box-shadow: 0 0 15px rgba(181, 101, 29, 0.5);
    }

    .contact-form h2 {
      font-size: 36px;
      font-family: 'TT Commons Pro', sans-serif;
      color: #3a2f2d;
      margin: 0 0 20px;
      text-transform: uppercase;
      transition: color 0.3s ease;
    }

    .contact-form h2:hover {
      color: #b5651d;
    }

    .contact-form label {
      display: block;
      font-size: 16px;
      color: #3a2f2d;
      margin-bottom: 5px;
      transition: color 0.3s ease;
    }

    .contact-form label:hover {
      color: #b5651d;
    }

    .contact-form input,
    .contact-form textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #b5651d;
      border-radius: 5px;
      font-family: 'TT Commons', sans-serif;
      font-size: 16px;
      color: #3a2f2d;
      box-sizing: border-box;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .contact-form input:hover,
    .contact-form textarea:hover,
    .contact-form input:focus,
    .contact-form textarea:focus {
      border-color: #8c4a15;
      box-shadow: 0 0 5px rgba(181, 101, 29, 0.5);
      outline: none;
    }

    .contact-form textarea {
      height: 150px;
      resize: none;
    }

    .contact-form button {
      padding: 12px 24px;
      font-size: 18px;
      font-family: 'TT Commons', sans-serif;
      color: #fff;
      background-color: #b5651d;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .contact-form button:hover {
      background-color: #8c4a15;
      transform: scale(1.05);
    }

    /* Map Section */
    .map-section {
      max-width: 1400px;
      margin: 40px auto;
      padding: 0 20px;
      opacity: 0;
      animation: fadeInUp 1s ease-out 1.1s forwards;
    }

    .map-section h2 {
      font-size: 36px;
      font-family: 'TT Background', serif;
      color: #3a2f2d;
      border-bottom: 2px solid #b5651d;
      display: inline-block;
      margin-bottom: 20px;
      transition: color 0.3s ease;
    }

    .map-section h2:hover {
      color: #b5651d;
    }

    .map-section iframe {
      width: 100%;
      height: 400px;
      border-radius: 10px;
      border: 2px solid #b5651d;
      transition: box-shadow 0.3s ease;
    }

    .map-section iframe:hover {
      box-shadow: 0 0 15px rgba(181, 101, 29, 0.5);
    }

    @media (max-width: 768px) {
      .contact-content {
        flex-direction: column;
        gap: 20px;
      }

      .contact-hero h1 {
        font-size: 36px;
      }

      .contact-info h2,
      .contact-form h2 {
        font-size: 28px;
      }

      .contact-info p {
        font-size: 16px;
      }

      .map-section h2 {
        font-size: 28px;
      }

      .map-section iframe {
        height: 300px;
      }
    }