/* 
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: 340px) and (max-width: 349px),
  (min-width: 420px) and (max-width: 439px) {
  #responsive-menu {
    left: 3rem;
  }
}

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

@media only screen and (max-width: 269px) {
  .heading span {
    font-size: 1.2rem;
  }

  .info {
    font-size: 1rem;
  }

  .phones {
    gap: 3.2rem;
  }

  form {
    width: 20rem;
  }

  form input:not(.submit-btn) {
    height: 2.6rem;
  }

  form input:not(.submit-btn),
  form textarea {
    width: 16rem;
  }
}

@media only screen and (min-width: 270px) and (max-width: 279px),
  (min-width: 300px) and (max-width: 309px),
  (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) {
  .heading span {
    font-size: 1.4rem;
  }

  .info {
    font-size: 1.1rem;
  }

  .phones {
    gap: 3.6rem;
  }

  form {
    width: 23rem;
  }

  form input:not(.submit-btn),
  form textarea {
    width: 19rem;
  }
}

@media only screen and (min-width: 270px) and (max-width: 329px) {
  form input:not(.submit-btn) {
    height: 3rem;
  }
}

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

@media only screen and (min-width: 290px) and (max-width: 299px),
  (min-width: 320px) and (max-width: 329px),
  (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,
  form label,
  .submit-btn {
    font-size: 1.2rem;
  }

  main {
    top: 8.3rem;
    left: 1rem;
  }

  .bg-rectangle {
    height: 20rem;
    top: 6rem;
  }

  .contact-info {
    column-gap: 2rem;
    transform: translateX(-1rem);
  }

  .heading span {
    font-size: 1.2rem;
  }

  .info {
    margin-bottom: 2.9rem;
    font-size: 8px;
  }

  .contact-form {
    margin-top: -12rem;
  }

  h1 {
    font-size: 2rem;
  }

  form input:not(.submit-btn),
  form textarea {
    font-size: 1rem;
  }

  .submit-btn {
    padding: 6px 1.4rem;
  }

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

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

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

@media only screen and (min-width: 300px) and (max-width: 329px) {
  main {
    left: 0rem;
  }

  .phones {
    gap: 4.6rem;
  }

  form {
    width: 26rem;
  }

  h1 {
    font-size: 2.3rem;
  }

  form input:not(.submit-btn),
  form textarea {
    width: 22rem;
    font-size: 1.2rem;
  }

  form label,
  .submit-btn {
    font-size: 1.4rem;
  }

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

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

@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: 45rem;
    padding: 2.6rem 1rem 2.6rem 5.2rem;
  }

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

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

  main {
    top: 12rem;
  }

  .bg-rectangle {
    height: 25rem;
    top: 9rem;
  }

  .contact-info {
    column-gap: 2.3rem;
  }

  .heading span {
    font-size: 1.4rem;
  }

  .info {
    margin-bottom: 2.9rem;
    font-size: 1rem;
  }

  footer {
    margin: 10.5rem 5.2rem 3.6rem;
    top: 105rem;
  }
}

@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: 300px) and (max-width: 799px) {
  .contact-form {
    margin-top: -8rem;
  }
}

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

@media only screen and (min-width: 330px) and (max-width: 359px) {
  .phones {
    gap: 7.4rem;
  }

  form {
    width: 29rem;
  }

  form input:not(.submit-btn),
  form textarea {
    width: 25rem;
  }
}

@media only screen and (min-width: 330px) and (max-width: 399px) {
  main {
    left: 0.5rem;
  }
}

@media only screen and (min-width: 330px) and (max-width: 459px) {
  .contact-info {
    padding: 1rem;
  }
}

@media only screen and (min-width: 330px) and (max-width: 980px) {
  h1 {
    font-size: 2.9rem;
  }

  form label,
  .submit-btn {
    font-size: 1.6rem;
  }

  form input:not(.submit-btn),
  form textarea {
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 330px) and (max-width: 1099px) {
  .submit-btn {
    padding: 8px 1.8rem;
  }
}

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

@media only screen and (min-width: 360px) and (max-width: 399px) {
  .phones {
    gap: 8.3rem;
  }

  form {
    width: 32rem;
  }

  form input:not(.submit-btn),
  form textarea {
    width: 28rem;
  }
}

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

  form {
    padding: 2rem;
  }
}

@media only screen and (min-width: 400px) and (max-width: 409px) {
  #responsive-menu {
    left: 1rem;
  }

  main {
    left: 0;
  }
}

@media only screen and (min-width: 400px) and (max-width: 459px) {
  form {
    width: 36rem;
  }

  form input:not(.submit-btn),
  form textarea {
    width: 30rem;
  }
}

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

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

  .bg-rectangle {
    height: 26rem;
    top: 11rem;
  }

  .contact-info {
    column-gap: 4.6rem;
  }

  .heading span {
    font-size: 1.6rem;
  }

  .info {
    margin-bottom: 2.9rem;
    font-size: 1rem;
  }
}

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

@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;
  }
}

@media only screen and (min-width: 400px) and (max-width: 799px) {
  .phones {
    gap: 10.5rem;
  }

  footer {
    top: 120rem;
  }
}

@media only screen and (min-width: 400px) and (max-width: 980px) {
  form {
    padding: 2.9rem;
  }
}

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

  main {
    left: 0.5rem;
  }
}

@media only screen and (min-width: 420px) and (max-width: 439px) {
  main {
    left: 1.5rem;
  }
}

@media only screen and (min-width: 440px) and (max-width: 459px),
  (min-width: 480px) and (max-width: 549px) {
  main {
    left: 2.5rem;
  }
}

@media only screen and (min-width: 460px) and (max-width: 479px) {
  main {
    left: 1rem;
  }
}

@media only screen and (min-width: 460px) and (max-width: 519px) {
  form {
    width: 41rem;
  }

  form input:not(.submit-btn),
  form textarea {
    width: 35rem;
  }
}

@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: 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 (min-width: 500px) and (max-width: 599px) {
  nav {
    padding: 0.6rem 3.6rem;
  }

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

  .bg-rectangle {
    height: 28rem;
    top: 10rem;
  }

  .contact-info {
    column-gap: 6.6rem;
  }

  .heading span {
    font-size: 1.8rem;
  }

  .info {
    margin-bottom: 3.2rem;
    font-size: 1.2rem;
  }
}

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

@media only screen and (min-width: 520px) and (max-width: 599px),
  (min-width: 800px) and (max-width: 980px) {
  form {
    width: 46rem;
  }

  form input:not(.submit-btn),
  form textarea {
    width: 40rem;
  }
}

@media only screen and (min-width: 520px) and (max-width: 669px) {
  .contact-info {
    margin-left: 0;
  }
}

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

@media only screen and (min-width: 550px) and (max-width: 639px) {
  main {
    left: 4rem;
  }
}

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

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

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

@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;
  }

  .bg-rectangle {
    height: 30rem;
    top: 10rem;
  }

  .heading span {
    font-size: 2rem;
  }

  .info {
    margin-bottom: 3.2rem;
    font-size: 1.4rem;
  }

  form {
    width: 52rem;
  }

  form input:not(.submit-btn),
  form textarea {
    width: 46rem;
  }
}

@media only screen and (nin-width: 600px) and (max-width: 799px) {
  .contact-info {
    column-gap: 12rem;
  }
}

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

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

  .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: 989px) {
  footer {
    margin: 21rem 15rem 0;
  }
}

@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: 620px) and (max-width: 639px),
  (min-width: 740px) and (max-width: 759px) {
  #responsive-menu {
    left: 18rem;
  }
}

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

@media only screen and (min-width: 640px) and (max-width: 749px) {
  main {
    left: 6rem;
  }
}

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

@media only screen and (min-width: 670px) and (max-width: 699px) {
  .contact-info {
    margin-left: 1rem;
  }
}

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

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

@media only screen and (min-width: 700px) and (max-width: 749px) {
  .contact-info {
    margin-left: -2rem;
  }
}

@media only screen and (min-width: 700px) and (max-width: 799px) {
  .bg-rectangle {
    height: 34rem;
    top: 10rem;
  }

  .heading span {
    font-size: 2.3rem;
  }

  .info {
    margin-bottom: 3.6rem;
    font-size: 1.6rem;
  }

  form {
    width: 58rem;
  }

  form input:not(.submit-btn),
  form textarea {
    width: 52rem;
  }
}

@media only screen and (min-width: 750px) and (max-width: 799px) {
  main {
    left: 9rem;
  }
}

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

@media only screen and (max-width: 799px) {
  main {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem;
    transform: translateY(-2.6rem);
  }

  .bg-rectangle {
    position: absolute;
  }

  .contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 3.6rem;
    position: relative;
  }

  .heading {
    margin-bottom: 1.8rem;
    margin-left: 0;
  }
}

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

  .close-btn {
    transform: translateX(-5.8rem);
    margin-top: -2rem;
  }
}

@media only screen and (min-width: 800px) and (max-width: 829px) {
  main {
    gap: 4.1rem;
    padding: 10.5rem 3.6rem;
    left: 4rem;
  }
}

@media only screen and (min-width: 800px) and (max-width: 980px) {
  .bg-rectangle {
    height: 46rem;
    top: 27rem;
  }

  .heading span {
    font-size: 1.8rem;
  }

  .heading-icon {
    width: 1.8rem;
    height: 1.8rem;
  }

  .info {
    font-size: 1.4rem;
  }
}

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

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

@media only screen and (min-width: 830px) and (max-width: 859px) {
  main {
    gap: 4.6rem;
    padding: 10.5rem 4.1rem;
    left: 4rem;
  }
}

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

  .close-btn {
    margin-top: -2rem;
    transform: translateX(-3.6rem);
  }
}

@media only screen and (min-width: 860px) and (max-width: 899px) {
  main {
    gap: 5.2rem;
    padding: 10.5rem 4.6rem;
    left: 6rem;
  }
}

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

  .close-btn {
    margin-top: -1.8rem;
    transform: translateX(-2.6rem);
  }
}

@media only screen and (min-width: 900px) and (max-width: 980px) {
  main {
    gap: 4.6rem;
    padding: 10.5rem 4.1rem;
    left: 10rem;
  }
}

@media only screen and (min-width: 900px) and (max-width: 989px) {
  .bg-rectangle {
    height: 45rem;
    top: 28rem;
  }
}

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

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

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

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

@media only screen and (min-width: 910px) and (max-width: 929px) {
  #responsive-menu {
    left: 34rem;
  }
}

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

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

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

@media only screen and (max-width: 980px) {
  .heading {
    gap: 1.2rem;
  }

  form {
    gap: 2.3rem;
    transform: translateY(0rem);
  }
}

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

@media only screen and (min-width: 990px) and (max-width: 1099px) {
  main {
    gap: 6.6rem;
  }

  .heading {
    gap: 1.4rem;
    margin-left: 0;
  }

  .heading span {
    font-size: 2.3rem;
  }

  .heading-icon {
    width: 2.3rem;
    height: 2.3rem;
  }

  .info {
    font-size: 1.6rem;
  }

  form {
    gap: 2.3rem;
    width: 55rem;
    transform: translateY(-2rem);
  }

  h1 {
    font-size: 3.6rem;
  }

  form input:not(.submit-btn),
  form textarea {
    width: 47.5rem;
  }

  footer {
    margin: 24rem 15rem 0;
  }
}

@media only screen and (min-width: 990px) and (max-width: 1199px) {
  main {
    padding: 10.5rem 6.6rem;
  }
}

@media only screen and (min-width: 990px) and (max-width: 1024px) {
  main {
    left: 2rem;
  }
}

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

@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 1rem;
  }

  main {
    left: 4rem;
  }
}

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

  main {
    top: 12rem;
    left: 4rem;
    gap: 7.4rem;
  }

  .bg-rectangle {
    top: 25rem;
  }

  form {
    transform: translateY(1rem);
  }
}

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

  main {
    top: 15rem;
    left: 5rem;
    padding: 10.5rem 9.4rem;
    gap: 9.4rem;
  }
}

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

  main {
    left: 7rem;
  }
}

@media only screen and (min-width: 1300px) and (max-width: 1499px) {
  main {
    top: 15rem;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1499px) {
  main {
    left: 9rem;
  }
}

@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: 1600px) and (max-width: 1799px) {
  main {
    left: 23rem;
  }
}

@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;
  }

  main {
    left: 26rem;
  }
}

@media only screen and (min-width: 1900px) {
  .heading-icon {
    width: 2.9rem;
    height: 2.9rem;
  }

  .heading span {
    font-size: 2.9rem;
  }

  .info,
  form input:not(.submit-btn),
  form textarea,
  form label,
  .submit-btn {
    font-size: 2rem;
  }

  form {
    transform: translateY(-2rem);
    width: 71.5rem;
  }

  h1 {
    font-size: 4.6rem;
  }

  form input:not(.submit-btn) {
    height: 5rem;
  }

  form input:not(.submit-btn),
  form textarea {
    width: 63.5rem;
  }

  .submit-btn {
    padding: 1.2rem 2.6rem;
  }
}

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

@media only screen and (min-width: 1900px) and (max-width: 2199px) {
  .bg-rectangle {
    height: 60rem;
    top: 27rem;
  }

  main {
    left: 30rem;
  }
}

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

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

@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;
  }

  .bg-rectangle {
    height: 62rem;
  }

  .info {
    margin-bottom: 5.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.3rem;
    left: 175rem;
  }
}

@media only screen and (min-width: 2200px) and (max-width: 2599px) {
  main {
    left: 46rem;
  }
}

@media only screen and (min-width: 2200px) and (max-width: 6999px) {
  .bg-rectangle {
    top: 23rem;
  }
}

@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: 2600px) and (max-width: 2999px) {
  main {
    left: 66rem;
  }
}

@media only screen and (min-width: 3000px) and (max-width: 3499px) {
  main {
    left: 83rem;
  }
}

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

@media only screen and (min-width: 3500px) and (max-width: 3999px) {
  main {
    left: 105rem;
  }
}

@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: 6499px) {
  main {
    left: 120rem;
  }
}

@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: 6500px) and (max-width: 6999px) {
  html {
    font-size: 95%;
  }
}

@media only screen and (min-width: 6500px) and (max-width: 7999px) {
  main {
    left: 150rem;
  }
}

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

  .bg-rectangle {
    top: 20rem;
  }
}

@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) {
  main {
    left: 165rem;
  }
}

@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%;
  }
}