body {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: 'Inter', sans-serif;
  color: #000;
  min-width: 320px;
  width: 100vw;
  overflow-x: hidden;
}

.header-bar {
  width: 100%;
  max-width: 1440px;
  height: 60px;
  background: rgba(235,235,235,0.94);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 10;
}
/* Navbar */
.navbar {
  width: 100vw;
  height: 60px;
  background: rgba(235,235,235,0.94);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-left, .nav-right {
  font-size: 20px;
}
.nav-right .phone {
  margin-left: 20px;
}

/* Footer */
.footer {
  width: 100vw;
  height: 60px;
  background: rgba(235,235,235,0.94);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  box-sizing: border-box;
  position: relative;
  z-index: 100;
  margin-top: 60px;
}
.footer-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-left, .footer-right {
  font-size: 20px;
}
.footer-right .phone {
  margin-left: 20px;
}
.copyright {
  color: #000;
}
.menu, .contact-socials-header, .phone-header {
  font-size: 20px;
}
.phone-header { margin-left: 20px; }

.tips-title {
  font-size: 3vw;
  font-weight: 400;
  margin: 80px 0 24px 5vw;
  max-width: 900px;
}
.tips-content {
  font-size: 1.5vw;
  margin: 0 0 40px 5vw;
  line-height: 1.5;
}
.tips-cta {
  font-size: 2vw;
  margin: 40px 0 24px 5vw;
  max-width: 900px;
}
/* mortgagetips.css - Namespaced for Loan Quote page only */

/* Container for Mortgage Tips section */
.get-loan-quote .mortgage-tips {
  margin: clamp(2rem, 6vw, 4rem) auto;
  padding: clamp(2rem, 6vw, 4rem);
  max-width: 1200px;
  background: #f9f9f9;
  border-radius: 24px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
  position: relative;
  text-align: center;
}

/* Section Title */
.get-loan-quote .tips-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: #013583;
  margin-bottom: clamp(1.5rem, 4vw, 2rem);
}

/* Tips Content */
.get-loan-quote .tips-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin: 0 auto;
  max-width: 900px;
  text-align: center;
}

/* Accent Boxes */
.get-loan-quote .accent-box {
  width: 100%;
  max-width: 600px;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border-radius: 16px;
  color: #000;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 500;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.get-loan-quote .accent-blue   { background-color: #013583; }
.get-loan-quote .accent-orange { background-color: #f5a623; }
.get-loan-quote .accent-red    { background-color: #d0021b; }

/* Paragraph Containers */
.get-loan-quote .tips-content p {
  background: #fff;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin: 0;
  width: 100%;
  max-width: 800px;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
}

/* Floating Circles */
.get-loan-quote .floating-circle.blue {
  position: absolute;
  width: clamp(4rem, 10vw, 8rem);
  height: clamp(4rem, 10vw, 8rem);
  background: #013583;
  border-radius: 50%;
  opacity: 0.15;
  top: clamp(-2rem, -5vw, -3rem);
  right: clamp(2rem, 5vw, 4rem);
}
.get-loan-quote .floating-circle.burgundy {
  position: absolute;
  width: clamp(3rem, 8vw, 6rem);
  height: clamp(3rem, 8vw, 6rem);
  background: #700000;
  border-radius: 50%;
  opacity: 0.15;
  bottom: clamp(-2rem, -5vw, -3rem);
  left: clamp(2rem, 5vw, 4rem);
}

/* Call-to-Action Box */
.get-loan-quote .tips-cta {
  background: #fff;
  padding: clamp(1.5rem, 4vw, 2rem);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 900px;
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.25rem);
}

/* .ellipse11, .ellipse12, .ellipse5, .ellipse6 {
  position: absolute;
  border-radius: 50%;
  z-index: -1;
}

.ellipse11 { width: 30vw; height: 30vw; left: 72vw; top: 5vw; background: #964006; }
.ellipse12 { width: 25vw; height: 25vw; left: 75vw; top: 35vw; background: #fff; }


.ellipse5 { width: 30vw; height: 30vw; left: -10vw; top: 60vw; background: #013583; }
.ellipse6 { width: 25vw; height: 25vw; left: -7vw; top: 90vw; background: #fff; } */

/* Hide dropdown by default */
.dropdown-menu {
  display: none;
  position: fixed;      /* ← make it stick to the viewport */
  top: 60px;            /* same offset below your sticky header */
  left: 40px;           /* adjust as needed to line up under “Menu” */
  background: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  border-radius: 8px;
  min-width: 200px;
  z-index: 999;
  flex-direction: column;
}

/* Show dropdown when .show class is added */
.dropdown-menu.show {
  display: flex;
}

/* Style dropdown links */
.dropdown-menu a {
  display: block;
  padding: 16px 24px;
  color: #000;
  text-decoration: none;
  font-size: 18px;
  border-bottom: 1px solid #eee;
  background: none;
}

.dropdown-menu a:last-child {
  border-bottom: none;
}

.menu-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #000;
  padding: 0;
}

/* Make sure the parent is positioned relative for absolute positioning */
.tips-content {
  position: relative;
  /* ...existing styles... */
}

/* Make sure the parent is positioned relative for absolute positioning */
.tips-content {
  position: relative;
  /* ...existing styles... */
}

@media (max-width: 900px) {
  .tips-title { font-size: 28px; margin: 60px 0 16px 6vw; }
  .tips-content, .tips-cta { font-size: 16px; margin-left: 6vw; }
}
.tips-title {
  font-size: 3vw;
  font-weight: 400;
  margin: 80px 0 24px 5vw;
  max-width: 900px;
}
.tips-content {
  font-size: 1.5vw;
  margin: 0 0 40px 5vw;
  line-height: 1.5;
}
.accent-box {
  border-radius: 16px;
  padding: 18px 24px;
  margin: 24px 0;
  color: #000000;
  font-size: 1.2em;
  font-weight: 500;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}


.footer {
  width: 100vw;
  background: #e0e0e0;
  display: flex;
  justify-content: center;
  padding: 20px 40px;
  box-sizing: border-box;
  position: relative;
  z-index: 100;
  margin-top: 500px;
}

.footer-content {
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  gap: 16px;
}

.footer-left, .footer-right {
  font-size: 18px;
}

.footer-right .phone {
  margin-left: 20px;
}

@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
  }

  .footer-left, .footer-right {
    font-size: 16px;
  }
}