@media screen and (max-width: 1089px) {
  .margin-right-auto {
    margin-right: 0;
  }
}

@media screen and (max-width: 1024px) {
  #scrollUp {
    right: 0.625rem;
  }
}

@media screen and (max-width: 1009px) {
  section.pricing {
    max-width: 37.5rem;
  }

  .links {
    margin-left: var(--size-40);
    margin-bottom: 5.625rem;
  }

  .links-inside-container,
  .row-one,
  .row-two {
    gap: 5.313rem;
  }

  hr.responsive-length {
    width: 88%;
  }
}

@media screen and (max-width: 1004px) {
  .card-flex-box .card {
    max-width: 20.313rem;
  }

  .different-perspective {
    flex-direction: column;
    align-items: center;
  }

  .responsive-container {
    max-width: 45.938rem;
  }

  .different-perspective-text {
    text-align: left;
    padding: 3.438rem 4.5rem 0px 4.5rem;
  } 

  .different-perspective img {
    max-width: 82%;
  }
}

@media screen and (max-width: 973px) {
  .footer {
    padding: 0.938rem 0px 2.188rem;
  }
  
  .footer-flex-container form {
    max-width: none;
  }

  .footer-flex-container form h3{
    max-width: none;
  }

  .footer-flex-container div {
    max-width: none;
    margin-left: 5px;
  }

  .footer-container {
    margin: 0 0.938rem 6.25rem 0.938rem;
}

.form-btn { 
  width: 86%;
}

.links {
  margin-left: 15%;
}

.social-media div.facebook {
  margin-left: 0px;
 }
}

@media screen and (max-width: 967px) {
  .footer-nav {
    gap: 35px;
    padding: 0 60px 0 18%;
    margin-bottom: var(--size-50);
  }

  section.copyright {
    text-align: left;
    margin-bottom: var(--size-50);
    margin-left: 18%;
  }
  
  .copyright p {
    font-size: var(--size-14);
     padding-right: var(--size-100);
  }

  section.copyright p br {
    display: none;
  }

}

@media screen and (max-width: 973px) and (min-width: 768px) {
  input {
    width: 17.188rem;
  }

  form select { 
    width: 17.813rem;
  }

  form textarea {
    width: 36.063rem;
    margin-left: 0.313rem;
    margin-bottom: 0rem;
  }

  .form-checkbox {
    margin-left: 1.438rem;
  }
  .consent p {
    max-width: 34.375rem;
    margin: 0rem 1.438rem 1.25rem 0rem;
  }
}

@media screen and (max-width: 965px){
  .fa-facebook-f {
    margin-left: 0rem;
  }

  .footer-nav div.social-media {
    margin-left: 0rem;
  }

 
}

@media screen and (max-width: 914px) and (min-width: 769px) {
  .slack {display: none;}
}

@media screen and (max-width: 866px) {
  .hero {
    height: 52.813rem;
  }

  .key-benefits {
    margin-top: -85px;
  }
  
  .icons {
    margin-left: 0;
    margin-top: 0.625rem;
  }

  .banner-container {
    max-width: 34.375rem;
    margin-top: 5.313rem;
  }

  .hero-banner { 
    margin-top: 0;
    gap: var(--size-35);
  }
  
  .banner-container h1 {
    margin-top: 0;
  }

  .banner-container p {
    margin-bottom: var(--size-35);
    margin-top: 0.625rem;
  }

  .hero-top-tabs {
    display: none;
  }

  [aria-controls="navbarDropdown"] {
      display: block;
  } 

  .main-nav-container [aria-expanded="false"] ~ ul {
      display: none;
  }

 .main-nav-container [aria-expanded="true"] ~  ul {
    display: block;
    position: absolute;
    right: 0;
    top: var(--size-50);
    width: 100%;
    text-align: right;
    max-width: max-content;
    margin-right: var(--size-50);
    background-color: white;
    padding-left: 0rem;
    box-shadow: 0 0 100px 10px  rgba(48, 63, 100, 0.2);
  }

  .main-nav-container [aria-expanded="true"] ~ ul li:nth-child(6) {
    border-bottom: 1px solid  rgba(48, 63, 100, 0.2);
  }

  .main-nav-container [aria-expanded="true"] ~  ul .buy-now-btn {
    background-color: transparent;
    border-radius:0;
    color: black;
    padding: 0;
    font-weight: 400;
    padding-left: 0px;
  }

  [aria-expanded="true"] ~ ul li {
    padding: 0.625rem 2.5rem;
    border-top: 1px solid  rgba(48, 63, 100, 0.2);
    border-right: 1px solid  rgba(48, 63, 100, 0.2);
    border-left: 1px solid  rgba(48, 63, 100, 0.2);
    display: flex;
    justify-content: center;
  }

  .icons div.logo4,
  .icons div.logo7 {
    display: none;
  }

  .main-nav-container {
    max-width: 34.688rem;
  }
  .main-nav-container img{
    position: absolute;
  }

  .navbar-toggler {
    position: absolute;
    top: var(--size-20);
    right: var(--size-100);
  }
}

@media screen and (max-width: 771px) and (min-width: 769px) {
  .footer-flex-container div {
    margin-left: 0rem;
  }
}

@media screen and (max-width: 768px) {
  .card-flex-box .card {
    max-width: 15.625rem;
  }

  .responsive-container {
    max-width: 36.25rem;
  }

  .different-perspective img {
    max-width: 89%;
    margin-left: 11%;
  }

  .key-benefits {
    margin-bottom: var(--size-45);
  }

  .why-front {
    margin-bottom: 0.625rem;
  }

  .front-reasons {
    transform: rotate(90deg);
    align-items: flex-end;
    justify-content: initial;
    margin-top: 16.875rem;
    position: relative;
    right: 11.563rem;
  }

 .front-reasons hr {
  width: 2%;
  margin: -43px -57px;
  }

  .reasons { 
    display: flex;
    flex-direction: row;
    align-items: center;
    transform: rotate(270deg);
  }

  .reasons h3 {
    width: 8.938rem;
  }

  .third-dot {
    margin-left: 4rem;
  }

  h3.cc {
    width: 12.5rem;
    position: relative;
    left: 0.813rem;
  }

  h3.basic-elements {
    position: relative;
    left: 0.688rem;
  }

  .reasons.cc {
    position: relative;
    right: var(--size-60);
  }

  .reasons.pl {
    position: relative;
    right: 7.5rem;
  }

  .hr3 {
    position: relative;
    right: 7.5rem;
  }

  .why-front div.video-wrapper img {
    box-shadow: 1px 1px 22px -7px;
    max-width: 75%;
    height: 15.625rem;
  }

  .hubspot-flex-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .hubspot-flex-wrapper > img {
    max-width: 75%;
}

  .hubspot-flex-wrapper .grid-of-dots {
    position: absolute;
    max-width: 13.375rem;
    z-index: 10;
    left: 3.438rem;
    top: 17.188rem;
  }

  .hubspot-text {
    align-self: start;
    margin-left: var(--size-100);
    margin-top: var(--size-100);
  }

  .hubspot-text img {
    max-width: 34%;
  }

  .hubspot-text p {
    line-height: 1.7;
    font-size: 1.188rem;
    letter-spacing: 1px
  }

  br.desktop {
    display: none;
  }

  br.tablet {
    display: inline;
  }
  
  .weebly,
  .spotify {
    display: none;
  }

  section.pricing {
    max-width: 33.75rem;
  }
}

@media screen and (max-width: 767px) and (min-width: 599px) {
  input {
    width: 12.813rem;
  }

 form select { 
    width: 13.438rem;
  }

  form textarea {
    width: 27.188rem;
    margin-left: 0.313rem;
    margin-bottom: 0rem;
  }
}

@media screen and (max-width: 614px) {
  .card-flex-box .card {
    max-width: 19.375rem;
  }

  .responsive-container {
    max-width: 30rem;
  }

  .key-benefits {
    margin-top: -169px;
  }
}

@media screen and (max-width: 601px) and (min-width: 599px) {
  .footer-flex-container div {
    margin-left: 0rem;
  }
}

@media screen and (max-width: 598px) and (min-width: 591px) {
  input {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 20.625rem;
  }

  form select {
    width: 21.25rem;
  }

  textarea {
    width: 20.938rem;
  }
}

@media screen and (max-width: 590px) {
  input {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 16.875rem;
  }

  form select {
    width: 17.5rem;
  }

  form textarea {
    width: 17.188rem;
  }

  .copyright p {
    padding-right: var(--size-50);
  }
}

@media screen and (max-width: 550px) {
  .row-one,
  .row-two {
    gap: var(--size-55);
  }

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

  .columns a {
    font-size: var(--size-14);
  }
  
  .columns a span {
    font-size: 0.688rem;
  }
}

@media screen and (max-width: 535px) {
  .hero {
    height: 58.75rem;
  }
  
  .links {
    margin-left: 1%;
  }

  .footer-nav {
    padding: 0px 60px 0 5%;
  }

  section.copyright {
    margin-left: 6%;
  }
}

@media screen and (max-width: 530px) {
  .policy-terms span {
    margin: 0 1.063rem;
  }
}

@media screen and (max-width: 520px) {
  .responsive-container {
    max-width: 21.563rem;
  }

  .different-perspective-text {
    padding: 55px 0px 0px 42px;
  }

  .copyright p {
    padding-right: var(--size-20);
  }
}

@media screen and (max-width: 520px) and (min-width: 426px) {
  .logo-flex-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--size-30);
  }
}

@media screen and (max-width: 470px) {
  .pricing-grid-container {
    grid-template-columns: repeat(auto-fit, minmax(395px, 1fr));
  }
}

@media screen and (max-width: 450px) {
  .logo6 { left: 17.5rem; }
}

@media screen and (max-width: 438px) {
  input { 
    max-width: 13.125rem;
    margin: 0 0px 20px 0px;
  }

  select {
    max-width: 13.688rem;
    margin-left: 0.438rem;
  }

  .country {
    margin-left: 0.438rem;
  }

  form textarea {
    width: 13.125rem;
  }
}

@media screen and (max-width: 425px) {
  .logo6 { left: 17.5rem; }
  .hero { height: 61.25rem; }
  .navbar-toggler { right: var(--size-20); }
  
  .front-reasons {
    right: 5.313rem;
    margin-top: var(--size-100);
  }

  .pricing-grid-container {
    grid-template-columns: repeat(auto-fit, minmax(375px, 1fr));
  }
  
  .why-front div.video-wrapper img {
    margin-top: 14.375rem;
    height: 10.625rem;
    max-width: 93%;
  }

  .play-button {
    margin-top: 14.375rem;
    width: var(--size-55);
    height: var(--size-55);
  }

  .hubspot-flex-wrapper img {
    max-width: 93%;
  }

  .hubspot-flex-wrapper .grid-of-dots {
    position: absolute;
    max-width: 12.688rem;
    z-index: 10;
    left: var(--size-40);
    top: 5rem;
  }

  .front-reasons hr {
    margin: -50px -57px;
    height: var(--size-16);
    transform: rotate(90deg);
  }

  .hubspot-text {
    margin-left: 0;
  }

  .hubspot-text img {
    max-width: 12.5rem;
  }

  .hubspot-text br {
    display: none;
  }

  .trusted {
    padding-left: var(--size-20);
    padding-right: var(--size-20);
  }

  .pricing-grid-container {
    margin-top: var(--size-20);
  }

  .btn-form {
    max-width: 75%;
  }

  .links {
    margin-bottom: 4.375rem;
  }

  .footer-nav div.policy-terms {
    margin-right: 0;
  }

  .footer-nav {
    padding: 0 60px 0 5%;
  }

  .social-media select {
    max-width: var(--size-150);
  }

  #scrollUp {
    height: var(--size-30);
    width: var(--size-30);
    display: flex;
    justify-content: center;
    align-items: center;
    right: 3px;
  }
} 

@media screen and (max-width: 412px) {
  .pricing-grid-container {
    margin-top: 0px;
    grid-template-columns: repeat(auto-fit, minmax(355px, 1fr));
  }
}

@media screen and (max-width: 395px) {
  .policy-terms span {margin: 0 0.938rem;}

  .social-media div {margin-left: 0.813rem;}

  .social-media select {margin-left: 0.813rem;}
}

@media screen and (max-width: 392px) {
  .logo6 {left: 15rem;}
}

@media screen and (max-width: 375px) {
  .logo6 {left: 15rem;}

  .key-benefits p {
    margin-right: 0.313rem;
    margin-left: 0.313rem;
  }

  .front-reasons {
    right: 4.063rem;
    margin-top: 4.375rem;
  }

  .why-front p {
    width: 20.875rem;
  }

  .why-front div.video-wrapper img {
    max-width: 100%;
  }

  .hubspot-text {
    margin-top: var(--size-60);
  }

  .hubspot-text img {
    max-width: 10.625rem;
  }

  .hubspot-text p {
    font-size: var(--size-16);
  }

  .hubspot-flex-wrapper > img {
    max-width: 100%;
  }

  .hubspot-flex-wrapper .grid-of-dots {
    position: absolute;
    max-width: 9.125rem;
    z-index: 10;
    left: 1.563rem;
    top: 8.75rem;
  }

  .logo-flex-wrapper div.logo {
    min-width: 5.625rem;
  }

  .pricing-internal-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .pricing-internal-grid div h4 {
    font-size: 1.375rem;
  }

  .pricing-internal-grid div p {
    font-size: var(--size-18);
  } 

  .pricing-internal-grid img {
    max-width: 4.375rem;
  }

  .pricing-internal-grid div p {
    max-width: 21.875rem;
    margin-bottom: var(--size-50);
  }

  .starting-price {
    margin-right: var(--size-20);
  }

  .starting-price p {
    font-size: var(--size-18);
  }

  .links {
    gap: var(--size-50);
    margin-bottom: var(--size-55);
  }

  .links-inside-container {
    gap: var(--size-40);
  }
}