.loan-helper {
    text-align: center;
    margin-bottom: 30px;
}

.helper-copy {
  text-align: center;
  margin: auto;
  width: 65%;
}

.blog-title {
  text-align: center;
  margin: auto;
  width: 85%;
  margin-top:35px;
  margin-bottom: 55px;
}


.blog-copy {
  text-align: center;
  margin: auto;
  width: 80%;
}

img {
    max-width: 100%;
    height: auto;
}

#custom-section {
  text-align: center;
  width: 60%;
  margin: auto;
  margin-bottom: 30px;
}
#custom-section-text {
  margin-bottom: 30px;
}

#tool-form {
  width: 25%;
  margin: auto;
}
  /* Only the submit button is matched by this selector,
         but to be sure you could use an id or class for that button */

#feedback-form {
  width: 42%;
  margin: auto;
  font-size: small;
}

#feedback-button {
  width: 29%;
  margin: 1% 37%
}

#waitlist-form {
  width: 28%;
  margin: auto;
  font-size: small;
}

#waitlist-button {
  width: 43%;
  margin: 1% 31%
}


.btn-primary {
  display: block;
  width: 80%;
  margin: 2% auto;  /* Changed from margin: 2% 22% */
  text-decoration: none !important;
}

.equal-width {
  width:24%;
}


.bold-row {
  font-weight: bold; /* Makes the text bold */
  border-top: 2px solid #000; /* Adds a bold line above the row */
}

.not-bold {
  font-weight: normal;
}





.row {
  font-size: small;
}

.contact-info {
  text-align: center;
  width: 65%;
  margin: auto;
  margin-top: 80px;
  margin-bottom: 50px;
}

.stripe-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.results-disclaimer-content {
  text-align: center;
  width: 45%;
  margin: auto;
  margin-bottom: 20px;
  font-size: x-small;
}

.faq-title {
  text-align: center;
  margin: auto;
}

.faq-copy {
  text-align: center;
  margin: auto;
  width: 80%;
}

.about-us-title {
  text-align: center;
  margin: auto;
}

.about-us-copy {
  text-align: center;
  margin: auto;
  width: 80%;
}

.login-title {
  text-align: center;
  margin-left: auto;
  margin-top: 60px;
  margin-bottom: 20px;
}

.login-copy {
  text-align: center;
  margin: auto;
  margin-top:40px;
  width: 20%;
}

.register-title {
  text-align: center;
  margin-left: auto;
  margin-top: 60px;
  margin-bottom: 20px;
}

.register-copy {
  text-align: center;
  margin: auto;
  margin-top:40px;
  width: 20%;
}




.container {
  max-width: 800px;
  margin: auto;
  padding: 20px;
}

.privacy-heading {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.refund-heading {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.terms-heading {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.last-updated {
  text-align: center;
  font-style: italic;
  margin-bottom: 20px;
}

.policy-section {
  margin-bottom: 20px;
}

.policy-section p {
  line-height: 1.6;
  text-align: justify;
}

.policy-section ul {
  list-style-type: disc;
  margin-left: 20px;
}

.policy-section li {
  margin-bottom: 10px;
}

a {
  color: #007bff;
}

a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .index-form, #tool-form, #feedback-form, #waitlist-form {
      width: 80%; /* Adjust form widths for mobile */
      margin: 0 auto;
  }

  .helper-copy, .contact-info, .results-disclaimer-content, .faq-copy, .about-us-copy, .login-copy, .register-copy {
      width: 80%; /* Adjust content width for better readability */
  }

  .btn-primary {
    width: 80%;
    margin: 2% auto;  /* Changed from margin: 2% 32% */
  }

  /* Additional responsive adjustments */
}

@media (max-width: 768px) {
  body {
      font-size: 16px; /* Increase base font size for mobile */
  }


}

.subtopic-icon {
  display: block;
  margin: 0 auto;
  width: 45px;
  height: auto;
  margin-bottom: 10px;
}

.blog-graphic-a1 {
  display: block;
  margin: 0 auto;
  width: 180px;
  height: auto;
  margin-top: 40px;
  margin-bottom: 40px;
}
.blog-graphic-a2 {
  display: block;
  margin: 0 auto;
  width: 400px;
  height: auto;
  margin-bottom: 40px;
}
.blog-graphic-a3 {
  display: block;
  margin: 0 auto;
  width: 400px;
  height: auto;
  margin-bottom: 40px;
}
.blog-graphic-b1 {
  display: block;
  margin: 0 auto;
  width: 180px;
  height: auto;
  margin-top: 40px;
  margin-bottom: 40px;
}
.blog-graphic-b2 {
  display: block;
  margin: 0 auto;
  width: 400px;
  height: auto;
  margin-bottom: 40px;
}
.blog-graphic-b3 {
  display: block;
  margin: 0 auto;
  width: 400px;
  height: auto;
  margin-bottom: 40px;
}
.visual-div {
  width: 60%;
  color:gray;
  height: 15px;
  border-width: 3px;
  margin: 20px auto;
}
/* Adjusting custom CTA button styling for better integration */
.cta-button {
  padding: 10px 20px; /* Adjust padding for size */
  border-radius: 5px; /* Consistent with Bootstrap styling */
  font-weight: bold; /* Ensures visibility */
  display: inline-block; /* For layout */
  margin-top: 10px; /* Space from preceding content */
  /* Hover and focus states are handled with Bootstrap classes */
}

.cta-button:hover, .cta-button:focus {
  background-color: #0056b3; /* Darker shade for hover state */
  color: white;
  text-decoration: none;
}

.centered-list-container {
  text-align: center;
}
.centered-list {
  list-style: none;
  padding: 0;
  display: inline-block; /* This makes the block width fit its content */
  text-align: left; /* Resets text alignment for list items */
}
.centered-list li::before {
  content: "•"; /* Custom bullet */
  color: black; /* Bullet color */
  display: inline-block;
  width: 1em; /* Space for the bullet */
  margin-left: -1em; /* Pull bullet into position */
}
.sources-list {
  list-style-type: none;
  text-align:left;
  font-size:x-small;

}

/* Add these styles to your existing styles.css file */

.accordion {
  max-width: 800px;
  margin: 0 auto;
}

.accordion-button:not(.collapsed) {
  background-color: #e7f1ff;
  color: #0c63e4;
}

.accordion-button:focus {
  box-shadow: none;
  border-color: rgba(0,0,0,.125);
}

.card {
  max-width: 800px;
  margin: 2rem auto;
  border: none;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* .btn-primary {
  background-color: #0056b3;
  border-color: #0056b3;
}

.btn-primary:hover {
  background-color: #004494;
  border-color: #004494;
} */

/* Ensure consistent navbar styling */
/* .navbar {
  padding: 0.5rem 1rem;
} */

/* Navbar styling */
.navbar {
  background: white !important; /* Override Bootstrap's bg-light */
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar-brand {
  color: #007bff !important;
  font-weight: 600;
  font-size: 1.3rem;
  margin-right: 0;
}

.navbar-light .navbar-nav .nav-link {
  color: #1a1a1a;
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: color 0.2s;
}

.navbar-light .navbar-nav .nav-link:hover {
  color: #007bff;
}

.navbar-light .navbar-nav .nav-link.active {
  color: #007bff;
}

/* Footer styling */
.footer {
  background: #1a1a1a !important; /* Dark background */
  color: #ffffff !important;
  padding: 1.5rem 0;
  margin-top: auto;
}

.footer a {
  color: rgba(255, 255, 255, 0.8) !important; /* Lighter text for links */
  text-decoration: none;
  transition: color 0.2s;
}

.footer a:hover {
  color: #ffffff !important;
}

.footer p {
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 0;
}

/* Add subtle gradient to footer */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
      rgba(0, 123, 255, 0) 0%,
      rgba(0, 123, 255, 0.5) 50%,
      rgba(0, 123, 255, 0) 100%
  );
}


.navbar-nav {
  margin-left: 20px; /* Adjust this value to bring links closer or further from the brand */
}


.nav-link {
  color: rgba(0,0,0,.5);
}

.nav-link:hover {
  color: rgba(0,0,0,.7);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .container {
      padding-left: 10px;
      padding-right: 10px;
  }
}

.navbar-container {
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
  max-width: 1400px; /* Increased max-width for larger screens */
  margin: 0 auto;
}

@media (min-width: 1400px) {
  .navbar-container {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (max-width: 1399px) {
  .navbar-container {
    max-width: 1140px;
  }
}

@media (max-width: 1199px) {
  .navbar-container {
    max-width: 960px;
  }
}

@media (max-width: 991px) {
  .navbar-container {
    max-width: 720px;
  }
}

@media (max-width: 767px) {
  .navbar-container {
    max-width: 540px;
  }
}

@media (max-width: 575px) {
  .navbar-container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
}

.navbar-nav .nav-link:hover {
  text-decoration: none;
}

.navbar-brand:hover {
  text-decoration: none;
}

.footer a {
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

.splash-logo {
  margin: 0 auto;
  width: 120px;
  height: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 5px;
}



/* Markdown styling
#chat-messages ul, #chat-messages ol {
  padding-left: 20px;
}

#chat-messages li {
  margin-bottom: 5px;
}

#chat-messages pre, #chat-messages code {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 2px 4px;
  font-family: monospace;
}

#chat-messages blockquote {
  border-left: 3px solid rgba(0, 0, 0, 0.1);
  margin: 0;
  padding-left: 10px;
  color: rgba(0, 0, 0, 0.5);
} */



.plan-selection-container {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.plan-selection-container .btn-group {
  margin-top: 15px;
}

.plan-selection-container .btn-group .btn {
  width: 50%;
}

.plan-selection-container .btn-group .btn.active {
  background-color: #007bff;
  color: white;
}

#personalized-strategies {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 15px;
  margin-top: 20px;
}

#strategies-list {
  padding-left: 240px;
}

#strategies-list li {
  margin-bottom: 10px;
}


.notice-banner {
  background-color: #ffe600;
  color: #000;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.chatbot-note {
  font-size: 0.9em;
  color: #555;
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
}

.chatbot-note a {
  color: #007bff;
  text-decoration: none;
}

.chatbot-note a:hover {
  text-decoration: underline;
}

.testimonial-card {
  text-align: center;
  padding: 20px;
  margin: 0 auto;
  max-width: 600px;
}

.testimonial-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
}

.testimonial-text {
  font-style: italic;
  margin-bottom: 10px;
}

.testimonial-author {
  font-weight: bold;
}

.carousel-control-prev,
.carousel-control-next {
  width: 5%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #333;
  border-radius: 50%;
}

/* Refinancing Info Page Styles */

.card-title {
  text-align: center;
  color: #0056b3;
  font-weight: 600;
  margin-bottom: 1rem;
}

.card-subtitle {
  text-align: center;
  color: #6c757d;
  font-weight: 500;
  margin-bottom: 1rem;
}

h1.text-center.mb-5 {
  color: #0056b3;
  font-weight: 700;
  margin-bottom: 2rem !important;
}

.card {
  margin-bottom: 1.5rem;
}

/* Responsive adjustment */
@media (max-width: 768px) {
  .container.my-5 {
      padding: 0 15px;
  }
}


.standard-plan-column {
  position: relative;
  width: 50%;
  margin-left: 50%;
  margin-bottom: 90px;  /* Add spacing below the button container */
}

#splash-button-container {
  position: absolute;
  transform: translateX(-50%);
  width: auto;
  text-align: center;
}


#splash-button-container .btn {
  margin: 0;
  width: 300px;
  white-space: nowrap;
}

/* @keyframes fall {
  0% {
      transform: translateY(-10vh) rotate(0deg);
      opacity: 1;
  }
  100% {
      transform: translateY(100vh) rotate(360deg);
      opacity: 0;
  }
} */
.grayed-out-column {
  opacity: 0.35;
  position: relative;
}

/* Only show the text for table header cells with this class */
th.grayed-out-column::after {
  content: "Plan under legal challenge";
  position: absolute;
  top: 280%;
  left: 47%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-size: 0.8em;
  color: #ff0000;
  white-space: nowrap;
  pointer-events: none;
}

/* Modern Hero Section */
.hero-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 4rem 2rem;
  text-align: center;
  border-radius: 0 0 2rem 2rem;
  position: relative;
  overflow: hidden;
}

/* Add to styles.css */
.hero-section {
  background: 
      radial-gradient(circle at 20% 20%, rgba(0, 123, 255, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(0, 86, 179, 0.05) 0%, transparent 50%),
      linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  position: relative;
  padding: 6rem 2rem; /* Increased padding */
}

/* Add animated shapes */
.hero-section::before,
.hero-section::after {
    content: '';
    position: absolute;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(0, 123, 255, 0.1), rgba(0, 86, 179, 0.1));
    animation: float 20s infinite linear;
}

.hero-section::before {
  top: -10rem;
  left: -10rem;
  animation-delay: -5s;
}

.hero-section::after {
  bottom: -10rem;
  right: -10rem;
}



.hero-content {
  max-width: 800px;
  margin: 0 auto;
}




.hero-content h1 {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  color: #1a1a1a;
}

.hero-content h1 {
  animation: fadeInUp 1s ease-out;
  font-size: 4rem; /* Larger font */
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hero-subtitle {
  animation: fadeInUp 1s ease-out 0.2s;
  animation-fill-mode: both;
  font-size: 1.5rem;
  color: #495057;
}

/* Add floating circles */
.floating-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
  pointer-events: none;
}

.circle-1 {
  width: 15rem;
  height: 15rem;
  background: linear-gradient(45deg, #007bff, #0056b3);
  top: 20%;
  left: 10%;
  animation: float 15s infinite ease-in-out;
}

.circle-2 {
  width: 10rem;
  height: 10rem;
  background: linear-gradient(45deg, #0056b3, #004085);
  top: 40%;
  right: 15%;
  animation: float 18s infinite ease-in-out reverse;
}

.circle-3 {
  width: 8rem;
  height: 8rem;
  background: linear-gradient(45deg, #007bff, #004085);
  bottom: 15%;
  left: 20%;
  animation: float 12s infinite ease-in-out;
}



.highlight {
  background: linear-gradient(120deg, #007bff 0%, #0056b3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: #6c757d;
  margin-bottom: 2rem;
}

/* Animation keyframes */
@keyframes float {
  0% {
      transform: translate(0, 0) rotate(0deg);
  }
  33% {
      transform: translate(2rem, 2rem) rotate(120deg);
  }
  66% {
      transform: translate(-2rem, 1rem) rotate(240deg);
  }
  100% {
      transform: translate(0, 0) rotate(360deg);
  }
}

.highlight {
  background: linear-gradient(
      120deg, 
      #007bff 0%, 
      #0056b3 50%, 
      #007bff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 5s ease infinite;
}

/* Ensure content stays above background elements */
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

/* Add subtle parallax effect on scroll */
.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Optional: Add subtle gradient animation */
@keyframes gradientShift {
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
}

/* Modern Chat Interface */
.chat-section {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.chat-container {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

.chat-header {
  padding-top: 3rem; /* Make room for the toggle */
  text-align: center;
  margin-bottom: 2rem;
}

.chat-header h2 {
  font-size: 1.8rem;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
}

.chat-messages {
  max-height: 500px;
  overflow-y: auto;
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 8px;
  background: #f8f9fa;
}

.chat-subtitle {
  color: #6c757d;
}

.modern-chat-messages {
  height: 400px;
  overflow-y: auto;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
}

.chat-input-wrapper {
  display: flex;
  gap: 8px;
  margin-bottom: 1.5rem;
}

.modern-chat-input {
  flex: 1;
  padding: 1rem 1.5rem;
  border: 2px solid #e9ecef;
  border-radius: 0.75rem;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.modern-chat-input:focus {
  border-color: #007bff;
  outline: none;
}

.modern-send-button {
  background: #007bff;
  color: white;
  border: none;
  border-radius: 0.75rem;
  padding: 8px 12px;
  min-width: 44px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.modern-send-button:hover {
  background: #0056b3;
}

/* Chat Messages */
.user-message {
  background: #007bff;
  color: white;
  padding: 0.75rem 1rem;  /* Reduced padding */
  border-radius: 1rem 1rem 0.25rem 1rem;
  margin: 0.5rem 0;  /* Reduced margin */
  max-width: 50%;    /* Reduced max-width */
  margin-left: auto;
  font-size: 0.95rem;  /* Slightly smaller font */
  line-height: 1.4;    /* Tighter line height */
  word-wrap: break-word;
}

.bot-message {
  background: white;
  color: #1a1a1a;
  padding: 0.75rem 1rem;  /* Reduced padding */
  border-radius: 1rem 1rem 1rem 0.25rem;
  margin: 0.5rem 0;  /* Reduced margin */
  max-width: 70%;    /* Reduced max-width */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);  /* Subtler shadow */
  font-size: 0.95rem;  /* Slightly smaller font */
  line-height: 1.4;    /* Tighter line height */
  word-wrap: break-word;
}

/* Markdown Styling in Messages */
.bot-message p {
  margin-bottom: 12px;
}

.bot-message h1, .bot-message h2, .bot-message h3, 
.bot-message h4, .bot-message h5, .bot-message h6 {
  margin-top: 20px;
  margin-bottom: 10px;
}

.bot-message ul, .bot-message ol {
  margin-bottom: 15px;
  padding-left: 30px;
}

.bot-message li {
  margin-bottom: 8px;
}

.bot-message pre {
  margin: 15px 0;
  padding: 12px;
  background-color: #f4f4f4;
  border-radius: 4px;
  overflow-x: auto;
}

.bot-message code {
  background-color: #f4f4f4;
  padding: 2px 4px;
  border-radius: 3px;
}

.bot-message blockquote {
  margin: 15px 0;
  padding: 10px 15px;
  border-left: 4px solid #ccc;
  background-color: #f9f9f9;
}

/* Suggested Questions */
.suggested-questions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.modern-suggestion {
  background: #e9ecef;
  border: none;
  border-radius: 2rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  color: #495057;
  cursor: pointer;
  transition: background-color 0.2s;
}

.modern-suggestion:hover {
  background: #dee2e6;
}

/* Feedback Buttons */
.feedback-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.feedback-buttons {
  display: flex;
  gap: 0.4rem;  /* Reduced gap */
  margin-top: 0.4rem;  /* Reduced margin */
}

.feedback-btn {
  padding: 0.2rem 0.4rem;  /* Reduced padding */
  border-radius: 0.4rem;   /* Reduced border radius */
  font-size: 0.8rem;       /* Smaller font size */
}

.feedback-btn.selected {
  background: #e9ecef;
  cursor: not-allowed;
}

/* Responsive Design */
@media (max-width: 768px) {
  .chat-section {
      padding: 1rem;
  }
  
  .chat-container {
      padding: 1rem;
  }
  
  .suggested-questions {
      flex-direction: column;
  }
  
  .modern-suggestion {
      width: 100%;
  }
}

/* Partners/Logo Section */
.partners-section {
  padding: 3rem 0;
  background: white;
  overflow: hidden;
}

.partners-title {
  text-align: center;
  color: #1a1a1a;
  font-size: 1.5rem;
  font-weight: 500;
}

.partners-subtitle {
  text-align: center;
  color: #6d6767;
  font-size: 1rem;
  margin-bottom: 2rem;
  font-weight: 500;
}

.logo-carousel {
  position: relative;
  padding: 1rem 0;
  background: white;
  overflow: hidden;
  width: 100%;
}

.logo-track {
  display: flex;
  animation: scroll 20s linear infinite;
  width: fit-content;
}

.logo-slide {
  flex: 0 0 auto;
  padding: 0 4rem;
  transition: transform 0.3s ease;
}

.logo-slide img {
  height: 65px;
  object-fit: contain;
  filter: grayscale(100%) opacity(60%);
  transition: filter 0.3s ease;
}

.logo-slide img:hover {
  filter: grayscale(0%) opacity(100%);
}

/* Add gradient fade on edges */
.logo-carousel::before,
.logo-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  z-index: 2;
  pointer-events: none;
}

.logo-carousel::before {
  left: 0;
  background: linear-gradient(to right, white, transparent);
}

.logo-carousel::after {
  right: 0;
  background: linear-gradient(to left, white, transparent);
}

@keyframes scroll {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-50%);
  }
}

/* Pause animation on hover */
.logo-carousel:hover .logo-track {
  animation-play-state: paused;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .logo-slide {
      padding: 0 2.5rem;
  }
  
  .logo-slide img {
      height: 50px;
  }
  
  .logo-carousel::before,
  .logo-carousel::after {
      width: 100px;
  }
}

/* Rate Check Section */
.rate-check-section {
  text-align: center;
  padding: 2rem 0 1rem;
  max-width: 1000px;
  margin: 0 auto;
}


@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.chat-container {
  background: linear-gradient(145deg, #ffffff, #f8f9fa);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 
      0 20px 40px rgba(0, 0, 0, 0.05),
      0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 1.5rem;
  padding: 3rem;
  transform: translateY(-50px); /* Overlap with hero section */
}

.chat-header h2 {
  font-size: 2.2rem;
  font-weight: 700;
  background: linear-gradient(120deg, #007bff, #0056b3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}

.floating-element {
  position: absolute;
  pointer-events: none;
  opacity: 0.5;
  filter: blur(2px);
  z-index: 0;
}

.floating-dollar {
  font-size: 3rem;
  color: #28a745;
  animation: float 8s infinite ease-in-out;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(10px, -10px) rotate(5deg); }
  75% { transform: translate(-10px, 10px) rotate(-5deg); }
}

.partners-section {
  background: linear-gradient(to bottom, #fff, #f8f9fa);
  padding: 5rem 0;
}

.logo-slide img {
  transition: all 0.3s ease;
  filter: grayscale(100%) opacity(50%);
}

.logo-slide img:hover {
  filter: grayscale(0%) opacity(100%);
  transform: scale(1.05);
}

/* Trust Indicators Section */
.trust-indicators {
  padding: 3rem 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(248, 249, 250, 0.8));
  backdrop-filter: blur(10px);
  margin-top: 34px;  /* Overlap with hero section */
  margin-bottom: -20px;
  position: relative;
  z-index: 2;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
}

.trust-item {
  text-align: center;
  padding: 2rem;
  background: white;
  border-radius: 1rem;
  box-shadow: 
      0 10px 30px rgba(0, 0, 0, 0.05),
      0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trust-item:hover {
  transform: translateY(-5px);
  box-shadow: 
      0 15px 35px rgba(0, 0, 0, 0.1),
      0 3px 10px rgba(0, 0, 0, 0.05);
}

.trust-number {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(120deg, #007bff, #0056b3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.trust-label {
  color: #495057;
  font-size: 1.1rem;
  font-weight: 500;
}

/* Add subtle animation */
@keyframes fadeInSlideUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.trust-item {
  animation: fadeInSlideUp 0.6s ease forwards;
}

.trust-item:nth-child(2) {
  animation-delay: 0.2s;
}

.trust-item:nth-child(3) {
  animation-delay: 0.4s;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .trust-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
      padding: 0 1.5rem;
  }

  .trust-item {
      padding: 1.5rem;
  }

  .trust-number {
      font-size: 2rem;
  }

  .trust-label {
      font-size: 1rem;
  }
}

/* Star Rating Styles */
.star-rating {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
}

.star {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
}

.star::before,
.star::after {
  content: '★';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 20px;
  line-height: 1;
}

.star::before {
  color: #e0e0e0; /* Light gray background star */
}

.star::after {
  color: #007bff; /* Filled star color matching your theme */
}

/* Full stars (first 4 stars) */
.star:nth-child(-n+4)::after {
  clip-path: inset(0 0 0 0); /* 100% fill */
}

/* Last star (90% filled) */
.star:last-child::after {
  clip-path: inset(0 25% 0 0); /* 90% fill */
}

/* Optional: Add subtle animation on hover */
.trust-item:hover .star::after {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* How It Works Section */
.how-it-works {
  padding: 6rem 0;
  background: linear-gradient(to bottom, #f8f9fa, #ffffff);
}

.how-it-works-header {
  text-align: center;
  margin-bottom: 4rem;
}

.how-it-works-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 1rem;
}

.how-it-works-subtitle {
  font-size: 1.2rem;
  color: #6c757d;
  max-width: 600px;
  margin: 0 auto;
}

.steps-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.step-card {
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease;
  position: relative;
}

.step-card:hover {
  transform: translateY(-5px);
}

.step-number {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin: 0 auto 1.5rem;
}

.step-icon {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(120deg, #007bff, #0056b3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.step-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 1rem;
}

.step-description {
  color: #6c757d;
  font-size: 1rem;
  line-height: 1.6;
}

/* Connector lines between steps */
.step-card::after {
  content: '';
  position: absolute;
  top: 40px;
  right: -1rem;
  width: 2rem;
  height: 2px;
  background: linear-gradient(90deg, #007bff, #0056b3);
  display: none;
}

.step-card:not(:last-child)::after {
  display: block;
}

/* Responsive Design */
@media (max-width: 992px) {
  .steps-container {
      grid-template-columns: 1fr;
      max-width: 500px;
  }
  
  .step-card::after {
      display: none;
  }
  
  .step-card {
      margin-bottom: 1rem;
  }
}

/* Add these styles for the tool form grid */
.tool-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.form-group {
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #1a1a1a;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
  outline: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tool-form-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
  }
}

/* Demo Toggle Styles */
.demo-toggle-wrapper {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8f9fa;
  padding: 8px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.demo-toggle-label {
  font-size: 0.9rem;
  color: #6c757d;
  cursor: pointer;
  user-select: none;
}

.toggle-switch {
  position: relative;
  width: 48px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e0e0e0;
  transition: .4s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: #007bff;
}

input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

/* Update chat-container to support absolute positioning of toggle */
.chat-container {
  position: relative;
}

.results-table-wrapper {
  margin: 20px 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow-x: auto;
}

.results-table-wrapper table {
  margin-bottom: 0;
}

.results-table-wrapper th,
.results-table-wrapper td {
  padding: 12px 15px;
  vertical-align: middle;
}

.results-table-wrapper thead th {
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  font-weight: 600;
}

.results-table-wrapper tbody tr:last-child {
  border-top: 2px solid #dee2e6;
  font-weight: 700;
}

.form-disabled {
  background-color: #f8f9fa;
  cursor: not-allowed;
  opacity: 0.7;
}

.form-disabled:hover {
  border-color: #ced4da;
}


.refinance-recommendation, .save-plan-recommendation {
  margin: 20px 0;
  padding: 15px;
  border-radius: 8px;
  background-color: #f8f9fa;
  text-align: center;
}

.recommendation-text {
  margin-bottom: 15px;
  font-size: 1.1em;
  color: #333;
}



.bot-message .rate-check-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
  color: white;
  text-decoration: none;
}


.bot-message .rate-check-note {
  margin-top: 8px;
  font-size: 0.9em;
  color: #666;
}

.section-header {
  font-weight: 600;
  font-size: 1.1em;
  color: #333;
  margin: 20px 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 2px solid #e0e0e0;
}

.bot-message .section-header:first-child {
  margin-top: 0;
}

.chat-subtitle {
  margin-bottom: 0.4rem;  /* Reduced from default */
}

.privacy-note {
  margin-top: 0.2rem;  /* Reduced space between subtitles */
  font-size: x-small;
  color: rgba(23, 95, 202, 0.808);
}

.policy-references {
  margin-top: 15px;
  padding: 10px;
  background: #f8f9fa;
  border-left: 3px solid #007bff;
  font-size: 0.9em;
}

.policy-header {
  font-weight: 600;
  color: #0056b3;
  margin-bottom: 5px;
}

/* .citations-section {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e0e0e0;
}

.citations-header {
  font-weight: 600;
  font-size: 1.1em;
  color: #333;
  margin: 20px 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 2px solid #e0e0e0;
}

.citation-item {
  font-size: 0.85em;
  color: #555;
  margin-bottom: 4px;
  font-family: monospace;
} */

.help-text {
  font-size: x-small;
  margin-left: 5px;
}

.faq-link {
  color: #007bff;
  text-decoration: none;
}

.faq-link:hover {
  text-decoration: underline;
  color: #0056b3;
}

/* Position help text next to label */
.form-group label {
  display: inline-block;
}

.form-group .help-text {
  display: inline-block;
}

/* Blog specific styles */
.content-section {
  padding: 4rem 0;
  background: linear-gradient(to bottom, #f8f9fa, #ffffff);
}

.content-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 3rem;
  padding: 0 1rem;
}

.content-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.content-subtitle {
  font-size: 1.5rem;
  color: #6c757d;
}

.content-body {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
}

.blog-article {
  margin-bottom: 4rem;
}

.content-card {
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
}

.card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
}

.card-icon {
  width: 60px;  /* Slightly larger icons */
  height: 60px;
  margin-bottom: 1rem;  /* Space between icon and header */
}

.card-header h2 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 600;
  color: #1a1a1a;
}

/* Individual image sizing for data visualizations */
.data-section {
  margin: 3rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Base styles for all data graphics */
.data-graphic {
  margin-bottom: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Individual image sizing */
.data-graphic[alt="Borrower A inputs"] {
  width: 26%;  /* Adjust this value as needed */
}

.data-graphic[alt="Borrower A costs"],
.data-graphic[alt="Borrower A savings"] {
  width: 45%;  /* Adjust this value as needed */
}

.data-graphic[alt="Borrower B inputs"] {
  width: 26%;  /* Adjust this value as needed */
}

.data-graphic[alt="Borrower B costs"],
.data-graphic[alt="Borrower B savings"] {
  width: 45%;  /* Adjust this value as needed */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .data-graphic[alt="Borrower A inputs"],
  .data-graphic[alt="Borrower B inputs"] {
      width: 90%;
  }

  .data-graphic[alt="Borrower A costs"],
  .data-graphic[alt="Borrower A savings"],
  .data-graphic[alt="Borrower B costs"],
  .data-graphic[alt="Borrower B savings"] {
      width: 100%;
  }
}

.visual-div {
  margin: 2rem 0;
  border: none;
  border-top: 4px solid #e9ecef;
}

.cta-section {
  text-align: center;
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
}

.cta-button {
  margin: 1.5rem auto;
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

.cta-subtitle {
  color: #6c757d;
  font-size: 0.9rem;
}

.references-section {
  background: #f8f9fa;
}

.reference-list {
  list-style: none;
  padding: 0;
}

.reference-list li {
  margin-bottom: 0.5rem;
}

.sources-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e9ecef;
}

.sources-list {
  list-style: none;
  padding: 0;
  font-size: 0.9rem;
  color: #6c757d;
}

.sources-list li {
  margin-bottom: 0.5rem;
}

/* Add styles for exhibit labels */
.exhibit-label {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 2rem 0 1rem;
  text-align: center;
}

/* FAQ specific styles */
.faq-card {
  transition: transform 0.2s ease;
}

.faq-card:hover {
  transform: translateY(-2px);
}

.faq-card .card-header {
  border-bottom: none;
  padding-bottom: 0;
}

.faq-card .card-header h2 {
  font-size: 1.5rem;
  color: #1a1a1a;
  margin: 0;
}

.faq-card p {
  color: #495057;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.faq-card p:last-child {
  margin-bottom: 0;
}

.faq-card a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
}

.faq-card a:hover {
  text-decoration: underline;
}

.footnotes {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e9ecef;
}

.footnotes p {
  font-size: 0.9rem;
  color: #6c757d;
  margin-bottom: 0.5rem;
}

/* About Us specific styles */
.content-card {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}

.content-card:nth-child(2) { animation-delay: 0.2s; }
.content-card:nth-child(3) { animation-delay: 0.4s; }
.content-card:nth-child(4) { animation-delay: 0.6s; }
.content-card:nth-child(5) { animation-delay: 0.8s; }
.content-card:nth-child(6) { animation-delay: 1.0s; }
.content-card:nth-child(7) { animation-delay: 1.2s; }

@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.content-card a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.content-card a:hover {
  color: #0056b3;
  text-decoration: underline;
}

.loading-indicator {
  display: none;
  text-align: center;
  padding: 1rem;
  color: #6c757d;
}

.loading-dots {
  display: inline-block;
}

.loading-dots::after {
  content: '';
  animation: dots 1.5s infinite;
}

@keyframes dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

.chat-support-message {
  font-size: 0.9em;
  color: #6c757d;
  padding: 10px 15px;
  margin: 10px 0;
  border-left: 3px solid #17a2b8;
  background-color: #f8f9fa;
  border-radius: 0 4px 4px 0;
}

.chat-support-message a {
  color: #17a2b8;
  text-decoration: none;
}

.chat-support-message a:hover {
  text-decoration: underline;
}

.user-message, .bot-message {
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 8px;
  max-width: 85%;
}

.user-message {
  background: #007bff;
  color: white;
  margin-left: auto;
}

.bot-message {
  background: #fff;
  border: 1px solid #e0e0e0;
  margin-right: auto;
}

.chat-input-wrapper {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.modern-chat-input {
  flex: 1;
  padding: 0.8rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.modern-chat-input:focus {
  border-color: #007bff;
  outline: none;
}

.modern-send-button {
  padding: 0.8rem 1.2rem;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.modern-send-button:hover {
  background: #0056b3;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .chat-container {
      padding: 1rem;
      margin: 0;
      border-radius: 0;
  }
  
  .chat-header h2 {
      font-size: 1.5rem;
  }
  
  .user-message, .bot-message {
      max-width: 90%;
      padding: 0.8rem;
  }
  
  .tool-form-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
  }
  
  .form-group {
      margin-bottom: 1rem;
  }
  
  .modern-chat-input {
      padding: 0.6rem 0.8rem;
  }
  
  .modern-send-button {
      padding: 0.6rem 1rem;
  }
  
  .suggested-questions {
      flex-direction: column;
      gap: 0.5rem;
  }
  
  .modern-suggestion {
      width: 100%;
      margin: 0.25rem 0;
  }
}

.demo-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 1.5rem;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 8px;
}

.demo-toggle-label {
  font-size: 0.9rem;
  color: #6c757d;
  margin: 0;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: #007bff;
}

input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

/* Mobile adjustments for demo toggle */
@media (max-width: 768px) {
  .demo-toggle-wrapper {
      justify-content: center;
      padding: 12px;
      margin: 0.5rem -0.5rem 1rem -0.5rem;
      border-radius: 0;
  }
  
  .demo-toggle-label {
      font-size: 0.85rem;
  }
}

/* Results Table Mobile Styling */
.results-table-container {
  overflow-x: auto;
  margin: 1rem -1rem;
  padding: 0 1rem;
  -webkit-overflow-scrolling: touch;
}

.results-table {
  width: 100%;
  min-width: 600px; /* Ensures table doesn't get too squeezed */
  border-collapse: collapse;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .results-table {
      font-size: 0.8rem;
  }
  
  .results-table th,
  .results-table td {
      padding: 8px 4px;
  }
  
  .results-table-container {
      position: relative;
  }
  
  .results-table-container::after {
      content: '← Scroll →';
      position: absolute;
      bottom: -20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.75rem;
      color: #6c757d;
      opacity: 0.8;
  }
}



/* Update the results table wrapper in chat */
.chat-results-wrapper {
  margin: 1rem -1rem;
  padding: 0 1rem;
  background: #f8f9fa;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .demo-toggle-wrapper {
      position: relative;
      top: 0;
      right: 0;
      margin: 0 auto 1rem auto;
      justify-content: center;
      width: fit-content;
  }

  .chat-header {
      padding-top: 0;
  }
}

/* Results Table Styling */
.results-table-container {
  overflow-x: auto;
  margin: 1rem -1rem;
  padding: 0 1rem;
  -webkit-overflow-scrolling: touch;
}

.results-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.results-table td.table-success {
  background-color: #d4edda !important;
  transition: background-color 0.3s ease;
}

.results-table tr:hover td.table-success {
  background-color: #c3e6cb !important;
}

@media (max-width: 768px) {
  .results-table td.table-success {
      position: relative;
  }
  
  .results-table td.table-success::after {
      content: '✓';
      position: absolute;
      top: 4px;
      right: 4px;
      font-size: 0.7rem;
      color: #28a745;
  }
}

.rate-check-container {
  margin: 1rem 0;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.rate-check-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: #ffffff;
  border: 2px solid #007bff;
  border-radius: 8px;
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 240px;  /* Desktop max-width */
  margin: 0 auto;    /* Center the button */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.rate-check-content {
  display: flex;
  flex-direction: column;  /* This ensures vertical stacking */
  align-items: center;     /* Centers items horizontally */
  gap: 4px;
  width: 100%;            /* Takes full width of button */
}

.rate-check-text {
  font-size: 0.85rem;
  color: #007bff;
  line-height: 1;
  margin-bottom: 2px;
  margin-right: 2px;    /* Extra spacing between text and logo */
}



.rate-check-sup {
  font-size: 0.6rem;
  vertical-align: super;
  margin-left: 1px;
}

@media (max-width: 768px) {
  .rate-check-button {
    padding: 12px 16px;
    width: 100%;      /* Fill container width */
    max-width: 100%; /* Ensure it doesn't overflow */
  }

  .rate-check-container {
      padding: 1rem 0.5rem;  /* Adjusted container padding */
  }
  .rate-check-text {
      font-size: 0.8rem;
  }
  
  .splash-logo {
      height: 24px;
      width: auto;
  }
}

.rate-check-note {
  margin: 0.5rem 0 0 0;
  font-size: 0.8rem;
  color: #6c757d;
  text-align: center;
}




.results-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 0.9rem;
  table-layout: fixed;
}

.results-table th:first-child {
  width: 180px;
  min-width: 180px;
  text-align: left;
}

.results-table th:not(:first-child),
.results-table td:not(:first-child) {
  width: calc((100% - 180px) / 2);
  text-align: center;
}

.results-table td:first-child {
  text-align: left;
  padding-right: 15px;
}

@media (max-width: 768px) {
  .results-table th:first-child {
      width: 140px;
      min-width: 140px;
  }
  
  .results-table th:not(:first-child),
  .results-table td:not(:first-child) {
      width: calc((100% - 140px) / 2);
  }
}