:root {
  --primary: #16253B;
  --bg: #ffffff;
  --text: #16253B;
  --accent: #E8871E;
  --graybg: #f3f3f3;
  --hover: #274168;
  --hover2: #03286c;
  --gradient: linear-gradient(to right, #E8871E, #000000e2);
  --gradient2: linear-gradient(to right, #00000004, #e8861e8a);
  --gradient3: linear-gradient(to right, #16253B, #522b01);
  --gradient4: linear-gradient(to right, #16253b, #522b01f5);
}

    body {
      font-family: Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      max-width: 900px;
      margin: 2rem auto;
      padding: 1rem;
    }

    h1 {
      font-size: 2rem;
      margin-bottom: 1rem;
      text-align: center;
    }

    p.intro {
      text-align: center;
      margin-bottom: 2rem;
    }

    .thirdPartySideNote {
      font-size: clamp(0.9rem, 2.2vw, 1rem);
      color: var(--text);
      margin-top: 0.5rem;
      font-style: italic;
      margin-bottom: 1.25rem;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      
    }

    .priceAccent {
      color: var(--graybg);
      font-weight: bold;
      font-size: 1.25rem;
      background: var(--primary);
      padding: 0.2rem 0.4rem;
      border-radius: 10px;
    }

    section {
      margin-bottom: 2rem;
    }

    .priceList {
      list-style-type: "🔸";
      
      padding-left: 1.5rem;
      margin-top: 0.5rem;
    }

    details {
        color: var(--bg);
      background: var(--gradient3);
      border-radius: 8px;
      margin-top: 1rem;
      box-shadow: 0 2px 6px rgba(0,0,0,0.5);
      overflow: hidden;
      transition: box-shadow 0.3s ease;
    }

    details[open] {
      box-shadow: 0 4px 12px var(--accent);
      background: var(--primary);
    }

    summary {
      font-weight: bold;
      font-size: 1.2rem;
      outline: none;
      cursor: pointer;
      padding: 1rem;
      position: relative;
      list-style: none;
    }

    summary::-webkit-details-marker,
    summary::marker {
      display: none;
    }

    summary::before {
      content: "🙈";
      display: inline-block;
      margin-right: 8px;
      color: var(--accent);
      transition: transform 0.3s ease;
    }

    details[open] summary::before {
      /* transform: rotate(90deg); */
      content: "🙉";
      
    }

    details > div {
      max-height: 0;
      overflow: hidden;
      padding: 0 1rem;
      transition: max-height 0.4s ease, padding 0.3s ease;
    }

    details[open] > div {
      max-height: 500px;
      padding: 0 1rem 1rem 1rem;
    }

    details p {
      margin-top: 0.5rem;
    }

    .back-btn {
      display: inline-block;
      padding: 10px 20px;
      background-color: var(--accent);
      color: var(--text);
      font-weight: bold;
      text-decoration: none;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      transition: background-color 0.3s ease, transform 0.2s ease;
      margin-top: 2rem;
    }

    .back-btn:hover {
      background-color: var(--primary);
        color: var(--accent);
      transform: scale(1.05);
    }

    .email-button {
      color: var(--accent);
      font-weight: bold;
      text-decoration: none;
    }

    .email-button:hover {
      text-decoration: underline;
    }

    

   footer {
  text-align: center;
  padding: 1rem;
  background: var(--primary);
  margin-top: 4rem;
  font-size: clamp(0.9rem, 2.5vw, 1rem);
  border-radius: 10px;
  color: var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
}

.footerLinksContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  text-align: center;
}

.footerLinks {
  color: var(--bg);
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

.footerLinks:hover {
  text-decoration: underline;
}

.footerP {
  font-size: clamp(0.8rem, 2vw, 1rem);
  color: var(--accent);
  margin-top: 0.5rem;
  text-align: center;
}