.fixed-header {
  position: absolute;
  top: 0;
  width: 100vw;
}

.hero  {
  height: 43.438rem;
  min-width: 100vw;
  background-image: 
    linear-gradient(173deg, transparent 0%, transparent 70%, white 70% 67%, white), 
    linear-gradient(118deg, transparent 0%, transparent 68%, #f1f3f7 68%, #f1f3f7  100%), 
    linear-gradient(to top left, #edeff3, transparent 60%);
}

.hero-top-tabs {
  display: flex;
  padding-top: 0.313rem;
  font-size: 0.813rem;
}

.hero-top-tabs a i { 
  font-size: 0.563;
  margin: 0 0.313rem;
 }

.left {
  margin-right: auto;
}

.right {
  display: flex;
  width: 10.938rem;
  justify-content: space-between;
  text-align: right;
}

.right a {
  width: 7.188rem;
}

.main-nav-container {
  display: flex;
  margin-top: 0.938rem;
}

.buy-now-btn {
  font-size: 0.813rem;
  font-weight: 900;
}

.main-nav-container img {
  max-width: 6.25rem;
  margin-right: auto;
}

.main-nav-container nav ul {
  display: flex;
  width: 25.625rem;
  justify-content: space-between;
  font-size: var(--size-14);
}

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

.navbar-toggler {
  position: absolute;
  right: var(--size-20);
  top: var(--size-10);
  outline: none;
  background-color: transparent;
  border: 1px solid transparent;
}

.navbar-toggler span {
  color: var(--white);
  font-size: var(--size-20);
  cursor: pointer;
  pointer-events: none;
}

.hero-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  justify-content: center;   
}

.banner-container {
  max-width: 21.875rem;
  margin-top: 8.125rem;
}

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

.icons {
  margin-left: auto;
  margin-top: 7.5rem;
}


.banner-container a {
  margin-right: var(--size-20);
}

.banner-container h1 {
  font-size: 3.313rem;
  margin-bottom: 0;
}

.banner-container p {
  margin-bottom: var(--size-40);
}

.banner-container a.learn-more {
  color: #497BF7;
  font-size: 0.813rem;
  font-weight: 900;
}

.learn-more i {
  margin-left: 0.5;
}

.icons {
  border: 1px solid transparent;
  width: 26.563rem;
  height: 25rem;
}

.icons {
  position: relative;
}

.logo-icons {
  max-width: var(--size-30);
  max-height: var(--size-30);
}

.icons div {
  background: white;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 5px 20px 1px #e9ecf1;
}

.circle {
  width: var(--size-65);
  height: var(--size-65);
}

.smaller-circle {
  width: var(--size-55);
  height: var(--size-55);
}

.logo1 {
  position: absolute;
  top: 11.25rem;
  left: 0.938rem;
  opacity: 0;
  animation-name: enter1;
  animation-fill-mode: forwards;
  animation-duration: .6s;
  animation-delay: .25s;
}

@keyframes enter1 {
  0% {top: 13.75rem; opacity: 0;}
  100% {top: 11.25rem; opacity: 1;}   
}

.logo2 {
  position: absolute;
  top: var(--size-30);
  left: 0.625rem;
  opacity: 0;
  animation-name: enter2;
  animation-fill-mode: forwards;
  animation-duration: .6s;
  animation-delay: 0s;
}

@keyframes enter2 {
  0% {top:4.375rem; opacity: 0;}
  100% {top: var(--size-30); opacity: 1;}   
}

.logo3 {
  position: absolute;
  top: 5.625rem;
  left: 7.5rem;
  opacity: 0;
  animation-name: enter3;
  animation-fill-mode: forwards;
  animation-duration: .6s;
  animation-delay: .15s;
}

@keyframes enter3 {
  0% {top: 8.125rem; opacity: 0;}
  100% {top: 5.625rem; opacity: 1;}   
}

.logo4 {
  position: absolute;
  top: 17.188rem;
  left: 6.563rem;
  opacity: 0;
  animation-name: enter4;
  animation-fill-mode: forwards;
  animation-duration: .6s;
  animation-delay: .35s;
}

@keyframes enter4 {
  0% {top: 19.063rem; opacity: 0;}
  100% {top: 17.188rem; opacity: 1;}   
}

.logo5 {
  position: absolute;
  top: 11.375rem;
  left: 12.188rem;
  opacity: 0;
  animation-name: enter5;
  animation-fill-mode: forwards;
  animation-duration: .6s;
  animation-delay: .3s;
}

@keyframes enter5 {
  0% {top: 13.875rem; opacity: 0;}
  100% {top: 11.375rem; opacity: 1;}   
}

.logo6 {
  position: absolute;
  top: var(--size-50);
  left: 21.25rem;
  opacity: 0;
  animation-name: enter6;
  animation-fill-mode: forwards;
  animation-duration: .6s;
  animation-delay: .2s;
}

@keyframes enter6 {
  0% {top: 5.625rem; opacity: 0;}
  100% {top: var(--size-50); opacity: 1;}   
}

.logo7 {
  position: absolute;
  top: 20rem;
  left: 21.25rem;
  opacity: 0;
  animation-name: enter7;
  animation-fill-mode: forwards;
  animation-duration: .6s;
  animation-delay: .4s;
}

@keyframes enter7 {
  0% {top: 22.5rem; opacity: 0;}
  100% {top: 20rem; opacity: 1;}   
}

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

.key-benefits h2,
.key-benefits p {
  text-align: center;
}

.key-benefits h2 {
  margin-bottom: 0.313rem;
}

.key-benefits p {
  margin-bottom: var(--size-60);
  margin-top: 0px;
}

.card-flex-box {
  display: flex;
  flex-wrap: wrap;
  gap: 0.938rem;
  justify-content: center;
}

.card-flex-box .card {
  border: transparent;
  box-shadow: 0px 0px 10px rgb(48 63 100 / 15%);
  padding: 15px 15px;
  max-width: 200px;
}

.card:hover {
  position: relative;
  animation-name: hover;
  animation-duration: .1s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes hover {
  0% {bottom: 0px;}
  100% {bottom: 7px;}
}

.key-benefits .card-flex-box .card img {
  max-width: 4.688rem;
  text-align: left;
}

.card-flex-box .card h2, 
.card-flex-box .card p {
  text-align: left;
}

.card-flex-box .card h2 {
  margin-bottom: 0.625rem;
}

.card-flex-box .card a {
  color: #497BF7;
}

.different-perspective {
  width: 100vw;
  display: flex;
  background-color: #F8FAFF;
  margin-bottom: var(--size-100);
}

.different-perspective.container { 
  padding-right: 0;
  padding-left: 0;
}

.different-perspective img {
  max-width: 52%;
  margin-top: 5.625rem;
  box-shadow: -18px -9px 40px -14px rgb(48, 63, 100, 0.15);
  position: relative;
}

.different-perspective-text {
  padding: 8.438rem 4.5rem 0px 4.5rem;
}

.different-perspective-text a.btn-default {
  padding: var(--size-12) var(--size-18);
  font-size: var(--size-14);
}

.different-perspective-text a.btn-default i {
  margin-left: 0.625rem;
  font-size: var(--size-12);
}

.different-perspective-text h2 { margin-bottom: var(--size-30); }

.why-front { 
  text-align: center;
  margin-bottom: var(--size-100);
 }

.why-front p {
  color: var(--font-color-light);
}

.reasons {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reasons h3 {
  width: 12.5rem;
}

.front-reasons hr {
  width: 21%;
  margin: 0px -69px;
  margin-bottom: 53px;
}

.front-reasons {
  max-width: 60m.625re;
  display: flex;
  align-items: center;
  margin-right: auto;
  margin-left: auto;
  padding: 0 var(--size-30);
  justify-content: space-between;
  margin-top: var(--size-60);
}

.dots {
  width: var(--size-50);
  height: var(--size-50);
  border-radius: 25px;
  background-color: lavender;
  display: flex;
  align-items: center;
  justify-content: center;
}

.period {
  width: 0.313rem;
  height: 0.313rem;
  border-radius: 50%;
  background-color: blue;
}

.why-front div.video-wrapper img {
  max-width: 95%;
  margin-right: auto;
  margin-left: auto;
  margin-top: var(--size-100);
}

.video-wrapper {
  position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.play-button {
  width: 4.375rem;
  height: 4.375rem;
  border-radius: 50%;
  background-color: white;
  box-shadow: 2px 2px 15px -6px black;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  margin-top: var(--size-100);
}

.hubspot-flex-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: var(--size-100);
  position: relative;
}

.hubspot-flex-wrapper img {
  max-width: 20rem;
  z-index: 90;
}

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

.hubspot-text {
  display: flex;
  flex-direction: column;
  padding-left: 0.938rem;
  justify-content: center;
}

br.tablet {
  display: none;
}

.hubspot-text h4 { 
  margin-bottom: 0;
}

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

.signature p {
  margin-top: 0;
  font-size: var(--size-12);
}

.trusted {
  margin-bottom: var(--size-100);
}

.trusted h5 {
  text-align: center;
  margin-bottom: var(--size-50);
}

.logo-flex-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--size-100);
}

.logo-flex-wrapper div.logo {
  min-width: var(--size-100);
}

.logo-flex-wrapper div.logo img {
  max-width: var(--size-100);
}

.pricing {
  margin-bottom: var(--size-100);
}

.pricing-text-wrapper {
  text-align: center;
}

.pricing-grid-container {
  display: grid;
  margin-top: var(--size-100);
  gap: 4.375rem;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
}

.starting-price {
  border: 1px solid transparent;
  box-shadow: 0px 24px 29px -12px rgb(48 63 100 / 15%);
  padding: 0 var(--size-50);
}

.starting-price-rate {
  max-height: 7.5rem;
}

.starting-price-rate h2,
.starting-price-rate p {
  display: inline-block;
}

.starting-price-rate h2 {
  font-size: var(--size-55);
}

.starting-price-rate p {
  font-size: 1.375rem;
}

.starting-price p {
  margin-bottom: var(--size-50);
  margin-top: 1.625rem;
}

.starting-price a.btn-default {
   font-size: var(--size-14);
   padding: var(--size-12) var(--size-18);
}

.starting-price a.btn-default i {
  margin-left: var(--size-10);
  font-size: var(--size-10);
}

.starting-price p.no-credit-card-required {
  font-size: var(--size-12);
  margin-top: var(--size-20);
}

.pricing-internal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--size-20);
}

.pricing-internal-grid img { 
  max-width: var(--size-40);
}

.card-hover:hover {
  position: relative;
  animation-name: hover;
  animation-duration: .1s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

.pricing-internal-grid div p {
  font-size: 0.813rem;
  margin-top: var(--size-10);
  line-height: 1.5555;
}

.pricing-internal-grid div h4 {
  font-size: var(--size-16);
  margin-bottom: 0px;
}

 .footer {
   background-color: #2A365B;
   background-image: url("saas-project-assets/abstract/hire-us-transparent-pattern-bg.svg");
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 4.688rem 0rem;
   margin-bottom: var(--size-100);
 }

 .footer-flex-container {
   display: flex;
   flex-wrap: wrap;
   gap: var(--size-30);
   margin: 0 var(--size-20);
 }

 .footer-flex-container div {
   max-width: 23.75rem;
 }
 
 .footer-flex-container form {
   max-width: 21.875rem;
   padding: 0 2.313rem;
   border-radius: 5px;
 }

.footer-flex-container form h3 {
  max-width: 21.313rem;
  font-size: 1.375rem;
  font-weight: 900;
  padding-left: 0.313rem;
  letter-spacing: 0.5px;
  margin-top: var(--size-45);
}

 .footer-text {
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .footer-text h2 {
   margin-bottom: 0;
 }

 .footer-text p.executive {
   font-size: 0.625rem;
 }

 .footer-text p.goals {
   margin-top: 0.313rem;
   margin-bottom: var(--size-30);
 }

 .footer .footer-text p.beautiful {
   margin-top: var(--size-30);
   margin-bottom: 0.313rem;
   font-size: var(--size-18);
   font-weight: 300;
 }

.footer-text div.james-austin h3 {
  margin-bottom: 0;
  font-size: var(--size-16);
  font-weight: 900;
}

.footer-text div.james-austin p {
  margin-top: 0.313rem;
}

.profile-image-flex-container {
  display: flex;
  margin-top: var(--size-40);
  width: 10.938rem;
  justify-content: space-between;
  align-items: center;
}

.profile-image-flex-container img.small {
  max-width: var(--size-40);
  max-height: var(--size-40);
  border-radius: 50%;
  filter: blur(0.5px);
}

 .profile-image-flex-container img.james-img {
  max-width: 3.563rem;
  max-height: 3.563rem;
  border-radius: 50%;
}

 .footer h2,
 .footer .footer-text h3,
 .footer .footer-text p.beautiful {
   color: white;
 }

 .footer hr {
  width: 11.563rem;
  margin: 0;
  border: none;
  height: 1px;
  background-color: white;
 }

 .footer form {
   background-color: white;
   color: black;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-right: auto;
   margin-left: auto;
 }

 .form-btn {
   text-align: center;
   border-radius: 5px;
   font-weight: 900;
   padding: var(--size-16) var(--size-20);
   margin-bottom: var(--size-40);
   width: 84%;
 }

 form input.form-checkbox {
   width: fit-content;
 }
 
 input {
   width: var(--size-150);
 }

form select {
  color: var(--font-color-light);
}

 select {
  width: 9.875rem;
}

input,
select {
  margin: 0 5px 20px 5px;
  padding: 10px 0 10px 5px;
  font-size: 16px;
  font-weight: 500;
}

form p {
  display: inline;
}

form textarea {
  width: 20.625rem;
  margin-left: 0.313rem;
  margin-bottom: var(--size-20);
}

textarea::placeholder {
  color: var(--font-color-light);
  font-family: 'Roboto', sans-serif;
}

.form-checkbox { margin: 4px 10px 0 0;}

.consent {
  display: flex;
  align-items: flex-start;
  margin-top: 0.625rem;
}

.consent p { 
  margin: 0 0 20px 0;
  font-size: var(--size-14);
  line-height: 20px;
}

.consent p a {
  color: var(--font-color-light);
  text-decoration: underline;
  text-decoration-style: dashed;
}

.links {
  display: flex;
  margin-bottom: var(--size-40);
  flex-wrap: wrap;
  gap: var(--size-65);
}

.links-inside-container {
  display: flex;
  gap: var(--size-65);
  flex-wrap: wrap;
}

.row-one,
.row-two {
  display: flex;
  gap: var(--size-50);
}

.links .columns img { max-width: var(--size-100); }

.links .columns { 
  display: flex;
  flex-direction: column;
}

.columns h3 {
  font-size: 1.5rem;
  margin-top: 0;
}

.columns a {
  margin-bottom: 15px;
  color: var(--font-color-light);
  font-size: var(--size-14);
}
.columns span {
  color: white;
  background-color: #3071ff;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 0.813rem;
  font-weight: 900;
}

.columns a i { margin-right: 10px;}

hr.container { margin-bottom: 60px;}

.footer-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--size-100);
  flex-wrap: wrap;
}

.footer-nav div.policy-terms,
.footer-nav div.social-media {
  display: flex;
}

.footer-nav div.policy-terms {
  margin-right: var(--size-40);
}

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

.footer-nav-padding {
  padding: 0 var(--size-60);
}

.policy-terms a {
  font-size: var(--size-16);
  color: var(--font-color-light);
}

.policy-terms span {
  margin: 0 var(--size-20);
}

.social-media {
  display: flex;
  align-items: center;
}

.social-media div {
  background: #F2F4F5;
  width: var(--size-35);
  height: var(--size-35);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.social-media div {
  margin-left: var(--size-18);
  color: #75869b;
}

.social-media select {
  margin: 0 0 0 20px;
  background-color: #F2F4F5;
  border: none;
  border-radius: 5px;
  color: var(--font-color-light);
}

section.copyright {
  text-align: center;
  margin-bottom: var(--size-50);
  position: relative;
  padding-bottom: 0.625rem;
}

.copyright h5 span { margin-right: 0.625rem;}

.copyright h5 { color: var(--font-color-light); }

.copyright p { font-size: var(--size-14); }


.trusted {
  padding-left: 5rem;
  padding-right: 5rem;
}

#scrollUp {
  background-color: #f1f3f5;
  color: #6A7785;
  font-size: var(--size-16);
  font-weight: 900;
  height: var(--size-50);
  width: var(--size-50);
  line-height: var(--size-50);
  position: fixed;
  bottom: 0.688rem;
  right: var(--size-30);
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  z-index: 100;
}