* { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Lora', san-serif;
            line-height: 1.8;
            color: #010101;
            background-repeat: repeat;
            background-attachment: fixed;
            background-position: center;
            background-color: #C0C0C0;
            /* Transition added for a smooth cross-fade effect when background changes */
            transition: background-image 0.6s ease-in-out;
        }

        .hero { width: 90%; max-width: 1100px; margin: 0 auto; overflow: hidden; display: block; }
        .hero img { width: 100%; height: auto; display: block; margin: 0 auto; }
        .hero a {text-decoration: none;}

.content {
    position: relative;
    width: 90%;
    max-width: 1100px;
    margin: 10px auto;
    padding: 70px 60px;
    background-color: rgba(255, 255, 255, 255);
    border-radius: 8px;

    /* STRONGER LIFT EFFECT */
    /* Shadow 1: Darker and closer to the edge for depth */
    /* Shadow 2: Softer, larger spread for the "lift" */
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35),
        0 10px 15px rgba(0, 0, 0, 0.15);
}

        .content2 {
            width: 90%;
            max-width: 1100px;
            margin: 10px auto;
            padding: 10px 10px;
            background-color: rgba(255, 255, 255, 0.10);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
            border-radius: 8px;
            margin-bottom: 100px;
        }

        .content2 p { font-family: 'Montserrat', sans-serif; font-size: 16px; margin-bottom: 20px; text-align: center; color: #FFFFFF; }

        h2, h4, h1 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            margin-bottom: 5px;
            letter-spacing: 2px;
            text-align: center;
            background: linear-gradient(45deg, #9c711a 0%, #d1a34f 25%, #fff5b3 45%, #9c711a 50%, #fff5b3 55%, #d1a34f 75%, #9c711a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0px 1px 0px #ffef96) drop-shadow(2px 5px 10px rgba(0,0,0,0.6));
        }
h1 {
    font-size: clamp(3.5rem, 11.5vw, 126px);
    width: 100%;
    text-align: center;
    letter-spacing: -0.02em; /* Adjust this slightly to 'nudge' the width */
    line-height: 0.85;
    margin-top: 30px;
    margin-bottom: 30px;
}
h2 {
    font-size: clamp(1.5rem, 5vw, 50px);
    margin-top: -2vw; /* Using vw for margin keeps the gap consistent as it shrinks */
    line-height: 1.2;
}
        h4 {
	  /* Lowered the min to 1rem (16px) so you can actually see it shrink */
	  font-size: clamp(1rem, 4vw, 32px);
	  font-weight: 550;
}

        h3 { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 600; margin: 40px 0 20px; color: #333; }
        p { font-family: 'Montserrat', sans-serif; font-size: 16px; margin-bottom: 20px; text-align: justify; color: #444; }
        p.intro { text-align: center; font-style: italic; color: #666; font-size: 19px; margin-bottom: 60px; font-weight: 300; }

        .feature-row { display: flex; align-items: center; gap: 40px; margin-bottom: 60px; }
        .feature-row.reverse { flex-direction: row-reverse; }
        .feature-image { flex: 1; max-width: 45%; }
        .feature-image img { width: 100%; height: auto;  }
        .feature-text { flex: 1; }

        .rs-image {
            float: right;
            width: 250px;
            height: auto;
            margin-left: 20px;
            margin-bottom: 10px;
            border-radius: 8px;
            filter: sepia(80%);
            transition: filter 0.3s ease-in-out;
        }
        .rs-image:hover { filter: sepia(0%); }

        .footer-link { color: #FFFFFF !important; text-decoration: none !important; }
        .footer-link:hover { color: #FFFF00 !important; text-decoration: underline !important; }

        .lang-selector { position: absolute; top: 20px; right: 30px; z-index: 10; }
        .lang-selector select {
            padding: 10px 15px; border-radius: 4px; border: 2px solid #d1a34f;
            background-color: #ffffff; color: #4a0000; font-family: 'Montserrat', sans-serif;
            font-weight: 600; cursor: pointer; text-transform: uppercase;
        }

        @media (max-width: 768px) {
            .feature-row, .feature-row.reverse { flex-direction: column; }
            .feature-image { max-width: 100%; }
            .content { padding: 40px 20px; }
            .lang-selector { top: 10px; right: 15px; }
        }
   .art-deco-button {
      /* Layout and Colors */
      background-color: #ffffff;
      color: #000000;
      padding: 12px 30px;
      cursor: pointer;
      position: relative;
      text-decoration: none;
      /* Typography */
      font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Use 'Koppen' or 'Futura' if available */
      font-weight: 500;

      letter-spacing: 3px;
      font-size: 14px;

      /* The Main Border */
      border: 2px solid #000000;
      outline: none;
      transition: all 0.3s ease;
    }

    /* The Decorative Inner Border */
    .art-deco-button::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      right: 3px;
      bottom: 3px;
      border: 1px solid #000000;
      pointer-events: none;
    }

    /* Hover Effects */
    .art-deco-button:hover {
      background-color: #000000;
      color: #ffffff;
    }

    /* Inverting the inner line on hover */
    .art-deco-button:hover::after {
      border-color: #ffffff;
}

.art-deco-framed {
  display: inline-block;
  position: relative;
  padding: 15px 40px;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  font-family: serif;
  font-weight: bold;
  letter-spacing: 5px; /* High tracking is key */
  font-size: 14px;
  
  /* Inner Double Border */
  border: 1px solid #000;
  outline: 1px solid #000;
  outline-offset: -5px; /* Creates the inner double line */
  
  margin: 20px;
  transition: all 0.3s ease;
}

/* The Floating Outer Lines (Top and Bottom) */
.art-deco-framed::before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: 10px;
  right: 10px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  pointer-events: none;
}

/* The Floating Outer Lines (Left and Right) */
.art-deco-framed::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -8px;
  right: -8px;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  pointer-events: none;
}

/* Hover effect */
.art-deco-framed:hover {
  background-color: #000;
  color: #fff !important;
}