/* ===================================

   FSBO-MLS.com - Custom Styles

   =================================== */



/* CSS Variables */

:root {

  --navy: #07396a;

  --deep: #003b70;

  --gold: #d99513;

  --gold2: #eba617;

  --text: #0b2f59;

  --muted: #4c5f76;

  --line: #d7dce5;

  --bg: #f7f9fc;

}



/* Global Styles */

* {

  box-sizing: border-box;

}



body {

  margin: 0;

  font-family: Arial, Helvetica, sans-serif;

  background: white;

  color: var(--text);

  overflow-x: hidden;

}



.page {

  max-width: 2048px;

  margin: 0 auto;

  background: #fff;

  box-shadow: 0 0 0 1px var(--line);

}



/* ===================================

   Header / Navigation

   =================================== */

.topbar {

  background: #fff;

  border-bottom: 1px solid #d5dbe5;

  padding: 0;

  position: sticky;

  top: 0;

  z-index: 1000;

  transition: box-shadow 0.3s ease;

}



.topbar.scrolled {

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}



.topbar .navbar {

  padding: 12px 20px;

}



.logo img {

  width: 220px;

  display: block;

  transition: transform 0.3s ease;

}



.logo img:hover {

  transform: scale(1.05);

}



.nav-links {

  gap: 4px;

  font-size: 15px;

  font-weight: 700;

}



.nav-links .nav-link {

  color: #092f5f;

  text-decoration: none;

  white-space: nowrap;

  transition: color 0.3s ease;

  padding: 0.3rem 0;

  font-size: 14px;

}

.navbar-nav {

    flex-wrap: wrap;

     align-items: center;

}

.nav-links .nav-link:hover {

  color: var(--gold);

}



.btn-cta {

  background: linear-gradient(#e2a02b, #cf8507);

  color: white !important;

  border-radius: 6px;

  padding: 12px 24px !important;

  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);

  font-weight: 800;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  font-size: 15px;

}



.btn-cta:hover {

  transform: translateY(-2px);

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}



.btn-cta-large {

  background: linear-gradient(#e2a02b, #cf8507);

  color: white !important;

  border-radius: 6px;

  padding: 18px 38px;

  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);

  font-weight: 800;

  font-size: 17px;

  text-decoration: none;

  display: inline-block;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.btn-cta-large:hover {

  transform: translateY(-2px);

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}



.navbar-toggler {

  border: 2px solid var(--navy);

  padding: 8px 12px;

}



.navbar-toggler:focus {

  box-shadow: 0 0 0 0.25rem rgba(7, 57, 106, 0.25);

}



.dropdown-menu {

  border: 1px solid var(--line);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



.dropdown-item {

  color: var(--text);

  transition: background-color 0.3s ease;

}



.dropdown-item:hover {

  background-color: #f8f9fa;

  color: var(--gold);

}



/* ===================================

   Hero Section

   =================================== */

.hero {

  min-height: 383px;

  position: relative;

  display: flex;

  align-items: center;

  overflow: hidden;

  background: linear-gradient(

      90deg,

      #003d74 0%,

      #073c70 37%,

      rgba(7, 60, 112, 0.58) 50%,

      rgba(7, 60, 112, 0) 68%

    ),

    url("../main-hero_banner.png") right center/auto 100% no-repeat;

}



.hero-inner {

  padding: 60px 0;

  color: white;

  position: relative;

  z-index: 2;

}



.hero h1 {

  font-size: 54px;

  line-height: 0.98;

  margin: 0 0 16px;

  font-weight: 900;

  letter-spacing: -1.8px;

}



.hero h1 .gold {

  color: #efa915;

}



.hero p {

  font-size: 18px;

  line-height: 1.25;

  margin: 0 0 24px;

  font-weight: 700;

  max-width: 600px;

}



.search {

  display: flex;

  max-width: 650px;

  height: 58px;

  border-radius: 4px;

  overflow: hidden;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);

  transition: transform 0.3s ease;

}



.search:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);

}



.search .input {

  flex: 1;

  background: white;

  color: #98a0aa;

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 0 12px;

  font-size: 17px;

}



.search button {

  border: 0;

  background: #e49a0d;

  color: white;

  padding: 0 36px;

  font-size: 17px;

  font-weight: 900;

  cursor: pointer;

  transition: background 0.3s ease;

}



.search button:hover {

  background: #cf8507;

}



.low {

  margin-top: 18px !important;

  font-size: 21px !important;

}



.check {

  display: inline-grid;

  place-items: center;

  width: 31px;

  height: 31px;

  border: 3px solid white;

  border-radius: 50%;

  margin-right: 13px;

  font-weight: bold;

}



.low b {

  font-size: 25px;

  color: #f4a815;

}



/* ===================================

   Benefits Section

   =================================== */

.benefits-row {

  background: #fff;

  border-bottom: 1px solid var(--line);

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  padding: 17px 0;

  position: relative;

}



.benefit {

  display: flex;

  align-items: center;

  gap: 25px;

  padding: 20px;

  position: relative;

  transition: transform 0.3s ease;

}



.benefit:hover {

  transform: translateY(-5px);

}



.benefit::after {

  content: '';

  position: absolute;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  width: 2px;

  height: 60%;

  background: #d5dbe4;

}



.benefit:last-child::after {

  display: none;

}



.icon {

  font-size: 51px;

  color: #df960c;

  line-height: 1;

}



.benefit h3 {

  margin: 0 0 5px;

  font-size: 18px;

  color: var(--text);

  text-transform: uppercase;

}



.benefit p {

  margin: 0;

  color: #27354a;

  font-size: 14px;

  line-height: 1.25;

  font-weight: 600;

}



/* ===================================

   Savings Calculator Section

   =================================== */

.savings-calculator-section {

  background: linear-gradient(135deg, #003b70 0%, #003563 100%);

  padding: 80px 0;

  position: relative;

  overflow: hidden;

}



.savings-calculator-section::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),

              radial-gradient(circle at 80% 50%, rgba(10, 60, 114, 0.1) 0%, transparent 50%);

  pointer-events: none;

}



.calculator-wrapper {

  max-width: 800px;

  margin: 0 auto;

  position: relative;

  z-index: 1;

}



.calculator-title {

  text-align: center;

  font-size: 30px;

  font-weight: 900;

  color: white;

  margin: 0 0 10px;

  letter-spacing: -0.5px;

}



.gold-text {

  color: #d4af37;

}



.calculator-subtitle {

  text-align: center;

  font-size: 16px;

  color: rgba(255, 255, 255, 0.7);

  margin: 0 0 50px;

}



.calculator-content {

  background: rgba(255, 255, 255, 0.05);

  backdrop-filter: blur(10px);

  border-radius: 20px;

  padding: 26px 40px;

  border: 1px solid rgba(255, 255, 255, 0.1);

}



/* Slider Groups */

.slider-group {

  margin-bottom: 13px;

}



.slider-label {

  display: block;

  color: white;

  font-size: 16px;

  font-weight: 600;

  margin-bottom: 15px;

}



.slider-label span {

  color: #d4af37;

  font-size: 24px;

  font-weight: 900;

  margin-left: 10px;

}



/* Custom Slider */

.custom-slider {

  -webkit-appearance: none;

  appearance: none;

  width: 100%;

  height: 8px;

  background: linear-gradient(to right, #d4af37 0%, #d4af37 50%, #4a4a4a 50%, #4a4a4a 100%);

  border-radius: 10px;

  outline: none;

  transition: all 0.3s;

}



.custom-slider::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  width: 24px;

  height: 24px;

  background: #d4af37;

  border-radius: 50%;

  cursor: pointer;

  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.3);

  transition: all 0.3s;

}



.custom-slider::-webkit-slider-thumb:hover {

  transform: scale(1.2);

  box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.4);

}



.custom-slider::-moz-range-thumb {

  width: 24px;

  height: 24px;

  background: #d4af37;

  border-radius: 50%;

  cursor: pointer;

  border: none;

  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.3);

  transition: all 0.3s;

}



.custom-slider::-moz-range-thumb:hover {

  transform: scale(1.2);

  box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.4);

}



.slider-range {

  display: flex;

  justify-content: space-between;

  margin-top: 8px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.5);

}



/* Comparison Cards */

.comparison-cards {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  margin: 13px 0;

}



.comparison-card {

  background: rgba(0, 0, 0, 0.3);

  border-radius: 12px;

  padding: 15px 20px;

  text-align: center;

  border: 2px solid rgba(255, 255, 255, 0.1);

  transition: all 0.3s;

}



.traditional-card {

  border-color: rgba(255, 255, 255, 0.2);

}



.fsbo-card {

  border-color: #d4af37;

  background: rgba(212, 175, 55, 0.1);

}



.card-label {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.6);

  text-transform: uppercase;

  letter-spacing: 1px;

  margin-bottom: 10px;

  font-weight: 600;

}



.card-amount {

  font-size: 28px;

  font-weight: 900;

  color: white;

  line-height: 1;

}



.fsbo-amount {

  color: #d4af37;

}



/* Savings Display */

.savings-display {

  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 100%);

  border: 2px solid #d4af37;

  border-radius: 16px;

  padding: 16px;

  text-align: center;

  margin: 30px 0;

}



.savings-text {

  font-size: 30px;

  font-weight: 900;

  color: white;

  margin-bottom: 10px;

}



.savings-text span {

  color: #d4af37;

}



.savings-subtext {

  font-size: 14px;

  color: rgba(255, 255, 255, 0.7);

  line-height: 1.6;

}



.savings-subtext span {

  color: #d4af37;

  font-weight: 700;

}



/* Calculator CTA */

.calculator-cta {

  text-align: center;

  margin-top: 30px;

}



.btn-calculator-cta {

  display: inline-block;

  background: linear-gradient(135deg, #d4af37 0%, #c19b2f 100%);

  color: #1a1a1a;

  padding: 18px 50px;

  font-size: 18px;

  font-weight: 900;

  border-radius: 50px;

  text-decoration: none;

  text-transform: uppercase;

  letter-spacing: 1px;

  transition: all 0.3s;

  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);

}



.btn-calculator-cta:hover {

  transform: translateY(-3px);

  box-shadow: 0 6px 30px rgba(212, 175, 55, 0.6);

  color: #1a1a1a;

  text-decoration: none;

}



/* Responsive */

@media (max-width: 768px) {

  .savings-calculator-section {

    padding: 60px 0;

  }



  .calculator-title {

    font-size: 32px;

  }



  .calculator-content {

    padding: 30px 20px;

  }



  .comparison-cards {

    grid-template-columns: 1fr;

    gap: 15px;

  }



  .savings-text {

    font-size: 24px;

  }



  .btn-calculator-cta {

    padding: 15px 40px;

    font-size: 16px;

  }

}



/* ===================================

   Features Section

   =================================== */

.feature-wrap {

  background: #fff;

}



.feature-block {

  padding: 18px 38px 26px;

}



.feature-block:first-child {

  border-right: 2px solid #cfd7e2;

}



.block-title {

  text-align: center;

  margin: 0 0 18px;

  font-size: 22px;

  color: #103e77;

  font-weight: 900;

  text-transform: uppercase;

}



.feat {

  text-align: center;

  min-height: 116px;

  padding: 15px 16px;

  border-right: 2px solid #d9dee7;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.feat:hover {

  transform: translateY(-5px);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



.feat:last-child {

  border-right: 0;

}



.feat .fi {

  font-size: 40px;

  color: #0f3b70;

  margin-bottom: 6px;

}



.feat h4 {

  font-size: 15px;

  margin: 0 0 3px;

  color: #113d73;

  line-height: 1.05;

}



.feat p {

  font-size: 13px;

  line-height: 1.23;

  margin: 0;

  color: #1d2c42;

  font-weight: 500;

}



.feature-block:nth-child(2) .fi {

  color: #d9960e;

}



/* ===================================

   Property Types Section

   =================================== */

.property-types-section {

  background: #f8f9fc;

  padding: 80px 0;

  position: relative;

}



.property-types-header {

  text-align: center;

  margin-bottom: 50px;

}



.section-label {

  display: inline-block;

  font-size: 12px;

  font-weight: 700;

  color: #0a3c72;

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-bottom: 10px;

  padding: 6px 16px;

  background: rgba(10, 60, 114, 0.1);

  border-radius: 20px;

}



.section-title-types {

  font-size: 36px;

  font-weight: 900;

  color: #0b2f59;

  margin: 15px 0 0;

  line-height: 1.2;

}



.property-types-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 25px;

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 20px;

}



.property-type-card {

  background: white;

  border-radius: 16px;

  padding: 35px 25px;

  text-align: center;

  text-decoration: none;

  color: inherit;

  border: 2px solid #e5e9f2;

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  min-height: 200px;

}



.property-type-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(135deg, #0a3c72 0%, #083056 100%);

  opacity: 0;

  transition: opacity 0.4s ease;

  z-index: 0;

}



.property-type-card:hover::before {

  opacity: 1;

}



.property-type-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 12px 40px rgba(10, 60, 114, 0.2);

  border-color: #0a3c72;

}



.property-type-icon {

  width: 70px;

  height: 70px;

  background: linear-gradient(135deg, #f8f9fc 0%, #e5e9f2 100%);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 20px;

  transition: all 0.4s ease;

  position: relative;

  z-index: 1;

}



.property-type-icon i {

  font-size: 32px;

  color: #0a3c72;

  transition: all 0.4s ease;

}



.property-type-card:hover .property-type-icon {

  background: white;

  transform: scale(1.1) rotate(5deg);

}



.property-type-card:hover .property-type-icon i {

  color: #0a3c72;

}



.property-type-name {

  font-size: 20px;

  font-weight: 700;

  color: #0b2f59;

  margin: 0 0 10px;

  transition: color 0.4s ease;

  position: relative;

  z-index: 1;

}



.property-type-card:hover .property-type-name {

  color: white;

}



.property-type-count {

  font-size: 14px;

  color: #6b7280;

  font-weight: 600;

  transition: color 0.4s ease;

  position: relative;

  z-index: 1;

}



.property-type-card:hover .property-type-count {

  color: rgba(255, 255, 255, 0.9);

}



.property-type-arrow {

  position: absolute;

  bottom: 20px;

  right: 20px;

  width: 35px;

  height: 35px;

  background: #0a3c72;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transform: translateX(-10px);

  transition: all 0.4s ease;

  z-index: 1;

}



.property-type-arrow i {

  font-size: 14px;

  color: white;

}



.property-type-card:hover .property-type-arrow {

  opacity: 1;

  transform: translateX(0);

  background: white;

}



.property-type-card:hover .property-type-arrow i {

  color: #0a3c72;

}



/* Responsive */

@media (max-width: 1200px) {

  .property-types-grid {

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 20px;

  }

}



@media (max-width: 768px) {

  .property-types-section {

    padding: 60px 0;

  }



  .section-title-types {

    font-size: 28px;

  }



  .property-types-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

  }



  .property-type-card {

    padding: 25px 15px;

    min-height: 160px;

  }



  .property-type-icon {

    width: 60px;

    height: 60px;

    margin-bottom: 15px;

  }



  .property-type-icon i {

    font-size: 28px;

  }



  .property-type-name {

    font-size: 16px;

  }



  .property-type-count {

    font-size: 12px;

  }

}



@media (max-width: 480px) {

  .property-types-grid {

    grid-template-columns: 1fr;

  }

}



/* ===================================

   Listings Section

   =================================== */

.listings-section {

  padding: 40px 90px;

  background: white;

}



.section-title {

  text-align: center;

  margin: 0 0 30px;

  font-size: 22px;

  color: #0d3c73;

  font-weight: 900;

  text-transform: uppercase;

}



.cards-row {

  margin-bottom: 30px;

}



/* Card Link Wrapper */

.card-link {

  text-decoration: none;

  color: inherit;

  display: block;

  height: 100%;

  transition: all 0.3s ease;

}



.card-link:hover {

  text-decoration: none;

  color: inherit;

}



.card {

  position: relative;

  background: #fff;

  border: 1px solid #d5dce6;

  border-radius: 5px;

  overflow: hidden;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  height: 100%;

}



.card-link:hover .card {

  transform: translateY(-10px);

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

}



.card:hover {

  transform: translateY(-10px);

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

}



.card img {

  width: 100%;

  height: 137px;

  object-fit: cover;

  display: block;

  transition: transform 0.3s ease;

}



.card-link:hover .card img,

.card:hover img {

  transform: scale(1.1);

}



.tag {

  position: absolute;

  top: 9px;

  left: 10px;

  background: #0a3c72;

  color: #fff;

  padding: 7px 15px;

  border-radius: 5px;

  font-weight: 900;

  font-size: 17px;

  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);

  z-index: 1;

}



.card-body {

  padding: 12px 20px 13px;

}



.addr {

  font-size: 17px;

  font-weight: 900;

  color: #15457f;

  margin-bottom: 4px;

}



.city {

  font-size: 14px;

  color: #133f74;

  margin-bottom: 12px;

}



.meta {

  display: flex;

  gap: 24px;

  color: #25384f;

  font-size: 13px;

  align-items: center;

}



.meta span {

  display: flex;

  align-items: center;

  gap: 6px;

  font-weight: 600;

}



.meta i {

  color: #0a3c72;

  font-size: 14px;

}



.view-wrap {

  text-align: center;

  margin: 12px 0 0;

}



.outline {

  background: #fff;

  border: 2px solid #e3a22c;

  color: #143e73;

  border-radius: 4px;

  padding: 11px 38px;

  font-weight: 900;

  cursor: pointer;

  transition: all 0.3s ease;

  text-decoration:none;

}



.outline:hover {

  background: #e3a22c;

  color: white;

  transform: translateY(-2px);

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}



/* ===================================

   CTA Section

   =================================== */

.cta {

  background: linear-gradient(90deg, #003b70, #003563);

  padding: 30px 0;

  color: #fff;

}



.cta-left {

  display: flex;

  align-items: center;

  gap: 25px;

}



.cta-icon {

  width: 67px;

  height: 67px;

  border: 4px solid #e6a01b;

  border-radius: 50%;

  display: grid;

  place-items: center;

  font-size: 34px;

  color: #e6a01b;

  flex-shrink: 0;

}



.cta h3 {

  margin: 0;

  font-size: 22px;

  color: white;

}



.cta p {

  margin: 3px 0 0;

  font-size: 17px;

}



.trust {

  display: flex;

  gap: 24px;

  font-size: 13px;

  font-weight: 800;

  color: #eaf3ff;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

}



.trust span {

  display: flex;

  align-items: center;

  gap: 8px;

}



/* ===================================

   Footer

   =================================== */

.footer {

  background: linear-gradient(135deg, #063a7b, #002c67);

  border-top: none;

}



.footer-main {

  padding: 50px 0 40px;

}



.footer-main .container-fluid {

  padding: 0 95px;

}



.footer-brand {

  color: white;

}



.footer-logo {

  width: 180px;

  margin-bottom: 15px;

  display: block;

}



.footer-tagline {

  color: rgba(255, 255, 255, 0.85);

  font-size: 14px;

  line-height: 1.6;

  margin-bottom: 20px;

  font-weight: 400;

}



.social-icons {

  display: flex;

  gap: 12px;

  margin-top: 15px;

}



.social-icon {

  width: 38px;

  height: 38px;

  border: 2px solid rgba(255, 255, 255, 0.6);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  text-decoration: none;

  font-weight: 900;

  font-size: 16px;

  transition: all 0.3s ease;

}



.social-icon:hover {

  background: white;

  color: #063a7b;

  transform: scale(1.1);

}



.footer h4 {

  margin: 0 0 18px;

  color: white;

  font-size: 13px;

  text-transform: uppercase;

  font-weight: 900;

  letter-spacing: 0.5px;

}



.footer a,

.footer p {

  /*display: block;*/

  margin: 0 0 10px;

  text-decoration: none;

  color: rgba(255, 255, 255, 0.85);

  font-size: 14px;

  transition: all 0.3s ease;

  font-weight: 400;

}



.footer h4 + a,

.footer h4 + a + a,

.footer h4 + a + a + a,

.footer h4 + a + a + a + a {

    display: block;

    margin-bottom: 10px;

}



.footer a:hover {

  color: #063a7b;

  /*padding-left: 5px;*/

}



.socials {

  display: flex;

  gap: 10px;

  margin-top: 8px;

}



.socials i {

  width: 32px;

  height: 32px;

  border: 2px solid #1b4e83;

  border-radius: 50%;

  display: grid;

  place-items: center;

  font-style: normal;

  color: #1b4e83;

  font-weight: 900;

  cursor: pointer;

  transition: all 0.3s ease;

}



.socials i:hover {

  background: #1b4e83;

  color: white;

  transform: scale(1.1);

}



.bbb {

  margin-top: 12px;

  width: 145px;

  height: 52px;

  border: 1px solid #8fb5d5;

  border-radius: 5px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #1f6a9a;

  font-weight: 900;

  font-size: 13px;

  line-height: 1.2;

}



.bbb-badge-footer {

  margin-top: 10px;

}



.bbb-badge-footer img {

  max-width: 120px;

  height: auto;

}



.bottom {

  background: #013d72;

  color: white;

  padding: 0;

  font-size: 13px;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.bottom-content {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 95px;

  max-width: 2048px;

  margin: 0 auto;

  gap: 20px;

}



.bottom-left,

.bottom-center,

.bottom-right {

  flex: 1;

}



.bottom-left {

  text-align: left;

  white-space: nowrap;

  flex: 0 0 auto;

}



.bottom-center {

  text-align: center;

  white-space: nowrap;

  flex: 1 1 auto;

  min-width: 0;

}



.bottom-right {

  text-align: right;

  flex: 0 0 auto;

}



.bottom a {

  color: white;

  text-decoration: none;

  transition: color 0.3s ease;

  display: inline;

  white-space: nowrap;

}



.bottom a:hover {

  color: var(--gold);

}



.bottom .separator {

  margin: 0 8px;

  color: white;

  display: inline;

  white-space: nowrap;

}



.badges {

  font-size: 20px;

  letter-spacing: 8px;

  font-weight: 700;

  display: inline-block;

}



.footer-badges {

  height: 35px;

  width: auto;

  display: block;

  margin-left: auto;

}



/* ===================================

   Responsive Styles

   =================================== */



/* Large Tablets and Small Desktops */

@media (max-width: 1200px) {

  .topbar .navbar {

    padding: 12px 30px;

  }



  .logo img {

    width: 260px;

  }



  .hero h1 {

    font-size: 48px;

  }



  .listings-section {

    padding: 40px 50px;

  }



  .footer-main .container-fluid {

    padding: 0 50px;

  }



  .bottom-content {

    padding: 12px 50px;

  }

}



/* Tablets */

@media (max-width: 992px) {

  .topbar .navbar {

    padding: 10px 20px;

  }



  .logo img {

    width: 240px;

  }



  .nav-links {

    /*gap: 15px;*/

    margin-top: 15px;

    text-align: left;

    

  }



  .nav-links .nav-item {

    width: 100%;

    padding: 0px 0px !important;

  }



  .nav-links .nav-link {

    padding: 8px 0;

  }



  .btn-cta {

    padding: 10px 20px !important;

  }



  .hero {

    min-height: 500px;

    background: linear-gradient(90deg, #003d74, rgba(7, 60, 112, 0.85)),

      url("assets/hero-house.png") center/cover no-repeat;

  }



  .hero-inner {

    padding: 55px 0;

  }



  .hero h1 {

    font-size: 42px;

  }



  .search {

    max-width: 100%;

  }



  .benefit {

    padding: 20px;

    justify-content: center;

  }



  .benefit::after {

    display: none;

  }



  .benefit {

    border-bottom: 2px solid #d5dbe4;

  }



  .benefit:last-child {

    border-bottom: 0;

  }



  .feature-block:first-child {

    border-right: 0;

    border-bottom: 2px solid #cfd7e2;

  }



  .feat {

    border-right: 0;

    border-bottom: 2px solid #d9dee7;

    min-height: auto;

  }



  .feat:last-child {

    border-bottom: 0;

  }



  .listings-section {

    padding: 40px 25px;

  }



  .cta-left {

    justify-content: center;

  }



  .footer-main .container-fluid {

    padding: 0 25px;

  }



  .bottom-content {

    padding: 15px 25px;

  }



  .bottom-left,

  .bottom-center,

  .bottom-right {

    text-align: center;

  }

}



/* Mobile Devices */

@media (max-width: 768px) {

  .logo img {

    width: 200px;

  }



  .hero h1 {

    font-size: 36px;

    letter-spacing: -1px;

  }



  .hero p {

    font-size: 16px;

  }



  .search {

    flex-direction: column;

    height: auto;

  }



  .search .input {

    padding: 15px 20px;

  }



  .search button {

    padding: 15px 20px;

  }



  .low {

    font-size: 18px !important;

  }



  .low b {

    font-size: 22px;

  }



  .benefit {

    flex-direction: column;

    text-align: center;

    gap: 15px;

  }



  .icon {

    font-size: 45px;

  }



  .block-title {

    font-size: 20px;

  }



  .feat .fi {

    font-size: 35px;

  }



  .section-title {

    font-size: 20px;

  }



  .card img {

    height: 180px;

  }



  .cta h3 {

    font-size: 20px;

  }



  .cta p {

    font-size: 15px;

  }



  .trust {

    font-size: 12px;

  }



  .footer-main {

    padding: 40px 0 30px;

  }



  .footer-main .container-fluid {

    padding: 0 20px;

  }



  .footer-brand {

    text-align: center;

    margin-bottom: 30px;

  }



  .footer-logo {

    margin: 0 auto 15px;

  }



  .footer-tagline {

    text-align: center;

  }



  .social-icons {

    justify-content: center;

  }



  .footer h4 {

    margin-top: 20px;

  }



  .bottom-content {

    flex-direction: column;

    padding: 15px 20px;

    gap: 12px;

  }



  .bottom-left,

  .bottom-center,

  .bottom-right {

    text-align: center;

    white-space: normal;

  }



  .bottom-center {

    display: flex;

    flex-direction: column;

    gap: 8px;

  }



  .bottom a {

    display: block;

  }



  .bottom .separator {

    display: none;

  }



  .badges {

    margin-top: 5px;

    font-size: 18px;

    letter-spacing: 6px;

  }



  .footer-badges {

    margin: 5px auto 0;

  }

  

  /* New Code */

  

    .footer .col-lg.col-md-6:not(:first-child) {

        display: flex;

        flex-wrap: wrap;

    }



    .footer .col-lg.col-md-6:not(:first-child) h4 {

        width: 100%;

    }



    .footer .col-lg.col-md-6:not(:first-child) a {

        display: inline-block;

        width: 48%;

        margin-bottom: 8px;

    }

    

        .accredited-col {

        width: 100%;

        text-align: center;

    }



    .accredited-col .bbb-badge-footer {

        width: 100%;

        display: flex;

        justify-content: center;

        align-items: center;

    }



    .accredited-col .bbb-badge-footer img {

        display: block;

        margin: 0 auto;

    }

}



/* Small Mobile Devices */

@media (max-width: 576px) {

  .logo img {

    width: 180px;

  }



  .hero h1 {

    font-size: 28px;

  }



  .hero p {

    font-size: 14px;

  }



  .benefit h3 {

    font-size: 16px;

  }



  .benefit p {

    font-size: 13px;

  }



  .feat h4 {

    font-size: 14px;

  }



  .feat p {

    font-size: 12px;

  }



  .card img {

    height: 150px;

  }



  .cta-icon {

    width: 55px;

    height: 55px;

    font-size: 28px;

  }



  .cta h3 {

    font-size: 18px;

  }



  .cta p {

    font-size: 14px;

  }



  .bottom-content {

    padding: 12px 15px;

    font-size: 12px;

  }



  .bottom .separator {

    display: none;

  }



  .bottom a {

    display: block;

    margin: 3px 0;

  }



  .badges {

    font-size: 16px;

    letter-spacing: 5px;

  }

}



/* Animation Classes */

.fade-in {

  animation: fadeIn 0.6s ease-in;

}



@keyframes fadeIn {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}



.slide-up {

  animation: slideUp 0.6s ease-out;

}



@keyframes slideUp {

  from {

    transform: translateY(30px);

    opacity: 0;

  }

  to {

    transform: translateY(0);

    opacity: 1;

  }

}





/* ============================================

   User Profile Dropdown in Header

   ============================================ */



.user-dropdown {

  position: relative;

}



.user-profile-link {

  display: flex !important;

  align-items: center;

  gap: 10px;

  padding: 8px 16px !important;

  border-radius: 50px;

  transition: all 0.3s ease;

}



.user-profile-link:hover {

  background: #f8f9fc;

}



.user-avatar {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  overflow: hidden;

  border: 2px solid #e9ecef;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: white;

}



.user-avatar img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.user-name {

  font-weight: 600;

  color: #0b2f59;

  font-size: 14px;

}



.user-dropdown-menu {

  min-width: 260px;

  border-radius: 12px;

  box-shadow: 0 4px 20px rgba(0,0,0,0.15);

  border: none;

  padding: 8px 0;

  margin-top: 8px;

}



.dropdown-header {

  padding: 12px 20px;

}



.user-info {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.user-info strong {

  font-size: 15px;

  color: #0b2f59;

  font-weight: 700;

}



.user-info small {

  font-size: 13px;

  color: #6c757d;

}



.user-dropdown-menu .dropdown-item {

  padding: 10px 20px;

  font-size: 14px;

  color: #495057;

  display: flex;

  align-items: center;

  gap: 12px;

  transition: all 0.3s ease;

}



.user-dropdown-menu .dropdown-item:hover {

  background: #f8f9fc;

  color: #0a3c72;

  padding-left: 24px;

}



.user-dropdown-menu .dropdown-item svg {

  flex-shrink: 0;

  opacity: 0.7;

}



.user-dropdown-menu .dropdown-item:hover svg {

  opacity: 1;

}



.logout-item {

  color: #dc3545 !important;

}



.logout-item:hover {

  background: #fff5f5 !important;

}



.dropdown-divider {

  margin: 8px 0;

  border-color: #e9ecef;

}



/* Responsive */

@media (max-width: 991px) {

  .user-profile-link {

    padding: 12px 16px !important;

    border-radius: 8px;

  }

  

  .user-dropdown-menu {

    position: static !important;

    transform: none !important;

    width: 100%;

    margin-top: 8px;

    box-shadow: none;

    border: 1px solid #e9ecef;

  }

}





.role-loan-officer {

    background: linear-gradient(135deg, #d4af37 0%, #c19b2f 100%);

    color: white;

    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);

}



.user-role-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-top: 8px;

    transition: all 0.3s ease;

}



.role-buyer {

    background: linear-gradient(135deg, #28a745 0%, #218838 100%);

    color: white;

    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);

}



.role-seller {

    background: linear-gradient(135deg, #bf3982 0%, #fd104d 100%) !important;

    color: white;

    box-shadow: 0 2px 8px rgba(10, 60, 114, 0.3);

}







.nav-item {

    gap: 4px !important;

    padding: 5px 1px !important;

}



.nav-item svg {

    margin-right: 10px;

}



/* ===================================

   Popular Cities Section

   =================================== */

.popular-cities-section {

  padding: 80px 0;

  background: white;

  position: relative;

}



.popular-cities-header {

  text-align: center;

  margin-bottom: 50px;

}



.section-title-cities {

  font-size: 36px;

  font-weight: 900;

  color: #0b2f59;

  margin: 15px 0 10px;

  line-height: 1.2;

}



.section-subtitle-cities {

  font-size: 16px;

  color: #6b7280;

  margin: 0;

  font-weight: 400;

}



.cities-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 20px;

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 20px;

}



.city-card {

  background: white;

  border: 2px solid #e5e9f2;

  border-radius: 12px;

  padding: 20px 24px;

  text-decoration: none;

  color: inherit;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;

  overflow: hidden;

}



.city-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(10, 60, 114, 0.05), transparent);

  transition: left 0.5s ease;

}



.city-card:hover::before {

  left: 100%;

}



.city-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 8px 25px rgba(10, 60, 114, 0.15);

  border-color: #0a3c72;

  text-decoration: none;

}



.city-card-content {

  display: flex;

  align-items: center;

  gap: 16px;

}



.city-icon {

  width: 50px;

  height: 50px;

  background: linear-gradient(135deg, #f8f9fc 0%, #e5e9f2 100%);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  transition: all 0.3s ease;

}



.city-icon i {

  font-size: 22px;

  color: #0a3c72;

  transition: all 0.3s ease;

}



.city-card:hover .city-icon {

  background: linear-gradient(135deg, #0a3c72 0%, #083056 100%);

  transform: scale(1.1);

}



.city-card:hover .city-icon i {

  color: white;

}



.city-info {

  flex: 1;

  min-width: 0;

}



.city-name {

  font-size: 18px;

  font-weight: 700;

  color: #0b2f59;

  margin: 0 0 5px;

  transition: color 0.3s ease;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.city-card:hover .city-name {

  color: #0a3c72;

}



.city-count {

  font-size: 14px;

  color: #6b7280;

  font-weight: 500;

  transition: color 0.3s ease;

}



.city-card:hover .city-count {

  color: #0a3c72;

}



.city-arrow {

  width: 32px;

  height: 32px;

  background: #f8f9fc;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  transition: all 0.3s ease;

}



.city-arrow i {

  font-size: 14px;

  color: #6b7280;

  transition: all 0.3s ease;

}



.city-card:hover .city-arrow {

  background: #0a3c72;

  transform: translateX(3px);

}



.city-card:hover .city-arrow i {

  color: white;

}



.view-all-cities {

  text-align: center;

  margin-top: 50px;

}



.btn-view-all-cities {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  background: linear-gradient(135deg, #0a3c72 0%, #083056 100%);

  color: white;

  padding: 16px 40px;

  font-size: 16px;

  font-weight: 700;

  border-radius: 50px;

  text-decoration: none;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  transition: all 0.3s ease;

  box-shadow: 0 4px 15px rgba(10, 60, 114, 0.2);

}



.btn-view-all-cities:hover {

  transform: translateY(-3px);

  box-shadow: 0 6px 25px rgba(10, 60, 114, 0.3);

  color: white;

  text-decoration: none;

}



.btn-view-all-cities i {

  transition: transform 0.3s ease;

}



.btn-view-all-cities:hover i {

  transform: translateX(5px);

}



/* Responsive */

@media (max-width: 1200px) {

  .cities-grid {

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 18px;

  }

}



@media (max-width: 768px) {

  .popular-cities-section {

    padding: 60px 0;

  }



  .section-title-cities {

    font-size: 28px;

  }



  .section-subtitle-cities {

    font-size: 14px;

  }



  .cities-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

  }



  .city-card {

    padding: 16px 18px;

  }



  .city-card-content {

    gap: 12px;

  }



  .city-icon {

    width: 42px;

    height: 42px;

  }



  .city-icon i {

    font-size: 18px;

  }



  .city-name {

    font-size: 15px;

  }



  .city-count {

    font-size: 12px;

  }



  .city-arrow {

    width: 28px;

    height: 28px;

  }



  .city-arrow i {

    font-size: 12px;

  }



  .btn-view-all-cities {

    padding: 14px 30px;

    font-size: 14px;

  }

}



@media (max-width: 480px) {

  .cities-grid {

    grid-template-columns: 1fr;

  }



  .popular-cities-section {

    padding: 50px 0;

  }



  .section-title-cities {

    font-size: 24px;

  }



  .city-name {

    white-space: normal;

  }

}



/* ===================================

   Browse by State Section

   =================================== */

.browse-by-state-section {

  padding: 80px 0;

  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);

}



.browse-state-header {

  text-align: center;

  margin-bottom: 50px;

}



.section-label {

  display: inline-block;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 2px;

  color: var(--gold);

  margin-bottom: 12px;

  text-transform: uppercase;

}



.section-title-browse {

  font-size: 42px;

  font-weight: 800;

  color: var(--navy);

  margin: 0 0 15px 0;

  line-height: 1.2;

}



.section-subtitle {

  font-size: 18px;

  color: var(--muted);

  margin: 0;

}



.states-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  gap: 15px;

  max-width: 1400px;

  margin: 0 auto;

}



.state-card {

  background: white;

  border: 2px solid #e0e4e9;

  border-radius: 8px;

  padding: 20px 24px;

  text-decoration: none;

  display: flex;

  align-items: center;

  justify-content: space-between;

  transition: all 0.3s ease;

  position: relative;

  overflow: hidden;

}



.state-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(217, 149, 19, 0.1), transparent);

  transition: left 0.5s ease;

}



.state-card:hover::before {

  left: 100%;

}



.state-card:hover {

  border-color: var(--gold);

  transform: translateY(-3px);

  box-shadow: 0 6px 20px rgba(7, 57, 106, 0.15);

}



.state-name {

  font-size: 16px;

  font-weight: 700;

  color: var(--navy);

  transition: color 0.3s ease;

}



.state-card:hover .state-name {

  color: var(--gold);

}



.state-arrow {

  font-size: 14px;

  color: var(--muted);

  transition: all 0.3s ease;

}



.state-card:hover .state-arrow {

  color: var(--gold);

  transform: translateX(5px);

}



/* Responsive Design */

@media (max-width: 1200px) {

  .states-grid {

    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

  }

}



@media (max-width: 768px) {

  .browse-by-state-section {

    padding: 60px 0;

  }

  

  .section-title-browse {

    font-size: 32px;

  }

  

  .states-grid {

    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

    gap: 12px;

  }

  

  .state-card {

    padding: 16px 18px;

  }

  

  .state-name {

    font-size: 14px;

  }

}



@media (max-width: 480px) {

  .states-grid {

    grid-template-columns: repeat(2, 1fr);

  }

  

  .section-title-browse {

    font-size: 26px;

  }

}



@media (max-width: 1300px) {

    .navbar-expand-lg {

        flex-wrap: wrap;

    }



    .navbar-collapse {

        margin-top: 10px;

    }

}



.role-realtor {
    background: linear-gradient(135deg, #c5a047 0%, #b08b3a 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(197, 160, 71, 0.3);
}

/* Animated Get Pre-Approved Menu Item */
.get-preapproved-nav {
  position: relative;
  font-weight: 700 !important;
  color: #28a745 !important;
  transition: all 0.3s ease;
}

.get-preapproved-nav:hover {
  color: #20803a !important;
  transform: scale(1.05);
}

.get-preapproved-nav .pulse-dot {
  position: absolute;
  top: 8px;
  right: -8px;
  width: 8px;
  height: 8px;
  background: #28a745;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
  }
}

/* Mobile menu styling */
@media (max-width: 992px) {
  .get-preapproved-nav .pulse-dot {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }
}

/* Global Pre-Approval Modal Styles */
.custom-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.custom-modal.active {
  display: flex;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.modal-container {
  position: relative;
  background: white;
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
  z-index: 10000;
}

.modal-large {
  max-width: 800px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.modal-header {
  background: linear-gradient(135deg, #0a3c72 0%, #083056 100%);
  color: white;
  padding: 24px 28px;
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.modal-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  padding: 0;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.modal-body {
  padding: 32px 28px;
}

/* Form Styles for Modal */
.preapproval-intro {
  background: #f8f9fc;
  border-left: 4px solid #0a3c72;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.preapproval-intro p {
  margin: 0;
  font-size: 15px;
  color: #495057;
  line-height: 1.6;
}

.form-section-title {
  font-size: 18px;
  font-weight: 900;
  color: #0b2f59;
  margin: 30px 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e5e9f2;
}

.form-section-title:first-child {
  margin-top: 0;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0b2f59;
  margin-bottom: 8px;
}

.form-group label small {
  font-weight: 400;
  color: #6c757d;
  font-size: 12px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e9f2;
  border-radius: 8px;
  font-size: 15px;
  color: #0b2f59;
  transition: all 0.3s;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #0a3c72;
  box-shadow: 0 0 0 4px rgba(10, 60, 114, 0.1);
}

.form-group textarea {
  resize: vertical;
}

.form-group input[type="file"] {
  width: 100%;
  padding: 10px;
  border: 2px dashed #e5e9f2;
  border-radius: 8px;
  font-size: 14px;
  color: #0b2f59;
  cursor: pointer;
  transition: all 0.3s;
}

.form-group input[type="file"]:hover {
  border-color: #0a3c72;
  background: #f8f9fc;
}

.btn-modal-submit {
  background: linear-gradient(135deg, #0a3c72, #083056);
  color: white;
  padding: 16px 32px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s;
  width: 100%;
  margin-top: 30px;
  text-decoration: none;
}

.btn-modal-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(10, 60, 114, 0.3);
  color: white;
  text-decoration: none;
}

.btn-modal-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.spinner {
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .modal-container {
    width: 95%;
    max-height: 95vh;
  }
  
  .modal-header {
    padding: 20px;
  }
  
  .modal-body {
    padding: 24px 20px;
  }
}