.help-block {
  color: red;
}

/* 1. Centering & Layout */
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7f9; /* Slightly darker grey to make white cards pop */
  padding: 40px 20px;
  font-family: 'Georgia', serif;
}
/* 3. Ensure the selection wrapper doesn't trap the text too narrowly */
.selection-wrapper {
  width: 100%;
  /* Increased max-width slightly to let text spread horizontally */
  max-width: 650px; 
  text-align: center;
  margin: 0 auto;
}
/* 2. Simply Grand H1 with Shadow */
.grand-title {
  font-size: 2.4rem;
  font-weight: 300;
  /*text-transform: uppercase;*/
  letter-spacing: 8px; /* Extra wide for grandiosity */
  color: #1a1a1a;
  margin: 30px 0 50px 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1); /* Subtle "lift" for the text */
}

/* 3. The Obvious but Plain List */
.plain-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Helvetica', sans-serif;
}

.plain-list li {
  display: block;
  padding: 28px 35px;    /* Large and spacious */
  margin-bottom: 20px;   /* Clear separation */
  background: #ffffff;
  border-radius: 12px;   /* Softer, more modern edges */
  font-size: 1.9rem;
  color: #333;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  
  /* Obvious Shadow: Multi-layered for a high-end look */
  box-shadow: 0 4px 6px rgba(0,0,0,0.05), 
              0 1px 3px rgba(0,0,0,0.1);
}

/* Interaction: Shadow becomes more obvious when "chosen" */
.plain-list li:hover {
  background: #ffffff;
  transform: translateY(-4px); /* Moves up slightly */
  box-shadow: 0 10px 20px rgba(0,0,0,0.1), 
              0 6px 6px rgba(0,0,0,0.05);
  color: #007bff; /* Subtle color shift to show selection */
}


/* 1. Remove the rigid 120% width to prevent mobile horizontal scrolling */
.institution-header {
  width: 100%;
  margin-bottom: 30px;
  padding: 0 10px; /* Buffer for small screens */
}

/* 2. Update the H1 for fluid scaling and responsiveness */
.institution-header h1 {
  /* Scales perfectly between 1.1rem (mobile) and 2rem (desktop) */
  /*font-size: clamp(1.1rem, 4vw + 0.5rem, 2rem); */
  font-size: clamp(0.85rem, 2vw + 0.2rem, 1.25rem);
  line-height: 1.3;
  margin: 10px 0;
  
  /* Modern Responsive Widths */
  width: 100%; 
  max-width: 90vw; /* Keeps text from touching screen edges */
  margin-left: auto;
  margin-right: auto;
  
  /* Better text distribution */
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-family: 'Helvetica', 'Sarabun', sans-serif; /* Consistent with your grand style */
  font-weight: 700;
  color: #1a1a1a;
}
/* 11. Grand Dropdown / Select */
.select-wrapper {
  position: relative;
  width: 100%;
}

/* Custom Arrow Design */
.select-wrapper::after {
  content: "▼";
  font-size: 0.8rem;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  position: absolute;
  color: var(--silver-base);
  pointer-events: none;
  transition: color 0.3s ease;
}

.grand-select {
  appearance: none; /* Removes default browser arrow */
  width: 100%;
  padding: 20px 25px;
  font-family: 'Helvetica', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #000;
  background: #ffffff;
  border: 3px solid var(--silver-base);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  outline: none;
}

/* Focus State: The "Obvious" Neon Ignite */
.grand-select:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan), 0 0 25px rgba(0, 255, 255, 0.3);
}

.grand-select:focus + .select-wrapper::after {
  color: var(--neon-cyan);
}

/* Stable Placeholder Style */
.grand-select option:first-child {
  color: #ccc;
}

/* 12. Conditional 'Other' Title Styling */
.title-flex-group {
  display: flex;
  gap: 15px;
  align-items: flex-end;
  width: 100%;
}

.other-title-input {
  flex: 1;
  opacity: 0.3; /* Muted when disabled */
  pointer-events: none; /* Prevents typing while disabled */
  background-color: #f9fafb; /* Slightly greyed out when disabled */
  border-style: dashed; /* Visual hint it's optional/conditional */
  transition: all 0.4s ease;
}

/* When the field is 'enabled' via JS class */
.other-title-input.active {
  opacity: 1;
  pointer-events: auto;
  border-style: solid;
  /*border-color: var(--neon-cyan);
  box-shadow: 0 0 15px var(--neon-cyan);*/
  background-color: #ffffff;
  border-color: var(--silver-base); /* Back to normal silver border */
  border-style: solid;
}
.other-title-input.active:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan), 0 0 25px rgba(0, 255, 255, 0.3);
  outline: none;
}
/* 13. Responsive Line ID & Phone Group */
.contact-flex-group {
  display: flex;
  gap: 20px;
  width: 100%;
  margin-bottom: 25px;
}

.contact-item {
  flex: 1; /* Distributes width equally */
  min-width: 0; /* Prevents flex items from overflowing */
}

/* Ensure the inputs inside match your grand-input style */
.contact-item .grand-input {
  width: 100%;
}

/* Mobile Breakpoint for Contact Fields */
@media (max-width: 600px) {
  .contact-flex-group {
    flex-direction: column;
    gap: 15px;
  }
}

:root {
  --neon-cyan: #00ffff;
  --silver-base: #d1d5db; /* Light, clean grey */
  --text-dark: #4b5563;   /* Soft charcoal for readability */
}

.grand-checkbox {
  max-width: 550px; 
  margin: 0 auto 20px auto; /* Centers checkboxes if wrapper is wider */
        display: flex;
        align-items: center;
        padding: 28px 35px;    /* Large and spacious */
        margin-bottom: 20px;   /* Clear separation */
        background: #ffffff;
        border-radius: 12px;   /* Softer, more modern edges */
        gap: 1.5rem;
        cursor: pointer;
        user-select: none;
              box-shadow: 0 4px 6px rgba(0,0,0,0.05), 
                          0 1px 3px rgba(0,0,0,0.1);
      }
      /* 1. The Text: Light & Professional (Stable) */
      .label-text {
        text-align: left;
        font-family: 'Helvetica', sans-serif;
        font-size: clamp(1.5rem, 6vw, 2.2rem);
        font-weight: 700;
        color: var(--text-dark); /* Clear but not 'heavy' */
        /*text-transform: uppercase;*/
        letter-spacing: 1px;
        transition: all 0.25s ease;
      }

      /* 2. The Checkbox: Clean Silver */
      .checkmark {
        height: clamp(2rem, 8vw, 3rem);
        width: clamp(2rem, 8vw, 3rem);
        border: 3px solid var(--silver-base);
        background: #f9fafb; /* Very light grey fill */
        border-radius: 6px;
        position: relative;
        transition: all 0.25s ease;
        flex-shrink: 0;
      }

      /* 3. THE "OBVIOUS" CHECKED STATE */
      .grand-checkbox input:checked ~ .label-text {
        color: #000; /* Darkens for maximum contrast against the glow */
        
        /* Bright, obvious glow that radiates outwards */
        text-shadow: 
          0 0 12px var(--neon-cyan),
          0 0 25px var(--neon-cyan),
          0 0 45px rgba(0, 255, 255, 0.6);
      }

      .grand-checkbox input:checked ~ .checkmark {
        background-color: var(--neon-cyan);
        border-color: var(--neon-cyan);
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
      }

      /* 4. The Bold Tick */
      .checkmark:after {
        content: "";
        position: absolute;
        left: 33%; top: 15%;
        width: 25%; height: 50%;
        border: solid #000; /* High contrast black tick */
        border-width: 0 0.5rem 0.5rem 0;
        transform: rotate(45deg) scale(0);
        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

      .grand-checkbox input:checked ~ .checkmark:after {
        transform: rotate(45deg) scale(1);
      }

      /* Hide Native Input */
      .grand-checkbox input { display: none; }

.btn-next-container {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  width: 100%;
}

/*.btn-grand {
  background-color: #ffffff;
  color: var(--text-dark);
  border: 3px solid var(--silver-base);
  padding: 20px 0;
  font-family: 'Helvetica', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 4px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 100%;
  max-width: 400px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.btn-grand:hover {
  border-color: var(--neon-cyan);
  color: #000;
  background-color: #ffffff;
  transform: translateY(-5px);
  box-shadow: 
    0 10px 20px rgba(0, 0, 0, 0.05),
    0 0 15px var(--neon-cyan),
    0 0 30px rgba(0, 255, 255, 0.3);
}*/
.btn-grand {
  background-color: #0066cc; /* Solid Professional Blue */
  color: #ffffff;
  border: 3px solid rgba(255, 255, 255, 0.2);
  padding: 20px 0;
  font-family: 'Helvetica', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  /*text-transform: uppercase;*/
  letter-spacing: 4px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease; /* Smoother transition */
  width: 100%;
  max-width: 400px;
}

/* Hover: Deepen the color instead of making it neon */
.btn-grand:hover {
  background-color: #004d99; /* Darker Blue (Less bright) */
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-3px); /* Subtle lift */
  /* Soft, dark shadow instead of a bright glow */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
}

.btn-grand:active {
  transform: translateY(-1px);
  background-color: #003366; /* Even deeper when pressed */
}
/* Active "Press" Effect */
.btn-grand:active {
  transform: translateY(-1px);
  box-shadow: 0 0 10px var(--neon-cyan);
}
/* The 'Not' Button - Sophisticated Muted Red */
.btn-not {
  background-color: #a63d40; /* Muted Ruby/Deep Garnet */
  color: #ffffff;
  border: 3px solid rgba(255, 255, 255, 0.2);
  padding: 20px 0;
  font-family: 'Helvetica', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  /*text-transform: uppercase;*/
  letter-spacing: 4px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 400px;
}

/* Hover: Deepen the red instead of glowing */
.btn-not:hover {
  background-color: #8a3335; /* Darker Burgundy */
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Soft shadow */
}

.btn-not:active {
  transform: translateY(-1px);
  background-color: #6e292a;
}

/* Responsive adjustment */
@media (max-width: 480px) {
  .btn-grand {
    font-size: 1.2rem;
    padding: 15px 0;
    letter-spacing: 2px;
  }
}

/* 6. Grand Input Fields */
.input-group {
  width: 100%;
  max-width: 650px;
  margin: 0 auto 25px auto;
  text-align: left;
}

.input-label {
  display: block;
  font-family: 'Helvetica', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  /*text-transform: uppercase;*/
  color: var(--text-dark);
  margin-bottom: 8px;
  letter-spacing: 2px;
  padding-left: 5px;
}
.input-label-required {
  color:red;
}
.grand-input {
  width: 100%;
  padding: 20px 25px;
  font-family: 'Helvetica', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #000;
  background: #ffffff;
  border: 3px solid var(--silver-base);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box; /* Crucial for responsive width */
  outline: none;
}

/* Focus State: The "Obvious" Neon Glow */
.grand-input:focus {
  border-color: var(--neon-cyan);
  background-color: #fff;
  box-shadow: 
    0 0 10px var(--neon-cyan),
    0 0 25px rgba(0, 255, 255, 0.3);
}

/* Birthday Input Specific Styling */
input[type="date"].grand-input {
  font-family: 'Helvetica', sans-serif;
  cursor: pointer;
  color: var(--text-dark);
}

input[type="date"].grand-input:focus {
  color: #000;
}

/* Styling placeholders for that 'Plain' look */
.grand-input::placeholder {
  color: #ccc;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.summary-container {
  width: 100%;
  max-width: 650px;
  margin: 40px auto;
  background: #ffffff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

.summary-title {
  font-family: 'Helvetica', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  /*text-transform: uppercase;*/
  letter-spacing: 3px;
  color: var(--text-dark);
  margin-bottom: 20px;
  text-align: left;
}

.grand-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Helvetica', sans-serif;
}

.grand-table th {
  text-align: left;
  padding: 15px 1px;
  border-bottom: 2px solid var(--silver-base);
  color: var(--text-dark);
  /*text-transform: uppercase;*/
  letter-spacing: 1px;
  font-size: 1rem;
}

.grand-table td {
  /*padding: 20px 10px;*/
  padding:5px 0px;
  border-bottom: 1px solid #eee;
  color: #1a1a1a;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: left;
}

/* The Grand Total Row */
.total-row td {
  border-bottom: none;
  padding-top: 30px;
}

.total-label {
  /*text-transform: uppercase;*/
  letter-spacing: 2px;
  font-weight: 800;
  color: var(--text-dark);
}

.total-amount {
  font-size: 1.4rem !important;
  color: #000;
  /* Brighter Neon Glow for the final result */
  text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px rgba(0, 255, 255, 0.3);
}
.radio-question-container {
  width: 100%;
  max-width: 550px;
  margin: 40px auto;
  padding: 40px 25px 25px 25px;
  background: #ffffff;
  border: 3px solid var(--silver-base);
  border-radius: 16px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

/* Floating Title - "Ignites" when checked */
.radio-question-title {
  position: absolute;
  top: -18px;
  left: 30px;
  background: #f5f7f9; /* Matches your background color */
  padding: 5px 20px;
  font-family: 'Helvetica', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  /*text-transform: uppercase;*/
  letter-spacing: 3px;
  color: var(--text-dark);
  border: 3px solid var(--silver-base);
  border-radius: 50px;
  transition: all 0.3s ease;
}

/* THE "OBVIOUS" EFFECT: Container & Title ignite when any radio is checked */
.radio-question-container:has(input:checked) {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.15);
}

.radio-question-container:has(input:checked) .radio-question-title {
  /*border-color: var(--neon-cyan);*/
  color: #000;
  text-shadow: 0 0 10px var(--neon-cyan);
}

/* 10. The Radios Inside (Stable & Glowing) */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.grand-radio {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Ensures content starts from the left */
  padding: 0px 15px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.grand-radio .label-text {
  font-size: 1.2rem;
  text-align: left; /* Aligns both lines of text to the left */
  margin-left: 1.5rem; /* Creates space between the circle and text */
  line-height: 1.3; /* Better spacing for two-line text */
}
/* Hover: Subtle background shift */
.grand-radio:hover {
  background: rgba(0, 255, 255, 0.05);
}

.grand-radio input { display: none; }

/* The Circle */
.radio-mark {
  height: clamp(1.8rem, 5vw, 2.4rem);
  width: clamp(1.8rem, 5vw, 2.4rem);
  border: 3px solid var(--silver-base);
  border-radius: 50%;
  position: relative;
  transition: all 0.3s ease;
  flex-shrink: 0;
  background: #fff;
}

/* The Glowing Dot */
.radio-mark:after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 50%; height: 50%;
  background: var(--neon-cyan);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ACTIVE RADIO EFFECT: Text & Dot Glow */
.grand-radio input:checked ~ .label-text {
  color: #000;
  /* Brighter, more obvious glow from previous version */
  text-shadow: 
    0 0 12px var(--neon-cyan),
    0 0 25px var(--neon-cyan),
    0 0 45px rgba(0, 255, 255, 0.6);
}

.grand-radio input:checked ~ .radio-mark {
  border-color: var(--neon-cyan);
  background: #fff;
  box-shadow: 0 0 15px var(--neon-cyan);
}

.grand-radio input:checked ~ .radio-mark:after {
  transform: translate(-50%, -50%) scale(1);
}

.upload-container {
  width: 100%;
  max-width: 650px;
  margin: 0 auto 30px auto;
  background: #ffffff;
  border: 3px solid var(--silver-base);
  border-radius: 16px;
  padding: 30px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* Ignite container when hover/focus on upload */
.upload-container:has(#file-upload:focus),
.upload-container:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.05);
}

.recommendation-box {
  text-align: left;
  background: rgba(0, 255, 255, 0.03); /* Subtle Cyan Tint */
  border-left: 5px solid var(--neon-cyan);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 25px;
}

.recommendation-title {
  font-family: 'Helvetica', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  /*text-transform: uppercase;*/
  letter-spacing: 2px;
  color: #000;
  margin-bottom: 12px;
  display: block;
}

.recommendation-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recommendation-list li {
  font-family: 'Helvetica', sans-serif;
  font-size: 1.5rem;
  color: var(--text-dark);
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  line-height: 1.4;
}

/* Architectural Bullet Point */
.recommendation-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--neon-cyan);
  font-weight: bold;
}

/* Custom Upload Button Styling (Unified) */
.custom-file-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 18px 0;
  background: #ffffff;
  border: 2px solid var(--silver-base);
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Helvetica', sans-serif;
  font-weight: 700;
  /*text-transform: uppercase;*/
  letter-spacing: 2px;
  transition: all 0.3s ease;
}

.custom-file-label:hover {
  border-color: var(--neon-cyan);
  background: #f0fdfa;
  color: #000;
}
@media (max-width: 480px) {
  .grand-title { font-size: 1.4rem; letter-spacing: 4px; }
  .plain-list li { padding: 20px; font-size: 1rem; }
  .btn-grand {
    font-size: 1.2rem;
    padding: 15px 0;
    letter-spacing: 2px;
  }
  .radio-question-container { padding: 35px 15px 15px 15px; }
  .radio-question-title { left: 15px; font-size: 0.85rem; letter-spacing: 2px; }
  .summary-container { padding: 15px; }
  .grand-table td { font-size: 0.9rem; padding: 15px 5px; }
  .total-amount { font-size: 1.4rem !important; }
}

/* 14. Responsive Address Container */
.address-container {
  width: 100%;
  max-width: 550px;
  margin: 20px auto 30px auto;
  padding: 25px;
  background: #ffffff;
  border: 3px solid var(--silver-base);
  border-radius: 16px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* Ignite container when user is typing in any address */
.address-container:has(.grand-input:focus) {
  border-color: var(--neon-cyan);
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.05);
}

.address-field-wrapper {
  display: none; /* Hidden by default */
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 15. Grand Password Side-by-Side */
.password-flex-group {
  display: flex;
  gap: 20px;
  width: 100%;
  max-width: 650px; /* Slightly wider to accommodate two fields */
  margin: 0 auto 30px auto;
}

.password-item {
  flex: 1;
  min-width: 0; /* Prevents flex overflow */
}

/* Maintain space for the eye icon inside the flex item */
.password-field-container {
  position: relative;
  display: flex;
  align-items: center;
}

/* Mobile Breakpoint: Stack them when the screen is too narrow */
@media (max-width: 650px) {
  .password-flex-group {
    flex-direction: column;
    gap: 15px;
  }
}

/* 16. Student Type Container */
.student-status-container {
  width: 100%;
  max-width: 550px;
  margin: 0 auto 40px auto;
  padding: 30px;
  background: #ffffff;
  border: 3px solid var(--silver-base);
  border-radius: 16px;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.4s ease;
}

.student-status-container:has(input[value="former"]:checked) {
  border-color: var(--neon-cyan);
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.05);
}

/* Horizontal Radio Button Styling */
.status-toggle-group {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 15px;
}

.status-btn {
  flex: 1;
  padding: 15px;
  border: 2px solid var(--silver-base);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  /*text-transform: uppercase;*/
  letter-spacing: 1px;
  color: var(--text-dark);
  transition: all 0.3s ease;
}

.status-toggle-group input { display: none; }

.status-toggle-group input:checked + .status-btn {
  background-color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  color: #000;
  box-shadow: 0 0 15px var(--neon-cyan);
}

/* The ID Textbox Reveal */
.id-reveal-section {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 0;
}

.id-reveal-section.active {
  max-height: 150px; /* Room for label and input */
  opacity: 1;
  margin-top: 25px;
}

@media (max-width: 480px) {
  .status-toggle-group { flex-direction: column; }
}

.grand-container {
  padding: 10px;
  /* Deep Emerald: Obviously green, but dark enough to look expensive */
  background: linear-gradient(135deg, #064e3b, #065f46); 
  border: 3px solid #d4af37; 
  border-radius: 4px;
  /* Shadow uses a dark green tint instead of black */
  box-shadow: 0 15px 30px rgba(6, 78, 59, 0.3);
  text-align: center;
}

.grand-text {
  font-family: 'Playfair Display', serif;
  color: #d4af37;
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  /* Light gold glow for the text */
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}