:root {
    --brand-blue-300: #60a5fa;
    --brand-blue-500: #3b82f6;
    --brand-blue-600: #2563eb;
    --brand-blue-700: #1d4ed8;
  }

  .heading-title,.heading-title a{
    color: #fff !important;
    font-size: 19px !important;
  }

  /* Blog Page Styles - Exact Home Page Theme */
  .blog-banner {
    background: radial-gradient(1200px 600px at -10% -20%, rgba(59,130,246,0.35), rgba(59,130,246,0) 60%),
                radial-gradient(900px 500px at 110% 10%, rgba(37,99,235,0.18), rgba(37,99,235,0) 60%),
                linear-gradient(135deg, #0b1220 0%, #0f172a 45%, #0b1220 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    padding: 8rem 0 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .program-dropdown  div a{
      color:black !important;
    }
    .program-dropdown  div a:hover{
      color:black !important;
    }


  .blog-overlay {
    /* background: linear-gradient(180deg, rgba(2,6,23,0.35) 0%, rgba(2,6,23,0.6) 40%, rgba(2,6,23,0.65) 100%); */
    pointer-events: none;
    position: relative;
    z-index: 1;
  }

  .blog-brand-tint {
    inset: 0;
    pointer-events: none;
    background: linear-gradient(140deg, rgba(37,99,235,0.12) 0%, rgba(16,185,129,0.06) 40%, rgba(37,99,235,0.1) 100%);
    mix-blend-mode: soft-light;
    z-index: 2;
  }

  .blog-brand-tint .blog-container {
    position: relative;
    z-index: 50 !important;
    pointer-events: auto;
  }

  /* Blog banner floating elements - exact home page theme */
  .blog-banner .blob {
    position: absolute;
    filter: blur(40px);
    opacity: .6;
    border-radius: 9999px;
    pointer-events: none;
    z-index: 1;
  }
  .blog-banner .blob-blue { background: #3b82f6; }
  .blog-banner .blob-emerald { background: #10b981; }

  /* Blog banner background patterns and layered rings (Finbest-like) */
  .blog-banner .hero-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
  .blog-banner .hero-grid {
    background-image:
      linear-gradient(transparent 63px, rgba(255,255,255,0.08) 64px),
      linear-gradient(90deg, transparent 63px, rgba(255,255,255,0.08) 64px);
    background-size: 64px 64px;
    opacity: .25;
    pointer-events: none;
  }

  .blog-banner .ring {
    position: absolute;
    border-radius: 9999px;
    background: radial-gradient(closest-side, rgba(59,130,246,0.35), transparent 70%);
    filter: blur(6px);
    animation: ring-drift 22s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
  }
  .blog-banner .ring.emerald {
    background: radial-gradient(closest-side, rgba(16,185,129,0.3), transparent 70%);
  }
  .blog-banner .ring.one { width: 800px; height: 800px; top: -240px; left: -240px; animation-delay: 0s; }
  .blog-banner .ring.two { width: 680px; height: 680px; bottom: -200px; right: -180px; animation-delay: 3s; }

  /* 3D-style arcs and nodes for blog banner */
  .blog-banner .arc {
    position: absolute;
    border-radius: 9999px;
    background: conic-gradient(from 0deg, rgba(255,255,255,0) 0 65%, rgba(59,130,246,0.25) 65% 70%, rgba(255,255,255,0) 70% 100%);
    filter: drop-shadow(0 6px 16px rgba(16,24,40,.3));
    opacity: .7;
    pointer-events: none;
    z-index: 1;
  }
  .blog-banner .arc.emerald { background: conic-gradient(from 0deg, rgba(255,255,255,0) 0 65%, rgba(16,185,129,0.25) 65% 70%, rgba(255,255,255,0) 70% 100%); }
  .blog-banner .arc.one { width: 920px; height: 920px; left: -320px; top: -220px; transform: rotate(8deg); }
  .blog-banner .arc.two { width: 740px; height: 740px; right: -260px; top: 120px; transform: rotate(-18deg); }
  .blog-banner .arc.three { width: 860px; height: 860px; left: -180px; bottom: -260px; transform: rotate(22deg); opacity:.5; }

  .blog-banner .node {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 20px rgba(59,130,246,0.6);
    pointer-events: none;
    z-index: 1;
  }
  .blog-banner .node.one { top: 20%; left: 15%; animation: nodePulse 3s ease-in-out infinite; }
  .blog-banner .node.two { top: 60%; right: 20%; animation: nodePulse 3s ease-in-out infinite 1s; }
  .blog-banner .node.three { bottom: 30%; left: 60%; animation: nodePulse 3s ease-in-out infinite 2s; }

  .blog-title {
    color: #ffffff !important;
    line-height: 1.12;
    font-size: clamp(1.6rem, 5.2vw + 0.2rem, 3.2rem);
    letter-spacing: -.01em;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    animation: fadeInUp 1.2s ease-out 0.4s both;
    position: relative;
    z-index: 60 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  @media (max-width: 360px) {
    .blog-title { font-size: 1.45rem; }
  }
  @media (min-width: 1280px) { /* xl */
    .blog-title { font-size: 4rem; }
  }

  .blog-subtitle {
    color: rgba(255,255,255,0.95) !important;
    font-size: 1.1rem;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    animation: fadeInUp 1s ease-out 0.8s both;
    position: relative;
    z-index: 20;
    margin-top: 1rem;
  }

  /* Blog container within banner */
  .blog-banner .blog-container {
    position: relative;
    z-index: 50 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 2rem;
    text-align: center;
    background: rgba(0,0,0,0.1);
    width: 100%;
    max-width: 1200px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    margin-top: 5.2rem !important;
    border: 1px solid rgba(255,255,255,0.1);
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Add missing animations for blog banner */
  @keyframes nodePulse {
    0%, 100% {
      opacity: 0.8;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.2);
    }
  }


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


  @keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }

  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .blog-post {
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
  }

  .blog-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #blog-search {
    transition: all 0.3s ease;
  }

  #blog-search:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }

  #search-btn {
    transition: all 0.3s ease;
  }

  #search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }

  .pagination button {
    transition: all 0.3s ease;
  }

  .pagination button:hover {
    transform: translateY(-1px);
  }

  /* Categories List Styling */
  .categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .categories-list__item {
    margin-bottom: 0.5rem;
  }

  .categories-list__link {
    color: #374151;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
  }

  .categories-list__link:hover {
    color: #2563eb;
  }

  .categories-list__value {
    color: #6b7280;
    font-size: 0.875rem;
  }

  .blog-image-container {
    overflow: hidden;
    position: relative;
  }

  .blog-image-container img {
    transition: transform 0.3s ease;
  }

  .blog-post:hover .blog-image-container img {
    transform: scale(1.05);
  }

  .blog-post h3 {
    line-height: 1.4;
    transition: color 0.3s ease;
  }

  .blog-post a {
    position: relative;
    transition: all 0.3s ease;
  }

  .blog-post a:hover {
    transform: translateX(5px);
  }

  /* Search Section Styles */
  #blog-search {
    transition: all 0.3s ease;
  }

  #blog-search:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
  }

  #search-btn {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  #search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
  }

  #search-btn:active {
    transform: translateY(0);
  }

  /* Pagination Styles */
  .pagination button {
    transition: all 0.3s ease;
    position: relative;
  }

  .pagination button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  .banner-content{
  padding-bottom: 6rem;
  }

  .pagination button.active {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  }
  @media screen and (min-width: 768px){
    .blog-banner{
      padding: 8rem 0 6rem 0;
    }
    .features-container{
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 2rem !important;
      margin-bottom: 0 !important;
    }
    .feature-item{
      width: 100%;
      margin-bottom: 0 !important;
    }
    .our-story-text{
      text-align: left !important;
    }
    .our-story-content{
      padding-right:0 !important
    }
    .cta-paragraph{
      text-align: left !important;
    }
    .footer-column{
      align-items: flex-start !important;
    }
    .card-title-banner{
      min-height: 42px;
    }
    .why-work-advantages-grid{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }
    .why-work-advantage-card{
      width: 100%;
    }
    .banner-btn{
      flex-direction: row !important;
      justify-content: center !important;
    }
    .loan-amount-row{
     width:50%;
     margin: auto;
    }
    .footer-grid{
     flex-flow: wrap !important;
     align-items: flex-start !important;
    }
    .footer-contact-info-inline {
      align-items: flex-start !important;
  }
  .footer-contact-address-inline {
    text-align: left !important;
}
.footer-contact-details-inline {
  align-items: center !important;
}

}
  @media screen and (min-width: 1366px){
    .why-work-advantage-card{
      flex: 0 0 275px !important;
      max-width: 275px !important;
    }
    .detail-contact-section{
      padding: 16rem 0 4rem 0 !important;
    }

    .brokers-work-hard-content{
      flex-direction: row !important;
    }


    .form-container{
      padding:3.5rem !important
    }
    .work-step:nth-child(odd) .step-content{
      padding-left: 7rem !important;
    }
    .work-step:nth-child(even) .step-content{
      padding-right:7rem !important
    }
    .advantage-title{
      font-size: 20px !important;
    }
    .advantage-content{
      font-size:14px !important;
      line-height: 1.4 !important;
    }
    .hero-banner{
      padding-top: 12rem !important;
      padding-bottom:4rem !important;
    }
    .solution-card{
      flex: 0 0 185px !important;
      min-width: 185px !important;
      max-width: 185px !important;
    }
    .hero-title{
      width: 80%;
      margin:0 auto 2rem;
    }
    .hero-lead{
      width: 60%;
      margin: 0 auto 3rem;
    }
  }

  /* Responsive Blog Styles */
  @media (max-width: 768px) {
    .blog-title {
      font-size: 2.5rem;
    }


    .blog-subtitle {
      font-size: 1.125rem;
    }

    .blog-post {
      margin-bottom: 1.5rem;
    }
  }

  @media (max-width: 640px) {
    .blog-title {
      font-size: 2rem;
    }

    .blog-subtitle {
      font-size: 1rem;
    }
  }
  /* Universal dropdown styling: width fit, scrollable, glass look */
  #header .desktop-nav [id$="-dropdown"],
  #mobile-nav [id$="-dropdown"],
  #mobile-nav [id$="-dropdown-mobile"] {
    width: max-content !important;
    min-width: unset !important;
    max-width: calc(100vw - 2rem);
    /* let inner container scroll so shadow/border stay intact */
    max-height: none;
    overflow: visible;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(135deg, #0b1220 0%, #0f172a 45%, #0b1220 100%);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(59,130,246,0.2);
    box-shadow: 0 20px 40px rgba(2,6,23,0.4), inset 0 1px 0 rgba(59,130,246,0.1);
    border-radius: 12px;
  }

  /* For mobile, dropdown panels should span full width */
  @media (max-width: 1024px) {
  #mobile-nav [id$="-dropdown"],
  #mobile-nav [id$="-dropdown-mobile"] {
    width: 100% !important;
    max-width: none;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 12px;
    min-width: 280px !important;
  }
  }

  /* Smooth desktop dropdown fade/slide */
  #header .desktop-nav [id$="-dropdown"] {
    transform: translateY(6px);
    opacity: 0;
    display: none;
    transition: transform .22s ease, opacity .22s ease;
    z-index: 20 !important; /* keep below hero form card to avoid blocking inputs */
    min-width: 220px !important;
  }
  /* Dropdown Menu Styles */
  .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease-in-out;
  }

  .dropdown-menu.dd-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  #header .desktop-nav [id$="-dropdown"].dd-show {
    transform: translateY(0);
    opacity: 1;
    display: block;
  }

  /* Desktop dropdown hover functionality */
  #header .desktop-nav .dropdown-container:hover [id$="-dropdown"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  #header .desktop-nav .dropdown-container:hover [id$="-chevron"] {
    transform: rotate(180deg);
  }

  #header .desktop-nav .dropdown-container:hover [id$="-btn"] {
    color: #2563eb !important; /* blue-600 */
  }

  #header .desktop-nav .dropdown-container:hover [id$="-chevron"] {
    color: #2563eb !important; /* blue-600 */
  }

  /* Hover-open disabled: dropdowns open by click via JS only */

  /* Make inner content scroll when tall */
  #header .desktop-nav [id$="-dropdown"] > div,
  #mobile-nav [id$="-dropdown"],
  #mobile-nav [id$="-dropdown-mobile"] {
    max-height: 320px;
    overflow-y: auto;
  }
  @media (min-width: 1024px) {
    #header .desktop-nav [id$="-dropdown"] > div { max-height: 360px; }
  }
  @media (min-width: 1280px) {
    #header .desktop-nav [id$="-dropdown"] > div { max-height: 420px; }
  }

  /* Dropdown scrollbar styling */
  #header .desktop-nav [id$="-dropdown"] > div::-webkit-scrollbar,
  #mobile-nav [id$="-dropdown"]::-webkit-scrollbar,
  #mobile-nav [id$="-dropdown-mobile"]::-webkit-scrollbar { width: 8px; }
  #header .desktop-nav [id$="-dropdown"] > div::-webkit-scrollbar-track,
  #mobile-nav [id$="-dropdown"]::-webkit-scrollbar-track,
  #mobile-nav [id$="-dropdown-mobile"]::-webkit-scrollbar-track { background: transparent; }
  #header .desktop-nav [id$="-dropdown"] > div::-webkit-scrollbar-thumb,
  #mobile-nav [id$="-dropdown"]::-webkit-scrollbar-thumb,
  #mobile-nav [id$="-dropdown-mobile"]::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.2); border-radius: 9999px; }
  #header .desktop-nav [id$="-dropdown"] > div::-webkit-scrollbar-thumb:hover,
  #mobile-nav [id$="-dropdown"]::-webkit-scrollbar-thumb:hover,
  #mobile-nav [id$="-dropdown-mobile"]::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.35); }

  /* Dropdown items hover polish */
  #header .desktop-nav [id$="-dropdown"] a,
  #mobile-nav [id$="-dropdown"] a,
  #mobile-nav [id$="-dropdown-mobile"] a {
    color: #ffffff;
  }

  #header .desktop-nav [id$="-dropdown"] a:hover,
  #mobile-nav [id$="-dropdown"] a:hover,
  #mobile-nav [id$="-dropdown-mobile"] a:hover {
    background: rgba(59,130,246,0.2);
    color: #e2e8f0;
  }

  /* Mobile dropdown menu item sizing and hover micro-interaction */
  #mobile-nav [id$="-dropdown-mobile"] a,
  #mobile-nav [id$="-dropdown"] a {
    font-size: .95rem;
    padding: .6rem .75rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  @media (max-width: 400px) {
    #mobile-nav [id$="-dropdown-mobile"] a,
    #mobile-nav [id$="-dropdown"] a { font-size: .9rem; padding: .55rem .7rem; }
  }

  #mobile-nav [id$="-dropdown-mobile"] a:hover,
  #mobile-nav [id$="-dropdown"] a:hover,
  #mobile-nav [id$="-dropdown-mobile"] a:active,
  #mobile-nav [id$="-dropdown"] a:active,
  #mobile-nav [id$="-dropdown-mobile"] a:focus-visible,
  #mobile-nav [id$="-dropdown"] a:focus-visible {
    background: linear-gradient(90deg, rgba(59,130,246,.20), rgba(59,130,246,0));
    box-shadow: inset 3px 0 0 #3b82f6;
    transform: translateX(2px);
    color: #e2e8f0;
  }
  @media (prefers-reduced-motion: no-preference) {
    #mobile-nav [id$="-dropdown-mobile"] a,
    #mobile-nav [id$="-dropdown"] a { transition: color .15s ease, background .15s ease, transform .15s ease; }
  }

  /* Better tap feel */
  #mobile-nav { -webkit-tap-highlight-color: transparent; }

  /* Scrollable mobile navigation */
  #mobile-nav {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #mobile-nav::-webkit-scrollbar { width: 8px; }
  #mobile-nav::-webkit-scrollbar-track { background: transparent; }
  #mobile-nav::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.2); border-radius: 9999px; }
  #mobile-nav::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.35); }

  /* ===== Header + Top Nav (Clover-like styling) ===== */
  .top-nav {
    background: radial-gradient(1200px 600px at -10% -20%, rgba(59, 130, 246, 0.35), rgba(59, 130, 246, 0) 60%), radial-gradient(900px 500px at 110% 10%, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0) 60%), linear-gradient(135deg, #0b1220 0%, #0f172a 45%, #0b1220 100%);
    border-bottom: 0 !important;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06);
  }
  .top-nav a {
    color: #ffffff !important;
    font-size: .85rem;
  }
  .top-nav a:hover { color: #ffffff !important; }

/* Top nav specific styling for new design */
.top-nav .text-white {
  color: #ffffff !important;
}
.top-nav .bg-white {
  background-color: #ffffff !important;
}
.top-nav .text-blue-900 {
  color: #1e3a8a !important;
}
.top-nav .hover\:bg-gray-100:hover {
  background-color: #f3f4f6 !important;
}

/* Top nav animations */
.top-nav {
  animation: topNavSlideDown 0.8s ease-out;
  position: relative;
  overflow: hidden;
}

.top-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: topNavShimmer 3s infinite;
  pointer-events: none;
}

.top-nav .text-white {
  animation: topNavTextFadeIn 1s ease-out 0.3s both;
}

.top-nav .flex.items-center.space-x-6 a {
  animation: topNavLinkFadeIn 0.6s ease-out both;
  transition: all 0.3s ease;
}

.top-nav .flex.items-center.space-x-6 a:nth-child(1) { animation-delay: 0.5s; }
.top-nav .flex.items-center.space-x-6 a:nth-child(2) { animation-delay: 0.6s; }
.top-nav .flex.items-center.space-x-6 a:nth-child(3) { animation-delay: 0.7s; }
.top-nav .flex.items-center.space-x-6 a:nth-child(4) { animation-delay: 0.8s; }
.top-nav .flex.items-center.space-x-6 a:nth-child(5) { animation-delay: 0.9s; }

/* Enhanced hover effects for top nav links */
.top-nav .flex.items-center.space-x-6 a:hover {
  transform: translateY(-1px);
  text-shadow: 0 0 8px rgba(255,255,255,0.4);
}

.top-nav .text-white:hover {
  color: #e2e8f0 !important;
  text-shadow: 0 0 8px rgba(255,255,255,0.3);
  transition: all 0.3s ease;
}

.top-nav .flex.items-center.space-x-2:hover {
  transform: translateX(2px);
  transition: all 0.3s ease;
}

.top-nav .flex.items-center.space-x-2 svg:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.5));
  transition: all 0.3s ease;
}

.top-nav .flex.items-center.space-x-2 span:hover {
  color: #e2e8f0 !important;
  text-shadow: 0 0 4px rgba(255,255,255,0.3);
  transition: all 0.3s ease;
}

/* Download App hover effect */
/* .top-nav .absolute.left-1\/2.transform.-translate-x-1\/2 span:hover {
  color: #e2e8f0 !important;
  text-shadow: 0 0 8px rgba(255,255,255,0.4);
  transform: scale(1.05);
  transition: all 0.3s ease;
} */

/* Contact info container hover */
.top-nav .flex.flex-col.space-y-1:hover {
  transform: translateX(4px);
  transition: all 0.3s ease;
}

/* Navigation link underline animation */
.top-nav .flex.items-center.space-x-6 a span {
  position: relative;
  overflow: hidden;
}

@keyframes topNavLinkFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Keyframe animations */
@keyframes topNavSlideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes topNavShimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes topNavTextFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


  /* Responsive top nav adjustments */
  @media (max-width: 1536px) {
    .top-nav .flex.items-center.space-x-6 > div:first-child {
      display:flex;
    }
  }

  @media (max-width: 1280px) {
    .top-nav .flex.items-center.space-x-4 {
      display: none;
    }
  }

  @media (max-width: 1024px) {
    .top-nav {
      display: none !important;
    }
  }

  #header {
    background: #ffffff !important;
    box-shadow: 0 6px 24px rgba(2,6,23,0.08);
    border-bottom: 1px solid rgba(15,23,42,0.06);
    /* z-index: 9999998 !important; */
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
  }

  /* Desktop nav links with underline indicator */
  #header .desktop-nav a {
    position: relative;
    padding: .5rem .65rem;
    color: #0f172a;
  }
  #header .desktop-nav a:hover { color: #1e40af; }
  #header .desktop-nav a:after {
    content: "";
    position: absolute;
    left: .5rem; right: .5rem; bottom: 0.35rem;
    height: 2px;
    background: linear-gradient(90deg, #22c55e, #3b82f6);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
    border-radius: 2px;
  }
  #header .desktop-nav a:hover:after { transform: scaleX(1); }

  /* Header CTA similar to Apply Now */
  #header .desktop-cta a:last-child {
    border-radius: 9999px;
    padding: .55rem 1rem !important;
    box-shadow: 0 10px 20px rgba(5,150,105,0.25);
  }
  #header .desktop-cta a:last-child:hover {
    filter: brightness(1.05);
  }
  *,
  :before,
  :after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
  }

  ::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
  }

  *,
  :before,
  :after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
  }

  :before,
  :after {
    --tw-content: ""
  }

  html,
  :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
  }

  body {
    margin: 0;
    line-height: inherit
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit
  }

  a {
    color: inherit;
    text-decoration: inherit
  }

  b,
  strong {
    font-weight: bolder
  }

  code,
  kbd,
  samp,
  pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
  }

  small {
    font-size: 80%
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
  }

  sub {
    bottom: -.25em
  }

  sup {
    top: -.5em
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0
  }

  button,
  select {
    text-transform: none
  }

  button,
  input:where([type=button]),
  input:where([type=reset]),
  input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
  }

  :-moz-focusring {
    outline: auto
  }

  :-moz-ui-invalid {
    box-shadow: none
  }

  progress {
    vertical-align: baseline
  }

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto
  }

  [type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none
  }

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
  }

  summary {
    display: list-item
  }

  blockquote,
  dl,
  dd,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  figure,
  p,
  pre {
    margin: 0
  }

  fieldset {
    margin: 0;
    padding: 0
  }

  legend {
    padding: 0
  }

  ol,
  ul,
  menu {
    list-style: none;
    margin: 0;
    padding: 0
  }

  dialog {
    padding: 0
  }

  textarea {
    resize: vertical
  }

  input::-moz-placeholder,
  textarea::-moz-placeholder {
    opacity: 1;
    color: #9ca3af
  }

  input::placeholder,
  textarea::placeholder {
    opacity: 1;
    color: #9ca3af
  }

  button,
  [role=button] {
    cursor: pointer
  }

  :disabled {
    cursor: default
  }

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }

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

  [hidden]:where(:not([hidden=until-found])) {
    display: none
  }

  .fixed {
    position: fixed
  }

  .absolute {
    position: absolute
  }

  .relative {
    position: relative
  }

  .sticky {
    position: sticky
  }

  .inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
  }

  .-bottom-2 {
    bottom: -.5rem
  }

  .-left-1\.5 {
    left: -.375rem
  }

  .bottom-6 {
    bottom: 1.5rem
  }

  .bottom-8 {
    bottom: 2rem
  }

  .left-1\/2 {
    left: 50%
  }

  .left-3 {
    left: .75rem
  }

  .left-4 {
    left: 1rem
  }

  .right-1 {
    right: .25rem
  }

  .right-4 {
    right: 1rem
  }

  .right-6 {
    right: 1.5rem
  }

  .top-0 {
    top: 0
  }

  .top-1 {
    top: .25rem
  }

  .top-1\/2 {
    top: 50%
  }

  .top-20 {
    top: 5rem
  }

  .top-24 {
    top: 6rem
  }


  .top-4 {
    top: 1rem
  }

  .z-10 {
    z-index: 10
  }

  .z-20 {
    z-index: 20
  }

  .z-40 {
    z-index: 40
  }

  .z-50 {
    z-index: 50
  }

  .col-span-full {
    grid-column: 1 / -1
  }

  .mx-auto {
    margin-left: auto;
    margin-right: auto
  }

  .-ml-24 {
    margin-left: -6rem
  }

  .mb-1 {
    margin-bottom: .25rem
  }

  .mb-12 {
    margin-bottom: 3rem
  }

  .mb-16 {
    margin-bottom: 4rem
  }

  .mb-2 {
    margin-bottom: .5rem
  }

  .mb-3 {
    margin-bottom: .75rem
  }

  .mb-4 {
    margin-bottom: 1rem
  }

  .mb-6 {
    margin-bottom: 1.5rem
  }

  .mb-8 {
    margin-bottom: 2rem
  }

  .ml-2 {
    margin-left: .5rem
  }

  .mr-2 {
    margin-right: .5rem
  }

  .mt-0\.5 {
    margin-top: .125rem
  }

  .mt-1 {
    margin-top: .25rem
  }

  .mt-12 {
    margin-top: 3rem
  }

  .mt-16 {
    margin-top: 4rem
  }

  .mt-2 {
    margin-top: .5rem
  }

  .mt-3 {
    margin-top: .75rem
  }

  .mt-4 {
    margin-top: 1rem
  }

  .mt-6 {
    margin-top: 1.5rem
  }

  .mt-8 {
    margin-top: 2rem
  }

  .block {
    display: block
  }

  .inline-block {
    display: inline-block
  }

  .flex {
    display: flex
  }

  .inline-flex {
    display: inline-flex
  }

  .grid {
    display: grid
  }

  .hidden {
    display: none
  }

  .h-1 {
    height: .25rem
  }

  .h-10 {
    height: 2.5rem
  }

  .h-12 {
    height: 3rem
  }

  .h-16 {
    height: 4rem
  }

  .h-2 {
    height: .5rem
  }

  .h-20 {
    height: 5rem
  }

  .h-24 {
    height: 6rem
  }

  .h-3 {
    height: .75rem
  }

  .h-32 {
    height: 8rem
  }

  .h-4 {
    height: 1rem
  }

  .h-48 {
    height: 12rem
  }

  .h-6 {
    height: 1.5rem
  }

  .h-8 {
    height: 2rem
  }

  .h-full {
    height: 100%
  }

  .max-h-\[60vh\] {
    max-height: 60vh
  }

  .max-h-\[90vh\] {
    max-height: 90vh
  }

  .min-h-screen {
    min-height: 100vh
  }

  .w-1 {
    width: .25rem
  }

  .w-12 {
    width: 3rem
  }

  .w-16 {
    width: 4rem
  }

  .w-2 {
    width: .5rem
  }

  .w-20 {
    width: 5rem
  }

  .w-24 {
    width: 6rem
  }

  .w-3 {
    width: .75rem
  }

  .w-32 {
    width: 8rem
  }

  .w-4 {
    width: 1rem
  }

  .w-6 {
    width: 1.5rem
  }

  .w-8 {
    width: 2rem
  }

  .w-full {
    width: 100%
  }

  .max-w-2xl {
    max-width: 42rem
  }

  .max-w-3xl {
    max-width: 48rem
  }

  .max-w-4xl {
    max-width: 56rem
  }

  .max-w-7xl {
    max-width: 80rem
  }

  .max-w-md {
    max-width: 28rem
  }

  .max-w-xs {
    max-width: 20rem
  }

  .flex-1 {
    flex: 1 1 0%
  }

  .-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .-skew-x-12 {
    --tw-skew-x: -12deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .cursor-pointer {
    cursor: pointer
  }

  .resize-none {
    resize: none
  }

  .appearance-none {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .flex-col {
    flex-direction: column
  }

  .flex-wrap {
    flex-wrap: wrap
  }

  .items-start {
    align-items: flex-start
  }

  .items-end {
    align-items: flex-end
  }

  .items-center {
    align-items: center
  }

  .justify-center {
    justify-content: center
  }

  .justify-between {
    justify-content: space-between
  }

  .gap-12 {
    gap: 3rem
  }

  .gap-3 {
    gap: .75rem
  }

  .gap-4 {
    gap: 1rem
  }

  .gap-6 {
    gap: 1.5rem
  }

  .gap-8 {
    gap: 2rem
  }

  .-space-x-2>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(-.5rem * var(--tw-space-x-reverse));
    margin-left: calc(-.5rem * calc(1 - var(--tw-space-x-reverse)))
  }

  .space-x-1>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.25rem * var(--tw-space-x-reverse));
    margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)))
  }

  .space-x-12>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(3rem * var(--tw-space-x-reverse));
    margin-left: calc(3rem * calc(1 - var(--tw-space-x-reverse)))
  }

  .space-x-2>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.5rem * var(--tw-space-x-reverse));
    margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)))
  }

  .space-x-3>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.75rem * var(--tw-space-x-reverse));
    margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse)))
  }

  .space-x-4>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
  }

  .space-x-8>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))
  }

  .space-y-1>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.25rem * var(--tw-space-y-reverse))
  }

  .space-y-2>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
  }

  .space-y-3>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.75rem * var(--tw-space-y-reverse))
  }

  .space-y-4>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
  }

  .space-y-6>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
  }

  .space-y-8>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse))
  }

  .overflow-hidden {
    overflow: hidden
  }

  .overflow-y-auto {
    overflow-y: auto
  }

  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .whitespace-nowrap {
    white-space: nowrap
  }

  .rounded {
    border-radius: .25rem
  }

  .rounded-2xl {
    border-radius: 1rem
  }

  .rounded-full {
    border-radius: 9999px
  }

  .rounded-lg {
    border-radius: .5rem
  }

  .rounded-xl {
    border-radius: .75rem
  }

  .border {
    border-width: 1px
  }

  .border-2 {
    border-width: 2px
  }

  .border-4 {
    border-width: 4px
  }

  .border-b {
    border-bottom-width: 1px
  }

  .border-t {
    border-top-width: 1px
  }

  .border-emerald-100 {
    --tw-border-opacity: 1;
    border-color: rgb(219 234 254 / var(--tw-border-opacity, 1))
  }

  .border-emerald-600 {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity, 1))
  }

  .border-gray-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1))
  }

  .border-gray-300 {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1))
  }

  .border-gray-800 {
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity, 1))
  }

  .border-white {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1))
  }

  .border-white\/20 {
    border-color: #fff3
  }

  .bg-black\/50 {
    background-color: #00000080
  }

  .bg-black\/60 {
    background-color: #0009
  }

  .bg-blue-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1))
  }

  .bg-blue-200\/40 {
    background-color: #bfdbfe66
  }

  .bg-blue-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1))
  }

  .bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1))
  }

  .bg-emerald-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1))
  }

  .bg-emerald-200\/40 {
    background-color: #bfdbfe66
  }

  .bg-emerald-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1))
  }

  .bg-emerald-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1))
  }

  .bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
  }

  .bg-gray-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
  }

  .bg-gray-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1))
  }

  .bg-gray-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
  }

  .bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1))
  }

  .bg-orange-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1))
  }

  .bg-orange-200\/40 {
    background-color: #fed7aa66
  }

  .bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
  }

  .bg-white\/20 {
    background-color: #fff3
  }

  .bg-white\/80 {
    background-color: #fffc
  }

  .bg-white\/95 {
    background-color: #fffffff2
  }

  .bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
  }

  .bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops))
  }

  .bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops))
  }

  .from-emerald-50 {
    --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-emerald-600 {
    --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .from-transparent {
    --tw-gradient-from: transparent var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
  }

  .via-blue-50 {
    --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #eff6ff var(--tw-gradient-via-position), var(--tw-gradient-to)
  }

  .via-white\/20 {
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / .2) var(--tw-gradient-via-position), var(--tw-gradient-to)
  }

  .to-blue-50 {
    --tw-gradient-to: #eff6ff var(--tw-gradient-to-position)
  }

  .to-blue-600 {
    --tw-gradient-to: #2563eb var(--tw-gradient-to-position)
  }

  .to-emerald-100 {
    --tw-gradient-to: #d1e7dd var(--tw-gradient-to-position)
  }

  .to-emerald-700 {
    --tw-gradient-to: #0d6efd var(--tw-gradient-to-position)
  }

  .to-transparent {
    --tw-gradient-to: transparent var(--tw-gradient-to-position)
  }

  .bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text
  }

  .fill-current {
    fill: currentColor
  }

  .object-cover {
    -o-object-fit: cover;
    object-fit: cover
  }

  .p-2 {
    padding: .5rem
  }

  .p-3 {
    padding: .75rem
  }

  .p-4 {
    padding: 1rem
  }

  .p-6 {
    padding: 1.5rem
  }

  .p-8 {
    padding: 2rem
  }

  .px-3 {
    padding-left: .75rem;
    padding-right: .75rem
  }

  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem
  }

  .px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
  }

  .px-8 {
    padding-left: 2rem;
    padding-right: 2rem
  }

  .py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
  }

  .py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem
  }

  .py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem
  }

  .py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem
  }

  .py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem
  }

  .py-3 {
    padding-top: .75rem;
    padding-bottom: .75rem
  }

  .py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
  }

  .py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem
  }

  .pb-6 {
    padding-bottom: 1.5rem
  }

  .pl-10 {
    padding-left: 2.5rem
  }

  .pr-4 {
    padding-right: 1rem
  }

  .pt-16 {
    padding-top: 4rem
  }
  .pt-20{
    padding-top: 6rem;
  }

  .pt-4 {
    padding-top: 1rem
  }

  .pt-8 {
    padding-top: 2rem
  }

  .text-left {
    text-align: left
  }

  .text-center {
    text-align: center
  }

  .text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
  }

  .text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
  }

  .text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem
  }

  .text-5xl {
    font-size: 3rem;
    line-height: 1
  }

  .text-base {
    font-size: 1rem;
    line-height: 1.5rem
  }

  .text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
  }

  .text-sm {
    font-size: .875rem;
    line-height: 1.25rem
  }

  .text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
  }

  .text-xs {
    font-size: .75rem;
    line-height: 1rem
  }

  .font-bold {
    font-weight: 700
  }

  .font-medium {
    font-weight: 500
  }

  .font-semibold {
    font-weight: 600
  }

  .italic {
    font-style: italic
  }

  .leading-relaxed {
    line-height: 1.625;
   color: white;
  }

  .leading-tight {
    line-height: 1.25
  }

  .text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1))
  }

  .text-emerald-200\/20 {
    color: #a7f3d033
  }

  .text-emerald-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1))
  }

  .text-emerald-700 {
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1))
  }

  .text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1))
  }

  .text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1))
  }

  .text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1))
  }

  .text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1))
  }

  .text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1))
  }

  .text-orange-600 {
    --tw-text-opacity: 1;
    color: rgb(234 88 12 / var(--tw-text-opacity, 1))
  }

  .text-transparent {
    color: transparent
  }

  .text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
  }

  .text-white\/10 {
    color: #ffffff1a
  }

  .text-white\/70 {
    color: #ffffffb3
  }

  .text-white\/80 {
    color: #fffc
  }

  .text-white\/90 {
    color: #ffffffe6
  }

  .text-yellow-400 {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1))
  }

  .opacity-0 {
    opacity: 0
  }

  .opacity-10 {
    opacity: .1
  }

  .opacity-70 {
    opacity: .7
  }

  .opacity-90 {
    opacity: .9
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  .filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
  }

  .transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
  }

  .transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
  }

  .transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
  }

  .duration-200 {
    transition-duration: .2s
  }

  .duration-300 {
    transition-duration: .3s
  }

  * {
    font-family: Inter, sans-serif
  }

  body {
    line-height: 1.5
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.2
  }

  .slider {
    background: linear-gradient(to right, #e5e7eb, #e5e7eb);
    background-size: 100% 8px;
    background-repeat: no-repeat;
    background-position: center
  }

  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #2563eb;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 12px #2563eb4d;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
  }

  .slider::-moz-range-thumb {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #2563eb;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 12px #2563eb4d;
    -moz-transition: all .2s ease;
    transition: all .2s ease
  }

  .slider::-webkit-slider-track {
    height: 8px;
    border-radius: 4px;
    background: #e5e7eb
  }

  .slider::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: #e5e7eb
  }

  .slider:hover::-webkit-slider-thumb {
    transform: scale(1.1);
    box-shadow: 0 6px 16px #2563eb66
  }

  .slider:hover::-moz-range-thumb {
    transform: scale(1.1);
    box-shadow: 0 6px 16px #2563eb66
  }

  html {
    scroll-behavior: smooth
  }

  *:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px
  }

  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important
    }
  }

  ::-webkit-scrollbar {
    width: 8px
  }

  ::-webkit-scrollbar-track {
    background: #f1f5f9
  }

  ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8
  }

  .btn-primary {
    position: relative;
    overflow: hidden
  }

  .btn-primary:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
    transition: left .5s
  }

  .btn-primary:hover:before {
    left: 100%
  }

  @keyframes pulse-glow {

    0%,
    to {
      box-shadow: 0 0 #2563eb66
    }

    50% {
      box-shadow: 0 0 0 10px #2563eb00
    }
  }

  .pulse-glow {
    animation: pulse-glow 2s infinite
  }

  @keyframes gradient-shift {

    0%,
    to {
      background-position: 0% 50%
    }

    50% {
      background-position: 100% 50%
    }
  }

  .gradient-text {
    background: linear-gradient(-45deg, #059669, #1e40af, #ea580c, #059669);
    background-size: 400% 400%;
    animation: gradient-shift 3s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
  }

  .last\:border-0:last-child {
    border-width: 0px
  }

  .last\:pb-0:last-child {
    padding-bottom: 0
  }

  .hover\:-translate-y-1:hover {
    --tw-translate-y: -.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .hover\:-translate-y-2:hover {
    --tw-translate-y: -.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .hover\:scale-110:hover {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .hover\:border-gray-400:hover {
    --tw-border-opacity: 1;
    border-color: rgb(156 163 175 / var(--tw-border-opacity, 1))
  }

  .hover\:bg-blue-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-blue-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-emerald-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-emerald-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-emerald-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-emerald-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-gray-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-gray-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-gray-300:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-gray-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-gray-50:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
  }

  .hover\:bg-white\/20:hover {
    background-color: #fff3
  }

  .hover\:text-emerald-600:hover {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1))
  }
  .hover\:text-emerald-600:hover svg{
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
  }


  /* Icon Container */
  .icon-container {
    position: relative;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .icon-3d {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  }

  .icon-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(0, 0, 0, 0.1) 100%);
    z-index: -1;
  }


  /* Responsive Design */
  /* Responsive Design */
  @media (max-width: 1024px) {
    .modern-solutions-section {
      padding: 6rem 0;
    }

    .solutions-container {
      padding: 0 1.5rem;
    }

    .section-title {
      font-size: 3rem;
    }

    .solutions-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }

    .solution-card {
      min-height: 28rem;
    }
  }

  @media (max-width: 768px) {
    .modern-solutions-section {
      padding: 3rem 0;
    }

    .solutions-container {
      padding: 0 1rem;
    }

    .solutions-header {
      margin-bottom: 3rem;
    }

    .header-icon {
      width: 3.5rem;
      height: 3.5rem;
      margin-bottom: 1.5rem;
    }

    .header-icon .icon {
      width: 1.75rem;
      height: 1.75rem;
    }

    .section-title {
      font-size: 2rem;
      line-height: 1.2;
      margin-bottom: 1rem;
    }

    .section-subtitle {
      font-size: 1rem;
      line-height: 1.5;
      padding: 0 0.5rem;
    }

    .solutions-grid {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      margin-bottom: 3rem;
    }

    .solution-card {
      min-height: auto;
      margin: 0 0.5rem;
      width: 100%;
    }

    .card-header {
      padding: 1.5rem 1.5rem 1rem;
    }

    .card-content {
      padding: 0 1.5rem 1.5rem;
    }

    .card-icon {
      width: 3rem;
      height: 3rem;
      margin-bottom: 1rem;
    }

    .card-icon .icon {
      width: 1.5rem;
      height: 1.5rem;
    }

    .card-title {
      font-size: 1.125rem;
      line-height: 1.3;
      word-wrap: break-word;
      hyphens: auto;
    }

    .feature-list {
      margin-top: 0.5rem;
    }

    .feature-item {
      margin-bottom: 1rem;
    }

    .feature-item span {
      font-size: 0.9rem;
      line-height: 1.4;
      word-wrap: break-word;
    }

    .bullet-point {
      width: 0.375rem;
      height: 0.375rem;
      margin-top: 0.5rem;
      margin-right: 0.75rem;
    }

    .cta-card {
      padding: 1.5rem;
      margin: 0 0.5rem;
    }

    .cta-title {
      font-size: 1.75rem;
      line-height: 1.2;
    }

    .cta-description {
      font-size: 1rem;
      line-height: 1.5;
    }

    .cta-button {
      padding: 0.875rem 1.5rem;
      font-size: 0.95rem;
      width: 100%;
      justify-content: center;
    }
  }

  @media (max-width: 480px) {
    .modern-solutions-section {
      padding: 2.5rem 0;
    }

    .solutions-container {
      padding: 0 0.75rem;
    }

    .solutions-header {
      margin-bottom: 2.5rem;
    }

    .section-title {
      font-size: 1.75rem;
      line-height: 1.1;
    }

    .section-subtitle {
      font-size: 0.95rem;
      padding: 0 0.25rem;
    }

    .solutions-grid {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      margin-bottom: 2.5rem;
    }

    .solution-card {
      margin: 0 0.25rem;
      width: 100%;
    }

    .card-header {
      padding: 1.25rem 1.25rem 0.75rem;
    }

    .card-content {
      padding: 0 1.25rem 1.25rem;
    }

    .card-icon {
      width: 2.75rem;
      height: 2.75rem;
      margin-bottom: 0.75rem;
    }

    .card-icon .icon {
      width: 1.375rem;
      height: 1.375rem;
    }

    .card-title {
      font-size: 1rem;
      line-height: 1.2;
    }

    .feature-item {
      margin-bottom: 0.875rem;
    }

    .feature-item span {
      font-size: 0.85rem;
      line-height: 1.3;
    }

    .bullet-point {
      width: 0.25rem;
      height: 0.25rem;
      margin-top: 0.375rem;
      margin-right: 0.625rem;
    }

    .cta-card {
      padding: 1.25rem;
      margin: 0 0.25rem;
    }

    .cta-title {
      font-size: 1.5rem;
      line-height: 1.1;
    }

    .cta-description {
      font-size: 0.95rem;
      line-height: 1.4;
    }

    .cta-button {
      padding: 0.75rem 1.25rem;
      font-size: 0.9rem;
    }
  }

  @media (max-width: 360px) {
    .solutions-container {
      padding: 0 0.5rem;
    }

    .section-title {
      font-size: 1.5rem;
    }

    .section-subtitle {
      font-size: 0.9rem;
    }

    .solution-card {
      margin: 0;
      width: 100%;
    }

    .card-header {
      padding: 1rem 1rem 0.5rem;
    }

    .card-content {
      padding: 0 1rem 1rem;
    }

    .card-title {
      font-size: 0.95rem;
    }

    .feature-item span {
      font-size: 0.8rem;
    }

    .cta-card {
      padding: 1rem;
      margin: 0;
    }

    .cta-title {
      font-size: 1.25rem;
    }

    .cta-description {
      font-size: 0.9rem;
    }
  }

  /* Credit Requirements Responsive Design */
  @media (max-width: 1024px) {
    .credit-requirements-section {
      padding: 6rem 0;
    }

    .credit-container {
      padding: 0 1.5rem;
    }

    .credit-header .section-title {
      font-size: 3rem;
    }

    .credit-header {
      margin-bottom: 4rem;
    }
  }

  @media (max-width: 768px) {
    .credit-requirements-section {
      padding: 4rem 0;
    }

    .credit-container {
      padding: 0 1rem;
    }

    .credit-header {
      margin-bottom: 3rem;
    }

    .credit-header .header-icon {
      width: 4rem;
      height: 4rem;
      margin-bottom: 1.5rem;
    }

    .credit-header .header-icon .icon {
      width: 2rem;
      height: 2rem;
    }

    .credit-header .section-title {
      font-size: 2.5rem;
      line-height: 1.2;
    }

    .credit-header .section-subtitle {
      font-size: 1.125rem;
      padding: 0 0.5rem;
    }

    .content-subtitle {
      font-size: 1.75rem;
      margin-bottom: 2rem;
    }

    .requirements-table {
      margin: 0 0.5rem;
    }

    .table-cell {
      padding: 1.25rem 0.75rem;
      font-size: 0.95rem;
    }

    .header-cell {
      font-size: 1rem;
    }

    .score-cell {
      font-size: 0.9rem;
      padding: 0.5rem;
    }
  }

  @media (max-width: 480px) {
    .credit-requirements-section {
      padding: 3rem 0;
    }

    .credit-container {
      padding: 0 0.75rem;
    }

    .credit-header .section-title {
      font-size: 2rem;
      line-height: 1.1;
    }

    .credit-header .section-subtitle {
      font-size: 1rem;
      padding: 0 0.25rem;
    }

    .content-subtitle {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
    }

    .requirements-table {
      margin: 0 0.25rem;
    }

    .table-header {
      grid-template-columns: 1fr;
    }

    .table-row {
      grid-template-columns: 1fr;
      border-bottom: 2px solid #e2e8f0;
    }

    .table-cell {
      padding: 1rem 0.75rem;
      font-size: 0.9rem;
      border-bottom: 1px solid #f1f5f9;
    }

    .table-cell:last-child {
      border-bottom: none;
    }

    .header-cell {
      background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
      color: white;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }

    .table-row .table-cell:first-child {
      background: #f8fafc;
      font-weight: 600;
    }
  }

  /* Enhanced focus states for accessibility */
  .solution-card:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }

  .cta-button:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
  }

  /* Credit Requirements Section */
  .credit-requirements-section {
    position: relative;
    padding: 8rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
    overflow: hidden;
  }

  .credit-requirements-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 40% 60%, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
    pointer-events: none;
  }

  .credit-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
  }

  /* Credit Section Header */
  .credit-header {
    text-align: center;
    margin-bottom: 6rem;
  }

  .credit-header .header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.3);
    animation: float 3s ease-in-out infinite;
  }

  .credit-header .header-icon .icon {
    width: 2.5rem;
    height: 2.5rem;
    color: white;
  }

  .credit-header .section-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #1e293b 0%, #3b82f6 50%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .credit-header .section-subtitle {
    font-size: 1.25rem;
    color: #64748b;
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* Credit Content */
  .credit-content {
    max-width: 48rem;
    margin: 0 auto;
  }

  .content-subtitle {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
    margin-bottom: 3rem;
  }

  /* Requirements Table */
  .requirements-table {
    background: white;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
  }

  .table-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  }

  .table-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid #e2e8f0;
    transition: background-color 0.3s ease;
  }

  .table-row:last-child {
    border-bottom: none;
  }

  .table-row:hover {
    background-color: #f8fafc;
  }

  .table-row:nth-child(even) {
    background-color: #f8fafc;
  }

  .table-row:nth-child(even):hover {
    background-color: #f1f5f9;
  }

  .table-cell {
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-cell {
    color: white;
    font-weight: 700;
    font-size: 1.125rem;
  }

  .score-cell {
    font-weight: 700;
    border-radius: 0.5rem;
    margin: 0.25rem;
  }

  .score-cell.prime {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
  }

  .score-cell.alternative {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
  }

  .score-cell.private {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
  }



  .hover\:text-emerald-700:hover {
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1))
  }

  .hover\:text-gray-600:hover {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1))
  }

  .hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
  }

  .hover\:underline:hover {
    text-decoration-line: underline
  }

  .hover\:shadow-xl:hover {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
  }

  .focus\:border-emerald-600:focus {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity, 1))
  }

  .focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed
  }

  .disabled\:bg-gray-100:disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
  }

  .disabled\:bg-gray-400:disabled {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1))
  }

  .disabled\:text-gray-400:disabled {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1))
  }

  .group:hover .group-hover\:scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  .group:hover .group-hover\:text-emerald-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1))
  }

  .group:hover .group-hover\:underline {
    text-decoration-line: underline
  }

  .group:hover .group-hover\:opacity-100 {
    opacity: 1
  }

  @media (min-width: 640px) {
    .sm\:flex-row {
      flex-direction: row
    }

    .sm\:px-6 {
      padding-left: 1.5rem;
      padding-right: 1.5rem
    }
  }

  @media (min-width: 768px) {
    .md\:flex {
      display: flex
    }


    .md\:hidden {
      display: none
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .md\:p-12 {
      padding: 3rem
    }

    .md\:text-2xl {
      font-size: 1.5rem;
      line-height: 2rem
    }

    .md\:text-5xl {
      font-size: 3rem;
      line-height: 1
    }

    .md\:text-6xl {
      font-size: 3.75rem;
      line-height: 1
    }

    .md\:text-7xl {
      font-size: 4.5rem;
      line-height: 1
    }
  }

  @media (min-width: 1024px) {
    .lg\:col-span-1 {
      grid-column: span 1 / span 1
    }

    .lg\:col-span-2 {
      grid-column: span 2 / span 2
    }

    .lg\:col-start-2 {
      grid-column-start: 2
    }

    .lg\:ml-auto {
      margin-left: auto
    }

    .lg\:block {
      display: block
    }

    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .lg\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .lg\:flex-row-reverse {
      flex-direction: row-reverse
    }

    .lg\:gap-16 {
      gap: 4rem
    }

    .lg\:space-x-reverse>:not([hidden])~:not([hidden]) {
      --tw-space-x-reverse: 1
    }

    .lg\:px-8 {
      padding-left: 2rem;
      padding-right: 2rem
    }

    .lg\:text-left {
      text-align: left
    }

    .lg\:text-right {
      text-align: right
    }

  }

  @media (min-width: 1280px) {
    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr))
    }
  }

  /* Extra spacing for hero under fixed header on xl screens */
  @media (min-width: 1280px) {
    .hero-banner {
      padding-top: 10rem;
    }
  }

  #get-started-button {
    transform: scale(0);
    animation: scaleIn 0.5s ease forwards 1s;
  }

  @keyframes scaleIn {
    to {
      transform: scale(1);
    }
  }

  /* Hero Section Animations */
  .hero-bg {
    animation: gradientShift 8s ease-in-out infinite;
  }

  @keyframes gradientShift {

    0%,
    100% {
      background: linear-gradient(135deg, #ecfdf5 0%, #dbeafe 50%, #ecfdf5 100%);
    }

    50% {
      background: linear-gradient(135deg, #dbeafe 0%, #ecfdf5 50%, #dbeafe 100%);
    }
  }

  .floating {
    animation: float 25s ease-in-out infinite;
  }

  @keyframes float {

    0%,
    100% {
      transform: translateY(0) rotate(0deg);
      opacity: 0;
    }

    50% {
      transform: translateY(-20px) rotate(180deg);
      opacity: 1;
    }
  }

  .floating-icon {
    animation: floatIcon 35s linear infinite;
  }

  @keyframes floatIcon {

    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }

    50% {
      transform: translateY(-30px) rotate(180deg);
    }
  }

  .hero-title {
    animation: fadeInUp 1.2s ease-out 0.4s both;
  }

  .hero-subtitle {
    animation: fadeInUp 1s ease-out 0.8s both;
  }

  .arrow-icon {
    animation: arrowMove 1.5s ease-in-out infinite;
  }

  @keyframes arrowMove {

    0%,
    100% {
      transform: translateX(0);
    }

    50% {
      transform: translateX(5px);
    }
  }


  @keyframes bounce {

    0%,
    100% {
      transform: translateY(0);
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    50% {
      transform: translateY(-10px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
  }

  .license-text {
    animation: pulse 2s ease-in-out infinite;
  }

  .scroll-indicator {
    animation: fadeInUp 1s ease-out 3s both;
  }

  .scroll-dot {
    animation: scrollDown 1.5s ease-in-out infinite;
  }

  @keyframes scrollDown {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(12px);
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes pulse {

    0%,
    100% {
      opacity: 0.7;
    }

    50% {
      opacity: 1;
    }
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .gradient-text {
    background: linear-gradient(-45deg, #2563eb, #2563eb, #ea580c, #2563eb);
    background-size: 400% 400%;
    animation: gradientShiftText 3s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  @keyframes gradientShiftText {

    0%,
    100% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }
  }

  /* SocialProofStrip Animations */
  .scrolling-left {
    animation: scrollLeft 40s linear infinite;
  }

  @keyframes scrollLeft {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-2400px);
    }
  }

  .scrolling-right {
    animation: scrollRight 35s linear infinite;
  }

  @keyframes scrollRight {
    from {
      transform: translateX(-2400px);
    }

    to {
      transform: translateX(0);
    }
  }

  .rotating-icon {
    animation: rotate 8s linear infinite;
  }


  @keyframes pulse {

    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
    }

    50% {
      box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
    }
  }


  /* ProcessSection Animations */
  @keyframes lineGrow {
    from {
      height: 0%;
    }

    to {
      height: 100%;
    }
  }

  @keyframes dotAppear {
    from {
      transform: scale(0) rotate(0deg);
    }

    to {
      transform: scale(1) rotate(360deg);
    }
  }

  @keyframes float {

    0%,
    100% {
      opacity: 0;
      transform: scale(0);
    }

    50% {
      opacity: 1;
      transform: scale(1);
    }
  }

  .step-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  .step-icon:hover {
    animation: rotate 0.6s ease-out;
  }


  @keyframes tickerLeft {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-1920px);
    }
  }

  .ticker-right {
    animation: tickerRight 35s linear infinite;
  }

  @keyframes tickerRight {
    from {
      transform: translateX(-1920px);
    }

    to {
      transform: translateX(0);
    }
  }

  .sparkle {
    animation: sparkle 20s linear infinite;
  }

  @keyframes sparkle {
    from {
      transform: translateX(0) rotate(0deg);
    }

    to {
      transform: translateX(100px) rotate(180deg);
    }
  }

  @media screen and (min-width: 375px) {
    #header .logo{
      display: flex;
      max-width: 119px;
      height: 74px;
    }
    #header .logo img{
      width: 100%;
      height: 100%;
    }
    footer .logo{
      display: flex;
      max-width: 119px;
      height: 74px;
    }
    footer .logo img{
      width: 100%;
      height: 100%;
      filter: brightness(100);
    }
  }
  @media screen and (min-width: 1366px){
     #mobile-nav{
      display: none !important;
    }

    .mobile-menu-button{
      display: none !important;
    }
    .desktop-nav{
      display: flex !important;
    }
    .desktop-cta{
      display: flex !important;
    }
    .top-nav{
      display: block !important;
    }
    .text-lg{
      font-size: 13px !important;
    }
    .app-download{
     order: 2;
    }
    .top-12{
      top:88px;
    }
    /* Force top navigation layout */
    .top-nav .flex.justify-between {
      justify-content: space-between !important;
      align-items: center !important;
    }
    .top-nav .flex.justify-between > :first-child {
      margin-right: auto !important;
      order: 1 !important;
    }
    .top-nav .flex.justify-between > :last-child {
      margin-left: auto !important;
      order: 2 !important;
    }
  }

  /* Hero banner background with responsive image and gradient overlay */
  /* Finbest-like gradient hero */

  .hero-overlay {
    background: linear-gradient(180deg, rgba(2,6,23,0.35) 0%, rgba(2,6,23,0.6) 40%, rgba(2,6,23,0.65) 100%);
    pointer-events: none;
  }

  /* Brand tint to harmonize banner with blue/teal logo */
  .hero-brand-tint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(140deg, rgba(37,99,235,0.12) 0%, rgba(16,185,129,0.06) 40%, rgba(37,99,235,0.1) 100%);
    mix-blend-mode: soft-light;
  }

  /* Subtle logo protection (keeps logo crisp over any background) */
  #header .logo img {
    filter: drop-shadow(0 1px 0 rgba(255,255,255,0.7));
  }

  /* Floating blurred blobs */
  .blob {
    position: absolute;
    filter: blur(40px);
    opacity: .6;
    border-radius: 9999px;
    pointer-events: none;
  }
  .blob-blue { background: #3b82f6; }
  .blob-emerald { background: #10b981; }

  /* Hero background patterns and layered rings (Finbest-like) */
  .hero-layer { position: absolute; inset: 0; pointer-events: none; }
  .hero-grid {
    background-image:
      linear-gradient(transparent 63px, rgba(255,255,255,0.08) 64px),
      linear-gradient(90deg, transparent 63px, rgba(255,255,255,0.08) 64px);
    background-size: 64px 64px;
    opacity: .25;
    pointer-events: none;
  }
  .hero-dots {
    background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 18px 18px;
    mix-blend-mode: screen;
    opacity: .18;
    pointer-events: none;
  }
  .ring {
    position: absolute;
    border-radius: 9999px;
    background: radial-gradient(closest-side, rgba(59,130,246,0.35), transparent 70%);
    filter: blur(6px);
    animation: ring-drift 22s ease-in-out infinite;
    pointer-events: none;
  }
  .ring.emerald {
    background: radial-gradient(closest-side, rgba(16,185,129,0.3), transparent 70%);
  }
  .ring.one { width: 800px; height: 800px; top: -240px; left: -240px; animation-delay: 0s; }
  .ring.two { width: 680px; height: 680px; bottom: -200px; right: -180px; animation-delay: 3s; }

  @keyframes ring-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .45; }
    50% { transform: translate3d(10px, -10px, 0) scale(1.03); opacity: .6; }
  }

  /* 3D-style arcs and nodes */
  .arc {
    position: absolute;
    border-radius: 9999px;
    background: conic-gradient(from 0deg, rgba(255,255,255,0) 0 65%, rgba(59,130,246,0.25) 65% 70%, rgba(255,255,255,0) 70% 100%);
    filter: drop-shadow(0 6px 16px rgba(16,24,40,.3));
    opacity: .7;
    pointer-events: none;
  }
  .arc.emerald { background: conic-gradient(from 0deg, rgba(255,255,255,0) 0 65%, rgba(16,185,129,0.25) 65% 70%, rgba(255,255,255,0) 70% 100%); }
  .arc.one { width: 920px; height: 920px; left: -320px; top: -220px; transform: rotate(8deg); }
  .arc.two { width: 740px; height: 740px; right: -260px; top: 120px; transform: rotate(-18deg); }
  .arc.three { width: 860px; height: 860px; left: -180px; bottom: -260px; transform: rotate(22deg); opacity:.5; }

  .node {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 9999px;
    background: #38bdf8;
    box-shadow: 0 0 0 6px rgba(56,189,248,.15), 0 0 18px rgba(56,189,248,.6);
    pointer-events: none;
  }
  .node.emerald { background:#34d399; box-shadow: 0 0 0 6px rgba(52,211,153,.15), 0 0 18px rgba(52,211,153,.6); }

  /* Metrics strip like Finbest */
  .metrics-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: .6rem .8rem;
    backdrop-filter: blur(6px);
  }
  .metrics-item {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    white-space: nowrap;
    overflow: hidden;
  }
  .metrics-label { color: rgba(255,255,255,0.7); font-size: .78rem; line-height: 1; }
  .metrics-value { color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1; }

  /* Tight mobile fit */
  @media (max-width: 480px) {
    .metrics-strip { gap: .35rem; padding: .5rem .6rem; }
    .metrics-label { font-size: .65rem; }
    .metrics-value { font-size: .95rem; }
  }
  /* Tighten primary CTA on very small phones (e.g., 360–380px) */
  @media (max-width: 400px) {
    .hero-cta { font-size: .9rem; padding: .6rem .9rem; line-height: 1.1; }
    .hero-cta svg { width: 18px; height: 18px; }
  }
  @media (min-width: 640px) {
    .metrics-label { font-size: .8rem; }
    .metrics-value { font-size: 1.1rem; }
  }

  /* Subtle nav link hover lift */
  .nav-link {
    position: relative;
    transition: color .2s ease, transform .2s ease;
  }
  .nav-link:hover {
    transform: translateY(-1px);
  }

  /* Float animation utility (names already exist but ensure availability) */
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  /* Hero Typography and Layout Tweaks */
  .hero-badge {
    color: #111827;
  }

  .hero-title {
    color: #ffffff;
    line-height: 1.12;
    font-size: clamp(1.6rem, 5.2vw + 0.2rem, 3.2rem);
    letter-spacing: -.01em;
  }
  @media (max-width: 360px) {
    .hero-title { font-size: 1.45rem; }
  }
  @media (min-width: 1280px) { /* xl */
    .hero-title { font-size: 4rem; }
  }

  /* Add extra top spacing on >=1366px screens to clear fixed header comfortably */
  @media screen and (min-width: 1366px) {
    .hero-banner { padding-top: 11.5rem; }
  }
  .left-nav{
    width: 30%;
  }

  .hero-lead {
    color: rgba(255,255,255,0.92);
    font-size: 1rem;
  }

  /* Hero Quote Styles */
  .hero-quote {
    max-width: 900px;
    margin: 0 auto 3rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
  }

  .hero-quote .hero-lead {
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
  }

  .quote-attribution {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    text-align: center;
    margin: 0;
  }

  @media (min-width: 768px) {
    .hero-quote .hero-lead {
      font-size: 1.25rem;
    }

    .quote-attribution {
      font-size: 1rem;
    }
  }

  @media (min-width: 1024px) {
    .hero-quote .hero-lead {
      font-size: 1.375rem;
    }
  }

  /* Hero Attribution Styling */
  .hero-attribution {
    margin: 1rem 0 1.5rem 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-attribution-text {
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-weight: 400;
    margin: 0;
    font-style: normal;
  }

  /* Mortgage Options Section Styling */
  .section {
    padding: 4rem 0;
    background: #f8fafc;
  }

  .section__block {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
    margin-bottom: 3rem;
    line-height: 1.2;
  }

  .section h3 {
    font-size: 1.875rem;
    font-weight: 600;
    color: #334155;
    margin: 2.5rem 0 1.5rem 0;
    line-height: 1.3;
  }

  .section p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 1.5rem;
  }

  .section ul {
    margin: 1.5rem 0;
    padding-left: 0;
    list-style: none;
  }

  .section ul li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: #475569;
  }

  .section ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
  }

  .section a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
  }

  .section a:hover {
    color: #1d4ed8;
    text-decoration: underline;
  }

  .section b {
    font-weight: 600;
    color: #1e293b;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .section {
      padding: 3rem 0;
    }

    .section__block {
      padding: 0 1rem;
    }

    .section h2 {
      font-size: 2rem;
      margin-bottom: 2rem;
    }

    .section h3 {
      font-size: 1.5rem;
      margin: 2rem 0 1rem 0;
    }

    .section p,
    .section ul li {
      font-size: 1rem;
    }
  }

  @media (max-width: 480px) {
    .section h2 {
      font-size: 1.75rem;
    }

    .section h3 {
      font-size: 1.375rem;
    }

    .section p,
    .section ul li {
      font-size: 0.95rem;
    }
  }

  /* Mortgage Payment Table Styling */
  .mortgage-payment-table-container {
    margin: 2rem 0;
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }

  .mortgage-payment-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    min-width: 800px;
  }

  .mortgage-payment-table thead {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  }

  .mortgage-payment-table th {
    padding: 1rem 0.75rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
  }

  .mortgage-payment-table tbody tr {
    transition: background-color 0.3s ease;
  }

  .mortgage-payment-table tbody tr:nth-child(even) {
    background-color: #f8fafc;
  }

  .mortgage-payment-table tbody tr:nth-child(odd) {
    background-color: white;
  }

  .mortgage-payment-table tbody tr:hover {
    background-color: #dbeafe;
  }

  .mortgage-payment-table td {
    padding: 1rem 0.75rem;
    text-align: center;
    font-size: 0.95rem;
    color: #374151;
    border: none;
    font-weight: 500;
  }

  .mortgage-payment-table td:first-child,
  .mortgage-payment-table td:nth-child(2),
  .mortgage-payment-table td:nth-child(3),
  .mortgage-payment-table td:last-child {
    font-weight: 600;
    color: #1f2937;
  }

  .mortgage-payment-footnotes {
    margin-top: 2rem;
    padding: 1.5rem;
    background: #eff6ff;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
  }

  .mortgage-payment-footnotes p {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
  }

  .mortgage-payment-footnotes p:last-child {
    margin-bottom: 0;
  }

  .mortgage-payment-footnotes strong {
    color: #1e293b;
    font-weight: 600;
  }

  /* Responsive Table Design */
  @media (max-width: 768px) {
    .mortgage-payment-table th,
    .mortgage-payment-table td {
      padding: 0.75rem 0.5rem;
      font-size: 0.85rem;
    }

    .mortgage-payment-table th {
      font-size: 0.8rem;
    }

    .mortgage-payment-footnotes {
      padding: 1rem;
    }

    .mortgage-payment-footnotes p {
      font-size: 0.9rem;
    }
  }

  @media (max-width: 480px) {
    .mortgage-payment-table th,
    .mortgage-payment-table td {
      padding: 0.5rem 0.25rem;
      font-size: 0.8rem;
    }

    .mortgage-payment-table th {
      font-size: 0.75rem;
    }
  }

  /* Mortgage Payment Calculator Styling */
  .tool-form {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 2rem 0;
  }

  /* Calculator Section Title Styling */
  .section__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.2;
  }

  .intro-lead {
    margin-bottom: 2rem;
  }

  .tool-form__frame {
    padding: 2rem;
  }

  .mpc-step-title {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: white !important;
    font-size: 1.25rem;
    font-weight: 600;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0 0 0;
    border-radius: 8px;
    text-align: center;
    border: none !important;
  }

  .mpc-step-title:first-child {
    margin-top: 0;
  }

  .mpc-step-body {
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 0 0 8px 8px;
    margin-bottom: 1rem;
  }

  .mpc-step-body .grid-x {
    margin-bottom: 1rem;
  }

  .mpc-step-body .grid-x:last-child {
    margin-bottom: 0;
  }

  .mpc-step-body label {
    font-weight: 600;
    color: #374151;
    font-size: 1rem;
    display: block;
    margin-bottom: 0.5rem;
  }

  .mpc-step-body input[type="text"],
  .mpc-step-body select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    background: white;
    transition: all 0.3s ease;
  }

  .mpc-step-body input[type="text"]:focus,
  .mpc-step-body select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }

  .mpc-step-body select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
  }

  .button-group {
    margin-top: 1.5rem;
  }

  .mcp-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white !important;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    margin: 0 0.5rem;
  }

  .mcp-btn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
  }

  .mcp-btn__email {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  }

  .mcp-btn__email:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
  }

  .mcp-btn__contact {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  }

  .mcp-btn__contact:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
  }

  .mpc-form-row {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e5e7eb;
  }

  .mpc-form-row:last-child {
    border-bottom: none;
  }

  .mpc-form-row .cell:first-child span {
    font-weight: 600;
    color: #374151;
  }

  .mpc-form-row .cell:last-child span {
    font-weight: 700;
    color: #1f2937;
    font-size: 1.1rem;
  }

  /* Loading Animation */
  .sk-cube-grid {
    width: 40px;
    height: 40px;
    margin: 20px auto;
  }

  .sk-cube-grid .sk-cube {
    width: 33%;
    height: 33%;
    background-color: #3b82f6;
    float: left;
    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  }

  .sk-cube-grid .sk-cube1 { animation-delay: 0.2s; }
  .sk-cube-grid .sk-cube2 { animation-delay: 0.3s; }
  .sk-cube-grid .sk-cube3 { animation-delay: 0.4s; }
  .sk-cube-grid .sk-cube4 { animation-delay: 0.1s; }
  .sk-cube-grid .sk-cube5 { animation-delay: 0.2s; }
  .sk-cube-grid .sk-cube6 { animation-delay: 0.3s; }
  .sk-cube-grid .sk-cube7 { animation-delay: 0s; }
  .sk-cube-grid .sk-cube8 { animation-delay: 0.1s; }
  .sk-cube-grid .sk-cube9 { animation-delay: 0.2s; }

  @keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
      transform: scale3D(1, 1, 1);
    } 35% {
      transform: scale3D(0, 0, 1);
    }
  }

/* Responsive Design */
@media (max-width: 768px) {
  .section__title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  .tool-form__frame {
    padding: 1.5rem;
  }

  .mpc-step-title {
    font-size: 1.125rem;
    padding: 0.875rem 1rem;
  }

  .mpc-step-body {
    padding: 1rem;
  }

  .mcp-btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.9rem;
    margin: 0.25rem;
  }

  .mpc-form-row .cell:last-child span {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .section__title {
    font-size: 1.75rem;
    margin-bottom: 1rem;
  }

  .tool-form__frame {
    padding: 1rem;
  }

  .mpc-step-title {
    font-size: 1rem;
    padding: 0.75rem 0.875rem;
  }

  .mpc-step-body {
    padding: 0.875rem;
  }

  .mcp-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    margin: 0.125rem;
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .button-group {
    text-align: center;
  }
}

/* Preapproval What Is Section Styling */
.preapproval-what-is-section {
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.preapproval-fsra-badge {
  margin-bottom: 1rem;
}

.preapproval-fsra-text {
  color: #10b981;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.preapproval-main-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0;
  line-height: 1.2;
}

.preapproval-content-block {
  margin-bottom: 3rem;
}

.preapproval-intro-text {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 1.5rem;
  text-align: left;
}

.preapproval-list-intro {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 1rem;
  text-align: left;
  font-weight: 500;
}

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

.preapproval-examined-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #374151;
}

.preapproval-examined-list li::before {
  content: "•";
  color: #3b82f6;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.2rem;
}

.preapproval-benefits-block {
  background: #f8fafc;
  padding: 2rem;
  border-radius: 12px;
  border-left: 4px solid #3b82f6;
}

.preapproval-benefits-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1.5rem;
  text-align: left;
}

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

.preapproval-benefits-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #374151;
}

.preapproval-benefits-list li::before {
  content: "•";
  color: #3b82f6;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.2rem;
}

/* Responsive Design for Preapproval Section */
@media (max-width: 768px) {
  .preapproval-main-title {
    font-size: 2rem;
  }

  .preapproval-intro-text,
  .preapproval-list-intro {
    font-size: 1rem;
  }

  .preapproval-benefits-title {
    font-size: 1.5rem;
  }

  .preapproval-benefits-block {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .preapproval-main-title {
    font-size: 1.75rem;
  }

  .preapproval-intro-text,
  .preapproval-list-intro {
    font-size: 0.95rem;
  }

  .preapproval-benefits-title {
    font-size: 1.25rem;
  }

  .preapproval-benefits-block {
    padding: 1rem;
  }

  .preapproval-examined-list li,
  .preapproval-benefits-list li {
    font-size: 0.9rem;
  }
}

/* Preapproval Comparison Table Section Styling */
.preapproval-comparison-section {
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

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

.preapproval-comparison-intro {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.preapproval-comparison-table {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
}

.preapproval-comparison-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #10b981;
}

.preapproval-comparison-header-cell {
  padding: 1rem 1.5rem;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.preapproval-comparison-header-cell:last-child {
  border-right: none;
}

.preapproval-comparison-header-text {
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.preapproval-comparison-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #e5e7eb;
}

.preapproval-comparison-row:last-child {
  border-bottom: none;
}

.preapproval-comparison-row-gray {
  background: #f9fafb;
}

.preapproval-comparison-row-white {
  background: #ffffff;
}

.preapproval-comparison-cell {
  padding: 1rem 1.5rem;
  border-right: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
}

.preapproval-comparison-cell:last-child {
  border-right: none;
}

.preapproval-comparison-text {
  color: #374151;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* Responsive Design for Comparison Table */
@media (max-width: 768px) {
  .preapproval-comparison-title {
    font-size: 2rem;
  }

  .preapproval-comparison-intro {
    font-size: 1rem;
  }

  .preapproval-comparison-header-cell,
  .preapproval-comparison-cell {
    padding: 0.75rem 1rem;
  }

  .preapproval-comparison-header-text {
    font-size: 0.875rem;
  }

  .preapproval-comparison-text {
    font-size: 0.9rem;
  }
}

@media (max-width: 640px) {
  .preapproval-comparison-table {
    margin: 0 -1rem;
    border-radius: 0;
  }

  .preapproval-comparison-header {
    grid-template-columns: 1fr;
  }

  .preapproval-comparison-row {
    grid-template-columns: 1fr;
  }

  .preapproval-comparison-header-cell,
  .preapproval-comparison-cell {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .preapproval-comparison-header-cell:last-child,
  .preapproval-comparison-cell:last-child {
    border-bottom: none;
  }

  .preapproval-comparison-row-gray .preapproval-comparison-cell:first-child,
  .preapproval-comparison-row-white .preapproval-comparison-cell:first-child {
    background: #f3f4f6;
    font-weight: 600;
  }
}

/* Preapproval Financial Considerations Section Styling */
.preapproval-financial-considerations-section {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}

.preapproval-financial-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  text-align: center;
}

.preapproval-financial-intro {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 3rem;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.preapproval-subsection-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1rem;
  margin-top: 2.5rem;
  line-height: 1.3;
  text-align: center;
}

.preapproval-subsection-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: #374151;
  margin-bottom: 1.5rem;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.preapproval-table-wrapper {
  margin: 2rem 0;
  overflow-x: auto;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.preapproval-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 12px;
  overflow: hidden;
}

.preapproval-table-header {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 1.5rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.preapproval-table-row {
  border-bottom: 1px solid #e5e7eb;
}

.preapproval-table-row:last-child {
  border-bottom: none;
}

.preapproval-table-row:nth-child(even) {
  background: #f9fafb;
}

.preapproval-table-row:hover {
  background: #f3f4f6;
  transition: background-color 0.2s ease;
}

.preapproval-table-cell {
  padding: 1rem 1.5rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #374151;
  text-align: center;
  vertical-align: middle;
}

.preapproval-table-cell:first-child {
  font-weight: 600;
  color: #1f2937;
}

/* Responsive Design for Financial Considerations Section */
@media (max-width: 768px) {
  .preapproval-financial-title {
    font-size: 2rem;
  }

  .preapproval-financial-intro {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .preapproval-subsection-title {
    font-size: 1.5rem;
    margin-top: 2rem;
  }

  .preapproval-table-header,
  .preapproval-table-cell {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }

  .preapproval-table-wrapper {
    margin: 1.5rem 0;
  }
}

@media (max-width: 480px) {
  .preapproval-financial-title {
    font-size: 1.75rem;
  }

  .preapproval-financial-intro {
    font-size: 0.95rem;
  }

  .preapproval-subsection-title {
    font-size: 1.25rem;
  }

  .preapproval-table-header,
  .preapproval-table-cell {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }

  .preapproval-table-wrapper {
    margin: 1rem 0;
    border-radius: 8px;
  }
}

  /* What Is Mortgage Refinancing Section Styles */
  .what-is-refinancing-section {
    background: #f8fafc;
    padding: 4rem 0;
    position: relative;
  }

  /* Section Title */
  .refinancing-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 3rem;
    text-align: center;
    position: relative;
  }

  .refinancing-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #10b981);
    border-radius: 2px;
  }

  /* Content Grid */
  .refinancing-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  @media (min-width: 1024px) {
    .refinancing-content-grid {
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
    }
  }

  /* Content Columns */
  .refinancing-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background: white;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
  }

  .refinancing-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #10b981);
  }

  /* Text Styling */
  .refinancing-text {
    color: #374151;
    line-height: 1.8;
    font-size: 1.1rem;
    text-align: justify;
    margin: 0;
    font-weight: 400;
  }

  /* List Styling */
  .refinancing-list {
    margin: 0;
    padding-left: 0;
    color: #374151;
    line-height: 1.8;
    list-style: none;
  }

  .refinancing-list li {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    position: relative;
    padding-left: 2rem;
    font-weight: 400;
  }

  .refinancing-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #10b981;
    font-weight: bold;
    font-size: 1.2rem;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .what-is-refinancing-section {
      padding: 3rem 0;
    }

    .refinancing-column {
      padding: 2rem;
      gap: 1.5rem;
    }

    .refinancing-text {
      text-align: left;
      font-size: 1rem;
    }

    .refinancing-list li {
      font-size: 1rem;
    }

    .refinancing-content-grid {
      gap: 2rem;
    }
  }

  @media (max-width: 480px) {
    .refinancing-column {
      padding: 1.5rem;
    }

    .refinancing-title {
      font-size: 2rem;
      margin-bottom: 2rem;
    }
  }
  .quick-card h3,.quick-card p{
    text-align: center;
  }
  .rotate-180{
    transform: rotate(180deg);
  }
  @media (min-width: 640px) {
    .hero-lead { font-size: 1.0625rem; }
  }
  @media (min-width: 768px) {
    .hero-lead { font-size: 1.125rem; }
    .quick-card{
      max-width: 100% !important;
    }

  }
  @media (min-width: 1024px) {
    .hero-lead { font-size: 1.2rem; }
  }

  .hero-bullet {
    color: rgba(255,255,255,0.92);
    font-size: 0.95rem;
  }

  .hero-cta {
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
    white-space: nowrap;
  }
  @media (min-width: 768px) {
    .hero-cta { font-size: 1.0625rem; padding: 0.9rem 1.25rem; }
  }
  @media (min-width: 1024px) {
    .hero-cta { font-size: 1.125rem; padding: 1rem 1.5rem; }
  }

  /* Badges spacing control */
  .hero-badges {
    margin-top: 1.5rem;
  }
  @media (min-width: 640px) {
    .hero-badges { margin-top: 2.5rem; }
  }
  @media (min-width: 1024px) {
    .hero-badges { margin-top: 2rem; }
  }

  .quick-card {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 20;
  }
  .quick-card input,
  .quick-card select {
    font-size: 0.95rem;
  }
  @media (min-width: 768px) {
    .quick-card input,
    .quick-card select { font-size: 1rem; }
  }

  /* 3D Icon tokens */
  .icon-3d {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(230,240,255,0.95));
    box-shadow: 6px 6px 18px rgba(0,0,0,0.12), -6px -6px 18px rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.7);
  }
  .icon-3d.blue {
    background: linear-gradient(145deg, #3b82f6, #1d4ed8);
    box-shadow: 6px 12px 22px rgba(29,78,216,0.35), inset 0 2px 8px rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.25);
  }
  .icon-3d.gold {
    background: linear-gradient(145deg, #f59e0b, #b45309);
    box-shadow: 6px 12px 22px rgba(180,83,9,0.35), inset 0 2px 8px rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.25);
  }

  /* Glossy primary CTA */
  .btn-glossy {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #2563eb, #1e40af);
  }
  .btn-glossy:before {
    content: "";
    position: absolute;
    top: -100%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 40%);
    transform: rotate(15deg);
    transition: transform .6s ease, opacity .6s ease;
    opacity: .6;
  }
  .btn-glossy:hover:before {
    transform: rotate(15deg) translateY(40%);
    opacity: .9;
  }

  /* Elevated quick card */
  .quick-card {
    backdrop-filter: blur(6px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
  }

  /* Custom Animations */
  @keyframes fade-in-up {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-20px);
    }
  }

  .floating {
    animation: float 6s ease-in-out infinite;
  }

  @keyframes lineGrow {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }

  @keyframes dotAppear {
    0% {
      opacity: 0;
      transform: scale(0);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

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

  .rotating-icon {
    animation: spin 2s linear infinite;
  }

  .scrolling-left {
    animation: scroll-left 30s linear infinite;
  }

  .scrolling-right {
    animation: scroll-right 30s linear infinite;
  }

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

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

  @keyframes sparkle {
    0%, 100% {
      opacity: 0.1;
      transform: scale(1);
    }
    50% {
      opacity: 0.3;
      transform: scale(1.2);
    }
  }

  .sparkle {
    animation: sparkle 3s ease-in-out infinite;
  }

  @keyframes ticker-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes ticker-right {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }

  .ticker-left {
    animation: ticker-left 20s linear infinite;
  }

  .ticker-right {
    animation: ticker-right 20s linear infinite;
  }

  .resource-card:hover {
    transform: translateY(-4px);
  }

  /* Modern Calculator Section Styles */
  .calculator-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.1),
      0 4px 16px rgba(0, 0, 0, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 2rem;
  }

  .calculator-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
  }

  .calculator-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(50%, -50%);
    transition: all 0.3s ease;
  }

  .calculator-card:hover::before {
    left: 100%;
  }

  .calculator-card:hover::after {
    transform: translate(30%, -30%) scale(1.2);
    opacity: 0.8;
  }

  .calculator-card:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow:
      0 25px 50px -12px rgba(0, 0, 0, 0.25),
      0 0 0 1px rgba(59, 130, 246, 0.1),
      0 0 40px rgba(59, 130, 246, 0.15);
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    border-color: rgba(59, 130, 246, 0.2);
  }

  .calculator-icon {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-right: 1.5rem;
    flex-shrink: 0;
    border-radius: 18px;
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.15),
      0 5px 15px rgba(0, 0, 0, 0.1),
      inset 0 2px 0 rgba(255, 255, 255, 0.4),
      inset 0 -2px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  /* Modern gradient backgrounds for icons */
  .calculator-icon.bg-blue-100 {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
  }
  .calculator-icon.bg-green-100 {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
  }
  .calculator-icon.bg-purple-100 {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%) !important;
  }
  .calculator-icon.bg-indigo-100 {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%) !important;
  }
  .calculator-icon.bg-orange-100 {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%) !important;
  }
  .calculator-icon.bg-red-100 {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
  }
  .calculator-icon.bg-teal-100 {
    background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%) !important;
  }
  .calculator-icon.bg-cyan-100 {
    background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%) !important;
  }
  .calculator-icon.bg-pink-100 {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%) !important;
  }
  .calculator-icon.bg-yellow-100 {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  }
  .calculator-icon.bg-emerald-100 {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
  }
  .calculator-icon.bg-violet-100 {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%) !important;
  }
  .calculator-icon.bg-amber-100 {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  }
  .calculator-icon.bg-rose-100 {
    background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%) !important;
  }
  .calculator-icon.bg-sky-100 {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
  }
  .calculator-icon.bg-lime-100 {
    background: linear-gradient(135deg, #ecfccb 0%, #d9f99d 100%) !important;
  }
  .calculator-icon.bg-stone-100 {
    background: linear-gradient(135deg, #f5f5f4 0%, #e7e5e4 100%) !important;
  }
  .calculator-icon.bg-slate-100 {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  }
  .calculator-icon.bg-zinc-100 {
    background: linear-gradient(135deg, #f4f4f5 0%, #e4e4e7 100%) !important;
  }
  .calculator-icon.bg-neutral-100 {
    background: linear-gradient(135deg, #f5f5f5 0%, #e5e5e5 100%) !important;
  }
  .calculator-icon.bg-gray-100 {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
  }

  /* Ensure icon text colors are visible */
  .calculator-icon .text-blue-600 { color: #2563eb !important; }
  .calculator-icon .text-green-600 { color: #16a34a !important; }
  .calculator-icon .text-purple-600 { color: #9333ea !important; }
  .calculator-icon .text-indigo-600 { color: #4f46e5 !important; }
  .calculator-icon .text-orange-600 { color: #ea580c !important; }
  .calculator-icon .text-red-600 { color: #dc2626 !important; }
  .calculator-icon .text-teal-600 { color: #0d9488 !important; }
  .calculator-icon .text-cyan-600 { color: #0891b2 !important; }
  .calculator-icon .text-pink-600 { color: #db2777 !important; }
  .calculator-icon .text-yellow-600 { color: #ca8a04 !important; }
  .calculator-icon .text-emerald-600 { color: #059669 !important; }
  .calculator-icon .text-violet-600 { color: #7c3aed !important; }
  .calculator-icon .text-amber-600 { color: #d97706 !important; }
  .calculator-icon .text-rose-600 { color: #e11d48 !important; }
  .calculator-icon .text-sky-600 { color: #0284c7 !important; }
  .calculator-icon .text-lime-600 { color: #65a30d !important; }
  .calculator-icon .text-stone-600 { color: #57534e !important; }
  .calculator-icon .text-slate-600 { color: #475569 !important; }
  .calculator-icon .text-zinc-600 { color: #52525b !important; }
  .calculator-icon .text-neutral-600 { color: #525252 !important; }
  .calculator-icon .text-gray-600 { color: #4b5563 !important; }

  /* Force SVG colors to work properly */
  .calculator-icon svg {
    color: inherit !important;
  }

  .calculator-icon svg path,
  .calculator-icon svg circle,
  .calculator-icon svg rect,
  .calculator-icon svg line,
  .calculator-icon svg polyline,
  .calculator-icon svg polygon {
    stroke: currentColor !important;
    fill: none !important;
  }

  .calculator-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(0, 0, 0, 0.05) 100%);
    pointer-events: none;
  }

  .calculator-card:hover .calculator-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow:
      0 12px 35px rgba(0, 0, 0, 0.2),
      0 6px 18px rgba(0, 0, 0, 0.15),
      inset 0 2px 0 rgba(255, 255, 255, 0.4),
      inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  }

  .calculator-btn {
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    font-weight: 800;
    text-align: center;
    display: inline-block;
    width: 100%;
    color: white !important;
    text-decoration: none;
    outline: none;
    padding: 1rem 1.5rem;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.25rem;
    margin-top: auto;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow:
      0 6px 20px rgba(59, 130, 246, 0.4),
      0 3px 10px rgba(59, 130, 246, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    overflow: hidden;
  }

  .calculator-btn:hover {
    transform: translateY(-3px) scale(1.02);
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    box-shadow:
      0 8px 25px rgba(59, 130, 246, 0.5),
      0 4px 15px rgba(59, 130, 246, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }

  .calculator-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
  }

  .calculator-btn:hover::before {
    left: 100%;
  }

  .calculator-btn:active {
    transform: translateY(0);
  }

  .calculator-btn * {
    color: inherit !important;
    background: transparent !important;
  }

  /* Enhanced typography for calculator cards */
  .calculator-card h3 {
    font-weight: 600;
    font-size: 16px !important;
    line-height: 1.3;
    color: #1e293b;
    margin-bottom: 0.75rem;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .calculator-card p {
    color: #64748b;
    line-height: 1.7;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
  }

  /* Button container to push button to bottom */
  .calculator-card > div:last-child {
    margin-top: auto;
  }

  /* Modern calculator section animations */
  .calculator-card {
    animation: slideInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }

  @keyframes slideInUp {
    0% {
      opacity: 0;
      transform: translateY(40px) scale(0.95);
    }
    50% {
      opacity: 0.8;
      transform: translateY(-5px) scale(1.02);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  .calculator-card:nth-child(1) { animation-delay: 0.1s; }
  .calculator-card:nth-child(2) { animation-delay: 0.2s; }
  .calculator-card:nth-child(3) { animation-delay: 0.3s; }
  .calculator-card:nth-child(4) { animation-delay: 0.4s; }
  .calculator-card:nth-child(5) { animation-delay: 0.5s; }
  .calculator-card:nth-child(6) { animation-delay: 0.6s; }
  .calculator-card:nth-child(7) { animation-delay: 0.7s; }
  .calculator-card:nth-child(8) { animation-delay: 0.8s; }
  .calculator-card:nth-child(9) { animation-delay: 0.9s; }
  .calculator-card:nth-child(10) { animation-delay: 1.0s; }
  .calculator-card:nth-child(11) { animation-delay: 1.1s; }
  .calculator-card:nth-child(12) { animation-delay: 1.2s; }
  .calculator-card:nth-child(13) { animation-delay: 1.3s; }
  .calculator-card:nth-child(14) { animation-delay: 1.4s; }
  .calculator-card:nth-child(15) { animation-delay: 1.5s; }
  .calculator-card:nth-child(16) { animation-delay: 1.6s; }
  .calculator-card:nth-child(17) { animation-delay: 1.7s; }
  .calculator-card:nth-child(18) { animation-delay: 1.8s; }
  .calculator-card:nth-child(19) { animation-delay: 1.9s; }
  .calculator-card:nth-child(20) { animation-delay: 2.0s; }
  .calculator-card:nth-child(21) { animation-delay: 2.1s; }
  .calculator-card:nth-child(22) { animation-delay: 2.2s; }

  /* Modern section header styling */
  #calculators h2 {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    font-size: 2.5rem;
    letter-spacing: -0.025em;
    margin-bottom: 1rem;
  }

  #calculators p {
    color: #64748b;
    font-size: 1.125rem;
    line-height: 1.7;
    max-width: 42rem;
    margin: 0 auto 1.5rem;
  }

  /* Add subtle background pattern */
  #calculators {
    position: relative;
  }

  #calculators::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
    pointer-events: none;
  }


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

  /* Responsive header adjustments */
  @media (max-width: 768px) {
    #calculators h2 {
      font-size: 2rem;
    }

    #calculators p {
      font-size: 1rem;
    }
  }

  @media (max-width: 640px) {
    #calculators h2 {
      font-size: 1.75rem;
    }

    #calculators p {
      font-size: 0.9rem;
    }
  }

  @media (max-width: 480px) {
    #calculators h2 {
      font-size: 1.5rem;
    }

    #calculators p {
      font-size: 0.85rem;
    }

    #calculators {
      padding: 2rem 0;
    }

    #calculators .max-w-7xl {
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }

  /* Responsive adjustments for calculator section */
  @media (max-width: 1024px) {
    .calculator-card {
      margin-bottom: 1.5rem;
    }

    .calculator-card h3 {
      font-size: 1.1rem;
      line-height: 1.3;
    }

    .calculator-card p {
      font-size: 0.875rem;
      line-height: 1.5;
    }
  }

  @media (max-width: 768px) {
    .calculator-card {
      margin-bottom: 1.25rem;
      padding: 1.25rem;
    }

    .calculator-card h3 {
      font-size: 1rem;
      line-height: 1.3;
      margin-bottom: 0.75rem;
    }

    .calculator-card p {
      font-size: 0.8rem;
      line-height: 1.5;
      margin-bottom: 1.25rem;
    }

    .calculator-icon {
      width: 2.75rem;
      height: 2.75rem;
      margin-right: 0.75rem;
    }

    .calculator-icon svg {
      width: 1.25rem;
      height: 1.25rem;
    }

    .calculator-btn {
      padding: 0.75rem 1rem;
      font-size: 0.875rem;
    }
  }

  @media (max-width: 640px) {
    .calculator-card {
      padding: 1rem;
      margin-bottom: 1rem;
    }

    .calculator-card h3 {
      font-size: 0.95rem;
      line-height: 1.3;
      margin-bottom: 0.5rem;
    }

    .calculator-card p {
      font-size: 0.8rem;
      line-height: 1.4;
      margin-bottom: 1rem;
    }

    .calculator-icon {
      width: 2.5rem;
      height: 2.5rem;
      margin-right: 0.75rem;
    }

    .calculator-icon svg {
      width: 1.125rem;
      height: 1.125rem;
    }

    .calculator-btn {
      padding: 0.625rem 0.875rem;
      font-size: 0.8rem;
    }
  }

  @media (max-width: 480px) {
    .calculator-card {
      padding: 1.5rem;
      margin-bottom: 0.875rem;
    }

    .calculator-card h3 {
      font-size: 0.9rem;
      line-height: 1.3;
      margin-bottom: 0.5rem;
    }

    .calculator-card p {
      font-size: 0.75rem;
      line-height: 1.4;
      margin-bottom: 0.875rem;
    }

    .calculator-icon {
      width: 2.25rem;
      height: 2.25rem;
      margin-right: 0.625rem;
    }

    .calculator-icon svg {
      width: 1rem;
      height: 1rem;
    }

    .calculator-btn {
      padding: 0.5rem 0.75rem;
      font-size: 0.75rem;
    }
  }

  @media (max-width: 360px) {
    .calculator-card {
      padding: 0.75rem;
      margin-bottom: 0.75rem;
    }

    .calculator-card h3 {
      font-size: 0.85rem;
      line-height: 1.3;
      margin-bottom: 0.375rem;
    }

    .calculator-card p {
      font-size: 0.7rem;
      line-height: 1.3;
      margin-bottom: 0.75rem;
    }

    .calculator-icon {
      width: 2rem;
      height: 2rem;
      margin-right: 0.5rem;
    }

    .calculator-icon svg {
      width: 0.875rem;
      height: 0.875rem;
    }

    .calculator-btn {
      padding: 0.5rem 0.625rem;
      font-size: 0.7rem;
    }
  }

  /* Lenders & Associations Section Styles */
  #lenders {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
  }

  #lenders::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.03) 0%, transparent 50%);
    pointer-events: none;
  }

  #lenders::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.6) 100%);
    pointer-events: none;
  }

  .lender-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 50%;
    box-shadow:
      0 8px 25px rgba(0, 0, 0, 0.08),
      0 4px 12px rgba(0, 0, 0, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 3px solid rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    padding: 1.2rem;
    justify-self: center;
    backdrop-filter: blur(10px);
    margin-right: 1.5rem;
  }
  .lender-logo:last-child{
    margin-right: 0;
  }


  .lender-logo:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow:
      0 12px 25px rgba(0, 0, 0, 0.15),
      0 6px 12px rgba(0, 0, 0, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
  }

  .lender-logo img {
    width: 100%;
    height: auto;
    object-fit: scale-down;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
  }

  .lender-logo img[src*="rfa"],
  .lender-logo img[src*="lendwise"]{
    filter: brightness(100%) contrast(5%) saturate(100%) blur(0px) hue-rotate(0deg);
  }
  .lender-logo:hover img {
    transform: scale(1.05);
  }

  #lenders h2 {
    color: #3b82f6;
    font-weight: 700;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
    position: relative;
    z-index: 1;
  }

  #lenders h3 {
    color: #1e293b;
    font-weight: 800;
    letter-spacing: -0.025em;
    font-family: 'Playfair Display', serif;
    text-shadow: 0 2px 4px rgba(30, 41, 59, 0.1);
    position: relative;
    z-index: 1;
  }

  /* Ensure lender grid items are centered */
  #lenders .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-items: center !important;
    place-items: center !important;
  }

  /* Center insurers grid with 3 items */
  .insurers-grid {
    justify-content: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
  }

  .insurers-grid .lender-logo {
    flex: 0 0 auto !important;
  }

  /* Center alternate lenders grid with 2 items */
  .alternate-lenders-grid {
    justify-content: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
  }

  .alternate-lenders-grid .lender-logo {
    flex: 0 0 auto !important;
  }

  #lenders h4 {
    color: #1e293b;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 1.25rem;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    margin-bottom: 1rem;
  }

  #lenders h4::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #10b981);
    border-radius: 2px;
  }

  #lenders p {
    color: #475569;
    font-size: 1.1rem;
    line-height: 1.7;
    font-weight: 400;
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
  }

  /* Section spacing improvements */
  #lenders .mb-12 {
    margin-bottom: 4rem !important;
  }

  #lenders .mt-12 {
    margin-top: 4rem !important;
  }

  /* Enhanced section containers */
  #lenders > div > div {
    position: relative;
    z-index: 1;
  }


  /* Calculator Modal Styles */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
  }

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

  .modal-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: modalSlideIn 0.3s ease-out;
  }

  @keyframes modalSlideIn {
    from {
      opacity: 0;
      transform: scale(0.9) translateY(-20px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  .modal-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
  }

  .modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
  }

  .modal-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .modal-content {
    padding: 2rem;
  }

  .modal-image {
    margin-bottom: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
  }

  .modal-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  .modal-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    justify-content: flex-start;
  }

  .modal-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 120px;
  }

  .modal-btn-primary {
    background: #1e293b;
    color: white;
  }

  .modal-btn-primary:hover {
    background: #334155;
    transform: translateY(-1px);
  }

  .modal-btn-secondary {
    background: #f1f5f9;
    color: #1e293b;
    border: 1px solid #e2e8f0;
  }

  .modal-btn-secondary:hover {
    background: #e2e8f0;
    transform: translateY(-1px);
  }

  .calculator-form {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1.5rem;
  }

  .form-section {
    margin-bottom: 2rem;
  }

  .form-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
  }

  .form-note {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 1.5rem;
  }

  .required {
    color: #ef4444;
  }

  .input-group {
    margin-bottom: 1rem;
  }

  .input-label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
  }

  .input-field {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.75rem;
    transition: border-color 0.2s;
  }

  .input-field:hover {
    border-color: #9ca3af;
  }

  .input-prefix {
    color: #6b7280;
    margin-right: 0.5rem;
    font-size: 0.875rem;
  }

  .input-value {
    flex: 1;
    border: none;
    outline: none;
    font-weight: 600;
    color: #1e293b;
    background: transparent;
  }

  .input-arrow {
    color: #9ca3af;
    font-size: 0.75rem;
  }

  .input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .input-suffix {
    color: #6b7280;
    margin-left: 0.5rem;
    font-size: 0.875rem;
  }

  .input-value {
    flex: 1;
    border: none;
    outline: none;
    font-weight: 600;
    color: #1e293b;
    background: transparent;
    padding: 0.5rem 0;
  }

  .input-value:focus {
    color: #1e40af;
  }

  select.input-value {
    cursor: pointer;
  }

  .results-section {
    margin-top: 2rem;
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
  }

  .stacked-chart {
    position: relative;
    height: 300px;
    display: flex;
    align-items: end;
    justify-content: center;
    padding-left: 3rem;
  }

  .chart-bar-stacked {
    width: 80px;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .bar-segment {
    width: 100%;
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: all 0.3s ease;
  }

  .bar-principal {
    background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%);
    min-height: 20px;
  }

  .bar-interest {
    background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%);
    min-height: 20px;
  }

  .chart-legend {
    position: absolute;
    bottom: -3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .legend-color {
    width: 16px;
    height: 16px;
    border-radius: 2px;
  }

  .legend-label {
    font-size: 0.875rem;
    color: #6b7280;
  }

  .summary-section {
    margin-top: 2rem;
  }

  .summary-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
  }

  .summary-table {
    background: #f8fafc;
    border-radius: 8px;
    padding: 1rem;
  }

  .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e5e7eb;
  }

  .summary-row:last-child {
    border-bottom: none;
  }

  .summary-label {
    font-weight: 600;
    color: #374151;
  }

  .summary-value {
    font-weight: 700;
    color: #1e293b;
  }

  .chart-section {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
  }

  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  .chart-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
  }

  .chart-arrow {
    color: #6b7280;
    font-size: 0.875rem;
  }

  .chart-container {
    position: relative;
    height: 300px;
    display: flex;
    align-items: end;
    gap: 1rem;
    padding-left: 3rem;
  }

  .chart-bars {
    display: flex;
    align-items: end;
    gap: 1rem;
    flex: 1;
  }

  .chart-bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    position: relative;
    min-height: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.5rem;
  }

  .chart-bar-1 {
    background: linear-gradient(180deg, #1e40af 0%, #3b82f6 100%);
  }

  .chart-bar-2 {
    background: linear-gradient(180deg, #2563eb 0%, #60a5fa 100%);
  }

  .chart-bar-3 {
    background: linear-gradient(180deg, #059669 0%, #10b981 100%);
  }

  .bar-value {
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  .chart-labels {
    position: absolute;
    bottom: -2rem;
    left: 3rem;
    right: 0;
    display: flex;
    justify-content: space-around;
    font-size: 0.75rem;
    color: #6b7280;
  }

  .chart-y-axis {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #6b7280;
    text-align: right;
  }

  /* Responsive Modal */
  @media (max-width: 768px) {
    .modal-container {
      width: 95%;
      margin: 1rem;
    }

    .modal-header {
      padding: 1rem 1.5rem;
    }

    .modal-title {
      font-size: 1.25rem;
    }

    .modal-content {
      padding: 1.5rem;
    }

    .modal-actions {
      flex-direction: column;
    }

    .input-row {
      grid-template-columns: 1fr;
    }

    .stacked-chart {
      height: 250px;
      padding-left: 2.5rem;
    }

    .chart-y-axis {
      width: 2rem;
    }

    .chart-container {
      height: 250px;
      padding-left: 2.5rem;
    }

    .chart-y-axis {
      width: 2rem;
    }

    .chart-labels {
      left: 2.5rem;
    }
  }

  @media (max-width: 480px) {
    .modal-container {
      width: 98%;
      margin: 0.5rem;
    }

    .modal-header {
      padding: 0.75rem 1rem;
    }

    .modal-title {
      font-size: 1.125rem;
    }

    .modal-content {
      padding: 1rem;
    }

    .chart-container {
      height: 200px;
      padding-left: 2rem;
    }

    .chart-y-axis {
      width: 1.5rem;
    }

    .chart-labels {
      left: 2rem;
    }
  }

  /* ===== MODERN TESTIMONIALS SECTION ===== */
  .testimonials-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
    position: relative;
    overflow: hidden;
  }

  /* Animated Background Elements */
  .testimonials-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
  }

  .floating-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
    animation: float-shapes 20s ease-in-out infinite;
    filter: blur(1px);
  }

  .shape-1 {
    width: 80px;
    height: 80px;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.15), rgba(16, 185, 129, 0.1));
  }

  .shape-2 {
    width: 120px;
    height: 120px;
    top: 20%;
    right: 10%;
    animation-delay: 3s;
    background: linear-gradient(45deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.15));
  }

  .shape-3 {
    width: 60px;
    height: 60px;
    bottom: 30%;
    left: 15%;
    animation-delay: 6s;
    background: linear-gradient(45deg, rgba(16, 185, 129, 0.15), rgba(139, 92, 246, 0.1));
  }

  .shape-4 {
    width: 100px;
    height: 100px;
    bottom: 15%;
    right: 20%;
    animation-delay: 9s;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.15));
  }

  .shape-5 {
    width: 70px;
    height: 70px;
    top: 50%;
    left: 2%;
    animation-delay: 12s;
    background: linear-gradient(45deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.1));
  }

  .shape-6 {
    width: 90px;
    height: 90px;
    top: 60%;
    right: 5%;
    animation-delay: 15s;
    background: linear-gradient(45deg, rgba(16, 185, 129, 0.1), rgba(139, 92, 246, 0.15));
  }

  @keyframes float-shapes {
    0%, 100% {
      transform: translateY(0px) rotate(0deg);
      opacity: 0.3;
    }
    25% {
      transform: translateY(-20px) rotate(90deg);
      opacity: 0.6;
    }
    50% {
      transform: translateY(-10px) rotate(180deg);
      opacity: 0.4;
    }
    75% {
      transform: translateY(-30px) rotate(270deg);
      opacity: 0.7;
    }
  }

  /* Section Title Styling */
  .testimonials-title {
    background: linear-gradient(135deg, #1e293b 0%, #3b82f6 50%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    animation: title-glow 3s ease-in-out infinite alternate;
  }

  @keyframes title-glow {
    0% {
      filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.3));
    }
    100% {
      filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.4));
    }
  }

  .title-underline {
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #10b981, #8b5cf6);
    border-radius: 2px;
    margin: 0 auto;
    width: 100px;
    animation: underline-expand 2s ease-in-out infinite alternate;
  }

  @keyframes underline-expand {
    0% {
      width: 100px;
    }
    100% {
      width: 200px;
    }
  }

  .testimonials-subtitle {
    animation: fade-in-up 1s ease-out 0.5s both;
  }

  /* Testimonial Cards */
  .testimonial-card {
    position: relative;
    perspective: 1000px;
    animation: card-float 6s ease-in-out infinite;
  }

  .testimonial-card:nth-child(1) {
    animation-delay: 0s;
  }

  .testimonial-card:nth-child(2) {
    animation-delay: 2s;
  }

  .testimonial-card:nth-child(3) {
    animation-delay: 4s;
  }

  /* Single Column Layout for Screens Less Than 1024px */
  @media (max-width: 1023px) {
    .testimonials-grid {
      display: flex !important;
      flex-direction: column !important;
      gap: 1.5rem !important;
    }

    .testimonial-card {
      width: 100% !important;
      max-width: none !important;
    }
  }

  /* Center Card Special Styling for Large Screens */
  @media (min-width: 1024px) {
    .testimonial-card:nth-child(2) {
      transform: scale(1.05);
      z-index: 10;
    }

    .testimonial-card:nth-child(2) .card-inner {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
      border: 2px solid rgba(59, 130, 246, 0.4);
      box-shadow:
        0 30px 60px rgba(59, 130, 246, 0.2),
        0 0 0 1px rgba(16, 185, 129, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
      animation: center-card-glow 4s ease-in-out infinite;
      position: relative;
    }

    .testimonial-card:nth-child(2) .card-inner::after {
      content: '';
      position: absolute;
      top: -1px;
      left: -1px;
      right: -1px;
      bottom: -1px;
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(16, 185, 129, 0.2));
      border-radius: 20px;
      z-index: -1;
      animation: subtle-border-glow 3s ease-in-out infinite;
    }

    .testimonial-card:nth-child(2)::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(16, 185, 129, 0.3), rgba(59, 130, 246, 0.3));
      border-radius: 22px;
      z-index: -1;
      animation: professional-glow 4s ease-in-out infinite;
      opacity: 0.8;
    }

    .testimonial-card:nth-child(2) .quote-icon {
      background: linear-gradient(135deg, #3b82f6, #10b981);
      animation: center-quote-pulse 2.5s ease-in-out infinite;
      box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
    }

    .testimonial-card:nth-child(2) .testimonial-text {
      color: #1e293b;
      font-weight: 500;
    }

    .testimonial-card:nth-child(2) .client-name {
      color: #3b82f6;
      font-weight: 700;
    }

    .testimonial-card:nth-child(2) .stars {
      filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3));
    }

    .testimonial-card:nth-child(2) .avatar-placeholder {
      border-color: rgba(59, 130, 246, 0.4);
      background: linear-gradient(135deg, #dbeafe, #bfdbfe);
      color: #3b82f6;
    }
  }

  @keyframes card-float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .card-inner {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
      0 10px 40px rgba(0, 0, 0, 0.1),
      0 4px 20px rgba(0, 0, 0, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
  }

  .testimonial-card:hover .card-inner {
    transform: translateY(-15px) rotateX(5deg) rotateY(5deg);
    box-shadow:
      0 25px 60px rgba(0, 0, 0, 0.15),
      0 10px 30px rgba(0, 0, 0, 0.1),
      0 0 0 1px rgba(59, 130, 246, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
  }

  /* Quote Icon */
  .quote-icon {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #3b82f6, #10b981);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    animation: quote-pulse 2s ease-in-out infinite;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
  }

  @keyframes quote-pulse {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
    }
    50% {
      transform: scale(1.1);
      box-shadow: 0 12px 35px rgba(59, 130, 246, 0.5);
    }
  }

  .testimonial-card:hover .quote-icon {
    animation: quote-bounce 0.8s ease-out;
  }

  @keyframes quote-bounce {
    0% {
      transform: translateY(0) scale(1);
    }
    25% {
      transform: translateY(-8px) scale(1.05);
    }
    50% {
      transform: translateY(-12px) scale(1.1);
    }
    75% {
      transform: translateY(-8px) scale(1.05);
    }
    100% {
      transform: translateY(0) scale(1);
    }
  }

  /* Banking Partners Section Styles */
  .banking-partners-section {
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  }

  .banking-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
    animation: banking-float 6s ease-in-out infinite;
  }

  .banking-shape-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    left: -100px;
    animation-delay: 0s;
  }

  .banking-shape-2 {
    width: 150px;
    height: 150px;
    top: 60%;
    right: -75px;
    animation-delay: 2s;
  }

  .banking-shape-3 {
    width: 100px;
    height: 100px;
    top: 30%;
    right: 20%;
    animation-delay: 4s;
  }

  @keyframes banking-float {
    0%, 100% {
      transform: translateY(0px) rotate(0deg);
    }
    50% {
      transform: translateY(-20px) rotate(180deg);
    }
  }

  .banking-title {
    background: linear-gradient(135deg, #1e293b, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
  }

  .banking-underline {
    height: 4px;
    width: 80px;
    background: linear-gradient(135deg, #3b82f6, #10b981);
    margin: 0 auto;
    border-radius: 2px;
    position: relative;
  }

  .banking-underline::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #10b981, #3b82f6);
    border-radius: 2px;
    animation: banking-underline-glow 2s ease-in-out infinite alternate;
  }

  @keyframes banking-underline-glow {
    0% {
      opacity: 0.7;
      transform: scaleX(1);
    }
    100% {
      opacity: 1;
      transform: scaleX(1.1);
    }
  }

  .banking-description {
    color: #64748b;
    line-height: 1.7;
  }

  .banking-grid {
    display: flex;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
  }

  .banking-partner-card {
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
  }

  .banking-card-inner {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.08),
      0 4px 16px rgba(0, 0, 0, 0.04),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
  }

  .banking-card-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
      rgba(59, 130, 246, 0.05) 0%,
      rgba(16, 185, 129, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 20px;
  }

  .banking-partner-card:hover .banking-card-inner {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.12),
      0 8px 25px rgba(0, 0, 0, 0.08),
      0 0 0 1px rgba(59, 130, 246, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
  }

  .banking-partner-card:hover .banking-card-inner::before {
    opacity: 1;
  }

  .banking-icon-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 2;
  }

  .banking-icon {
    max-width: 100%;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .banking-partner-card:hover .banking-icon {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.05);
  }

  /* Banking View All Button */
  .banking-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    margin-top: 3.5rem;
  }

  .banking-view-all-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
  }

  .banking-view-all-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #2563eb, #1e40af);
  }

  .banking-view-all-btn:hover::before {
    left: 100%;
  }

  .banking-btn-text {
    position: relative;
    z-index: 2;
  }

  .banking-btn-icon {
    position: relative;
    z-index: 2;
    transition: transform 0.4s ease;
  }

  .banking-view-all-btn:hover .banking-btn-icon {
    transform: translateX(4px);
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .banking-grid {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1.5rem;
    }

    .banking-card-inner {
      padding: 1.5rem;
      min-height: 100px;
    }

    .banking-icon {
      max-height: 50px;
    }

    .banking-title {
      font-size: 2.5rem;
    }

    .banking-view-all-btn {
      padding: 0.875rem 1.5rem;
      font-size: 0.8rem;
    }
  }

  @media (max-width: 480px) {
    .banking-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }

    .banking-card-inner {
      padding: 1rem;
      min-height: 80px;
    }

    .banking-icon {
      max-height: 40px;
    }
  }

  /* Center Card Animations */
  @keyframes center-card-glow {
    0%, 100% {
      box-shadow:
        0 30px 60px rgba(59, 130, 246, 0.2),
        0 0 0 1px rgba(16, 185, 129, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    50% {
      box-shadow:
        0 35px 70px rgba(59, 130, 246, 0.3),
        0 0 0 1px rgba(16, 185, 129, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
  }

  @keyframes professional-glow {
    0%, 100% {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(16, 185, 129, 0.3), rgba(59, 130, 246, 0.3));
      opacity: 0.8;
    }
    25% {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(59, 130, 246, 0.4), rgba(16, 185, 129, 0.4));
      opacity: 0.9;
    }
    50% {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.5), rgba(16, 185, 129, 0.5), rgba(59, 130, 246, 0.5));
      opacity: 1;
    }
    75% {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(59, 130, 246, 0.4), rgba(16, 185, 129, 0.4));
      opacity: 0.9;
    }
  }

  @keyframes subtle-border-glow {
    0%, 100% {
      opacity: 0.3;
      transform: scale(1);
    }
    50% {
      opacity: 0.6;
      transform: scale(1.01);
    }
  }

  @keyframes center-quote-pulse {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
    }
    50% {
      transform: scale(1.15);
      box-shadow: 0 15px 40px rgba(59, 130, 246, 0.6);
    }
  }

  /* Testimonial Text */
  .testimonial-text {
    font-size: 1rem;
    line-height: 1.7;
    color: #374151;
    margin: 3rem 0 2rem 0;
    font-style: italic;
    position: relative;
    z-index: 2;
    animation: text-fade-in 1s ease-out 0.3s both;
  }

  @keyframes text-fade-in {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Author Info */
  .author-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    position: relative;
    z-index: 2;
  }

  .author-avatar {
    flex-shrink: 0;
  }

  .avatar-placeholder {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    border: 3px solid rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;
  }

  .testimonial-card:hover .avatar-placeholder {
    border-color: rgba(59, 130, 246, 0.5);
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #3b82f6;
    transform: scale(1.1);
  }

  .author-details {
    flex: 1;
  }

  .author-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
    animation: name-slide-in 0.8s ease-out 0.6s both;
  }

  @keyframes name-slide-in {
    0% {
      opacity: 0;
      transform: translateX(-20px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Star Rating */
  .star-rating {
    animation: stars-fade-in 1s ease-out 0.8s both;
  }

  @keyframes stars-fade-in {
    0% {
      opacity: 0;
      transform: scale(0.8);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  .stars {
    display: flex;
    gap: 0.25rem;
  }

  .star {
    color: #fbbf24;
    font-size: 1.2rem;
    animation: star-twinkle 2s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
  }

  .star:nth-child(1) { animation-delay: 0s; }
  .star:nth-child(2) { animation-delay: 0.2s; }
  .star:nth-child(3) { animation-delay: 0.4s; }
  .star:nth-child(4) { animation-delay: 0.6s; }
  .star:nth-child(5) { animation-delay: 0.8s; }

  @keyframes star-twinkle {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.8;
    }
  }

  /* Card Glow Effect */
  .card-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #3b82f6, #10b981, #8b5cf6, #3b82f6);
    border-radius: 26px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: glow-rotate 3s linear infinite;
  }

  @keyframes glow-rotate {
    0% {
      background: linear-gradient(45deg, #3b82f6, #10b981, #8b5cf6, #3b82f6);
    }
    25% {
      background: linear-gradient(135deg, #10b981, #8b5cf6, #3b82f6, #10b981);
    }
    50% {
      background: linear-gradient(225deg, #8b5cf6, #3b82f6, #10b981, #8b5cf6);
    }
    75% {
      background: linear-gradient(315deg, #3b82f6, #10b981, #8b5cf6, #3b82f6);
    }
    100% {
      background: linear-gradient(45deg, #3b82f6, #10b981, #8b5cf6, #3b82f6);
    }
  }

  .testimonial-card:hover .card-glow {
    opacity: 0.7;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .testimonials-section {
      padding: 3rem 0;
    }

    .testimonials-title {
      font-size: 2.5rem;
    }

    .card-inner {
      padding: 1.5rem;
    }

    .testimonial-text {
      font-size: 0.95rem;
      margin: 2.5rem 0 1.5rem 0;
    }

    .quote-icon {
      width: 2.5rem;
      height: 2.5rem;
      top: 1rem;
      right: 1rem;
    }

    .quote-icon svg {
      width: 1.25rem;
      height: 1.25rem;
    }

    .floating-shape {
      display: none;
    }

  }

  @media (max-width: 640px) {
    .testimonials-title {
      font-size: 2rem;
    }

    .testimonials-subtitle {
      font-size: 1rem;
    }

    .card-inner {
      padding: 1.25rem;
    }

    .testimonial-text {
      font-size: 0.9rem;
      margin: 2rem 0 1.25rem 0;
    }

    .author-name {
      font-size: 1rem;
    }

    .star {
      font-size: 1rem;
    }
  }

  /* Animation delays for staggered entrance */
  .testimonial-card[data-aos="fade-up"][data-aos-delay="100"] {
    animation-delay: 0.1s;
  }

  .testimonial-card[data-aos="fade-up"][data-aos-delay="200"] {
    animation-delay: 0.2s;
  }

  .testimonial-card[data-aos="fade-up"][data-aos-delay="300"] {
    animation-delay: 0.3s;
  }

  /* Hover effects for mobile */
  @media (hover: none) {
    .testimonial-card:hover .card-inner {
      transform: none;
    }

    .testimonial-card:hover .quote-icon {
      animation: none;
    }

    .testimonial-card:hover .card-glow {
      opacity: 0;
    }
  }

  /* ===== COAST TO COAST SECTION ===== */
  .coast-to-coast-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 30%, #cbd5e1 70%, #94a3b8 100%);
    position: relative;
    overflow: hidden;
  }

  /* Background Shapes */
  .coast-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
    animation: coast-float 20s ease-in-out infinite;
    filter: blur(1px);
  }

  .coast-shape-1 {
    width: 120px;
    height: 120px;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.15), rgba(16, 185, 129, 0.15));
  }

  .coast-shape-2 {
    width: 80px;
    height: 80px;
    top: 60%;
    right: 10%;
    animation-delay: 7s;
    background: linear-gradient(45deg, rgba(16, 185, 129, 0.12), rgba(59, 130, 246, 0.12));
  }

  .coast-shape-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 15%;
    animation-delay: 14s;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
  }

  @keyframes coast-float {
    0%, 100% {
      transform: translateY(0px) rotate(0deg);
    }
    25% {
      transform: translateY(-20px) rotate(90deg);
    }
    50% {
      transform: translateY(-10px) rotate(180deg);
    }
    75% {
      transform: translateY(-30px) rotate(270deg);
    }
  }

  /* Section Title Styling */
  .coast-title {
    background: linear-gradient(135deg, #1e293b 0%, #3b82f6 50%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: coast-title-glow 3s ease-in-out infinite;
  }

  .coast-underline {
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #10b981, #3b82f6);
    border-radius: 2px;
    animation: coast-underline-expand 2s ease-out;
  }

  @keyframes coast-title-glow {
    0%, 100% {
      filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.3));
    }
    50% {
      filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.5));
    }
  }

  @keyframes coast-underline-expand {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    }
  }

  .coast-subtitle {
    animation: fade-in-up 1s ease-out 0.3s both;
  }

  .coast-description {
    animation: fade-in-up 1s ease-out 0.6s both;
  }

  /* Province Cards */
  .province-card {
    position: relative;
    perspective: 1000px;
    animation: province-float 8s ease-in-out infinite;
  }

  .province-card:nth-child(1) {
    animation-delay: 0s;
  }

  .province-card:nth-child(2) {
    animation-delay: 4s;
  }

  @keyframes province-float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .province-card-inner {
    position: relative;
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
      0 20px 40px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
  }

  .province-card:hover .province-card-inner {
    transform: translateY(-15px) rotateX(5deg) rotateY(5deg);
    box-shadow:
      0 25px 60px rgba(0, 0, 0, 0.15),
      0 10px 30px rgba(0, 0, 0, 0.1),
      0 0 0 1px rgba(59, 130, 246, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  /* Province Backgrounds with Actual Images */
  .province-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
  }

  .alberta-bg {
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url('images/alberta.jpg');
  }

  .ontario-bg {
    background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url('images/ontario.jpg');
  }

  .province-card:hover .province-bg {
    transform: scale(1.1);
  }

  .province-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
    transition: background 0.4s ease;
  }

  .province-card:hover .province-overlay {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
  }

  /* Province Content */
  .province-content {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
  }

  .province-name {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    animation: province-text-glow 3s ease-in-out infinite;
  }

  .province-subtitle {
    color: #e5e7eb;
    font-size: 1.1rem;
    font-weight: 400;
    display: block;
    margin-top: 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  }

  .province-icon {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #3b82f6, #10b981);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    animation: province-icon-pulse 2s ease-in-out infinite;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
  }

  @keyframes province-text-glow {
    0%, 100% {
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }
    50% {
      text-shadow: 0 2px 8px rgba(59, 130, 246, 0.5), 0 0 20px rgba(16, 185, 129, 0.3);
    }
  }

  @keyframes province-icon-pulse {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
    }
    50% {
      transform: scale(1.1);
      box-shadow: 0 12px 35px rgba(59, 130, 246, 0.5);
    }
  }

  .province-card:hover .province-icon {
    animation: province-icon-bounce 0.8s ease-out;
  }

  @keyframes province-icon-bounce {
    0% {
      transform: translateY(0) scale(1);
    }
    25% {
      transform: translateY(-8px) scale(1.05);
    }
    50% {
      transform: translateY(-12px) scale(1.1);
    }
    75% {
      transform: translateY(-8px) scale(1.05);
    }
    100% {
      transform: translateY(0) scale(1);
    }
  }

  /* Province Glow Effect */
  .province-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #3b82f6, #10b981, #8b5cf6, #3b82f6);
    border-radius: 22px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: province-glow-rotate 3s linear infinite;
  }

  .province-card:hover .province-glow {
    opacity: 0.6;
  }

  @keyframes province-glow-rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* Coast Info Card */
  .coast-info-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 600px;
    margin: 0 auto;
    animation: coast-info-float 6s ease-in-out infinite;
  }

  @keyframes coast-info-float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-5px);
    }
  }

  .coast-info-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #3b82f6, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .coast-info-text {
    color: #64748b;
    line-height: 1.7;
    font-size: 1.1rem;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .coast-to-coast-section {
      padding: 3rem 0;
    }

    .coast-title {
      font-size: 2.5rem;
    }

    .coast-subtitle {
      font-size: 1.5rem;
    }

    .province-card-inner {
      height: 250px;
    }

    .province-name {
      font-size: 1.5rem;
    }

    .province-subtitle {
      font-size: 1rem;
    }

    .coast-info-card {
      padding: 1.5rem;
    }

    .coast-shape {
      display: none;
    }
  }

  @media (max-width: 640px) {
    .coast-title {
      font-size: 2rem;
    }

    .coast-subtitle {
      font-size: 1.25rem;
    }

    .coast-description {
      font-size: 1rem;
    }

    .province-card-inner {
      height: 200px;
    }

    .province-name {
      font-size: 1.25rem;
    }

    .coast-info-card {
      padding: 1.25rem;
    }
  }

  /* Animation delays for staggered entrance */
  .province-card[data-aos="fade-up"][data-aos-delay="100"] {
    animation-delay: 0.1s;
  }

  .province-card[data-aos="fade-up"][data-aos-delay="200"] {
    animation-delay: 0.2s;
  }

  /* Hover effects for mobile */
  @media (hover: none) {
    .province-card:hover .province-card-inner {
      transform: none;
    }

    .province-card:hover .province-icon {
      animation: none;
    }

    .province-card:hover .province-glow {
      opacity: 0;
    }
  }

  /* ===== LENDERS SECTION ===== */
  .lenders-section {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%);
    position: relative;
    overflow: hidden;
  }

  /* Background Shapes */
  .lender-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.05), rgba(16, 185, 129, 0.05));
    animation: lender-float 25s ease-in-out infinite;
    filter: blur(1px);
  }

  .lender-shape-1 {
    width: 100px;
    height: 100px;
    top: 15%;
    left: 8%;
    animation-delay: 0s;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.08));
  }

  .lender-shape-2 {
    width: 60px;
    height: 60px;
    top: 70%;
    right: 12%;
    animation-delay: 8s;
    background: linear-gradient(45deg, rgba(16, 185, 129, 0.06), rgba(59, 130, 246, 0.06));
  }

  .lender-shape-3 {
    width: 80px;
    height: 80px;
    bottom: 25%;
    left: 20%;
    animation-delay: 16s;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.07), rgba(16, 185, 129, 0.07));
  }

  @keyframes lender-float {
    0%, 100% {
      transform: translateY(0px) rotate(0deg);
    }
    25% {
      transform: translateY(-15px) rotate(90deg);
    }
    50% {
      transform: translateY(-8px) rotate(180deg);
    }
    75% {
      transform: translateY(-20px) rotate(270deg);
    }
  }

    /* Blog-specific styles inheriting from styles.css */
    .blog-hero {
      background: radial-gradient(1200px 600px at -10% -20%, rgba(59,130,246,0.35), rgba(59,130,246,0) 60%),
                  radial-gradient(900px 500px at 110% 10%, rgba(37,99,235,0.18), rgba(37,99,235,0) 60%),
                  linear-gradient(135deg, #0b1220 0%, #0f172a 45%, #0b1220 100%);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: white;
      padding: 100px 0 80px;
      position: relative;
      overflow: hidden;
      min-height: 400px;
      display: flex;
      align-items: center;
  }

  .blog-hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(180deg, rgba(2,6,23,0.35) 0%, rgba(2,6,23,0.6) 40%, rgba(2,6,23,0.65) 100%);
      pointer-events: none;
  }

  .blog-hero::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(140deg, rgba(37,99,235,0.12) 0%, rgba(16,185,129,0.06) 40%, rgba(37,99,235,0.1) 100%);
      pointer-events: none;
  }

  .blog-hero h1 {
      font-size: 4rem;
      font-weight: 700;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      letter-spacing: -1px;
      animation: fadeInUp 0.6s ease-out;
      position: relative;
      z-index: 2;
  }

  .blog-hero p {
      font-size: 1.25rem;
      opacity: 0.9;
      animation: fadeInUp 0.6s ease-out 0.2s both;
      position: relative;
      z-index: 2;
  }

  .blog-main {
      padding: 60px 0;
      background: #ffffff;
      position: relative;
  }

  .blog-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
  }

  .blog-grid {
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: 40px;
      align-items: start;
  }

  .blog-sidebar {
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      padding: 30px;
      height: fit-content;
      position: sticky;
      top: 100px;
      border: 1px solid #e5e7eb;
  }

  #categories-list {
      max-height: 800px;
      overflow-y: auto;
      padding-right:1rem;
  }

  #categories-list::-webkit-scrollbar {
      width: 6px;
  }

  #categories-list::-webkit-scrollbar-track {
      background: #e5e7eb;
      border-radius: 3px;
  }

  #categories-list::-webkit-scrollbar-thumb {
      background: #10b981;
      border-radius: 3px;
  }

  #categories-list::-webkit-scrollbar-thumb:hover {
      background: #059669;
  }

  .blog-sidebar h2 {
      font-size: 1.5rem;
      font-weight: bold;
      color: #1f2937;
      margin-bottom: 30px;
  }

  .category-item {
      padding: 15px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 44px;
      -webkit-tap-highlight-color: transparent;
      background: #ffffff;
      border: 1px solid #e5e7eb;
  }

  .category-item:hover {
      transform: translateX(5px);
      background: #f8fafc;
      border-color: #3b82f6;
  }

  .category-item.active {
      background: #3b82f6;
      color: white;
      transform: translateX(5px);
      border-color: #2563eb;
  }

  .category-item span:first-child {
      font-weight: 500;
      font-size: 0.9rem;
  }

  .category-count {
      background: #e5e7eb;
      color: #6b7280;
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 0.8rem;
      min-width: 24px;
      text-align: center;
      font-weight: 600;
  }

  .category-item.active .category-count {
      background: rgba(255, 255, 255, 0.2);
      color: white;
  }

  .blog-content h2 {
      font-size: 2rem;
      font-weight: bold;
      color: #1f2937;
      margin-bottom: 10px;
  }

  .blog-content p {
      color: #6b7280;
      margin-bottom: 40px;
  }

  .blog-posts-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
      margin-bottom: 60px;
  }

  /* Ensure proper spacing and prevent overflow */
  .blog-container {
      overflow-x: hidden;
  }

  /* Improve category list responsiveness */
  #categories-list {
      max-height: 70vh;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: #d1d5db transparent;

  }

  #categories-list::-webkit-scrollbar {
      width: 6px;
  }

  #categories-list::-webkit-scrollbar-track {
      background: transparent;
  }

  #categories-list::-webkit-scrollbar-thumb {
      background: #d1d5db;
      border-radius: 3px;
  }

  #categories-list::-webkit-scrollbar-thumb:hover {
      background: #9ca3af;
  }

  @media (min-width: 1280px) {
      .blog-posts-grid {
          grid-template-columns: repeat(3, 1fr);
      }
  }

  /* 1024px and above - 2 columns */
  @media (min-width: 1024px) {
      .blog-posts-grid {
          grid-template-columns: repeat(2, 1fr);
      }
  }

  /* 1366px and above - 3 columns */
  @media (min-width: 1366px) {
      .blog-posts-grid {
          grid-template-columns: repeat(3, 1fr);
      }
      .why-work-3d-grid{
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
      }
      .why-work-3d-card{
        width: 30% !important;
      }
  }
  @media screen and (min-width:1024px){
    .blog-posts-grid{
     display: flex !important;
     flex-wrap: wrap;
     justify-content: space-between;
    }
    .footer-contact-item-inline{
    align-self: flex-start !important;
    }
    .blog-card{
      width: 47%;
    }
    .work-step:nth-child(odd) .step-content .step-title::after{
      right: 0 !important;
      left: auto !important;
    }
    .about-affinity-underline{
      margin: 2rem 0 0 !important;
    }
  }
  @media screen and (min-width:1600px){

    .blog-card{
      width: 30%;
      }
  }

  .blog-card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid #e5e7eb;
      margin-top: 2rem;
      display: flex;
      flex-direction: column;
      height: 100%;
  }

  .blog-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .blog-content h2{
     text-align: center;
     font-size: 2.5rem;
     font-weight: 700;
     color: #1f2937;
     margin-bottom: 2rem;
     position: relative;
     padding-bottom: 1rem;
   }

   .blog-content h2::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 4px;
     background: linear-gradient(90deg, #3b82f6, #1e40af);
     border-radius: 2px;
   }

   .blog-sidebar h2{
     text-align: center;
     font-size: 1.8rem;
     font-weight: 700;
     color: #1f2937;
     margin-bottom: 2rem;
     position: relative;
     padding-bottom: 1rem;
   }

   .blog-sidebar h2::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 60px;
     height: 3px;
     background: linear-gradient(90deg, #3b82f6, #1e40af);
     border-radius: 2px;
  }

  .blog-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      transition: transform 0.3s ease;
  }

  .blog-card:hover img {
      transform: scale(1.1);
  }

  .blog-card-content {
      padding: 24px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
  }

  .blog-card h3 {
      font-size: 1rem;
      font-weight: bold;
      color: #1f2937;
      margin-bottom: 12px;
      line-height: 1.3;
  }

  .blog-card-date {
      font-size: 0.875rem;
      color: #9ca3af;
      margin-bottom: 16px;
  }

  .blog-card-btn {
      background: linear-gradient(180deg, #2563eb, #1e40af);
      color: white;
      padding: 10px 20px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      transform: scale(1);
      font-weight: 500;
      position: relative;
      overflow: hidden;
      margin-top: auto;
      align-self: flex-start;
  }

  .blog-card-btn:before {
      content: "";
      position: absolute;
      top: -100%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 40%);
      transform: rotate(15deg);
      transition: transform .6s ease, opacity .6s ease;
      opacity: .6;
  }

  .blog-card-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
  }

  .blog-card-btn:hover:before {
      transform: rotate(15deg) translateY(40%);
      opacity: .9;
  }

  .pagination {
      display: flex;
      justify-content: center;
      gap: 8px;
  }

  .pagination-btn {
      padding: 8px 16px;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      background: white;
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: 500;
      color: #374151;
  }

  .pagination-btn:hover {
      transform: scale(1.05);
      background-color: #2563eb !important;
      color: #ffffff !important;
      border-color: #2563eb !important;
      transition: all 0.3s ease;
  }

  .pagination-btn.active {
      background-color: #2563eb !important;
      color: #ffffff !important;
      border-color: #2563eb !important;
  }

  .loading {
      text-align: center;
      padding: 60px 0;
  }

  .loading-spinner {
      display: inline-block;
      width: 40px;
      height: 40px;
      border: 3px solid #e5e7eb;
      border-radius: 50%;
      border-top-color: #3b82f6;
      animation: spin 1s ease-in-out infinite;
  }

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

  .stagger-animation {
      animation: fadeInUp 0.6s ease-out;
  }

  .stagger-animation:nth-child(1) { animation-delay: 0.1s; }
  .stagger-animation:nth-child(2) { animation-delay: 0.2s; }
  .stagger-animation:nth-child(3) { animation-delay: 0.3s; }
  .stagger-animation:nth-child(4) { animation-delay: 0.4s; }
  .stagger-animation:nth-child(5) { animation-delay: 0.5s; }
  .stagger-animation:nth-child(6) { animation-delay: 0.6s; }

  /* Responsive Design */

  /* Large tablets and small desktops */
  @media (max-width: 1200px) {
      .blog-container {
          max-width: 1000px;
          padding: 0 25px;
      }

      .blog-grid {
          gap: 35px;
      }

      .blog-sidebar {
          padding: 25px;
      }

      .blog-posts-grid {
          gap: 25px;
      }
  }

  /* Blog Banner Responsive Spacing - Exact Home Page Match */
  @media (min-width: 1280px) {
    .blog-banner {
      padding: 8rem 0 6rem 0;
    }
  }



  /* Responsive blog banner content */
  @media (max-width: 768px) {
    .blog-banner .blog-container {
      padding: 2rem 1rem;
      margin: 0 1rem;
    }

    .blog-title {
      font-size: clamp(1.8rem, 4vw, 2.5rem) !important;
    }

    .blog-subtitle {
      font-size: 1rem !important;
    }
  }

  @media (max-width: 480px) {
    .blog-banner .blog-container {
      padding: 1.5rem 1rem;
      margin: 0 0.5rem;
    }

    .blog-title {
      font-size: clamp(1.5rem, 3.5vw, 2rem) !important;
    }

    .blog-subtitle {
      font-size: 0.9rem !important;
    }
  }

  /* Tablets and Mobile - 1 column */
  @media (max-width: 1023px) {
      .blog-container {
          padding: 0 20px;
      }

      .blog-grid {
          grid-template-columns: 1fr;
          gap: 30px;
      }

      .blog-sidebar {
          position: static;
          order: 1;
          padding: 25px;
      }

      .blog-content {
          order: 2;
          margin-top: 20px;
      }

      .blog-posts-grid {
          grid-template-columns: 1fr;
          gap: 25px;
          margin-top: 20px;
      }

      .blog-content h2 {
          font-size: 2rem;
          margin-bottom: 1.5rem;
      }

      .blog-sidebar h2 {
          font-size: 1.5rem;
          margin-bottom: 1.5rem;
      }

      .blog-card-content {
          padding: 20px;
          display: flex;
          flex-direction: column;
          flex-grow: 1;
      }

      .blog-card h3 {
          font-size: 1.1rem;
      }
  }

  /* Small tablets */
  @media (max-width: 768px) {
      .blog-container {
          padding: 0 20px;
      }

      .blog-main {
          padding: 50px 0;
      }

      .blog-sidebar {
          padding: 20px;
      }

      .blog-sidebar h2 {
          font-size: 1.3rem;
          margin-bottom: 25px;
      }

      .category-item {
          padding: 12px;
          margin-bottom: 8px;
      }

      .blog-content {
          margin-top: 20px; /* Add space from top */
      }

      .blog-content h2 {
          font-size: 1.8rem;
          margin-bottom: 8px;
      }

      .blog-posts-grid {
          gap: 20px;
          margin-bottom: 50px;
          margin-top: 20px; /* Add space from top */
      }

      .blog-card-content {
          padding: 18px;
          display: flex;
          flex-direction: column;
          flex-grow: 1;
      }

      .blog-card h3 {
          font-size: 1rem;
          line-height: 1.4;
      }

      .blog-card-btn {
          padding: 8px 16px;
          font-size: 0.9rem;
          margin-top: auto;
          align-self: flex-start;
      }

      .pagination {
          gap: 6px;
      }

      .pagination-btn {
          padding: 6px 12px;
          font-size: 0.9rem;
      }
  }

  /* Mobile phones */
  @media (max-width: 480px) {
      .blog-container {
          padding: 0 15px;
      }

      .blog-hero {
          padding: 60px 0;
      }

      .blog-main {
          padding: 40px 0;
      }

      .blog-sidebar {
          padding: 20px;
      }

      .blog-sidebar h2 {
          font-size: 1.3rem;
          margin-bottom: 20px;
      }

      .category-item {
          padding: 12px;
          margin-bottom: 6px;
          font-size: 0.9rem;
      }

      .category-count {
          font-size: 0.8rem;
          padding: 4px 8px;
      }

      .blog-content {
          margin-top: 25px;
      }

      .blog-content h2 {
          font-size: 1.6rem;
          margin-bottom: 1rem;
      }

      .blog-sidebar h2 {
          font-size: 1.3rem;
          margin-bottom: 1rem;
      }

      .blog-posts-grid {
          grid-template-columns: 1fr;
          gap: 20px;
          margin-bottom: 40px;
          margin-top: 25px;
      }

      .blog-card {
          border-radius: 16px;
      }

      .blog-card img {
          height: 180px;
      }

      .blog-card-content {
          padding: 20px;
          display: flex;
          flex-direction: column;
          flex-grow: 1;
      }

      .blog-card h3 {
          font-size: 1rem;
          line-height: 1.4;
          margin-bottom: 12px;
      }

      .blog-card-date {
          font-size: 0.85rem;
          margin-bottom: 15px;
      }

      .blog-card-btn {
          padding: 10px 18px;
          font-size: 0.85rem;
          border-radius: 20px;
          margin-top: auto;
          align-self: flex-start;
      }

      .pagination {
          gap: 8px;
          flex-wrap: wrap;
          padding: 20px;
          border-radius: 16px;
      }

      .pagination-btn {
          padding: 8px 12px;
          font-size: 0.85rem;
          min-width: 40px;
          border-radius: 12px;
      }

      .loading {
          padding: 50px 0;
          border-radius: 16px;
      }

      .loading-spinner {
          width: 40px;
          height: 40px;
      }
  }

  /* Very small phones */
  @media (max-width: 360px) {
      .blog-container {
          padding: 0 12px;
      }

      .blog-sidebar {
          padding: 15px;
      }

      .blog-sidebar h2 {
          font-size: 1.1rem;
      }

      .category-item {
          padding: 8px;
          font-size: 0.85rem;
      }

      .blog-content h2 {
          font-size: 1.4rem;
      }

      .blog-card-content {
          padding: 14px;
          display: flex;
          flex-direction: column;
          flex-grow: 1;
      }

      .blog-card h3 {
          font-size: 0.9rem;
      }

      .blog-card-btn {
          padding: 6px 12px;
          font-size: 0.8rem;
          margin-top: auto;
          align-self: flex-start;
      }

      .pagination-btn {
          padding: 5px 8px;
          font-size: 0.75rem;
          min-width: 32px;
      }
  }

  /* Latest Mortgage Articles Section Styles - Home Page */
  .home-blog-section {
    position: relative;
    background: #ffffff;
  }

  /* Background Shapes */
  .home-blog-bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.3;
    animation: blogShapeFloat 20s ease-in-out infinite;
  }

  .home-blog-bg-shape-1 {
    width: 300px;
    height: 300px;
    background: linear-gradient(45deg, #3b82f6, #1e40af);
    top: 10%;
    left: -5%;
    animation-delay: 0s;
  }

  .home-blog-bg-shape-2 {
    width: 250px;
    height: 250px;
    background: linear-gradient(45deg, #10b981, #059669);
    top: 60%;
    right: -5%;
    animation-delay: 7s;
  }

  .home-blog-bg-shape-3 {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, #8b5cf6, #7c3aed);
    bottom: 20%;
    left: 20%;
    animation-delay: 14s;
  }

  /* Section Title Animations */
  .home-blog-section-title {
    background: linear-gradient(135deg, #1e293b, #3b82f6, #10b981);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleGradient 8s ease-in-out infinite;
  }

  .home-blog-title-underline {
    animation: underlineExpand 2s ease-out 0.5s both;
  }

  .home-blog-section-subtitle {
    animation: fadeInUp 1s ease-out 0.8s both;
  }

  /* Blog Posts Grid */
  .home-blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
  }

  /* XL Screen - 4 columns */
  @media (min-width: 1280px) {
    .home-blog-posts-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }
  }

  /* Blog Cards */
  .home-blog-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    animation: cardSlideIn 0.8s ease-out both;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .home-blog-card-1 { animation-delay: 0.1s; }
  .home-blog-card-2 { animation-delay: 0.2s; }
  .home-blog-card-3 { animation-delay: 0.3s; }
  .home-blog-card-4 { animation-delay: 0.4s; }

  .home-blog-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  }

  /* Blog Card Image */
  .home-blog-card-image {
    position: relative;
    height: 250px;
    overflow: hidden;
  }

  .home-blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .home-blog-card:hover .home-blog-card-image img {
    transform: scale(1.1);
  }

  .home-blog-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(16, 185, 129, 0.8));
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .home-blog-card:hover .home-blog-card-overlay {
    opacity: 1;
  }

  .home-blog-card-icon {
    transform: scale(0);
    transition: transform 0.3s ease 0.1s;
  }

  .home-blog-card:hover .home-blog-card-icon {
    transform: scale(1);
  }

  /* Blog Card Content */
  .home-blog-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .home-blog-card-meta {
    margin-bottom: 1rem;
  }

  .home-blog-card-date {
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 500;
  }


  .home-blog-card-title {
    margin-bottom: 1rem;
  }

  .home-blog-card-title a {
    color: #1f2937;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .home-blog-card-title a:hover {
    color: #3b82f6;
  }

  .home-blog-card-excerpt {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }

  /* Blog Card Button */
  .home-blog-card-btn {
    display: inline-flex;
    align-items: center;
    color: #3b82f6;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-top: auto;
    align-self: flex-start;
  }

  .home-blog-card-btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #10b981);
    transition: width 0.3s ease;
  }

  .home-blog-card-btn:hover::before {
    width: 100%;
  }

  .home-blog-card-btn:hover {
    color: #10b981;
    transform: translateX(5px);
  }

  .home-blog-card-btn svg {
    transition: transform 0.3s ease;
  }

  .home-blog-card-btn:hover svg {
    transform: translateX(3px);
  }

  /* View All Button */
  .home-blog-view-all-btn {
    position: relative;
    overflow: hidden;
  }

  .home-blog-view-all-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
  }

  .home-blog-view-all-btn:hover::before {
    left: 100%;
  }

  /* Animations */
  @keyframes gradientShift {
    0%, 100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  @keyframes blogShapeFloat {
    0%, 100% {
      transform: translateY(0px) translateX(0px) scale(1);
      opacity: 0.3;
    }
    33% {
      transform: translateY(-20px) translateX(10px) scale(1.1);
      opacity: 0.4;
    }
    66% {
      transform: translateY(10px) translateX(-15px) scale(0.9);
      opacity: 0.2;
    }
  }

  @keyframes titleGradient {
    0%, 100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  @keyframes underlineExpand {
    0% {
      width: 0;
    }
    100% {
      width: 6rem;
    }
  }

  @keyframes cardSlideIn {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

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

  /* Responsive Design */
  @media (max-width: 1279px) and (min-width: 1024px) {
    .home-blog-posts-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }
  }

  @media (max-width: 768px) {
    .home-blog-section {
      padding: 3rem 0;
    }

    .home-blog-section-title {
      font-size: 2.5rem;
    }

    .home-blog-posts-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    .home-blog-card {
      margin: 0 1rem;
    }

    .home-blog-bg-shape {
      display: none;
    }
  }

  @media (max-width: 480px) {
    .home-blog-section-title {
      font-size: 2rem;
    }

    .home-blog-section-subtitle {
      font-size: 1rem;
    }

    .home-blog-card-content {
      padding: 1rem;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .home-blog-card-title a {
      font-size: 1rem;
    }
  }

  /* Prevent horizontal scroll */
  * {
    box-sizing: border-box;
  }

  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  html {
    overflow-x: hidden;
  }

  /* Centered Hero Banner with 3D Home Effects */
  .hero-banner {
    position: relative;
    min-height: 100vh;
    overflow: visible;
    padding-top: 100px;
    max-width: 100vw;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
  }

  /* 3D Home Effects Background */
  .home-3d-effects {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }

  .home-3d {
    position: absolute;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
    border-radius: 20px;
    animation: homeFloat 25s ease-in-out infinite;
    opacity: 0.6;
  }

  .home-3d-1 {
    width: 120px;
    height: 80px;
    top: 15%;
    left: 5%;
    animation-delay: 0s;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(16, 185, 129, 0.1));
    border-radius: 15px 15px 0 0;
  }

  .home-3d-2 {
    width: 100px;
    height: 70px;
    top: 25%;
    right: 8%;
    animation-delay: 5s;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(59, 130, 246, 0.1));
    border-radius: 12px 12px 0 0;
  }

  .home-3d-3 {
    width: 80px;
    height: 60px;
    bottom: 30%;
    left: 10%;
    animation-delay: 10s;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.1));
    border-radius: 10px 10px 0 0;
  }

  .home-3d-4 {
    width: 90px;
    height: 65px;
    bottom: 20%;
    right: 15%;
    animation-delay: 15s;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(16, 185, 129, 0.1));
    border-radius: 12px 12px 0 0;
  }

  .home-3d-5 {
    width: 110px;
    height: 75px;
    top: 40%;
    left: 20%;
    animation-delay: 20s;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(245, 158, 11, 0.1));
    border-radius: 14px 14px 0 0;
  }

  .home-3d-6 {
    width: 95px;
    height: 68px;
    top: 50%;
    right: 25%;
    animation-delay: 8s;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
    border-radius: 13px 13px 0 0;
  }

  /* Enhanced Hero Title */
  .hero-title {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 2rem;
    text-align: center;
  }

  .title-line-1 {
    color: white;
    display: block;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 0.5rem;
  }

  .title-line-2 {
    background: linear-gradient(135deg, #60a5fa, #34d399, #f59e0b);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
    display: block;
    text-shadow: none;
    line-height: 1.4;
  }

  /* Enhanced Hero Lead */
  .hero-lead {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 3rem;
    line-height: 1.6;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    text-align: center;
  }

  /* Enhanced CTA Container */
  .hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 4rem;
  }

  .btn-primary {
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
    position: relative;
    overflow: hidden;
  }

  .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
  }

  .btn-primary:hover::before {
    left: 100%;
  }

  .btn-primary:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.4);
  }

  .btn-icon {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
  }

  .btn-primary:hover .btn-icon {
    transform: translateX(3px);
  }

  .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.125rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
  }

  .btn-secondary:hover {
    color: white;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
  }

  .phone-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Enhanced Solutions Grid - Flexbox */
  .solutions-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    overflow: visible;
    max-width: 100%;
    width: 100%;
  }

  /* Modern Solutions Section */
  .modern-solutions-section {
    position: relative;
    padding: 8rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
    overflow: hidden;
  }

  .modern-solutions-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 40% 60%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
  }

  .solutions-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
  }

  /* Section Header */
  .solutions-header {
    text-align: center;
    margin-bottom: 6rem;
  }

  .header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.3);
    animation: float 3s ease-in-out infinite;
  }

  .header-icon .icon {
    width: 2.5rem;
    height: 2.5rem;
    color: white;
  }

  .section-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #1e293b 0%, #3b82f6 50%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .section-subtitle {
    font-size: 1.25rem;
    color: #64748b;
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* Solutions Grid */
  .solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-bottom: 6rem;
  }

  /* Mobile: Single Column Layout */
  @media (max-width: 768px) {
    .solutions-grid {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      margin-bottom: 3rem;
    }
  }

  /* Solution Cards */
  .solution-card {
    background: white;
    border-radius: 2rem;
    padding: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    min-height: 32rem;
    display: flex;
    flex-direction: column;
  }

  .solution-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  /* Card Header */
  .card-header {
    padding: 2.5rem 2.5rem 1.5rem;
    text-align: center;
    position: relative;
  }

  .card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 1.25rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
  }

  .solution-card:hover .card-icon {
    transform: scale(1.1);
  }

  .card-icon .icon {
    width: 2rem;
    height: 2rem;
    color: white;
  }

  .card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Card Content */
  .card-content {
    padding: 0 2.5rem 2.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
  }

  .feature-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
    transition: all 0.3s ease;
  }

  .feature-item:last-child {
    margin-bottom: 0;
  }

  .bullet-point {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-top: 0.75rem;
    margin-right: 1rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
  }

  .solution-card:hover .bullet-point {
    transform: scale(1.25);
  }

  .feature-item span {
    color: #475569;
    font-size: 1rem;
    line-height: 1.6;
    transition: color 0.3s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .solution-card:hover .feature-item span {
    color: #1e293b;
  }

  /* Color Variants */
  .card-blue .card-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  }

  .card-blue .bullet-point {
    background: #3b82f6;
  }

  .card-blue:hover .card-title {
    color: #3b82f6;
  }

  .card-green .card-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  }

  .card-green .bullet-point {
    background: #10b981;
  }

  .card-green:hover .card-title {
    color: #10b981;
  }

  .card-purple .card-icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  }

  .card-purple .bullet-point {
    background: #8b5cf6;
  }

  .card-purple:hover .card-title {
    color: #8b5cf6;
  }

  .card-indigo .card-icon {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  }

  .card-indigo .bullet-point {
    background: #6366f1;
  }

  .card-indigo:hover .card-title {
    color: #6366f1;
  }

  /* Industry-Specific Solutions Section */
  .industry-solutions-section {
    position: relative;
    padding: 5rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
    overflow: hidden;
  }

  .industry-solutions-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 40% 60%, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
    pointer-events: none;
  }

  .industry-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
  }

  .industry-header {
    text-align: center;
    margin-bottom: 4rem;
  }

  .industry-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.3);
  }

  .industry-icon .icon {
    width: 40px;
    height: 40px;
    color: white;
  }

  .industry-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #1e293b 0%, #3b82f6 50%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
  }

  .industry-subtitle {
    font-size: 1.25rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
  }

  .industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
  }

  .industry-card {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
    min-height: 400px;
    display: flex;
    flex-direction: column;
  }

  .industry-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
  }

  .industry-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  .industry-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
  }

  .industry-card-icon .icon {
    width: 30px;
    height: 30px;
    color: white;
  }

  .industry-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
  }

  .industry-card-content {
    flex-grow: 1;
  }

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

  .industry-feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #475569;
    line-height: 1.5;
  }

  .industry-bullet-point {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 1rem;
    margin-top: 0.5rem;
    flex-shrink: 0;
  }

  .industry-blue .industry-card-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  }

  .industry-blue .industry-bullet-point {
    background: #3b82f6;
  }

  .industry-blue:hover .industry-card-title {
    color: #3b82f6;
  }

  .industry-indigo .industry-card-icon {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  }

  .industry-indigo .industry-bullet-point {
    background: #6366f1;
  }

  .industry-indigo:hover .industry-card-title {
    color: #6366f1;
  }

  .industry-purple .industry-card-icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  }

  .industry-purple .industry-bullet-point {
    background: #8b5cf6;
  }

  .industry-purple:hover .industry-card-title {
    color: #8b5cf6;
  }

  /* Industry CTA Section */
  .industry-cta-section {
    text-align: center;
  }

  .industry-cta-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .industry-cta-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
  }

  .industry-cta-description {
    font-size: 1.125rem;
    color: #64748b;
    margin-bottom: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .industry-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px -3px rgba(59, 130, 246, 0.4);
  }

  .industry-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -5px rgba(59, 130, 246, 0.6);
  }

  .industry-button-icon {
    width: 20px;
    height: 20px;
  }

  /* Industry Section Responsive Design */
  @media (max-width: 1024px) {
    .industry-grid {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.5rem;
    }

    .industry-title {
      font-size: 2.5rem;
    }

    .industry-subtitle {
      font-size: 1.125rem;
    }
  }

  @media (max-width: 768px) {
    .industry-solutions-section {
      padding: 6rem 0;
    }

    .industry-container {
      padding: 0 1rem;
    }

    .industry-header {
      margin-bottom: 3rem;
    }

    .industry-icon {
      width: 60px;
      height: 60px;
      margin-bottom: 1.5rem;
    }

    .industry-icon .icon {
      width: 30px;
      height: 30px;
    }

    .industry-title {
      font-size: 2rem;
    }

    .industry-subtitle {
      font-size: 1rem;
    }

    .industry-grid {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .industry-card {
      width: 100%;
      padding: 1.5rem;
      min-height: 350px;
    }

    .industry-card-title {
      font-size: 1.25rem;
      min-height: 3rem;
    }

    .industry-cta-card {
      padding: 2rem;
    }

    .industry-cta-title {
      font-size: 1.5rem;
    }

    .industry-cta-description {
      font-size: 1rem;
    }
  }

  @media (max-width: 480px) {
    .industry-solutions-section {
      padding: 4rem 0;
    }

    .industry-container {
      padding: 0 0.75rem;
    }

    .industry-header {
      margin-bottom: 2rem;
    }

    .industry-icon {
      width: 50px;
      height: 50px;
      margin-bottom: 1rem;
    }

    .industry-icon .icon {
      width: 25px;
      height: 25px;
    }

    .industry-title {
      font-size: 1.75rem;
    }

    .industry-subtitle {
      font-size: 0.9rem;
    }

    .industry-card {
      padding: 1.25rem;
      min-height: 300px;
    }

    .industry-card-header {
      margin-bottom: 1rem;
    }

    .industry-card-icon {
      width: 50px;
      height: 50px;
      margin-right: 0.75rem;
    }

    .industry-card-icon .icon {
      width: 25px;
      height: 25px;
    }

    .industry-card-title {
      font-size: 1.125rem;
      min-height: 2.5rem;
    }

    .industry-feature-item {
      font-size: 0.9rem;
      margin-bottom: 0.75rem;
    }

    .industry-bullet-point {
      width: 6px;
      height: 6px;
      margin-right: 0.75rem;
      margin-top: 0.4rem;
    }

    .industry-cta-card {
      padding: 1.5rem;
    }

    .industry-cta-title {
      font-size: 1.25rem;
    }

    .industry-cta-description {
      font-size: 0.9rem;
    }

    .industry-cta-button {
      padding: 0.875rem 1.5rem;
      font-size: 1rem;
    }
  }

  /* Mortgage Affordability & Broker Section */
  .affordability-broker-section {
    position: relative;
    padding: 8rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
    overflow: hidden;
  }

  .affordability-broker-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(37, 99, 235, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 40% 60%, rgba(99, 102, 241, 0.08) 0%, transparent 50%);
    pointer-events: none;
  }

  .affordability-broker-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
  }

  .affordability-broker-header {
    text-align: center;
    margin-bottom: 4rem;
  }

  .affordability-broker-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.3);
  }

  .affordability-broker-icon .icon {
    width: 40px;
    height: 40px;
    color: white;
  }

  .affordability-broker-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #1e293b 0%, #3b82f6 50%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
  }

  .affordability-broker-subtitle {
    font-size: 1.25rem;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
  }

  .affordability-broker-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
  }

  .affordability-broker-card {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .affordability-broker-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
  }

  .affordability-broker-card-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
  }

  .affordability-broker-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.5rem;
    flex-shrink: 0;
  }

  .affordability-broker-card-icon .icon {
    width: 30px;
    height: 30px;
    color: white;
  }

  .affordability-broker-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.3;
    flex: 1;
  }

  .affordability-broker-card-content {
    flex-grow: 1;
  }

  .affordability-broker-card-text {
    font-size: 1.125rem;
    color: #475569;
    line-height: 1.7;
    margin: 0;
  }

  .affordability-card .affordability-broker-card-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  }

  .affordability-card:hover .affordability-broker-card-title {
    color: #3b82f6;
  }

  .broker-card .affordability-broker-card-icon {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  }

  .broker-card:hover .affordability-broker-card-title {
    color: #6366f1;
  }

  /* Affordability Broker Section Responsive Design */
  @media (max-width: 1024px) {
    .affordability-broker-grid {
      gap: 2rem;
    }

    .affordability-broker-title {
      font-size: 2.5rem;
    }

    .affordability-broker-subtitle {
      font-size: 1.125rem;
    }

    .affordability-broker-card {
      padding: 2rem;
    }
  }

  @media (max-width: 768px) {
    .affordability-broker-section {
      padding: 6rem 0;
    }

    .affordability-broker-container {
      padding: 0 1rem;
    }

    .affordability-broker-header {
      margin-bottom: 3rem;
    }

    .affordability-broker-icon {
      width: 60px;
      height: 60px;
      margin-bottom: 1.5rem;
    }

    .affordability-broker-icon .icon {
      width: 30px;
      height: 30px;
    }

    .affordability-broker-title {
      font-size: 2rem;
    }

    .affordability-broker-subtitle {
      font-size: 1rem;
    }

    .affordability-broker-grid {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .affordability-broker-card {
      padding: 1.5rem;
    }

    .affordability-broker-card-header {
      margin-bottom: 1.5rem;
    }

    .affordability-broker-card-icon {
      width: 50px;
      height: 50px;
      margin-right: 1rem;
    }

    .affordability-broker-card-icon .icon {
      width: 25px;
      height: 25px;
    }

    .affordability-broker-card-title {
      font-size: 1.25rem;
    }

    .affordability-broker-card-text {
      font-size: 1rem;
    }
  }

  @media (max-width: 480px) {
    .affordability-broker-section {
      padding: 4rem 0;
    }

    .affordability-broker-container {
      padding: 0 0.75rem;
    }

    .affordability-broker-header {
      margin-bottom: 2rem;
    }

    .affordability-broker-icon {
      width: 50px;
      height: 50px;
      margin-bottom: 1rem;
    }

    .affordability-broker-icon .icon {
      width: 25px;
      height: 25px;
    }

    .affordability-broker-title {
      font-size: 1.75rem;
    }

    .affordability-broker-subtitle {
      font-size: 0.9rem;
    }

    .affordability-broker-card {
      padding: 1.25rem;
    }

    .affordability-broker-card-header {
      margin-bottom: 1rem;
    }

    .affordability-broker-card-icon {
      width: 45px;
      height: 45px;
      margin-right: 0.75rem;
    }

    .affordability-broker-card-icon .icon {
      width: 22px;
      height: 22px;
    }

    .affordability-broker-card-title {
      font-size: 1.125rem;
    }

    .affordability-broker-card-text {
      font-size: 0.9rem;
      line-height: 1.6;
    }
  }

  /* Self-Employed Benefits Section */
  .self-employed-benefits-section {
    position: relative;
    padding: 8rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
    overflow: hidden;
  }

  .self-employed-benefits-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 40% 60%, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
    pointer-events: none;
  }

  .self-employed-benefits-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
  }

  .self-employed-benefits-header {
    text-align: center;
    margin-bottom: 5rem;
  }

  .self-employed-benefits-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.3);
  }

  .self-employed-benefits-icon .icon {
    width: 40px;
    height: 40px;
    color: white;
  }

  .self-employed-benefits-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #1e293b 0%, #3b82f6 50%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
  }

  .self-employed-benefits-subtitle {
    font-size: 1.25rem;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
  }

  .self-employed-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .self-employed-benefits-card {
    position: relative;
    height: 100%;
  }

  .self-employed-benefits-card-inner {
    background: white;
    border-radius: 24px;
    padding: 2.5rem;
    height: 100%;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
  }

  .self-employed-benefits-card-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6);
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }

  .self-employed-benefits-card:hover .self-employed-benefits-card-inner {
    transform: translateY(-12px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  }

  .self-employed-benefits-card:hover .self-employed-benefits-card-inner::before {
    transform: scaleX(1);
  }

  .self-employed-benefits-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
  }

  .self-employed-benefits-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }

  .self-employed-benefits-card-icon .icon {
    width: 30px;
    height: 30px;
    color: white;
  }

  .self-employed-benefits-card-number {
    font-size: 2rem;
    font-weight: 800;
    color: #e2e8f0;
    line-height: 1;
  }

  .self-employed-benefits-card-content {
    flex-grow: 1;
  }

  .self-employed-benefits-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
    line-height: 1.3;
  }

  .self-employed-benefits-card-description {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }

  .self-employed-benefits-card-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .self-employed-benefits-card-feature {
    background: #f1f5f9;
    color: #475569;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
  }

  .self-employed-benefits-card:hover .self-employed-benefits-card-feature {
    background: #e0e7ff;
    color: #3730a3;
  }

  /* Individual Card Styling */
  .benefits-card-1 .self-employed-benefits-card-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  }

  .benefits-card-1:hover .self-employed-benefits-card-icon {
    transform: scale(1.1) rotate(5deg);
  }

  .benefits-card-2 .self-employed-benefits-card-icon {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  }

  .benefits-card-2:hover .self-employed-benefits-card-icon {
    transform: scale(1.1) rotate(-5deg);
  }

  .benefits-card-3 .self-employed-benefits-card-icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  }

  .benefits-card-3:hover .self-employed-benefits-card-icon {
    transform: scale(1.1) rotate(5deg);
  }

  .benefits-card-4 .self-employed-benefits-card-icon {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  }

  .benefits-card-4:hover .self-employed-benefits-card-icon {
    transform: scale(1.1) rotate(-5deg);
  }

  /* Self-Employed Benefits Section Responsive Design */
  @media (max-width: 1024px) {
    .self-employed-benefits-grid {
      gap: 1.5rem;
    }

    .self-employed-benefits-title {
      font-size: 2.5rem;
    }

    .self-employed-benefits-subtitle {
      font-size: 1.125rem;
    }

    .self-employed-benefits-card-inner {
      padding: 2rem;
    }
  }

  @media (max-width: 768px) {
    .self-employed-benefits-section {
      padding: 6rem 0;
    }

    .self-employed-benefits-container {
      padding: 0 1rem;
    }

    .self-employed-benefits-header {
      margin-bottom: 3rem;
    }

    .self-employed-benefits-icon {
      width: 60px;
      height: 60px;
      margin-bottom: 1.5rem;
    }

    .self-employed-benefits-icon .icon {
      width: 30px;
      height: 30px;
    }

    .self-employed-benefits-title {
      font-size: 2rem;
    }

    .self-employed-benefits-subtitle {
      font-size: 1rem;
    }

    .self-employed-benefits-grid {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .self-employed-benefits-card-inner {
      padding: 1.5rem;
    }

    .self-employed-benefits-card-header {
      margin-bottom: 1.5rem;
    }

    .self-employed-benefits-card-icon {
      width: 50px;
      height: 50px;
    }

    .self-employed-benefits-card-icon .icon {
      width: 25px;
      height: 25px;
    }

    .self-employed-benefits-card-number {
      font-size: 1.5rem;
    }

    .self-employed-benefits-card-title {
      font-size: 1.25rem;
    }

    .self-employed-benefits-card-description {
      font-size: 0.9rem;
    }
  }

  @media (max-width: 480px) {
    .self-employed-benefits-section {
      padding: 4rem 0;
    }

    .self-employed-benefits-container {
      padding: 0 0.75rem;
    }

    .self-employed-benefits-header {
      margin-bottom: 2rem;
    }

    .self-employed-benefits-icon {
      width: 50px;
      height: 50px;
      margin-bottom: 1rem;
    }

    .self-employed-benefits-icon .icon {
      width: 25px;
      height: 25px;
    }

    .self-employed-benefits-title {
      font-size: 1.75rem;
    }

    .self-employed-benefits-subtitle {
      font-size: 0.9rem;
    }

    .self-employed-benefits-card-inner {
      padding: 1.25rem;
    }

    .self-employed-benefits-card-header {
      margin-bottom: 1rem;
    }

    .self-employed-benefits-card-icon {
      width: 45px;
      height: 45px;
    }

    .self-employed-benefits-card-icon .icon {
      width: 22px;
      height: 22px;
    }

    .self-employed-benefits-card-number {
      font-size: 1.25rem;
    }

    .self-employed-benefits-card-title {
      font-size: 1.125rem;
    }

    .self-employed-benefits-card-description {
      font-size: 0.85rem;
    }

    .self-employed-benefits-card-feature {
      font-size: 0.75rem;
      padding: 0.25rem 0.5rem;
    }
  }

  /* Mortgage Calculator Section */
  .mortgage-calculator-section {
    position: relative;
    padding: 8rem 0;
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
    overflow: hidden;
  }

  .mortgage-calculator-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 40% 60%, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
    pointer-events: none;
  }

  .mortgage-calculator-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
  }

  .mortgage-calculator-header {
    text-align: center;
    margin-bottom: 4rem;
  }

  .mortgage-calculator-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.3);
  }

  .mortgage-calculator-icon .icon {
    width: 40px;
    height: 40px;
    color: white;
  }

  .mortgage-calculator-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: white;
    line-height: 1.2;
  }

  .mortgage-calculator-subtitle {
    font-size: 1.25rem;
    color: #cbd5e1;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* Traditional Calculator Form Styling */
  .tool-form {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto;
  }

  .tool-form__frame {
    padding: 0;
  }

  /* Loading Spinner */
  #mc-form_spin {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 2rem;
  }

  .sk-cube-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 40px;
    height: 40px;
  }

  .sk-cube {
    background: #3b82f6;
    border-radius: 2px;
    animation: sk-cube-animation 1.4s infinite ease-in-out;
  }

  .sk-cube1 { animation-delay: -0.32s; }
  .sk-cube2 { animation-delay: -0.16s; }
  .sk-cube3 { animation-delay: 0s; }
  .sk-cube4 { animation-delay: -0.32s; }
  .sk-cube5 { animation-delay: -0.16s; }
  .sk-cube6 { animation-delay: 0s; }
  .sk-cube7 { animation-delay: -0.32s; }
  .sk-cube8 { animation-delay: -0.16s; }
  .sk-cube9 { animation-delay: 0s; }

  @keyframes sk-cube-animation {
    0%, 80%, 100% {
      transform: scale(0);
    }
    40% {
      transform: scale(1);
    }
  }

  /* Blue Step Headers */
  .mc-step-title {
    background: #3b82f6 !important;
    color: white !important;
    padding: 12px 20px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-align: left !important;
    border: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  .mc-step-title span {
    color: white !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  /* Form Body */
  .mc-step-body {
    margin: 0;
    padding: 20px;
  }

  .mc-step-body.display-block {
    display: block !important;
  }

  /* Form Rows */
  .mc-form-row {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
  }

  .mc-form-row.grid-x {
    display: flex;
    align-items: center;
  }

  .mc-form-row .cell {
    flex: 1;
  }

  .mc-form-row .cell.medium-4 {
    flex: 0 0 40%;
    max-width: 40%;
    padding-right: 15px;
  }

  .mc-form-row .cell.medium-8 {
    flex: 0 0 60%;
    max-width: 60%;
  }

  .mc-form-row .cell.medium-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Labels */
  .mc-form-row label {
    font-weight: 600;
    color: #333;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    line-height: 1.2;
  }

  .mc-form-row label span {
    color: #333;
  }

  /* Input Fields */
  .affordability_calc_input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.2s ease;
    background: white;
    box-sizing: border-box;
  }

  .affordability_calc_input:focus {
    outline: none;
    border-color: #3b82f6;
  }

  .affordability_calc_input::placeholder {
    color: #999;
  }

  /* Select Dropdowns */
  .mc-form-row select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background: white;
    cursor: pointer;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
  }

  .mc-form-row select:focus {
    outline: none;
    border-color: #3b82f6;
  }

  /* Results Section */
  .mc-step-body p {
    margin-bottom: 10px;
    line-height: 1.5;
    color: #333;
    font-size: 14px;
  }

  .mc-step-body p b {
    color: #333;
    font-weight: 700;
  }

  .mc-step-body a {
    text-decoration: none;
    font-weight: 600;
  }

  .mc-step-body a:hover {
    text-decoration: underline;
  }

  /* Action Buttons */
  .button-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px;
  }

  .button-group.align-center {
    align-items: center;
  }

  .mcp-btn {
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
  }

  .mcp-btn__email {
    background: #3b82f6;
    color: white;
  }

  .mcp-btn__email:hover {
    background: #2563eb;
  }

  .mcp-btn__contact {
    background: #1d4ed8;
    color: white;
  }

  .mcp-btn__contact:hover {
    background: #1e40af;
  }

  /* Mortgage Calculator Responsive Design */
  @media (max-width: 1024px) {
    .tool-form {
      max-width: 90%;
    }

    .mortgage-calculator-title {
      font-size: 2.5rem;
    }

    .mortgage-calculator-subtitle {
      font-size: 1.125rem;
    }
  }

  @media (max-width: 768px) {
    .mortgage-calculator-section {
      padding: 6rem 0;
    }

    .mortgage-calculator-container {
      padding: 0 1rem;
    }

    .mortgage-calculator-header {
      margin-bottom: 3rem;
    }

    .mortgage-calculator-icon {
      width: 60px;
      height: 60px;
      margin-bottom: 1.5rem;
    }

    .mortgage-calculator-icon .icon {
      width: 30px;
      height: 30px;
    }

    .mortgage-calculator-title {
      font-size: 2rem;
    }

    .mortgage-calculator-subtitle {
      font-size: 1rem;
    }

    .tool-form {
      max-width: 100%;
    }

    .mc-step-body {
      padding: 15px;
    }

    .mc-form-row.grid-x {
      flex-direction: column;
      align-items: flex-start;
      gap: 5px;
    }

    .mc-form-row .cell.medium-4,
    .mc-form-row .cell.medium-8 {
      flex: 1;
      max-width: 100%;
      padding-right: 0;
    }

    .button-group {
      flex-direction: column;
      align-items: center;
      padding: 15px;
    }

    .mcp-btn {
      width: 100%;
      max-width: 250px;
    }
  }

  @media (max-width: 480px) {
    .mortgage-calculator-section {
      padding: 4rem 0;
    }

    .mortgage-calculator-container {
      padding: 0 0.75rem;
    }

    .mortgage-calculator-header {
      margin-bottom: 2rem;
    }

    .mortgage-calculator-icon {
      width: 50px;
      height: 50px;
      margin-bottom: 1rem;
    }

    .mortgage-calculator-icon .icon {
      width: 25px;
      height: 25px;
    }

    .mortgage-calculator-title {
      font-size: 1.75rem;
    }

    .mortgage-calculator-subtitle {
      font-size: 0.9rem;
    }

    .mc-step-body {
      padding: 12px;
    }

    .mc-step-title {
      padding: 10px 15px !important;
      font-size: 12px !important;
    }

    .mc-form-row {
      margin-bottom: 12px;
    }

    .affordability_calc_input,
    .mc-form-row select {
      padding: 6px 10px;
      font-size: 13px;
    }

    .mc-form-row label {
      font-size: 11px;
    }

    .mcp-btn {
      padding: 8px 16px;
      font-size: 13px;
      min-width: auto;
    }

    .button-group {
      padding: 12px;
      gap: 8px;
    }
  }

  /* CTA Section */
  .cta-section {
    text-align: center;
  }

  .cta-card {
    background: white;
    border-radius: 2rem;
    padding: 3rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    max-width: 48rem;
    margin: 0 auto;
    transition: all 0.3s ease;
  }

  .cta-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.15);
  }

  .cta-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #1e293b 0%, #3b82f6 50%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .cta-description {
    font-size: 1.25rem;
    color: #64748b;
    margin-bottom: 2rem;
    line-height: 1.6;
  }

  .cta-button {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
    color: white;
    padding: 1.25rem 3rem;
    border-radius: 1.5rem;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4);
  }

  .cta-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 20px 40px -5px rgba(59, 130, 246, 0.6);
    background: linear-gradient(135deg, #2563eb 0%, #5b21b6 50%, #7c3aed 100%);
  }

  .button-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.75rem;
  }

  /* Animations */
  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }

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

  .solution-card {
    animation: fadeInUp 0.6s ease-out;
  }

  .solution-card:nth-child(1) {
    animation-delay: 0.1s;
  }

  .solution-card:nth-child(2) {
    animation-delay: 0.2s;
  }

  .solution-card:nth-child(3) {
    animation-delay: 0.3s;
  }

  /* Card Icon Styling */
  .solution-card .w-20 {
    width: 5rem;
    height: 5rem;
    border-radius: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }

  .solution-card:hover .w-20 {
    transform: scale(1.1);
  }

  /* Card Title Styling */
  .solution-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2rem;
    line-height: 1.2;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
  }

  .solution-card:hover h3 {
    color: #3b82f6;
  }

  /* Card List Styling */
  .solution-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Allow list to expand and fill available space */
  }

  .solution-card li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    transition: all 0.3s ease;
  }

  .solution-card li:last-child {
    margin-bottom: 0;
  }

  .solution-card .w-3 {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    margin-top: 0.5rem;
    margin-right: 1rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
  }

  .solution-card:hover .w-3 {
    transform: scale(1.25);
  }

  .solution-card span {
    color: #475569;
    font-size: 1.125rem;
    line-height: 1.6;
    transition: color 0.3s ease;
  }

  .solution-card:hover span {
    color: #3b82f6;
  }

  .card-icon-container {
    position: relative;
    width: 5rem;
    height: 5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icon-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0.2;
    transition: all 0.3s ease;
  }

  .icon-bg-green { background: linear-gradient(135deg, #10b981, #059669); }
  .icon-bg-blue { background: linear-gradient(135deg, #3b82f6, #1e40af); }
  .icon-bg-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
  .icon-bg-orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
  .icon-bg-red { background: linear-gradient(135deg, #ef4444, #dc2626); }
  .icon-bg-indigo { background: linear-gradient(135deg, #6366f1, #4f46e5); }

  .solution-card:hover .icon-bg {
    opacity: 0.3;
    transform: scale(1.1);
  }

  .card-icon-banner {
    width: 2.5rem;
    height: 2.5rem;
    color: white;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
  }

  .solution-card:hover .card-icon-banner {
    transform: scale(1.1) rotate(5deg);
  }

  .card-title-banner {
    color: white;
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  /* Specific styles for hero banner solution cards to prevent conflicts */
  .hero-banner .solution-card {
    background: transparent !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    backdrop-filter: blur(10px) !important;
    min-height: auto !important;
    margin: 0 !important;
    width: 120px !important;
    flex: 0 0 120px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .hero-banner .solution-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3) !important;
    border-color: rgba(255,255,255,0.4) !important;
  }

  .hero-banner .solution-card .card-icon-container {
    width: 4rem !important;
    height: 4rem !important;
    margin: 0 auto 1rem !important;
  }

  .hero-banner .solution-card .card-icon-banner {
    width: 2rem !important;
    height: 2rem !important;
    color: white !important;
  }

  .hero-banner .solution-card .card-title-banner {
    color: white !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    line-height: 1.3 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
    margin-bottom: 0 !important;
  }

  /* Responsive icon and text sizes */
  @media (max-width: 768px) {
    .hero-banner .solution-card .card-icon-container {
      width: 3rem !important;
      height: 3rem !important;
      margin: 0 auto 0.75rem !important;
    }

    .hero-banner .solution-card .card-icon-banner {
      width: 1.5rem !important;
      height: 1.5rem !important;
    }

    .hero-banner .solution-card .card-title-banner {
      font-size: 0.875rem !important;
    }
  }

  @media (max-width: 480px) {
    .hero-banner .solution-card .card-icon-container {
      width: 2.5rem !important;
      height: 2.5rem !important;
      margin: 0 auto 0.5rem !important;
    }

    .hero-banner .solution-card .card-icon-banner {
      width: 1.25rem !important;
      height: 1.25rem !important;
    }

    .hero-banner .solution-card .card-title-banner {
      font-size: 0.75rem !important;
    }
  }

  /* Override solutions-grid styles for hero banner */
  .hero-banner .solutions-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 3rem !important;
  }

  /* Override icon background styles for hero banner */
  .hero-banner .icon-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 50% !important;
    opacity: 0.8 !important;
    transition: all 0.3s ease !important;
  }

  .hero-banner .icon-bg-green { background: linear-gradient(135deg, #10b981, #059669) !important; }
  .hero-banner .icon-bg-blue { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; }
  .hero-banner .icon-bg-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important; }
  .hero-banner .icon-bg-orange { background: linear-gradient(135deg, #f59e0b, #d97706) !important; }
  .hero-banner .icon-bg-red { background: linear-gradient(135deg, #ef4444, #dc2626) !important; }
  .hero-banner .icon-bg-indigo { background: linear-gradient(135deg, #6366f1, #4f46e5) !important; }

  .hero-banner .solution-card:hover .icon-bg {
    opacity: 1 !important;
    transform: scale(1.1) !important;
  }

  /* Large screens (1366px+) - keep all 6 cards in one line */
  @media (min-width: 1366px) {
    .hero-banner .solutions-grid {
      flex-wrap: nowrap !important;
      max-width: 100% !important;
      gap: 1.5rem !important;
    }

    .hero-banner .solution-card {
      width: 140px !important;
      flex: 0 0 140px !important;
    }
  }

  /* Medium screens (1200px and below) - allow wrapping */
  @media (max-width: 1365px) {
    .hero-banner .solutions-grid {
      flex-wrap: wrap !important;
      max-width: 100% !important;
      gap: 1rem !important;
    }

    .hero-banner .solution-card {
      width: calc(33.333% - 0.67rem) !important;
      flex: 0 0 calc(33.333% - 0.67rem) !important;
      margin-bottom: 1rem !important;
    }
  }

  @media (max-width: 768px) {
    .hero-banner .solutions-grid {
      gap: 0.75rem !important;
      padding: 0 0.5rem !important;
    }

    .hero-banner .solution-card {
      width: calc(50% - 0.375rem) !important;
      flex: 0 0 calc(50% - 0.375rem) !important;
      padding: 0.75rem !important;
      margin-bottom: 0.75rem !important;
    }
  }

  @media (max-width: 480px) {
    .hero-banner .solutions-grid {
      gap: 0.5rem !important;
      padding: 0 0.25rem !important;
    }

    .hero-banner .solution-card {
      width: calc(50% - 0.25rem) !important;
      flex: 0 0 calc(50% - 0.25rem) !important;
      padding: 1rem !important;
      margin-bottom: 0.5rem !important;
    }
  }






  /* Enhanced Animations */
  @keyframes homeFloat {
    0%, 100% {
      transform: translateY(0px) rotate(0deg) scale(1);
    }
    25% {
      transform: translateY(-15px) rotate(2deg) scale(1.05);
    }
    50% {
      transform: translateY(-10px) rotate(0deg) scale(1.02);
    }
    75% {
      transform: translateY(-20px) rotate(-2deg) scale(1.08);
    }
  }

  @keyframes gradientShift {
    0%, 100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  /* Responsive Design */
  @media (max-width: 1365px) {
    .solutions-grid {
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .solution-card {
      padding: 1rem;
    }
  }

  @media (max-width: 1024px) {
    .hero-title {
      font-size: 3rem;
    }

    .solutions-grid {
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .solution-card {
    padding: 1rem;
    }
  }

  @media (max-width: 768px) {
    .hero-title {
      font-size: 2.5rem;
    }

    .hero-lead {
      font-size: 1.125rem;
    }

    .solutions-grid {
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .solution-card {
     padding: 1rem
    }

    .card-icon-container {
      width: 4rem;
      height: 4rem;
    }

    .card-icon-banner {
      width: 2rem;
      height: 2rem;
    }


    .hero-cta {
      gap: 1rem;
    }

    .btn-primary, .btn-secondary {
      padding: 0.875rem 2rem;
      font-size: 1rem;
    }
  }

  @media (max-width: 480px) {
    .hero-title {
      font-size: 2rem;
    }

    .solutions-grid {
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .solution-card {
      padding: 1rem;
    }

    .card-icon-container {
      width: 3rem;
      height: 3rem;
      margin-bottom: 0.75rem;
    }

    .card-icon-banner {
      width: 1.5rem;
      height: 1.5rem;
    }

    .card-title-banner {
      font-size: 0.8rem;
     margin-top: .5rem !important;
     margin-bottom: 0 !important;
    }
  }

  /* How We Work Section */
  .how-we-work-section {
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%, #f8fafc 100%);
    padding: 8rem 0;
    overflow: hidden;
  }

  .how-we-work-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 60%);
    animation: howWeWorkBackground 20s ease-in-out infinite;
    z-index: 1;
  }

  .how-we-work-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(59,130,246,0.03)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
    z-index: 2;
  }

  .how-we-work-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 10;
  }

  /* Section Header */
  .how-we-work-header {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 10;
  }

  .how-we-work-title {
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #1e293b, #3b82f6, #10b981);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 2rem;
    position: relative;
    letter-spacing: -0.02em;
    animation: howWeWorkTitleGlow 3s ease-in-out infinite;
  }

  .how-we-work-title::before {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 6px;
    background: linear-gradient(135deg, #3b82f6, #10b981, #8b5cf6);
    border-radius: 3px;
    animation: howWeWorkUnderline 2s ease-in-out infinite;
  }

  .how-we-work-subtitle {
    font-size: 1.375rem;
    color: #64748b;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
    font-weight: 500;
    position: relative;
    animation: howWeWorkSubtitleFade 1.5s ease-out;
  }

  .highlight {
    background: linear-gradient(135deg, #3b82f6, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    position: relative;
  }

  /* Work Steps */
  .work-steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6rem;
  }

  .work-steps::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #3b82f6, #10b981, #8b5cf6, #f59e0b);
    transform: translateX(-50%);
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    animation: timelinePulse 4s ease-in-out infinite;
  }

  .work-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5rem;
    padding: 3rem 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(50px);
    animation: stepSlideIn 0.8s ease forwards;
  }

  .work-step:nth-child(1) {
    animation-delay: 0.2s;
  }

  .work-step:nth-child(2) {
    animation-delay: 0.4s;
  }

  .work-step:nth-child(3) {
    animation-delay: 0.6s;
  }

  .work-step:nth-child(4) {
    animation-delay: 0.8s;
  }

  .work-step::before {
    content: attr(data-step);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3b82f6, #10b981);
    border-radius: 50%;
    border: 4px solid #ffffff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 8px 25px rgba(59, 130, 246, 0.3);
    z-index: 15;
    transition: all 0.4s ease;
    animation: dotFloat 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
    color: #ffffff;
  }

  .work-step:hover::before {
    width: 60px;
    height: 60px;
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.4), 0 12px 35px rgba(59, 130, 246, 0.5);
    transform: translate(-50%, -50%) scale(1.1);
  }

  .work-step:nth-child(odd) {
    flex-direction: row;
  }

  .work-step:nth-child(odd) .step-content {
    text-align: right;
    margin-right: 4rem;
  }

  .work-step:nth-child(odd) .step-image {
    margin-left: 4rem;
  }
  .work-step:nth-child(odd) .step-content .step-title::after {
   margin:unset;
  }
  .work-step:nth-child(even) .step-content .step-title::after {
    margin:unset;
   }
   .how-we-work-header {
    margin-bottom: 6rem !important;
   }

  .work-step:nth-child(even) {
    flex-direction: row-reverse;
  }

  .work-step:nth-child(even) .step-content {
    text-align: left;
    margin-left: 4rem;
  }

  .work-step:nth-child(even) .step-image {
    margin-right: 4rem;
  }

  .work-step:nth-child(1)::before {
    background: linear-gradient(135deg, #3b82f6, #1e40af);
  }

  .work-step:nth-child(2)::before {
    background: linear-gradient(135deg, #10b981, #059669);
  }

  .work-step:nth-child(3)::before {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  }

  .work-step:nth-child(4)::before {
    background: linear-gradient(135deg, #f59e0b, #d97706);
  }

  /* Step Image */
  .step-image {
    position: relative;
    flex: 0 0 380px;
    height: 240px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
    transform: perspective(1000px) rotateY(0deg);
  }

  .step-image-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: all 0.5s ease;
    filter: brightness(1) saturate(1);
  }

  .work-step:hover .step-image {
    transform: perspective(1000px) rotateY(-8deg) scale(1.05);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  }

  .work-step:hover .step-image-bg {
    transform: scale(1.1);
    filter: brightness(1.1) saturate(1.2);
  }


  /* Step Content */
  .step-content {
    flex: 1;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
    animation: contentSlideIn 0.8s ease forwards;
  }

  .work-step:nth-child(1) .step-content {
    animation-delay: 0.3s;
  }

  .work-step:nth-child(2) .step-content {
    animation-delay: 0.5s;
  }

  .work-step:nth-child(3) .step-content {
    animation-delay: 0.7s;
  }

  .work-step:nth-child(4) .step-content {
    animation-delay: 0.9s;
  }

  .step-title {
    font-size: 2.25rem;
    font-weight: 800;
    background: linear-gradient(135deg, #1e293b, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
    position: relative;
    transition: all 0.4s ease;
  }

  .step-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    margin:auto;
    width: 0;
    height: 4px;
    background: linear-gradient(135deg, #3b82f6, #10b981);
    border-radius: 2px;
    transition: width 0.5s ease;
  }

  .work-step:hover .step-title::after {
    width: 80px;
  }

  .step-description {
    font-size: 1.125rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
    font-weight: 500;
    transition: all 0.4s ease;
  }

  .work-step:hover .step-description {
    color: #475569;
  }

  /* Animations */
  @keyframes howWeWorkBackground {
    0%, 100% {
      background:
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 60%);
    }
    50% {
      background:
        radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 30% 70%, rgba(139, 92, 246, 0.05) 0%, transparent 60%);
    }
  }

  @keyframes howWeWorkTitleGlow {
    0%, 100% {
      background-position: 0% 50%;
      filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.3));
    }
    50% {
      background-position: 100% 50%;
      filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.4));
    }
  }

  @keyframes howWeWorkUnderline {
    0%, 100% {
      width: 120px;
      opacity: 1;
    }
    50% {
      width: 180px;
      opacity: 0.8;
    }
  }

  @keyframes howWeWorkSubtitleFade {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes timelinePulse {
    0%, 100% {
      opacity: 0.8;
      transform: translateX(-50%) scaleY(1);
    }
    50% {
      opacity: 1;
      transform: translateX(-50%) scaleY(1.05);
    }
  }

  @keyframes stepSlideIn {
    0% {
      opacity: 0;
      transform: translateY(50px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes contentSlideIn {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes dotFloat {
    0%, 100% {
      transform: translate(-50%, -50%) translateY(0px);
    }
    50% {
      transform: translate(-50%, -50%) translateY(-8px);
    }
  }

  @keyframes numberFloat {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-6px);
    }
  }


  /* Responsive Design */
  @media (max-width: 1024px) {
    .how-we-work-title {
      font-size: 3rem;
    }

    .work-steps::before {
      left: 2rem;
      transform: none;
    }

    .work-step {
      flex-direction: row !important;
      gap: 3rem;
      padding-left: 4rem;
    }

    .work-step::before {
      left: 2rem;
      transform: translateX(-50%);
    }

    .work-step:nth-child(odd) .step-content,
    .work-step:nth-child(even) .step-content {
      text-align: left;
      padding: 0;
      margin: 0;
    }

    .work-step:nth-child(odd) .step-image,
    .work-step:nth-child(even) .step-image {
      margin: 0;
    }

    .step-image {
      flex: 0 0 320px;
      height: 200px;
    }

    .step-title {
      font-size: 1.875rem;
    }
  }

  @media (max-width: 768px) {
    .how-we-work-section {
      padding: 4rem 0;
    }

    .how-we-work-container {
      padding: 0 1rem;
    }

    .how-we-work-title {
      font-size: 2rem;
    }

    .how-we-work-subtitle {
      font-size: 1.1rem;
    }

    .work-steps {
      gap: 4rem;
    }

    .work-steps::before {
      left: 1.5rem;
    }

    .work-step {
      padding: 1.5rem 0 1.5rem 3rem;
    }

    .work-step::before {
      left: 1.5rem;
    }

    .step-image {
      flex: 0 0 240px;
      height: 160px;
    }

    .work-step::before {
      width: 40px;
      height: 40px;
      font-size: 1.25rem;
    }
  }

  @media (max-width: 480px) {
    .how-we-work-title {
      font-size: 1.75rem;
    }

    .how-we-work-subtitle {
      font-size: 1rem;
    }

    .work-steps {
      gap: 3rem;
    }

    .work-steps::before {
      left: 1rem;
    }

    .work-step {
      flex-direction: column !important;
      gap: 1.5rem;
      padding: 1.5rem 0 1.5rem 2rem;
      text-align: center;
    }

    .work-step::before {
      left: 1rem;
    }

    .work-step:nth-child(odd) .step-content,
    .work-step:nth-child(even) .step-content {
      text-align: center;
      padding: 0;
      margin: 0;
    }

    .work-step:nth-child(odd) .step-image,
    .work-step:nth-child(even) .step-image {
      margin: 0;
    }

    .step-image {
      flex: none;
      width: 100%;
      max-width: 300px;
      height: 140px;
    }

    .step-title {
      font-size: 1.25rem;
    }

    .step-description {
      font-size: 0.95rem;
    }

    .work-step::before {
      width: 35px;
      height: 35px;
      font-size: 1.1rem;
    }
  }

  /* 3D Animated Contact Section */
  .contact-3d-section {
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
    padding: 70px 0;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  /* 3D Background Elements */
  .contact-3d-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .contact-3d-shape {
    position: absolute;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(16, 185, 129, 0.25) 100%);
    filter: blur(25px);
    animation: contact3DFloat 20s ease-in-out infinite;
  }

  .contact-3d-shape-1 {
    width: 300px;
    height: 300px;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(16, 185, 129, 0.2) 100%);
  }

  .contact-3d-shape-2 {
    width: 250px;
    height: 250px;
    top: 60%;
    right: 10%;
    animation-delay: 5s;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3) 0%, rgba(59, 130, 246, 0.2) 100%);
  }

  .contact-3d-shape-3 {
    width: 200px;
    height: 200px;
    top: 30%;
    right: 20%;
    animation-delay: 10s;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(16, 185, 129, 0.3) 100%);
  }

  .contact-3d-shape-4 {
    width: 180px;
    height: 180px;
    bottom: 20%;
    left: 15%;
    animation-delay: 15s;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(59, 130, 246, 0.3) 100%);
  }

  /* Floating 3D Elements */
  .contact-3d-floating {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }

  .floating-3d-element {
    position: absolute;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.4);
    animation: contact3DParticle 15s linear infinite;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
  }

  .floating-3d-element-1 {
    width: 8px;
    height: 8px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
    animation-duration: 12s;
  }

  .floating-3d-element-2 {
    width: 6px;
    height: 6px;
    top: 70%;
    left: 80%;
    animation-delay: 3s;
    animation-duration: 18s;
  }

  .floating-3d-element-3 {
    width: 10px;
    height: 10px;
    top: 40%;
    left: 70%;
    animation-delay: 6s;
    animation-duration: 15s;
  }

  .floating-3d-element-4 {
    width: 7px;
    height: 7px;
    top: 80%;
    left: 20%;
    animation-delay: 9s;
    animation-duration: 20s;
  }

  /* Contact Container */
  .contact-3d-container {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .contact-3d-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
  }

  /* 3D Contact Cards */
  .contact-3d-card {
    perspective: 1000px;
    flex: 0 0 auto;
    width: 320px;
    max-width: 320px;
  }

  .contact-card-3d-wrapper {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
  }

  .contact-3d-card:hover .contact-card-3d-wrapper {
    transform: translateZ(20px);
  }

  .contact-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    box-shadow:
      0 20px 40px rgba(0, 0, 0, 0.1),
      0 10px 20px rgba(0, 0, 0, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    overflow: hidden;
    box-sizing: border-box;
  }

  .contact-3d-card:hover .contact-card-inner {
    transform: translateY(-10px);
    box-shadow:
      0 30px 60px rgba(0, 0, 0, 0.15),
      0 15px 30px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .contact-card-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #3b82f6, #10b981, #3b82f6);
    border-radius: 22px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: blur(8px);
  }

  .contact-3d-card:hover .contact-card-glow {
    opacity: 0.2;
  }

  /* Contact Icons - 3D Style */
  .contact-icon-3d {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow:
      0 15px 35px rgba(0, 0, 0, 0.1),
      0 5px 15px rgba(0, 0, 0, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .contact-icon-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 100%);
    border-radius: 20px;
    z-index: 1;
  }

  .contact-icon-3d::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.02) 100%);
    border-radius: 18px;
    z-index: 0;
  }

  .contact-3d-card:hover .contact-icon-3d {
    transform: scale(1.15) translateZ(20px);
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 50%, #e2e8f0 100%);
    box-shadow:
      0 25px 50px rgba(0, 0, 0, 0.15),
      0 10px 25px rgba(0, 0, 0, 0.1),
      inset 0 2px 0 rgba(255, 255, 255, 0.9),
      inset 0 -2px 0 rgba(0, 0, 0, 0.1);
  }

  .contact-3d-image {
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 2;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: all 0.3s ease;
  }

  .contact-3d-card:hover .contact-3d-image {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  }

  /* Contact Info */
  .contact-info-3d {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .contact-action-3d {
    font-size: 1.1rem;
    font-weight: 700;
    color: #3b82f6;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .contact-detail-3d {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* 3D Animations */
  @keyframes contact3DFloat {
    0%, 100% {
      transform: translateY(0px) translateX(0px) rotate(0deg);
      opacity: 0.2;
    }
    25% {
      transform: translateY(-20px) translateX(10px) rotate(90deg);
      opacity: 0.4;
    }
    50% {
      transform: translateY(-10px) translateX(-15px) rotate(180deg);
      opacity: 0.3;
    }
    75% {
      transform: translateY(-30px) translateX(5px) rotate(270deg);
      opacity: 0.4;
    }
  }

  @keyframes contact3DParticle {
    0% {
      transform: translateY(100vh) translateX(0px) rotate(0deg);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      transform: translateY(-100px) translateX(50px) rotate(360deg);
      opacity: 0;
    }
  }

  /* Responsive Design for Contact 3D Section */
  @media (min-width: 1200px) {
    .contact-3d-content {
      gap: 3rem;
    }

    .contact-3d-card {
      flex: 1;
      max-width: 350px;
    }
  }

  @media (max-width: 1024px) {
    .contact-3d-content {
      flex-direction: row;
      gap: 1.5rem;
      max-width: 900px;
    }

    .contact-3d-card {
      flex: 0 0 auto;
      width: 320px;
      max-width: 320px;
    }

    .contact-3d-shape-1 {
      width: 250px;
      height: 250px;
    }

    .contact-3d-shape-2 {
      width: 200px;
      height: 200px;
    }
  }

  @media (max-width: 768px) {
    .contact-3d-section {
      padding: 80px 0;
    }

    .contact-3d-container {
      padding: 0 1rem;
    }

    .contact-3d-content {
      flex-direction: column;
      gap: 1.5rem;
      max-width: 400px;
    }

    .contact-3d-card {
      width: 100%;
      max-width: 100%;
      height: 180px;
    }

    .contact-card-inner {
      padding: 1.2rem;
      gap: 1rem;
    }

    .contact-icon-3d {
      width: 70px;
      height: 70px;
      border-radius: 18px;
    }

    .contact-icon-3d::before {
      border-radius: 18px;
    }

    .contact-icon-3d::after {
      border-radius: 16px;
    }

    .contact-3d-image {
      width: 36px;
      height: 36px;
    }

    .contact-action-3d {
      font-size: 1rem;
      white-space: normal;
    }

    .contact-detail-3d {
      font-size: 0.9rem;
      line-height: 1.3;
    }

    .contact-3d-shape-1,
    .contact-3d-shape-2,
    .contact-3d-shape-3,
    .contact-3d-shape-4 {
      width: 150px;
      height: 150px;
    }
  }

  @media (max-width: 480px) {
    .contact-3d-section {
      padding: 60px 0;
    }

    .contact-3d-card {
      height: 160px;
    }

    .contact-card-inner {
      padding: 1rem;
      flex-direction: column;
      text-align: center;
      gap: 0.8rem;
    }

    .contact-icon-3d {
      width: 65px;
      height: 65px;
      border-radius: 16px;
    }

    .contact-icon-3d::before {
      border-radius: 16px;
    }

    .contact-icon-3d::after {
      border-radius: 14px;
    }

    .contact-3d-image {
      width: 32px;
      height: 32px;
    }

    .contact-action-3d {
      font-size: 0.95rem;
    }

    .contact-detail-3d {
      font-size: 0.85rem;
    }
  }

  /* Our Story Section - Tarika Lending - Clean & Modern */
  .our-story-section {
    position: relative;
    background-color: #ffffff;
    padding: 5rem 0;
    overflow: visible;
  }

  /* Our Story Layout - Two Column Design */
  .our-story-layout {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 500px;
  }

  /* Content Side */
  .our-story-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 2rem;
    flex: 1;
    min-height: 80vh;
  }

  /* Image Side */
  .our-story-image {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex: 1;
  }

  /* Sticky Image for larger screens */
  @media (min-width: 768px) {
    .our-story-image {
      position: sticky;
      top: 60px;
      align-self: flex-start;
      height: fit-content;
      z-index: 10;
      display: block;
    }
  }

  .story-image-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
  }

  .story-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .story-image-container:hover .story-image {
    transform: scale(1.05);
  }

  .story-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 0;
    color: white;
  }

  .story-image-content {
    text-align: left;
    background: rgba(59, 130, 246, 0.9);
    padding: 1.5rem;
    border-radius: 0 0 20px 0;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    margin-left: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center
  }

  .story-image-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .story-image-name {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
  }

  /* Animated Background Elements */
  .our-story-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
  }

  .our-story-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.05);
    animation: ourStoryShapeFloat 20s ease-in-out infinite;
  }

  .our-story-shape-1 {
    width: 300px;
    height: 300px;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
  }

  .our-story-shape-2 {
    width: 200px;
    height: 200px;
    top: 50%;
    right: 8%;
    animation-delay: 7s;
  }

  .our-story-shape-3 {
    width: 250px;
    height: 250px;
    bottom: 15%;
    left: 15%;
    animation-delay: 14s;
  }

  /* Floating Elements */
  .our-story-floating {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
  }

  .our-story-floating .floating-element {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(59, 130, 246, 0.3);
    border-radius: 50%;
    animation: ourStoryFloating 15s linear infinite;
  }

  .our-story-floating .floating-element-1 {
    left: 20%;
    animation-delay: 0s;
  }

  .our-story-floating .floating-element-2 {
    left: 50%;
    animation-delay: 5s;
  }

  .our-story-floating .floating-element-3 {
    left: 80%;
    animation-delay: 10s;
  }

  .our-story-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 10;
    overflow: visible;
  }

  /* Main Content */
  .our-story-content {
    position: relative;
  }

  .our-story-text {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
  }

  .story-paragraph {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    line-height: 1.8;
    color: #64748b;
    margin: 0 0 1rem 0;
    font-weight: 400;
    opacity: 0;
    transform: translateY(30px);
    animation: ourStoryTextSlideIn 1s ease-out forwards;
  }

  .story-paragraph:nth-child(1) {
    animation-delay: 0.3s;
  }

  .story-paragraph:nth-child(2) {
    animation-delay: 0.5s;
  }

  .story-paragraph:nth-child(3) {
    animation-delay: 0.7s;
  }

  .story-paragraph:nth-child(4) {
    animation-delay: 0.9s;
  }

  .cta-paragraph {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    margin-top: 3rem;
    color: #1e293b;
    margin-bottom: 0;
  }

  .highlight-text {
    color: #3b82f6;
    font-weight: 700;
  }

  .founder-name {
    color: #1e293b;
    font-weight: 700;
  }

  /* Animations */
  @keyframes ourStoryShapeFloat {
    0%, 100% {
      transform: translateY(0px) rotate(0deg);
    }
    50% {
      transform: translateY(-20px) rotate(180deg);
    }
  }

  @keyframes ourStoryFloating {
    0% {
      transform: translateY(100vh) rotate(0deg);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      transform: translateY(-100px) rotate(360deg);
      opacity: 0;
    }
  }


  @keyframes ourStoryTextSlideIn {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Responsive Design */
  @media (max-width: 1200px) {
    .our-story-title {
      font-size: 3rem;
    }
  }

  @media (max-width: 1024px) {
    .our-story-section {
      padding: 6rem 0;
    }

    .our-story-title {
      font-size: 2.75rem;
    }

    .story-paragraph {
      font-size: 1.2rem;
    }
  }

  @media (max-width: 768px) {
    .our-story-section {
      padding: 4rem 0;
    }

    .our-story-container {
      padding: 0 1.5rem;
    }

    .our-story-layout {
      flex-direction: column;
      gap: 2rem;
      min-height: auto;
      align-items: center;
      justify-content: center;
    }

    .our-story-image {
      position: static;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .story-image-container {
      position: relative;
    }

    .our-story-content {
      padding-right: 0;
      order: 2;
      text-align: left;
    }

    .our-story-image {
      order: 1;
    }

    .story-image-container {
      max-width: 350px;
      height: 400px;
    }

    .story-image-name {
      font-size: 1.5rem;
    }

    .our-story-header {
      margin-bottom: 3rem;
    }

    .our-story-title {
      font-size: 2.5rem;
    }

    .story-paragraph {
      font-size: 1.1rem;
      line-height: 1.7;
    }

    .cta-paragraph {
      font-size: 1.375rem;
    }
  }

  @media (max-width: 480px) {
    .our-story-section {
      padding: 3rem 0;
    }

    .our-story-container {
      padding: 0 1rem;
    }

    .our-story-layout {
      gap: 2rem;
    }

    .story-image-container {
      max-width: 300px;
      height: 350px;
    }

    .story-image-overlay {
      padding: 0;
    }

    .story-image-content {
      padding: 1.2rem;
      border-radius: 0 0 15px 0;
    }

    .story-image-title {
      font-size: 0.8rem;
    }

    .story-image-name {
      font-size: 1.3rem;
    }

    .our-story-title {
      font-size: 2.25rem;
    }

    .story-paragraph {
      font-size: 1rem;
      line-height: 1.6;
    }

    .cta-paragraph {
      font-size: 1.25rem;
    }
  }

  /* Why Affinity Mortgage Section - Modern & Animated */
  .why-affinity-section {
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
    padding: 5rem 0;
    overflow: hidden;
  }

  /* Animated Background Elements */
  .why-affinity-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
  }

  .why-affinity-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.08);
    animation: whyAffinityShapeFloat 25s ease-in-out infinite;
  }

  .why-affinity-shape-1 {
    width: 400px;
    height: 400px;
    top: 5%;
    left: 2%;
    animation-delay: 0s;
  }

  .why-affinity-shape-2 {
    width: 300px;
    height: 300px;
    top: 30%;
    right: 3%;
    animation-delay: 8s;
  }

  .why-affinity-shape-3 {
    width: 250px;
    height: 250px;
    bottom: 10%;
    left: 20%;
    animation-delay: 16s;
  }

  /* Floating Elements */
  .why-affinity-floating {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
  }

  .why-affinity-floating .floating-element {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(59, 130, 246, 0.4);
    border-radius: 50%;
    animation: whyAffinityFloating 20s linear infinite;
  }

  .why-affinity-floating .floating-element-1 {
    left: 15%;
    animation-delay: 0s;
  }

  .why-affinity-floating .floating-element-2 {
    left: 50%;
    animation-delay: 7s;
  }

  .why-affinity-floating .floating-element-3 {
    left: 85%;
    animation-delay: 14s;
  }

  .why-affinity-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 10;
  }

  .why-affinity-content {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    align-items: center;
    justify-content: center;
  }

  /* Left Column - Text and Features */
  .why-affinity-left {
    position: relative;
    width: 100%;
    max-width: 800px;
  }

  .why-affinity-header {
    margin-bottom: 3rem;
  }

  .why-affinity-title {
    font-family: 'Inter', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 1rem 0;
    letter-spacing: -0.02em;
    opacity: 0;
    transform: translateX(-50px);
    animation: whyAffinityTitleSlideIn 1s ease-out 0.3s forwards;
    text-align: center;
  }

  .title-underline {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #06b6d4, #3b82f6);
    border-radius: 2px;
    opacity: 0;
    transform: scaleX(0);
    animation: whyAffinityUnderlineProgress 1s ease-out 0.6s forwards;
  }

  /* Intro Section */
  .why-affinity-intro {
    margin-bottom: 2.5rem;
    opacity: 1;
    transform: translateY(0);
    animation: whyAffinityIntroSlideIn 1s ease-out 0.8s forwards;
  }

  .intro-text {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    line-height: 1.7;
    color: #64748b;
    margin: 0 0 1rem 0;
    font-weight: 400;
    display: block;
    visibility: visible;
    text-align:center;
  }

  .intro-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin: 1.5rem 0 1rem 0;
    text-align: left;
    position: relative;
    display: block;
    visibility: visible;
    text-align: center;
  }

  .why-affinity-intro .highlight-text {
    color: #3b82f6;
    font-weight: 700;
  }

  /* Features Styles */
  .features-container {
    margin-bottom: 3rem;
  }

  .feature-item {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(30px);
    animation: whyAffinityFeatureSlideIn 0.8s ease-out forwards;
  }

  .feature-item:nth-child(1) {
    animation-delay: 1.0s;
  }

  .feature-item:nth-child(2) {
    animation-delay: 1.2s;
  }

  .feature-item:nth-child(3) {
    animation-delay: 1.4s;
  }

  .feature-item:nth-child(4) {
    animation-delay: 1.6s;
  }

  .feature-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .feature-header {
    padding: 1.5rem 2rem 1rem 2rem;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  }

  .feature-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #3b82f6;
    margin: 0;
    transition: color 0.3s ease;
    text-align: center;
  }

  .feature-content {
    padding: 0 2rem 1.5rem 2rem;
    text-align: center;
  }

  .feature-text {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #64748b;
    margin: 1rem 0 0 0;
  }

  /* CTA Button */
  .why-affinity-cta {
    opacity: 0;
    transform: translateY(30px);
    animation: whyAffinityCtaSlideIn 1s ease-out 1.8s forwards;
  }

  .cta-button {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 1rem 2rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }

  .cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
  }

  .cta-button:hover::before {
    left: 100%;
  }

  .cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
  }

  .button-arrow {
    transition: transform 0.3s ease;
  }

  .cta-button:hover .button-arrow {
    transform: translateX(4px);
  }

  .button-arrow svg {
    width: 16px;
    height: 16px;
  }

  /* Right Column - Image Slider */
  .why-affinity-right {
    position: relative;
    opacity: 0;
    transform: translateX(50px);
    animation: whyAffinityRightSlideIn 1s ease-out 0.8s forwards;
    width: 100%;
  }

  .image-slider {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  }

  .slider-container {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
  }

  .slider-track {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.6s ease;
    transform: translateX(0%);
  }

  .slider-slide {
    width: 33.333%;
    height: 100%;
    position: relative;
    flex-shrink: 0;
    flex-basis: 33.333%;
    min-width: 33.333%;
  }

  .slide-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.6s ease, opacity 0.6s ease;
    opacity: 0.9;
  }

  .slider-slide.active .slide-image {
    transform: scale(1.02);
    opacity: 1;
  }

  .slider-slide:not(.active) .slide-image {
    opacity: 0.8;
  }

  /* ===== PROVINCE INTERACTIVE STYLES ===== */
  .province-subtitle {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.5rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
  }

  .province-card:hover .province-subtitle {
    opacity: 1;
    transform: translateY(0);
  }

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

  /* Province Modal Styles */
  .province-modal {
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999 !important;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: absolute;
  }

  .province-modal-content {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 1.5rem;
    max-width: 900px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    animation: modalSlideIn 0.4s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1000000;
  }

  @keyframes modalSlideIn {
    from {
      opacity: 0;
      transform: translateY(-50px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .province-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
  }

  .modal-province-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
  }

  .province-modal-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
  }

  .province-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }

  .province-modal-body {
    padding: 0;
    max-height: 80vh;
    overflow: visible;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
  }

  /* ===== PROVINCE MAP STYLES ===== */
  .province-map-container {
    width: 100%;
    background: #f8fafc;
    border-radius: 0.75rem;
    overflow: hidden;
    flex-shrink: 0;
  }

  .map-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .map-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .map-container {
    width: 100%;
    height: 350px;
    position: relative;
    background: #f0f9ff;
  }

  .google-map-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .map-info {
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    min-height: 120px;
  }

  .map-description {
    font-size: 0.9rem;
    color: #475569;
    margin: 0 0 1rem 0;
    line-height: 1.6;
    font-weight: 500;
  }

  .map-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .map-link:hover {
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  }

  /* Map Loading Optimization */
  .google-map-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .province-modal {
      padding: 0.5rem;
      align-items: center;
      justify-content: center;
    }

    .province-modal-content {
      margin: 0;
      max-width: 100%;
      max-height: 95vh;
      width: 100%;
    }

    .province-modal-body {
      padding: 0;
      max-height: 90vh;
      overflow: visible;
    }



    .map-container {
      height: 250px;
    }

    .map-title {
      font-size: 1.25rem;
      padding: 1rem;
    }

    .map-info {
      padding: 1rem;
      min-height: 100px;
    }

    .map-description {
      font-size: 0.85rem;
    }

    .map-link {
      font-size: 0.85rem;
      padding: 0.6rem 1.2rem;
    }
  }

  /* Navigation Arrows */
  .slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
  }

  .slider-nav:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
  }

  .slider-prev {
    left: 20px;
  }

  .slider-next {
    right: 20px;
  }

  .slider-nav svg {
    width: 20px;
    height: 20px;
    color: #1e293b;
  }

  /* Pagination Dots */
  .slider-pagination {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
  }

  .pagination-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .pagination-dot.active {
    background: #ffffff;
    transform: scale(1.2);
  }

  .pagination-dot:hover {
    background: rgba(255, 255, 255, 0.8);
  }

  /* Animations */
  @keyframes whyAffinityShapeFloat {
    0%, 100% {
      transform: translateY(0px) rotate(0deg);
    }
    50% {
      transform: translateY(-30px) rotate(180deg);
    }
  }

  @keyframes whyAffinityFloating {
    0% {
      transform: translateY(100vh) rotate(0deg);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      transform: translateY(-100px) rotate(360deg);
      opacity: 0;
    }
  }

  @keyframes whyAffinityTitleSlideIn {
    0% {
      opacity: 0;
      transform: translateX(-50px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes whyAffinityUnderlineProgress {
    0% {
      opacity: 0;
      transform: scaleX(0);
    }
    100% {
      opacity: 1;
      transform: scaleX(1);
    }
  }

  @keyframes whyAffinityIntroSlideIn {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes whyAffinityFeatureSlideIn {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes whyAffinityCtaSlideIn {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes whyAffinityRightSlideIn {
    0% {
      opacity: 0;
      transform: translateX(50px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Responsive Design */
  @media (max-width: 1200px) {
    .why-affinity-content {
      gap: 4rem;
    }

    .why-affinity-title {
      font-size: 3rem;
    }
  }

  @media (max-width: 1024px) {
    .why-affinity-section {
      padding: 6rem 0;
    }

    .why-affinity-content {
      gap: 3rem;
    }

    .why-affinity-left {
      max-width: 700px;
    }

    .why-affinity-title {
      font-size: 2.75rem;
      text-align: center;
    }

    .title-underline {
      margin: 0 auto;
    }

    .slider-container {
      height: 350px;
    }
  }

  @media (max-width: 768px) {
    .why-affinity-section {
      padding: 4rem 0;
    }

    .why-affinity-container {
      padding: 0 1.5rem;
    }

    .why-affinity-title {
      font-size: 2.5rem;
    }

    .feature-header {
      padding: 1.25rem 1.5rem 0.75rem 1.5rem;
    }

    .feature-content {
      padding: 0 1.5rem 1.25rem 1.5rem;
    }

    .feature-title {
      font-size: 1.1rem;
    }

    .intro-text {
      font-size: 1.1rem;
    }

    .intro-subtitle {
      font-size: 1rem;
    }

    .slider-container {
      height: 300px;
    }

    .slider-nav {
      width: 40px;
      height: 40px;
    }

    .slider-nav svg {
      width: 16px;
      height: 16px;
    }
  }

  @media (max-width: 480px) {
    .why-affinity-section {
      padding: 3rem 0;
    }

    .why-affinity-container {
      padding: 0 1rem;
    }

    .why-affinity-title {
      font-size: 2.25rem;
    }

    .feature-header {
      padding: 1rem 1.25rem 0.5rem 1.25rem;
    }

    .feature-content {
      padding: 0 1.25rem 1rem 1.25rem;
    }

    .feature-title {
      font-size: 1rem;
    }

    .feature-text {
      font-size: 0.9rem;
    }

    .intro-text {
      font-size: 1rem;
    }

    .intro-subtitle {
      font-size: 0.95rem;
    }

    .cta-button {
      padding: 0.875rem 1.5rem;
      font-size: 0.9rem;
    }

    .slider-container {
      height: 250px;
    }

    .slider-nav {
      width: 35px;
      height: 35px;
    }

    .slider-prev {
      left: 15px;
    }

    .slider-next {
      right: 15px;
    }

    .slider-nav svg {
      width: 14px;
      height: 14px;
    }

    .pagination-dot {
      width: 10px;
      height: 10px;
    }
  }


  /* About Affinity Mortgage Solutions Section - Clean & Modern */
  .about-affinity-section {
    position: relative;
    background-color: #ffffff;
    padding: 6rem 0;
    overflow: hidden;
  }

  /* Animated Background */
  .about-affinity-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
  }

  .about-affinity-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.05);
    animation: aboutAffinityShapeFloat 15s ease-in-out infinite;
  }

  .about-affinity-shape-1 {
    width: 300px;
    height: 300px;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
  }

  .about-affinity-shape-2 {
    width: 200px;
    height: 200px;
    top: 60%;
    right: 10%;
    animation-delay: 3s;
  }

  .about-affinity-shape-3 {
    width: 150px;
    height: 150px;
    bottom: 20%;
    left: 20%;
    animation-delay: 6s;
  }

  .about-affinity-shape-4 {
    width: 250px;
    height: 250px;
    top: 30%;
    right: 30%;
    animation-delay: 9s;
  }

  .about-affinity-shape-5 {
    width: 180px;
    height: 180px;
    bottom: 40%;
    right: 5%;
    animation-delay: 12s;
  }

  /* Floating Particles */
  .about-affinity-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
  }

  .about-affinity-particles .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(59, 130, 246, 0.3);
    border-radius: 50%;
    animation: aboutAffinityParticleFloat 12s linear infinite;
  }

  .about-affinity-particles .particle-1 {
    left: 10%;
    animation-delay: 0s;
  }

  .about-affinity-particles .particle-2 {
    left: 20%;
    animation-delay: 2s;
  }

  .about-affinity-particles .particle-3 {
    left: 30%;
    animation-delay: 4s;
  }

  .about-affinity-particles .particle-4 {
    left: 70%;
    animation-delay: 6s;
  }

  .about-affinity-particles .particle-5 {
    left: 80%;
    animation-delay: 8s;
  }

  .about-affinity-particles .particle-6 {
    left: 90%;
    animation-delay: 10s;
  }

  .about-affinity-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 10;
  }

  .about-affinity-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
  }

  .about-affinity-left {
    position: relative;
  }

  .about-affinity-title-wrapper {
    position: relative;
  }

  .about-affinity-title {
    font-family: 'Inter', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.03em;
    color: #0f172a;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10;
  }

  .title-line {
    display: block;
    opacity: 0;
    transform: translateY(50px);
    animation: aboutAffinityTitleSlideIn 1s ease-out forwards;
  }

  .title-line-1 {
    animation-delay: 0.2s;
  }

  .title-line-2 {
    animation-delay: 0.4s;
  }

  .about-affinity-underline {
    width: 120px;
    height: 4px;
    background: rgba(59, 130, 246, 0.2);
    margin:2rem auto 0;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }

  .underline-progress {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8, #3b82f6);
    border-radius: 2px;
    animation: aboutAffinityUnderlineProgress 2s ease-out 0.8s forwards;
  }

  .about-affinity-right {
    position: relative;
  }

  .about-affinity-description-wrapper {
    opacity: 0;
    transform: translateX(50px);
    animation: aboutAffinityContentSlideIn 1s ease-out 0.6s forwards;
  }

  .about-affinity-description {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    line-height: 1.8;
    color: #64748b;
    margin: 0;
    font-weight: 400;
  }

  /* Animations */

  @keyframes aboutAffinityShapeFloat {
    0%, 100% {
      transform: translateY(0px) rotate(0deg);
    }
    50% {
      transform: translateY(-20px) rotate(180deg);
    }
  }

  @keyframes aboutAffinityParticleFloat {
    0% {
      transform: translateY(100vh) rotate(0deg);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      transform: translateY(-100px) rotate(360deg);
      opacity: 0;
    }
  }


  @keyframes aboutAffinityTitleSlideIn {
    0% {
      opacity: 0;
      transform: translateY(50px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes aboutAffinityUnderlineProgress {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }

  @keyframes aboutAffinityContentSlideIn {
    0% {
      opacity: 0;
      transform: translateX(50px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }


  /* Responsive Design */
  @media (max-width: 1200px) {
    .about-affinity-content {
      gap: 4rem;
    }

    .about-affinity-title {
      font-size: 3rem;
      line-height: 1.2;
    }
  }

  @media (max-width: 1024px) {
    .about-affinity-section {
      padding: 6rem 0;
    }

    .about-affinity-content {
      grid-template-columns: 1fr;
      gap: 4rem;
      text-align: center;
    }

    .about-affinity-title {
      font-size: 2.5rem;
      line-height: 1.2;
    }

    .about-affinity-description {
      font-size: 1.1rem;
    }

  }

  @media (max-width: 768px) {
    .about-affinity-section {
      padding: 4rem 0;
    }

    .about-affinity-container {
      padding: 0 1.5rem;
    }

    .about-affinity-title {
      font-size: 2.25rem;
      line-height: 1.2;
    }

    .about-affinity-description {
      font-size: 1rem;
      line-height: 1.7;
    }

  }

  @media (max-width: 480px) {
    .about-affinity-section {
      padding: 3rem 0;
    }

    .about-affinity-container {
      padding: 0 1rem;
    }

    .about-affinity-title {
      font-size: 1.875rem;
      line-height: 1.2;
    }

    .about-affinity-description {
      font-size: 0.95rem;
    }

    .about-affinity-underline {
      width: 80px;
      height: 3px;
    }
  }

  /* Mortgage Refinancing Benefits Section - Modern Design */
  .mortgage-refinancing-benefits-section {
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 25%, #f0f9ff 50%, #e0e7ff 75%, #f8fafc 100%);
    background-size: 400% 400%;
    animation: refinancingBenefitsBackgroundFlow 20s ease-in-out infinite;
  }

  /* Background Shapes */
  .refinancing-benefits-bg-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.06);
    animation: refinancingBenefitsShapeFloat 15s ease-in-out infinite;
  }

  .refinancing-benefits-bg-shape-1 {
    width: 300px;
    height: 300px;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
  }

  .refinancing-benefits-bg-shape-2 {
    width: 200px;
    height: 200px;
    top: 60%;
    right: 10%;
    animation-delay: 3s;
  }

  .refinancing-benefits-bg-shape-3 {
    width: 150px;
    height: 150px;
    bottom: 20%;
    left: 20%;
    animation-delay: 6s;
  }

  /* Main Title */
  .refinancing-benefits-main-title {
    background: linear-gradient(135deg, #1e40af, #3b82f6, #8b5cf6);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: refinancingBenefitsTitleGradient 3s ease-in-out infinite;
  }

  /* Benefit Cards */
  .refinancing-benefit-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: all 0.3s ease;
  }

  .refinancing-benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.5s ease;
  }

  .refinancing-benefit-card:hover::before {
    left: 100%;
  }

  .refinancing-benefit-card:hover {
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-8px);
  }

  /* Benefit Icons */
  .refinancing-benefit-icon {
    position: relative;
  }

  .refinancing-benefit-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    animation: refinancingBenefitIconPulse 2s ease-in-out infinite;
  }

  /* Animations */
  @keyframes refinancingBenefitsBackgroundFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }

  @keyframes refinancingBenefitsShapeFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(120deg); }
    66% { transform: translateY(10px) rotate(240deg); }
  }

  @keyframes refinancingBenefitsTitleGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }

  @keyframes refinancingBenefitIconPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.3; }
  }

  /* Professional Benefits Section Styles */
  .professional-benefits-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  }

  .professional-benefits-title {
    background: linear-gradient(135deg, #1e293b, #475569);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .professional-benefits-description {
    color: #64748b;
    line-height: 1.7;
  }

  .professional-benefit-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }

  .professional-benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #3b82f6, #1d4ed8);
    transition: width 0.3s ease;
  }

  .professional-benefit-card:hover::before {
    width: 6px;
  }

  .professional-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  .professional-benefit-card.border-blue-500::before {
    background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  }

  .professional-benefit-card.border-green-500::before {
    background: linear-gradient(180deg, #10b981, #059669);
  }

  .professional-benefit-card.border-purple-500::before {
    background: linear-gradient(180deg, #8b5cf6, #7c3aed);
  }

  .professional-benefit-card.border-orange-500::before {
    background: linear-gradient(180deg, #f97316, #ea580c);
  }

  .professional-benefit-card.border-teal-500::before {
    background: linear-gradient(180deg, #14b8a6, #0d9488);
  }

  .professional-benefit-card.border-pink-500::before {
    background: linear-gradient(180deg, #ec4899, #db2777);
  }

  .professional-benefit-icon {
    margin-bottom: 1rem;
  }

  .professional-benefit-icon .w-12 {
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
  }

  .professional-benefit-card:hover .professional-benefit-icon .w-12 {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
  }

  .professional-benefit-title {
    color: #1e293b;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.4;
  }

  .professional-benefit-description {
    color: #64748b;
    line-height: 1.6;
  }

  .professional-benefit-list {
    margin-top: 1rem;
  }

  .professional-benefit-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    color: #374151;
    line-height: 1.5;
  }

  .professional-benefit-list li svg {
    margin-top: 0.25rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
  }



  .professional-benefit-list li a:hover {
    color: #1d4ed8;
  }

  /* Professional Benefits Responsive Design */
  @media (max-width: 1024px) {
    .professional-benefits-grid {
      grid-template-columns: 1fr 1fr;
    }

    .professional-benefits-title {
      font-size: 2.5rem;
    }
  }

  @media (max-width: 768px) {
    .professional-benefits-grid {
      grid-template-columns: 1fr;
    }

    .professional-benefits-title {
      font-size: 2rem;
    }

    .professional-benefit-card {
      padding: 1.25rem;
    }

    .professional-benefits-section {
      padding: 3rem 0;
    }
  }

  @media (max-width: 480px) {
    .professional-benefits-title {
      font-size: 1.75rem;
    }

    .professional-benefit-card {
      padding: 1rem;
    }

    .professional-benefit-icon .w-12 {
      width: 2.5rem;
      height: 2.5rem;
    }

    .professional-benefit-icon .w-6 {
      width: 1.25rem;
      height: 1.25rem;
    }

    .professional-benefit-title {
      font-size: 1.125rem;
    }

    .professional-benefits-description {
      font-size: 0.875rem;
    }
  }

  /* Modern Mortgage Rates Section Styles */
  .creative-rates-section {
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
    overflow: hidden;
  }

  /* Floating Animation Keyframes */
  @keyframes float-slow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
  }

  @keyframes float-medium {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(-3deg); }
  }

  @keyframes float-fast {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
  }

  .animate-float-slow {
    animation: float-slow 6s ease-in-out infinite;
  }

  .animate-float-medium {
    animation: float-medium 4s ease-in-out infinite;
  }

  .animate-float-fast {
    animation: float-fast 3s ease-in-out infinite;
  }

  /* Modern Section Header */
  .creative-rates-title {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .creative-rates-description {
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
  }

  /* Modern Factors Section */
  .creative-factors-title {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .creative-factors-description {
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
  }

  .creative-factor-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }

  .creative-factor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(99, 102, 241, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .creative-factor-card:hover::before {
    opacity: 1;
  }

  .creative-factor-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  }

  /* Clean Table Styles - Enhanced Visibility */
  .creative-table-title {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .creative-disclaimer {
    background: linear-gradient(135deg, #fef3c7, #fed7aa);
    border-left: 4px solid #f59e0b;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.1);
    position: relative;
    overflow: hidden;
  }

  .creative-disclaimer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(251, 191, 36, 0.05));
    pointer-events: none;
  }

  .creative-table-container {
    overflow-x: auto;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    border: 2px solid #e5e7eb;
    min-width: 100%;
  }

  .creative-rates-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  .creative-table-header {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    position: relative;
  }

  .creative-table-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #3b82f6);
  }

  .creative-table-th {
    padding: 1.25rem 1.5rem;
    text-align: center;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    position: relative;
    background: transparent;
    white-space: nowrap;
  }

  .creative-table-th:first-child {
    text-align: left;
  }

  .creative-table-th::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  }

  .creative-table-body {
    background: #ffffff;
  }

  .creative-table-row {
    border-bottom: 1px solid #e5e7eb;
    transition: all 0.2s ease;
    position: relative;
    background: #ffffff;
  }

  .creative-table-row:nth-child(even) {
    background: #f9fafb;
  }

  .creative-table-row:hover {
    background: #f3f4f6 !important;
    transform: none;
  }

  .creative-table-row:last-child {
    border-bottom: none;
  }

  .creative-table-td {
    padding: 1.25rem 1.5rem;
    text-align: center;
    border: none;
    vertical-align: middle;
    color: #1f2937 !important;
    font-weight: 500;
    font-size: 0.95rem;
    background: transparent;
    white-space: nowrap;
  }

  .creative-table-td:first-child {
    text-align: left;
    font-weight: 700;
    color: #111827 !important;
  }

  .creative-rate-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    color: #ffffff !important;
    min-width: 60px;
    text-align: center;
  }

  .creative-rate-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  }

  .creative-rate-value {
    font-weight: 600;
    color: #1f2937 !important;
    transition: color 0.2s ease;
    font-size: 0.95rem;
  }

  .creative-table-row:hover .creative-rate-value {
    color: #111827 !important;
  }

  /* Empty cell styling */
  .creative-table-td:empty::after {
    content: '-';
    color: #9ca3af;
    font-weight: 400;
  }

  /* Professional Mortgage Rates Section */
  .professional-rates-section {
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
  }

  .professional-rates-title {
    background: linear-gradient(135deg, #1e293b, #334155);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .professional-rates-description {
    color: #64748b;
    line-height: 1.7;
  }

  /* Professional Factors Section */
  .professional-factors-title {
    color: #1e293b;
    position: relative;
  }

  .professional-factors-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 2px;
  }

  .professional-factors-description {
    color: #64748b;
  }

  .professional-factor-item {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .professional-factor-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.02), rgba(139, 92, 246, 0.02));
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .professional-factor-item:hover::before {
    opacity: 1;
  }

  .professional-factor-item:hover {
    transform: translateX(8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  }

  /* Professional Table Styles */
  .professional-table-title {
    color: #1e293b;
    position: relative;
  }

  .professional-table-title::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 2px;
  }

  .professional-disclaimer {
    position: relative;
    overflow: hidden;
  }

  .professional-disclaimer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(251, 191, 36, 0.05));
    pointer-events: none;
  }

  .professional-table-container {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .professional-table-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.01), rgba(139, 92, 246, 0.01));
    pointer-events: none;
  }

  .professional-rates-table {
    min-width: 600px;
    border-collapse: collapse;
    position: relative;
    z-index: 1;
  }

  /* Responsive table styles */
  @media (max-width: 768px) {
    .professional-table-container {
      margin: 0 -1rem;
      border-radius: 0;
    }

    .professional-rates-table {
      min-width: 500px;
    }
  }

  @media (max-width: 480px) {
    .professional-rates-table {
      min-width: 450px;
    }

    .professional-table-th,
    .professional-table-td {
      padding: 0.5rem 0.25rem;
      font-size: 0.875rem;
    }
  }

  .professional-table-header {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    position: relative;
  }

  .professional-table-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #3b82f6);
  }

  .professional-table-th {
    padding: 1.25rem 1.5rem;
    text-align: center;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    position: relative;
    background: transparent;
    white-space: nowrap;
  }

  .professional-table-th:first-child {
    text-align: left;
  }

  .professional-table-th::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  }

  .professional-table-body {
    background: #ffffff;
  }

  .professional-table-row {
    border-bottom: 1px solid #e5e7eb;
    transition: all 0.2s ease;
    position: relative;
    background: #ffffff;
  }

  .professional-table-row:nth-child(even) {
    background: #f9fafb;
  }

  .professional-table-row:hover {
    background: #f3f4f6 !important;
  }

  .professional-table-row:last-child {
    border-bottom: none;
  }

  .professional-table-td {
    padding: 1.25rem 1.5rem;
    text-align: center;
    border: none;
    vertical-align: middle;
    color: #1f2937 !important;
    font-weight: 500;
    font-size: 0.95rem;
    background: transparent;
    white-space: nowrap;
  }

  .professional-table-td:first-child {
    text-align: left;
    font-weight: 700;
    color: #111827 !important;
  }

  .professional-rate-highlight {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    min-width: 60px;
    text-align: center;
  }

  .professional-rate-highlight:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .professional-rate-value {
    font-weight: 600;
    color: #1f2937 !important;
    transition: color 0.2s ease;
    font-size: 0.95rem;
  }

  .professional-table-row:hover .professional-rate-value {
    color: #111827 !important;
  }

  /* Enhanced Factors Section */
  .enhanced-factors-section {
    position: relative;
  }

  .enhanced-factors-title {
    color: #1e293b;
    position: relative;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .enhanced-title-underline {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 2px;
    position: relative;
  }

  .enhanced-title-underline::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #8b5cf6, #3b82f6);
    border-radius: 1px;
  }

  .enhanced-factors-description {
    color: #64748b;
    line-height: 1.6;
  }

  .enhanced-factors-flex {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
  }

  .enhanced-factor-card {
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(59, 130, 246, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 0 0 auto;
    width: 100%;
    max-width: 300px;
    min-height: 280px;
  }

  .enhanced-factor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.02), rgba(139, 92, 246, 0.02));
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 1rem;
  }

  .enhanced-factor-card:hover::before {
    opacity: 1;
  }

  .enhanced-factor-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border-color: rgba(59, 130, 246, 0.2);
  }

  .enhanced-factor-icon {
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .enhanced-factor-icon::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
  }

  .enhanced-factor-card:hover .enhanced-factor-icon::before {
    opacity: 1;
  }

  .enhanced-factor-icon svg {
    display: block;
    opacity: 1;
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
  }

  .enhanced-factor-card .relative.z-10 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  /* Ensure icons are always visible */
  .enhanced-factor-card .w-16.h-16 {
    min-width: 4rem;
    min-height: 4rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }

  .enhanced-factor-card:nth-child(1) .w-16.h-16 {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }

  .enhanced-factor-card:nth-child(2) .w-16.h-16 {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  }

  .enhanced-factor-card:nth-child(3) .w-16.h-16 {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
  }

  .enhanced-factor-card:nth-child(4) .w-16.h-16 {
    background: linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
  }

  .enhanced-factor-card:nth-child(5) .w-16.h-16 {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
  }

  .enhanced-factor-title {
    transition: all 0.3s ease;
    position: relative;
  }

  .enhanced-factor-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    transition: width 0.3s ease;
  }

  .enhanced-factor-card:hover .enhanced-factor-title::after {
    width: 100%;
  }

  .enhanced-factor-description {
    transition: color 0.3s ease;
  }

  .enhanced-factor-card:hover .enhanced-factor-description {
    color: #4b5563;
  }

  /* Specific color themes for each factor */
  .enhanced-factor-card:nth-child(1) {
    border-color: rgba(59, 130, 246, 0.2);
  }

  .enhanced-factor-card:nth-child(1):hover {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 25px 50px rgba(59, 130, 246, 0.15);
  }

  .enhanced-factor-card:nth-child(2) {
    border-color: rgba(34, 197, 94, 0.2);
  }

  .enhanced-factor-card:nth-child(2):hover {
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 0 25px 50px rgba(34, 197, 94, 0.15);
  }

  .enhanced-factor-card:nth-child(3) {
    border-color: rgba(147, 51, 234, 0.2);
  }

  .enhanced-factor-card:nth-child(3):hover {
    border-color: rgba(147, 51, 234, 0.4);
    box-shadow: 0 25px 50px rgba(147, 51, 234, 0.15);
  }

  .enhanced-factor-card:nth-child(4) {
    border-color: rgba(249, 115, 22, 0.2);
  }

  .enhanced-factor-card:nth-child(4):hover {
    border-color: rgba(249, 115, 22, 0.4);
    box-shadow: 0 25px 50px rgba(249, 115, 22, 0.15);
  }

  .enhanced-factor-card:nth-child(5) {
    border-color: rgba(20, 184, 166, 0.2);
  }

  .enhanced-factor-card:nth-child(5):hover {
    border-color: rgba(20, 184, 166, 0.4);
    box-shadow: 0 25px 50px rgba(20, 184, 166, 0.15);
  }

  /* Enhanced Factors Responsive Design */
  @media (max-width: 1024px) {
    .enhanced-factors-flex {
      gap: 1.5rem;
    }

    .enhanced-factor-card {
      padding: 1.5rem;
      max-width: 280px;
      min-height: 260px;
    }

    .enhanced-factor-card .w-16.h-16 {
      min-width: 3.5rem;
      min-height: 3.5rem;
    }

    .enhanced-factor-icon .w-8 {
      width: 1.75rem;
      height: 1.75rem;
    }
  }

  @media (max-width: 768px) {
    .enhanced-factors-flex {
      gap: 1.25rem;
    }

    .enhanced-factor-card {
      padding: 1.25rem;
      max-width: 250px;
      min-height: 240px;
    }

    .enhanced-factor-card .w-16.h-16 {
      min-width: 3rem;
      min-height: 3rem;
    }

    .enhanced-factor-icon .w-8 {
      width: 1.5rem;
      height: 1.5rem;
    }

    .enhanced-factor-title {
      font-size: 1.125rem;
    }
  }

  @media (max-width: 480px) {
    .enhanced-factors-flex {
      gap: 1rem;
    }

    .enhanced-factor-card {
      padding: 1rem;
      max-width: 100%;
      min-height: 220px;
    }

    .enhanced-factor-card .w-16.h-16 {
      min-width: 2.5rem;
      min-height: 2.5rem;
    }

    .enhanced-factor-icon .w-8 {
      width: 1.25rem;
      height: 1.25rem;
    }

    .enhanced-factor-title {
      font-size: 1rem;
    }

  .enhanced-factors-title {
    font-size: 1.875rem;
  }
}

/* When to Refinance Your Mortgage Section */
.when-to-refinance-section {
  position: relative;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
  overflow: hidden;
}

.when-to-refinance-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(59, 130, 246, 0.02) 50%, transparent 70%);
  animation: whenToRefinanceShimmer 8s ease-in-out infinite;
  pointer-events: none;
}

.when-to-refinance-section::after {
  content: '';
  position: absolute;
  top: 10%;
  right: 10%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
  border-radius: 50%;
  animation: whenToRefinanceFloat 6s ease-in-out infinite;
  pointer-events: none;
}

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

@keyframes whenToRefinanceFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(120deg);
  }
  66% {
    transform: translateY(10px) rotate(240deg);
  }
}

.when-to-refinance-title {
  background: linear-gradient(135deg, #1e293b, #334155);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  animation: whenToRefinanceTitleFloat 3s ease-in-out infinite;
}

@keyframes whenToRefinanceTitleFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

.when-to-refinance-underline {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 2px;
  position: relative;
  animation: whenToRefinanceUnderlinePulse 2s ease-in-out infinite;
}

.when-to-refinance-underline::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #8b5cf6, #3b82f6);
  border-radius: 1px;
  animation: whenToRefinanceUnderlineGlow 2s ease-in-out infinite;
}

@keyframes whenToRefinanceUnderlinePulse {
  0%, 100% {
    transform: scaleX(1);
    opacity: 1;
  }
  50% {
    transform: scaleX(1.2);
    opacity: 0.8;
  }
}

@keyframes whenToRefinanceUnderlineGlow {
  0%, 100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

.when-to-refinance-description {
  color: #64748b;
  line-height: 1.7;
}

.when-to-refinance-grid {
  position: relative;
  justify-content: center;
}

.when-to-refinance-column {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.when-to-refinance-column > * {
  animation: whenToRefinanceSlideIn 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(30px);
}

.when-to-refinance-column > *:nth-child(1) { animation-delay: 0.1s; }
.when-to-refinance-column > *:nth-child(2) { animation-delay: 0.2s; }
.when-to-refinance-column > *:nth-child(3) { animation-delay: 0.3s; }
.when-to-refinance-column > *:nth-child(4) { animation-delay: 0.4s; }

@keyframes whenToRefinanceSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.when-to-refinance-item {
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(59, 130, 246, 0.1);
  width: 100%;
  max-width: 500px;
  text-align: center;
  overflow: hidden;
}

/* Ensure icons are always visible */
.when-to-refinance-item .flex-shrink-0 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  position: relative !important;
  z-index: 10 !important;
  background: linear-gradient(135deg, var(--icon-color, #3b82f6), var(--icon-color-dark, #1d4ed8)) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

/* Specific icon colors for each item */
.when-to-refinance-item:nth-child(1) .flex-shrink-0 {
  --icon-color: #3b82f6;
  --icon-color-dark: #1d4ed8;
}

.when-to-refinance-item:nth-child(2) .flex-shrink-0 {
  --icon-color: #10b981;
  --icon-color-dark: #047857;
}

.when-to-refinance-item:nth-child(3) .flex-shrink-0 {
  --icon-color: #8b5cf6;
  --icon-color-dark: #6d28d9;
}

.when-to-refinance-item:nth-child(4) .flex-shrink-0 {
  --icon-color: #f59e0b;
  --icon-color-dark: #d97706;
}

.when-to-refinance-item:nth-child(5) .flex-shrink-0 {
  --icon-color: #06b6d4;
  --icon-color-dark: #0891b2;
}

.when-to-refinance-item:nth-child(6) .flex-shrink-0 {
  --icon-color: #ec4899;
  --icon-color-dark: #db2777;
}

.when-to-refinance-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.when-to-refinance-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.02), rgba(139, 92, 246, 0.02));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 1rem;
}

.when-to-refinance-item:hover::before {
  opacity: 1;
}

.when-to-refinance-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
}

.when-to-refinance-item:hover::after {
  left: 100%;
}

.when-to-refinance-item-title {
  transition: all 0.3s ease;
  position: relative;
}

.when-to-refinance-item-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  transition: width 0.3s ease;
}

.when-to-refinance-item:hover .when-to-refinance-item-title::after {
  width: 100%;
}

.when-to-refinance-item-description {
  transition: color 0.3s ease;
}

.when-to-refinance-item:hover .when-to-refinance-item-description {
  color: #4b5563;
}

/* Icon Animations */
.when-to-refinance-item .flex-shrink-0 {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  animation: whenToRefinanceIconPulse 3s ease-in-out infinite;
}

.when-to-refinance-item:hover .flex-shrink-0 {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.when-to-refinance-item .flex-shrink-0::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  animation: whenToRefinanceIconGlow 2s ease-in-out infinite;
}

.when-to-refinance-item:hover .flex-shrink-0::before {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
}

@keyframes whenToRefinanceIconPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }
}

@keyframes whenToRefinanceIconGlow {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* SVG Icon Animations */
.when-to-refinance-item svg {
  transition: all 0.3s ease;
  display: block;
  opacity: 1;
  visibility: visible;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  animation: whenToRefinanceIconFloat 4s ease-in-out infinite;
}

.when-to-refinance-item:hover svg {
  transform: scale(1.1);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

@keyframes whenToRefinanceIconFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Staggered Animation for Grid Items */
.when-to-refinance-grid .when-to-refinance-column:nth-child(1) > * {
  animation-delay: calc(0.1s + var(--item-delay, 0s));
}

.when-to-refinance-grid .when-to-refinance-column:nth-child(2) > * {
  animation-delay: calc(0.3s + var(--item-delay, 0s));
}

/* Floating Elements Animation */
@keyframes whenToRefinanceFloatBounce {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.1);
  }
}

/* Enhanced Bounce Animation */
.animate-bounce {
  animation: whenToRefinanceFloatBounce 3s ease-in-out infinite;
}

/* Responsive Design for When to Refinance Section */
@media (max-width: 1024px) {
  .when-to-refinance-grid {
    gap: 2rem;
  }

  .when-to-refinance-item {
    padding: 1.5rem;
  }

  .when-to-refinance-section::after {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 768px) {
  .when-to-refinance-grid {
    gap: 1.5rem;
  }

  .when-to-refinance-item {
    padding: 1.25rem;
  }

  .when-to-refinance-item-title {
    font-size: 1.5rem;
  }

  .when-to-refinance-section::after {
    width: 100px;
    height: 100px;
    top: 5%;
    right: 5%;
  }

  .when-to-refinance-item:hover {
    transform: translateY(-4px) scale(1.01);
  }

  .when-to-refinance-item .flex-shrink-0 {
    width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 480px) {
  .when-to-refinance-item {
    padding: 1rem;
  }

  .when-to-refinance-item-title {
    font-size: 1.25rem;
  }

  .when-to-refinance-title {
    font-size: 2rem;
  }

  .when-to-refinance-section::after {
    width: 80px;
    height: 80px;
    top: 3%;
    right: 3%;
  }

  .when-to-refinance-item:hover {
    transform: translateY(-2px) scale(1.005);
  }

  .when-to-refinance-item:hover .flex-shrink-0 {
    transform: scale(1.05) rotate(3deg);
  }

  .when-to-refinance-item .flex-shrink-0 {
    width: 40px !important;
    height: 40px !important;
  }
}

/* The Refinancing Process: Step-by-Step Guide Section */
.refinancing-process-section {
  background: #ffffff;
  padding: 4rem 0;
}

.refinancing-process-title {
  color: #1a202c;
  font-weight: 600;
  font-size: 2.25rem;
  text-align: center;
  margin-bottom: 1rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  animation: refinancingProcessTitleFloat 3s ease-in-out infinite;
}

@keyframes refinancingProcessTitleFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-2px);
  }
}

.refinancing-process-description {
  color: #4a5568;
  line-height: 1.6;
  font-weight: 400;
  font-size: 1.125rem;
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem;
  padding: 0 1rem;
  animation: refinancingProcessDescriptionFade 2s ease-in-out;
}

@keyframes refinancingProcessDescriptionFade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.refinancing-process-steps {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  gap: 3rem;
}

.refinancing-process-step-row {
  display: contents;
  animation: refinancingProcessSlideIn 0.8s ease-out forwards;
  opacity: 0;
  transform: translateY(30px);
}

.refinancing-process-step-row:nth-child(1) { animation-delay: 0.1s; }
.refinancing-process-step-row:nth-child(2) { animation-delay: 0.2s; }
.refinancing-process-step-row:nth-child(3) { animation-delay: 0.3s; }
.refinancing-process-step-row:nth-child(4) { animation-delay: 0.4s; }
.refinancing-process-step-row:nth-child(5) { animation-delay: 0.5s; }
.refinancing-process-step-row:nth-child(6) { animation-delay: 0.6s; }

@keyframes refinancingProcessSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.refinancing-process-step-row:last-child {
  margin-bottom: 0;
}

.refinancing-process-image {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.refinancing-process-image:hover {
  transform: translateY(-8px);
}

.refinancing-process-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.refinancing-process-image:hover img {
  transform: scale(1.03);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.refinancing-process-content {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.refinancing-process-content:hover {
  transform: translateY(-8px);
}

.refinancing-process-content .bg-white {
  background: #ffffff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.refinancing-process-content:hover .bg-white {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #cbd5e0;
}

.refinancing-process-step-title {
  color: #1a202c;
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: all 0.3s ease;
}

.refinancing-process-content:hover .refinancing-process-step-title {
  color: #2d3748;
  transform: translateX(4px);
}

.refinancing-process-step-description {
  color: #4a5568;
  line-height: 1.6;
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: 0;
  transition: all 0.3s ease;
}

.refinancing-process-content:hover .refinancing-process-step-description {
  color: #2d3748;
}

.refinancing-process-step-list {
  color: #4a5568;
  line-height: 1.6;
  margin-top: 1rem;
}

.refinancing-process-step-list li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  transform: translateX(0);
}

.refinancing-process-step-list li:hover {
  transform: translateX(8px);
  color: #2d3748;
}



/* Purple underline for step 2 */
.refinancing-process-step-title .bg-purple-500 {
  background-color: #8b5cf6;
  height: 4px;
  border-radius: 2px;
}

/* Responsive Design for Refinancing Process Section */
@media (max-width: 1024px) {
  .refinancing-process-section {
    padding: 3rem 0;
  }

  .refinancing-process-title {
    font-size: 2rem;
  }

  .refinancing-process-description {
    font-size: 1.125rem;
    margin-bottom: 2.5rem;
  }

  .refinancing-process-steps {
    padding: 0 1.5rem;
    gap: 2.5rem;
  }


  .refinancing-process-image img {
    height: 220px;
  }

  .refinancing-process-content .bg-white {
    padding: 1.5rem;
  }

  .refinancing-process-step-title {
    font-size: 1.375rem;
  }
}

@media (max-width: 768px) {
  .refinancing-process-section {
    padding: 2.5rem 0;
  }

  .refinancing-process-title {
    font-size: 1.875rem;
    margin-bottom: 0.75rem;
  }

  .refinancing-process-description {
    font-size: 1rem;
    margin-bottom: 2rem;
    padding: 0 1.5rem;
  }

  .refinancing-process-steps {
    padding: 0 1rem;
    gap: 2rem;
  }


  .refinancing-process-image img {
    height: 200px;
  }

  .refinancing-process-content .bg-white {
    padding: 1.5rem;
  }

  .refinancing-process-step-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }

  .refinancing-process-step-description {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .refinancing-process-image:hover {
    transform: none;
  }

  .refinancing-process-content:hover {
    transform: none;
  }

  .refinancing-process-content:hover .refinancing-process-step-title {
    transform: none;
  }

  .refinancing-process-step-list li:hover {
    transform: none;
  }
}

@media (max-width: 480px) {
  .refinancing-process-section {
    padding: 2rem 0;
  }

  .refinancing-process-title {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
  }

  .refinancing-process-description {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
  }

  .refinancing-process-steps {
    padding: 0 0.75rem;
    gap: 1.5rem;
  }


  .refinancing-process-image img {
    height: 180px;
  }

  .refinancing-process-content .bg-white {
    padding: 1.25rem;
  }

  .refinancing-process-step-title {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
  }

  .refinancing-process-step-description {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .refinancing-process-step-list li {
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
  }

  .refinancing-process-image:hover {
    transform: none;
  }

  .refinancing-process-content:hover {
    transform: none;
  }

  .refinancing-process-content:hover .refinancing-process-step-title {
    transform: none;
  }

  .refinancing-process-step-list li:hover {
    transform: none;
  }
}

/* Mortgage Refinance Calculator Section - 3D Attractive Design */
.calculator-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 45%, #ffffff 100%);
  position: relative;
  overflow: hidden;
  padding: 4rem 0;
}

.calculator-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0) 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0) 60%);
  animation: calculatorBackgroundFloat 20s ease-in-out infinite;
}

.calculator-section::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    linear-gradient(45deg, transparent 30%, rgba(59, 130, 246, 0.03) 50%, transparent 70%);
  animation: calculatorShimmer 15s linear infinite;
}

@keyframes calculatorBackgroundFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(1deg);
  }
  66% {
    transform: translateY(10px) rotate(-1deg);
  }
}

@keyframes calculatorShimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.calculator-title {
  color: #1f2937;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: calculatorTitleGlow 3s ease-in-out infinite alternate;
  position: relative;
  z-index: 2;
}

@keyframes calculatorTitleGlow {
  0% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 20px rgba(59, 130, 246, 0.2);
  }
  100% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 30px rgba(59, 130, 246, 0.4);
  }
}

.calculator-description {
  color: #6b7280;
  font-size: 1.125rem;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 2;
}

.calculator-form-container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Tool Form Styles - 3D Design */
.tool-form {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: perspective(1000px) rotateX(2deg);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.tool-form:hover {
  transform: perspective(1000px) rotateX(0deg) translateY(-10px);
  box-shadow:
    0 35px 70px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.tool-form__frame {
  padding: 0;
  position: relative;
}

/* Step Titles - 3D Design */
.mc-step-title {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  padding: 1.5rem 2rem;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.mc-step-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.mc-step-title:hover::before {
  left: 100%;
}

.mc-step-title:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-2px);
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.mc-step-title.callout.primary.border-none {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border: none;
  border-radius: 0;
}

/* Step Body - 3D Design */
.mc-step-body {
  padding: 2rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
  backdrop-filter: blur(10px);
  position: relative;
  transition: all 0.3s ease;
}

.mc-step-body:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  transform: translateY(-1px);
}

.mc-step-body.display-block {
  display: block;
}

/* Grid Layout */
.grid-x {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.cell {
  flex: 1;
  padding: 0 0.5rem;
}

.cell.medium-4 {
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.cell.medium-8 {
  flex: 0 0 66.66667%;
  max-width: 66.66667%;
}

.cell.auto {
  flex: 1;
}

.cell.shrink {
  flex: 0 0 auto;
}

.cell.medium-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Form Elements - 3D Design */
label {
  display: block;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

label:hover {
  color: #3b82f6;
  transform: translateX(2px);
}

.refinance_calc_input,
select {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 2px solid rgba(209, 213, 219, 0.5);
  border-radius: 12px;
  font-size: 0.9rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
}

.refinance_calc_input:hover,
select:hover {
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-2px);
  box-shadow:
    0 8px 15px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.refinance_calc_input:focus,
select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.1),
    0 8px 15px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.95);
}

/* Radio Buttons - 3D Design */
.radio {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0.75rem 1rem;
  border: 2px solid rgba(209, 213, 219, 0.5);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  font-size: 0.9rem;
  margin-right: 0.75rem;
  margin-bottom: 0.5rem;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.radio::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  transition: left 0.3s ease;
}

.radio:hover::before {
  left: 100%;
}
.radio-options .radio-option{
  margin-bottom: 0;
}
.radio:hover {
  border-color: rgba(59, 130, 246, 0.7);
  background: rgba(59, 130, 246, 0.05);
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.radio input[type="radio"] {
  margin-right: 0.75rem;
  accent-color: #3b82f6;
  transform: scale(1.2);
}

.radio__text {
  font-weight: 600;
  color: #374151;
  transition: all 0.3s ease;
}

.radio input[type="radio"]:checked + .radio__text {
  color: #3b82f6;
  font-weight: 700;
}

.radio:has(input[type="radio"]:checked) {
  border-color: #3b82f6;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
  box-shadow:
    0 4px 8px rgba(59, 130, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* Form Rows */
.mc-form-row {
  margin-bottom: 1rem;
}

.mc-form-row span {
  font-weight: 500;
  color: #374151;
  font-size: 0.875rem;
}

/* Hidden Elements */
.hidden {
  display: none;
}

/* Grid Margins */
.grid-margin-x {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.grid-margin-x > .cell {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Utility Classes */
._mtmb10 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.large-offset-4 {
  margin-left: 33.33333%;
}

/* Button Group - 3D Design */
.button-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 0;
}

.button-group.align-center {
  justify-content: center;
}

.button {
  padding: 1rem 2rem;
  border: none;
  border-radius: 16px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: perspective(1000px) rotateX(0deg);
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.button:hover::before {
  left: 100%;
}

.button:hover {
  transform: perspective(1000px) rotateX(-5deg) translateY(-4px);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button:active {
  transform: perspective(1000px) rotateX(0deg) translateY(-2px);
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.mcp-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.mcp-btn:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
}

.mcp-btn__email {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.mcp-btn__email:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.mcp-btn__contact {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

/* Spinner - 3D Design */
.sk-cube-grid {
  width: 50px;
  height: 50px;
  margin: 2rem auto;
  perspective: 200px;
}

.sk-cube {
  width: 33%;
  height: 33%;
  background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
  float: left;
  border-radius: 4px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.sk-cube1 { animation-delay: 0.2s; }
.sk-cube2 { animation-delay: 0.3s; }
.sk-cube3 { animation-delay: 0.4s; }
.sk-cube4 { animation-delay: 0.1s; }
.sk-cube5 { animation-delay: 0.2s; }
.sk-cube6 { animation-delay: 0.3s; }
.sk-cube7 { animation-delay: 0s; }
.sk-cube8 { animation-delay: 0.1s; }
.sk-cube9 { animation-delay: 0.2s; }

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    transform: scale3D(1, 1, 1) rotateX(0deg) rotateY(0deg);
  }
  35% {
    transform: scale3D(0, 0, 1) rotateX(180deg) rotateY(180deg);
  }
}

/* Additional 3D Effects */
.mc-form-row span {
  font-weight: 600;
  color: #374151;
  font-size: 0.9rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.mc-form-row:hover span {
  color: #3b82f6;
  transform: translateX(2px);
}

/* Floating Animation for Form Elements */
@keyframes calculatorFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-2px);
  }
}

.grid-x {
  animation: calculatorFloat 6s ease-in-out infinite;
}

.grid-x:nth-child(2n) {
  animation-delay: 1s;
}

.grid-x:nth-child(3n) {
  animation-delay: 2s;
}

/* Responsive Design - 3D Effects */
@media (max-width: 768px) {
  .calculator-section {
    padding: 2rem 0;
  }

  .tool-form {
    transform: perspective(1000px) rotateX(0deg);
    border-radius: 16px;
  }

  .tool-form:hover {
    transform: perspective(1000px) rotateX(0deg) translateY(-5px);
  }

  .cell.medium-4,
  .cell.medium-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .mc-step-title {
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
  }

  .mc-step-body {
    padding: 1.5rem;
  }

  .grid-x {
    flex-direction: column;
    animation: none;
  }

  .cell {
    padding: 0.5rem 0;
  }

  .button-group {
    flex-direction: column;
    gap: 0.75rem;
  }

  .button {
    width: 100%;
    margin-bottom: 0.5rem;
    transform: perspective(1000px) rotateX(0deg);
  }

  .button:hover {
    transform: perspective(1000px) rotateX(0deg) translateY(-2px);
  }

  .large-offset-4 {
    margin-left: 0;
  }

  .refinance_calc_input,
  select {
    padding: 0.875rem 1rem;
  }

  .radio {
    padding: 0.6rem 0.8rem;
    margin-right: 0.5rem;
  }
}

@media (max-width: 480px) {
  .calculator-section {
    padding: 1.5rem 0;
  }

  .calculator-title {
    font-size: 2rem;
  }

  .calculator-description {
    font-size: 1rem;
  }

  .tool-form {
    border-radius: 12px;
  }

  .mc-step-title {
    padding: 0.875rem 1rem;
    font-size: 1rem;
  }

  .mc-step-body {
    padding: 1rem;
  }

  .refinance_calc_input,
  select {
    padding: 0.75rem 0.875rem;
    font-size: 0.85rem;
    border-radius: 8px;
  }

  .radio {
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    border-radius: 8px;
  }

  .button {
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
    border-radius: 12px;
  }

  .sk-cube-grid {
    width: 40px;
    height: 40px;
  }
}

/* Common Refinancing Scenarios Section - Unique Classes */
.refinancing-scenarios-unique-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 45%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.refinancing-scenarios-unique-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0) 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0) 60%);
  animation: refinancingScenariosUniqueBackgroundFloat 20s ease-in-out infinite;
}

.refinancing-scenarios-unique-section::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    linear-gradient(45deg, transparent 30%, rgba(59, 130, 246, 0.03) 50%, transparent 70%);
  animation: refinancingScenariosUniqueShimmer 15s linear infinite;
}

@keyframes refinancingScenariosUniqueBackgroundFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(1deg);
  }
  66% {
    transform: translateY(10px) rotate(-1deg);
  }
}

@keyframes refinancingScenariosUniqueShimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.refinancing-scenarios-unique-title {
  color: #1f2937;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: refinancingScenariosUniqueTitleGlow 3s ease-in-out infinite alternate;
  position: relative;
  z-index: 2;
}

@keyframes refinancingScenariosUniqueTitleGlow {
  0% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 20px rgba(59, 130, 246, 0.2);
  }
  100% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 30px rgba(59, 130, 246, 0.4);
  }
}

.refinancing-scenarios-unique-description {
  color: #6b7280;
  font-size: 1.125rem;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 2;
}

.refinancing-scenarios-unique-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(229, 231, 235, 0.5);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: perspective(1000px) rotateX(1deg);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  margin-bottom: 2rem;
  animation: refinancingScenariosUniqueCardFloat 6s ease-in-out infinite;
}

.refinancing-scenarios-unique-card:nth-child(2n) {
  animation-delay: 1s;
}

.refinancing-scenarios-unique-card:nth-child(3n) {
  animation-delay: 2s;
}

@keyframes refinancingScenariosUniqueCardFloat {
  0%, 100% {
    transform: perspective(1000px) rotateX(1deg) translateY(0px);
  }
  50% {
    transform: perspective(1000px) rotateX(1deg) translateY(-5px);
  }
}

.refinancing-scenarios-unique-card:hover {
  transform: perspective(1000px) rotateX(0deg) translateY(-8px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation-play-state: paused;
}

.refinancing-scenarios-unique-content {
  padding: 2rem;
  position: relative;
}

.refinancing-scenarios-unique-card-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1rem;
  margin-top: 2rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.refinancing-scenarios-unique-card-title:first-child {
  margin-top: 0;
}

.refinancing-scenarios-unique-card-title:hover {
  color: #3b82f6;
  transform: translateX(5px);
}

.refinancing-scenarios-unique-icon {
  font-size: 1.75rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
}

.refinancing-scenarios-unique-card-title:hover .refinancing-scenarios-unique-icon {
  transform: scale(1.1) rotate(5deg);
}

.refinancing-scenarios-unique-text {
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.refinancing-scenarios-unique-text:hover {
  color: #374151;
}

.refinancing-scenarios-unique-example {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.refinancing-scenarios-unique-example:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%);
  border-color: rgba(59, 130, 246, 0.2);
  transform: translateY(-2px);
}

.refinancing-scenarios-unique-example-label {
  color: #374151;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.refinancing-scenarios-unique-considerations-label,
.refinancing-scenarios-unique-features-label,
.refinancing-scenarios-unique-benefits-label {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
  transition: all 0.3s ease;
}

.refinancing-scenarios-unique-considerations-label:hover,
.refinancing-scenarios-unique-features-label:hover,
.refinancing-scenarios-unique-benefits-label:hover {
  color: #3b82f6;
  transform: translateX(3px);
}

.refinancing-scenarios-unique-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.refinancing-scenarios-unique-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.5;
  transition: all 0.3s ease;
}

.refinancing-scenarios-unique-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #10b981;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.refinancing-scenarios-unique-list li:hover {
  color: #374151;
  transform: translateX(5px);
}

.refinancing-scenarios-unique-list li:hover::before {
  color: #059669;
  transform: scale(1.2);
}

.refinancing-scenarios-unique-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #3b82f6;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.refinancing-scenarios-unique-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  transition: left 0.5s ease;
}

.refinancing-scenarios-unique-link:hover::before {
  left: 100%;
}

.refinancing-scenarios-unique-link:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.refinancing-scenarios-unique-link::after {
  content: '→';
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.refinancing-scenarios-unique-link:hover::after {
  transform: translateX(4px);
}

/* Responsive Design for Unique Scenarios Section */
@media (max-width: 768px) {
  .refinancing-scenarios-unique-title {
    font-size: 2.5rem;
  }

  .refinancing-scenarios-unique-description {
    font-size: 1rem;
  }

  .refinancing-scenarios-unique-card {
    transform: perspective(1000px) rotateX(0deg);
    border-radius: 16px;
    animation: none;
  }

  .refinancing-scenarios-unique-card:hover {
    transform: perspective(1000px) rotateX(0deg) translateY(-4px);
  }

  .refinancing-scenarios-unique-content {
    padding: 1.5rem;
  }

  .refinancing-scenarios-unique-card-title {
    font-size: 1.25rem;
  }

  .refinancing-scenarios-unique-icon {
    font-size: 1.5rem;
  }

  .refinancing-scenarios-unique-example {
    padding: 1rem;
  }

  .refinancing-scenarios-unique-link {
    padding: 0.625rem 1.25rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .refinancing-scenarios-unique-title {
    font-size: 2rem;
  }

  .refinancing-scenarios-unique-description {
    font-size: 0.95rem;
  }

  .refinancing-scenarios-unique-card {
    border-radius: 12px;
  }

  .refinancing-scenarios-unique-content {
    padding: 1.25rem;
  }

  .refinancing-scenarios-unique-card-title {
    font-size: 1.125rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .refinancing-scenarios-unique-icon {
    font-size: 1.25rem;
  }

  .refinancing-scenarios-unique-example {
    padding: 0.875rem;
  }

  .refinancing-scenarios-unique-link {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }
}

/* Additional Mortgages Section */
.additional-mortgages-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 45%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.additional-mortgages-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0) 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0) 60%);
  animation: additionalMortgagesBackgroundFloat 20s ease-in-out infinite;
}

.additional-mortgages-section::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    linear-gradient(45deg, transparent 30%, rgba(59, 130, 246, 0.03) 50%, transparent 70%);
  animation: additionalMortgagesShimmer 15s linear infinite;
}

@keyframes additionalMortgagesBackgroundFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(1deg);
  }
  66% {
    transform: translateY(10px) rotate(-1deg);
  }
}

@keyframes additionalMortgagesShimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.additional-mortgages-title {
  color: #1f2937;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: additionalMortgagesTitleGlow 3s ease-in-out infinite alternate;
  position: relative;
  z-index: 2;
}

@keyframes additionalMortgagesTitleGlow {
  0% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 20px rgba(59, 130, 246, 0.2);
  }
  100% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 30px rgba(59, 130, 246, 0.4);
  }
}

.additional-mortgages-description {
  color: #6b7280;
  font-size: 1.125rem;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 2;
}

.additional-mortgages-benefits-card,
.additional-mortgages-equity-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(229, 231, 235, 0.5);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: perspective(1000px) rotateX(1deg);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  animation: additionalMortgagesCardFloat 6s ease-in-out infinite;
}

.additional-mortgages-equity-card {
  animation-delay: 1s;
}

@keyframes additionalMortgagesCardFloat {
  0%, 100% {
    transform: perspective(1000px) rotateX(1deg) translateY(0px);
  }
  50% {
    transform: perspective(1000px) rotateX(1deg) translateY(-5px);
  }
}

.additional-mortgages-benefits-card:hover,
.additional-mortgages-equity-card:hover {
  transform: perspective(1000px) rotateX(0deg) translateY(-8px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation-play-state: paused;
}

.additional-mortgages-benefits-card {
  padding: 2rem;
}

.additional-mortgages-equity-card {
  padding: 2rem;
}

.additional-mortgages-benefits-title,
.additional-mortgages-equity-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.additional-mortgages-benefits-title:hover,
.additional-mortgages-equity-title:hover {
  color: #3b82f6;
  transform: translateX(5px);
}

.additional-mortgages-icon {
  font-size: 1.75rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
}

.additional-mortgages-benefits-title:hover .additional-mortgages-icon,
.additional-mortgages-equity-title:hover .additional-mortgages-icon {
  transform: scale(1.1) rotate(5deg);
}

.additional-mortgages-benefits-intro,
.additional-mortgages-equity-description {
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.additional-mortgages-benefits-intro:hover,
.additional-mortgages-equity-description:hover {
  color: #374151;
}

.additional-mortgages-benefits-subtitle {
  color: #374151;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.additional-mortgages-benefits-subtitle:hover {
  color: #1f2937;
}

.additional-mortgages-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.additional-mortgages-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
  transition: all 0.3s ease;
  position: relative;
}

.additional-mortgages-benefit-item:last-child {
  border-bottom: none;
}

.additional-mortgages-benefit-item:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
  padding-left: 1rem;
  border-radius: 12px;
  transform: translateX(5px);
}

.additional-mortgages-benefit-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.additional-mortgages-benefit-item:hover .additional-mortgages-benefit-icon {
  transform: scale(1.2) rotate(10deg);
}

.additional-mortgages-benefit-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6 0%, #10b981 100%);
  transition: width 0.3s ease;
}

.additional-mortgages-benefit-item:hover::before {
  width: 4px;
}

.additional-mortgages-example {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  position: relative;
  overflow: hidden;
}

.additional-mortgages-example::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  animation: additionalMortgagesExampleShimmer 3s ease-in-out infinite;
}

@keyframes additionalMortgagesExampleShimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.additional-mortgages-example-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}

.additional-mortgages-example-icon {
  font-size: 1.25rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.additional-mortgages-example-content {
  position: relative;
  z-index: 2;
}

.additional-mortgages-example-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  transition: all 0.3s ease;
}

.additional-mortgages-example-item:hover {
  background: rgba(255, 255, 255, 0.5);
  padding-left: 1rem;
  border-radius: 8px;
}

.additional-mortgages-example-label {
  color: #6b7280;
  font-weight: 500;
}

.additional-mortgages-example-value {
  color: #1f2937;
  font-weight: 700;
  font-size: 1.1rem;
}

.additional-mortgages-example-divider {
  height: 2px;
  background: linear-gradient(90deg, #3b82f6 0%, #10b981 100%);
  margin: 1rem 0;
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}

.additional-mortgages-example-divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: additionalMortgagesDividerShimmer 2s ease-in-out infinite;
}

@keyframes additionalMortgagesDividerShimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.additional-mortgages-example-total {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 0.5rem;
}

.additional-mortgages-example-total .additional-mortgages-example-label {
  color: #1f2937;
  font-weight: 600;
}

.additional-mortgages-example-total .additional-mortgages-example-value {
  color: #059669;
  font-weight: 800;
  font-size: 1.25rem;
}

.additional-mortgages-equity-note {
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.5;
  font-style: italic;
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(249, 250, 251, 0.8);
  border-left: 4px solid #3b82f6;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.additional-mortgages-equity-note:hover {
  background: rgba(249, 250, 251, 1);
  border-left-color: #10b981;
  transform: translateX(5px);
}

/* Responsive Design for Additional Mortgages Section */
@media (max-width: 768px) {
  .additional-mortgages-title {
    font-size: 2.5rem;
  }

  .additional-mortgages-description {
    font-size: 1rem;
  }

  .additional-mortgages-benefits-card,
  .additional-mortgages-equity-card {
    transform: perspective(1000px) rotateX(0deg);
    border-radius: 16px;
    animation: none;
  }

  .additional-mortgages-benefits-card:hover,
  .additional-mortgages-equity-card:hover {
    transform: perspective(1000px) rotateX(0deg) translateY(-4px);
  }

  .additional-mortgages-benefits-card,
  .additional-mortgages-equity-card {
    padding: 1.5rem;
  }

  .additional-mortgages-benefits-title,
  .additional-mortgages-equity-title {
    font-size: 1.25rem;
  }

  .additional-mortgages-icon {
    font-size: 1.5rem;
  }

  .additional-mortgages-benefit-item {
    padding: 0.75rem 0;
  }

  .additional-mortgages-benefit-icon {
    font-size: 1.25rem;
  }

  .additional-mortgages-example {
    padding: 1.25rem;
  }
}

@media (max-width: 480px) {
  .additional-mortgages-title {
    font-size: 2rem;
  }

  .additional-mortgages-description {
    font-size: 0.95rem;
  }

  .additional-mortgages-benefits-card,
  .additional-mortgages-equity-card {
    border-radius: 12px;
  }

  .additional-mortgages-benefits-card,
  .additional-mortgages-equity-card {
    padding: 1.25rem;
  }

  .additional-mortgages-benefits-title,
  .additional-mortgages-equity-title {
    font-size: 1.125rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .additional-mortgages-icon {
    font-size: 1.25rem;
  }

  .additional-mortgages-benefit-item {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
  }

  .additional-mortgages-benefit-icon {
    font-size: 1.125rem;
  }

  .additional-mortgages-example {
    padding: 1rem;
  }

  .additional-mortgages-example-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

/* Comparing Mortgage Options Section */
.comparing-mortgage-options-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 45%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.comparing-mortgage-options-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0) 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0) 60%);
  animation: comparingMortgageOptionsBackgroundFloat 20s ease-in-out infinite;
}

.comparing-mortgage-options-section::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    linear-gradient(45deg, transparent 30%, rgba(59, 130, 246, 0.03) 50%, transparent 70%);
  animation: comparingMortgageOptionsShimmer 15s linear infinite;
}

@keyframes comparingMortgageOptionsBackgroundFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(1deg);
  }
  66% {
    transform: translateY(10px) rotate(-1deg);
  }
}

@keyframes comparingMortgageOptionsShimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.comparing-mortgage-options-title {
  color: #1f2937;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: comparingMortgageOptionsTitleGlow 3s ease-in-out infinite alternate;
  position: relative;
  z-index: 2;
}

@keyframes comparingMortgageOptionsTitleGlow {
  0% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 20px rgba(59, 130, 246, 0.2);
  }
  100% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 30px rgba(59, 130, 246, 0.4);
  }
}

.comparing-mortgage-options-comparison-card,
.comparing-mortgage-options-reasons-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(229, 231, 235, 0.5);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: perspective(1000px) rotateX(1deg);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  animation: comparingMortgageOptionsCardFloat 6s ease-in-out infinite;
  padding: 2rem;
}

.comparing-mortgage-options-reasons-card {
  animation-delay: 1s;
}

@keyframes comparingMortgageOptionsCardFloat {
  0%, 100% {
    transform: perspective(1000px) rotateX(1deg) translateY(0px);
  }
  50% {
    transform: perspective(1000px) rotateX(1deg) translateY(-5px);
  }
}

.comparing-mortgage-options-comparison-card:hover,
.comparing-mortgage-options-reasons-card:hover {
  transform: perspective(1000px) rotateX(0deg) translateY(-8px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation-play-state: paused;
}

.comparing-mortgage-options-comparison-title,
.comparing-mortgage-options-reasons-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.comparing-mortgage-options-comparison-title:hover,
.comparing-mortgage-options-reasons-title:hover {
  color: #3b82f6;
  transform: translateX(5px);
}

.comparing-mortgage-options-icon {
  font-size: 1.75rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
}

.comparing-mortgage-options-comparison-title:hover .comparing-mortgage-options-icon,
.comparing-mortgage-options-reasons-title:hover .comparing-mortgage-options-icon {
  transform: scale(1.1) rotate(5deg);
}

.comparing-mortgage-options-paragraph,
.comparing-mortgage-options-reasons-paragraph {
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.comparing-mortgage-options-paragraph:hover,
.comparing-mortgage-options-reasons-paragraph:hover {
  color: #374151;
}

.comparing-mortgage-options-benefits {
  margin-top: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.comparing-mortgage-options-benefits::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  animation: comparingMortgageOptionsBenefitsShimmer 3s ease-in-out infinite;
}

@keyframes comparingMortgageOptionsBenefitsShimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.comparing-mortgage-options-benefits-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.comparing-mortgage-options-benefits-icon {
  font-size: 1.25rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.comparing-mortgage-options-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  position: relative;
  z-index: 2;
}

.comparing-mortgage-options-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(229, 231, 235, 0.5);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.comparing-mortgage-options-benefit-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  transition: left 0.5s ease;
}

.comparing-mortgage-options-benefit-item:hover::before {
  left: 100%;
}

.comparing-mortgage-options-benefit-item:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.comparing-mortgage-options-benefit-icon-container {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.comparing-mortgage-options-benefit-item:hover .comparing-mortgage-options-benefit-icon-container {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 6px 12px rgba(59, 130, 246, 0.4);
}

.comparing-mortgage-options-benefit-emoji {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.comparing-mortgage-options-benefit-content {
  flex: 1;
}

.comparing-mortgage-options-benefit-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.comparing-mortgage-options-benefit-item:hover .comparing-mortgage-options-benefit-title {
  color: #3b82f6;
}

.comparing-mortgage-options-benefit-text {
  font-size: 0.9rem;
  color: #6b7280;
  line-height: 1.4;
  transition: all 0.3s ease;
}

.comparing-mortgage-options-benefit-item:hover .comparing-mortgage-options-benefit-text {
  color: #374151;
}

/* Additional Benefits Section */
.comparing-mortgage-options-additional-benefits {
  margin-top: 3rem;
  position: relative;
  z-index: 2;
}

.comparing-mortgage-options-additional-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
}

.comparing-mortgage-options-additional-benefit-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(229, 231, 235, 0.5);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: perspective(1000px) rotateX(1deg);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  animation: comparingMortgageOptionsAdditionalCardFloat 6s ease-in-out infinite;
  padding: 2rem;
}

.comparing-mortgage-options-additional-benefit-card:nth-child(2n) {
  animation-delay: 1s;
}

@keyframes comparingMortgageOptionsAdditionalCardFloat {
  0%, 100% {
    transform: perspective(1000px) rotateX(1deg) translateY(0px);
  }
  50% {
    transform: perspective(1000px) rotateX(1deg) translateY(-5px);
  }
}

.comparing-mortgage-options-additional-benefit-card:hover {
  transform: perspective(1000px) rotateX(0deg) translateY(-8px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation-play-state: paused;
}

.comparing-mortgage-options-additional-benefit-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.comparing-mortgage-options-additional-benefit-title:hover {
  color: #3b82f6;
  transform: translateX(5px);
}

.comparing-mortgage-options-additional-benefit-icon {
  font-size: 1.75rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
}

.comparing-mortgage-options-additional-benefit-title:hover .comparing-mortgage-options-additional-benefit-icon {
  transform: scale(1.1) rotate(5deg);
}

.comparing-mortgage-options-additional-benefit-description {
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.comparing-mortgage-options-additional-benefit-description:hover {
  color: #374151;
}

.comparing-mortgage-options-additional-benefit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comparing-mortgage-options-additional-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
  transition: all 0.3s ease;
  position: relative;
}

.comparing-mortgage-options-additional-benefit-item:last-child {
  border-bottom: none;
}

.comparing-mortgage-options-additional-benefit-item:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%);
  padding-left: 1rem;
  border-radius: 12px;
  transform: translateX(5px);
}

.comparing-mortgage-options-additional-benefit-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.comparing-mortgage-options-additional-benefit-item:hover .comparing-mortgage-options-additional-benefit-check {
  transform: scale(1.2) rotate(10deg);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
}

.comparing-mortgage-options-additional-benefit-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6 0%, #10b981 100%);
  transition: width 0.3s ease;
}

.comparing-mortgage-options-additional-benefit-item:hover::before {
  width: 4px;
}

/* Responsive Design for Comparing Mortgage Options Section */
@media (max-width: 768px) {
  .comparing-mortgage-options-title {
    font-size: 2.5rem;
  }

  .comparing-mortgage-options-comparison-card,
  .comparing-mortgage-options-reasons-card,
  .comparing-mortgage-options-additional-benefit-card {
    transform: perspective(1000px) rotateX(0deg);
    border-radius: 16px;
    animation: none;
    padding: 1.5rem;
  }

  .comparing-mortgage-options-comparison-card:hover,
  .comparing-mortgage-options-reasons-card:hover,
  .comparing-mortgage-options-additional-benefit-card:hover {
    transform: perspective(1000px) rotateX(0deg) translateY(-4px);
  }

  .comparing-mortgage-options-comparison-title,
  .comparing-mortgage-options-reasons-title,
  .comparing-mortgage-options-additional-benefit-title {
    font-size: 1.25rem;
  }

  .comparing-mortgage-options-icon,
  .comparing-mortgage-options-additional-benefit-icon {
    font-size: 1.5rem;
  }

  .comparing-mortgage-options-benefits-grid {
    grid-template-columns: 1fr;
  }

  .comparing-mortgage-options-additional-benefits-grid {
    grid-template-columns: 1fr;
  }

  .comparing-mortgage-options-benefit-item {
    padding: 0.75rem;
  }

  .comparing-mortgage-options-benefit-icon-container {
    width: 40px;
    height: 40px;
  }

  .comparing-mortgage-options-benefit-emoji {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .comparing-mortgage-options-title {
    font-size: 2rem;
  }

  .comparing-mortgage-options-comparison-card,
  .comparing-mortgage-options-reasons-card,
  .comparing-mortgage-options-additional-benefit-card {
    border-radius: 12px;
    padding: 1.25rem;
  }

  .comparing-mortgage-options-comparison-title,
  .comparing-mortgage-options-reasons-title,
  .comparing-mortgage-options-additional-benefit-title {
    font-size: 1.125rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .comparing-mortgage-options-icon,
  .comparing-mortgage-options-additional-benefit-icon {
    font-size: 1.25rem;
  }

  .comparing-mortgage-options-benefit-item {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
  }

  .comparing-mortgage-options-benefit-icon-container {
    width: 35px;
    height: 35px;
  }

  .comparing-mortgage-options-benefit-emoji {
    font-size: 1.125rem;
  }

  .comparing-mortgage-options-additional-benefit-item {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
  }

  .comparing-mortgage-options-additional-benefit-check {
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
  }
}

/* Mortgage Interest Rates Section */
.mortgage-interest-rates-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 45%, #ffffff 100%);
  position: relative;
  overflow: hidden;
  min-height: 600px;
  display: block;
  visibility: visible;
}

.mortgage-interest-rates-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0) 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0) 60%);
  animation: mortgageInterestRatesBackgroundFloat 20s ease-in-out infinite;
}

.mortgage-interest-rates-section::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    linear-gradient(45deg, transparent 30%, rgba(59, 130, 246, 0.03) 50%, transparent 70%);
  animation: mortgageInterestRatesShimmer 15s linear infinite;
}

@keyframes mortgageInterestRatesBackgroundFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(1deg);
  }
  66% {
    transform: translateY(10px) rotate(-1deg);
  }
}

@keyframes mortgageInterestRatesShimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.mortgage-interest-rates-title {
  color: #1f2937;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: mortgageInterestRatesTitleGlow 3s ease-in-out infinite alternate;
  position: relative;
  z-index: 2;
}

@keyframes mortgageInterestRatesTitleGlow {
  0% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 20px rgba(59, 130, 246, 0.2);
  }
  100% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 30px rgba(59, 130, 246, 0.4);
  }
}

.mortgage-interest-rates-description {
  color: #6b7280;
  font-size: 1.125rem;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 2;
}

.mortgage-rates-table-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(229, 231, 235, 0.5);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 2;
  margin-bottom: 3rem;
  display: block;
  visibility: visible;
  opacity: 1;
}

.mortgage-rates-table-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.mortgage-rates-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
  position: relative;
}

.mortgage-rates-header-row {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  position: relative;
}

.mortgage-rates-header-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: mortgageRatesHeaderShimmer 3s ease-in-out infinite;
}

@keyframes mortgageRatesHeaderShimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.mortgage-rates-header-cell {
  padding: 1.5rem 1rem;
  text-align: center;
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 2;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.mortgage-rates-header-cell:last-child {
  border-right: none;
}

.mortgage-rates-header-cell:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.mortgage-rates-header-icon {
  display: block;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.mortgage-rates-data-row {
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  position: relative;
}

.mortgage-rates-data-row:nth-child(even) {
  background: rgba(249, 250, 251, 0.8);
}

.mortgage-rates-data-row:hover {
  background: rgba(59, 130, 246, 0.05);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.mortgage-rates-term-cell {
  padding: 1.5rem 1rem;
  text-align: center;
  border-right: 1px solid rgba(229, 231, 235, 0.5);
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
}

.mortgage-rates-term-cell::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #3b82f6 0%, #10b981 100%);
}

.mortgage-rates-term-badge {
  display: inline-block;
  background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.mortgage-rates-data-row:hover .mortgage-rates-term-badge {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.4);
}

.mortgage-rates-rate-cell {
  padding: 1.5rem 1rem;
  text-align: center;
  border-right: 1px solid rgba(229, 231, 235, 0.5);
  position: relative;
  transition: all 0.3s ease;
}

.mortgage-rates-rate-cell:last-child {
  border-right: none;
}

.mortgage-rates-rate-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
  transition: all 0.3s ease;
}

.mortgage-rates-rate-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.mortgage-rates-fixed-rate {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
}

.mortgage-rates-fixed-rate .mortgage-rates-rate-value {
  color: #059669;
  text-shadow: 0 1px 2px rgba(5, 150, 105, 0.2);
}

.mortgage-rates-fixed-rate:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);
}

.mortgage-rates-fixed-rate:hover .mortgage-rates-rate-value {
  color: #047857;
  transform: scale(1.05);
}

.mortgage-rates-variable-rate {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
}

.mortgage-rates-variable-rate .mortgage-rates-rate-value {
  color: #2563eb;
  text-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}

.mortgage-rates-variable-rate:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
}

.mortgage-rates-variable-rate:hover .mortgage-rates-rate-value {
  color: #1d4ed8;
  transform: scale(1.05);
}

.mortgage-rates-private-1st-rate {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
}

.mortgage-rates-private-1st-rate .mortgage-rates-rate-value {
  color: #9333ea;
  text-shadow: 0 1px 2px rgba(147, 51, 234, 0.2);
}

.mortgage-rates-private-1st-rate:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(147, 51, 234, 0.15) 100%);
}

.mortgage-rates-private-1st-rate:hover .mortgage-rates-rate-value {
  color: #7c3aed;
  transform: scale(1.05);
}

.mortgage-rates-private-2nd-rate {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
}

.mortgage-rates-private-2nd-rate .mortgage-rates-rate-value {
  color: #dc2626;
  text-shadow: 0 1px 2px rgba(220, 38, 38, 0.2);
}

.mortgage-rates-private-2nd-rate:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);
}

.mortgage-rates-private-2nd-rate:hover .mortgage-rates-rate-value {
  color: #b91c1c;
  transform: scale(1.05);
}

.mortgage-rates-empty {
  background: rgba(243, 244, 246, 0.5);
}

.mortgage-rates-empty-text {
  color: #9ca3af;
  font-size: 1.25rem;
  font-weight: 300;
}


/* Responsive Design for Mortgage Interest Rates Section */
@media (max-width: 768px) {
  .mortgage-interest-rates-title {
    font-size: 2.5rem;
  }

  .mortgage-interest-rates-description {
    font-size: 1rem;
  }

  .mortgage-rates-table-container {
    border-radius: 16px;
  }

  .mortgage-rates-table {
    min-width: 600px;
  }

  .mortgage-rates-header-cell {
    padding: 1rem 0.75rem;
    font-size: 0.75rem;
  }

  .mortgage-rates-header-icon {
    font-size: 1rem;
    margin-bottom: 0.25rem;
  }

  .mortgage-rates-term-cell,
  .mortgage-rates-rate-cell {
    padding: 1rem 0.75rem;
  }

  .mortgage-rates-rate-value {
    font-size: 1.25rem;
  }

  .mortgage-rates-rate-label {
    font-size: 0.7rem;
  }

}

@media (max-width: 480px) {
  .mortgage-interest-rates-title {
    font-size: 2rem;
  }

  .mortgage-interest-rates-description {
    font-size: 0.95rem;
  }

  .mortgage-rates-table-container {
    border-radius: 12px;
  }

  .mortgage-rates-table {
    min-width: 500px;
  }

  .mortgage-rates-header-cell {
    padding: 0.75rem 0.5rem;
    font-size: 0.7rem;
  }

  .mortgage-rates-header-icon {
    font-size: 0.875rem;
  }

  .mortgage-rates-term-cell,
  .mortgage-rates-rate-cell {
    padding: 0.75rem 0.5rem;
  }

  .mortgage-rates-rate-value {
    font-size: 1.125rem;
  }

  .mortgage-rates-rate-label {
    font-size: 0.65rem;
  }

}

/* Exploring Second Mortgage Options Section */
.exploring-second-mortgage-options-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 45%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.exploring-second-mortgage-options-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0) 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0) 60%);
  animation: exploringSecondMortgageOptionsBackgroundFloat 20s ease-in-out infinite;
}

.exploring-second-mortgage-options-section::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    linear-gradient(45deg, transparent 30%, rgba(59, 130, 246, 0.03) 50%, transparent 70%);
  animation: exploringSecondMortgageOptionsShimmer 15s linear infinite;
}

@keyframes exploringSecondMortgageOptionsBackgroundFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(1deg);
  }
  66% {
    transform: translateY(10px) rotate(-1deg);
  }
}

@keyframes exploringSecondMortgageOptionsShimmer {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.exploring-second-mortgage-options-title {
  color: #1f2937;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: exploringSecondMortgageOptionsTitleGlow 3s ease-in-out infinite alternate;
  position: relative;
  z-index: 2;
}

@keyframes exploringSecondMortgageOptionsTitleGlow {
  0% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 20px rgba(59, 130, 246, 0.2);
  }
  100% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 30px rgba(59, 130, 246, 0.4);
  }
}

.exploring-second-mortgage-options-description {
  color: #6b7280;
  font-size: 1.125rem;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 2;
}

.exploring-second-mortgage-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
}

.exploring-second-mortgage-options-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(229, 231, 235, 0.5);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
}

.exploring-second-mortgage-options-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  transition: left 0.5s ease;
}

.exploring-second-mortgage-options-card:hover::before {
  left: 100%;
}

.exploring-second-mortgage-options-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.exploring-second-mortgage-options-equity-loan-card {
  border-left: 4px solid #10b981;
}

.exploring-second-mortgage-options-heloc-card {
  border-left: 4px solid #3b82f6;
}

.exploring-second-mortgage-options-card-content {
  padding: 2rem;
  position: relative;
  z-index: 2;
}

.exploring-second-mortgage-options-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.exploring-second-mortgage-options-card-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.exploring-second-mortgage-options-card:hover .exploring-second-mortgage-options-card-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.exploring-second-mortgage-options-icon-text {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.exploring-second-mortgage-options-card-title {
  color: #1f2937;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  transition: all 0.3s ease;
}

.exploring-second-mortgage-options-card:hover .exploring-second-mortgage-options-card-title {
  color: #3b82f6;
  transform: translateY(-2px);
}

.exploring-second-mortgage-options-card-description {
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.exploring-second-mortgage-options-card:hover .exploring-second-mortgage-options-card-description {
  color: #374151;
}

.exploring-second-mortgage-options-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.exploring-second-mortgage-options-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.exploring-second-mortgage-options-benefit-item:hover {
  background: rgba(59, 130, 246, 0.05);
  transform: translateX(5px);
}

.exploring-second-mortgage-options-benefit-icon {
  font-size: 1rem;
  margin-top: 0.125rem;
  transition: all 0.3s ease;
}

.exploring-second-mortgage-options-benefit-item:hover .exploring-second-mortgage-options-benefit-icon {
  transform: scale(1.2);
}

.exploring-second-mortgage-options-benefit-text {
  color: #374151;
  font-size: 0.95rem;
  line-height: 1.5;
  transition: all 0.3s ease;
}

.exploring-second-mortgage-options-benefit-item:hover .exploring-second-mortgage-options-benefit-text {
  color: #1f2937;
  font-weight: 500;
}

.exploring-second-mortgage-options-card-note {
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.6;
  font-style: italic;
  padding: 1rem;
  background: rgba(249, 250, 251, 0.8);
  border-radius: 12px;
  border-left: 3px solid #3b82f6;
  transition: all 0.3s ease;
}

.exploring-second-mortgage-options-card:hover .exploring-second-mortgage-options-card-note {
  background: rgba(59, 130, 246, 0.05);
  border-left-color: #10b981;
  color: #374151;
}

.exploring-second-mortgage-options-bad-credit-section {
  position: relative;
  z-index: 2;
}

.exploring-second-mortgage-options-bad-credit-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(229, 231, 235, 0.5);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
  border-left: 4px solid #f59e0b;
}

.exploring-second-mortgage-options-bad-credit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.1), transparent);
  transition: left 0.5s ease;
}

.exploring-second-mortgage-options-bad-credit-card:hover::before {
  left: 100%;
}

.exploring-second-mortgage-options-bad-credit-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.exploring-second-mortgage-options-bad-credit-content {
  padding: 2rem;
  position: relative;
  z-index: 2;
}

.exploring-second-mortgage-options-bad-credit-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.exploring-second-mortgage-options-bad-credit-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  transition: all 0.3s ease;
}

.exploring-second-mortgage-options-bad-credit-card:hover .exploring-second-mortgage-options-bad-credit-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

.exploring-second-mortgage-options-bad-credit-icon-text {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.exploring-second-mortgage-options-bad-credit-title {
  color: #1f2937;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  transition: all 0.3s ease;
}

.exploring-second-mortgage-options-bad-credit-card:hover .exploring-second-mortgage-options-bad-credit-title {
  color: #f59e0b;
  transform: translateY(-2px);
}

.exploring-second-mortgage-options-bad-credit-text {
  color: #6b7280;
}

.exploring-second-mortgage-options-bad-credit-paragraph {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.exploring-second-mortgage-options-bad-credit-paragraph:last-child {
  margin-bottom: 0;
}

.exploring-second-mortgage-options-bad-credit-card:hover .exploring-second-mortgage-options-bad-credit-paragraph {
  color: #374151;
}

/* Responsive Design for Exploring Second Mortgage Options Section */
@media (max-width: 768px) {
  .exploring-second-mortgage-options-title {
    font-size: 2.5rem;
  }

  .exploring-second-mortgage-options-description {
    font-size: 1rem;
  }

  .exploring-second-mortgage-options-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .exploring-second-mortgage-options-card-content {
    padding: 1.5rem;
  }

  .exploring-second-mortgage-options-card-header {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .exploring-second-mortgage-options-card-icon {
    width: 50px;
    height: 50px;
  }

  .exploring-second-mortgage-options-icon-text {
    font-size: 1.25rem;
  }

  .exploring-second-mortgage-options-card-title {
    font-size: 1.25rem;
  }

  .exploring-second-mortgage-options-bad-credit-content {
    padding: 1.5rem;
  }

  .exploring-second-mortgage-options-bad-credit-header {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .exploring-second-mortgage-options-bad-credit-icon {
    width: 50px;
    height: 50px;
  }

  .exploring-second-mortgage-options-bad-credit-icon-text {
    font-size: 1.25rem;
  }

  .exploring-second-mortgage-options-bad-credit-title {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .exploring-second-mortgage-options-title {
    font-size: 2rem;
  }

  .exploring-second-mortgage-options-description {
    font-size: 0.95rem;
  }

  .exploring-second-mortgage-options-grid {
    gap: 1rem;
  }

  .exploring-second-mortgage-options-card-content {
    padding: 1.25rem;
  }

  .exploring-second-mortgage-options-card-icon {
    width: 45px;
    height: 45px;
  }

  .exploring-second-mortgage-options-icon-text {
    font-size: 1.125rem;
  }

  .exploring-second-mortgage-options-card-title {
    font-size: 1.125rem;
  }

  .exploring-second-mortgage-options-benefit-item {
    gap: 0.5rem;
  }

  .exploring-second-mortgage-options-benefit-text {
    font-size: 0.9rem;
  }

  .exploring-second-mortgage-options-bad-credit-content {
    padding: 1.25rem;
  }

  .exploring-second-mortgage-options-bad-credit-icon {
    width: 45px;
    height: 45px;
  }

  .exploring-second-mortgage-options-bad-credit-icon-text {
    font-size: 1.125rem;
  }

  .exploring-second-mortgage-options-bad-credit-title {
    font-size: 1.125rem;
  }

  .exploring-second-mortgage-options-bad-credit-paragraph {
    font-size: 0.95rem;
  }
}

  /* Professional Responsive Design */
  @media (max-width: 1024px) {
    .professional-rates-title {
      font-size: 3rem;
    }

    .professional-table-th,
    .professional-table-td {
      padding: 1rem 1.25rem;
      font-size: 0.9rem;
    }

    .professional-factor-item {
      padding: 1.5rem;
    }
  }

  @media (max-width: 768px) {
    .professional-rates-title {
      font-size: 2.5rem;
    }

    .professional-rates-section {
      padding: 4rem 0;
    }

    .professional-factor-item {
      padding: 1.25rem;
      flex-direction: column;
      text-align: center;
    }

    .professional-factor-item .flex-shrink-0 {
      margin-right: 0;
      margin-bottom: 1rem;
    }

    .professional-table-th,
    .professional-table-td {
      padding: 0.875rem 1rem;
      font-size: 0.85rem;
    }

    .professional-rate-highlight {
      padding: 0.4rem 0.8rem;
      font-size: 0.8rem;
    }
  }

  @media (max-width: 480px) {
    .professional-rates-title {
      font-size: 2rem;
    }

    .professional-factor-item {
      padding: 1rem;
    }

    .professional-factor-item .flex-shrink-0 {
      width: 2rem;
      height: 2rem;
      font-size: 0.75rem;
    }

    .professional-table-th,
    .professional-table-td {
      padding: 0.75rem 0.875rem;
      font-size: 0.8rem;
    }

    .professional-rate-highlight {
      padding: 0.35rem 0.7rem;
      font-size: 0.75rem;
      min-width: 50px;
    }

    .professional-disclaimer {
      padding: 1.5rem;
    }

    .professional-table-container {
      border-radius: 12px;
    }
  }

  /* Enhanced Responsive Design */
  @media (max-width: 1024px) {
    .creative-factors-grid {
      grid-template-columns: 1fr 1fr 1fr;
    }

    .creative-rates-title {
      font-size: 3rem;
    }

    .creative-table-th,
    .creative-table-td {
      padding: 1rem 1.25rem;
      font-size: 0.9rem;
    }
  }

  @media (max-width: 768px) {
    .creative-factors-grid {
      grid-template-columns: 1fr 1fr;
    }

    .creative-rates-title {
      font-size: 2.5rem;
    }

    .creative-rates-section {
      padding: 4rem 0;
    }

    .creative-factor-card {
      padding: 1.5rem;
    }

    .creative-table-th,
    .creative-table-td {
      padding: 0.875rem 1rem;
      font-size: 0.85rem;
    }

    .creative-rate-badge {
      padding: 0.4rem 0.8rem;
      font-size: 0.8rem;
    }
  }

  @media (max-width: 480px) {
    .creative-factors-grid {
      grid-template-columns: 1fr;
    }

    .creative-rates-title {
      font-size: 2rem;
    }

    .creative-factor-card {
      padding: 1.25rem;
    }

    .creative-factor-card .w-16 {
      width: 3rem;
      height: 3rem;
    }

    .creative-factor-card .w-8 {
      width: 1.5rem;
      height: 1.5rem;
    }

    .creative-table-th,
    .creative-table-td {
      padding: 0.75rem 0.875rem;
      font-size: 0.8rem;
    }

    .creative-rate-badge {
      padding: 0.35rem 0.7rem;
      font-size: 0.75rem;
      min-width: 50px;
    }

    .creative-disclaimer {
      padding: 1.5rem;
    }

    .creative-table-container {
      border-radius: 12px;
    }
  }

  /* Dominion Lending Centres Section - Creative & Animated */
  .dominion-lending-section {
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%, #f8fafc 100%);
    background-size: 400% 400%;
    animation: dominionGradientShift 20s ease-in-out infinite;
    padding: 8rem 0;
    overflow: hidden;
  }

  /* Animated Background Elements */
  .dominion-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
  }

  .dominion-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.08);
    animation: dominionShapeFloat 18s ease-in-out infinite;
  }

  .dominion-shape-1 {
    width: 400px;
    height: 400px;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
  }

  .dominion-shape-2 {
    width: 300px;
    height: 300px;
    top: 50%;
    right: 8%;
    animation-delay: 6s;
  }

  .dominion-shape-3 {
    width: 250px;
    height: 250px;
    bottom: 15%;
    left: 15%;
    animation-delay: 12s;
  }

  /* Floating Particles */
  .dominion-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
  }

  .dominion-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(59, 130, 246, 0.4);
    border-radius: 50%;
    animation: dominionParticleFloat 15s linear infinite;
  }

  .dominion-particle-1 {
    left: 15%;
    animation-delay: 0s;
  }

  .dominion-particle-2 {
    left: 35%;
    animation-delay: 3s;
  }

  .dominion-particle-3 {
    left: 65%;
    animation-delay: 6s;
  }

  .dominion-particle-4 {
    left: 85%;
    animation-delay: 9s;
  }

  .dominion-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 10;
  }

  /* Section Header */
  .dominion-header {
    text-align: center;
    margin-bottom: 6rem;
  }

  .dominion-title {
    font-family: 'Inter', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 2rem 0;
    letter-spacing: -0.02em;
    opacity: 0;
    transform: translateY(50px);
    animation: dominionTitleSlideIn 1s ease-out 0.3s forwards;
  }

  .dominion-divider {
    width: 120px;
    height: 4px;
    background: rgba(59, 130, 246, 0.2);
    margin: 0 auto;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }

  .divider-progress {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8, #3b82f6);
    border-radius: 2px;
    animation: dominionDividerProgress 2s ease-out 0.8s forwards;
  }

  /* Three Column Content */
  .dominion-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
    align-items: start;
  }

  .dominion-column {
    position: relative;
  }

  .dominion-card {
    text-align: center;
    padding: 3rem 2rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(50px);
    animation: dominionCardSlideIn 0.8s ease-out forwards;
    position: relative;
    overflow: hidden;
  }

  .dominion-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
  }

  .dominion-card:hover::before {
    left: 100%;
  }

  .dominion-card:nth-child(1) {
    animation-delay: 1.2s;
  }

  .dominion-card:nth-child(2) {
    animation-delay: 1.4s;
  }

  .dominion-card:nth-child(3) {
    animation-delay: 1.6s;
  }

  .dominion-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.95);
  }

  /* Icon Styling */
  .dominion-icon-wrapper {
    margin-bottom: 2rem;
    position: relative;
  }

  .dominion-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
  }

  .dominion-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .dominion-card:hover .dominion-icon::before {
    opacity: 1;
  }

  .dominion-icon svg {
    width: 2rem;
    height: 2rem;
    color: #ffffff;
    z-index: 2;
    position: relative;
    transition: all 0.4s ease;
  }

  .dominion-card:hover .dominion-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);
  }

  .dominion-card:hover .dominion-icon svg {
    transform: scale(1.1);
  }

  /* Card Content */
  .dominion-card-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1.5rem 0;
    line-height: 1.3;
  }

  .dominion-card-description {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #64748b;
    margin: 0;
    font-weight: 400;
  }

  /* Animations */
  @keyframes dominionGradientShift {
    0%, 100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  @keyframes dominionShapeFloat {
    0%, 100% {
      transform: translateY(0px) rotate(0deg);
    }
    50% {
      transform: translateY(-30px) rotate(180deg);
    }
  }

  @keyframes dominionParticleFloat {
    0% {
      transform: translateY(100vh) rotate(0deg);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      transform: translateY(-100px) rotate(360deg);
      opacity: 0;
    }
  }

  @keyframes dominionTitleSlideIn {
    0% {
      opacity: 0;
      transform: translateY(50px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes dominionDividerProgress {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }

  @keyframes dominionCardSlideIn {
    0% {
      opacity: 0;
      transform: translateY(50px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Responsive Design */
  @media (max-width: 1200px) {
    .dominion-content {
      gap: 3rem;
    }

    .dominion-title {
      font-size: 3rem;
    }
  }

  @media (max-width: 1024px) {
    .dominion-lending-section {
      padding: 6rem 0;
    }

    .dominion-content {
      grid-template-columns: 1fr;
      gap: 3rem;
    }

    .dominion-title {
      font-size: 2.5rem;
    }

    .dominion-card {
      padding: 2.5rem 2rem;
    }
  }

  @media (max-width: 768px) {
    .dominion-lending-section {
      padding: 4rem 0;
    }

    .dominion-container {
      padding: 0 1.5rem;
    }

    .dominion-header {
      margin-bottom: 4rem;
    }

    .dominion-title {
      font-size: 2.25rem;
    }

    .dominion-card {
      padding: 2rem 1.5rem;
    }

    .dominion-icon {
      width: 70px;
      height: 70px;
    }

    .dominion-icon svg {
      width: 1.75rem;
      height: 1.75rem;
    }

    .dominion-card-title {
      font-size: 1.375rem;
    }

    .dominion-card-description {
      font-size: 0.95rem;
    }
  }

  @media (max-width: 480px) {
    .dominion-lending-section {
      padding: 3rem 0;
    }

    .dominion-container {
      padding: 0 1rem;
    }

    .dominion-title {
      font-size: 2rem;
    }

    .dominion-card {
      padding: 1.5rem 1rem;
    }

    .dominion-icon {
      width: 60px;
      height: 60px;
    }

    .dominion-icon svg {
      width: 1.5rem;
      height: 1.5rem;
    }

    .dominion-card-title {
      font-size: 1.25rem;
    }

    .dominion-card-description {
      font-size: 0.9rem;
    }
  }

  /* Apply Now Form Section - Professional Design */
  .apply-form-section {
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 6rem 0;
    overflow: hidden;
  }

  .apply-form-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 10;
  }

  /* Form Background Shapes - Animated White Elements */
  .form-bg-shapes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  .form-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    animation: formShapeFloat 25s ease-in-out infinite;
  }

  .form-shape-1 {
    width: 400px;
    height: 400px;
    top: -200px;
    left: -200px;
    animation-delay: 0s;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(248, 250, 252, 0.3));
  }

  .form-shape-2 {
    width: 350px;
    height: 350px;
    bottom: -175px;
    right: -175px;
    animation-delay: 8s;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(241, 245, 249, 0.4));
  }

  .form-shape-3 {
    width: 300px;
    height: 300px;
    top: 20%;
    right: 5%;
    animation-delay: 16s;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.4), rgba(255, 255, 255, 0.3));
  }

  /* Additional White Animated Elements */
  .form-shape-4 {
    width: 200px;
    height: 200px;
    top: 60%;
    left: 10%;
    animation-delay: 12s;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(241, 245, 249, 0.3));
  }

  .form-shape-5 {
    width: 150px;
    height: 150px;
    top: 10%;
    right: 20%;
    animation-delay: 4s;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.3), rgba(255, 255, 255, 0.2));
  }

  /* Large Translucent Circles */
  .form-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(135, 206, 250, 0.3);
    filter: blur(40px);
    animation: circleFloat 20s ease-in-out infinite;
    pointer-events: none;
  }

  .form-circle-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    left: -150px;
    animation-delay: 0s;
    background: rgba(135, 206, 250, 0.25);
  }

  .form-circle-2 {
    width: 350px;
    height: 350px;
    bottom: -100px;
    right: -100px;
    animation-delay: 8s;
    background: rgba(135, 206, 250, 0.3);
  }

  .form-circle-3 {
    width: 300px;
    height: 300px;
    top: 20%;
    right: -80px;
    animation-delay: 15s;
    background: rgba(135, 206, 250, 0.2);
  }

  .form-circle-4 {
    width: 250px;
    height: 250px;
    bottom: 30%;
    left: -60px;
    animation-delay: 5s;
    background: rgba(135, 206, 250, 0.28);
  }

  /* Animated Particles */
  .form-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    animation: particleFloat 15s ease-in-out infinite;
    pointer-events: none;
  }

  .form-particle-1 {
    width: 8px;
    height: 8px;
    top: 20%;
    left: 15%;
    animation-delay: 0s;
    animation-duration: 12s;
  }

  .form-particle-2 {
    width: 6px;
    height: 6px;
    top: 35%;
    left: 80%;
    animation-delay: 2s;
    animation-duration: 18s;
  }

  .form-particle-3 {
    width: 10px;
    height: 10px;
    top: 60%;
    left: 25%;
    animation-delay: 4s;
    animation-duration: 14s;
  }

  .form-particle-4 {
    width: 7px;
    height: 7px;
    top: 75%;
    left: 70%;
    animation-delay: 6s;
    animation-duration: 16s;
  }

  .form-particle-5 {
    width: 5px;
    height: 5px;
    top: 45%;
    left: 5%;
    animation-delay: 8s;
    animation-duration: 20s;
  }

  .form-particle-6 {
    width: 9px;
    height: 9px;
    top: 15%;
    left: 60%;
    animation-delay: 10s;
    animation-duration: 13s;
  }

  .form-particle-7 {
    width: 6px;
    height: 6px;
    top: 80%;
    left: 40%;
    animation-delay: 12s;
    animation-duration: 17s;
  }

  .form-particle-8 {
    width: 8px;
    height: 8px;
    top: 30%;
    left: 90%;
    animation-delay: 14s;
    animation-duration: 15s;
  }

  .form-particle-9 {
    width: 4px;
    height: 4px;
    top: 55%;
    left: 50%;
    animation-delay: 16s;
    animation-duration: 19s;
  }

  .form-particle-10 {
    width: 7px;
    height: 7px;
    top: 25%;
    left: 35%;
    animation-delay: 18s;
    animation-duration: 14s;
  }

  .form-particle-11 {
    width: 5px;
    height: 5px;
    top: 70%;
    left: 15%;
    animation-delay: 20s;
    animation-duration: 16s;
  }

  .form-particle-12 {
    width: 6px;
    height: 6px;
    top: 40%;
    left: 75%;
    animation-delay: 22s;
    animation-duration: 18s;
  }

  /* Form Header */
  .form-header {
    text-align: center;
    margin-bottom: 3rem;
  }

  .form-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 1rem;
    position: relative;
  }

  .form-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(135deg, #3b82f6, #10b981);
    border-radius: 2px;
  }

  .form-subtitle {
    font-size: 1.125rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* Form Container - Professional Design */
  .form-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow:
      0 25px 50px -12px rgba(0, 0, 0, 0.15),
      0 10px 20px -5px rgba(0, 0, 0, 0.1),
      0 0 0 1px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 10;
  }

  .form-group {
    position: relative;
  }

  /* Form Row Layout */
  .form-row {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
  }

  .form-group-half {
    position: relative;
    flex: 1;
  }

  .form-group-full {
    flex: 1;
    width: 100%;
  }

  /* Form Inputs - Professional Styling */
  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 400;
    color: #374151;
    background: #ffffff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.05),
      0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow:
      0 0 0 3px rgba(59, 130, 246, 0.1),
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
  }

  .form-input::placeholder,
  .form-textarea::placeholder {
    color: #94a3b8;
    font-weight: 400;
  }

  .form-textarea {
    resize: vertical;
    min-height: 120px;
  }

  /* Form Labels */
  .form-label {
    position: absolute;
    top: -8px;
    left: 12px;
    background: #ffffff;
    padding: 0 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #3b82f6;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    pointer-events: none;
  }

  .form-input:focus + .form-label,
  .form-select:focus + .form-label,
  .form-textarea:focus + .form-label,
  .form-input:not(:placeholder-shown) + .form-label,
  .form-select:not([value=""]) + .form-label,
  .form-textarea:not(:placeholder-shown) + .form-label {
    opacity: 1;
    transform: translateY(0);
  }

  /* Radio Groups */
  .radio-group {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .radio-label {
    display: inline-block;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0;
    margin-right: 1.5rem;
    font-size: 1rem;
    vertical-align: middle;
  }

  .radio-options {
    display: inline-flex;
    gap: 2rem;
    align-items: center;
    vertical-align: middle;
  }

  .radio-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: #64748b;
    transition: color 0.3s ease;
    white-space: nowrap;
  }

  .radio-option:hover {
    color: #3b82f6;
  }

  .radio-option input[type="radio"] {
    display: none;
  }

  .radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
    background: #ffffff;
    flex-shrink: 0;
  }

  .radio-option input[type="radio"]:checked + .radio-custom {
    border-color: #3b82f6;
    background: #3b82f6;
  }

  .radio-option input[type="radio"]:checked + .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
  }

  .radio-option input[type="radio"]:checked ~ .radio-text {
    color: #3b82f6;
    font-weight: 600;
  }

  /* Checkboxes */
  .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #1e293b;
    font-weight: 500;
  }

  .checkbox-label input[type="checkbox"] {
    display: none;
  }

  .checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-top: 2px;
    background: #ffffff;
  }

  .checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    border-color: #3b82f6;
    background: #3b82f6;
  }

  .checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
  }

  .checkbox-required .checkbox-text {
    color: #1e293b;
    font-weight: 500;
  }

  .privacy-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
  }

  .privacy-link:hover {
    color: #1e40af;
    text-decoration: underline;
  }

  /* Submit Button - Professional Design */
  .form-submit-btn {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    width: max-content;
    margin: 1.5rem auto 0;
  }

  .form-submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.4s ease;
    z-index: 1;
  }

  .form-submit-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease;
    z-index: 1;
  }

  .form-submit-btn:hover::before {
    left: 100%;
  }

  .form-submit-btn:hover::after {
    width: 200px;
    height: 200px;
  }

  .form-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow:
      0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
  }

  .btn-text {
    position: relative;
    z-index: 2;
  }

  .btn-icon {
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
  }

  .btn-icon svg {
    width: 12px;
    height: 12px;
    stroke-width: 2.5;
  }

  .form-submit-btn:hover .btn-icon {
    transform: translateX(3px) scale(1.1);
    background: rgba(255, 255, 255, 0.2);
  }

  /* Animations */
  @keyframes formGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }

  @keyframes formShapeFloat {
    0%, 100% {
      transform: translateY(0px) rotate(0deg) scale(1);
      opacity: 0.15;
    }
    25% {
      transform: translateY(-20px) rotate(3deg) scale(1.05);
      opacity: 0.2;
    }
    50% {
      transform: translateY(-10px) rotate(0deg) scale(1.02);
      opacity: 0.18;
    }
    75% {
      transform: translateY(-25px) rotate(-3deg) scale(1.08);
      opacity: 0.22;
    }
  }

  @keyframes circleFloat {
    0%, 100% {
      transform: translateY(0px) translateX(0px) scale(1);
      opacity: 0.25;
    }
    25% {
      transform: translateY(-20px) translateX(10px) scale(1.05);
      opacity: 0.35;
    }
    50% {
      transform: translateY(-10px) translateX(-5px) scale(0.98);
      opacity: 0.3;
    }
    75% {
      transform: translateY(-25px) translateX(8px) scale(1.02);
      opacity: 0.4;
    }
  }

  @keyframes particleFloat {
    0%, 100% {
      transform: translateY(0px) translateX(0px) scale(1);
      opacity: 0.4;
    }
    25% {
      transform: translateY(-30px) translateX(20px) scale(1.2);
      opacity: 0.6;
    }
    50% {
      transform: translateY(-15px) translateX(-10px) scale(0.8);
      opacity: 0.3;
    }
    75% {
      transform: translateY(-40px) translateX(15px) scale(1.1);
      opacity: 0.7;
    }
  }

  /* About Banner Section */
  .about-banner-section {
    position: relative;
    background: linear-gradient(135deg, rgba(11, 18, 32, 0.6) 0%, rgba(15, 23, 42, 0.6) 45%, rgba(11, 18, 32, 0.6) 100%),
                url('images/about-bg.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 100px 0;
    width: 100%;
    z-index: 1;
    margin-top: 160px;
  }

  .about-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  /* About Banner Circles */
  .about-banner-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(135, 206, 250, 0.3);
    filter: blur(60px);
    animation: aboutBannerFloat 25s ease-in-out infinite;
    pointer-events: none;
  }

  .about-banner-circle-1 {
    width: 500px;
    height: 500px;
    top: -150px;
    left: -200px;
    animation-delay: 0s;
    background: rgba(135, 206, 250, 0.25);
  }

  .about-banner-circle-2 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    right: -150px;
    animation-delay: 8s;
    background: rgba(135, 206, 250, 0.3);
  }

  .about-banner-circle-3 {
    width: 350px;
    height: 350px;
    top: 20%;
    right: -100px;
    animation-delay: 15s;
    background: rgba(135, 206, 250, 0.2);
  }

  .about-banner-circle-4 {
    width: 300px;
    height: 300px;
    bottom: 30%;
    left: -80px;
    animation-delay: 5s;
    background: rgba(135, 206, 250, 0.28);
  }

  /* About Banner Particles */
  .about-banner-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    animation: aboutBannerParticleFloat 20s ease-in-out infinite;
    pointer-events: none;
  }

  .about-banner-particle-1 {
    width: 8px;
    height: 8px;
    top: 20%;
    left: 15%;
    animation-delay: 0s;
    animation-duration: 15s;
  }

  .about-banner-particle-2 {
    width: 6px;
    height: 6px;
    top: 35%;
    left: 80%;
    animation-delay: 3s;
    animation-duration: 18s;
  }

  .about-banner-particle-3 {
    width: 10px;
    height: 10px;
    top: 60%;
    left: 25%;
    animation-delay: 6s;
    animation-duration: 12s;
  }

  .about-banner-particle-4 {
    width: 7px;
    height: 7px;
    top: 75%;
    left: 70%;
    animation-delay: 9s;
    animation-duration: 16s;
  }

  .about-banner-particle-5 {
    width: 5px;
    height: 5px;
    top: 45%;
    left: 5%;
    animation-delay: 12s;
    animation-duration: 20s;
  }

  .about-banner-particle-6 {
    width: 9px;
    height: 9px;
    top: 15%;
    left: 60%;
    animation-delay: 15s;
    animation-duration: 14s;
  }

  /* About Banner Content */
  .about-banner-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .about-banner-content {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .about-banner-title {
    font-size: 4.5rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    width: 100%;
    display: block;
    opacity: 1;
    visibility: visible;
  }

  .about-banner-subtitle {
    font-size: 1.5rem;
    color: #e2e8f0;
    margin:1.5rem 0 3rem;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    width: 100%;
    display: block;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    opacity: 1;
    visibility: visible;
  }

  .about-banner-cta {
    display: inline-block;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #ffffff;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
    text-transform: uppercase;
    opacity: 1;
    visibility: visible;
    text-align: center;
    margin: 0 auto;
  }

  .about-banner-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  }

  /* About Banner Animations */
  @keyframes aboutBannerFloat {
    0%, 100% {
      transform: translateY(0px) translateX(0px) scale(1);
      opacity: 0.25;
    }
    25% {
      transform: translateY(-30px) translateX(15px) scale(1.05);
      opacity: 0.35;
    }
    50% {
      transform: translateY(-15px) translateX(-8px) scale(0.98);
      opacity: 0.3;
    }
    75% {
      transform: translateY(-35px) translateX(12px) scale(1.02);
      opacity: 0.4;
    }
  }

  @keyframes aboutBannerParticleFloat {
    0%, 100% {
      transform: translateY(0px) translateX(0px) scale(1);
      opacity: 0.4;
    }
    25% {
      transform: translateY(-40px) translateX(25px) scale(1.3);
      opacity: 0.7;
    }
    50% {
      transform: translateY(-20px) translateX(-15px) scale(0.7);
      opacity: 0.3;
    }
    75% {
      transform: translateY(-50px) translateX(20px) scale(1.2);
      opacity: 0.8;
    }
  }

  /* Responsive Design for About Banner */
  @media (max-width: 1024px) {
    .about-banner-title {
      font-size: 3.5rem;
    }

    .about-banner-subtitle {
      font-size: 1.3rem;
    }

    .about-banner-circle-1 {
      width: 400px;
      height: 400px;
    }

    .about-banner-circle-2 {
      width: 350px;
      height: 350px;
    }
  }

  @media (max-width: 768px) {
    .about-banner-section {
      padding: 80px 0;
    }

    .about-banner-container {
      padding: 0 1rem;
    }

    .about-banner-title {
      font-size: 2.8rem;
      text-align: center;
    }

    .about-banner-subtitle {
      font-size: 1.1rem;
      margin-bottom: 2rem;
      text-align: center;
    }

    .about-banner-cta {
      padding: 0.8rem 2rem;
      font-size: 1rem;
    }

    .about-banner-circle-1 {
      width: 300px;
      height: 300px;
    }

    .about-banner-circle-2 {
      width: 250px;
      height: 250px;
    }

    .about-banner-circle-3,
    .about-banner-circle-4 {
      width: 200px;
      height: 200px;
    }
  }

  @media (max-width: 480px) {
    .about-banner-section {
      min-height: 50vh;
    }

    .about-banner-container {
      padding: 0 1rem;
    }

    .about-banner-title {
      font-size: 2.2rem;
      text-align: center;
    }

    .about-banner-subtitle {
      font-size: 1rem;
      text-align: center;
    }

    .about-banner-cta {
      padding: 0.7rem 1.5rem;
      font-size: 0.9rem;
    }
  }

  /* Responsive Design */
  @media (max-width: 1024px) {
    .form-title {
      font-size: 2rem;
    }

    .form-row {
      flex-direction: column;
      gap: 1.25rem;
    }

    .form-group-half {
      flex: none;
      width: 100%;
    }

    .radio-group {
      flex-direction: row;
      align-items: center;
    }

    .radio-label {
      margin-right: 1rem;
      margin-bottom: 0;
    }

    .radio-options {
      flex-direction: row;
      gap: 1.5rem;
      justify-content: flex-start;
    }
  }

  @media (max-width: 768px) {
    .apply-form-section {
      padding: 3rem 0;
    }

    .apply-form-container {
      padding: 0 1rem;
    }

    .form-title {
      font-size: 1.75rem;
    }

    .form-subtitle {
      font-size: 1rem;
    }

    .form-input,
    .form-select,
    .form-textarea {
      padding: 0.875rem 1rem;
    }
  }


  @media (max-width: 480px) {
    .form-title {
      font-size: 1.5rem;
    }

    .form-grid {
      gap: 1rem;
    }

    .radio-group {
      padding: 1rem;
    }
  }

  /* Why Work With Us Section - 3D Creative Design */
  .why-work-with-us-section {
    position: relative;
    background: radial-gradient(ellipse at center, #0f172a 0%, #1e293b 25%, #0f172a 50%, #1e293b 75%, #0f172a 100%);
    background-size: 200% 200%;
    animation: whyWork3DBackground 30s ease-in-out infinite;
    perspective: 1000px;
    transform-style: preserve-3d;
    padding: 5rem 0 !important;
  }

  /* 3D Background Elements */
  .why-work-3d-bg {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.3;
    animation: whyWork3DBgFloat 40s ease-in-out infinite;
    transform-style: preserve-3d;
    z-index: 1;
  }

  .why-work-3d-bg-1 {
    width: 600px;
    height: 600px;
    background: linear-gradient(45deg, #3b82f6, #1e40af, #8b5cf6);
    top: -20%;
    left: -15%;
    animation-delay: 0s;
    transform: rotateX(60deg) rotateY(45deg);
  }

  .why-work-3d-bg-2 {
    width: 500px;
    height: 500px;
    background: linear-gradient(45deg, #10b981, #059669, #34d399);
    top: 30%;
    right: -20%;
    animation-delay: 10s;
    transform: rotateX(-45deg) rotateY(-30deg);
  }

  .why-work-3d-bg-3 {
    width: 400px;
    height: 400px;
    background: linear-gradient(45deg, #f59e0b, #d97706, #fbbf24);
    bottom: -10%;
    left: 20%;
    animation-delay: 20s;
    transform: rotateX(30deg) rotateY(60deg);
  }

  .why-work-3d-bg-4 {
    width: 350px;
    height: 350px;
    background: linear-gradient(45deg, #ef4444, #dc2626, #f87171);
    top: 60%;
    left: 60%;
    animation-delay: 30s;
    transform: rotateX(-60deg) rotateY(-45deg);
  }

  .why-work-3d-bg-5 {
    width: 300px;
    height: 300px;
    background: linear-gradient(45deg, #8b5cf6, #7c3aed, #a78bfa);
    top: 10%;
    right: 30%;
    animation-delay: 5s;
    transform: rotateX(45deg) rotateY(30deg);
  }

  /* Floating Particles */
  .why-work-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
  }

  .particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: whyWorkParticleFloat 20s linear infinite;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }

  .particle-1 { top: 20%; left: 10%; animation-delay: 0s; }
  .particle-2 { top: 40%; left: 80%; animation-delay: 3s; }
  .particle-3 { top: 70%; left: 20%; animation-delay: 6s; }
  .particle-4 { top: 30%; left: 70%; animation-delay: 9s; }
  .particle-5 { top: 80%; left: 60%; animation-delay: 12s; }
  .particle-6 { top: 10%; left: 50%; animation-delay: 15s; }

  /* 3D Title */
  .why-work-title-container {
    position: relative;
    display: inline-block;
    transform-style: preserve-3d;
  }

  .why-work-section-title {
    font-size: 4rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 1rem;
    transform-style: preserve-3d;
    animation: whyWork3DTitleFloat 6s ease-in-out infinite;
  }

  .title-word {
    display: inline-block;
    margin: 0 0.5rem;
    background: linear-gradient(135deg, #ffffff, #60a5fa, #34d399, #f59e0b);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: whyWork3DWordFloat 4s ease-in-out infinite;
    transform-style: preserve-3d;
  }

  .title-word-1 { animation-delay: 0s; }
  .title-word-2 { animation-delay: 0.5s; }
  .title-word-3 { animation-delay: 1s; }
  .title-word-4 { animation-delay: 1.5s; }

  .why-work-title-glow {
    position: absolute;
    inset: -20px;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.5), rgba(16, 185, 129, 0.5), rgba(139, 92, 246, 0.5));
    filter: blur(40px);
    border-radius: 20px;
    animation: whyWorkTitleGlow 3s ease-in-out infinite;
    z-index: -1;
  }

  .why-work-subtitle {
    margin-top: 2rem;
  }

  .why-work-subtitle p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.25rem;
    font-weight: 300;
    animation: whyWorkSubtitleFade 2s ease-out 1s both;
  }

  /* 3D Grid */
  .why-work-3d-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    margin-top: 4rem;
    transform-style: preserve-3d;
  }

  /* Simple Advantage Cards */
  .why-work-advantages-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 4rem;
  }

  .why-work-advantage-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    flex: 0 0 440px;
    max-width: 440px;
  }

  .why-work-advantage-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
  }

  .why-work-advantage-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.7);
  }

  .why-work-advantage-card:hover::before {
    left: 100%;
  }

  .advantage-icon-container {
    margin-bottom: 1.5rem;
  }

  .advantage-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background: linear-gradient(135deg, #3b82f6, #10b981);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
  }

  .why-work-advantage-card:hover .advantage-icon {
    transform: scale(1.1);
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.4);
  }

  .advantage-title {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .advantage-content {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.6;
  }

  /* Responsive Design for Advantage Cards */
  @media (max-width: 1024px) {
    .why-work-advantages-grid {
      gap: 1.5rem;
    }
    .why-work-advantage-card {
      flex: 0 0 345px;
      max-width: 345px;
    }
  }

  @media (max-width: 768px) {
    .why-work-advantages-grid {
      gap: 1.5rem;
    }
    .why-work-advantage-card {
      flex: 0 0 100%;
      max-width: 100%;
    }

    .why-work-advantage-card {
      padding: 2rem;
    }

    .advantage-icon {
      width: 70px;
      height: 70px;
    }

    .advantage-title {
      font-size: 1.25rem;
    }

    .advantage-content {
      font-size: 0.9rem;
    }
  }

  @media (max-width: 480px) {
    .why-work-advantage-card {
      padding: 1.5rem;
      flex: 0 0 100%;
      max-width: 100%;
    }

    .advantage-icon {
      width: 60px;
      height: 60px;
    }

    .advantage-title {
      font-size: 1.1rem;
      margin-bottom: 1rem;
    }

    .advantage-content {
      font-size: 0.85rem;
    }
  }

  .why-work-3d-card-1 { animation-delay: 0s; }
  .why-work-3d-card-2 { animation-delay: 1s; }
  .why-work-3d-card-3 { animation-delay: 2s; }
  .why-work-3d-card-4 { animation-delay: 3s; }

  .why-work-3d-card:hover {
    transform: rotateY(180deg) translateZ(50px);
  }

  .why-work-3d-card.flipped {
    transform: rotateY(180deg) translateZ(50px);
  }

  .card-3d-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
  }

  .card-3d-front,
  .card-3d-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
  }

  .card-3d-front {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }

  .card-3d-back {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(16, 185, 129, 0.2));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transform: rotateY(180deg);
  }

  /* 3D Icons */
  .why-work-3d-icon-container {
    margin-bottom: 2rem;
    transform-style: preserve-3d;
  }

  .why-work-3d-icon {
    width: 120px;
    height: 120px;
    transform-style: preserve-3d;
    animation: whyWork3DIconRotate 10s linear infinite;
  }

  .icon-3d-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: whyWork3DIconFloat 6s ease-in-out infinite;
  }

  .icon-3d-face {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
  }

  .icon-3d-face-front {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(16, 185, 129, 0.3));
    transform: translateZ(60px);
    color: #60a5fa;
  }

  .icon-3d-face-back {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(139, 92, 246, 0.3));
    transform: rotateY(180deg) translateZ(60px);
    color: #34d399;
  }

  .icon-3d-face-right {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(245, 158, 11, 0.3));
    transform: rotateY(90deg) translateZ(60px);
    color: #8b5cf6;
  }

  .icon-3d-face-left {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(239, 68, 68, 0.3));
    transform: rotateY(-90deg) translateZ(60px);
    color: #f59e0b;
  }

  .icon-3d-face-top {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(59, 130, 246, 0.3));
    transform: rotateX(90deg) translateZ(60px);
    color: #ef4444;
  }

  .icon-3d-face-bottom {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(16, 185, 129, 0.3));
    transform: rotateX(-90deg) translateZ(60px);
    color: #3b82f6;
  }

  /* Card Content */
  .why-work-3d-title {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 1.5rem;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .why-work-3d-number {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3b82f6, #10b981);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }

  .card-3d-content h4 {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }


  .card-3d-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
  }

  .card-3d-disclaimer {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-style: italic;
  }

  /* 3D Animations */
  @keyframes whyWork3DBackground {
    0%, 100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  @keyframes whyWork3DBgFloat {
    0%, 100% {
      transform: translateY(0px) translateX(0px) scale(1) rotateX(0deg) rotateY(0deg);
      opacity: 0.15;
    }
    25% {
      transform: translateY(-50px) translateX(30px) scale(1.1) rotateX(30deg) rotateY(45deg);
      opacity: 0.25;
    }
    50% {
      transform: translateY(30px) translateX(-40px) scale(0.9) rotateX(-30deg) rotateY(-45deg);
      opacity: 0.1;
    }
    75% {
      transform: translateY(-20px) translateX(20px) scale(1.05) rotateX(45deg) rotateY(30deg);
      opacity: 0.2;
    }
  }

  @keyframes whyWorkParticleFloat {
    0% {
      transform: translateY(0px) translateX(0px);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      transform: translateY(-100vh) translateX(50px);
      opacity: 0;
    }
  }

  @keyframes whyWork3DTitleFloat {
    0%, 100% {
      transform: translateY(0px) rotateX(0deg);
    }
    50% {
      transform: translateY(-10px) rotateX(5deg);
    }
  }

  @keyframes whyWork3DWordFloat {
    0%, 100% {
      transform: translateY(0px) rotateY(0deg);
      background-position: 0% 50%;
    }
    50% {
      transform: translateY(-5px) rotateY(10deg);
      background-position: 100% 50%;
    }
  }

  @keyframes whyWorkTitleGlow {
    0%, 100% {
      opacity: 0.3;
      transform: scale(1);
    }
    50% {
      opacity: 0.6;
      transform: scale(1.1);
    }
  }

  @keyframes whyWorkSubtitleFade {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes whyWork3DCardFloat {
    0%, 100% {
      transform: translateY(0px) rotateX(0deg);
    }
    50% {
      transform: translateY(-20px) rotateX(5deg);
    }
  }

  @keyframes whyWork3DIconRotate {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }

  @keyframes whyWork3DIconFloat {
    0%, 100% {
      transform: translateY(0px) scale(1);
    }
    50% {
      transform: translateY(-10px) scale(1.05);
    }
  }

  /* Responsive Design */
  @media (max-width: 1024px) {
    .why-work-3d-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }

    .why-work-section-title {
      font-size: 3rem;
    }
  }

  @media (max-width: 768px) {
    .why-work-with-us-section {
      padding: 5rem 0;
    }
    .why-work-3d-grid{
      display: flex;
      flex-wrap: wrap;
    }
    .why-work-3d-card{
      width: 47%;
    }

    .why-work-section-title {
      font-size: 2.5rem;
    }

    .why-work-3d-grid {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .why-work-3d-card {
      height: 350px;
    }

    .why-work-3d-icon {
      width: 100px;
      height: 100px;
    }

    .why-work-3d-bg {
      display: none;
    }
  }

  @media (max-width: 480px) {
    .why-work-section-title {
      font-size: 2rem;
    }

    .why-work-3d-card {
      height: 300px;
    }

    .why-work-3d-icon {
      width: 80px;
      height: 80px;
    }

    .card-3d-front,
    .card-3d-back {
      padding: 1.5rem;
    }

    .why-work-3d-title {
      font-size: 1.25rem;
    }

    .card-3d-content h4 {
      font-size: 1.25rem;
    }

    .card-3d-content p {
      font-size: 0.875rem;
    }
  }

/* Creative Animated Footer Styles */
.footer-section {
  position: relative;
  background: linear-gradient(135deg, #0b1220 0%, #1a202c 50%, #0b1220 100%);
  color: #ffffff;
  overflow: hidden;
  padding: 4rem 0 2rem;
}

.footer-bg-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.footer-shape {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(59,130,246,0.1), rgba(16,185,129,0.1));
  animation: footerFloat 20s ease-in-out infinite;
}

.footer-shape-1 {
  width: 300px;
  height: 300px;
  top: -150px;
  left: -150px;
  animation-delay: 0s;
}

.footer-shape-2 {
  width: 200px;
  height: 200px;
  top: 50%;
  right: -100px;
  animation-delay: 7s;
}

.footer-shape-3 {
  width: 150px;
  height: 150px;
  bottom: -75px;
  left: 30%;
  animation-delay: 14s;
}

.footer-particles {
  position: absolute;
  inset: 0;
}

.footer-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(59,130,246,0.6);
  border-radius: 50%;
  animation: footerParticleFloat 15s linear infinite;
}

.footer-particle:nth-child(1) {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.footer-particle:nth-child(2) {
  top: 60%;
  left: 80%;
  animation-delay: 3s;
}

.footer-particle:nth-child(3) {
  top: 80%;
  left: 20%;
  animation-delay: 6s;
}

.footer-particle:nth-child(4) {
  top: 30%;
  left: 70%;
  animation-delay: 9s;
}

.footer-particle:nth-child(5) {
  top: 70%;
  left: 50%;
  animation-delay: 12s;
}

.footer-container {
  position: relative;
  z-index: 2;
max-width: 1260px;
  margin: 0 auto;
  padding: 0 2rem;
}

.footer-grid {
  display: flex;
  flex-direction:column;
  align-items: center;
  flex-wrap: wrap;
  gap: 3rem;
  margin-bottom: 3rem;
  justify-content: space-between;
}

.footer-column {
  animation: footerSlideUp 0.8s ease-out both;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 200px;
  align-items: center;
}

.footer-column:nth-child(1) { animation-delay: 0.1s; }
.footer-column:nth-child(2) { animation-delay: 0.2s; }
.footer-column:nth-child(3) { animation-delay: 0.3s; }
.footer-column:nth-child(4) { animation-delay: 0.4s; }
.footer-column:nth-child(5) { animation-delay: 0.5s; }

.footer-company {
  flex: 2;
  max-width: 300px;
  min-width: 250px;
}

.footer-logo-container {
  margin-bottom: 2rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: footerLogoGlow 3s ease-in-out infinite;
}

.qr-code-container {
  width: 60px;
  height: 60px;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  border: 2px solid #3b82f6;
}

.qr-code-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.qr-code-container:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 25px rgba(59,130,246,0.2);
  border-color: #1d4ed8;
}

.qr-code-container:hover .qr-code-image {
  transform: scale(1.02);
  filter: brightness(1.1);
}

.logo-square::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: logoShimmer 2s ease-in-out infinite;
}

.logo-text {
  color: #ffffff;
  font-weight: bold;
  font-size: 1.2rem;
  position: relative;
  z-index: 1;
}

.logo-text-container {
  display: flex;
  flex-direction: column;
}

.logo-main-text {
  color: #ffffff;
  font-weight: bold;
  font-size: 0.9rem;
  line-height: 1.1;
  letter-spacing: 0.5px;
}

.footer-section-title {
  color: #3b82f6;
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  text-transform: lowercase;
  position: relative;
  display: inline-block;
}

.footer-section-title::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  border-radius: 1px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-link {
  color: #e2e8f0;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  position: relative;
  padding-left: 0;
}

.footer-link::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 1px;
  background: #10b981;
  transition: width 0.3s ease;
}

.footer-link:hover {
  color: #ffffff;
  padding-left: 15px;
  transform: translateX(5px);
}

.footer-link:hover::before {
  width: 10px;
}

.footer-link-highlight {
  color: #10b981;
  font-weight: 600;
  margin-top: 0.5rem;
}

.footer-link-highlight:hover {
  color: #059669;
}

/* Footer Contact Column Styles */
.footer-contact-column {
  max-width: 300px;
}

.footer-contact-info-inline {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-contact-name-inline {
  color: #fbbf24;
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.footer-contact-title-inline {
  color: #ffffff;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.footer-contact-address-inline {
  color: #e2e8f0;
  font-size: 0.85rem;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.footer-contact-details-inline {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-contact-item-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-contact-label-inline {
  color: #e2e8f0;
  font-size: 0.85rem;
  min-width: 45px;
}

.footer-contact-link-inline {
  color: #fef3c7;
  text-decoration: none;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

.footer-contact-link-inline:hover {
  color: #fbbf24;
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 2rem;
  text-align: center;
  animation: footerSlideUp 0.8s ease-out 0.6s both;
}

.footer-divider {
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  margin: 0 auto 1rem;
  border-radius: 1px;
}

.footer-copyright {
  color: #94a3b8;
  font-size: 0.9rem;
}

/* Footer Animations */
@keyframes footerFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(120deg);
  }
  66% {
    transform: translateY(10px) rotate(240deg);
  }
}

@keyframes footerParticleFloat {
  0% {
    transform: translateY(0px) translateX(0px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) translateX(50px);
    opacity: 0;
  }
}

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

@keyframes footerLogoGlow {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(249,115,22,0.3);
  }
  50% {
    box-shadow: 0 4px 30px rgba(249,115,22,0.5);
  }
}

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

/* Responsive Footer */
@media (max-width: 1200px) {
  .footer-grid {
    gap: 2rem;
  }

  .footer-column {
    flex: 1 1 30%;
    min-width: 180px;
  }

  .footer-company {
    flex: 1 1 100%;
    max-width: none;
    margin-bottom: 2rem;
    text-align: center;
  }

  .footer-logo {
    justify-content: center;
  }
}

@media (max-width: 1024px) {
  .footer-grid {
    gap: 2rem;
  }

  .footer-column {
    flex: 1 1 45%;
    min-width: 160px;
  }

  .footer-company {
    flex: 1 1 100%;
    text-align: center;
    margin-bottom: 2rem;
  }

  .footer-contact-column {
    flex: 1 1 100%;
    text-align: center;
    margin-top: 1rem;
  }

}

@media (max-width: 768px) {
  .footer-section {
    padding: 2rem 0 1rem;
  }

  .footer-container {
    padding: 0 1rem;
  }

  .footer-grid {
    gap: 1.5rem;
  }

  .footer-column {
    flex: 1 1 100%;
    min-width: auto;
  }

  .footer-company {
    flex: 1 1 100%;
    text-align: center;
    margin-bottom: 1rem;
  }

  .footer-logo {
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
  }

  .logo-text-container {
    text-align: center;
  }

  .footer-section-title {
    text-align: center;
    font-size: 1.1rem;
  }

  .footer-section-title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer-links {
    text-align: center;
  }

  .footer-link::before {
    display: none;
  }

  .footer-link:hover {
    padding-left: 0;
    transform: none;
  }

  .footer-contact-column {
    flex: 1 1 100%;
    text-align: center;
    margin-top: 0;
  }

  .footer-contact-info-inline {
    align-items: center;
    gap: 0.5rem;
  }

  .footer-contact-name-inline {
    font-size: 0.9rem;
  }

  .footer-contact-title-inline {
    font-size: 0.8rem;
  }

  .footer-contact-address-inline {
    font-size: 0.8rem;
    text-align: center;
  }

  .footer-contact-details-inline {
    align-items: center;
    gap: 0.4rem;
  }

  .footer-contact-item-inline {
    justify-content: center;
    flex-direction: column;
    gap: 0.2rem;
  }

  .footer-contact-label-inline {
    min-width: auto;
    font-size: 0.8rem;
  }

  .footer-contact-link-inline {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .footer-section {
    padding: 1.5rem 0 1rem;
  }

  .footer-container {
    padding: 0 0.5rem;
  }

  .footer-grid {
    gap: 1rem;
  }

  .footer-column {
    flex: 1 1 100%;
  }

  .footer-logo {
    flex-direction: column;
    gap: 0.3rem;
  }

  .qr-code-container {
    width: 50px;
    height: 50px;
  }

  .logo-text {
    font-size: 1rem;
  }

  .logo-main-text {
    font-size: 0.8rem;
  }

  .footer-section-title {
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  .footer-links {
    gap: 0.5rem;
  }

  .footer-link {
    font-size: 0.8rem;
  }

  .footer-contact-name-inline {
    font-size: 0.85rem;
  }

  .footer-contact-title-inline {
    font-size: 0.75rem;
  }

  .footer-contact-address-inline {
    font-size: 0.75rem;
    line-height: 1.2;
  }

  .footer-contact-label-inline {
    font-size: 0.75rem;
  }

  .footer-contact-link-inline {
    font-size: 0.75rem;
  }

  .footer-bottom {
    padding-top: 1rem;
  }

  .footer-copyright {
    font-size: 0.8rem;
  }

  .footer-copyright a {
    font-size: 0.8rem;
    padding: 1px 3px;
  }
}

/* Footer Contact Section */
.footer-contact-section {
  background: #2d3748;
  margin: 3rem 0;
  border-radius: 12px;
  padding: 2rem;
  animation: footerSlideUp 0.8s ease-out 0.7s both;
}

.footer-contact-container {
  max-width: 400px;
  margin: 0 auto;
}

.footer-contact-header {
  text-align: center;
  margin-bottom: 2rem;
}

.footer-contact-title {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-contact-underline {
  width: 60px;
  height: 4px;
  background: #fbbf24;
  margin: 0 auto;
  border-radius: 2px;
  animation: footerContactUnderline 1s ease-out 1s both;
}

.footer-contact-info {
  text-align: left;
}

.footer-contact-name {
  color: #fbbf24;
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.footer-contact-title-text {
  color: #ffffff;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.footer-contact-address {
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 1.5rem;
}

.footer-contact-details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-contact-label {
  color: #ffffff;
  font-size: 0.95rem;
  min-width: 50px;
}

.footer-contact-link {
  color: #fef3c7;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  position: relative;
}

.footer-contact-link:hover {
  color: #fbbf24;
  text-decoration: underline;
}

.footer-contact-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #fbbf24;
  transition: width 0.3s ease;
}

.footer-contact-link:hover::after {
  width: 100%;
}

/* Contact Section Animations */
@keyframes footerContactUnderline {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

/* Responsive Contact Section */
@media (max-width: 768px) {
  .footer-contact-section {
    margin: 2rem 0;
    padding: 1.5rem;
  }

  .footer-contact-container {
    max-width: 100%;
  }

  .footer-contact-title {
    font-size: 1.25rem;
  }

  .footer-contact-name {
    font-size: 1.1rem;
  }

  .footer-contact-details {
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .footer-contact-section {
    padding: 1rem;
  }

  .footer-contact-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .footer-contact-label {
    min-width: auto;
  }
}

/* ===== CHATBOT STYLES ===== */

/* Chatbot Icon Container */
.chatbot-icon-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(100px) scale(0.8);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.chatbot-icon-container.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Chatbot Icon */
.chatbot-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.3);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.chatbot-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 40px rgba(59, 130, 246, 0.4);
}

/* Pulsing Animation */
.chatbot-icon::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-radius: 50%;
  opacity: 0.3;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.1;
  }
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
}

/* Chat Icon SVG */
.chatbot-icon svg {
  width: 32px;
  height: 32px;
  color: white;
  z-index: 2;
  position: relative;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-2px);
  }
}

/* Notification Badge */
.chatbot-notification {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  background: #ef4444;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: bold;
  animation: notificationPulse 1.5s infinite;
}

@keyframes notificationPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Chatbot Modal */
.chatbot-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.chatbot-modal.show {
  opacity: 1;
  visibility: visible;
}

.chatbot-modal-content {
  background: white;
  border-radius: 20px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.8) translateY(50px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chatbot-modal.show .chatbot-modal-content {
  transform: scale(1) translateY(0);
}

/* Chatbot Header */
.chatbot-header {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  padding: 20px;
  border-radius: 20px 20px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chatbot-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.chatbot-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.chatbot-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Chatbot Messages */
.chatbot-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.chatbot-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: messageSlide 0.3s ease;
}

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

.chatbot-message.bot {
  justify-content: flex-start;
}

.chatbot-message.user {
  justify-content: flex-end;
}

.chatbot-message-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chatbot-message.bot .chatbot-message-avatar {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
}

.chatbot-message.user .chatbot-message-avatar {
  background: #f3f4f6;
  color: #374151;
}

.chatbot-message-content {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.4;
}

.chatbot-message.bot .chatbot-message-content {
  background: #f3f4f6;
  color: #374151;
  border-bottom-left-radius: 5px;
}

.chatbot-message.user .chatbot-message-content {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border-bottom-right-radius: 5px;
}

/* Typing Indicator */
.chatbot-typing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 0;
}

.chatbot-typing-dots {
  display: flex;
  gap: 4px;
}

.chatbot-typing-dot {
  width: 8px;
  height: 8px;
  background: #9ca3af;
  border-radius: 50%;
  animation: typingDot 1.4s infinite;
}

.chatbot-typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.chatbot-typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingDot {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
}

/* Chatbot Input */
.chatbot-input-container {
  padding: 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 10px;
  align-items: center;
}

.chatbot-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 25px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s ease;
}

.chatbot-input:focus {
  border-color: #3b82f6;
}

.chatbot-send {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.chatbot-send:hover {
  transform: scale(1.1);
}

.chatbot-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Quick Reply Buttons */
.chatbot-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chatbot-quick-reply {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.chatbot-quick-reply:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

/* Responsive Design */
@media (max-width: 768px) {
  .chatbot-icon-container {
    bottom: 20px;
    right: 20px;
  }

  .chatbot-icon {
    width: 60px;
    height: 60px;
  }

  .chatbot-icon svg {
    width: 28px;
    height: 28px;
  }

  .chatbot-modal-content {
    width: 95%;
    max-height: 85vh;
  }

  .chatbot-message-content {
    max-width: 85%;
  }
}

/* ========================================
   WHY MORTGAGE BROKER PAGE STYLES
======================================== */


.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Why Broker Section */
.why-broker-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%);
    position: relative;
    overflow: hidden;
}

/* Animated Background Elements */
.why-broker-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.why-broker-floating-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.08));
    animation: whyBrokerFloat 8s ease-in-out infinite;
}

.why-broker-shape-1 {
    width: 100px;
    height: 100px;
    top: 15%;
    left: 8%;
    animation-delay: 0s;
}

.why-broker-shape-2 {
    width: 80px;
    height: 80px;
    top: 25%;
    right: 12%;
    animation-delay: 3s;
}

.why-broker-shape-3 {
    width: 60px;
    height: 60px;
    bottom: 25%;
    left: 10%;
    animation-delay: 6s;
}

.why-broker-shape-4 {
    width: 120px;
    height: 120px;
    bottom: 20%;
    right: 8%;
    animation-delay: 2s;
}

.why-broker-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.why-broker-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #3b82f6;
    border-radius: 50%;
    animation: whyBrokerParticle 10s linear infinite;
}

.why-broker-particle-1 {
    top: 30%;
    left: 15%;
    animation-delay: 0s;
}

.why-broker-particle-2 {
    top: 50%;
    left: 85%;
    animation-delay: 3s;
}

.why-broker-particle-3 {
    top: 70%;
    left: 25%;
    animation-delay: 6s;
}

.why-broker-particle-4 {
    top: 20%;
    left: 75%;
    animation-delay: 9s;
}

.why-broker-particle-5 {
    top: 60%;
    left: 60%;
    animation-delay: 1.5s;
}

/* Main Content */
.why-broker-content {
    display: flex;
    align-items: center;
    gap: 4rem;
    position: relative;
    z-index: 2;
}

/* Text Section */
.why-broker-text {
    flex: 0 0 60%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    padding: 3rem;
    border-radius: 25px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    animation: whyBrokerSlideIn 1s ease 0.3s both;
}

.why-broker-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #10b981, #f59e0b);
    animation: gradientShift 4s ease-in-out infinite;
}

.why-broker-text .section-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    animation: fadeInUp 0.8s ease 0.5s both;
}

.why-broker-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    animation: fadeInUp 0.8s ease 0.7s both;
}

.why-broker-text p {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    animation: fadeInUp 0.8s ease 0.9s both;
}

/* Image Section */
.why-broker-image {
    /* flex: 0 0 40%; */
    position: relative;
    text-align: center;
}

.why-broker-image img {
    width: 100%;
    max-width: 500px;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    transform: perspective(1000px) rotateY(5deg);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: whyBrokerImageSlideIn 1s ease 0.5s both;
}

.why-broker-image:hover img {
    transform: perspective(1000px) rotateY(0deg) scale(1.05);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.2);
}


/* Animations */
@keyframes whyBrokerFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-25px) rotate(180deg); }
}

@keyframes whyBrokerParticle {
    0% { transform: translateY(0px) translateX(0px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-120px) translateX(60px); opacity: 0; }
}

@keyframes whyBrokerSlideIn {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}


/* Brokers Work Hard Section */
.brokers-work-hard-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
    position: relative;
    overflow: hidden;
}

/* Animated Background Elements */
.brokers-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.brokers-floating-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1));
    animation: brokersFloat 6s ease-in-out infinite;
}

.brokers-shape-1 {
    width: 80px;
    height: 80px;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

.brokers-shape-2 {
    width: 120px;
    height: 120px;
    top: 20%;
    right: 10%;
    animation-delay: 2s;
}

.brokers-shape-3 {
    width: 60px;
    height: 60px;
    bottom: 30%;
    left: 8%;
    animation-delay: 4s;
}

.brokers-shape-4 {
    width: 100px;
    height: 100px;
    bottom: 15%;
    right: 15%;
    animation-delay: 1s;
}

.brokers-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.brokers-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #3b82f6;
    border-radius: 50%;
    animation: brokersParticle 8s linear infinite;
}

.brokers-particle-1 {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.brokers-particle-2 {
    top: 40%;
    left: 80%;
    animation-delay: 2s;
}

.brokers-particle-3 {
    top: 60%;
    left: 30%;
    animation-delay: 4s;
}

.brokers-particle-4 {
    top: 80%;
    left: 70%;
    animation-delay: 6s;
}

.brokers-particle-5 {
    top: 10%;
    left: 60%;
    animation-delay: 1s;
}

/* Main Content */
.brokers-work-hard-content {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 3rem;
    position: relative;
    z-index: 2;
}

/* Image Section - Reduced Width */
.brokers-work-hard-image {
    flex: 0 0 35%;
    position: relative;
}

.image-container {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    transform: perspective(1000px) rotateY(-5deg);
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.image-container:hover {
    transform: perspective(1000px) rotateY(0deg) scale(1.05);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.2);
}

.image-container img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.image-container:hover img {
    transform: scale(1.1);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(16, 185, 129, 0.2) 100%);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.image-container:hover .image-overlay {
    opacity: 1;
}

.image-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 12px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-20px);
    opacity: 0;
    animation: badgeSlideIn 0.8s ease 1s forwards;
}

.badge-icon {
    font-size: 1.2rem;
}

.badge-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
}

/* Text Section - Increased Width */
.brokers-work-hard-text {
    flex: 0 0 65%;
}

.text-content-wrapper {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    padding: 3rem;
    border-radius: 25px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.text-content-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #10b981, #f59e0b);
    animation: gradientShift 3s ease-in-out infinite;
}

.content-animation {
    animation: contentSlideIn 1s ease 0.5s both;
}

.section-subtitle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    animation: fadeInUp 0.8s ease 0.7s both;
}

.subtitle-icon {
    font-size: 1.2rem;
    animation: iconBounce 2s ease-in-out infinite;
}

.main-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2rem;
    line-height: 1.2;
    animation: fadeInUp 0.8s ease 0.9s both;
}

.highlight-text {
    position: relative;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 8px;
    animation: highlightPulse 2s ease-in-out infinite;
}

.highlight-you {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    animation-delay: 0.5s;
}

.highlight-not {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    animation-delay: 1s;
}

.content-points {
    margin-bottom: 2.5rem;
}

.point-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(248, 250, 252, 0.8);
    border-radius: 15px;
    border-left: 4px solid #3b82f6;
    transition: all 0.3s ease;
    animation: fadeInUp 0.8s ease both;
}
.point-item:last-child{
  margin-bottom: 0;
}

.point-item:nth-child(1) { animation-delay: 1.1s; }
.point-item:nth-child(2) { animation-delay: 1.3s; }
.point-item:nth-child(3) { animation-delay: 1.5s; }

.point-item:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
}

.point-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    animation: iconRotate 3s ease-in-out infinite;
}

.point-item p {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}


/* Animations */
@keyframes brokersFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes brokersParticle {
    0% { transform: translateY(0px) translateX(0px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100px) translateX(50px); opacity: 0; }
}

@keyframes badgeSlideIn {
    to { transform: translateY(0); opacity: 1; }
}

@keyframes contentSlideIn {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

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

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes highlightPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes iconRotate {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(10deg); }
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Reasons Section */
.reasons-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, #1e293b 0%, #334155 25%, #475569 50%, #64748b 75%, #94a3b8 100%);
    background-size: 400% 400%;
    animation: reasonsGradientShift 15s ease infinite;
    position: relative;
    overflow: hidden;
}

/* Animated Background Elements */
.reasons-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.reasons-floating-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    animation: reasonsFloat 12s ease-in-out infinite;
}

.reasons-shape-1 {
    width: 120px;
    height: 120px;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

.reasons-shape-2 {
    width: 80px;
    height: 80px;
    top: 20%;
    right: 8%;
    animation-delay: 3s;
}

.reasons-shape-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 10%;
    animation-delay: 6s;
}

.reasons-shape-4 {
    width: 60px;
    height: 60px;
    bottom: 15%;
    right: 12%;
    animation-delay: 9s;
}

.reasons-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.reasons-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: reasonsParticle 8s linear infinite;
}

.reasons-particle-1 {
    top: 25%;
    left: 20%;
    animation-delay: 0s;
}

.reasons-particle-2 {
    top: 45%;
    left: 80%;
    animation-delay: 2s;
}

.reasons-particle-3 {
    top: 65%;
    left: 30%;
    animation-delay: 4s;
}

.reasons-particle-4 {
    top: 15%;
    left: 70%;
    animation-delay: 6s;
}

.reasons-particle-5 {
    top: 55%;
    left: 50%;
    animation-delay: 1s;
}

.reasons-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 2;
    animation: reasonsHeaderSlideIn 1s ease 0.3s both;
}

.reasons-header h2 {
    font-size: 3rem;
    font-weight: 800;
    color: white;
    margin-bottom: 1rem;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    background: linear-gradient(45deg, #ffffff, #f0f9ff, #e0f2fe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: reasonsTitleGlow 3s ease-in-out infinite;
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.reason-item {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    padding: 1.5rem;
    border-radius: 25px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    animation: reasonsItemSlideIn 0.8s ease both;
}

.reason-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
}

.reason-item:hover::before {
    left: 100%;
}

.reason-item:nth-child(1) { animation-delay: 0.1s; }
.reason-item:nth-child(2) { animation-delay: 0.2s; }
.reason-item:nth-child(3) { animation-delay: 0.3s; }
.reason-item:nth-child(4) { animation-delay: 0.4s; }
.reason-item:nth-child(5) { animation-delay: 0.5s; }
.reason-item:nth-child(6) { animation-delay: 0.6s; }
.reason-item:nth-child(7) { animation-delay: 0.7s; }
.reason-item:nth-child(8) { animation-delay: 0.8s; }
.reason-item:nth-child(9) { animation-delay: 0.9s; }
.reason-item:nth-child(10) { animation-delay: 1.0s; }

.reason-item:hover {
    transform: translateY(-15px) scale(1.05);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 1);
}

.reason-icon {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 20px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
    transition: all 0.6s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.reason-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 1;
}

.reason-item:hover .reason-icon::before {
    opacity: 1;
}

.icon-3d {
    font-size: 2.5rem;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.6s ease;
    z-index: 2;
    position: relative;
}

.reason-item:hover .icon-3d {
    transform: scale(1.2) rotate(5deg);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.reason-content {
    flex: 1;
    position: relative;
}

.reason-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    transition: color 0.3s ease;
    position: relative;
}

.reason-content p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

.reason-item:hover .reason-content h3 {
    color: #3b82f6;
}

.reason-content h3::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #10b981);
    transition: width 0.6s ease;
}

.reason-item:hover .reason-content h3::after {
    width: 100%;
}

/* Animations */
@keyframes reasonsGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes reasonsFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(180deg); }
}

@keyframes reasonsParticle {
    0% { transform: translateY(0px) translateX(0px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-150px) translateX(80px); opacity: 0; }
}

@keyframes reasonsHeaderSlideIn {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes reasonsTitleGlow {
    0%, 100% { text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }
    50% { text-shadow: 0 4px 30px rgba(255, 255, 255, 0.5); }
}

@keyframes reasonsItemSlideIn {
    from { opacity: 0; transform: translateY(50px) scale(0.8); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Benefits Section Animations */
@keyframes benefitsFloat {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-30px) scale(1.1); }
}

@keyframes benefitsParticle {
    0% { transform: translateY(0px) translateX(0px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100px) translateX(50px); opacity: 0; }
}

@keyframes benefitsSlideInLeft {
    0% { transform: translateX(-50px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes benefitsSlideInRight {
    0% { transform: translateX(50px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes benefitsSubtitleGlow {
    0% { text-shadow: 0 0 5px rgba(59, 130, 246, 0.3); }
    100% { text-shadow: 0 0 15px rgba(59, 130, 246, 0.6); }
}

@keyframes benefitsSubtitleLine {
    0%, 100% { height: 100%; }
    50% { height: 120%; }
}

@keyframes benefitsTitleSlide {
    0% { transform: translateY(30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes benefitsTitleUnderline {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes benefitsTextFade {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes benefitsImageFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

@keyframes benefitsImageGlow {
    0% { opacity: 0.3; transform: scale(1); }
    100% { opacity: 0.6; transform: scale(1.05); }
}

@keyframes benefitsImagePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.1; }
}

/* Better Deals Section Animations */
@keyframes betterDealsGeometric {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); opacity: 0.3; }
    25% { transform: translateY(-20px) rotate(90deg) scale(1.1); opacity: 0.6; }
    50% { transform: translateY(-10px) rotate(180deg) scale(0.9); opacity: 0.4; }
    75% { transform: translateY(-15px) rotate(270deg) scale(1.05); opacity: 0.5; }
}

@keyframes betterDealsLineMove {
    0% { transform: translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(100vw); opacity: 0; }
}

@keyframes betterDealsCardFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}

@keyframes betterDealsCardGlow {
    0% { opacity: 0.3; transform: scale(1); }
    100% { opacity: 0.6; transform: scale(1.05); }
}

@keyframes betterDealsCardPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.2; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.1; }
}

@keyframes betterDealsTextSlide {
    0% { transform: translateX(50px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes betterDealsTextGlow {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

@keyframes betterDealsTitleReveal {
    0% { transform: translateY(30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes betterDealsTitleUnderline {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes betterDealsTextFade {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes ctaTitleUnderline {
    0% { width: 0; }
    100% { width: 200px; }
}

/* What's Next Section Animations */
@keyframes whatsNextTitleSlide {
    0% { transform: translateY(-30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes whatsNextTitleUnderline {
    0% { width: 0; }
    100% { width: 150px; }
}

@keyframes whatsNextCardSlide {
    0% { transform: translateY(50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Testimonials Section Animations */
@keyframes testimonialFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); opacity: 0.3; }
    25% { transform: translateY(-20px) rotate(90deg) scale(1.1); opacity: 0.6; }
    50% { transform: translateY(-10px) rotate(180deg) scale(0.9); opacity: 0.4; }
    75% { transform: translateY(-15px) rotate(270deg) scale(1.05); opacity: 0.5; }
}

@keyframes testimonialParticle {
    0% { transform: translateY(0px) translateX(0px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100px) translateX(50px); opacity: 0; }
}

@keyframes testimonialSubtitleGlow {
    0% { text-shadow: 0 0 5px rgba(59, 130, 246, 0.3); }
    100% { text-shadow: 0 0 15px rgba(59, 130, 246, 0.6); }
}

@keyframes testimonialSubtitleLine {
    0%, 100% { height: 100%; }
    50% { height: 120%; }
}

@keyframes testimonialTitleSlide {
    0% { transform: translateY(-30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes testimonialTitleUnderline {
    0% { width: 0; }
    100% { width: 200px; }
}

@keyframes testimonialCardSlide {
    0% { transform: translateY(50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes quoteIconFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(5deg); }
}

/* Client Testimonials Section Animations */
@keyframes clientTestimonialFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); opacity: 0.3; }
    25% { transform: translateY(-20px) rotate(90deg) scale(1.1); opacity: 0.6; }
    50% { transform: translateY(-10px) rotate(180deg) scale(0.9); opacity: 0.4; }
    75% { transform: translateY(-15px) rotate(270deg) scale(1.05); opacity: 0.5; }
}

@keyframes clientTestimonialParticle {
    0% { transform: translateY(0px) translateX(0px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100px) translateX(50px); opacity: 0; }
}

@keyframes clientTestimonialSubtitleGlow {
    0% { text-shadow: 0 0 5px rgba(59, 130, 246, 0.3); }
    100% { text-shadow: 0 0 15px rgba(59, 130, 246, 0.6); }
}

@keyframes clientTestimonialSubtitleLine {
    0%, 100% { height: 100%; }
    50% { height: 120%; }
}

@keyframes clientTestimonialTitleSlide {
    0% { transform: translateY(-30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes clientTestimonialTitleUnderline {
    0% { width: 0; }
    100% { width: 200px; }
}

@keyframes clientTestimonialCardSlide {
    0% { transform: translateY(50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes clientQuoteIconFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(5deg); }
}

/* Client Testimonials Section (Testimonials Page) */
.client-testimonials-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

.client-testimonials-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.client-testimonial-floating-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.08));
    animation: clientTestimonialFloat 8s ease-in-out infinite;
}

.client-testimonial-shape-1 {
    width: 100px;
    height: 100px;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

.client-testimonial-shape-2 {
    width: 80px;
    height: 80px;
    top: 20%;
    right: 10%;
    animation-delay: 2s;
}

.client-testimonial-shape-3 {
    width: 120px;
    height: 120px;
    bottom: 20%;
    left: 15%;
    animation-delay: 4s;
}

.client-testimonial-shape-4 {
    width: 60px;
    height: 60px;
    bottom: 30%;
    right: 20%;
    animation-delay: 6s;
}

.client-testimonials-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.client-testimonial-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(59, 130, 246, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
    animation: clientTestimonialParticle 10s linear infinite;
}

.client-testimonial-particle-1 {
    top: 15%;
    left: 20%;
    animation-delay: 0s;
}

.client-testimonial-particle-2 {
    top: 40%;
    right: 25%;
    animation-delay: 2s;
}

.client-testimonial-particle-3 {
    top: 70%;
    left: 30%;
    animation-delay: 4s;
}

.client-testimonial-particle-4 {
    top: 50%;
    right: 40%;
    animation-delay: 6s;
}

.client-testimonial-particle-5 {
    bottom: 25%;
    left: 50%;
    animation-delay: 8s;
}

.client-testimonials-content {
    position: relative;
    z-index: 2;
}

.client-testimonials-header {
    text-align: center;
    margin-bottom: 4rem;
}

.client-section-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
    animation: clientTestimonialSubtitleGlow 2s ease-in-out infinite alternate;
}

.client-section-subtitle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -15px;
    width: 4px;
    height: 100%;
    background: linear-gradient(45deg, #3b82f6, #2563eb);
    border-radius: 2px;
    animation: clientTestimonialSubtitleLine 2s ease-in-out infinite;
}

.client-testimonials-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0;
    position: relative;
    animation: clientTestimonialTitleSlide 1s ease-out 0.3s both;
}

.client-testimonials-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 2px;
    animation: clientTestimonialTitleUnderline 1.5s ease-out 1s forwards;
}

.client-testimonials-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: center;
    align-items: stretch;
}

.client-testimonial-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: clientTestimonialCardSlide 1s ease-out;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    overflow: hidden;
    flex: 1 1 350px;
    max-width: 400px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
}

.client-testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #2563eb, #1d4ed8);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s ease;
}

.client-testimonial-card:hover::before {
    transform: scaleX(1);
}

.client-testimonial-card:nth-child(1) {
    animation-delay: 0.2s;
}

.client-testimonial-card:nth-child(2) {
    animation-delay: 0.4s;
}

.client-testimonial-card:nth-child(3) {
    animation-delay: 0.6s;
}

.client-testimonial-card:nth-child(4) {
    animation-delay: 0.8s;
}

.client-testimonial-card:nth-child(5) {
    animation-delay: 1s;
}

.client-testimonial-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.client-testimonial-quote {
    margin-bottom: 2rem;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.client-quote-icon {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
    animation: clientQuoteIconFloat 3s ease-in-out infinite;
}

.client-quote-icon span {
    transform: rotate(180deg);
    display: inline-block;
}

.client-testimonial-quote p {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.7;
    font-style: italic;
    margin: 0;
    padding-left: 2rem;
    position: relative;
    flex: 1;
}

.client-testimonial-quote p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    border-radius: 2px;
}

.client-testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.client-author-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

.client-testimonial-card:hover .client-author-avatar {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.client-author-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
}

.client-author-role {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}


/* Benefits Section */
.benefits-section {
    padding: 4rem 0;

    position: relative;
    overflow: hidden;
}

.benefits-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.benefits-floating-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1));
    animation: benefitsFloat 6s ease-in-out infinite;
}

.benefits-shape-1 {
    width: 80px;
    height: 80px;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

.benefits-shape-2 {
    width: 120px;
    height: 120px;
    top: 60%;
    right: 10%;
    animation-delay: 2s;
}

.benefits-shape-3 {
    width: 60px;
    height: 60px;
    top: 30%;
    right: 20%;
    animation-delay: 4s;
}

.benefits-shape-4 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 15%;
    animation-delay: 1s;
}

.benefits-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.benefits-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(59, 130, 246, 0.6);
    border-radius: 50%;
    animation: benefitsParticle 8s linear infinite;
}

.benefits-particle-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.benefits-particle-2 {
    top: 40%;
    right: 15%;
    animation-delay: 2s;
}

.benefits-particle-3 {
    top: 70%;
    left: 20%;
    animation-delay: 4s;
}

.benefits-particle-4 {
    top: 50%;
    right: 30%;
    animation-delay: 6s;
}

.benefits-particle-5 {
    bottom: 30%;
    left: 40%;
    animation-delay: 1s;
}

.benefits-content {
    display: flex;
    align-items: center;
    gap: 4rem;
    position: relative;
    z-index: 2;
}

.benefits-text {
    flex: 1;
    animation: benefitsSlideInLeft 1s ease-out;
}

.benefits-text .section-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
    animation: benefitsSubtitleGlow 2s ease-in-out infinite alternate;
}

.benefits-text .section-subtitle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    width: 4px;
    height: 100%;
    background: linear-gradient(45deg, #3b82f6, #2563eb);
    border-radius: 2px;
    animation: benefitsSubtitleLine 2s ease-in-out infinite;
}

.benefits-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    position: relative;
    animation: benefitsTitleSlide 1s ease-out 0.3s both;
}

.benefits-text h2::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 2px;
    animation: benefitsTitleUnderline 1.5s ease-out 1s forwards;
}

.benefits-text p {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.7;
    animation: benefitsTextFade 1s ease-out 0.6s both;
    position: relative;
}

.benefits-image {
    flex: 1;
    text-align: center;
    animation: benefitsSlideInRight 1s ease-out 0.2s both;
}

.benefits-image-container {
    position: relative;
    display: inline-block;
    animation: benefitsImageFloat 3s ease-in-out infinite;
}

.benefits-image img {
    width: 100%;
    max-width: 500px;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.benefits-image img:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 35px 70px rgba(59, 130, 246, 0.3);
}

.benefits-image-container::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1));
    border-radius: 30px;
    z-index: 1;
    animation: benefitsImageGlow 2s ease-in-out infinite alternate;
}

.benefits-image-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    animation: benefitsImagePulse 4s ease-in-out infinite;
}

/* Rates Section */
.rates-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 25%, #e2e8f0 50%, #cbd5e1 75%, #94a3b8 100%);
    position: relative;
    overflow: hidden;
}

.rates-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(37, 99, 235, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
    z-index: 1;
}

.rates-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.rates-floating-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.15));
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.1);
    animation: benefitsFloat 6s ease-in-out infinite;
}

.rates-shape-1 {
    width: 80px;
    height: 80px;
    top: 15%;
    right: 8%;
    animation-delay: 1s;
}

.rates-shape-2 {
    width: 120px;
    height: 120px;
    top: 70%;
    left: 5%;
    animation-delay: 3s;
}

.rates-shape-3 {
    width: 60px;
    height: 60px;
    top: 40%;
    left: 25%;
    animation-delay: 5s;
}

.rates-shape-4 {
    width: 100px;
    height: 100px;
    bottom: 15%;
    right: 20%;
    animation-delay: 2s;
}

.rates-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.rates-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(59, 130, 246, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    animation: benefitsParticle 8s linear infinite;
}

.rates-particle-1 {
    top: 25%;
    right: 12%;
    animation-delay: 1s;
}

.rates-particle-2 {
    top: 45%;
    left: 18%;
    animation-delay: 3s;
}

.rates-particle-3 {
    top: 75%;
    right: 25%;
    animation-delay: 5s;
}

.rates-particle-4 {
    top: 55%;
    left: 35%;
    animation-delay: 7s;
}

.rates-particle-5 {
    bottom: 35%;
    right: 45%;
    animation-delay: 2s;
}

.rates-content {
    display: flex;
    align-items: center;
    gap: 4rem;
    position: relative;
    z-index: 3;
}

.rates-image {
    flex: 1;
    text-align: center;
    animation: benefitsSlideInLeft 1s ease-out 0.3s both;
    position: relative;
}

.rates-image img {
    width: 100%;
    max-width: 500px;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.rates-image img:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 35px 70px rgba(59, 130, 246, 0.3);
}

.rates-image::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: 0;
    bottom: -20px;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1));
    border-radius: 30px;
    z-index: 1;
    animation: benefitsImageGlow 2s ease-in-out infinite alternate;
}

.rates-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    animation: benefitsImagePulse 4s ease-in-out infinite;
}

.rates-text {
    flex: 1;
    animation: benefitsSlideInRight 1s ease-out;
}

.rates-text .section-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
    animation: benefitsSubtitleGlow 2s ease-in-out infinite alternate;
}

.rates-text .section-subtitle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    width: 4px;
    height: 100%;
    background: linear-gradient(45deg, #3b82f6, #2563eb);
    border-radius: 2px;
    animation: benefitsSubtitleLine 2s ease-in-out infinite;
}

.rates-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    position: relative;
    animation: benefitsTitleSlide 1s ease-out 0.3s both;
}

.rates-text h2::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 2px;
    animation: benefitsTitleUnderline 1.5s ease-out 1s forwards;
}

.rates-text p {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.7;
    animation: benefitsTextFade 1s ease-out 0.6s both;
    position: relative;
    margin-bottom: 1.5rem;
}

/* Broker First Section */
.broker-first-section {
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.broker-first-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.broker-first-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.broker-first-floating-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.15));
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.1);
    animation: benefitsFloat 6s ease-in-out infinite;
}

.broker-first-shape-1 {
    width: 80px;
    height: 80px;
    top: 10%;
    left: 8%;
    animation-delay: 2s;
}

.broker-first-shape-2 {
    width: 120px;
    height: 120px;
    top: 65%;
    right: 5%;
    animation-delay: 4s;
}

.broker-first-shape-3 {
    width: 60px;
    height: 60px;
    top: 35%;
    right: 25%;
    animation-delay: 6s;
}

.broker-first-shape-4 {
    width: 100px;
    height: 100px;
    bottom: 10%;
    left: 20%;
    animation-delay: 3s;
}

.broker-first-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.broker-first-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(59, 130, 246, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    animation: benefitsParticle 8s linear infinite;
}

.broker-first-particle-1 {
    top: 20%;
    left: 15%;
    animation-delay: 2s;
}

.broker-first-particle-2 {
    top: 50%;
    right: 20%;
    animation-delay: 4s;
}

.broker-first-particle-3 {
    top: 80%;
    left: 30%;
    animation-delay: 6s;
}

.broker-first-particle-4 {
    top: 60%;
    right: 40%;
    animation-delay: 8s;
}

.broker-first-particle-5 {
    bottom: 25%;
    left: 50%;
    animation-delay: 3s;
}

.broker-first-content {
    display: flex;
    align-items: center;
    gap: 4rem;
    position: relative;
    z-index: 3;
}

.broker-first-text {
    flex: 1;
    animation: benefitsSlideInLeft 1s ease-out;
}

.broker-first-text .section-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
    animation: benefitsSubtitleGlow 2s ease-in-out infinite alternate;
}

.broker-first-text .section-subtitle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    width: 4px;
    height: 100%;
    background: linear-gradient(45deg, #3b82f6, #2563eb);
    border-radius: 2px;
    animation: benefitsSubtitleLine 2s ease-in-out infinite;
}

.broker-first-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    position: relative;
    animation: benefitsTitleSlide 1s ease-out 0.3s both;
}

.broker-first-text h2::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 2px;
    animation: benefitsTitleUnderline 1.5s ease-out 1s forwards;
}

.broker-first-text p {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    animation: benefitsTextFade 1s ease-out 0.6s both;
    position: relative;
}

.broker-first-image {
    flex: 1;
    text-align: center;
    animation: benefitsSlideInRight 1s ease-out 0.3s both;
    position: relative;
}

.broker-first-image img {
    width: 100%;
    max-width: 500px;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.broker-first-image img:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 35px 70px rgba(59, 130, 246, 0.3);
}

.broker-first-image::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1));
    border-radius: 30px;
    z-index: 1;
    animation: benefitsImageGlow 2s ease-in-out infinite alternate;
}

.broker-first-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    animation: benefitsImagePulse 4s ease-in-out infinite;
}


/* Better Deals Section */
.better-deals-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    position: relative;
    overflow: hidden;
}

.better-deals-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(45deg, transparent 30%, rgba(59, 130, 246, 0.1) 50%, transparent 70%),
        linear-gradient(-45deg, transparent 30%, rgba(37, 99, 235, 0.08) 50%, transparent 70%);
    z-index: 1;
}

.better-deals-geometric {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.better-deals-geo-shape {
    position: absolute;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.1));
    animation: betterDealsGeometric 8s ease-in-out infinite;
}

.better-deals-triangle {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 50px solid rgba(59, 130, 246, 0.3);
    top: 15%;
    left: 10%;
    animation-delay: 0s;
}

.better-deals-square {
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, rgba(37, 99, 235, 0.3), rgba(59, 130, 246, 0.2));
    transform: rotate(45deg);
    top: 25%;
    right: 15%;
    animation-delay: 2s;
}

.better-deals-diamond {
    width: 30px;
    height: 30px;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.15));
    transform: rotate(45deg);
    top: 60%;
    left: 20%;
    animation-delay: 4s;
}

.better-deals-hexagon {
    width: 35px;
    height: 35px;
    background: linear-gradient(45deg, rgba(37, 99, 235, 0.2), rgba(59, 130, 246, 0.1));
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    top: 70%;
    right: 25%;
    animation-delay: 6s;
}

.better-deals-lines {
    position: absolute;
    width: 100%;
    height: 100%;
}

.better-deals-line {
    position: absolute;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), transparent);
    height: 2px;
    animation: betterDealsLineMove 6s linear infinite;
}

.better-deals-line-1 {
    width: 200px;
    top: 20%;
    left: -200px;
    animation-delay: 0s;
}

.better-deals-line-2 {
    width: 150px;
    top: 50%;
    right: -150px;
    animation-delay: 3s;
}

.better-deals-line-3 {
    width: 180px;
    top: 80%;
    left: -180px;
    animation-delay: 1.5s;
}

.better-deals-content {
    display: flex;
    align-items: center;
    gap: 4rem;
    position: relative;
    z-index: 3;
}

.better-deals-image {
    flex: 1;
    text-align: center;
    position: relative;
}

.better-deals-image-card {
    position: relative;
    display: inline-block;
}

.better-deals-image img {
    width: 100%;
    max-width: 500px;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;
}


.better-deals-image-card::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2));
    border-radius: 20px;
    z-index: 1;
}

.better-deals-image-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}


.better-deals-image img {
    width: 100%;
    max-width: 500px;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.better-deals-text {
    flex: 1;
    position: relative;
}

.better-deals-text-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    padding: 3rem;
    position: relative;
    animation: betterDealsTextSlide 1s ease-out 0.3s both;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.better-deals-text-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #2563eb, #1d4ed8);
    border-radius: 20px 20px 0 0;
    animation: betterDealsTextGlow 2s ease-in-out infinite alternate;
}

.better-deals-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    animation: betterDealsTitleReveal 1s ease-out 0.6s both;
}

.better-deals-text h2::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 2px;
    animation: betterDealsTitleUnderline 1.5s ease-out 1.2s forwards;
}

.better-deals-text p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    animation: betterDealsTextFade 1s ease-out 0.9s both;
    position: relative;
}


/* What's Next Section */
.whats-next-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
    position: relative;
    overflow: hidden;
}

.whats-next-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(37, 99, 235, 0.03) 0%, transparent 50%);
    z-index: 1;
}

.whats-next-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.whats-next-title {
    font-size: 3rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 3rem;
    position: relative;
    animation: whatsNextTitleSlide 1s ease-out;
}

.whats-next-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 2px;
    animation: whatsNextTitleUnderline 1.5s ease-out 0.5s forwards;
}

.whats-next-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.whats-next-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: 2px dashed rgba(59, 130, 246, 0.3);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: whatsNextCardSlide 1s ease-out;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 400px;
}

.whats-next-card:nth-child(1) {
    animation-delay: 0.2s;
}

.whats-next-card:nth-child(2) {
    animation-delay: 0.4s;
}

.whats-next-card:nth-child(3) {
    animation-delay: 0.6s;
}

.whats-next-card:hover {
    transform: translateY(-15px) scale(1.02);
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.card-icon {
    margin-bottom: 2rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-3d {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow:
        0 10px 30px rgba(59, 130, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.icon-3d::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.1));
    border-radius: 25px;
    z-index: -1;
    transition: all 0.4s ease;
}

.whats-next-card:hover .icon-3d {
    transform: translateY(-10px) rotateY(15deg) rotateX(5deg);
    box-shadow:
        0 20px 40px rgba(59, 130, 246, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.whats-next-card:hover .icon-3d::before {
    transform: scale(1.1);
    opacity: 0.8;
}

.icon-3d span {
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: all 0.3s ease;
}

.whats-next-card:hover .icon-3d span {
    transform: scale(1.1);
}

.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.3;
}

.whats-next-card:hover .card-title {
    color: #3b82f6;
    transform: translateY(-2px);
}

.card-description {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
    text-align: center;
    max-width: 100%;
}

.whats-next-card:hover .card-description {
    color: #475569;
}

.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-grow: 1;
    justify-content: space-between;
}

.card-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-button {
    display: inline-block;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
    margin-top: auto;
    align-self: center;
}

.card-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.5s ease;
}

.card-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.card-button:hover::before {
    left: 100%;
}

.card-button span {
    position: relative;
    z-index: 1;
}

/* CTA Section */
.cta-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
}

.cta-content {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.cta-image {
    flex: 1;
    text-align: center;
}

.cta-image img {
    width: 100%;
    max-width: 500px;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;
}

.cta-image img:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(59, 130, 246, 0.4);
}

.cta-text-content {
    flex: 1;
    text-align: left;
}

.cta-text {
    margin-bottom: 3rem;
}

.cta-text .section-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
}

.cta-text .section-subtitle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    width: 4px;
    height: 100%;
    background: linear-gradient(45deg, #3b82f6, #2563eb);
    border-radius: 2px;
}

.cta-text h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.cta-text h2::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 2px;
    animation: ctaTitleUnderline 1.5s ease-out 1s forwards;
}

.cta-text p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

.cta-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}

.cta-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background: white;
    color: #1e293b;
    text-decoration: none;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-width: 250px;
}

.cta-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.cta-button span {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cta-button small {
    font-size: 0.9rem;
    color: #64748b;
    text-align: center;
}

.cta-button.primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
}

.cta-button.primary small {
    color: rgba(255, 255, 255, 0.8);
}

.cta-button.secondary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.cta-button.secondary small {
    color: rgba(255, 255, 255, 0.8);
}

.cta-button.tertiary {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.cta-button.tertiary small {
    color: rgba(255, 255, 255, 0.8);
}

/* Responsive Design for Why Mortgage Page */
@media (max-width: 1024px) {
    .why-broker-content,
    .brokers-work-hard-content,
    .benefits-content,
    .rates-content,
    .broker-first-content,
    .better-deals-content {
        flex-direction: column;
        gap: 2rem;
    }

    .why-broker-text {
        flex: 1;
    }

    .why-broker-image {
        flex: 1;
    }

    .why-broker-image-container {
        transform: perspective(1000px) rotateY(0deg);
    }

    .why-broker-stats {
        flex-direction: column;
        gap: 1rem;
    }

    .brokers-work-hard-image {
        flex: 1;
    }

    .brokers-work-hard-text {
        flex: 1;
    }

    .image-container {
        transform: perspective(1000px) rotateY(0deg);
    }


    .why-broker-text .section-subtitle {
        font-size: 0.9rem;
    }

    .why-broker-text h2,
    .benefits-text h2,
    .rates-text h2,
    .broker-first-text h2,
    .better-deals-text h2 {
        font-size: 2rem;
    }

    .reasons-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }

    .main-content {
        padding: 2rem 0;


    .why-broker-section,
    .brokers-work-hard-section,
    .reasons-section,
    .benefits-section,
    .rates-section,
    .broker-first-section,
    .better-deals-section,
    .cta-section {
        padding: 2rem 0;
    }

    .cta-content {
        flex-direction: column;
        gap: 2rem;
    }

    .cta-text-content {
        text-align: center;
    }

    .cta-buttons {
        justify-content: center;
    }

    .cta-text h2::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .whats-next-section {
        padding: 2rem 0;
    }

    .whats-next-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .whats-next-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .whats-next-card {
        padding: 2rem 1.5rem;
        min-height: 350px;
    }

    .icon-3d {
        width: 60px;
        height: 60px;
    }

    .icon-3d span {
        font-size: 1.5rem;
    }

    .card-title {
        font-size: 1.3rem;
    }

    .card-description {
        font-size: 0.9rem;
    }


    .client-testimonials-section {
        padding: 3rem 0;
    }

    .client-testimonials-title {
        font-size: 2.5rem;
    }

    .client-testimonials-grid {
        flex-direction: column;
        gap: 1.5rem;
        justify-content: center;
        align-items: center;
    }

    .client-testimonial-card {
        padding: 2rem 1.5rem;
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    .client-testimonial-quote p {
        font-size: 1rem;
        padding-left: 1.5rem;
    }

    .client-quote-icon {
        width: 35px;
        height: 35px;
        font-size: 1.2rem;
    }

    .client-author-avatar {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    .brokers-work-hard-section {
        padding: 3rem 0;
    }

    .text-content-wrapper {
        padding: 2rem;
    }

    .main-heading {
        font-size: 2rem;
    }

    .why-broker-text h2 {
        font-size: 1.8rem;
    }

    .why-broker-text .section-subtitle,
    .brokers-work-hard-text .section-subtitle {
        font-size: 0.85rem;
    }

    .why-broker-text h2,
    .brokers-work-hard-text .main-heading,
    .benefits-text .section-subtitle {
        font-size: 0.9rem;
    }

    .benefits-text h2,
    .rates-text h2,
    .broker-first-text h2,
    .better-deals-text h2,
    .reasons-header h2,
    .cta-content h2 {
        font-size: 1.8rem;
    }

    .reasons-header h2 {
        font-size: 2.5rem;
    }

    .reasons-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
    }

    .reason-item {
        padding: 1.25rem;
        gap: 1.25rem;
        flex-direction: row;
        text-align: left;
    }

    .reason-icon {
        width: 80px;
        height: 80px;
    }

    .icon-3d {
        font-size: 2rem;
    }

    .reason-content h3 {
        font-size: 1rem;
    }

    .reason-content p {
        font-size: 0.9rem;
    }

    .cta-button {
        min-width: 200px;
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .why-broker-text .section-subtitle,
    .brokers-work-hard-text .section-subtitle,
    .benefits-text .section-subtitle {
        font-size: 0.8rem;
    }

    .why-broker-text h2 {
        font-size: 1.3rem;
    }

    .brokers-work-hard-text .main-heading,
    .benefits-text h2,
    .rates-text h2,
    .broker-first-text h2,
    .better-deals-text h2,
    .reasons-header h2,
    .cta-content h2 {
        font-size: 1.5rem;
    }

    .brokers-work-hard-section {
        padding: 2rem 0;
    }

    .text-content-wrapper {
        padding: 1.5rem;
    }

    .point-item {
        padding: 0.8rem;
    }


    .why-broker-text p,
    .brokers-work-hard-text p,
    .benefits-text p,
    .rates-text p,
    .broker-first-text p {
        font-size: 1rem;
    }

    .reason-content h3 {
        font-size: 1.1rem;
    }

    .reasons-header h2 {
        font-size: 2rem;
    }

    .reasons-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .reason-item {
        padding: 1rem;
        gap: 0.75rem;
        flex-direction: column;
        text-align: center;
    }

    .reason-icon {
        width: 70px;
        height: 70px;
    }

    .icon-3d {
        font-size: 1.8rem;
    }

    .reason-content h3 {
        font-size: 0.9rem;
    }

    .reason-content p {
        font-size: 0.85rem;
    }
}
}

/* ========================================
   Enhanced Interactive Mortgage Tools Section
   ======================================== */

.enhanced-interactive-mortgage-tools-section {
  position: relative;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding: 4rem 0;
  overflow: hidden;
}

.enhanced-interactive-mortgage-tools-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
  animation: enhancedToolsBackgroundFloat 20s ease-in-out infinite;
  z-index: 1;
}

@keyframes enhancedToolsBackgroundFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-15px) rotate(0.5deg); }
  66% { transform: translateY(8px) rotate(-0.5deg); }
}

.enhanced-tools-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 2;
}

.enhanced-tools-header {
  text-align: center;
  margin-bottom: 4rem;
}

.enhanced-tools-main-title {
  font-size: 3rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #1e293b 0%, #3b82f6 50%, #10b981 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: enhancedToolsTitleGlow 4s ease-in-out infinite;
}

@keyframes enhancedToolsTitleGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.enhanced-tools-main-description {
  font-size: 1.25rem;
  color: #64748b;
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto;
}

.enhanced-calculator-section {
  margin-bottom: 4rem;
  position: relative;
}

.enhanced-calculator-header {
  text-align: center;
  margin-bottom: 2rem;
}

.enhanced-calculator-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1rem;
}

.enhanced-calculator-subtitle {
  font-size: 1.125rem;
  color: #64748b;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

.enhanced-calculator-form-container {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  border-radius: 20px;
  padding: 3rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(30, 64, 175, 0.3);
}

.enhanced-calculator-form-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  z-index: 1;
}

.enhanced-calculator-form-header {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.enhanced-calculator-form-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.enhanced-calculator-form-description {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.enhanced-calculator-form {
  background: white;
  border-radius: 15px;
  padding: 2.5rem;
  position: relative;
  z-index: 2;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.enhanced-form-instruction {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  margin: 2rem 0;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.enhanced-form-section-header {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: 0.75rem;
  border-radius: 8px;
  text-align: center;
  margin: 2rem 0 1.5rem 0;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.enhanced-section-title {
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.enhanced-form-fields {
  display: grid;
  gap: 2rem;
  margin-bottom: 2rem;
}

.enhanced-form-field {
  position: relative;
}

.enhanced-field-label {
  display: block;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.enhanced-field-input,
.enhanced-field-select {
  width: 100%;
  padding: 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: white;
  color: #374151;
}

.enhanced-field-input:focus,
.enhanced-field-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
}

.enhanced-field-input::placeholder {
  color: #9ca3af;
}


.enhanced-calculator-actions {
  text-align: center;
  margin: 2rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.enhanced-calculate-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 1.25rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
  position: relative;
  overflow: hidden;
}

.enhanced-calculate-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.enhanced-calculate-btn:hover::before {
  left: 100%;
}

.enhanced-calculate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.4);
}

.enhanced-btn-icon {
  font-size: 1.25rem;
  transition: transform 0.3s ease;
}

.enhanced-calculate-btn:hover .enhanced-btn-icon {
  transform: scale(1.2);
}

.enhanced-results-section {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
  border: 1px solid #e5e7eb;
}

.enhanced-results-text {
  font-size: 1.125rem;
  color: #374151;
  line-height: 1.6;
  margin-bottom: 1rem;
  text-align: center;
}

.enhanced-results-text b {
  color: #3b82f6;
  font-weight: 700;
}

.enhanced-disclaimer-text {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
  text-align: center;
}

.enhanced-disclaimer-text a {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 600;
}

.enhanced-disclaimer-text a:hover {
  text-decoration: underline;
}

.enhanced-results-grid {
  display: grid;
  gap: 1rem;
  margin: 2rem 0;
}

.enhanced-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.enhanced-result-row:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.enhanced-result-label {
  font-weight: 600;
  color: #374151;
  font-size: 0.9rem;
}

.enhanced-result-value {
  font-weight: 700;
  color: #3b82f6;
  font-size: 1rem;
}

.enhanced-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  margin: 0.5rem;
  min-width: 140px;
  justify-content: center;
}

.enhanced-reset-btn {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
  box-shadow: 0 4px 8px rgba(107, 114, 128, 0.3);
}

.enhanced-reset-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(107, 114, 128, 0.4);
}

.enhanced-schedule-btn {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  box-shadow: 0 4px 8px rgba(139, 92, 246, 0.3);
}

.enhanced-schedule-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(139, 92, 246, 0.4);
}

.enhanced-print-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}

.enhanced-print-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(245, 158, 11, 0.4);
}

.enhanced-email-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

.enhanced-email-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(16, 185, 129, 0.4);
}

.enhanced-contact-btn {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

.enhanced-contact-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(239, 68, 68, 0.4);
}

/* Responsive Design for Enhanced Interactive Mortgage Tools */
@media (max-width: 768px) {
  .enhanced-interactive-mortgage-tools-section {
    padding: 3rem 0;
  }

  .enhanced-tools-container {
    padding: 0 1rem;
  }

  .enhanced-tools-main-title {
    font-size: 2.25rem;
  }

  .enhanced-tools-main-description {
    font-size: 1.125rem;
  }

  .enhanced-calculator-title {
    font-size: 2rem;
  }

  .enhanced-calculator-form-container {
    padding: 2rem;
  }

  .enhanced-calculator-form-title {
    font-size: 2rem;
  }

  .enhanced-calculator-form {
    padding: 1.5rem;
  }

  .enhanced-promo-box {
    position: static;
    transform: none;
    margin-top: 1rem;
    width: 100%;
  }

  .enhanced-calculate-btn {
    padding: 1rem 2rem;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .enhanced-interactive-mortgage-tools-section {
    padding: 2rem 0;
  }

  .enhanced-tools-main-title {
    font-size: 1.875rem;
  }

  .enhanced-tools-main-description {
    font-size: 1rem;
  }

  .enhanced-calculator-title {
    font-size: 1.75rem;
  }

  .enhanced-calculator-form-container {
    padding: 1.5rem;
  }

  .enhanced-calculator-form-title {
    font-size: 1.75rem;
  }

  .enhanced-calculator-form {
    padding: 1.25rem;
  }

  .enhanced-form-fields {
    gap: 1rem;
  }

  .enhanced-field-input,
  .enhanced-field-select {
    padding: 0.875rem;
  }

  .enhanced-calculate-btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.9rem;
  }
}

/* ========================================
   How Second Mortgages Help Consolidate Debt Section
   ======================================== */

.debt-consolidation-benefits-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.debt-consolidation-benefits-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
  animation: debtConsolidationBackgroundFloat 20s ease-in-out infinite;
  z-index: 1;
}

@keyframes debtConsolidationBackgroundFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-15px) rotate(0.5deg); }
  66% { transform: translateY(8px) rotate(-0.5deg); }
}

.debt-consolidation-benefits-title {
  position: relative;
  z-index: 3;
  background: linear-gradient(135deg, #1e293b 0%, #3b82f6 50%, #10b981 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: debtConsolidationTitleGlow 4s ease-in-out infinite;
}

@keyframes debtConsolidationTitleGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.debt-consolidation-benefits-description {
  position: relative;
  z-index: 3;
  color: #64748b;
  line-height: 1.7;
}

.debt-consolidation-benefits-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.debt-consolidation-benefits-card {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.debt-consolidation-benefits-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.05) 0%,
    rgba(16, 185, 129, 0.05) 50%,
    rgba(139, 92, 246, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.debt-consolidation-benefits-card:hover::before {
  opacity: 1;
}

.debt-consolidation-benefits-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.15),
    0 15px 30px rgba(0, 0, 0, 0.1);
}

.debt-consolidation-benefits-card-content {
  position: relative;
  z-index: 2;
}

.debt-consolidation-benefits-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.debt-consolidation-benefits-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.debt-consolidation-benefits-card:hover .debt-consolidation-benefits-card-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 15px 30px rgba(59, 130, 246, 0.4);
}

.debt-consolidation-benefits-icon-text {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.debt-consolidation-benefits-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  transition: color 0.3s ease;
}

.debt-consolidation-benefits-card:hover .debt-consolidation-benefits-card-title {
  color: #3b82f6;
}

.debt-consolidation-benefits-card-description {
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.debt-consolidation-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.debt-consolidation-benefits-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(248, 250, 252, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.5);
  transition: all 0.3s ease;
}

.debt-consolidation-benefits-item:hover {
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.2);
  transform: translateX(5px);
}

.debt-consolidation-benefits-item-icon {
  font-size: 1.25rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
  border-radius: 8px;
  color: white;
  flex-shrink: 0;
}

.debt-consolidation-benefits-item-text {
  color: #374151;
  font-weight: 500;
  line-height: 1.5;
}

.debt-consolidation-example-section {
  position: relative;
  z-index: 3;
  margin-top: 4rem;
}

.debt-consolidation-example-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 3rem;
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.1),
    0 15px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.debt-consolidation-example-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.05) 0%,
    rgba(59, 130, 246, 0.05) 50%,
    rgba(139, 92, 246, 0.05) 100%);
  z-index: 1;
}

.debt-consolidation-example-content {
  position: relative;
  z-index: 2;
}

.debt-consolidation-example-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.debt-consolidation-example-icon {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 15px 30px rgba(16, 185, 129, 0.3);
}

.debt-consolidation-example-icon-text {
  font-size: 1.75rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.debt-consolidation-example-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.debt-consolidation-example-description {
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 2rem;
  font-size: 1.125rem;
}

.debt-consolidation-example-debts {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

.debt-consolidation-example-debt-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(248, 250, 252, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.5);
  transition: all 0.3s ease;
}

.debt-consolidation-example-debt-item:hover {
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.2);
  transform: translateX(5px);
}

.debt-consolidation-example-debt-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: #10b981;
  min-width: 100px;
}

.debt-consolidation-example-debt-description {
  color: #374151;
  font-weight: 500;
  line-height: 1.5;
}

.debt-consolidation-example-results {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 15px;
  padding: 2rem;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.debt-consolidation-example-before,
.debt-consolidation-example-after {
  color: #374151;
  line-height: 1.6;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.debt-consolidation-example-before strong,
.debt-consolidation-example-after strong {
  color: #3b82f6;
  font-weight: 700;
}

/* Responsive Design for Debt Consolidation Benefits Section */
@media (max-width: 768px) {
  .debt-consolidation-benefits-section {
    padding: 3rem 0;
  }

  .debt-consolidation-benefits-title {
    font-size: 2rem;
  }

  .debt-consolidation-benefits-description {
    font-size: 1.125rem;
  }

  .debt-consolidation-benefits-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .debt-consolidation-benefits-card {
    padding: 2rem;
  }

  .debt-consolidation-benefits-card-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .debt-consolidation-benefits-card-icon {
    width: 50px;
    height: 50px;
  }

  .debt-consolidation-benefits-card-title {
    font-size: 1.25rem;
  }

  .debt-consolidation-benefits-card-description {
    font-size: 1rem;
  }

  .debt-consolidation-example-card {
    padding: 2rem;
  }

  .debt-consolidation-example-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .debt-consolidation-example-icon {
    width: 60px;
    height: 60px;
  }

  .debt-consolidation-example-title {
    font-size: 1.75rem;
  }

  .debt-consolidation-example-debt-item {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .debt-consolidation-example-debt-amount {
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .debt-consolidation-benefits-section {
    padding: 2rem 0;
  }

  .debt-consolidation-benefits-title {
    font-size: 1.75rem;
  }

  .debt-consolidation-benefits-description {
    font-size: 1rem;
  }

  .debt-consolidation-benefits-card {
    padding: 1.5rem;
  }

  .debt-consolidation-benefits-card-icon {
    width: 45px;
    height: 45px;
  }

  .debt-consolidation-benefits-icon-text {
    font-size: 1.25rem;
  }

  .debt-consolidation-benefits-card-title {
    font-size: 1.125rem;
  }

  .debt-consolidation-benefits-card-description {
    font-size: 0.9rem;
  }

  .debt-consolidation-benefits-item {
    padding: 0.75rem;
  }

  .debt-consolidation-benefits-item-icon {
    width: 25px;
    height: 25px;
    font-size: 1rem;
  }

  .debt-consolidation-example-card {
    padding: 1.5rem;
  }

  .debt-consolidation-example-icon {
    width: 50px;
    height: 50px;
  }

  .debt-consolidation-example-icon-text {
    font-size: 1.5rem;
  }

  .debt-consolidation-example-title {
    font-size: 1.5rem;
  }

  .debt-consolidation-example-description {
    font-size: 1rem;
  }

  .debt-consolidation-example-debt-item {
    padding: 1rem;
  }

  .debt-consolidation-example-debt-amount {
    font-size: 1.25rem;
  }

  .debt-consolidation-example-results {
    padding: 1.5rem;
  }

  .debt-consolidation-example-before,
  .debt-consolidation-example-after {
    font-size: 1rem;
  }
}

/* Home Equity Loans Section */
.home-equity-loans-section {
  position: relative;
  background: #ffffff;
  overflow: hidden;
}

/* Animated gradient text */
@keyframes animate-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: animate-gradient 3s ease infinite;
}

.home-equity-bg-shape {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(16, 185, 129, 0.02), rgba(37, 99, 235, 0.02));
  animation: homeEquityFloat 25s ease-in-out infinite;
}

.home-equity-bg-shape-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  left: -150px;
  animation-delay: 0s;
}

.home-equity-bg-shape-2 {
  width: 200px;
  height: 200px;
  top: 60%;
  right: -100px;
  animation-delay: 5s;
}

.home-equity-bg-shape-3 {
  width: 150px;
  height: 150px;
  top: 30%;
  right: 20%;
  animation-delay: 10s;
}

.home-equity-bg-shape-4 {
  width: 250px;
  height: 250px;
  bottom: 10%;
  left: 10%;
  animation-delay: 15s;
}

@keyframes homeEquityFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 0.6;
  }
}

.home-equity-main-title {
  color: #1f2937;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

@keyframes homeEquityTitleGradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.home-equity-video-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
}

.home-equity-video-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.35);
}

.responsive-embed {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.responsive-embed.widescreen {
  padding-bottom: 56.25%;
}

.responsive-embed iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.home-equity-content-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease-in-out;
  position: relative;
  backdrop-filter: blur(10px);
}

.home-equity-content-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-color: #d1d5db;
}

.home-equity-content-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.home-equity-content-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 2px;
  background: #10b981;
  border-radius: 1px;
}

.home-equity-content-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #374151;
  margin-bottom: 1rem;
}

.home-equity-link {
  color: #10b981;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
}

.home-equity-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #10b981;
  transition: width 0.3s ease;
}

.home-equity-link:hover::after {
  width: 100%;
}

.home-equity-link:hover {
  color: #059669;
}

/* Home Equity Calculator Section */
.home-equity-calculator-section {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 2rem;
  margin: 0;
  position: relative;
}


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

.home-equity-calculator-container {
  position: relative;
  z-index: 2;
}

.home-equity-calculator-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  text-align: center;
  margin-bottom: 1rem;
}

.home-equity-calculator-description {
  font-size: 1rem;
  color: #6b7280;
  text-align: center;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.home-equity-calculator-form {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.home-equity-form-step {
  display: none;
}

.home-equity-form-step.active {
  display: block;
  animation: homeEquityFormSlideIn 0.5s ease-out;
}

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

.home-equity-form-step-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  text-align: center;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.home-equity-form-row {
  margin-bottom: 1.5rem;
}

.home-equity-form-label {
  display: block;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.home-equity-form-input,
.home-equity-form-select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 1rem;
  transition: all 0.2s ease;
  background: white;
}

.home-equity-form-input:focus,
.home-equity-form-select:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.home-equity-form-subtitle {
  font-size: 1.1rem;
  font-weight: 600;
  color: #374151;
  margin: 1.5rem 0 1rem 0;
  text-align: center;
}

.home-equity-radio-group {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin: 1rem 0;
}

.home-equity-radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  color: #374151;
  transition: color 0.3s ease;
}

.home-equity-radio-label:hover {
  color: #10b981;
}

.home-equity-radio-label input[type="radio"] {
  margin-right: 0.5rem;
  accent-color: #10b981;
}

.home-equity-fieldset {
  margin: 1.5rem 0;
  padding: 1.5rem;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
}

.home-equity-fieldset.hidden {
  display: none;
}

.home-equity-form-footer {
  text-align: center;
  margin-top: 2rem;
}

.home-equity-form-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  margin: 0 0.5rem;
}

.home-equity-form-btn-primary {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.home-equity-form-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

.home-equity-form-btn-secondary {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
  box-shadow: 0 4px 15px rgba(107, 114, 128, 0.3);
}

.home-equity-form-btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(107, 114, 128, 0.4);
}

/* Apply Now Button */
.home-equity-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 2.5rem;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  text-decoration: none;
  border-radius: 12px;
  font-size: 1.125rem;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
  transition: all 0.3s ease;
  position: relative;
  border: none;
  cursor: pointer;
}

.home-equity-apply-btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
  transform: translateY(-2px);
}

.home-equity-apply-btn-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.home-equity-apply-btn:hover .home-equity-apply-btn-icon {
  transform: translateX(2px);
}

/* Rates Table */
.home-equity-rates-section {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.home-equity-rates-table-container {
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  margin: 1rem 0;
}

.home-equity-rates-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 15px;
}

.home-equity-rates-table thead {
  background: linear-gradient(135deg, #1f2937, #374151);
}

.home-equity-rates-table th {
  padding: 1.5rem 1rem;
  color: white;
  font-weight: 600;
  text-align: center;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.home-equity-rates-table td {
  padding: 1.5rem 1rem;
  text-align: center;
  border-bottom: 1px solid #e5e7eb;
  font-size: 1rem;
  color: #374151;
  transition: background-color 0.3s ease;
}

.home-equity-rates-table tbody tr:hover {
  background-color: #f8fafc;
}

.home-equity-rates-table tbody tr:last-child td {
  border-bottom: none;
}

.home-equity-rates-disclaimer {
  font-size: 0.9rem;
  color: #6b7280;
  font-style: italic;
  text-align: center;
  margin-top: 1.5rem;
  padding: 1rem;
  background: #f9fafb;
  border-radius: 10px;
  border-left: 4px solid #10b981;
}

/* Call to Action */
.home-equity-cta-text {
  font-size: 1.3rem;
  color: #374151;
  text-align: center;
  margin: 2rem 0;
  line-height: 1.6;
}

.home-equity-cta-link {
  color: #10b981;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
  position: relative;
}

.home-equity-cta-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 3px;
  background: #10b981;
  transition: width 0.3s ease;
}

.home-equity-cta-link:hover::after {
  width: 100%;
}

.home-equity-cta-link:hover {
  color: #059669;
}

/* Responsive Design */
@media (max-width: 768px) {
  .home-equity-main-title {
    font-size: 2.5rem;
  }

  .home-equity-content-card {
    padding: 2rem;
  }

  .home-equity-calculator-section {
    padding: 2rem;
  }

  .home-equity-calculator-form {
    padding: 1.5rem;
  }

  .home-equity-radio-group {
    flex-direction: column;
    gap: 1rem;
  }

  .home-equity-form-btn {
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
  }

  .home-equity-apply-btn {
    padding: 1.2rem 2rem;
    font-size: 1rem;
  }

@media (max-width: 480px) {
  .home-equity-main-title {
    font-size: 2rem;
  }

  .home-equity-content-card {
    padding: 1.5rem;
  }

  .home-equity-calculator-section {
    padding: 1.5rem;
  }

  .home-equity-calculator-form {
    padding: 1rem;
  }

  .home-equity-form-step-title {
    font-size: 1.2rem;
  }

  .home-equity-apply-btn {
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
  }

  .home-equity-cta-text {
    font-size: 1.1rem;
  }
}

/* Services Section Styles */
.section {
  padding: 4rem 0;
  background-color: #f8fafc;
}

.grid-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.section__head {
  text-align: center;
  margin-bottom: 3rem;
}

.section__title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #1e293b;
}

.section__title._black {
  color: #000000;
}

.section__head p {
  font-size: 1.125rem;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.services__cell {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
}

.services__cell:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
}

.service {
  padding: 2rem;
}

.service__header {
  margin-bottom: 1.5rem;
}

.service__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  line-height: 1.4;
}

.service__body {
  margin-top: 1rem;
}

.service__text {
  text-align: center;
  margin-bottom: 1rem;
}

.service__text p {
  color: #94a3b8;
  font-size: 0.875rem;
  margin: 0;
  padding: 0.5rem 1rem;
  background-color: #f1f5f9;
  border-radius: 6px;
  display: inline-block;
}

.service__hr {
  border: none;
  height: 1px;
  background-color: #e2e8f0;
  margin: 1rem 0;
}

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

.app-list._no-margin {
  margin: 0;
}

.app-list__item {
  padding: 0.75rem 0;
  color: #475569;
  font-size: 0.875rem;
  line-height: 1.5;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
  padding-left: 1.5rem;
}

.app-list__item:last-child {
  border-bottom: none;
}

.app-list__item::before {
  content: "•";
  color: #3b82f6;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0.75rem;
}

/* Responsive Design for Services */
@media (max-width: 768px) {
  .section {
    padding: 3rem 0;
  }

  .section__title {
    font-size: 2rem;
  }

  .services {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .service {
    padding: 1.5rem;
  }

  .service__title {
    font-size: 1.125rem;
  }
}

@media (max-width: 480px) {
  .section {
    padding: 2rem 0;
  }

  .section__title {
    font-size: 1.75rem;
  }

  .grid-container {
    padding: 0 0.75rem;
  }

  .service {
    padding: 1.25rem;
  }

  .app-list__item {
    font-size: 0.8rem;
    padding: 0.5rem 0;
    padding-left: 1.25rem;
  }
}

/* Credit Requirements Section Styles */
.credit-requirements-section {
  padding: 4rem 0;
  background-color: #f8f9fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.credit-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.credit-header {
  text-align: center;
  margin-bottom: 3rem;
}

.credit-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.credit-description {
  font-size: 1.125rem;
  color: #666;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
}

.credit-subtitle {
  text-align: center;
  margin-bottom: 2rem;
}

.credit-subtitle-text {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
}

.credit-table-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 3rem;
  overflow: hidden;
}

.credit-table-header {
  background: #28a745;
  color: white;
}

.credit-table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  padding: 1.5rem 2rem;
}

.credit-table-row-alt {
  background-color: #f8f9fa;
}

.credit-table-cell {
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
}

.credit-table-header .credit-table-cell {
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
}

.credit-table-body {
  background: white;
}

.credit-category {
  font-weight: 600;
  color: #333;
}

.credit-score {
  font-weight: 600;
  color: #333;
}

.credit-rate {
  font-weight: 600;
  color: #333;
}

.credit-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.credit-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.credit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.credit-card-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}

.credit-card-icon-blue {
  color: #007bff;
}

.credit-card-icon-green {
  color: #28a745;
}

.credit-card-icon-purple {
  color: #6f42c1;
}

.credit-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
  text-align: center;
}

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

.credit-card-list li {
  padding: 0.5rem 0;
  color: #666;
  font-size: 0.95rem;
  line-height: 1.5;
  position: relative;
  padding-left: 1.5rem;
}

.credit-card-list li::before {
  content: "•";
  color: #007bff;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0.5rem;
}

.credit-cta-container {
  text-align: center;
}

.credit-cta-box {
  background: white;
  border-radius: 12px;
  padding: 3rem 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
}

.credit-cta-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .credit-container {
    padding: 0 1rem;
  }

  .credit-title {
    font-size: 2rem;
  }

  .credit-description {
    font-size: 1rem;
  }

  .credit-table-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1rem;
  }

  .credit-table-cell {
    text-align: left;
    padding: 0.5rem 0;
  }

  .credit-cards-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .credit-card {
    padding: 1.5rem;
  }

  .credit-cta-box {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .credit-requirements-section {
    padding: 2rem 0;
  }

  .credit-title {
    font-size: 1.75rem;
  }

  .credit-subtitle-text {
    font-size: 1.25rem;
  }

  .credit-card {
    padding: 1.25rem;
  }

  .credit-card-title {
    font-size: 1.125rem;
  }

  .credit-cta-title {
    font-size: 1.25rem;
  }
}

/* Industry Solutions Section Animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 1s ease-out;
}

.animate-slide-up {
  animation: slide-up 1.2s ease-out 0.3s both;
}

/* Enhanced shadow for cards */
.shadow-3xl {
  box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.25);
}
}

/* ========================================
   PRIVATE MORTGAGE TYPES SECTION
   ======================================== */

.private-mortgage-types-section {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
  overflow: hidden;
  padding: 4rem 0;
}
.banner-btn{
  margin-bottom: 0;
}

.private-types-bg-shape {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(16, 185, 129, 0.03), rgba(37, 99, 235, 0.03));
  animation: privateTypesBackgroundFloat 20s ease-in-out infinite;
}

@keyframes privateTypesBackgroundFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(1deg); }
}

.private-types-floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.private-types-float-element {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(16, 185, 129, 0.1), rgba(37, 99, 235, 0.1));
  animation: privateTypesFloat 15s ease-in-out infinite;
}

.private-types-float-1 {
  width: 80px;
  height: 80px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.private-types-float-2 {
  width: 120px;
  height: 120px;
  top: 60%;
  right: 15%;
  animation-delay: 5s;
}

.private-types-float-3 {
  width: 60px;
  height: 60px;
  bottom: 30%;
  left: 20%;
  animation-delay: 10s;
}

@keyframes privateTypesFloat {
  0%, 100% { transform: translateY(0px) scale(1); opacity: 0.3; }
  50% { transform: translateY(-30px) scale(1.1); opacity: 0.6; }
}

.private-types-header {
  margin-bottom: 4rem;
}

.private-types-title {
  font-size: 3rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  position: relative;
  animation: privateTypesTitleGlow 3s ease-in-out infinite;
}

@keyframes privateTypesTitleGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(16, 185, 129, 0.3); }
  50% { text-shadow: 0 0 30px rgba(16, 185, 129, 0.5); }
}

.private-types-title-underline {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #10b981, #3b82f6);
  margin: 0 auto;
  border-radius: 2px;
  animation: privateTypesUnderlinePulse 2s ease-in-out infinite;
}

@keyframes privateTypesUnderlinePulse {
  0%, 100% { transform: scaleX(1); opacity: 0.8; }
  50% { transform: scaleX(1.2); opacity: 1; }
}

.private-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.private-types-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(229, 231, 235, 0.5);
}

.private-types-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #10b981, #3b82f6);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.private-types-card:hover::before {
  transform: scaleX(1);
}

.private-types-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 8px 16px -4px rgba(0, 0, 0, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}

.private-types-card-inner {
  position: relative;
  z-index: 2;
}

.private-types-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.private-types-card-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #10b981, #3b82f6);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  animation: privateTypesIconPulse 2s ease-in-out infinite;
}

@keyframes privateTypesIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.private-types-card-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #10b981;
  margin: 0;
  line-height: 1.3;
}

.private-types-card-content {
  color: #374151;
}

.private-types-card-description {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #6b7280;
}

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

.private-types-item {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.6;
  transition: all 0.2s ease;
}

.private-types-item::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #10b981;
  font-weight: bold;
  font-size: 1.1rem;
}

.private-types-item:hover {
  transform: translateX(4px);
  color: #1f2937;
}

.private-types-item strong {
  color: #3b82f6;
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
}

.private-types-item strong::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #3b82f6;
  transition: width 0.2s ease;
}

.private-types-item:hover strong::after {
  width: 100%;
}

.private-types-item:hover strong {
  color: #1d4ed8;
}

.private-types-link {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
}

.private-types-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #3b82f6;
  transition: width 0.2s ease;
}

.private-types-link:hover::after {
  width: 100%;
}

.private-types-link:hover {
  color: #1d4ed8;
}

.private-types-additional {
  margin-top: 1.5rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(37, 99, 235, 0.05));
  border-radius: 8px;
  border-left: 4px solid #10b981;
  font-size: 1rem;
  line-height: 1.6;
  color: #374151;
}

/* Responsive Design */
@media (max-width: 768px) {
  .private-types-title {
    font-size: 2.5rem;
  }

  .private-types-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .private-types-card {
    padding: 1.5rem;
  }

  .private-types-card-header {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .private-types-card-icon {
    width: 40px;
    height: 40px;
  }

  .private-types-card-title {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .private-types-title {
    font-size: 2rem;
  }

  .private-types-card {
    padding: 1.25rem;
  }

  .private-types-card-icon {
    width: 36px;
    height: 36px;
  }

  .private-types-card-title {
    font-size: 1.125rem;
  }

  .private-types-item {
    padding-left: 1.25rem;
  }
}

/* ========================================
   PRIVATE MORTGAGE ADVANTAGES SECTION
   ======================================== */

.private-mortgage-advantages-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
}

.private-advantages-bg-shape {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(16, 185, 129, 0.02), rgba(37, 99, 235, 0.02));
  animation: privateAdvantagesBackgroundFloat 25s ease-in-out infinite;
}

@keyframes privateAdvantagesBackgroundFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(0.5deg); }
}

.private-advantages-floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.private-advantages-float-element {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(16, 185, 129, 0.08), rgba(37, 99, 235, 0.08));
  animation: privateAdvantagesFloat 18s ease-in-out infinite;
}

.private-advantages-float-1 {
  width: 100px;
  height: 100px;
  top: 15%;
  left: 8%;
  animation-delay: 0s;
}

.private-advantages-float-2 {
  width: 80px;
  height: 80px;
  top: 70%;
  right: 12%;
  animation-delay: 6s;
}

.private-advantages-float-3 {
  width: 60px;
  height: 60px;
  bottom: 20%;
  left: 15%;
  animation-delay: 12s;
}

@keyframes privateAdvantagesFloat {
  0%, 100% { transform: translateY(0px) scale(1); opacity: 0.2; }
  50% { transform: translateY(-25px) scale(1.05); opacity: 0.4; }
}

.private-advantages-header {
  margin-bottom: 4rem;
}

.private-advantages-title {
  font-size: 3rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  position: relative;
  animation: privateAdvantagesTitleGlow 4s ease-in-out infinite;
}

@keyframes privateAdvantagesTitleGlow {
  0%, 100% { text-shadow: 0 0 15px rgba(16, 185, 129, 0.2); }
  50% { text-shadow: 0 0 25px rgba(16, 185, 129, 0.4); }
}

.private-advantages-title-underline {
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, #10b981, #3b82f6);
  margin: 0 auto;
  border-radius: 2px;
  animation: privateAdvantagesUnderlinePulse 3s ease-in-out infinite;
}

@keyframes privateAdvantagesUnderlinePulse {
  0%, 100% { transform: scaleX(1); opacity: 0.7; }
  50% { transform: scaleX(1.3); opacity: 1; }
}

.private-advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

.private-advantages-column {
  background: #ffffff;
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.08), 0 5px 15px -5px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(229, 231, 235, 0.3);
}

.private-advantages-column::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #10b981, #3b82f6);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.private-advantages-column:hover::before {
  transform: scaleX(1);
}

.private-advantages-column:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px -15px rgba(0, 0, 0, 0.12), 0 10px 25px -8px rgba(0, 0, 0, 0.08);
  border-color: rgba(16, 185, 129, 0.2);
}

.private-advantages-column-inner {
  position: relative;
  z-index: 2;
}

.private-advantages-column-header {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1.25rem;
}

.private-advantages-column-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #10b981, #3b82f6);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  animation: privateAdvantagesIconPulse 2.5s ease-in-out infinite;
}

@keyframes privateAdvantagesIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.private-advantages-column-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #10b981;
  margin: 0;
  line-height: 1.3;
}

.private-advantages-column-content {
  color: #374151;
}

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

.private-advantages-item {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
  position: relative;
  line-height: 1.7;
  transition: all 0.3s ease;
}

.private-advantages-item::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #10b981;
  font-weight: bold;
  font-size: 1.2rem;
}

.private-advantages-item:hover {
  transform: translateX(6px);
  color: #1f2937;
}

.private-advantages-item strong {
  color: #3b82f6;
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
}

.private-advantages-item strong::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #3b82f6;
  transition: width 0.2s ease;
}

.private-advantages-item:hover strong::after {
  width: 100%;
}

.private-advantages-item:hover strong {
  color: #1d4ed8;
}

.private-advantages-additional {
  margin-top: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(37, 99, 235, 0.08));
  border-radius: 12px;
  border-left: 5px solid #10b981;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #374151;
  transition: all 0.3s ease;
}

.private-advantages-additional:hover {
  transform: translateX(4px);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(37, 99, 235, 0.12));
}

.private-advantages-additional strong {
  color: #3b82f6;
  font-weight: 600;
}

.private-advantages-cta {
  margin-top: 4rem;
}

.private-advantages-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 2.5rem;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.3), 0 4px 6px -2px rgba(16, 185, 129, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.private-advantages-cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.private-advantages-cta-button:hover::before {
  left: 100%;
}

.private-advantages-cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px -8px rgba(16, 185, 129, 0.4), 0 8px 15px -5px rgba(16, 185, 129, 0.2);
  background: linear-gradient(135deg, #059669, #047857);
}

.private-advantages-cta-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.private-advantages-cta-button:hover .private-advantages-cta-icon {
  transform: translateX(3px);
}

/* Responsive Design */
@media (max-width: 768px) {
  .private-mortgage-advantages-section {
    padding: 4rem 0;
  }

  .private-advantages-title {
    font-size: 2.5rem;
  }

  .private-advantages-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .private-advantages-column {
    padding: 2rem;
  }

  .private-advantages-column-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .private-advantages-column-icon {
    width: 48px;
    height: 48px;
  }

  .private-advantages-column-title {
    font-size: 1.5rem;
  }

  .private-advantages-cta-button {
    padding: 1rem 2rem;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .private-mortgage-advantages-section {
    padding: 3rem 0;
  }

  .private-advantages-title {
    font-size: 2rem;
  }

  .private-advantages-column {
    padding: 1.5rem;
  }

  .private-advantages-column-icon {
    width: 40px;
    height: 40px;
  }

  .private-advantages-column-title {
    font-size: 1.25rem;
  }

  .private-advantages-item {
    padding-left: 1.5rem;
  }

  .private-advantages-cta-button {
    padding: 0.875rem 1.5rem;
    font-size: 0.875rem;
  }
}

/* ========================================
   PRIVATE MORTGAGE RATES SECTION
   ======================================== */

.private-mortgage-rates-section {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
}

.private-rates-bg-shape {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(16, 185, 129, 0.03), rgba(37, 99, 235, 0.03));
  animation: privateRatesBackgroundFloat 22s ease-in-out infinite;
}

@keyframes privateRatesBackgroundFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(0.8deg); }
}

.private-rates-floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.private-rates-float-element {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(16, 185, 129, 0.06), rgba(37, 99, 235, 0.06));
  animation: privateRatesFloat 16s ease-in-out infinite;
}

.private-rates-float-1 {
  width: 90px;
  height: 90px;
  top: 12%;
  left: 12%;
  animation-delay: 0s;
}

.private-rates-float-2 {
  width: 70px;
  height: 70px;
  top: 65%;
  right: 10%;
  animation-delay: 8s;
}

.private-rates-float-3 {
  width: 50px;
  height: 50px;
  bottom: 25%;
  left: 18%;
  animation-delay: 16s;
}

@keyframes privateRatesFloat {
  0%, 100% { transform: translateY(0px) scale(1); opacity: 0.25; }
  50% { transform: translateY(-22px) scale(1.06); opacity: 0.45; }
}

.private-rates-header {
  margin-bottom: 4rem;
}

.private-rates-title {
  font-size: 3rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  position: relative;
  animation: privateRatesTitleGlow 3.5s ease-in-out infinite;
}

@keyframes privateRatesTitleGlow {
  0%, 100% { text-shadow: 0 0 18px rgba(16, 185, 129, 0.25); }
  50% { text-shadow: 0 0 28px rgba(16, 185, 129, 0.45); }
}

.private-rates-title-underline {
  width: 120px;
  height: 4px;
  background: linear-gradient(90deg, #10b981, #3b82f6);
  margin: 0 auto;
  border-radius: 2px;
  animation: privateRatesUnderlinePulse 2.5s ease-in-out infinite;
}

@keyframes privateRatesUnderlinePulse {
  0%, 100% { transform: scaleX(1); opacity: 0.75; }
  50% { transform: scaleX(1.25); opacity: 1; }
}

.private-rates-breakdown {
  max-width: 800px;
  margin: 0 auto;
}

.private-rates-breakdown-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.08), 0 5px 15px -5px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(229, 231, 235, 0.3);
}

.private-rates-breakdown-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #10b981, #3b82f6);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.private-rates-breakdown-card:hover::before {
  transform: scaleX(1);
}

.private-rates-breakdown-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -15px rgba(0, 0, 0, 0.12), 0 10px 25px -8px rgba(0, 0, 0, 0.08);
  border-color: rgba(16, 185, 129, 0.2);
}

.private-rates-breakdown-header {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1.25rem;
}

.private-rates-breakdown-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #10b981, #3b82f6);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  animation: privateRatesIconPulse 2.8s ease-in-out infinite;
}

@keyframes privateRatesIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.private-rates-breakdown-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #10b981;
  margin: 0;
  line-height: 1.3;
}

.private-rates-breakdown-content {
  color: #374151;
}

.private-rates-breakdown-description {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #6b7280;
}

.private-rates-breakdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.private-rates-breakdown-item {
  margin-bottom: 1.25rem;
  padding-left: 2rem;
  position: relative;
  line-height: 1.7;
  transition: all 0.3s ease;
}

.private-rates-breakdown-item::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #10b981;
  font-weight: bold;
  font-size: 1.2rem;
}

.private-rates-breakdown-item:hover {
  transform: translateX(6px);
  color: #1f2937;
}

.private-rates-breakdown-item strong {
  color: #3b82f6;
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
}

.private-rates-breakdown-item strong::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #3b82f6;
  transition: width 0.2s ease;
}

.private-rates-breakdown-item:hover strong::after {
  width: 100%;
}

.private-rates-breakdown-item:hover strong {
  color: #1d4ed8;
}

.private-rates-table-container {
  background: #ffffff;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.08), 0 5px 15px -5px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(229, 231, 235, 0.3);
  overflow: hidden;
  position: relative;
  margin-top: 3rem;
}

.private-rates-table-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #10b981, #3b82f6);
}

.private-rates-table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
}

.private-rates-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  min-width: 600px;
}

.private-rates-header-row {
  background: linear-gradient(135deg, #10b981, #059669);
  position: relative;
}

.private-rates-header-cell {
  padding: 1.25rem 1rem;
  text-align: center;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  border: none;
  position: relative;
}

.private-rates-header-cell:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.private-rates-data-row {
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
}

.private-rates-data-row:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(37, 99, 235, 0.05));
  transform: scale(1.01);
}

.private-rates-highlighted-row {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(37, 99, 235, 0.08));
  border: 2px solid rgba(16, 185, 129, 0.2);
}

.private-rates-highlighted-row:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(37, 99, 235, 0.12));
}

.private-rates-term-cell {
  padding: 1rem;
  text-align: center;
  font-weight: 600;
  color: #1f2937;
  border-right: 1px solid rgba(229, 231, 235, 0.5);
}

.private-rates-rate-cell {
  padding: 1rem;
  text-align: center;
  font-weight: 500;
  color: #374151;
  border-right: 1px solid rgba(229, 231, 235, 0.5);
  transition: all 0.2s ease;
}

.private-rates-rate-cell:last-child {
  border-right: none;
}

.private-rates-rate-cell:hover {
  color: #10b981;
  font-weight: 600;
}









/* Responsive Design */
@media (max-width: 768px) {
  .private-mortgage-rates-section {
    padding: 4rem 0;
  }

  .private-rates-title {
    font-size: 2.5rem;
  }

  .private-rates-breakdown-card {
    padding: 2rem;
  }

  .private-rates-breakdown-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .private-rates-breakdown-icon {
    width: 48px;
    height: 48px;
  }

  .private-rates-breakdown-title {
    font-size: 1.5rem;
  }

  .private-rates-table-container {
    padding: 1.5rem;
  }

  .private-rates-table {
    font-size: 0.875rem;
    min-width: 500px;
  }

  .private-rates-header-cell {
    padding: 1rem 0.75rem;
    font-size: 0.75rem;
  }

  .private-rates-term-cell,
  .private-rates-rate-cell {
    padding: 0.875rem 0.5rem;
  }

}

@media (max-width: 480px) {
  .private-mortgage-rates-section {
    padding: 3rem 0;
  }

  .private-rates-title {
    font-size: 2rem;
  }

  .private-rates-breakdown-card {
    padding: 1.5rem;
  }

  .private-rates-breakdown-icon {
    width: 40px;
    height: 40px;
  }

  .private-rates-breakdown-title {
    font-size: 1.25rem;
  }

  .private-rates-breakdown-item {
    padding-left: 1.5rem;
  }

  .private-rates-table-container {
    padding: 1rem;
  }

  .private-rates-table {
    font-size: 0.75rem;
    min-width: 400px;
  }

  .private-rates-header-cell {
    padding: 0.875rem 0.5rem;
    font-size: 0.7rem;
  }

  .private-rates-term-cell,
  .private-rates-rate-cell {
    padding: 0.75rem 0.375rem;
  }

}

/* ========================================
   PRIVATE MORTGAGE RATES SECTION
   ======================================== */

.private-mortgage-rates-section {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
}

.private-rates-bg-shape {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(16, 185, 129, 0.03), rgba(37, 99, 235, 0.03));
  animation: privateRatesBackgroundFloat 22s ease-in-out infinite;
}

@keyframes privateRatesBackgroundFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(0.8deg); }
}

.private-rates-floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.private-rates-float-element {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(45deg, rgba(16, 185, 129, 0.06), rgba(37, 99, 235, 0.06));
  animation: privateRatesFloat 16s ease-in-out infinite;
}

.private-rates-float-1 {
  width: 90px;
  height: 90px;
  top: 12%;
  left: 12%;
  animation-delay: 0s;
}

.private-rates-float-2 {
  width: 70px;
  height: 70px;
  top: 65%;
  right: 10%;
  animation-delay: 8s;
}

.private-rates-float-3 {
  width: 50px;
  height: 50px;
  bottom: 25%;
  left: 18%;
  animation-delay: 16s;
}

@keyframes privateRatesFloat {
  0%, 100% { transform: translateY(0px) scale(1); opacity: 0.25; }
  50% { transform: translateY(-22px) scale(1.06); opacity: 0.45; }
}

.private-rates-header {
  margin-bottom: 4rem;
}

.private-rates-title {
  font-size: 3rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  position: relative;
  animation: privateRatesTitleGlow 3.5s ease-in-out infinite;
}

@keyframes privateRatesTitleGlow {
  0%, 100% { text-shadow: 0 0 18px rgba(16, 185, 129, 0.25); }
  50% { text-shadow: 0 0 28px rgba(16, 185, 129, 0.45); }
}

.private-rates-title-underline {
  width: 120px;
  height: 4px;
  background: linear-gradient(90deg, #10b981, #3b82f6);
  margin: 0 auto;
  border-radius: 2px;
  animation: privateRatesUnderlinePulse 2.5s ease-in-out infinite;
}

@keyframes privateRatesUnderlinePulse {
  0%, 100% { transform: scaleX(1); opacity: 0.75; }
  50% { transform: scaleX(1.25); opacity: 1; }
}

.private-rates-breakdown {
  max-width: 800px;
  margin: 0 auto;
}

.private-rates-breakdown-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.08), 0 5px 15px -5px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(229, 231, 235, 0.3);
}

.private-rates-breakdown-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #10b981, #3b82f6);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.private-rates-breakdown-card:hover::before {
  transform: scaleX(1);
}

.private-rates-breakdown-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -15px rgba(0, 0, 0, 0.12), 0 10px 25px -8px rgba(0, 0, 0, 0.08);
  border-color: rgba(16, 185, 129, 0.2);
}

.private-rates-breakdown-header {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1.25rem;
}

.private-rates-breakdown-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #10b981, #3b82f6);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  animation: privateRatesIconPulse 2.8s ease-in-out infinite;
}

@keyframes privateRatesIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.private-rates-breakdown-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #10b981;
  margin: 0;
  line-height: 1.3;
}

.private-rates-breakdown-content {
  color: #374151;
}

.private-rates-breakdown-description {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #6b7280;
}

.private-rates-breakdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.private-rates-breakdown-item {
  margin-bottom: 1.25rem;
  padding-left: 2rem;
  position: relative;
  line-height: 1.7;
  transition: all 0.3s ease;
}

.private-rates-breakdown-item::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #10b981;
  font-weight: bold;
  font-size: 1.2rem;
}

.private-rates-breakdown-item:hover {
  transform: translateX(6px);
  color: #1f2937;
}

.private-rates-breakdown-item strong {
  color: #3b82f6;
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
}

.private-rates-breakdown-item strong::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #3b82f6;
  transition: width 0.2s ease;
}

.private-rates-breakdown-item:hover strong::after {
  width: 100%;
}

.private-rates-breakdown-item:hover strong {
  color: #1d4ed8;
}

.private-rates-table-container {
  background: #ffffff;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.08), 0 5px 15px -5px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(229, 231, 235, 0.3);
  overflow: hidden;
  position: relative;
}

.private-rates-table-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #10b981, #3b82f6);
}

.private-rates-table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
}

.private-rates-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  min-width: 600px;
}

.private-rates-header-row {
  background: linear-gradient(135deg, #10b981, #059669);
  position: relative;
}

.private-rates-header-cell {
  padding: 1.25rem 1rem;
  text-align: center;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  border: none;
  position: relative;
}

.private-rates-header-cell:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.private-rates-data-row {
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
}

.private-rates-data-row:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(37, 99, 235, 0.05));
  transform: scale(1.01);
}

.private-rates-highlighted-row {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(37, 99, 235, 0.08));
  border: 2px solid rgba(16, 185, 129, 0.2);
}

.private-rates-highlighted-row:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(37, 99, 235, 0.12));
}

.private-rates-term-cell {
  padding: 1rem;
  text-align: center;
  font-weight: 600;
  color: #1f2937;
  border-right: 1px solid rgba(229, 231, 235, 0.5);
}

.private-rates-rate-cell {
  padding: 1rem;
  text-align: center;
  font-weight: 500;
  color: #374151;
  border-right: 1px solid rgba(229, 231, 235, 0.5);
  transition: all 0.2s ease;
}

.private-rates-rate-cell:last-child {
  border-right: none;
}

.private-rates-rate-cell:hover {
  color: #10b981;
  font-weight: 600;
}









/* Responsive Design */
@media (max-width: 768px) {
  .private-mortgage-rates-section {
    padding: 4rem 0;
  }

  .private-rates-title {
    font-size: 2.5rem;
  }

  .private-rates-breakdown-card {
    padding: 2rem;
  }

  .private-rates-breakdown-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .private-rates-breakdown-icon {
    width: 48px;
    height: 48px;
  }

  .private-rates-breakdown-title {
    font-size: 1.5rem;
  }

  .private-rates-table-container {
    padding: 1.5rem;
  }

  .private-rates-table {
    font-size: 0.875rem;
    min-width: 500px;
  }

  .private-rates-header-cell {
    padding: 1rem 0.75rem;
    font-size: 0.75rem;
  }

  .private-rates-term-cell,
  .private-rates-rate-cell {
    padding: 0.875rem 0.5rem;
  }

}

@media (max-width: 480px) {
  .private-mortgage-rates-section {
    padding: 3rem 0;
  }

  .private-rates-title {
    font-size: 2rem;
  }

  .private-rates-breakdown-card {
    padding: 1.5rem;
  }

  .private-rates-breakdown-icon {
    width: 40px;
    height: 40px;
  }

  .private-rates-breakdown-title {
    font-size: 1.25rem;
  }

  .private-rates-breakdown-item {
    padding-left: 1.5rem;
  }

  .private-rates-table-container {
    padding: 1rem;
  }

  .private-rates-table {
    font-size: 0.75rem;
    min-width: 400px;
  }

  .private-rates-header-cell {
    padding: 0.875rem 0.5rem;
    font-size: 0.7rem;
  }

  .private-rates-term-cell,
  .private-rates-rate-cell {
    padding: 0.75rem 0.375rem;
  }

}

/* ========================================
   HEADER ANIMATIONS & ENHANCED STYLES
   ======================================== */

/* Download App Link Animations */
@keyframes header-pulse-glow {
  0%, 100% {
    text-shadow: 0 0 5px #FBD525, 0 0 10px #FBD525, 0 0 15px #FBD525;
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 10px #FBD525, 0 0 20px #FBD525, 0 0 30px #FBD525;
    transform: scale(1.05);
  }
}

@keyframes header-bounce-in {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes header-wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

@keyframes header-gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes downloadPulse {
  0%, 100% {
    transform: scale(1);
    text-shadow: 0 0 15px rgba(251, 213, 37, 0.6), 0 0 25px rgba(251, 213, 37, 0.4);
  }
  50% {
    transform: scale(1.08);
    text-shadow: 0 0 25px rgba(251, 213, 37, 0.9), 0 0 35px rgba(251, 213, 37, 0.7), 0 0 45px rgba(251, 213, 37, 0.5);
  }
}

@keyframes downloadShimmer {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes downloadUnderline {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow: 0 0 10px rgba(251, 213, 37, 0.5);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 0 0 15px rgba(251, 213, 37, 0.8), 0 0 25px rgba(251, 213, 37, 0.4);
  }
}

/* Header Download App Link Styles */
.top-nav .heading-title .download-app-link {
  position: relative;
  overflow: hidden;
  background: linear-gradient(45deg, #FBD525, #FFD700, #FFA500, #FBD525, #FFD700);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: header-gradient-shift 2s ease infinite, downloadPulse 1.5s ease-in-out infinite;
  color: transparent !important;
  text-shadow: 0 0 15px rgba(251, 213, 37, 0.6);
  transform: scale(1);
}

.top-nav .heading-title .download-app-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: downloadShimmer 2.5s ease-in-out infinite;
}

.top-nav .heading-title .download-app-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #FBD525, #FFD700, #FFA500, #FBD525, #FFD700);
  background-size: 200% 100%;
  animation: downloadUnderline 2s ease-in-out infinite;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(251, 213, 37, 0.5);
}

.top-nav .heading-title .download-app-link:hover {
  animation-play-state: paused;
  text-shadow: 0 0 20px #FBD525, 0 0 30px #FBD525, 0 0 40px #FBD525;
  transform: scale(1.1);
}

.top-nav .heading-title .download-app-link:hover::before {
  animation-play-state: paused;
  left: 100%;
}

.top-nav .heading-title .download-app-link:hover::after {
  animation-play-state: paused;
  box-shadow: 0 0 20px rgba(251, 213, 37, 1), 0 0 30px rgba(251, 213, 37, 0.6);
}


/* Get Started Today Button */
.detail-contact-cta {
  text-align: center;
  margin-top: 3rem;
}

.get-started-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 50px;
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
  position: relative;
  overflow: hidden;
}

.get-started-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.get-started-btn:hover::before {
  left: 100%;
}

.get-started-btn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
}

.get-started-btn .btn-icon {
  transition: transform 0.3s ease;
}

.get-started-btn:hover .btn-icon {
  transform: translateX(3px);
}

.get-started-btn:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Header Social Icons Enhanced Animations */
.top-nav .social-icon {
  position: relative;
  overflow: hidden;
  animation: header-bounce-in 0.6s ease-out;
}

.top-nav .social-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.top-nav .social-icon:hover::before {
  width: 100%;
  height: 100%;
}

.top-nav .social-icon:hover {
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.top-nav .facebook-icon:hover {
  background: linear-gradient(135deg, #1877f2, #42a5f5) !important;
  box-shadow: 0 8px 25px rgba(24, 119, 242, 0.4);
}

.top-nav .instagram-icon:hover {
  background: linear-gradient(135deg, #e4405f, #fd1d1d, #fcb045) !important;
  box-shadow: 0 8px 25px rgba(228, 64, 95, 0.4);
}

.top-nav .google-icon:hover {
  background: linear-gradient(135deg, #ea4335, #fbbc05, #34a853, #4285f4) !important;
  box-shadow: 0 8px 25px rgba(234, 67, 53, 0.4);
}

.top-nav .linkedin-icon:hover {
  background: linear-gradient(135deg, #0077b5, #00a0dc) !important;
  box-shadow: 0 8px 25px rgba(0, 119, 181, 0.4);
}

/* Staggered animation for header social icons */
.top-nav .social-icon:nth-child(1) { animation-delay: 0.1s; }
.top-nav .social-icon:nth-child(2) { animation-delay: 0.2s; }
.top-nav .social-icon:nth-child(3) { animation-delay: 0.3s; }
.top-nav .social-icon:nth-child(4) { animation-delay: 0.4s; }

/* Global Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Ensure proper spacing for fixed header when scrolling to sections */
section[id] {
  scroll-margin-top: 100px;
}

/* Cache bust: Updated header animations - v2.4 - Added chevron color change */

/* ========================================
   DETAIL CONTACT SECTION - ISOLATED STYLES
   ======================================== */

/* Detail Contact Section - Isolated Styles */
.detail-contact-section {
  position: relative;
  padding: 6rem 0 4rem 0;
  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 50%, #ffffff 100%);
  overflow: hidden;
}

/* Animated Background */
.detail-contact-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.detail-contact-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 40% 60%, rgba(29, 78, 216, 0.06) 0%, transparent 50%);
  animation: detail-contact-bg-shift 20s ease-in-out infinite;
}

/* Floating Particles */
.detail-contact-particle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(45deg, #2563eb, #3b82f6);
  opacity: 0.1;
  animation: detail-contact-particle-float 15s linear infinite;
}

.detail-contact-particle-1 {
  width: 8px;
  height: 8px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
  animation-duration: 18s;
}

.detail-contact-particle-2 {
  width: 12px;
  height: 12px;
  top: 60%;
  left: 80%;
  animation-delay: 3s;
  animation-duration: 22s;
}

.detail-contact-particle-3 {
  width: 6px;
  height: 6px;
  top: 80%;
  left: 20%;
  animation-delay: 6s;
  animation-duration: 16s;
}

.detail-contact-particle-4 {
  width: 10px;
  height: 10px;
  top: 30%;
  left: 70%;
  animation-delay: 9s;
  animation-duration: 20s;
}

.detail-contact-particle-5 {
  width: 14px;
  height: 14px;
  top: 70%;
  left: 50%;
  animation-delay: 12s;
  animation-duration: 24s;
}

/* Floating Shapes */
.detail-contact-shapes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.detail-contact-shape {
  position: absolute;
  background: linear-gradient(45deg, rgba(37, 99, 235, 0.05), rgba(59, 130, 246, 0.03));
  border-radius: 20px;
  animation: detail-contact-shape-float 25s ease-in-out infinite;
}

.detail-contact-shape-1 {
  width: 100px;
  height: 100px;
  top: 10%;
  right: 10%;
  animation-delay: 0s;
  transform: rotate(45deg);
}

.detail-contact-shape-2 {
  width: 80px;
  height: 80px;
  bottom: 20%;
  left: 5%;
  animation-delay: 8s;
  transform: rotate(-30deg);
  border-radius: 50%;
}

.detail-contact-shape-3 {
  width: 120px;
  height: 60px;
  top: 50%;
  left: 80%;
  animation-delay: 16s;
  transform: rotate(15deg);
}

/* Container */
.detail-contact-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 10;
}

.detail-contact-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* Title */
.detail-contact-title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, #2563eb, #3b82f6, #1d4ed8);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: detail-contact-title-glow 3s ease-in-out infinite;
  position: relative;
}

/* Special styling for Shikha Ahuja name */
.detail-contact-name {
  background: linear-gradient(135deg, #dc2626, #ef4444, #f87171) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: detail-contact-name-glow 3s ease-in-out infinite !important;
  font-weight: 800 !important;
}

.detail-contact-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: #64748b;
  margin-bottom: 2rem;
  font-weight: 500;
  opacity: 0;
  animation: detail-contact-fade-in 1s ease-out 1s forwards;
}

/* Contact Methods */
.detail-contact-methods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* Desktop Layout - First two cards on top, third centered below */
@media (min-width: 769px) and (max-width: 1365px) {
  .detail-contact-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    align-items: center;
    gap: 1.5rem;
    row-gap: 1.5rem;
  }

  .detail-contact-method:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 0;
  }
}

/* Large Desktop Layout - All three cards in single line */
@media (min-width: 1366px) {
  .detail-contact-methods {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: nowrap;
  }

  .detail-contact-method {
    flex: 0 0 auto;
    max-width: 300px;
  }
}

/* ========================================
   PRIVACY POLICY SECTION STYLES
   ======================================== */

/* Main Privacy Policy Section */
.privacy-policy-main-section {
  position: relative;
  padding: 6rem 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
}

/* Animated Background Elements */
.privacy-bg-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.privacy-bg-circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 197, 253, 0.05));
  animation: privacyFloat 20s ease-in-out infinite;
}

.privacy-bg-circle-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  left: -5%;
  animation-delay: 0s;
}

.privacy-bg-circle-2 {
  width: 200px;
  height: 200px;
  top: 60%;
  right: -3%;
  animation-delay: 7s;
}

.privacy-bg-circle-3 {
  width: 150px;
  height: 150px;
  top: 30%;
  right: 20%;
  animation-delay: 14s;
}

.privacy-bg-shape {
  position: absolute;
  background: linear-gradient(45deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.05));
  animation: privacyRotate 25s linear infinite;
}

.privacy-bg-shape-1 {
  width: 100px;
  height: 100px;
  top: 20%;
  left: 10%;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  animation-delay: 0s;
}

.privacy-bg-shape-2 {
  width: 80px;
  height: 80px;
  top: 70%;
  left: 80%;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  animation-delay: 12s;
}

/* Floating Icons */
.privacy-floating-icons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.privacy-icon {
  position: absolute;
  font-size: 2rem;
  opacity: 0.1;
  animation: privacyIconFloat 15s ease-in-out infinite;
}

.privacy-icon-1 {
  top: 15%;
  left: 5%;
  animation-delay: 0s;
}

.privacy-icon-2 {
  top: 25%;
  right: 10%;
  animation-delay: 3s;
}

.privacy-icon-3 {
  top: 65%;
  left: 8%;
  animation-delay: 6s;
}

.privacy-icon-4 {
  top: 75%;
  right: 15%;
  animation-delay: 9s;
}

/* Container */
.privacy-policy-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 10;
  width: 100%;
  box-sizing: border-box;
}

/* Flexbox Layout */
.privacy-grid-container {
  width: 100%;
}

.privacy-grid-x {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: stretch;
}

.privacy-grid-margin-x {
  margin: 0;
}

/* Flex Cells */
.privacy-cell {
  flex: 1 1 100%;
  min-width: 0;
}

.privacy-cell-main {
  margin-bottom: 0;
}

.privacy-cell-sidebar {
  margin-bottom: 0;
  align-self: flex-start;
}

/* Responsive Flex Layout */
@media (min-width: 768px) and (max-width: 1023px) {
  .privacy-policy-main-section {
    padding: 3rem 0;
  }

  .privacy-policy-container {
    padding: 0 0.75rem;
    max-width: 100%;
    overflow-x: hidden;
  }

  .privacy-grid-x {
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0;
    width: 100%;
  }

  .privacy-medium-7 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    margin-bottom: 1.5rem;
  }

  .privacy-medium-5 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  .privacy-content-wysiwyg {
    padding: 1.25rem 0.75rem;
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .privacy-content-wysiwyg p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .privacy-content-wysiwyg p:first-child {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 1rem;
  }

  .privacy-section-card {
    padding: 1rem 0.75rem;
    margin: 0.75rem 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .privacy-section-title {
    font-size: 1.1rem;
    line-height: 1.3;
  }

  .privacy-sidebar-card {
    padding: 1rem 0.75rem;
    margin-bottom: 0.75rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .privacy-sidebar-card:last-child{
    margin-bottom: 0;
  }

  .privacy-sidebar-container {
    z-index: 100;
    width: 100%;
    max-width: 100%;
  }

  .privacy-nav-link {
    padding: 0.5rem 0.5rem;
    font-size: 0.85rem;
  }

  .privacy-contact-info p {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .privacy-bg-circle-1,
  .privacy-bg-circle-2,
  .privacy-bg-circle-3 {
    display: none;
  }

  .privacy-bg-shape-1,
  .privacy-bg-shape-2 {
    display: none;
  }
}

@media (min-width: 1024px) {
  .privacy-grid-x {
    gap: 2.5rem;
  }

  .privacy-medium-7 {
    flex: 0 0 calc(58.33333% - 1.25rem);
    max-width: calc(58.33333% - 1.25rem);
  }

  .privacy-medium-5 {
    flex: 0 0 calc(41.66667% - 1.25rem);
    max-width: calc(41.66667% - 1.25rem);
  }
}

@media (min-width: 1024px) {
  .privacy-grid-x {
    gap: 3rem;
  }

  .privacy-large-8 {
    flex: 0 0 calc(66.66667% - 1.5rem);
    max-width: calc(66.66667% - 1.5rem);
  }

  .privacy-large-4 {
    flex: 0 0 calc(33.33333% - 1.5rem);
    max-width: calc(33.33333% - 1.5rem);
  }
}

/* Content WYSIWYG */
.privacy-content-wysiwyg {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 3rem;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;

}

.privacy-content-wysiwyg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #10b981, #f59e0b, #ef4444);
  background-size: 400% 100%;
  animation: privacyGradientShift 8s ease-in-out infinite;
}

/* Content Animation */
.privacy-content-animation {
  animation: privacyContentFadeIn 1s ease-out;
}

.privacy-content-wysiwyg p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #374151;
  margin-bottom: 1.5rem;

}

.privacy-content-wysiwyg p:first-child {
  font-size: 1.2rem;
  font-weight: 500;
  color: #1f2937;
}

/* Privacy Links */
.privacy-link {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.privacy-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.privacy-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  transition: width 0.3s ease;
}

.privacy-link:hover::after {
  width: 100%;
}

/* Section Cards */
.privacy-section-card {
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.5);
  border-radius: 16px;
  padding: 2rem;
  margin: 2rem 0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.privacy-section-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  transition: left 0.6s ease;
}

.privacy-section-card:hover::before {
  left: 100%;
}

.privacy-section-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
}

.privacy-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1rem;
  position: relative;
  padding-left: 1rem;
}

.privacy-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: linear-gradient(135deg, #3b82f6, #10b981);
  border-radius: 2px;
}

.privacy-acceptance-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.05));
  border-color: rgba(16, 185, 129, 0.3);
}

/* Sidebar */


.privacy-sidebar-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.privacy-sidebar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.privacy-sidebar-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1rem;
  text-align: center;
  position: relative;
}

.privacy-sidebar-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  border-radius: 2px;
}

/* Navigation List */
.privacy-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.privacy-nav-list li {
  margin-bottom: 0.75rem;
}

.privacy-nav-link {
  display: block;
  padding: 0.75rem 1rem;
  color: #6b7280;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.privacy-nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  transition: left 0.3s ease;
}

.privacy-nav-link:hover::before {
  left: 100%;
}

.privacy-nav-link:hover {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
  transform: translateX(5px);
}

/* Contact Info */
.privacy-contact-info p {
  margin-bottom: 0.5rem;
  color: #6b7280;
  font-size: 0.95rem;
}

.privacy-contact-info strong {
  color: #1f2937;
}

/* Update Date */
.privacy-update-date {
  text-align: center;
  font-weight: 600;
  color: #3b82f6;
  font-size: 1.1rem;
}

/* Animations */
@keyframes privacyFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(120deg);
  }
  66% {
    transform: translateY(10px) rotate(240deg);
  }
}

@keyframes privacyRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes privacyIconFloat {
  0%, 100% {
    transform: translateY(0px) scale(1);
    opacity: 0.1;
  }
  50% {
    transform: translateY(-15px) scale(1.1);
    opacity: 0.2;
  }
}

@keyframes privacyGradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes privacyContentFadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Responsive */
@media (max-width: 767px) {
  .privacy-policy-main-section {
    padding: 2rem 0;
    min-height: auto;
  }

  .privacy-policy-container {
    padding: 0 1rem;
    max-width: 100%;
    overflow-x: hidden;
  }

  .privacy-grid-x {
    gap: 1.5rem;
    flex-direction: column;
    margin: 0;
    width: 100%;
  }

  .privacy-cell {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  .privacy-content-wysiwyg {
    padding: 1.5rem 1rem;
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    text-align: left;

  }

  .privacy-content-wysiwyg p {
    font-size: 1rem;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    margin-bottom: 1.25rem;
    text-align: left;
    width: 100%;
    max-width: 100%;
  }

  .privacy-content-wysiwyg p:first-child {
    font-size: 1rem;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 1.25rem;
  }

  .privacy-section-card {
    padding: 1.25rem 1rem;
    margin: 1rem 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .privacy-section-title {
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .privacy-sidebar-card {
    padding: 1.25rem 1rem;
    margin-bottom: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .privacy-sidebar-container {
    z-index: 100;
    width: 100%;
    max-width: 100%;
  }

  .privacy-nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }

  .privacy-contact-info p {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .privacy-bg-circle-1,
  .privacy-bg-circle-2,
  .privacy-bg-circle-3 {
    display: none;
  }

  .privacy-icon {
    font-size: 1.25rem;
  }

  .privacy-bg-shape-1,
  .privacy-bg-shape-2 {
    display: none;
  }
}

/* Extra Small Mobile Devices */
@media (max-width: 480px) {
  .privacy-policy-main-section {
    padding: 1.5rem 0;
  }

  .privacy-policy-container {
    padding: 0 0.75rem;
  }

  .privacy-content-wysiwyg {
    padding: 1.25rem 0.75rem;
    text-align: left;
  }

  .privacy-content-wysiwyg p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    text-align: left;
    width: 100%;
    max-width: 100%;
  }

  .privacy-content-wysiwyg p:first-child {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 1rem;
  }

  .privacy-section-card {
    padding: 1rem 0.75rem;
    margin: 0.75rem 0;
  }

  .privacy-section-title {
    font-size: 1.1rem;
  }

  .privacy-sidebar-card {
    padding: 1rem 0.75rem;
  }

  .privacy-nav-link {
    padding: 0.5rem;
    font-size: 0.85rem;
  }
}

.detail-contact-method {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(37, 99, 235, 0.08);
  flex: 0 0 auto;
  min-width: max-content;
  max-width: 350px;
}

.detail-contact-method::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1), transparent);
  transition: left 0.6s ease;
}

.detail-contact-method:hover::before {
  left: 100%;
}

.detail-contact-method:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(37, 99, 235, 0.2);
}

/* Contact Icons */
.detail-contact-icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.detail-contact-icon-phone {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: white;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.detail-contact-icon-email {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: white;
  box-shadow: 0 8px 20px rgba(29, 78, 216, 0.3);
}

.detail-contact-icon-chat {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.detail-contact-method:hover .detail-contact-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.4);
}

.detail-contact-icon svg {
  transition: transform 0.3s ease;
}

.detail-contact-method:hover .detail-contact-icon svg {
  transform: scale(1.1);
}

/* Contact Info */
.detail-contact-info {
  flex-grow: 1;
  text-align: left;
}

.detail-contact-method-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.detail-contact-method:hover .detail-contact-method-title {
  color: #2563eb;
}

.detail-contact-method-text {
  font-size: 1rem;
  color: #64748b;
  font-weight: 500;
  transition: color 0.3s ease;
}

.detail-contact-method:hover .detail-contact-method-text {
  color: #475569;
}

/* CTA Button */
.detail-contact-cta {
  text-align: center;
}

.detail-contact-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-contact-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.detail-contact-button:hover::before {
  left: 100%;
}

.detail-contact-button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 35px rgba(37, 99, 235, 0.4);
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  text-decoration: none;
  color: white;
}

.detail-contact-button svg {
  transition: transform 0.3s ease;
}

.detail-contact-button:hover svg {
  transform: translateX(5px);
}

/* Detail Contact Animations */
@keyframes detail-contact-bg-shift {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: translateY(-10px) scale(1.05);
    opacity: 0.5;
  }
  50% {
    transform: translateY(15px) scale(0.95);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-5px) scale(1.02);
    opacity: 0.6;
  }
}

@keyframes detail-contact-particle-float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.1;
  }
  90% {
    opacity: 0.1;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes detail-contact-shape-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0.1;
  }
  25% {
    transform: translateY(-20px) rotate(5deg) scale(1.1);
    opacity: 0.2;
  }
  50% {
    transform: translateY(10px) rotate(-3deg) scale(0.9);
    opacity: 0.15;
  }
  75% {
    transform: translateY(-15px) rotate(8deg) scale(1.05);
    opacity: 0.25;
  }
}

@keyframes detail-contact-title-glow {
  0%, 100% {
    background-position: 0% 50%;
    text-shadow: 0 0 20px rgba(37, 99, 235, 0.3);
  }
  50% {
    background-position: 100% 50%;
    text-shadow: 0 0 30px rgba(37, 99, 235, 0.5);
  }
}

@keyframes detail-contact-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes detail-contact-name-glow {
  0%, 100% {
    background-position: 0% 50%;
    text-shadow: 0 0 20px rgba(220, 38, 38, 0.4);
  }
  50% {
    background-position: 100% 50%;
    text-shadow: 0 0 30px rgba(239, 68, 68, 0.6);
  }
}

/* Detail Contact Responsive Design */
@media (max-width: 768px) {
  .detail-contact-section {
    padding: 4rem 0 3rem 0;
    margin-top: 60px;
  }

  .detail-contact-container {
    padding: 0 1rem;
  }

  .detail-contact-title {
    font-size: 1.8rem;
    flex-direction: column;
    gap: 0.25rem;
  }

  .detail-contact-methods {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  .detail-contact-method {
    padding: 1.25rem;
    flex-direction: column;
    text-align: center;
    gap: 0.8rem;
  }

  .detail-contact-info {
    text-align: center;
  }

  .detail-contact-icon {
    width: 60px;
    height: 60px;
  }

  .detail-contact-button {
    padding: 0.875rem 2rem;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .detail-contact-section {
    padding: 6rem 0 4rem 0;
  }

  .detail-contact-title {
    font-size: 2rem;
  }

  .detail-contact-subtitle {
    font-size: 1.1rem;
  }

  .detail-contact-method {
    padding: 1.25rem;
  }

  .detail-contact-icon {
    width: 50px;
    height: 50px;
  }

  .detail-contact-icon svg {
    width: 24px;
    height: 24px;
  }

  .detail-contact-button {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }
}

/* Cache bust: Detail contact section integrated - v1.5 - Equal top and bottom spacing */

/* ========================================
   PROFESSIONAL CONTACT SECTION STYLES
   ======================================== */

/* Main Section */
.professional-contact-section {
    position: relative;
    padding: 8rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    overflow: hidden;
}

/* Animated Background */
.professional-contact-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

/* Floating Shapes */
.professional-contact-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.1) 100%);
    animation: professional-contact-float 8s ease-in-out infinite;
}

.professional-contact-shape-1 {
    width: 120px;
    height: 120px;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

.professional-contact-shape-2 {
    width: 80px;
    height: 80px;
    top: 60%;
    right: 10%;
    animation-delay: 2s;
}

.professional-contact-shape-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 15%;
    animation-delay: 4s;
}

.professional-contact-shape-4 {
    width: 60px;
    height: 60px;
    top: 30%;
    right: 20%;
    animation-delay: 6s;
}

/* Animated Particles */
.professional-contact-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 50%;
    animation: professional-contact-particle-float 6s ease-in-out infinite;
}

.professional-contact-particle-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.professional-contact-particle-2 {
    top: 40%;
    right: 15%;
    animation-delay: 1s;
}

.professional-contact-particle-3 {
    bottom: 30%;
    left: 20%;
    animation-delay: 2s;
}

.professional-contact-particle-4 {
    top: 70%;
    right: 25%;
    animation-delay: 3s;
}

.professional-contact-particle-5 {
    top: 50%;
    left: 5%;
    animation-delay: 4s;
}

/* Main Container */
.professional-contact-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Content Layout */
.professional-contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: flex-start;
    min-height: 600px;
}

/* Left Side: Contact Information */
.professional-contact-info {
    animation: professional-contact-slide-in-left 1s ease-out;
    text-align: left;
    width: 100%;
}

/* Header Section */
.professional-contact-header {
    margin-bottom: 3rem;
}

.professional-contact-subtitle {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    position: relative;
}

.professional-contact-subtitle::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 2rem;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 1px;
}

.professional-contact-name {
    font-size: 3rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    background: linear-gradient(135deg, #1e293b 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.professional-contact-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 1rem;
}

.professional-contact-markets {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
}

/* Contact Methods */
.professional-contact-methods {
    margin-bottom: 3rem;
    text-align: left;
}

.professional-contact-method {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 1rem;
    border: 1px solid rgba(59, 130, 246, 0.1);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.professional-contact-method:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

.professional-contact-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

.professional-contact-method:hover .professional-contact-icon {
    transform: scale(1.1);
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.4);
}

.professional-contact-details h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.professional-contact-details p {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

.professional-contact-details a {
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.3s ease;
}

.professional-contact-details a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

/* CTA Button */
.professional-contact-cta {
    margin-top: 2rem;
}

.professional-contact-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
    position: relative;
    overflow: hidden;
}

.professional-contact-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.professional-contact-button:hover::before {
    left: 100%;
}

.professional-contact-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.4);
}

.professional-contact-button svg {
    transition: transform 0.3s ease;
}

.professional-contact-button:hover svg {
    transform: translateX(5px);
}

/* Scheduled Consultation Section */
.scheduled-consultation-section {
    margin-top: 2rem;
}

.scheduled-consultation-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.scheduled-consultation-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #10b981, #8b5cf6);
    border-radius: 1rem 1rem 0 0;
}

.scheduled-consultation-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.scheduled-consultation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 50%;
    margin: 0 auto 1.5rem auto;
    color: white;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.scheduled-consultation-content {
    text-align: center;
}

.scheduled-consultation-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.scheduled-consultation-description {
    font-size: 1rem;
    color: #64748b;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.scheduled-consultation-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    border-radius: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    text-decoration: none;
    text-align: center;
}

.scheduled-consultation-btn:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.scheduled-consultation-btn .btn-icon {
    transition: transform 0.3s ease;
}

.scheduled-consultation-btn:hover .btn-icon {
    transform: translateX(3px);
}

.scheduled-consultation-btn:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.scheduled-consultation-btn:visited {
    color: white;
}

/* Right Side: Professional Image */
.professional-contact-image {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: professional-contact-slide-in-right 1s ease-out;
}


.professional-image-container {
    position: relative;
    width: 400px;
    height: 500px;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.professional-image-container:hover {
    transform: scale(1.02);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.2);
}

.professional-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.professional-image-container:hover .professional-image {
    transform: scale(1.05);
}

.professional-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(29, 78, 216, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.professional-image-container:hover .professional-image-overlay {
    opacity: 1;
}

.professional-image-decoration {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 50%;
    opacity: 0.1;
    animation: professional-contact-decoration-rotate 10s linear infinite;
}

/* Animations */
@keyframes professional-contact-float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

@keyframes professional-contact-particle-float {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-30px) translateX(15px);
        opacity: 1;
    }
}

@keyframes professional-contact-slide-in-left {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes professional-contact-slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes professional-contact-decoration-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .professional-contact-content {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: left;
    }

    .professional-contact-info {
        text-align: left;
    }

    .professional-contact-methods {
        text-align: left;
    }

    .schedule-consultation-button-container {
        justify-content: flex-start;
        text-align: left;
    }

    .professional-contact-name {
        font-size: 2.5rem;
    }

    .professional-image-container {
        width: 350px;
        height: 450px;
    }
}

@media (max-width: 768px) {
    .professional-contact-section {
        padding: 6rem 0;
    }

    .professional-contact-container {
        padding: 0 1rem;
    }

    .professional-contact-info {
        text-align: left;
    }

    .professional-contact-methods {
        text-align: left;
    }

    .schedule-consultation-button-container {
        justify-content: flex-start;
        text-align: left;
    }

    .professional-contact-name {
        font-size: 2rem;
    }

    .professional-contact-method {
        padding: 1rem;
        text-align: left;
    }

    .professional-image-container {
        width: 300px;
        height: 400px;
    }

    .professional-contact-button {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .professional-contact-section {
        padding: 4rem 0;
    }

    .professional-contact-info {
        text-align: left;
    }

    .professional-contact-methods {
        text-align: left;
    }

    .schedule-consultation-button-container {
        justify-content: flex-start;
        text-align: left;
    }

    .professional-contact-name {
        font-size: 1.75rem;
    }

    .professional-contact-method {
        flex-direction: row;
        text-align: left;
        gap: 1rem;
        align-items: flex-start;
    }

    .professional-image-container {
        width: 280px;
        height: 350px;
    }

    .professional-contact-shape {
        display: none;
    }
}

/* Cache bust: Professional contact section added - v1.0 */

/* Cache bust: Fixed Why Work With Us section layout conflicts - v1.1 */

/* Features Container Responsive Fix */
@media (max-width: 767px) {
  .features-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .feature-item {
    width: 100% !important;
    margin-bottom: 1.5rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .features-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
}

@media (min-width: 1024px) {
  .features-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }
}

/* Cache bust: Fixed features container column layout - v1.2 */

/* ========================================
   PROPERTY TYPES SECTION STYLES
   ======================================== */

.property-types-section {
  padding: 4rem 0 6rem 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
  margin-top: 120px;
  overflow: hidden;
}

/* Animated Background Elements */
.property-types-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 40% 60%, rgba(139, 92, 246, 0.03) 0%, transparent 50%);
  animation: background-shift 20s ease-in-out infinite;
  pointer-events: none;
}

.property-types-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  animation: shimmer-bg 15s linear infinite;
  pointer-events: none;
}

/* Floating Particles */
.property-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.property-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(37, 99, 235, 0.3);
  border-radius: 50%;
  animation: particle-float 25s linear infinite;
}

.property-particle:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
  animation-duration: 20s;
}

.property-particle:nth-child(2) {
  left: 20%;
  animation-delay: 5s;
  animation-duration: 25s;
  background: rgba(16, 185, 129, 0.3);
}

.property-particle:nth-child(3) {
  left: 30%;
  animation-delay: 10s;
  animation-duration: 30s;
  background: rgba(139, 92, 246, 0.3);
}

.property-particle:nth-child(4) {
  left: 40%;
  animation-delay: 15s;
  animation-duration: 22s;
  background: rgba(37, 99, 235, 0.2);
}

.property-particle:nth-child(5) {
  left: 50%;
  animation-delay: 8s;
  animation-duration: 28s;
  background: rgba(16, 185, 129, 0.2);
}

.property-particle:nth-child(6) {
  left: 60%;
  animation-delay: 12s;
  animation-duration: 24s;
  background: rgba(139, 92, 246, 0.2);
}

.property-particle:nth-child(7) {
  left: 70%;
  animation-delay: 18s;
  animation-duration: 26s;
  background: rgba(37, 99, 235, 0.3);
}

.property-particle:nth-child(8) {
  left: 80%;
  animation-delay: 3s;
  animation-duration: 23s;
  background: rgba(16, 185, 129, 0.3);
}

.property-particle:nth-child(9) {
  left: 90%;
  animation-delay: 7s;
  animation-duration: 27s;
  background: rgba(139, 92, 246, 0.3);
}

/* Floating Shapes */
.property-shapes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.property-shape {
  position: absolute;
  opacity: 0.1;
  animation: shape-float 30s linear infinite;
}

.property-shape:nth-child(1) {
  width: 60px;
  height: 60px;
  background: linear-gradient(45deg, #2563eb, #1d4ed8);
  border-radius: 50%;
  top: 20%;
  left: 15%;
  animation-delay: 0s;
  animation-duration: 25s;
}

.property-shape:nth-child(2) {
  width: 40px;
  height: 40px;
  background: linear-gradient(45deg, #10b981, #059669);
  border-radius: 8px;
  top: 60%;
  right: 20%;
  animation-delay: 10s;
  animation-duration: 30s;
}

.property-shape:nth-child(3) {
  width: 50px;
  height: 50px;
  background: linear-gradient(45deg, #8b5cf6, #7c3aed);
  border-radius: 50%;
  top: 40%;
  left: 70%;
  animation-delay: 20s;
  animation-duration: 28s;
}

.property-shape:nth-child(4) {
  width: 35px;
  height: 35px;
  background: linear-gradient(45deg, #f59e0b, #d97706);
  border-radius: 8px;
  top: 80%;
  left: 30%;
  animation-delay: 5s;
  animation-duration: 32s;
}

.property-types-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Property Section Header */
.property-section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem auto;
}

.property-section-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: title-glow 3s ease-in-out infinite alternate;
}

.property-section-description {
  font-size: 1.25rem;
  color: #64748b;
  line-height: 1.8;
  max-width: 600px;
  margin: 0 auto;
}

.property-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2.5rem;
  margin-top: 2rem;
}

/* Property Cards */
.property-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  animation: card-fade-in 0.8s ease-out forwards;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.property-card:nth-child(1) { animation-delay: 0.1s; }
.property-card:nth-child(2) { animation-delay: 0.2s; }
.property-card:nth-child(3) { animation-delay: 0.3s; }
.property-card:nth-child(4) { animation-delay: 0.4s; }
.property-card:nth-child(5) { animation-delay: 0.5s; }
.property-card:nth-child(6) { animation-delay: 0.6s; }

.property-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(37, 99, 235, 0.1);
}

.property-card-image {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.property-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  filter: brightness(0.95) contrast(1.05);
}

.property-card:hover .property-image {
  transform: scale(1.1);
  filter: brightness(1) contrast(1.1);
}

.property-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.8) 0%, rgba(16, 185, 129, 0.6) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.property-card:hover .property-card-overlay {
  opacity: 1;
}

.property-card-icon {
  color: white;
  transform: scale(0.8);
  transition: transform 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.property-card:hover .property-card-icon {
  transform: scale(1);
}

.property-card-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.property-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1rem;
  transition: color 0.3s ease;
}

.property-card:hover .property-card-title {
  color: #2563eb;
}

.property-card-description {
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  flex-grow: 1;
}

.property-card-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.9rem;
  text-decoration: none;
  margin-top: auto;
  align-self: flex-start;
}

.property-card-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.property-card-button:hover::before {
  left: 100%;
}

.property-card-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  text-decoration: none;
  color: white;
}

.property-card-button svg {
  transition: transform 0.3s ease;
}

.property-card-button:hover svg {
  transform: translateX(4px);
}

.property-card-button:visited {
  color: white;
  text-decoration: none;
}

.property-card-button:active {
  color: white;
  text-decoration: none;
}

/* Property Section Animations */
@keyframes title-glow {
  0% {
    text-shadow: 0 0 20px rgba(37, 99, 235, 0.3);
  }
  100% {
    text-shadow: 0 0 30px rgba(37, 99, 235, 0.6), 0 0 40px rgba(16, 185, 129, 0.3);
  }
}

@keyframes card-fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes background-shift {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: translateY(-10px) scale(1.1);
    opacity: 0.5;
  }
  50% {
    transform: translateY(15px) scale(0.9);
    opacity: 0.4;
  }
  75% {
    transform: translateY(-5px) scale(1.05);
    opacity: 0.6;
  }
}

@keyframes shimmer-bg {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

@keyframes particle-float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes shape-float {
  0% {
    transform: translateY(100vh) rotate(0deg) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 0.1;
    transform: scale(1);
  }
  90% {
    opacity: 0.1;
    transform: scale(1);
  }
  100% {
    transform: translateY(-100px) rotate(180deg) scale(0.5);
    opacity: 0;
  }
}

/* Property Section Responsive Design */
@media (max-width: 768px) {
  .property-section-title {
    font-size: 2.5rem;
  }

  .property-section-description {
    font-size: 1.125rem;
  }

  .property-types-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .property-card-image {
    height: 200px;
  }

  .property-card-content {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .property-types-section {
    padding: 3rem 0 4rem 0;
  }

  .property-section-title {
    font-size: 2rem;
  }

  .property-section-description {
    font-size: 1rem;
  }

  .property-card-content {
    padding: 1.25rem;
  }
}

@media screen and (min-width: 1366px) {
  .property-types-section {
    padding: 8rem 0 6rem 0 !important;
  }
}

/* ========================================
   FOOTER COPYRIGHT LINK STYLES (SCOPED)
   ======================================== */

/* Specific styling for footer copyright links only */
.footer-copyright a {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  padding: 2px 4px;
  border-radius: 4px;
}

.footer-copyright a:hover {
  color: #ffffff;
  background-color: rgba(59, 130, 246, 0.2);
  text-decoration: underline;
  transform: translateY(-1px);
}

.footer-copyright a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 4px;
  right: 4px;
  height: 1px;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.footer-copyright a:hover::after {
  transform: scaleX(1);
}

/* Mobile responsive styles for footer links */
@media (max-width: 768px) {
  .footer-copyright a {
    font-size: 0.8rem;
    padding: 1px 3px;
  }
}

/* Consultation Modal Styles */
.consultation-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease-out;
}

.consultation-modal.show {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  position: fixed !important;
  top: 150px !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow-y: auto !important;
}

.consultation-modal-content {
  background: white;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideIn 0.3s ease-out;
  position: relative;
  margin: 20px auto !important;
  transform: none;
  flex-shrink: 0;
}

.consultation-modal-header {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  padding: 24px;
  border-radius: 16px 16px 0 0;
  position: relative;
  text-align: center;
}

.consultation-modal-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: white;
}

.consultation-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: all 0.2s ease;
}

.consultation-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.consultation-modal-body {
  padding: 24px;
}

.consultation-modal-description {
  color: #6b7280;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 24px;
  text-align: center;
}

.consultation-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.consultation-form-row {
  display: flex;
  gap: 16px;
}

.consultation-form-group {
  display: flex;
  flex-direction: column;
}

.consultation-form-group-half {
  flex: 1;
}

.consultation-form-group-full {
  width: 100%;
}

.consultation-input,
.consultation-select,
.consultation-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.2s ease;
  background: white;
}

.consultation-input:focus,
.consultation-select:focus,
.consultation-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.consultation-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
}

.consultation-textarea {
  resize: vertical;
  min-height: 100px;
}

.consultation-modal-footer {
  padding: 24px;
  border-top: 1px solid #e5e7eb;
}

.consultation-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 16px 24px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.3);
}

.consultation-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px 0 rgba(16, 185, 129, 0.4);
}

.consultation-submit-btn:active {
  transform: translateY(0);
}

.consultation-btn-text {
  font-weight: 600;
}

.consultation-btn-icon {
  display: flex;
  align-items: center;
}

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

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .consultation-modal.show {
    padding: 10px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    display: flex !important;
    position: fixed !important;
    top: 100px !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow-y: auto !important;
  }

  .consultation-modal-content {
    max-height: 95vh;
    width: 100%;
    margin: 10px auto !important;
    transform: none;
  }

  .consultation-form-row {
    flex-direction: column;
    gap: 12px;
  }

  .consultation-form-group-half {
    width: 100%;
  }

  .consultation-modal-header {
    padding: 20px;
  }

  .consultation-modal-title {
    font-size: 20px;
  }

  .consultation-modal-body {
    padding: 20px;
  }

  .consultation-modal-footer {
    padding: 20px;
  }
}

/* Extra Small Screens */
@media (max-width: 480px) {
  .consultation-modal.show {
    padding: 5px !important;
    align-items: flex-start !important;
    justify-content: center !important;
    display: flex !important;
    position: fixed !important;
    top: 100px !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow-y: auto !important;
  }

  .consultation-modal-content {
    max-height: 98vh;
    width: 100%;
    margin: 5px auto !important;
    border-radius: 12px;
  }
}

/* Large Screens */
@media (min-width: 1200px) {
  .consultation-modal-content {
    max-width: 700px;
  }
}

/* Ultra-wide Screens */
@media (min-width: 1920px) {
  .consultation-modal-content {
    max-width: 800px;
  }
}

/* Resources Dropdown Styles */
.program-dropdown {
  z-index: 999999 !important;
  position: fixed !important;
  display: none !important;
  min-width: 200px !important;
  background: white !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) !important;
  transition: all 0.2s ease-in-out !important;
}

.program-dropdown.dd-show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  display: block !important;
}

/* Remove animation delays from dropdown children */
.program-dropdown a {
  animation-delay: 0s !important;
  transition: all 0.2s ease-in-out !important;
}

.program-dropdown a:nth-child(1) { animation-delay: 0s !important; }
.program-dropdown a:nth-child(2) { animation-delay: 0s !important; }
.program-dropdown a:nth-child(3) { animation-delay: 0s !important; }
.program-dropdown a:nth-child(4) { animation-delay: 0s !important; }
.program-dropdown a:nth-child(5) { animation-delay: 0s !important; }

/* Calculator Cards Flexbox Layout */
.calculator-cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: stretch;
}

.calculator-cards-container .calculator-card {
  flex: 1 1 300px;
  max-width: 350px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
}

/* .calculator-cards-container .calculator-card .flex {
  flex: 1;
  display: flex;
  flex-direction: column;
} */

.calculator-cards-container .calculator-card p {
  flex-grow: 1;
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.calculator-cards-container .calculator-card .calculator-btn {
  margin-top: auto;
  flex-shrink: 0;
}

/* Responsive flexbox adjustments */
@media (max-width: 768px) {
  .calculator-cards-container {
    flex-direction: column;
    align-items: center;
  }

  .calculator-cards-container .calculator-card {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .calculator-cards-container .calculator-card {
    flex: 1 1 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
  }
}

@media (min-width: 1025px) {
  .calculator-cards-container .calculator-card {
    flex: 1 1 calc(33.333% - 1rem);
    max-width: calc(33.333% - 1rem);
  }
}

/* Trusted Lenders Section Styles */
.trusted-lenders-section {
  padding: 5rem 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
  overflow: hidden;
}

.trusted-lenders-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.05) 0%, transparent 70%);
  pointer-events: none;
  animation: trustedLendersBgFloat 20s ease-in-out infinite;
}

@keyframes trustedLendersBgFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
}

.trusted-lenders-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}

.trusted-lenders-header {
  text-align: center;
  margin-bottom: 4rem;
  animation: trustedLendersFadeInUp 1s ease-out;
}

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

.trusted-lenders-title {
  font-size: 3rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #1e293b 0%, #3b82f6 50%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: trustedLendersTitleGlow 3s ease-in-out infinite alternate;
}

@keyframes trustedLendersTitleGlow {
  from { filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.3)); }
  to { filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.6)); }
}

.trusted-lenders-description {
  font-size: 1.25rem;
  color: #64748b;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
  font-weight: 400;
}

.trusted-lenders-flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
}

.trusted-lender-card {
  background: #ffffff;
  border: 3px solid #e2e8f0;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: trustedLenderCardSlideIn 0.6s ease-out;
  animation-fill-mode: both;
}

.trusted-lender-card:nth-child(1) { animation-delay: 0.1s; }
.trusted-lender-card:nth-child(2) { animation-delay: 0.2s; }
.trusted-lender-card:nth-child(3) { animation-delay: 0.3s; }
.trusted-lender-card:nth-child(4) { animation-delay: 0.4s; }
.trusted-lender-card:nth-child(5) { animation-delay: 0.5s; }
.trusted-lender-card:nth-child(6) { animation-delay: 0.6s; }
.trusted-lender-card:nth-child(7) { animation-delay: 0.7s; }
.trusted-lender-card:nth-child(8) { animation-delay: 0.8s; }

@keyframes trustedLenderCardSlideIn {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.trusted-lender-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  transition: left 0.6s ease;
}


.trusted-lender-card:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  border-color: #3b82f6;
}

.trusted-lender-card:hover::before {
  left: 100%;
}


.trusted-lender-logo {
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  filter: grayscale(20%);
}

.trusted-lender-card:hover .trusted-lender-logo {
  transform: scale(1.05);
  filter: grayscale(0%);
}

.trusted-lender-highlight {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-color: #3b82f6;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
  animation: trustedLenderHighlightPulse 2s ease-in-out infinite;
}

@keyframes trustedLenderHighlightPulse {
  0%, 100% { box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3); }
  50% { box-shadow: 0 12px 35px rgba(59, 130, 246, 0.5); }
}

.trusted-lender-highlight:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3);
}

.trusted-lender-highlight .trusted-lender-logo {
  filter: brightness(1.2) contrast(1.1);
}

/* Responsive Design */
@media (max-width: 1200px) {
  .trusted-lenders-flex-container {
    gap: 1.5rem;
  }

  .trusted-lender-card {
    width: 100px;
    height: 100px;
  }

  .trusted-lender-logo {
    max-width: 70px;
    max-height: 70px;
  }

  .trusted-lenders-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .trusted-lenders-section {
    padding: 4rem 0;
  }

  .trusted-lenders-container {
    padding: 0 1rem;
  }

  .trusted-lenders-flex-container {
    gap: 1.25rem;
  }

  .trusted-lender-card {
    width: 90px;
    height: 90px;
  }

  .trusted-lender-logo {
    max-width: 60px;
    max-height: 60px;
  }

  .trusted-lenders-title {
    font-size: 2.25rem;
  }

  .trusted-lenders-description {
    font-size: 1.125rem;
  }
}

@media (max-width: 480px) {
  .trusted-lenders-flex-container {
    gap: 1rem;
  }

  .trusted-lender-card {
    width: 80px;
    height: 80px;
  }

  .trusted-lender-logo {
    max-width: 50px;
    max-height: 50px;
  }

  .trusted-lenders-title {
    font-size: 1.875rem;
  }

  .trusted-lenders-description {
    font-size: 1rem;
  }
}

/* AI Chat Modal Styles */
.ai-chat-modal {
  position: fixed !important;
  top: 100px !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.5);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10000 !important;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 0 !important;
  margin: 0 !important;
}

.ai-chat-modal.show {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

.ai-chat-modal-content {
  background: white;
  border-radius: 16px;
  width: 90% !important;
  max-width: 500px !important;
  height: 600px !important;
  max-height: 80vh !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transform: scale(0.9);
  transition: transform 0.3s ease;
  margin: 0 auto !important;
  position: relative !important;
}

.ai-chat-modal.show .ai-chat-modal-content {
  transform: scale(1) !important;
}

.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border-radius: 16px 16px 0 0;
}

.ai-chat-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-chat-avatar-large {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.ai-chat-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.ai-chat-header p {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.ai-chat-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: background 0.2s ease;
}

.ai-chat-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.ai-chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-chat-message {
  display: flex;
  margin-bottom: 12px;
}

.ai-chat-message-user {
  justify-content: flex-end;
}

.ai-chat-message-ai {
  justify-content: flex-start;
}

.ai-chat-message-content {
  max-width: 80%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ai-chat-message-user .ai-chat-message-content {
  flex-direction: row-reverse;
}

.ai-chat-avatar {
  width: 32px;
  height: 32px;
  background: #3b82f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.ai-chat-message-user .ai-chat-avatar {
  background: #10b981;
}

.ai-chat-message-content p {
  background: #f3f4f6;
  padding: 12px 16px;
  border-radius: 18px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

.ai-chat-message-user .ai-chat-message-content p {
  background: #3b82f6;
  color: white;
}

.ai-chat-input-container {
  display: flex;
  align-items: center;
  padding: 20px;
  border-top: 1px solid #e5e7eb;
  gap: 12px;
}

.ai-chat-input {
  flex: 1;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  padding: 12px 16px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.ai-chat-input:focus {
  border-color: #3b82f6;
}

.ai-chat-send {
  background: #3b82f6;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: all 0.2s ease;
}

.ai-chat-send:hover {
  background: #2563eb;
  transform: scale(1.05);
}

.ai-chat-send:active {
  transform: scale(0.95);
}

/* Responsive Design */
@media (max-width: 1200px) {
  .ai-chat-modal-content {
    width: 95% !important;
    max-width: 450px !important;
    height: 70vh !important;
    border-radius: 12px;
  }

  .ai-chat-header {
    padding: 16px;
    border-radius: 12px 12px 0 0;
  }

  .ai-chat-messages {
    padding: 16px;
  }

  .ai-chat-input-container {
    padding: 16px;
  }

  .ai-chat-message-content {
    max-width: 85%;
  }
}

@media (max-width: 768px) {
  .ai-chat-modal {
    padding: 20px !important;
  }

  .ai-chat-modal-content {
    width: 100% !important;
    max-width: none !important;
    height: 80vh !important;
    border-radius: 12px;
    margin: 0 !important;
  }

  .ai-chat-header {
    padding: 16px;
    border-radius: 12px 12px 0 0;
  }

  .ai-chat-messages {
    padding: 16px;
  }

  .ai-chat-input-container {
    padding: 16px;
  }

  .ai-chat-message-content {
    max-width: 85%;
  }
}

@media (max-width: 480px) {
  .ai-chat-modal {
    padding: 10px !important;
  }

  .ai-chat-modal-content {
    width: 100% !important;
    height: 100vh !important;
    border-radius: 0 !important;
    max-height: 100vh !important;
    margin: 0 !important;
  }

  .ai-chat-header {
    border-radius: 0 !important;
    padding: 12px;
  }

  .ai-chat-messages {
    padding: 12px;
  }

  .ai-chat-input-container {
    padding: 12px;
  }

  .ai-chat-message-content {
    max-width: 90%;
  }

  .ai-chat-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }

  .ai-chat-avatar-large {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
  }

  .ai-chat-header h3 {
    font-size: 16px !important;
  }

  .ai-chat-header p {
    font-size: 12px !important;
  }
}

@media (max-width: 375px) {
  .ai-chat-modal {
    padding: 5px !important;
  }

  .ai-chat-modal-content {
    width: 100% !important;
    height: 100vh !important;
    border-radius: 0 !important;
    max-height: 100vh !important;
    margin: 0 !important;
  }

  .ai-chat-header {
    padding: 10px;
  }

  .ai-chat-messages {
    padding: 10px;
  }

  .ai-chat-input-container {
    padding: 10px;
  }

  .ai-chat-message-content {
    max-width: 95%;
  }

  .ai-chat-message-content p {
    font-size: 13px !important;
    padding: 10px 14px !important;
  }

  .ai-chat-input {
    font-size: 13px !important;
    padding: 10px 14px !important;
  }
}

/* Schedule Consultation Button Styles */
.schedule-consultation-button-container {
  margin-top: 2rem;
  display: flex;
  justify-content: flex-start;
  text-align: left;
}

.schedule-consultation-button {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  min-width: 200px;
  justify-content: center;
}

.schedule-consultation-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

.schedule-consultation-button:active {
  transform: translateY(0);
}

.schedule-consultation-button .btn-text {
  font-weight: 600;
}

.schedule-consultation-button .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.schedule-consultation-button:hover .btn-icon {
  transform: translateX(4px);
}

/* Responsive Design for Schedule Button */
@media (max-width: 768px) {
  .schedule-consultation-button-container {
    margin-top: 1.5rem;
    justify-content: flex-start;
    text-align: left;
  }

  .schedule-consultation-button {
    padding: 14px 28px;
    font-size: 15px;
    min-width: 180px;
  }
}

@media (max-width: 480px) {
  .schedule-consultation-button-container {
    margin-top: 1rem;
    justify-content: flex-start;
    text-align: left;
  }

  .schedule-consultation-button {
    padding: 12px 24px;
    font-size: 14px;
    min-width: 160px;
    border-radius: 10px;
  }
}

/* FAQ Section Styles */
.faq-section {
  position: relative;
  padding: 6rem 0;
  background: #ffffff;
  overflow: hidden;
  min-height: 100vh;
  display: block;
  width: 100%;
  box-sizing: border-box;
  color: #1f2937;
}

.faq-section * {
  box-sizing: border-box;
}

/* Emergency fallback styles */
.faq-section {
  background: #ffffff !important;
  color: #1f2937 !important;
  padding: 2rem 0 !important;
}

.faq-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  margin: 1rem 0 !important;
  padding: 1rem !important;
  color: #1f2937 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.faq-question {
  background: #f1f5f9 !important;
  color: #1f2937 !important;
  padding: 1rem !important;
  cursor: pointer !important;
}

.faq-answer {
  background: #f8fafc !important;
  color: #4b5563 !important;
  padding: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.faq-answer.show {
  padding: 1rem !important;
  max-height: 1000px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.faq-bg-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.faq-bg-circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.02) 50%, transparent 70%);
  animation: float 20s infinite ease-in-out;
}

.faq-bg-circle-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  left: -5%;
  animation-delay: 0s;
}

.faq-bg-circle-2 {
  width: 200px;
  height: 200px;
  top: 60%;
  right: -3%;
  animation-delay: 5s;
}

.faq-bg-circle-3 {
  width: 150px;
  height: 150px;
  top: 30%;
  right: 20%;
  animation-delay: 10s;
}

.faq-bg-circle-4 {
  width: 250px;
  height: 250px;
  bottom: 20%;
  left: 10%;
  animation-delay: 15s;
}

.faq-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(59, 130, 246, 0.3);
  border-radius: 50%;
  animation: particleFloat 15s infinite linear;
}

.faq-particle-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.faq-particle-2 {
  top: 40%;
  left: 80%;
  animation-delay: 3s;
}

.faq-particle-3 {
  top: 70%;
  left: 20%;
  animation-delay: 6s;
}

.faq-particle-4 {
  top: 30%;
  left: 70%;
  animation-delay: 9s;
}

.faq-particle-5 {
  top: 80%;
  left: 60%;
  animation-delay: 12s;
}

.faq-particle-6 {
  top: 10%;
  left: 50%;
  animation-delay: 15s;
}

.faq-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
}

.faq-header {
  text-align: center;
  margin-bottom: 4rem;
  display: block;
  width: 100%;
}

.faq-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
  display: block;
  width: 100%;
}

.faq-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.3;
  margin: 0;
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
  display: block;
  width: 100%;
}

.faq-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  width: 100%;
  max-width: 100%;
}

.faq-column {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 0.6s forwards;
  display: block;
  width: 100%;
}

.faq-column:nth-child(2) {
  animation-delay: 0.8s;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.faq-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
  display: block;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  color: #1f2937;
}

.faq-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  transform: translateY(-2px);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f1f5f9;
  width: 100%;
  box-sizing: border-box;
  color: #1f2937;
  border: none;
}

.faq-question:hover {
  background: #e2e8f0;
}

.faq-question-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.4;
  flex: 1;
  margin-right: 1rem;
  display: block;
  width: 100%;
}

.faq-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
  position: relative;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.faq-icon-svg {
  width: 100%;
  height: 100%;
  fill: #3b82f6;
  transition: all 0.3s ease;
  display: block;
}

.faq-item:hover .faq-icon-svg {
  fill: #60a5fa;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  background: #f8fafc;
  width: 100%;
  box-sizing: border-box;
  color: #4b5563;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
}

.faq-answer.show {
  max-height: 1000px;
  padding: 0 1.5rem 1.5rem 1.5rem;
  display: block;
  visibility: visible;
  opacity: 1;
}

.faq-answer p {
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  display: block;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.faq-answer.show p {
  opacity: 1;
}

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

/* Glossary Section Styles */
.glossary-section {
  position: relative;
  padding: 8rem 0;
  background: #ffffff;
  overflow: hidden;
  min-height: 100vh;
  display: block;
  width: 100%;
  box-sizing: border-box;
  color: #1f2937;
}

.glossary-section * {
  box-sizing: border-box;
}

.glossary-bg-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.glossary-bg-circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 50%, transparent 70%);
  animation: float 20s infinite ease-in-out;
  backdrop-filter: blur(10px);
}

.glossary-bg-circle-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}

.glossary-bg-circle-2 {
  width: 200px;
  height: 200px;
  top: 60%;
  right: 10%;
  animation-delay: 5s;
}

.glossary-bg-circle-3 {
  width: 150px;
  height: 150px;
  top: 30%;
  right: 20%;
  animation-delay: 10s;
}

.glossary-bg-circle-4 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 10%;
  animation-delay: 15s;
}

.glossary-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(59, 130, 246, 0.6);
  border-radius: 50%;
  animation: particleFloat 15s infinite linear;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

.glossary-particle-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.glossary-particle-2 {
  top: 40%;
  right: 15%;
  animation-delay: 3s;
}

.glossary-particle-3 {
  top: 70%;
  left: 20%;
  animation-delay: 6s;
}

.glossary-particle-4 {
  top: 30%;
  right: 30%;
  animation-delay: 9s;
}

.glossary-particle-5 {
  top: 80%;
  right: 25%;
  animation-delay: 12s;
}

.glossary-particle-6 {
  top: 50%;
  left: 5%;
  animation-delay: 15s;
}

.glossary-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
}

.glossary-header {
  text-align: center;
  margin-bottom: 4rem;
  display: block;
  width: 100%;
}

.glossary-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: #3b82f6;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
  display: block;
  width: 100%;
}

.glossary-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: #1f2937;
  line-height: 1.2;
  margin: 0 0 1.5rem 0;
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #1f2937 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glossary-description {
  font-size: 1.2rem;
  color: #6b7280;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto;
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 0.6s forwards;
  display: block;
  width: 100%;
}

.glossary-nav {
  margin-bottom: 3rem;
  display: block;
  width: 100%;
}

.glossary-nav-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  background: #f8fafc;
  padding: 2rem;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.glossary-nav-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  animation: shimmer 3s infinite;
}

.glossary-nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: #ffffff;
  color: #3b82f6;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.glossary-nav-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glossary-nav-item:hover {
  background: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.glossary-nav-item:hover::before {
  opacity: 1;
}

.glossary-nav-item.active {
  background: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
  transform: scale(1.1);
}

.glossary-nav-item.active::before {
  opacity: 1;
}

.glossary-content {
  display: block;
  width: 100%;
}

.glossary-letter-section {
  margin-bottom: 1rem;
  padding: 3rem 0;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

.glossary-letter-section:nth-child(1) { animation-delay: 0.1s; }
.glossary-letter-section:nth-child(2) { animation-delay: 0.2s; }
.glossary-letter-section:nth-child(3) { animation-delay: 0.3s; }
.glossary-letter-section:nth-child(4) { animation-delay: 0.4s; }
.glossary-letter-section:nth-child(5) { animation-delay: 0.5s; }
.glossary-letter-section:nth-child(6) { animation-delay: 0.6s; }
.glossary-letter-section:nth-child(7) { animation-delay: 0.7s; }
.glossary-letter-section:nth-child(8) { animation-delay: 0.8s; }
.glossary-letter-section:nth-child(9) { animation-delay: 0.9s; }
.glossary-letter-section:nth-child(10) { animation-delay: 1.0s; }

.glossary-letter-section:last-child {
  border-bottom: none;
}

.glossary-letter-title {
  font-size: 3rem;
  font-weight: 800;
  color: #1f2937;
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 3px solid #3b82f6;
  display: inline-block;
  background: linear-gradient(135deg, #1f2937 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.glossary-letter-title::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, rgba(59, 130, 246, 0.5), #3b82f6);
  border-radius: 2px;
}

.glossary-terms {
  display: grid;
  gap: 1.5rem;
  width: 100%;
}

.glossary-term {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 2rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.glossary-term::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  transition: left 0.5s ease;
}

.glossary-term:hover {
  border-color: #3b82f6;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  transform: translateY(-8px) scale(1.02);
  background: #ffffff;
}

.glossary-term:hover::before {
  left: 100%;
}

.term-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1rem;
  line-height: 1.4;
  position: relative;
  z-index: 2;
}

.term-description {
  color: #4b5563;
  line-height: 1.7;
  margin: 0;
  font-size: 1rem;
  position: relative;
  z-index: 2;
}

/* Responsive Design */
@media (max-width: 768px) {
  .glossary-container {
    padding: 0 1rem;
  }

  .glossary-title {
    font-size: 2rem;
  }

  .glossary-nav-container {
    padding: 1rem;
    gap: 0.25rem;
  }

  .glossary-nav-item {
    width: 35px;
    height: 35px;
    font-size: 0.9rem;
  }

  .glossary-letter-title {
    font-size: 1.5rem;
  }

  .term-title {
    font-size: 1.1rem;
  }

  .glossary-term {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .glossary-section {
    padding: 4rem 0;
  }

  .glossary-title {
    font-size: 1.75rem;
  }

  .glossary-description {
    font-size: 1rem;
  }

  .glossary-nav-container {
    padding: 0.75rem;
  }

  .glossary-nav-item {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }

  .glossary-letter-section {
    margin-bottom: 2rem;
    padding: 1rem 0;
  }

  .glossary-terms {
    gap: 1rem;
  }
}

/* Shimmer Animation */
@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Enhanced Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(1deg);
  }
  66% {
    transform: translateY(-10px) rotate(-1deg);
  }
}

@keyframes particleFloat {
  0% {
    transform: translateY(0px) translateX(0px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(100px);
    opacity: 0;
  }
}

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

/* FAQ Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

@keyframes particleFloat {
  0% {
    transform: translateY(0px) translateX(0px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) translateX(50px);
    opacity: 0;
  }
}

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

/* FAQ Responsive Design */
@media (max-width: 768px) {
  .faq-section {
    padding: 4rem 0;
  }

  .faq-container {
    padding: 0 1rem;
  }

  .faq-title {
    font-size: 2rem;
  }

  .faq-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .faq-question {
    padding: 1rem;
  }

  .faq-question-text {
    font-size: 1rem;
  }

  .faq-answer.show {
    padding: 0 1rem 1rem 1rem;
  }

  .faq-bg-circle-1,
  .faq-bg-circle-2,
  .faq-bg-circle-3,
  .faq-bg-circle-4 {
    display: none;
  }
}

@media (max-width: 480px) {
  .faq-title {
    font-size: 1.75rem;
  }

  .faq-subtitle {
    font-size: 0.9rem;
  }

  .faq-question-text {
    font-size: 0.95rem;
  }

  .faq-answer p {
    font-size: 0.9rem;
  }
}

/* ========================================
   RESOURCES SECTION STYLES
======================================== */

/* Resources Section */
.resources-section {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
    z-index: 1;
}

/* Resources Background Elements */
.resources-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

/* Background Circles */
.resources-bg-circle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 50%, transparent 70%);
    animation: float 20s ease-in-out infinite;
}

.resources-bg-circle-1 {
    width: 300px;
    height: 300px;
    top: 10%;
    left: -5%;
    animation-delay: 0s;
}

.resources-bg-circle-2 {
    width: 200px;
    height: 200px;
    top: 60%;
    right: -3%;
    animation-delay: 5s;
}

.resources-bg-circle-3 {
    width: 150px;
    height: 150px;
    top: 30%;
    right: 10%;
    animation-delay: 10s;
}

.resources-bg-circle-4 {
    width: 250px;
    height: 250px;
    bottom: 20%;
    left: 5%;
    animation-delay: 15s;
}

/* Floating Particles */
.resources-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(59, 130, 246, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
    animation: particleFloat 15s linear infinite;
}

.resources-particle-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.resources-particle-2 {
    top: 40%;
    left: 80%;
    animation-delay: 3s;
}

.resources-particle-3 {
    top: 70%;
    left: 20%;
    animation-delay: 6s;
}

.resources-particle-4 {
    top: 30%;
    left: 70%;
    animation-delay: 9s;
}

.resources-particle-5 {
    top: 80%;
    left: 60%;
    animation-delay: 12s;
}

.resources-particle-6 {
    top: 50%;
    left: 30%;
    animation-delay: 15s;
}

/* Resources Container */
.resources-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* Resources Header */
.resources-header {
    text-align: center;
    margin-bottom: 60px;
}

.resources-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: inline-block;
}

.resources-title {
    font-size: 48px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #1f2937 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.resources-description {
    font-size: 18px;
    color: #6b7280;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Resources Grid */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 50px;
    justify-items: center;
}

/* Center the last card when it's alone */
.resources-grid .resource-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 350px;
    justify-self: center;
}

/* Resource Card */
.resource-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
    transform: translateY(30px);
}

.resource-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.5s ease;
}

.resource-card:hover::before {
    left: 100%;
}

.resource-card:hover {
    border-color: #3b82f6;
    background: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
}

/* Resource Icon */
.resource-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.resource-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 15px;
}

.resource-icon-svg {
    width: 28px;
    height: 28px;
    color: #ffffff;
    z-index: 1;
}

/* Resource Content */
.resource-content {
    position: relative;
    z-index: 2;
}

.resource-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
}

.resource-title a {
    color: #1f2937;
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.resource-title a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
    transition: width 0.3s ease;
}

.resource-title a:hover {
    color: #3b82f6;
}

.resource-title a:hover::after {
    width: 100%;
}

.resource-description {
    font-size: 16px;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

/* Staggered Animation for Cards */
.resource-card:nth-child(1) { animation-delay: 0.1s; }
.resource-card:nth-child(2) { animation-delay: 0.2s; }
.resource-card:nth-child(3) { animation-delay: 0.3s; }
.resource-card:nth-child(4) { animation-delay: 0.4s; }
.resource-card:nth-child(5) { animation-delay: 0.5s; }
.resource-card:nth-child(6) { animation-delay: 0.6s; }
.resource-card:nth-child(7) { animation-delay: 0.7s; }

/* Responsive Design for Resources */
@media (max-width: 768px) {
    .resources-section {
        padding: 60px 0;
    }

    .resources-title {
        font-size: 36px;
    }

    .resources-description {
        font-size: 16px;
    }

    .resources-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .resource-card {
        padding: 25px;
    }

    .resource-title {
        font-size: 20px;
    }

    .resource-description {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .resources-container {
        padding: 0 15px;
    }

    .resources-title {
        font-size: 28px;
    }

    .resource-card {
        padding: 20px;
    }

    .resource-icon {
        width: 50px;
        height: 50px;
    }

    .resource-icon-svg {
        width: 24px;
        height: 24px;
    }
}

/* ========================================
   VIDEOS SECTION STYLES
======================================== */

/* Videos Section */
.videos-section {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
    z-index: 1;
}

/* Videos Background Elements */
.videos-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

/* Background Circles */
.videos-bg-circle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 50%, transparent 70%);
    animation: float 20s ease-in-out infinite;
}

.videos-bg-circle-1 {
    width: 300px;
    height: 300px;
    top: 10%;
    left: -5%;
    animation-delay: 0s;
}

.videos-bg-circle-2 {
    width: 200px;
    height: 200px;
    top: 60%;
    right: -3%;
    animation-delay: 5s;
}

.videos-bg-circle-3 {
    width: 150px;
    height: 150px;
    top: 30%;
    right: 10%;
    animation-delay: 10s;
}

.videos-bg-circle-4 {
    width: 250px;
    height: 250px;
    bottom: 20%;
    left: 5%;
    animation-delay: 15s;
}

/* Floating Particles */
.videos-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(59, 130, 246, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
    animation: particleFloat 15s linear infinite;
}

.videos-particle-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.videos-particle-2 {
    top: 40%;
    left: 80%;
    animation-delay: 3s;
}

.videos-particle-3 {
    top: 70%;
    left: 20%;
    animation-delay: 6s;
}

.videos-particle-4 {
    top: 30%;
    left: 70%;
    animation-delay: 9s;
}

.videos-particle-5 {
    top: 80%;
    left: 60%;
    animation-delay: 12s;
}

.videos-particle-6 {
    top: 50%;
    left: 30%;
    animation-delay: 15s;
}

/* Videos Container */
.videos-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* Videos Header */
.videos-header {
    text-align: center;
    margin-bottom: 60px;
}

.videos-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: inline-block;
}

.videos-title {
    font-size: 48px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #1f2937 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.videos-description {
    font-size: 18px;
    color: #6b7280;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.contact-link {
    color: #3b82f6;
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: #1d4ed8;
}

/* Videos Grid */
.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 50px;
    justify-items: center;
}

/* Video Card */
.video-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
    transform: translateY(30px);
    max-width: 400px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.video-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.5s ease;
    z-index: 1;
}

.video-card:hover::before {
    left: 100%;
}

.video-card:hover {
    border-color: #3b82f6;
    background: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
}

/* Video Thumbnail */
.video-thumbnail {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    cursor: pointer;
}

.video-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.video-card:hover .video-image {
    transform: scale(1.05);
}

/* Video Overlay */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-card:hover .video-overlay {
    opacity: 1;
}

/* Play Button */
.play-button {
    width: 80px;
    height: 80px;
    background: rgba(59, 130, 246, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    z-index: 10;
    position: relative;
}

.play-button:hover {
    background: rgba(59, 130, 246, 1);
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
}

.play-icon {
    width: 32px;
    height: 32px;
    fill: #ffffff;
    margin-left: 4px;
}

/* Video Content */
.video-content {
    padding: 25px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.video-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 20px;
    line-height: 1.4;
    flex-grow: 1;
    text-align: center;
}

.video-button-wrapper {
    margin-top: auto;
    text-align: center;
    display: flex;
    justify-content: center;
}

/* Video Button */
.video-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    text-align: center;
}

.video-button:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    color: #ffffff;
}

.button-text {
    font-weight: 600;
}

.button-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transform: rotate(180deg);
}

/* Staggered Animation for Cards */
.video-card:nth-child(1) { animation-delay: 0.1s; }
.video-card:nth-child(2) { animation-delay: 0.2s; }
.video-card:nth-child(3) { animation-delay: 0.3s; }

/* Responsive Design for Videos */
@media (max-width: 768px) {
    .videos-section {
        padding: 60px 0;
    }

    .videos-title {
        font-size: 36px;
    }

    .videos-description {
        font-size: 16px;
    }

    .videos-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .video-card {
        max-width: 100%;
    }

    .video-thumbnail {
        height: 200px;
    }

    .video-title {
        font-size: 18px;
    }

    .video-content {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .videos-container {
        padding: 0 15px;
    }

    .videos-title {
        font-size: 28px;
    }

    .video-thumbnail {
        height: 180px;
    }

    .play-button {
        width: 60px;
        height: 60px;
    }

    .play-icon {
        width: 24px;
        height: 24px;
    }

    .video-button {
        padding: 10px 20px;
        font-size: 13px;
    }
}