/* 
Text/Margin Scale:
11 px  12px  14 px  16 px  18 px
20 px  23 px  26 px  29px 32px
36px  41px  46px  52px  58px
66px 74px  83px  94px  105px
119px  133px  150px  169px  190px
214px 240px 270px
*/

@media only screen and (max-width: 259px),
  (min-width: 310px) and (max-width: 319px),
  (min-width: 340px) and (max-width: 349px) {
  #responsive-menu {
    left: 3rem;
  }
}

@media only screen and (min-width: 260px) and (max-width: 269px),
  (min-width: 320px) and (max-width: 329px),
  (min-width: 350px) and (max-width: 359px),
  (min-width: 420px) and (max-width: 439px) {
  #responsive-menu {
    left: 4rem;
  }
}

@media only screen and (max-width: 269px) {
  h1 {
    font-size: 2rem;
  }

  .description ul,
  .description p {
    line-height: 1.6;
  }

  .contact-btn {
    padding: 0 1.2rem 4px;
  }

  .description ul,
  .description p,
  .contact-btn a,
  .contact-btn a:link,
  .contact-bt a:visited {
    font-size: 8px;
  }
}

@media only screen and (min-width: 270px) and (max-width: 279px),
  (min-width: 330px) and (max-width: 339px),
  (min-width: 360px) and (max-width: 369px),
  (min-width: 440px) and (max-width: 459px) {
  #responsive-menu {
    left: 5rem;
  }
}

@media only screen and (min-width: 270px) and (max-width: 299px) {
  h1 {
    font-size: 2.3rem;
  }
}

@media only screen and (min-width: 270px) and (max-width: 349px) {
  .description ul,
  .description p {
    line-height: 1.8;
  }

  .contact-btn {
    padding: 2px 1.2rem 4px;
  }

  .description ul,
  .description p,
  .contact-btn a:link,
  .contact-bt a:visited {
    font-size: 1rem;
  }
}

@media only screen and (min-width: 280px) and (max-width: 289px),
  (min-width: 370px) and (max-width: 379px) {
  #responsive-menu {
    left: 6rem;
  }
}

@media only screen and (min-width: 290px) and (max-width: 299px),
  (min-width: 380px) and (max-width: 389px),
  (min-width: 460px) and (max-width: 479px) {
  #responsive-menu {
    left: 7rem;
  }
}

@media only screen and (max-width: 299px) {
  nav {
    padding: 0.2rem 2rem;
  }

  .logo {
    width: 7.5rem;
  }

  .logo,
  #menu-icon,
  .close-btn {
    height: 2.3rem;
  }

  #menu-icon,
  .close-btn {
    width: 2.3rem;
  }

  #responsive-menu {
    width: 23rem;
    height: 35rem;
    padding: 2.3rem 1rem 2.3rem 2.6rem;
  }

  .responsive-link a:link,
  .responsive-link a:visited,
  .responsive-link {
    font-size: 1.2rem;
  }

  .heading {
    height: 25rem;
  }

  .main-content {
    padding: 4.1rem 0 3.2rem;
  }

  footer {
    margin: 10.5rem 2rem 3.6rem;
  }

  .footer-img img {
    width: 2.9rem;
    height: 2.9rem;
  }

  .footer-text {
    font-size: 8px;
  }
}

@media only screen and (min-width: 300px) and (max-width: 309px),
  (min-width: 400px) and (max-width: 419px) {
  #responsive-menu {
    left: 2rem;
  }
}

@media only screen and (min-width: 300px) and (max-width: 339px) {
  #responsive-menu {
    width: 29rem;
  }
}

@media only screen and (min-width: 300px) and (max-width: 349px) {
  .main-content {
    padding: 5.2rem 0 8.3rem;
  }
}

@media only screen and (min-width: 300px) and (max-width: 399px) {
  nav {
    padding: 0.4rem 2.3rem;
  }

  .logo {
    width: 9.5rem;
  }

  .logo,
  #menu-icon {
    height: 2.9rem;
  }

  #menu-icon {
    width: 2.9rem;
  }

  #responsive-menu {
    height: 40rem;
    padding: 2.9rem 1rem 2.9rem 4.6rem;
  }

  .responsive-link a:link,
  .responsive-link a:visited,
  .responsive-link {
    font-size: 1.4rem;
  }

  .close-btn {
    width: 2.6rem;
    height: 2.6rem;
  }

  .heading {
    height: 30rem;
  }

  h1 {
    font-size: 2.6rem;
  }

  footer {
    margin: 10.5rem 4.1rem 3.6rem;
  }
}

@media only screen and (min-width: 300px) and (max-width: 469px) {
  .footer-img img {
    width: 3.6rem;
    height: 3.6rem;
  }

  .footer-text {
    font-size: 1rem;
  }
}

@media only screen and (min-width: 340px) and (max-width: 399px) {
  #responsive-menu {
    width: 32rem;
  }
}

@media only screen and (min-width: 350px) and (max-width: 399px) {
  .main-content {
    padding: 5.2rem 0 10.5rem;
  }

  .description ul,
  .description p {
    font-size: 1.1rem;
    line-height: 1.6;
  }

  .contact-btn {
    padding: 5px 1.4rem;
  }

  .contact-btn a:link,
  .contact-bt a:visited {
    font-size: 1.2rem;
  }
}

@media only screen and (min-width: 390px) and (max-width: 399px) {
  #responsive-menu {
    left: 8rem;
  }
}

@media only screen and (max-width: 399px) {
  .close-btn {
    margin-top: -2rem;
    transform: translateX(-1rem);
  }

  h1 {
    padding: 0 2rem;
  }

  .description {
    padding: 0 3.2rem;
  }
}

@media only screen and (min-width: 400px) and (max-width: 429px) {
  footer {
    margin: 10.5rem 8.3rem 3.6rem;
  }
}

@media only screen and (min-width: 400px) and (max-width: 469px) {
  .description ul,
  .description p {
    font-size: 1.2rem;
    line-height: 1.8;
  }
}

@media only screen and (min-width: 400px) and (max-width: 499px) {
  nav {
    padding: 0.6rem 2.6rem;
  }

  .logo {
    width: 11rem;
    height: 3.2rem;
  }

  h1 {
    font-size: 3.2rem;
  }

  .main-content {
    padding: 6.6rem 0 19rem;
  }

  .description {
    padding: 0 4.1rem;
  }
}

@media only screen and (min-width: 400px) and (max-width: 599px) {
  #menu-icon {
    width: 3.2rem;
    height: 3.2rem;
  }

  #responsive-menu {
    width: 41rem;
    height: 55rem;
    padding: 3.2rem 2rem 3.2rem 7.4rem;
  }

  .responsive-link a:link,
  .responsive-link a:visited,
  .responsive-link {
    font-size: 1.6rem;
  }

  .heading {
    height: 35rem;
  }

  .contact-btn {
    padding: 6px 1.6rem;
  }

  .contact-btn a:link,
  .contact-bt a:visited {
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 400px) and (max-width: 989px) {
  .close-btn {
    margin-top: -2.3rem;
  }
}

@media only screen and (min-width: 430px) and (max-width: 559px) {
  footer {
    margin: 10.5rem 10.5rem 3.6rem;
  }
}

@media only screen and (min-width: 470px) and (max-width: 599px) {
  .footer-img img {
    width: 4.1rem;
    height: 4.1rem;
  }

  .footer-text {
    font-size: 1.2rem;
  }
}

@media only screen and (min-width: 470px) and (max-width: 899px) {
  .description ul,
  .description p {
    font-size: 1.3rem;
    line-height: 2;
  }
}

@media only screen and (min-width: 480px) and (max-width: 499px) {
  #responsive-menu {
    left: 9rem;
  }
}

@media only screen and (min-width: 500px) and (max-width: 519px) {
  #responsive-menu {
    left: 10rem;
  }
}

@media only screen and (max-width: 500px) {
  .heading--transaction {
    background: url(../images/transaction-coordinator-sm.png),
      rgba(0, 0, 0, 0.5);
  }

  .heading--title {
    background: url(../images/title-agent-sm.png), rgba(0, 0, 0, 0.5);
  }

  .heading--escrow {
    background: url(../images/escrow-agent-sm.png), rgba(0, 0, 0, 0.5);
  }

  .heading--closing {
    background: url(../images/closing-sm.png), rgba(0, 0, 0, 0.5);
    background-position: center;
  }
}

@media only screen and (min-width: 500px) and (max-width: 599px) {
  nav {
    padding: 0.6rem 3.6rem;
  }

  .logo {
    width: 12rem;
    height: 3.4rem;
  }

  h1 {
    font-size: 3.6rem;
  }
}

@media only screen and (min-width: 500px) and (max-width: 650px) {
  .description {
    padding: 0 5.8rem;
  }
}

@media only screen and (min-width: 500px) and (max-width: 799px) {
  .main-content {
    padding: 8.3rem 0 19rem;
  }
}

@media only screen and (min-width: 501px) and (max-width: 999px) {
  .heading--transaction {
    background: url(../images/transaction-coordinator-md.png),
      rgba(0, 0, 0, 0.5);
  }

  .heading--title {
    background: url(../images/title-agent-md.png), rgba(0, 0, 0, 0.5);
  }

  .heading--escrow {
    background: url(../images/escrow-agent-md.png), rgba(0, 0, 0, 0.5);
  }

  .heading--closing {
    background: url(../images/closing-md.png), rgba(0, 0, 0, 0.5);
  }
}

@media only screen and (min-width: 520px) and (max-width: 539px) {
  #responsive-menu {
    left: 12rem;
  }
}

@media only screen and (min-width: 540px) and (max-width: 559px) {
  #responsive-menu {
    left: 14rem;
  }
}

@media only screen and (min-width: 560px) and (max-width: 579px),
  (min-width: 610px) and (max-width: 629px),
  (min-width: 730px) and (max-width: 739px) {
  #responsive-menu {
    left: 17rem;
  }
}

@media only screen and (min-width: 580px) and (max-width: 599px),
  (min-width: 630px) and (max-width: 649px),
  (min-width: 760px) and (max-width: 769px) {
  #responsive-menu {
    left: 19rem;
  }
}

@media only screen and (min-width: 600px) and (max-width: 609px),
  (min-width: 720px) and (max-width: 729px) {
  #responsive-menu {
    left: 15rem;
  }
}

@media only screen and (min-width: 600px) and (max-width: 699px) {
  #responsive-menu {
    width: 46rem;
    padding: 4.1rem 2.3rem 4.1rem 9.4rem;
  }

  .responsive-link a:link,
  .responsive-link a:visited,
  .responsive-link {
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 600px) and (max-width: 799px) {
  .heading {
    height: 40rem;
  }
}

@media only screen and (min-width: 600px) and (max-width: 899px) {
  nav {
    padding: 0.8rem 3.2rem;
  }

  .logo {
    width: 15rem;
    height: 4.2rem;
  }

  .contact-btn {
    padding: 6px 1.8rem;
  }

  .contact-btn a {
    font-size: 1.8rem;
  }

  .footer-img img {
    width: 4.6rem;
    height: 4.6rem;
  }

  .footer-text {
    font-size: 1.3rem;
  }
}

@media only screen and (min-width: 600px) and (max-width: 1024px) {
  #menu-icon {
    width: 3.6rem;
    height: 3.6rem;
  }
}

@media only screen and (min-width: 600px) and (max-width: 1099px) {
  h1 {
    font-size: 4.1rem;
  }
}

@media only screen and (min-width: 650px) and (max-width: 659px) {
  #responsive-menu {
    left: 20rem;
  }
}

@media only screen and (min-width: 651px) and (max-width: 899px) {
  .description {
    padding: 0 8.3rem;
  }
}

@media only screen and (min-width: 660px) and (max-width: 669px),
  (min-width: 770px) and (max-width: 779px) {
  #responsive-menu {
    left: 21rem;
  }
}

@media only screen and (min-width: 670px) and (max-width: 679px),
  (min-width: 780px) and (max-width: 799px) {
  #responsive-menu {
    left: 22rem;
  }
}

@media only screen and (min-width: 680px) and (max-width: 689px) {
  #responsive-menu {
    left: 23rem;
  }
}

@media only screen and (min-width: 690px) and (max-width: 699px) {
  #responsive-menu {
    left: 24rem;
  }
}

@media only screen and (min-width: 700px) and (max-width: 709px) {
  #responsive-menu {
    left: 13rem;
  }
}

@media only screen and (min-width: 710px) and (max-width: 719px) {
  #responsive-menu {
    left: 14rem;
  }
}

@media only screen and (min-width: 740px) and (max-width: 749px) {
  #responsive-menu {
    left: 16rem;
  }
}

@media only screen and (min-width: 750px) and (max-width: 759px) {
  #responsive-menu {
    left: 17rem;
  }
}

@media only screen and (min-width: 800px) and (max-width: 819px) {
  #responsive-menu {
    left: 30rem;
  }

  .close-btn {
    transform: translateX(-8.3rem);
  }
}

@media only screen and (min-width: 800px) and (max-width: 1099px) {
  .heading {
    height: 40rem;
  }

  .main-content {
    gap: 9.4rem;
    padding: 10.5rem 0 19rem;
  }
}

@media only screen and (min-width: 820px) and (max-width: 870px) {
  #responsive-menu {
    left: 32rem;
  }
}

@media only screen and (min-width: 820px) and (max-width: 930px) {
  .close-btn {
    transform: translateX(-7.4rem);
  }
}

@media only screen and (min-width: 880px) and (max-width: 930px) {
  #responsive-menu {
    left: 38rem;
  }
}

@media only screen and (min-width: 900px) and (max-width: 1099px) {
  nav {
    padding: 1rem 3.6rem;
  }

  .logo {
    width: 16rem;
    height: 4.5rem;
  }

  .description ul,
  .description p {
    line-height: 2.3;
  }

  .description ul,
  .description p,
  .footer-text {
    font-size: 1.4rem;
  }

  .contact-btn {
    padding: 8px 2rem;
  }

  .footer-img img {
    width: 5.2rem;
    height: 5.2rem;
  }
}

@media only screen and (min-width: 940px) and (max-width: 989px) {
  #responsive-menu {
    left: 40rem;
  }

  .close-btn {
    transform: translateX(-4.1rem);
  }
}

@media only screen and (min-width: 950px) and (max-width: 989px) {
  .close-btn {
    transform: translateX(-2.3rem);
  }
}

@media only screen and (min-width: 990px) and (max-width: 1024px) {
  #responsive-menu {
    left: 44.5rem;
  }
}

@media only screen and (max-width: 999px) {
  .heading--transaction {
    background-position: center;
  }
}

@media only screen and (min-width: 1000px) and (max-width: 1299px) {
  .heading--title {
    background-position: center right -30rem;
  }
}

@media only screen and (min-width: 1000px) and (max-width: 3999px) {
  .heading--transaction {
    background: url(../images/transaction-coordinator-lg.png),
      rgba(0, 0, 0, 0.5);
    background-position: bottom;
  }

  .heading--title {
    background: url(../images/title-agent-lg.png), rgba(0, 0, 0, 0.5);
  }

  .heading--escrow {
    background: url(../images/escrow-agent-lg.png), rgba(0, 0, 0, 0.5);
    background-position: top;
  }

  .heading--closing {
    background: url(../images/closing-lg.png), rgba(0, 0, 0, 0.5);
  }

  .heading--closing,
  .heading--title {
    background-position: center;
  }
}

@media only screen and (max-width: 1024px) {
  nav ul {
    display: none;
  }

  #menu-icon {
    display: block;
    color: var(--primary-color);
  }

  #responsive-menu {
    top: 0;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1099px) {
  .nav-link a:link,
  .nav-link a:visited,
  .about-link,
  .dd-link a:link,
  .dd-link a:visited {
    font-size: 1.4rem;
  }

  #dropdown-menu {
    top: 6.75rem;
    left: 66rem;
    padding: 2rem 1.2rem;
  }
}

@media only screen and (min-width: 1100px) and (max-width: 1199px) {
  #dropdown-menu {
    left: 70rem;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1299px) {
  #dropdown-menu {
    left: 80rem;
  }
}

@media only screen and (min-width: 1300px) and (max-width: 1399px) {
  #dropdown-menu {
    left: 90rem;
  }
}

@media only screen and (min-width: 1500px) and (max-width: 1599px) {
  #dropdown-menu {
    left: 110rem;
  }
}

@media only screen and (min-width: 1600px) and (max-width: 1699px) {
  #dropdown-menu {
    left: 120rem;
  }
}

@media only screen and (min-width: 1700px) and (max-width: 1799px) {
  #dropdown-menu {
    left: 130rem;
  }
}

@media only screen and (min-width: 1800px) and (max-width: 1899px) {
  #dropdown-menu {
    left: 140rem;
  }
}

@media only screen and (min-width: 1900px) {
  .main-content {
    gap: 15rem;
  }

  footer {
    padding: 10.5rem 0 2rem;
  }
}

@media only screen and (min-width: 1900px) and (max-width: 1999px) {
  #dropdown-menu {
    left: 148rem;
  }
}

@media only screen and (min-width: 1900px) and (max-width: 2199px) {
  nav {
    padding: 1.2rem 6.6rem;
  }

  .heading {
    height: 55rem;
  }
}

@media only screen and (min-width: 1900px) and (max-width: 2299px) {
  .contact-btn {
    padding: 1rem 2.6rem;
  }

  .contact-btn a:link,
  .contact-btn a:visited {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 2000px) {
  .heading {
    background-repeat: no-repeat;
  }
}

@media only screen and (min-width: 2000px) and (max-width: 2099px) {
  #dropdown-menu {
    left: 157rem;
  }
}

@media only screen and (min-width: 2100px) and (max-width: 2199px) {
  #dropdown-menu {
    left: 168rem;
  }
}

@media only screen and (min-width: 2200px) {
  nav {
    padding: 1.8rem 4.6rem;
  }

  .logo {
    width: 23rem;
    height: 6.3rem;
  }

  .nav-link a:link,
  .nav-link a:visited,
  .about-link,
  .footer-text {
    font-size: 1.8rem;
  }

  h1 {
    font-size: 6.6rem;
    line-height: 1.4;
  }

  p {
    font-size: 2rem;
  }

  .footer-img img {
    width: 7.4rem;
    height: 7.4rem;
  }
}

@media only screen and (min-width: 2200px) and (max-width: 2250px) {
  #dropdown-menu {
    top: 10.2rem;
    left: 172rem;
  }
}

@media only screen and (min-width: 2200px) and (max-width: 2999px) {
  .heading {
    height: 66rem;
  }
}

@media only screen and (min-width: 2251px) {
  ul .hidden-links {
    display: flex;
    gap: 3.6rem;
    list-style: none;
  }

  .about-link {
    display: none;
  }
}

@media only screen and (min-width: 2300px) and (max-width: 2999px) {
  .description p,
  .description ul {
    font-size: 1.8rem;
  }

  .contact-btn {
    padding: 1.4rem 3.2rem;
  }

  .contact-btn a:link,
  .contact-btn a:visited {
    font-size: 2.3rem;
  }
}

@media only screen and (max-width: 2999px) {
  .heading {
    height: 50rem;
  }
}

@media only screen and (min-width: 3000px) {
  .main-content {
    max-width: 80vw;
    margin: 0 auto;
  }

  .description {
    padding: 0;
  }

  .description p,
  .description ul {
    font-size: 2rem;
    line-height: 2.2;
  }

  .contact-btn {
    padding: 1.6rem 3.6rem;
  }

  .contact-btn a:link,
  .contact-btn a:visited {
    font-size: 2.6rem;
  }
}

@media only screen and (min-width: 3000px) and (max-width: 3999px) {
  .heading {
    height: 83rem;
  }
}

@media only screen and (min-width: 3000px) and (max-width: 4999px) {
  nav {
    padding: 2rem 8.3rem;
  }
}

@media only screen and (min-width: 4000px) and (max-width: 4499px) {
  html {
    font-size: 70%;
  }
}

@media only screen and (min-width: 4000px) and (max-width: 5999px) {
  .heading {
    height: 100rem;
  }

  .heading--transaction {
    background: url(../images/transaction-coordinator-xl.png),
      rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
  }

  .heading--title {
    background: url(../images/title-agent-xl.png), rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
  }

  .heading--escrow {
    background: url(../images/escrow-agent-xl.png), rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
  }

  .heading--closing {
    background: url(../images/closing-xl.png), rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
  }

  .heading--transaction {
    background-position: bottom;
  }

  .heading--title {
    background-position: center;
  }

  .heading--escrow,
  .heading--closing {
    background-position: top;
  }
}

@media only screen and (min-width: 4500px) and (max-width: 4999px) {
  html {
    font-size: 75%;
  }
}

@media only screen and (min-width: 5000px) and (max-width: 5499px) {
  html {
    font-size: 80%;
  }
}

@media only screen and (min-width: 5000px) and (max-width: 6999px) {
  nav {
    padding: 2.3rem 12rem;
  }
}

@media only screen and (min-width: 5500px) and (max-width: 5999px) {
  html {
    font-size: 85%;
  }
}

@media only screen and (min-width: 6000px) and (max-width: 6499px) {
  html {
    font-size: 90%;
  }
}

@media only screen and (min-width: 6000px) and (max-width: 7999px) {
  .heading {
    height: 125rem;
  }

  .heading--transaction {
    background: url(../images/transaction-coordinator-xxl.png),
      rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
  }

  .heading--title {
    background: url(../images/title-agent-xxl.png), rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
  }

  .heading--escrow {
    background: url(../images/escrow-agent-xxl.png), rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
  }

  .heading--closing {
    background: url(../images/closing-xxl.png), rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
  }

  .heading--transaction {
    background-position: bottom;
  }

  .heading--title {
    background-position: center;
  }

  .heading--escrow,
  .heading--closing {
    background-position: top;
  }
}

@media only screen and (min-width: 6500px) and (max-width: 6999px) {
  html {
    font-size: 95%;
  }
}

@media only screen and (min-width: 7000px) {
  nav {
    padding: 3.2rem 18rem;
  }
}

@media only screen and (min-width: 7000px) and (max-width: 7499px) {
  html {
    font-size: 100%;
  }
}

@media only screen and (min-width: 7500px) and (max-width: 7999px) {
  html {
    font-size: 105%;
  }
}

@media only screen and (min-width: 8000px) {
  .heading {
    height: 135rem;
  }

  .heading--transaction {
    background: url(../images/transaction-coordinator-lgst.png),
      rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
  }

  .heading--title {
    background: url(../images/title-agent-lgst.png), rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
  }

  .heading--escrow {
    background: url(../images/escrow-agent-lgst.png), rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
  }

  .heading--closing {
    background: url(../images/closing-lgst.png), rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
  }

  .heading--transaction {
    background-position: bottom;
  }

  .heading--title {
    background-position: center;
  }

  .heading--escrow,
  .heading--closing {
    background-position: top;
  }
}

@media only screen and (min-width: 8000px) and (max-width: 8499px) {
  html {
    font-size: 110%;
  }
}

@media only screen and (min-width: 8500px) and (max-width: 8999px) {
  html {
    font-size: 115%;
  }
}

@media only screen and (min-width: 9000px) and (max-width: 9499px) {
  html {
    font-size: 120%;
  }
}

@media only screen and (min-width: 9500px) and (max-width: 9999px) {
  html {
    font-size: 125%;
  }
}