.header {
  position: relative;
  height: 34.375rem;
  background-image: url("../img/backgrounds/background-top.svg");
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: var(--size-100);
}
/* navbar styling  */
.header .navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  transition: ease-in-out 0.3s;
  z-index: 500;
}
.navbar.sticky {
  background: var(--white);
  box-shadow: 0px 0px var(--size-20) rgba(48, 63, 100, 0.2);
}
.navbar.sticky .navbar_toggler span,
.navbar.sticky .brand {
  color: var(--text-color);
}
.navbar .navbar_wrapper {
  display: flex;
  align-items: center;
}
.navbar_wrapper .navbar_toggler {
  position: absolute;
  outline: none;
  right: var(--size-20);
  top: var(--size-30);
  font-size: var(--size-20);
  background-color: transparent;
  border: 1px solid transparent;
}
.navbar-toggler span {
  color: var(--white);
  font-size: var(--size-20);
  cursor: pointer;
  pointer-events: none;
}
[aria-controls="navbarDropdown"] {
  display: none;
}
.navbar_wrapper .brand {
  width: 8.75rem;
  height: var(--size-80);
  margin-right: auto;
  display: flex;
  align-items: center;
}
.navbar_wrapper .collapsible {
  display: flex;
  align-items: center;
}
.collapsible .menu {
  display: flex;
  gap: var(--size-20);
  margin-right: var(--size-30);
}
.menu .menu_link a {
  color: var(--text-color);
}
.menu .features a {
  color: var(--blue);
}
.menu .menu_link a:hover {
  color: var(--blue);
  border-bottom: 3px solid var(--blue);
  transition: ease-in-out 0.3s;
}
/* hero section styling  */
.header .hero_section {
  position: relative;
  top: 13.125rem;
}
.hero_section .hero_wrapper {
  display: flex;
}
.hero_wrapper .hero_title {
  max-width: 28.125rem;
  margin-right: auto;
}
.hero_title .title {
  color: var(--black);
  font-size: var(--size-40);
  font-weight: 500;
  font-family: "inter-bold", sans-serif;
  line-height: 1.2;
  margin: 0;
  max-width: 18.75rem;
}
.hero_title .sub_title {
  margin-top: var(--size-10);
  margin-bottom: var(--size-25);
}
.hero_title .title_link {
  display: flex;
  align-items: center;
  gap: var(--size-20);
}
.title_link .btn_primary i {
  margin-right: var(--size-5);
}
.hero_wrapper .hero_logo_icons {
  max-width: 28.125rem;
  width: 100%;
  height: 100%;
}
.hero_logo_icons .logo_icons_wrapper {
  position: relative;
  animation: 4s linear 0s 1 alternate slideUp;
  height: 100%;
}
.logo_icons_wrapper .logo_icon {
  position: absolute;
  width: var(--size-60);
  height: var(--size-60);
  background-color: var(--white);
  box-shadow: 0px 0px var(--size-10) rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  padding: var(--size-10);
}
.logo_icons_wrapper .google {
  top: -1.25rem;
  left: 3.4375rem;
  width: var(--size-50);
  height: var(--size-50);
}
.logo_icons_wrapper .atlassian {
  top: -1.5625rem;
  left: 10rem;
}
.logo_icons_wrapper .asana {
  top: -1.5625rem;
  left: 23.75rem;
}
.logo_icons_wrapper .paypal {
  top: 8.125rem;
  left: 2.8125rem;
}
.logo_icons_wrapper .google-a {
  top: 15rem;
  left: 9.6875rem;
  width: var(--size-50);
  height: var(--size-50);
}
.logo_icons_wrapper .weave {
  top: 7.8125rem;
  left: 16.25rem;
}
.logo_icons_wrapper .calender {
  top: 15.625rem;
  left: 21.875rem;
}
/* Key benefits styling */
.benefit_section {
  margin-top: var(--size-100);
  margin-bottom: var(--size-100);
}
.benefit_wrapper .benefit_header {
  max-width: 37.5rem;
  width: 100%;
  margin: auto;
}
.benefit_header h2 {
  text-align: center;
  margin-bottom: var(--size-10);
}
.benefit_header p {
  text-align: center;
}
.benefit_wrapper .key_benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
  gap: var(--size-30);
  margin-top: var(--size-50);
}
.key_benefits .benefit {
  padding: var(--size-30);
  box-shadow: 0px var(--size-5) var(--size-20) rgb(0 0 0 / 14%);
}
.key_benefits .benefit:hover {
  transform: scale(1.05);
  transition: ease-in-out 0.3s;
}
.benefit img {
  width: var(--size-50);
  height: var(--size-50);
}
.benefit h3 {
  color: var(--black);
}
/* Banner One styling */
.banner_one {
  margin-top: var(--size-100);
  margin-bottom: var(--size-100);
}
.banner_one .banner_one_wrapper {
  display: flex;
  background-color: rgba(249, 250, 254, 255);
}
.banner_one_wrapper .banner_one_header {
  max-width: 25rem;
  margin-right: auto;
  padding-top: var(--size-150);
}
.banner_one_header .title {
  font-family: "inter-bold", sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--black);
  max-width: 21.875rem;
  width: 100%;
}
.banner_one_header .btn_primary i {
  margin-right: var(--size-5);
}
.banner_one_wrapper .banner_one_image {
  padding-top: var(--size-100);
}
/* Why front styling */
.why_front_section {
  margin-top: var(--size-100);
  margin-bottom: var(--size-100);
}
.why_front_section .why_front_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-50);
}
.why_front_wrapper .why_front_header {
  max-width: 37.5rem;
}
.why_front_header h2 {
  text-align: center;
  margin-bottom: var(--size-10);
}
.why_front_header p {
  text-align: center;
  max-width: 30.3125rem;
  width: 100%;
}
.why_front_wrapper .why_front {
  display: flex;
  flex: 0 1 auto;
}
.why_front .reason {
  display: flex;
  flex-direction: column;
  gap: var(--size-20);
}
.reason .circle_wrapper {
  display: flex;
  align-items: center;
}
.circle_wrapper .circle {
  width: var(--size-50);
  height: var(--size-50);
  background-color: #ecf2ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle .inner_circle {
  width: var(--size-10);
  height: var(--size-10);
  border-radius: 50%;
  background-color: var(--blue);
}
.reason span {
  align-self: center;
  color: var(--black);
}
.circle_wrapper .invisible {
  background-color: transparent;
}
/* banner two styling  */
.banner_two {
  margin-bottom: var(--size-50);
}
.banner_two .banner_two_wrapper {
  position: relative;
}
.banner_two_wrapper .banner_two_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-80);
  height: var(--size-80);
  position: absolute;
  top: 46%;
  left: 46.5%;
  background-color: rgba(0, 0, 0, 0.651);
  box-shadow: 0px 0px var(--size-10) rgba(63, 61, 61, 0.452);
  border-radius: 50%;
  cursor: pointer;
}
.banner_two_wrapper .banner_two_icon:hover {
  transform: scale(1.1);
  transition: ease-in-out 0.3s;
}
.banner_two_icon i {
  font-size: var(--size-80);
  color: var(--white);
}
/* hubspot_section styling */
.hubspot_section {
  margin-top: var(--size-100);
  margin-bottom: var(--size-100);
}
.hubspot_section .hubspot_wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-100);
}
.hubspot_wrapper .hubspot_image {
  position: relative;
}
.hubspot_image .upper_image {
  width: 23.75rem;
  position: relative;
}
.hubspot_image .image_layer {
  width: var(--size-200);
  position: absolute;
  top: 7.0625rem;
  left: -3.4375rem;
  z-index: -1;
}
.hubspot_wrapper .hubspot_text {
  max-width: 500px;
}
.hubspot_text .logo {
  width: 4.875rem;
  margin-bottom: var(--size-15);
}
.hubspot_text p {
  max-width: 21.875rem;
  width: 100%;
  font-size: 1.0625rem;
  color: var(--black);
  margin-bottom: var(--size-30);
}
.hubspot_text h4 {
  color: var(--black);
  font-size: var(--size-15);
  margin: 0;
}
.hubspot_text span {
  font-size: 0.75rem;
}
/* partners styling  */
.partner {
  margin-top: var(--size-100);
  margin-bottom: var(--size-100);
}
.partner .partner_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-20);
}
.partner_title h2 {
  text-transform: uppercase;
  font-size: var(--size-20);
  color: var(--text-color);
}
.partner_wrapper .partner_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--size-80);
}
.partner_logo img {
  width: var(--size-150);
}
/* pricing styling  */
.pricing {
  margin-top: var(--size-100);
  margin-bottom: var(--size-100);
}
.pricing .pricing_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-50);
}
.pricing_wrapper .pricing_header {
  text-align: center;
}
.pricing_wrapper .pricing_table {
  display: grid;
  grid-template-columns: repeat(2, minmax(18.75rem, 1fr));
  align-items: center;
  justify-items: center;
  gap: var(--size-50);
}
.pricing_table .pricing_card {
  padding: var(--size-50);
  box-shadow: 0px var(--size-15) var(--size-15) rgb(0 0 0 / 14%);
}
.pricing_card .price {
  font-size: var(--size-16);
}
.pricing_card .price > span {
  font-size: var(--size-40);
  font-family: "Inter-bold", sans-serif;
  font-weight: 500;
  color: var(--black);
}
.pricing_card .line {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.308);
  margin-top: var(--size-30);
  margin-bottom: var(--size-30);
}
.pricing_card .description {
  max-width: 14.6875rem;
  width: 100%;
}
.pricing_card .card_button {
  margin-top: var(--size-50);
  margin-bottom: 0;
  padding: 0;
}
.card_button .btn_primary {
  margin-bottom: var(--size-10);
}
.card_button .btn_primary i {
  margin-right: var(--size-5);
}
.card_button p {
  margin: 0;
}
.pricing_table .pricing_features {
  display: grid;
  grid-template-columns: repeat(2, minmax(15.625rem, 1fr));
  gap: var(--size-20);
}
.pricing_features .feature {
  padding: var(--size-20);
}
.feature img {
  width: var(--size-50);
  height: var(--size-50);
}
.feature h3 {
  color: var(--black);
}
.feature p {
  max-width: 13.125rem;
  width: 100%;
  margin: 0;
}
/* Hire us styling  */
.hire_us_section {
  margin-top: var(--size-100);
  margin-bottom: var(--size-50);
  background-color: var(--navyblue);
}
.hire_us_section .hire_us_wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-50);
  padding-top: var(--size-30);
  padding-bottom: var(--size-30);
}
.hire_us_wrapper .hire_us {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--size-50);
}
.hire_us h2 {
  color: var(--white);
  margin-bottom: var(--size-10);
}
.hire_us .sub_title {
  max-width: var(--size-150);
  width: 100%;
  margin: 0;
}
.hire_us .line {
  background-color: var(--white);
  width: var(--size-150);
  margin-top: var(--size-20);
  margin-bottom: var(--size-20);
}
.hire_us .description {
  color: var(--white);
  font-style: italic;
  max-width: 18.75rem;
  width: 100%;
}
.hire_us .hire_us_footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: var(--size-30);
}
.hire_us_footer h4 {
  color: var(--white);
  margin: 0;
}
.hire_us_footer span {
  margin-bottom: var(--size-30);
  font-size: 13px;
}
.hire_us_footer .footer_img {
  display: flex;
  align-items: center;
  gap: var(--size-20);
}
.footer_img img {
  width: var(--size-40);
  height: var(--size-40);
  border-radius: 50%;
}
.footer_img #bigger {
  width: var(--size-50);
  height: var(--size-50);
}
.hire_us_form .form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-20);
  background-color: var(--white);
  padding: var(--size-50);
  border-radius: var(--size-10);
  max-width: 28.125rem;
  width: 100%;
}
.form span {
  color: var(--black);
  font-size: var(--size-15);
}
.form .name_group {
  display: flex;
  flex-direction: column;
  gap: var(--size-20);
}
.name_group .group {
  display: flex;
  justify-content: space-between;
  gap: var(--size-20);
}
.group input {
  width: 10.125rem;
  height: var(--size-35);
  padding: var(--size-5);
  border: 1px solid rgb(0 0 0 / 51%);
  border-radius: 4px;
  resize: both;
}
.form .select_group {
  display: flex;
  gap: var(--size-20);
}
.select_group select {
  width: 10.125rem;
  height: var(--size-35);
  padding: var(--size-5);
  border: 1px solid rgb(0 0 0 / 51%);
  border-radius: 4px;
  background-color: var(--white);
  resize: both;
}
.form .message_group {
  display: flex;
  flex-direction: column;
}
.message_group textarea {
  width: 21.5rem;
  height: 7.5rem;
  padding: var(--size-10);
  color: var(--text-color);
  font-size: 13px;
  border: 1px solid rgb(0 0 0 / 51%);
}
.message_group .privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--size-5);
  margin-top: var(--size-10);
}
.privacy input {
  border: 1px solid rgb(0 0 0 / 51%);
  border-radius: 4px;
  background-color: var(--white);
}
.privacy p {
  max-width: 21.875rem;
  width: 100%;
}
.message_group ul {
  display: flex;
  justify-content: center;
  gap: var(--size-50);
}
.message_group ul li a {
  border-bottom: 2px dotted var(--text-color);
  color: var(--text-color);
}
.message_group .blue_link a {
  color: var(--blue);
  border-bottom: 2px dotted var(--blue);
}
.message_group button {
  margin-top: var(--size-30);
  align-self: center;
}
/* footer styling  */
.footer {
  margin: 0;
}
.footer .footer_wrapper {
  display: flex;
  flex-direction: column;
}
.footer_wrapper .top_footer {
  display: flex;
  align-items: flex-start;
  padding-bottom: var(--size-50);
  border-bottom: 2px solid rgba(0, 0, 0, 0.062);
}
.top_footer .company_info {
  display: flex;
  flex-direction: column;
  gap: var(--size-20);
  margin-right: auto;
  padding: var(--size-20);
}
.company_info img {
  width: 8.125rem;
}
.company_info .info li {
  margin-bottom: var(--size-5);
}
.company_info .info li i {
  margin-right: var(--size-10);
  color: var(--text-color);
}
.info .phone {
  color: var(--blue);
}
.top_footer .links {
  display: flex;
  gap: var(--size-100);
  padding: var(--size-10);
}
.links .group h3 {
  color: var(--black);
}
.links .group ul li a {
  color: var(--text-color);
}
.links .group ul li a:hover {
  color: var(--blue);
  transition: ease-in-out 0.3s;
}
.company ul li a > .hiring {
  font-size: var(--size-10);
  border-radius: 4px;
  padding: 2px 4px;
  background-color: var(--blue);
}
.links .features .note a {
  color: var(--blue);
}
.resources ul li i {
  margin-right: var(--size-10);
}
.footer .bottom_footer {
  display: flex;
  flex-direction: column;
  gap: var(--size-50);
  padding-top: var(--size-50);
}
.bottom_footer .policy {
  display: flex;
  align-items: center;
}
.policy ul {
  display: flex;
  gap: var(--size-10);
  margin-right: auto;
}
.policy .term_link li i {
  margin-right: var(--size-10);
  color: var(--text-color);
}
.policy .terms a {
  color: var(--blue);
}
.policy .social-media {
  display: flex;
  gap: var(--size-20);
}
.social-media ul {
  display: flex;
  gap: var(--size-20);
}
.social-media ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-35);
  height: var(--size-35);
  color: var(--text-color);
  background-color: rgba(236, 242, 255, 255);
  border-radius: 4px;
}
.social-media ul li a:hover {
  color: var(--white);
  background-color: rgba(103, 119, 135, 255);
  transition: ease-in-out 0.3s;
}
.social-media select {
  background-color: rgba(236, 242, 255, 255);
  height: 2.1875rem;
  resize: both;
  border-radius: 0.25rem;
  border: none;
  padding: 0 var(--size-10);
}
.bottom_footer .copyright {
  text-align: center;
  margin: auto;
}
.copyright p {
  max-width: 40.625rem;
  width: 100%;
  align-self: center;
  margin-top: var(--size-20);
}
@keyframes slideUp {
  0% {
    bottom: -6.25rem;
    opacity: 0;
  }
  100% {
    bottom: 0;
  }
}