/* App.css */
* {
  box-sizing: border-box;
}
body {
  font-family: "Quicksand", sans-serif;
  background-size: cover;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}
ul {
  list-style: none;
}
img {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
h1 {
  font-size: 1em;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0em;
  margin-inline-end: 0em;
  font-weight: inherit;
}

/* Generic */
.clickable {
  cursor: pointer;
}
.dNone {
  display: none;
}
.dBlock {
  display: block;
}
.dInlineBlock {
  display: inline-block;
}
.shadow {
  box-shadow: 0 4px 34px 0 rgba(189, 189, 189, 0.25);
}
.darkShadow {
  box-shadow: 0 2px 15px 0 rgba(180, 180, 180, 1);
}
.font500 {
  font-weight: 500;
}
.mediumText {
  font-weight: 600;
}
.boldText {
  font-weight: 700;
}
.centerText {
  text-align: center;
}
.rightText {
  text-align: right;
}
.leftText {
  text-align: left;
}
.whiteText {
  color: #ffffff;
}
.blackText {
  color: #000000;
}
.blueText {
  color: #4d8af0;
}
.font14px {
  font-size: 14px;
}
.font16px {
  font-size: 16px;
}
.font18px {
  font-size: 18px;
}
.font20px {
  font-size: 20px;
}
.font22px {
  font-size: 22px;
}
.font24px {
  font-size: 24px;
}
.font28px {
  font-size: 28px;
}
.font32px {
  font-size: 32px;
}
.font36px {
  font-size: 36px;
}
.button {
  cursor: pointer;
  border-radius: 100px;
  height: 50px;
  width: 200px;
  text-align: center;
  line-height: 50px;
}
.button.red {
  background: linear-gradient(to right, #fd6266, #fb6592);
}
.button.white {
  background-color: #ffffff;
  border: 1px #fd6266;
}
.button span {
  font-size: 16px;
}
.buttonDisabled {
  cursor: auto;
}
.marginTop10 {
  margin-top: 10px;
}
.marginTop20 {
  margin-top: 20px;
}
.marginTop30 {
  margin-top: 30px;
}
.marginTop50 {
  margin-top: 50px;
}
.marginTop70 {
  margin-top: 70px;
}
.marginBottom10 {
  margin-bottom: 10px;
}
.marginBottom20 {
  margin-bottom: 20px;
}
.marginBottom50 {
  margin-bottom: 50px;
}
.marginLeft30 {
  margin-left: 30px;
}
.pad30 {
  padding: 30px;
}
.pad1030 {
  padding: 10px 30px;
}
.padRight0 {
  padding-right: 0px !important;
}
.lineHeight30 {
  line-height: 30px;
}
.posRel {
  position: relative;
}
.horizontalCenter {
  margin-left: auto;
  margin-right: auto;
}
.zIndex {
  z-index: 100;
}
.overflowHidden {
  overflow: hidden;
}
.maxContentWidth {
  width: max-content;
}
.greyText {
  color: #a0a0a0;
}
.headlineList {
  list-style: disc;
  padding-left: 20px;
  line-height: 35px;
  font-weight: 500;
}
.flexVHCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flexVCenter {
  display: flex;
  justify-content: center;
}
.flexHCenter {
  display: flex;
  align-items: center;
}
.flexJustifyContentEnd {
  display: flex;
  justify-content: flex-end;
}
.noOpacity {
  opacity: 1 !important;
}
.borderRadius15 {
  border-radius: 15px;
}
button {
  padding: 10px 20px;
  outline: none;
  border: none;
}
/* .headerContainer .menuItems button.loginButton{position: relative; color: #FFFFFF !important; background: linear-gradient(to right, #FD6266, #FB6592); border-radius: 50px; text-align: center; margin-left: 20px; font-size: 16px; font-weight: 700; padding: 10px 20px;} */
/* Header navigation */
.headerContainer {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
  height: 85px;
  padding: 0 50px;
  z-index: 100;
}
.headerContainer.alt {
  position: fixed;
  margin-left: 15px;
  width: calc(100% - 30px);
  height: 80px;
  border-radius: 50px;
  margin-top: 10px;
  background: #ffffff;
  z-index: 1000;
  padding: 0 30px;
  top: -90px;
  transition: top 0.3s;
  margin-left: auto;
  margin-right: auto;
}
.headerContainer.alt.showHeader {
  top: 0px !important;
}
.headerContainer .logo {
  vertical-align: middle;
  width: auto;
  height: 45px;
}
.headerContainer .loginIcon {
  width: 13px;
  height: auto;
  margin-right: 10px;
  vertical-align: middle;
  margin-bottom: 2px;
}
.headerContainer .menuItems {
  margin: 0;
  padding: 0;
  margin-left: auto;
}
.headerContainer .menuItems li {
  display: inline-block;
  color: #ffffff;
  padding: 0 20px;
  line-height: 60px;
  vertical-align: middle;
  font-size: 16px;
  font-weight: 500;
  height: 60px;
}
.headerContainer .menuItems .singleHeaderNav {
  display: inline-block;
  line-height: 60px;
  vertical-align: middle;
  height: 60px;
}
.headerContainer .headerNav {
  line-height: 60px;
  vertical-align: middle;
  height: 60px;
}
.headerContainer .menuItems li.login {
  padding-left: 120px;
}
.headerContainer .menuItems div.loginButton {
  position: relative;
  color: #ffffff !important;
  background: linear-gradient(to right, #fd6266, #fb6592);
  border-radius: 50px;
  text-align: center;
  margin-left: 20px;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 20px;
}
.solutionDropdownContainer {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}
.solutionDropdownContainerText {
  cursor: pointer;
  margin-right: 5px;
  color: #ffffff;
  vertical-align: middle;
}
.solutionsCaret {
  width: 11px;
  height: 11px;
  object-fit: contain;
  margin-left: 6px;
  vertical-align: middle;
}
.solutionDropdownContainer:hover .solutionsDropdown {
  display: block;
}
.solutionsDropdown .solutionsDropdownItem:hover {
  color: #4d8af0;
  font-weight: bold;
}
.solutionsDropdown a {
  display: block;
}
.solutionsDropdown {
  display: none;
  position: absolute;
  z-index: 1;
  width: 175px;
  border-radius: 20px;
  background-color: #ffffff;
  padding: 10px 20px;
}
.solutionsDropdown .solutionsDropdownLip {
  position: absolute;
  width: 20.4px;
  height: 6px;
  top: -4.5px;
  object-fit: contain;
}
.solutionsDropdown .solutionsDropdownItem {
  font-size: 14px;
  text-align: left;
  height: 45px;
  line-height: 45px;
  color: #000000;
}

.resourcesDropdownContainer:hover .resourcesDropdown {
  display: block;
}
.resourcesDropdown .resourcesDropdownItem:hover {
  color: #4d8af0;
  font-weight: bold;
}
.resourcesDropdown a {
  display: block;
}
.resourcesDropdown {
  display: none;
  position: absolute;
  z-index: 1;
  width: 220px;
  border-radius: 20px;
  background-color: #ffffff;
  padding: 10px 20px;
}
.resourcesDropdown .resourcesDropdownLip {
  position: absolute;
  width: 20.4px;
  height: 6px;
  top: -4.5px;
  object-fit: contain;
}
.resourcesDropdown .resourcesDropdownItem {
  font-size: 14px;
  text-align: left;
  height: 45px;
  line-height: 45px;
  color: #000000;
}

.referralMarketplaceDropdownContainer:hover .referralMarketplaceDropdown {
  display: block;
}
.referralMarketplaceDropdown .referralMarketplaceDropdownItem:hover {
  color: #4d8af0;
  font-weight: bold;
}
.referralMarketplaceDropdown a {
  display: block;
}
.referralMarketplaceDropdown {
  display: none;
  position: absolute;
  z-index: 1;
  width: 200px;
  border-radius: 20px;
  background-color: #ffffff;
  padding: 10px 20px;
}
.referralMarketplaceDropdown .referralMarketplaceDropdownLip {
  position: absolute;
  width: 20.4px;
  height: 6px;
  top: -4.5px;
  object-fit: contain;
}
.referralMarketplaceDropdown .referralMarketplaceDropdownItem {
  font-size: 14px;
  text-align: left;
  height: 45px;
  line-height: 45px;
  color: #000000;
}

/* Super Connectors & Marketplace Specific Styles */
.marketplaceHeaderContent,
.superConnectorHeaderContent {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 0 40px 0;
}

.pageSection.marketplaceHeader,
.pageSection.super-connectorsHeader {
  padding-top: 80px;
}

.marketplaceHeaderContent h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #333;
}

.headerCTASection {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

.superConnectorCTA {
  text-align: center;
  margin: 20px 0;
}

.superConnectorCTA .ctaButton {
  font-size: 1.3rem;
  padding: 15px 30px;
  background: linear-gradient(to bottom right, #41a8a4, #4294b5) !important;
  color: white !important;
  border: none;
  border-radius: 25px;
  cursor: default;
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

.superConnectorValueProp,
.marketplaceValueProp {
  margin: 20px 0;
}

.valueProposition {
  background: linear-gradient(135deg, #4ecdc4, #44a08d);
  color: white;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: bold;
  font-size: 1.1rem;
  display: inline-block;
}

.incomeGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 20px 0;
}

.incomeCard {
  padding: 40px 30px;
  border-right: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 120px;
}

.incomeCard:last-child {
  border-right: none;
}

.incomeCard:first-child {
  padding-left: 0;
}

.incomeIcon {
  width: 60px;
  height: 60px;
  background: linear-gradient(to bottom right, #41a8a4, #4294b5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.incomeIcon svg {
  width: 24px;
  height: 24px;
  color: white;
  stroke: white;
}

.incomeIconImage {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.incomeIconImage.arrow {
  width: 32px;
  height: 32px;
}

.superConnectorIncome {
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: -30px;
}

.superConnectorIncome h2 {
  color: #000000;
  font-family: 'Quicksand', sans-serif;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 0px;
}

.whyCompaniesNeed h2 {
  color: #000000;
  font-family: 'Quicksand', sans-serif;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 0;
}

.whyHeaderWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: stretch;
  margin-bottom: 40px;
  min-height: 300px;
}

.whyContentWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: stretch;
}

.whyLeftContent {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.whyPointItem {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 8px 0;
}

.whyPointIcon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.whyPointIcon svg {
  width: 20px;
  height: 20px;
  color: #000000;
  stroke: #000000;
}

.whyMultiplier {
  background: #2596be;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 3px;
  padding: 4px 12px;
  min-width: 36px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.whyPointText {
  color: #000000;
  font-size: 18px;
  line-height: 1.5;
}

.whyTestimonialCard {
  background: #f8f9fa;
  border-radius: 15px;
  padding: 30px;
  position: relative;
  border: 1px solid #e9ecef;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.whyTestimonialText {
  color: #666;
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 15px;
  font-style: italic;
  font-weight: 500;
}

.whyTestimonialAuthor {
  color: #000000;
  font-size: 22px;
  font-weight: 600;
  text-align: right;
}

/* Tablet and smaller laptop adjustments - keep 3 columns but ensure alignment */
@media (max-width: 1200px) and (min-width: 769px) {
  .incomeCard {
    padding: 35px 20px;
    align-items: flex-start;
    flex-direction: column;
    text-align: center;
    gap: 15px;
    min-height: 140px;
  }
  
  .incomeIcon {
    margin: 0 auto;
  }
  
  .incomeContent {
    text-align: center;
    width: 100%;
  }
  
  .incomeContent h3 {
    margin: 0 0 8px 0;
    font-size: 1.3rem;
    font-weight: bold;
  }
  
  .incomeContent p {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    color: #000000;
  }
  
  /* Marketplace solution features - same alignment fix for tablet/small laptop */
  .solutionFeatureCard {
    align-items: center;
    text-align: center;
    padding: 35px 20px;
    min-height: 160px;
  }
  
  .solutionFeatureHeader {
    flex-direction: column;
    margin-bottom: 15px;
  }
  
  .solutionFeatureIcon {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  /* Steps grids - ensure proper alignment for tablet/small laptop */
  .stepsGrid,
  .simpleStepsGrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
  
  .stepCard,
  .simpleStepCard {
    text-align: center;
    padding: 30px 20px;
  }
  
  /* Benefits grid alignment */
  .benefitsGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .benefitItem {
    text-align: center;
    padding: 20px 15px;
  }
  
  /* Problem section spacing for tablets */
  .problemSection .sectionDescription {
    margin-bottom: 30px;
    font-size: 16px;
  }
  
}

/* Responsive breakpoint for medium screens (tablets, small laptops) */
@media (max-width: 768px) {
  .incomeGrid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .incomeCard {
    padding: 30px 25px;
    border-right: none;
    border-bottom: 1px solid #e6e6e6;
    min-height: auto;
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
  
  .incomeCard:last-child {
    border-bottom: none;
  }
  
  .incomeIcon {
    width: 55px;
    height: 55px;
  }
  
  .incomeIcon svg {
    width: 22px;
    height: 22px;
  }
  
  .incomeContent h3 {
    font-size: 1.2rem;
  }
  
  .incomeContent p {
    font-size: 18px;
    color: #000000;
  }
  
  /* Marketplace page responsive styles */
  .solutionFeaturesGrid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .solutionFeatureCard {
    padding: 30px 25px;
    border-right: none;
    border-bottom: 1px solid #e9ecef;
    min-height: auto;
  }
  
  .solutionFeatureCard:last-child {
    border-bottom: none;
  }
  
  .solutionFeatureHeader {
    flex-direction: column;
    text-align: center;
  }
  
  .solutionFeatureIcon {
    width: 55px;
    height: 55px;
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .solutionIconImage {
    width: 28px;
    height: 28px;
  }
  
  .solutionFeatureTitle {
    font-size: 1.3rem;
  }
  
  .solutionFeatureDescription {
    font-size: 1rem;
    text-align: center;
  }
  
  .simpleStepsGrid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .simpleStepCard {
    padding: 30px 25px;
    text-align: center;
  }
  
  .simpleStepNumber {
    font-size: 2rem;
  }
  
  .simpleStepTitle {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .whyContentWrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .whyTestimonialCard {
    min-width: auto;
    padding: 25px;
  }
  
  .whyCompaniesNeed h2 {
    font-family: 'Quicksand', sans-serif;
    font-size: 28px;
    font-weight: 700;
  }
  
  .superConnectorIncome h2 {
    font-family: 'Quicksand', sans-serif;
    font-size: 28px;
    font-weight: 700;
  }
  
  .stepsGrid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .howItWorksSection h2 {
    font-family: 'Quicksand', sans-serif;
    font-size: 28px;
    font-weight: 700;
  }
  
  .stepCard {
    padding: 30px 25px;
  }
  
  .solutionFeaturesGrid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .solutionFeatureCard {
    border-right: none;
    border-bottom: 1px solid #e9ecef;
    min-height: auto;
    padding: 30px 25px;
  }
  
  .solutionFeatureCard:last-child {
    border-bottom: none;
  }
  
  .solutionFeatureIcon {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }
  
  .solutionIconImage {
    width: 25px;
    height: 25px;
  }
  
  .solutionFeatureTitle {
    font-size: 1.3rem;
  }
  
  .solutionFeatureDescription {
    font-size: 1rem;
  }
  
  /* Simple Steps responsive */
  .simpleStepsGrid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .simpleStepCard {
    padding: 30px 25px;
  }
  
  .simpleStepNumber {
    font-size: 2.5rem;
    color: #000000;
    font-weight: 700;
  }
  
  .simpleStepTitle {
    font-size: 1.3rem;
    color: #000000;
  }
  

  
  /* Problem section responsive */
  .problemItem {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .problemTag {
    min-width: auto;
    padding: 10px 25px;
  }
  
  .problemDescription {
    font-size: 1.1rem;
    text-align: center;
  }
  
  /* Mobile responsive fixes */
  .superConnectorCTA .ctaButton {
    font-size: 1.1rem;
    padding: 18px 20px;
    white-space: normal;
    line-height: 1.4;
    font-weight: 600;
    max-width: 320px;
    margin: 0 auto;
    display: block;
    text-align: center;
    word-spacing: normal;
    letter-spacing: -0.5px;
  }
  
  .incomeGrid {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  
  .incomeCard {
    flex: none;
    min-width: auto;
    padding: 20px;
    border-right: none;
    border-bottom: 1px solid #e6e6e6;
  }
  
  .incomeCard:last-child {
    border-bottom: none;
  }
  
  .incomeCard:first-child {
    padding-left: 20px;
  }
}

@media (max-width: 480px) {
  .superConnectorIncome h2,
  .whyCompaniesNeed h2,
  .howItWorksSection h2 {
    font-family: 'Quicksand', sans-serif;
    font-size: 24px;
    font-weight: 700;
  }
  
  /* Small mobile responsive fixes */
  .superConnectorCTA .ctaButton {
    font-size: 1rem;
    padding: 16px 15px;
    line-height: 1.5;
    font-weight: 600;
    max-width: 280px;
    letter-spacing: -0.8px;
    word-spacing: -1px;
  }
  
  .incomeCard {
    padding: 15px;
    gap: 15px;
  }
  
  .incomeIcon {
    width: 50px;
    height: 50px;
  }
  
  .incomeIcon svg {
    width: 20px;
    height: 20px;
  }
  
  /* Solution Features Grid - Mobile Fix */
  .solutionFeaturesGrid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-top: 30px;
  }
  
  .solutionFeatureCard {
    border-right: none !important;
    border-bottom: 1px solid #e9ecef;
    min-height: auto !important;
    padding: 25px 20px !important;
    margin-bottom: 0;
  }
  
  .solutionFeatureCard:last-child {
    border-bottom: none !important;
  }
  
  .solutionFeatureHeader {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  
  .solutionFeatureIcon {
    margin-right: 0 !important;
    margin-bottom: 15px;
    width: 50px;
    height: 50px;
  }
  
  .solutionIconImage {
    width: 25px;
    height: 25px;
  }
  
  .solutionFeatureTitle {
    font-size: 1.3rem;
    text-align: center;
  }
  
  .solutionFeatureDescription {
    text-align: center;
    font-size: 1rem;
  }
  
  /* Simple Steps Grid - Mobile Fix */
  .simpleStepsGrid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .simpleStepCard {
    padding: 25px 20px !important;
    text-align: center;
  }
  
  .simpleStepNumber {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: #000000;
    font-weight: 700;
  }
  
  .simpleStepTitle {
    font-size: 1.3rem;
    line-height: 1.4;
    color: #000000;
  }
  
  /* Problem section responsive for small mobile */
  .problemTag {
    padding: 8px 20px;
    font-size: 1rem;
    margin-bottom: 15px;
  }
  
  .problemDescription {
    font-size: 1rem;
  }
  
  /* Marketplace CTA Section - Mobile Spacing */
  .marketplaceCTASection h2 {
    margin-bottom: 10px;
  }
  
  .marketplaceCTASection .sectionDescription {
    line-height: 1.4;
    margin-bottom: 5px;
  }
  
  .marketplaceCTASection .jointCTASection {
    margin: 5px 0;
  }
  
  /* Problem Section - Mobile Spacing */
  .problemSection .sectionDescription {
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.5;
  }
  
  .problemTag {
    margin-bottom: 15px;
  }
}

.getStartedSection h2 {
  color: #000000;
  font-family: 'Quicksand', sans-serif;
  font-size: 36px;
  font-weight: 700;
  text-align: left;
  margin-bottom: 40px;
}

.getStartedContentWrapper {
  display: grid;
  grid-template-columns: 1fr 400px 1fr;
  gap: 60px;
  align-items: start;
  margin-top: 20px;
}

.getStartedLeftContent {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding-right: 20px;
}

.getStartedFeatureBlock {
  margin-bottom: 0;
}

.getStartedFeatureTitle {
  color: #000000;
  font-family: 'Quicksand', sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.getStartedFeatureDescription {
  color: #000000;
  font-size: 18px;
  line-height: 1.5;
}

.getStartedMobileMockup {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 350px;
  flex-shrink: 0;
}

.getStartedMobilePreview {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.getStartedRightContent {
  text-align: left;
  padding-left: 20px;
}

.getStartedDownloadText {
  color: #666;
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 25px;
}

.getStartedEmailButton {
  background: linear-gradient(45deg, #ff6b8a, #ff8a9a);
  color: white;
  padding: 18px 40px;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 20px rgba(255, 107, 138, 0.3);
  text-decoration: none;
  display: inline-block;
}

.getStartedEmailButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 138, 0.4);
}

@media (max-width: 1024px) {
  .getStartedContentWrapper {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  
  .getStartedMobileMockup {
    order: 2;
  }
  
  .getStartedLeftContent {
    order: 1;
    padding-right: 0;
  }
  
  .getStartedRightContent {
    order: 3;
    padding-left: 0;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .getStartedSection h2 {
    font-family: 'Quicksand', sans-serif;
    font-size: 28px;
    font-weight: 700;
  }
}

@media (max-width: 480px) {
  .getStartedSection h2 {
    font-family: 'Quicksand', sans-serif;
    font-size: 24px;
    font-weight: 700;
  }
  
  .getStartedFeatureTitle {
    font-size: 1.3rem;
  }
}

.incomeContent {
  flex: 1;
}

.incomeContent h3 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #000000;
}

.incomeContent p {
  font-size: 24px;
  color: #000000;
  margin: 0;
}

.testimonialSection {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  margin: 40px 0;
}

.testimonialQuote {
  font-size: 1.2rem;
  font-style: italic;
  margin-bottom: 15px;
}

.testimonialAuthor {
  font-weight: bold;
}

.whyGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.whyItem {
  display: flex;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  color: white;
  border-radius: 10px;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.whyItem:hover {
  transform: scale(1.02);
}

.whyIcon {
  font-size: 1.5rem;
  margin-right: 15px;
  background: rgba(255,255,255,0.2);
  padding: 8px 12px;
  border-radius: 50%;
  min-width: 45px;
  text-align: center;
}

.howItWorksSection h2 {
  color: #000000;
  font-family: 'Quicksand', sans-serif;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 40px;
}

.stepsGrid,
.marketplaceStepsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin: 40px 0;
}

.stepCard {
  background: white;
  border-radius: 20px;
  padding: 40px 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  text-align: left;
}

.stepCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.stepNumber {
  color: #000000;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  display: block;
}

.stepTitle {
  color: #000000;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}



/* Updated Problem Section Styles */
.problemSection .sectionDescription {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 35px;
  color: #333;
}

.problemsList {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.problemItem {
  display: flex;
  align-items: center;
  gap: 25px;
}

.problemTag {
  background: linear-gradient(135deg, #ff6b8a, #ff8a9a);
  color: white;
  padding: 12px 30px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  min-width: 120px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(255, 107, 138, 0.3);
  margin-bottom: 15px;
}

.problemDescription {
  color: #000000;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  flex: 1;
}

/* Ensure section headings match Super Connectors page */
.problemSection h2,
.solutionSection h2,
.stepsSection h2,
.whyWorksSection h2,
.marketplaceCTASection h2 {
  color: #000000;
  font-family: 'Quicksand', sans-serif;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Reduce whitespace for Companies page sections */
.problemSection {
  padding-top: 20px !important;
  padding-bottom: 15px !important;
  margin-top: -40px !important;
}

.problemSection .contentPadVertical {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.solutionSection {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  margin-top: -40px !important;
}

.solutionSection .contentPadVertical {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.stepsSection {
  padding-top: 15px !important;
  padding-bottom: 20px !important;
  margin-top: -20px !important;
}

.stepsSection .contentPadVertical {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.whyWorksSection {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.whyWorksSection .contentPadVertical {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.marketplaceCTASection {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  margin-top: -30px !important;
}

.marketplaceCTASection .contentPadVertical {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* Marketplace CTA Section - Desktop Spacing */
.marketplaceCTASection .sectionDescription {
  line-height: 1.4;
  margin-bottom: 10px;
}

.marketplaceCTASection .jointCTASection {
  margin: 15px 0;
}

.solutionFeaturesGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 20px;
}

.solutionFeatureCard {
  background: white;
  padding: 25px 20px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e9ecef;
  min-height: 220px;
}

.solutionFeatureCard:last-child {
  border-right: none;
}

.solutionFeatureHeader {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.solutionFeatureIcon {
  width: 60px;
  height: 60px;
  background: linear-gradient(to bottom right, #41a8a4, #4294b5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
}

.solutionIconImage {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1) contrast(3) saturate(2);
  opacity: 0.95;
}

.solutionFeatureTitle {
  color: #000000;
  font-size: 24px;
  font-weight: 700;
}

.solutionFeatureDescription {
  color: #000000;
  font-size: 24px;
  line-height: 1.6;
  flex-grow: 1;
}

.benefitsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin: 40px 0;
}

.benefitItem {
  background: white;
  padding: 25px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.benefitItem:hover {
  transform: translateY(-3px);
}

.benefitIcon {
  font-size: 2rem;
  color: #4ecdc4;
  margin-bottom: 15px;
  font-weight: bold;
}

.benefitText {
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
}

/* Alt Header Navigation */
.headerContainer .menuItems.alt li {
  color: #000000;
}
.solutionDropdownContainerText.alt {
  color: #000000;
}

/* Responsive header navigation */
.mobileHeaderContainer {
  display: none;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1000;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.mobileHeaderContainer.open {
  background: linear-gradient(to bottom right, #41a8a4, #4294b5);
}
.mobileHeaderContainer .hamburgerMenu {
  display: flex;
  flex-direction: row;
  flex: 1;
  align-items: center;
  width: 100%;
  padding: 25px 20px;
}
.mobileHeaderContainer .hamburgerMenu .logo {
  vertical-align: middle;
  width: auto;
  height: 45px;
}
.mobileHeaderContainer .hamburgerMenu .nav-icon {
  position: relative;
  width: 35px;
  height: 30px;
  margin-left: auto;
  cursor: pointer;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
.mobileHeaderContainer .hamburgerMenu .nav-icon span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: #ffffff;
  border-radius: 5px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.mobileHeaderContainer .hamburgerMenu .nav-icon span:nth-child(1) {
  top: 0px;
}
.mobileHeaderContainer .hamburgerMenu .nav-icon span:nth-child(2),
.nav-icon span:nth-child(3) {
  top: 10px;
}
.mobileHeaderContainer .hamburgerMenu .nav-icon span:nth-child(4) {
  top: 20px;
}
.mobileHeaderContainer .hamburgerMenu .nav-icon.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}
.mobileHeaderContainer .hamburgerMenu .nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.mobileHeaderContainer .hamburgerMenu .nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.mobileHeaderContainer .hamburgerMenu .nav-icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}
.mobileHeaderContainer .mobileHeaderNav {
  display: none;
  margin: 0;
  padding: 0;
}
.mobileHeaderContainer .mobileHeaderNav li span {
  cursor: pointer;
  font-size: 24px;
  color: #ffffff;
  line-height: 1.08;
  letter-spacing: -0.36px;
  vertical-align: middle;
}
.mobileHeaderContainer .mobileHeaderNav li a {
  cursor: pointer;
  font-size: 24px;
  color: #ffffff;
  line-height: 1.08;
  letter-spacing: -0.36px;
  vertical-align: middle;
}
.mobileHeaderContainer .mobileHeaderNav .solutionsCaret {
  margin-left: 10px;
}
.mobileHeaderContainer .mobileHeaderNav .solutionsCaret.flip {
  transform: rotate(-180deg);
}
.mobileHeaderContainer .mobileHeaderNav .navItem {
  padding: 25px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.mobileHeaderContainer .mobileHeaderNav .navItem:last-child {
  border-bottom: none;
}
.mobileHeaderContainer .mobileHeaderNav .mobileHeaderSubNav {
  display: none;
  margin: 0;
  padding: 0;
}
.mobileHeaderContainer .mobileHeaderNav .mobileHeaderSubNav .subNavItem {
  padding: 25px 20px 0 20px;
}

/* Alt responsive header navigation */
.mobileHeaderContainer.alt .hamburgerMenu {
  background: #ffffff;
}
.mobileHeaderContainer.alt .hamburgerMenu .nav-icon span {
  background: #000000;
}

/* Footer */
.footerTop {
  display: flex;
  flex-direction: row;
  flex: 1;
  align-items: center;
  margin: 40px 0;
}
.footerTopLeft {
  align-items: center;
  z-index: 10;
}
.footerTopRight {
  align-items: center;
  margin-left: auto;
}
.footerLogo {
  width: 120px;
  height: auto;
  object-fit: contain;
}
.footerLinks {
  display: flex;
  flex-direction: row;
  flex: 1;
}
.footerLinks .leftLinks {
  margin-right: 100px;
}
.footerLinks .rightLinks {
}
.footerLinks ul {
  padding: 0;
  margin: 0;
}
.footerLinks ul li {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 30px;
}
.footerLinks ul li:last-child {
  margin-bottom: 0;
}
.footerBottom {
  display: flex;
  flex-direction: row;
  flex: 1;
  align-items: center;
  margin-bottom: -20px;
}
.footerBottomLeft {
  display: flex;
  align-items: center;
}
.footerBottomLeft .socialIcons {
  margin-right: 50px;
}
.footerBottomLeft .socialIcons img:first-child {
  margin-right: 15px;
}
.footerBottomLeft .socialIcons img {
  cursor: pointer;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.footerBottomRight {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.footerBottomRight .productShowcase {
  width: 158.1px;
  height: 128px;
  object-fit: contain;
  margin-left: 30px;
}
.footerBottomRight .productShowcaseMobile {
  display: none;
  width: 158.1px;
  height: 201.2px;
  object-fit: contain;
  margin-left: 30px;
}

/* Modal */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(37, 37, 37, 0.75);
  z-index: 1000;
}
.overlay .modal {
  position: absolute;
  width: 100%;
  max-width: 450px;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  margin-right: -50%;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 4px 34px 0 rgba(0, 0, 0, 0.25);
  padding: 20px 40px;
  outline: none;
  background-color: #ffffff;
  border-radius: 5px;
}
.overlay .modal .modalContent {
  margin-bottom: 20px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.overlay .modal .modalContent .modalTitle {
  font-size: 28px;
  margin-bottom: 20px;
}
.overlay .modal .modalContent .modalSubtext {
  font-size: 16px;
  margin-bottom: 20px;
}
/* .overlay .modal .modalButton{margin-bottom: -45px;} */
.modalFieldError {
  color: #fd6266;
  padding-top: 10px;
  font-size: 12px;
}
.ReactModal__Overlay {
  opacity: 0;
  transition: all 500ms ease-in-out;
  z-index: 1001;
  display: flex !important;
  justify-content: center !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
}
.ReactModal__Content {
  inset: unset !important;
  height: fit-content;
  min-width: 40vw !important;
  min-height: 20vw !important;
  max-width: 50vw !important;
  max-height: 95vh !important;
  overflow-y: scroll !important;
  position: absolute !important;
  border-radius: 15px !important;
  background: #fff !important;
  z-index: 10 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.ReactModal__Overlay--after-open {
  opacity: 1;
}
.ReactModal__Overlay--before-close {
  opacity: 0;
}
.modalHeader {
  padding-left: 30px;
  font-size: 22px;
  font-weight: 700;
  margin-top: 10px;
}

/* Gradients */
.coreGradient {
  background: linear-gradient(to right, #41a8a4, #4294b5);
}
.darkBlueGradient {
  background: linear-gradient(to right, #6c63ff, #230bb4);
}
.lightBlueGradient {
  background: linear-gradient(to right, #4d8af0, #33bec7);
}
.pinkGradient {
  background: linear-gradient(to right, #6586fb, #fb6592);
}

/* Backgrounds */
.greyBackground {
  background-color: #f8f8f8;
}
.whiteBackground {
  background-color: #ffffff;
  z-index: 1;
}
.greyWhiteBackground {
  background: linear-gradient(to bottom, #f8f8f8 75%, #ffffff 25%);
  z-index: 1;
}
.whiteGreyBackground {
  background: linear-gradient(to bottom, #ffffff 25%, #f8f8f8 0%);
}
.footerBackground {
  background-color: #edf3f3;
}

/* Curve breaks */
.curveBreak {
  position: absolute;
  width: 100%;
  bottom: -3px;
}
.curveBreak.mobile {
  display: none;
}
.curveBreak.acBannerBreak {
  margin-bottom: -10px;
}
.curveBreakAlt {
  position: absolute;
  width: 100%;
  top: -2px;
}
.curveBreakSolutions {
  position: absolute;
  width: 100%;
  top: 75%;
  margin-top: -5px;
}
.curveBreakFooter {
  position: relative;
  width: 100%;
  margin-bottom: -10px;
  z-index: 100;
}
.curveBreakFooterAlt {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 100;
}
.curveBreakBenefits {
  position: absolute;
  width: 100%;
  top: -100px;
}
.curveBreakServices {
  position: absolute;
  width: 100%;
  top: 25%;
  margin-top: -2px;
}

/* Angle Breaks */
.angleBreak {
  position: absolute;
  width: 100%;
  bottom: -3px;
}
.angleBreak.mobile {
  display: none;
}
.angleBreakAlt {
  position: absolute;
  width: 100%;
  top: -2px;
}
.angleBreakFooter {
  position: relative;
  width: 100%;
  margin-bottom: -10px;
  z-index: 100;
}
.angleBreakFooterAlt {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 100;
}

/* Images */
.placeholderImage {
  width: 575px;
  height: auto;
  object-fit: contain;
}
.advertiseImage {
  width: 940px;
  height: auto;
  object-fit: contain;
}
.mobileVideoThumbNailContainer {
  display: none;
}
.videoThumbNail {
  width: 500px;
  height: auto;
  object-fit: contain;
  cursor: pointer;
  margin-right: 50px;
}
.videoThumbNail2 {
  width: 650px;
  height: auto;
  object-fit: contain;
  cursor: pointer;
}
.employeeCentricImage {
  width: 500px;
  height: auto;
  object-fit: contain;
}
.supportImage {
  width: 500px;
  height: auto;
  object-fit: contain;
}
.customerSupportImage {
  width: 200px;
  height: auto;
  object-fit: contain;
}
.atsLogos,
.atsLogosMobile {
  width: 510px;
  height: auto;
  object-fit: contain;
}
.atsLogosMobile {
  display: none;
}
.featureShowcase {
  width: 920px;
  height: auto;
  object-fit: contain;
}
.notFoundImage404 {
  width: 520px;
  height: auto;
  object-fit: contain;
}
.feature_mobile_app {
  width: 300px;
  height: auto;
  object-fit: contain;
}
.enterprise_ireland {
  width: 400px;
  height: auto;
  object-fit: contain;
}
.award {
  width: 200px;
  height: auto;
  object-fit: contain;
}
.green_balloon {
  width: 250px;
  height: auto;
  object-fit: contain;
}
.showcaseImage {
  width: 570px;
  height: auto;
  object-fit: contain;
  margin-right: 50px;
  border-radius: 5px;
}
.previewIcon {
  height: 15px;
  width: auto;
  margin-right: 10px;
}

/* Icons */
.subheaderIcon {
  width: 160px;
  height: auto;
}
.featureColumnIcon {
  height: 150px;
  width: auto;
  object-fit: contain;
}
.externalCommunity {
  width: 200px;
  height: auto;
  object-fit: contain;
}
.advertisingIcon {
  width: 55px;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 20px;
}
.securityIcon {
  width: 230px;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
}
.securityChevron {
  width: 20px;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
}
.integrationIcon {
  width: 250px;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
}
.integrationJobIcon {
  height: 200px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}
.integrationUpdateIcon {
  height: 200px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}
.integrationApplyIcon {
  height: 200px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}
.partnerIcon {
  width: 250px;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
}

/* Illustrations */
.peopleWorkingIllustration {
  width: 560px;
  height: auto;
  object-fit: contain;
  margin-right: 50px;
}
.partnerHandshakeIllustration {
  width: 425px;
  height: auto;
  object-fit: contain;
}
.partnerHandshakeIllustration_large {
  display: none;
  width: auto;
  height: auto;
}
.disruptiveIllustration {
  width: 368px;
  height: auto;
  object-fit: contain;
}
.internalMobilityIllustration {
  width: 450px;
  height: auto;
  object-fit: contain;
  margin-right: 50px;
}
.imCommunicationIllustration {
  width: 472.3px;
  height: auto;
  object-fit: contain;
}
.imCommunicationIllustration_large {
  display: none;
  width: auto;
  height: auto;
  object-fit: contain;
}
.imTrackingIllustration {
  width: 307px;
  height: auto;
  object-fit: contain;
}
.imEngagementIllustration {
  width: 348.5px;
  height: auto;
  object-fit: contain;
}
.employeeReferralIllustration {
  width: 450px;
  height: auto;
  object-fit: contain;
  margin-right: 50px;
}
.erCommunicationIllustration {
  width: 467.8px;
  height: auto;
  object-fit: contain;
}
.erCommunicationIllustration_large {
  display: none;
  width: auto;
  height: auto;
  object-fit: contain;
}
.erEngagementIllustration {
  width: 272px;
  height: auto;
  object-fit: contain;
}
.erTrackingIllustration {
  width: 307px;
  height: auto;
  object-fit: contain;
}
.alumniConnectIllustration {
  width: 424px;
  height: auto;
  object-fit: contain;
  margin-right: 50px;
}
.acCommunicationIllustration {
  width: 472.3px;
  height: auto;
  object-fit: contain;
}
.acCommunicationIllustration_large {
  display: none;
  width: auto;
  height: auto;
  object-fit: contain;
}
.acEngagementIllustration {
  width: 357px;
  height: auto;
  object-fit: contain;
}
.acTrackingIllustration {
  width: 307px;
  height: auto;
  object-fit: contain;
}
.designIllustration {
  width: 321px;
  height: auto;
  object-fit: contain;
}
.buildIllustration {
  width: 376px;
  height: auto;
  object-fit: contain;
}
.transferIllustration {
  width: 295px;
  height: auto;
  object-fit: contain;
}
.pricingIllustration {
  width: 362px;
  height: auto;
  object-fit: contain;
}
.pricingIllustrationMobile {
  display: none;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-top: -175px;
}
.stickyNoteIllustration {
  width: 379px;
  height: auto;
  object-fit: contain;
}
.stickyNoteIllustrationMobile {
  display: none;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: -175px auto 0 auto;
}
.bookADemoIllustration {
  height: 150px;
  width: auto;
  object-fit: contain;
}
.howItWorksIllustration {
  height: 150px;
  width: auto;
  object-fit: contain;
}
.contactIllustration {
  width: 200px;
  height: auto;
  object-fit: contain;
}
.pricingStepIcon {
  width: 90px;
  height: 90px;
  object-fit: contain;
}

/* Home Background patterns */
.homeSribble1 {
  position: absolute;
  width: 535px;
  top: -45px;
  right: 50px;
}
.homeSribble3 {
  position: absolute;
  right: 50px;
  bottom: 70px;
}
.homeCircle1 {
  position: absolute;
  width: 101.5px;
  height: 124.7px;
  object-fit: contain;
  top: 105px;
  left: 0;
}
.homeWave1 {
  position: absolute;
  right: 0;
  bottom: 40px;
}

/* IM Background patterns */
.imScribble1 {
  position: absolute;
  width: auto;
  height: auto;
  right: 20%;
  top: -20%;
}
.imScribble2 {
  position: absolute;
  width: auto;
  height: auto;
  bottom: 30%;
  right: 3%;
  transform: rotate(120deg);
}
.imScribble3 {
  position: absolute;
  width: auto;
  height: auto;
  bottom: 12%;
  right: 0;
  z-index: -10;
}
.imScribble4 {
  position: absolute;
  width: auto;
  left: 16%;
  top: -25%;
}
.imCircle1 {
  position: absolute;
  width: auto;
  left: 0;
}
.imSpeckles1 {
  position: absolute;
  width: auto;
  height: auto;
  left: 25%;
  top: 12%;
}
.imWave1 {
  position: absolute;
  width: auto;
  height: auto;
  top: 40%;
  left: 0;
}
.imWave2 {
  position: absolute;
  width: auto;
  height: auto;
  bottom: 15%;
  right: 0;
}

/* ER Background patterns */
.erScribble1 {
  position: absolute;
  width: auto;
  height: auto;
  right: 26%;
  top: -60%;
}
.erScribble2 {
  position: absolute;
  width: auto;
  height: auto;
  left: 50%;
  top: 5%;
}
.erScribble3 {
  position: absolute;
  width: auto;
  height: auto;
  right: 4%;
  top: 67%;
}
.erScribble4 {
  position: absolute;
  width: auto;
  left: 16%;
  top: -25%;
}
.erCircle1 {
  position: absolute;
  width: auto;
  height: auto;
  right: 0;
  top: 40%;
}
.erWave1 {
  position: absolute;
  width: auto;
  height: auto;
  left: 0;
  top: 62%;
}
.erWave2 {
  position: absolute;
  width: auto;
  height: auto;
  bottom: 15%;
  right: 0;
}
.erWave3 {
  position: absolute;
  width: 150px;
  height: auto;
  left: 0;
  top: 2%;
}

/* AC Background patterns */
.acScribble1 {
  position: absolute;
  width: auto;
  height: auto;
  top: -52%;
  left: 12%;
}
.acScribble2 {
  position: absolute;
  width: auto;
  height: auto;
  top: 45%;
  right: 0;
}
.acScribble3 {
  position: absolute;
  width: auto;
  height: auto;
  bottom: 12%;
  right: 0;
  z-index: -10;
}
.acScribble4 {
  position: absolute;
  width: auto;
  height: auto;
  top: -25%;
  right: 30%;
}
.acSpeckles1 {
  position: absolute;
  width: auto;
  height: auto;
  right: 0;
  bottom: 0;
}
.acSpeckles2 {
  position: absolute;
  width: auto;
  height: auto;
  left: 40%;
  top: 15%;
}
.acWave1 {
  position: absolute;
  width: auto;
  height: auto;
  left: 0;
  top: 43%;
}
.acWave2 {
  position: absolute;
  width: 177.8px;
  height: auto;
  bottom: 15%;
  right: 0;
}

/* Service Background patterns */
.serviceScribble1 {
  position: absolute;
  width: auto;
  height: auto;
  left: 20%;
  top: 7%;
}
.serviceScribble2 {
  position: absolute;
  width: auto;
  height: auto;
  left: 10%;
  top: 45%;
}
.serviceWave1 {
  position: absolute;
  width: auto;
  height: auto;
  right: 0;
  top: 19%;
}
.serviceCircles1 {
  position: absolute;
  width: auto;
  height: auto;
  right: 0;
  bottom: 16%;
}

/* Pricing Background patterns */
.pricingScribble1 {
  position: absolute;
  width: auto;
  height: auto;
  right: 0;
  top: 55%;
}
.pricingScribble2 {
  position: absolute;
  width: auto;
  height: auto;
  left: 20%;
  top: 30%;
}
.pricingSpeckles1 {
  position: absolute;
  width: auto;
  height: auto;
  right: 0;
  bottom: 35%;
}

/* Partners Background patterns */
.partnersScribble1 {
  position: absolute;
  width: auto;
  height: auto;
  left: 10%;
  top: 5%;
}
.partnersSpeckles1 {
  position: absolute;
  width: auto;
  height: auto;
  right: 0;
  top: 20%;
}

/* Contact Us Background patterns */
.contactScribble1 {
  position: absolute;
  width: auto;
  height: auto;
}
.contactSpeckles1 {
  position: absolute;
  width: auto;
  height: auto;
  right: 0;
  top: 30%;
}
.contactSpeckles2 {
  position: absolute;
  width: auto;
  height: auto;
  left: 25%;
  bottom: 0;
}

/* Page sections */
.pageSection {
  position: relative;
  width: 100%;
}
.pageSection .contentPadHorizontal {
  padding-left: 50px;
  padding-right: 50px;
}
.pageSection .contentPadVertical {
  padding-top: 50px;
  padding-bottom: 50px;
}

/* Page headers */
.pageSection.homeHeader {
  padding-top: 125px;
  height: 580px;
  z-index: 10;
}
.pageSection.imHeader {
  padding-top: 125px;
  height: 650px;
}
.pageSection.featureHeader {
  padding-top: 125px;
  height: auto;
}
.pageSection.supportHeader {
  padding-top: 125px;
  height: auto;
}
.pageSection.aboutHeader {
  padding-top: 125px;
  height: auto;
}
.pageSection.demoHeader {
  padding-top: 125px;
  padding-bottom: 200px;
  height: auto;
}

/* Demo page specific styles */
.demoVideoSection {
  margin-bottom: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 600px;
}

.demoMainHeading {
  text-align: center;
  margin-bottom: 30px;
}

.demoMainHeading h1 {
  font-family: 'Quicksand', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 20px 0;
  line-height: 1.2;
}

.demoMainDescription {
  font-family: 'Quicksand', sans-serif;
  font-size: 24px;
  line-height: 32px;
  color: #666666;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.demoMainDescription .mobile-text {
  display: none;
}

.demoVideoText {
  font-family: 'Quicksand', sans-serif;
  font-size: 19px;
  line-height: 28px;
  color: #000000;
  margin-bottom: 30px;
  font-weight: 700;
  text-align: left;
}

.demoVideoText .mobile-text {
  display: none;
}

.demoVideoThumbnail {
  max-width: 100%;
  width: 100%;
  height: 300px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
  margin-left: 0;
  display: block;
}

.demoVideoThumbnail:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.demoDescription {
  font-family: 'Quicksand', sans-serif;
  font-size: 19px;
  line-height: 35px;
  color: #000000;
  margin-bottom: 20px;
  max-width: 100%;
  font-weight: 700;
}

/* Calendly Loading Skeleton */
.calendlyLoadingSkeleton {
  height: 600px;
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 20px;
  position: absolute;
  width: calc(100% - 40px);
  z-index: 1;
}

.calendlyContainer {
  margin-top: 2px;
  position: relative;
}

/* Custom loading state for Calendly */
.calendlyLoadingState {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 850px;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.calendlySpinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e0e0e0;
  border-top: 4px solid #41A8A4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

.calendlyLoadingState p {
  font-family: 'Quicksand', sans-serif;
  font-size: 16px;
  color: #666666;
  margin: 0;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Hide global Calendly loaders */
.calendly-inline-widget {
  position: relative !important;
}

/* Hide any global Calendly loading spinners */
.calendly-inline-widget::before,
.calendly-inline-widget::after {
  display: none !important;
}

/* Ensure Calendly widget loads in the correct position */
.calendly-inline-widget iframe {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
}



.demoVideoHeading {
  margin-bottom: 0;
  text-align: left;
  margin-left: 0;
}

.demoVideoHeading h2 {
  font-family: 'Quicksand', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 15px 0;
  line-height: 1.3;
  text-align: left;
}

.demoVideoSubheading {
  margin-bottom: 5px;
}

.demoVideoSubheading p {
  font-family: 'Quicksand', sans-serif;
  font-size: 18px;
  color: #666666;
  margin: 0 0 0 0;
  line-height: 1.4;
}

.demoCTASection {
  margin-bottom: 5px;
}

.demoCTASection h2 {
  font-family: 'Quicksand', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 0 0;
  line-height: 1.3;
}

.demoCTASection p {
  font-family: 'Quicksand', sans-serif;
  font-size: 18px;
  color: #666666;
  margin: 0 0 0 0;
  line-height: 1.4;
}

/* Demo Grid Layout */
.demoGridContainer {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  gap: 30px;
}

.demoGridCol {
  flex: 1;
  padding: 0 15px;
}

.calendarHeader {
  margin-bottom: 20px;
}

.headerSkeleton {
  height: 24px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 10px;
}

.headerSkeleton.short {
  width: 60%;
}

.calendarGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.dayCell {
  height: 40px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 4px;
}

.timeSlotsArea {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.timeSlotSkeleton {
  height: 50px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 6px;
  width: 100%;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.pageSection.externalCommunitySection {
  height: 750px;
}
.pageSection.securityHeader {
  padding-top: 125px;
  height: auto;
}
.pageSection.integrationHeader {
  padding-top: 125px;
  height: 600px;
}
.pageSection.referralHealthHeader {
  padding-top: 125px;
  height: 500px;
}
.pageSection.serviceHeader {
  padding-top: 150px;
  height: 455px;
}
.pageSection.pricingHeader {
  padding-top: 125px;
  height: 500px;
}
.pageSection.partnersHeader {
  padding-top: 125px;
  height: auto;
}
.pageSection.contactHeader {
  padding-top: 125px;
}
.pageSection .sectionContent {
  max-width: 1450px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 0;
  position: relative;
}
.pageSection .sectionContent.flex {
  display: flex;
  flex-direction: row;
  flex: 1;
  align-items: center;
}
.pageSection .sectionContent.flex.topAlign {
  align-items: flex-start;
}
.pageSection .sectionContent .sectionContent40 {
  flex: 0.4;
  position: relative;
}
.pageSection .sectionContent .sectionContent60 {
  flex: 0.6;
  position: relative;
}
.pageSection .sectionContent .sectionContent50 {
  flex: 0.5;
  position: relative;
}
.pageSection .sectionContent .sectionContentLeft {
  flex: 0.6;
  position: relative;
}
.pageSection .sectionContent .sectionContentRight {
  flex: 0.4;
  position: relative;
}
.pageSection .sectionContent .sectionText {
  font-size: 36px;
  margin-bottom: 20px;
  line-height: 60px;
  color: #000000;
}

.pageSection .sectionContent .sectionText.whiteText {
  color: #ffffff;
}
.pageSection .sectionContent .sectionDescription {
  font-size: 18px;
  line-height: 35px;
}
.pageSection .sectionContent .sectionDescription.breakWidth {
  max-width: 820px;
}

/* Get Started CTA */
.CTATitle {
  line-height: 30px;
}
.CTAInputField {
  width: 400px;
  height: 70px;
  border-radius: 40px;
  border: none;
  background-color: #ffffff;
  text-indent: 30px;
  outline: none;
  -webkit-appearance: none;
}
.CTAInputField.alt {
  border: solid 1px rgba(0, 0, 0, 0.6);
}
.CTAInputFieldFull {
  width: 720px !important;
  border: solid 1px rgba(0, 0, 0, 0.6);
}
.CTAButton {
  cursor: pointer;
  border-radius: 100px;
  height: 50px;
  text-align: center;
  padding: 14px 25px;
  background: linear-gradient(to right, #fd6266, #fb6592);
}
.CTAButtonDisabled {
  cursor: pointer;
  border-radius: 100px;
  height: 50px;
  text-align: center;
  padding: 14px 25px;
  background: #c2c2c0;
}
.CTAButton.getStarted {
  position: absolute;
  top: 10px;
  right: 10px;
}
.CTAError {
  color: #fd6266;
  position: absolute;
  top: 48px;
  left: 32px;
  font-size: 12px;
}

/* Joint CTA Section */
.jointCTASection {
  margin: 40px 0;
  text-align: center;
}
.jointCTASection.alt {
  text-align: left;
}
.jointCTASection.compact {
  margin: 30px 0 15px 0;
}
.jointCTASection .ctaButton:first-child {
  margin-right: 20px;
}
.jointCTASection a .ctaButton:first-child {
  margin-right: 0;
}
.jointCTASection .ctaButton {
  display: inline-block;
  cursor: pointer;
  border-radius: 100px;
  height: 50px;
  padding: 0 25px;
  text-align: center;
  line-height: 50px;
}
.jointCTASection .ctaButton.primaryButton {
  background: linear-gradient(to right, #fd6266, #fb6592);
}
.primaryDemoButton {
  margin-right: 20px;
}
.jointCTASection .secondaryButton {
  position: relative;
  background-color: #ffffff;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 700;
  color: #fd6266;
}
.jointCTASection .secondaryButton::after {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
  background: linear-gradient(#fd6266, #fb6592);
  content: "";
  z-index: -1;
  border-radius: 100px;
}
.jointCTASection .secondaryButton.alt {
  border: none;
}
.jointCTASection .secondaryButton.alt::after {
  background: none;
}
.jointCTASection .ctaButton span {
  font-size: 16px;
}

.filoJointCTASection {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/* Solution pages banner */
.pageSection .sectionContent .solutionBanner {
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: center;
  align-items: center;
  margin-bottom: 80px;
}
.pageSection .sectionContent .solutionBanner .bannerItem {
  font-size: 24px;
  text-align: center;
  margin-right: 130px;
  z-index: 10;
}
.pageSection .sectionContent .solutionBanner .bannerItem:last-child {
  margin-right: 0;
}
.pageSection .sectionContent .solutionBanner .bannerItem .bannerIconContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 145.3px;
  height: 145.3px;
  border-radius: 50%;
  background-color: #ffffff;
  margin: 0 auto;
  margin-bottom: 20px;
}
.pageSection .sectionContent .solutionBanner .bannerItem .bannerIcon1 {
  width: 70px;
  height: 70px;
  object-fit: contain;
}
.pageSection .sectionContent .solutionBanner .bannerItem .bannerIcon2 {
  width: 62px;
  height: 70px;
  object-fit: contain;
}
.pageSection .sectionContent .solutionBanner .bannerItem .bannerIcon3 {
  width: 70px;
  height: 67px;
  object-fit: contain;
}

/* Benefits */
.BrainhubCarousel__container {
  margin: 50px 0;
}
.pageSection .benefitsSection {
  position: relative;
  padding: 60px 0 100px 0;
}
.pageSection
  .benefitsSection
  .BrainhubCarousel
  .BrainhubCarousel__trackContainer {
  overflow: visible !important;
}
.pageSection .benefitsSection .BrainhubCarousel__arrows {
  position: absolute;
  z-index: 100;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  background-color: rgba(248, 248, 248, 0.8);
}
.pageSection .benefitsSection .BrainhubCarousel__arrows:hover:enabled {
  background-color: rgba(248, 248, 248, 1) !important;
}
.pageSection .benefitsSection .BrainhubCarousel__arrowLeft {
  left: 20px;
}
.pageSection .benefitsSection .BrainhubCarousel__arrowRight {
  right: 20px;
}
.pageSection .benefitsSection .BrainhubCarousel__arrows span {
  border-color: #000000;
  border-width: 4px 4px 0 0;
  border-top-left-radius: 2px;
  border-bottom-right-radius: 2px;
}
.pageSection .benefitsSection .BrainhubCarousel__arrows:hover:enabled span {
  border-color: inherit !important;
}
.pageSection .benefitsSection .benefitItem {
  position: relative;
  width: 400px;
  height: 225px;
  border-radius: 20px;
  box-shadow: 0 4px 34px 0 rgba(189, 189, 189, 0.25);
  background-color: #ffffff;
  padding: 40px 40px 25px 20px;
  margin: 30px 0 60px 0;
}
.pageSection .benefitsSection .benefitLogo {
  margin: -70px 0 10px 0;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow: 0 4px 34px 0 rgba(189, 189, 189, 0.25);
  background-color: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pageSection .benefitsSection .benefitLogo img {
  width: 100%;
  height: auto;
  padding: 10px;
}
.pageSection .benefitsSection .benefitTitle {
  font-size: 20px;
  margin-bottom: 15px;
}
.pageSection .benefitsSection .benefitText {
  font-size: 16px;
}

/* Solutions */
.solutionGrid {
  display: flex;
  justify-content: center;
}
.solutionsOverview {
  margin: 70px 0 0 0;
  display: flex;
  grid-template-columns: auto auto;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  justify-items: center;
  justify-content: center;
}
.solutionsOverview .solutionItem.three {
  width: calc(100% / 3);
  min-width: 280px;
}
.solutionsOverview .solutionItem.two {
  width: 450px;
  min-width: 280px;
}
.solutionsOverview .solutionItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 40px 30px 40px;
  border-radius: 15px;
  background-color: #ffffff;
  z-index: 100;
}
.solutionsOverview .solutionItem.alt {
  height: 450px;
  padding-bottom: 30px;
}
.solutionsOverview .icon {
  position: relative;
  margin-bottom: 40px;
}
.solutionsOverview .icon .solutionIcon {
  height: 100px;
  width: auto;
  object-fit: contain;
}
.solutionsOverview .title {
  font-size: 20px;
  text-align: center;
  line-height: 35px;
  font-weight: 500;
}
.solutionsOverview .description {
  flex: 0.35;
  padding-top: 14px;
  font-size: 14px;
  text-align: center;
  line-height: 35px;
}
.solutionsOverview .cta {
  flex: 0.1;
  padding-top: 11px;
  font-size: 18px;
  color: #fd6266;
  text-transform: uppercase;
  text-align: center;
}

/* Homepage */
.subheaderText {
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

/* What you get */
.whatYouGetContainer {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}
.whatYouGetContainer .whatYouGetGrid {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 120px;
  grid-row-gap: 80px;
  justify-items: center;
  align-items: center;
}
.whatYouGetContainer .whatYouGetGrid .whatYouGetItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.whatYouGetContainer .whatYouGetGrid .whatYouGetItem .whatYouGetLogo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  width: 110px;
  border: 2px solid #33bec7;
  border-radius: 25px;
  margin-bottom: 20px;
}
.whatYouGetContainer .whatYouGetGrid .whatYouGetItem .whatYouGetLogo img {
  height: 70px;
  width: auto;
  object-fit: contain;
}

/* Benefits */
.benefitsContainer {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}
.benefitsGraphic {
  width: 1100px;
}
/* .benefitsContainer .benefitsGrid{display: inline-grid; grid-template-columns: auto auto auto; grid-column-gap: 120px; grid-row-gap: 80px; justify-items: center; align-items: center;}
.benefitsContainer .benefitsGrid .benefitItem{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 300px; background: #FFFFFF; border-radius: 10px; padding: 20px;}
.benefitsContainer .benefitsGrid .benefitItem .benefitLogo{display: flex; align-items: center; justify-content: center; height: 110px; width: 110px;}
.benefitsContainer .benefitsGrid .benefitItem .benefitLogo img{height: 70px; width: auto; object-fit: contain;} */

/* Bespoke section padding */
.pageSection .hireUpWaySection {
  padding: 60px 0 50px 0;
}

.pageSection .hireUpWaySection.im .communication {
  text-align: right;
}
.pageSection .hireUpWaySection.im .engagement {
  text-align: left;
  padding-left: 50px;
}
.pageSection .hireUpWaySection.im .tracking {
  text-align: right;
  padding-right: 50px;
}

.pageSection .hireUpWaySection.er .communication {
  text-align: left;
}
.pageSection .hireUpWaySection.er .engagement {
  text-align: right;
  padding-right: 50px;
}
.pageSection .hireUpWaySection.er .tracking {
  text-align: left;
  padding-left: 50px;
}

.pageSection .hireUpWaySection.ac .communication {
  text-align: right;
}
.pageSection .hireUpWaySection.ac .engagement {
  text-align: left;
  padding-left: 50px;
}
.pageSection .hireUpWaySection.ac .tracking {
  text-align: right;
  padding-right: 50px;
}

.servicesSection {
  background: linear-gradient(to bottom, #f8f8f8 25%, #ffffff 0%);
  padding-bottom: 50px;
}
.servicesSection .design {
  text-align: left;
}
.servicesSection .build {
  text-align: right;
}
.servicesSection .transfer {
  text-align: left;
}

/* IM specific */
.pageSection .sectionContent .sectionContentRight.im {
}

/* AC specific */
.pageSection .sectionContent .sectionContentRight.ac {
  top: 25px;
}

/* Partner specific */
.partnerItem {
  width: 100%;
  max-width: 420px;
  height: auto;
  padding: 40px 20px;
  border-radius: 20px;
  box-shadow: 0 4px 34px 0 rgba(189, 189, 189, 0.25);
  background-color: #ffffff;
}
.partnerItemAlt {
  width: 100%;
  max-width: 420px;
  height: auto;
  padding: 40px 20px;
}
.partnerItemTitle {
  font-size: 24px;
  margin-bottom: 25px;
}
.partnerItemList {
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 30px;
}
.partnerItemList li {
  margin-bottom: 10px;
}
.partnerItemList li:last-child {
  margin-bottom: 0;
}

/* Contact form */
.contactForm {
  position: relative;
  width: 100%;
  max-width: 450px;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 4px 34px 0 rgba(189, 189, 189, 0.25);
  background-color: #ffffff;
}
.inputField {
  width: 100%;
  height: 40px;
  border-radius: 5px;
  border: solid 1px rgba(0, 0, 0, 0.6);
  background-color: #ffffff;
  text-indent: 10px;
  outline: none;
  -webkit-appearance: none;
}
.textfieldInput {
  width: 100%;
  height: 90px;
  border-radius: 5px;
  border: solid 1px rgba(0, 0, 0, 0.6);
  background-color: #ffffff;
  outline: none;
  resize: none;
  padding: 10px;
  -webkit-appearance: none;
  font-family: inherit;
}
.contactForm .contactButton {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: -25px;
}

/* Contact specific */
.contactInfo {
}
.contactInfo .contactItem {
  display: flex;
  flex-direction: row;
  flex: 1;
  margin-bottom: 25px;
}
.contactInfo .contactItem.center {
  align-items: center;
}
.contactInfo .contactItem:last-child {
  margin-bottom: 0;
}
.contactInfo .contactItem .contactIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  box-shadow: 0 14px 34px 0 rgba(189, 189, 189, 0.25);
  background-color: #ffffff;
  margin-right: 20px;
}
.contactInfo .contactItem .contactIcon img {
  height: 27px;
  width: 27px;
}
.contactInfo .contactItem .contactText {
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: -0.24px;
}

/* Privacy Policy */
.pageSection.privacyPolicy h2 {
  font-size: 20px;
}
.privacyPolicyText {
  margin: 0;
  padding: 0;
}
.privacyPolicyText li {
  margin-bottom: 20px;
}

div.transition-group {
  position: relative;
}
section.route-section {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.fade-enter {
  opacity: 0.01;
}
.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 100ms ease-in;
}
.fade-exit {
  opacity: 1;
}

.fade-exit.fade-exit-active {
  opacity: 0.01;
  transition: opacity 100ms ease-in;
}

/* Section breaks */
.featurePadding {
  padding-bottom: 60px;
}

/* Advertising Icon Grid */
.advertisingOptionsGrid {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin-top: 30px;
  font-size: 16px;
}
.advertisingOptionsGrid div {
  margin-right: 40px;
}
.advertisingOptionsGrid div:last-child {
  margin-right: 0;
}

/* Pricing Page */
.pricingTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.pricingTitle h1 {
  font-size: 28px;
  font-weight: 700;
  margin-right: 30px;
}
.pricingTitle h1:last-child {
  margin-right: 0;
}
.pricingStep {
  display: flex;
  align-items: center;
  width: 650px;
  padding: 20px 30px;
  background: #ffffff;
  border-radius: 90px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}
.pricingStep .stepLogo {
  display: flex;
  width: 140px;
}

/* Feature Page */
.featureColumns {
  display: flex;
  flex: 1;
  justify-content: center;
}
.featureColumns .column {
  display: flex;
  flex-direction: column;
  flex: 0.3;
  margin-right: 100px;
  line-height: 30px;
}
.featureColumns .column:last-child {
  margin-right: 0;
}

/* Video Player Modal */
/* .modal-video-close-btn{background: #FD6266 !important; border-radius: 50% !important; border: 3px solid #FFFFFF !important; height: 50px !important; width: 50px !important; top: -15px !important; right: -15px !important;}
.modal-video-close-btn:before, .modal-video-close-btn:after{margin-top: -1px !important; left: 7px !important; height: 3px !important; width: 65% !important; height: 3px !important;}
.modal-video-movie-wrap {border-radius: 5px;}
.modal-video-movie-wrap iframe{border-radius: 5px; overflow: hidden;} */

/* Security Overview */
.securityOverview {
  margin-bottom: 100px;
}
.securityOverview .contentItem {
  margin-bottom: 30px;
}
.securityOverview .contentItem:last-child {
  margin-bottom: 0px;
}
.securityOverview .contentItem .title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
}
.securityOverview .contentItem .content {
  font-size: 16px;
  font-weight: 400;
}

/* Accordian Menu */
.accordion__section {
  display: flex;
  flex-direction: column;
  width: 900px;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 30px;
}
.accordion__section:last-child {
  margin-bottom: 0px;
}
.accordion {
  background-color: #ffffff;
  cursor: pointer;
  padding: 20px;
  display: flex;
  align-items: center;
  border: none;
  outline: none;
}
.accordion__title {
  font-weight: 700;
  font-size: 20px;
  text-align: left;
  line-height: 40px;
  font-family: "Quicksand";
}
.accordion__icon {
  transition: transform 0.1s ease;
  margin-right: 50px;
}
.rotate {
  transform: rotate(90deg);
}
.accordion__content {
  overflow: auto;
  transition: max-height 0.1s ease;
}
.accordion__text {
  padding: 30px 20px 20px 20px;
}
.accordion__text div {
  margin-bottom: 30px;
}
.accordion__text div:last-child {
  margin-bottom: 0;
}
.accordion__text h2 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 15px 0;
}
.accordion__text p {
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}

.referralHealthOverview {
  margin-bottom: 100px;
}
.referralHealthOverview .contentItem {
  margin-bottom: 30px;
}
.referralHealthOverview .contentItem:last-child {
  margin-bottom: 0px;
}
.referralHealthOverview .contentItem .title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
}
.referralHealthOverview .contentItem .content {
  font-size: 16px;
  font-weight: 400;
}

/* Referral Health Accordian Menu */
.rh_accordion__section {
  display: flex;
  flex-direction: column;
  width: 88%;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 30px;
}
.rh_accordion__section:last-child {
  margin-bottom: 0px;
}
.rh_accordion {
  background-color: #ffffff;
  padding: 20px;
  display: flex;
  align-items: center;
  border: none;
  outline: none;
}
.rh_accordion__title {
  font-weight: 600;
  font-size: 20px;
  text-align: left;
  line-height: 40px;
  padding-left: 40px;
}
.rh_accordion__icon {
  transition: transform 0.1s ease;
  margin-right: 50px;
}
.rotate {
  transform: rotate(90deg);
}
.rh_accordion__content {
  overflow: auto;
  transition: max-height 0.1s ease;
}
.rh_accordion__text {
  padding: 0px 20px 20px 60px;
}
.rh_accordion__text div {
  margin-bottom: 20px;
}
.rh_accordion__text h2 {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 15px 0;
}

/* Referral Health */
.rh_metrics_container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 50px;
}
.rh_metrics_container > * {
  width: 50%;
}
.rh_metrics_input {
  width: 60%;
}
.rh_metrics_input input {
  width: 100%;
}
.rh_metrics_input label {
  width: 100%;
}
.rh_metrics_input label {
  color: #868686;
}
.referralHealthMetricsError {
  color: #fd6266;
  position: absolute;
  padding-top: 45px;
  font-size: 12px;
}
.howWeCalculateReferralHealth {
  padding-left: 50px;
  font-size: 14px;
  color: #4d8af0;
  font-weight: bold;
  cursor: pointer;
}

.rh_experience_container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 50px;
  gap: 30px;
}
.rh_experience_container > * {
  width: 31%;
}
.rh_experience_item {
  border: 2px solid #eaeae9;
  border-radius: 30px;
}
.rh_experience_item.selectedFeature {
  border: 2px solid #33bec7;
  border-radius: 30px;
}
.rh_experience_item_top {
  display: flex;
  margin-bottom: 0px !important;
  min-height: 200px;
}
.rh_experience_item_top_left {
  width: 66%;
  padding: 10px 10px 0px 20px;
}
.rh_experience_item_top_right {
  width: 33%;
  padding: 10px;
}
.rh_experience_item_bottom {
  text-align: center;
}
.rh_experience_item_bottom input {
  width: 20px;
  height: 20px;
}
.rh_experience_item_bottom input:checked {
  accent-color: #33bec7;
}

.rh_experience_item_top_right .mobileFriendly {
  width: 70px;
  height: auto;
  float: right;
  margin-right: 10px;
  margin-top: 10px;
  object-fit: contain;
  vertical-align: middle;
}
.rh_experience_item_top_right .socialReferrals {
  width: 70px;
  height: auto;
  float: right;
  margin-right: 10px;
  margin-top: 10px;
  object-fit: contain;
  vertical-align: middle;
}
.rh_experience_item_top_right .referralTracking {
  width: 70px;
  height: auto;
  float: right;
  margin-right: 10px;
  margin-top: 10px;
  object-fit: contain;
  vertical-align: middle;
}
.rh_experience_item_top_right .referralEndorsements {
  width: 70px;
  height: auto;
  float: right;
  margin-right: 10px;
  margin-top: 10px;
  object-fit: contain;
  vertical-align: middle;
}
.rh_experience_item_top_right .gamification {
  width: 70px;
  height: auto;
  float: right;
  margin-right: 10px;
  margin-top: 10px;
  object-fit: contain;
  vertical-align: middle;
}
.rh_experience_item_top_right .employeeFeedback {
  width: 70px;
  height: auto;
  float: right;
  margin-right: 10px;
  margin-top: 10px;
  object-fit: contain;
  vertical-align: middle;
}

.bonusPaymentStructure {
  width: 100%;
  border-radius: 7px;
  padding: 10px 6px 10px 0px;
  border-color: #868686;
  color: #868686;
  background: white;
  height: 40px;
  text-indent: 10px;
}
.bonusPaymentStructure.selected {
  border-color: #33bec7;
  color: black;
}
.bonusPaymentStructure {
  -webkit-appearance: none;
  appearance: none;
}
.bonusPaymentStructure {
  background-image: url("./img/assets/misc/down-arrow.svg");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
}
.bonusPaymentStructure:checked {
  color: red;
}

.referralHealthTooltip {
  margin-left: 10px;
  width: 23px;
  height: 23px;
  background: linear-gradient(to right, #fd6266, #fb6592);
  text-align: center;
  color: white;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
}
.referralHealthScoreEmailError {
  color: #fd6266;
  position: absolute;
  top: 48px;
  left: 0px;
  font-size: 12px;
}
.styles_scoreValue__2dBgK {
  text-shadow: 0px 0px 0px #bfbfbf !important;
}

.referralHealthResults {
  grid-gap: 30px;
  gap: 30px;
}
.currentHealth {
  width: 43%;
  border-radius: 15px;
}
.currentHealth .title {
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  padding: 30px 30px 50px 30px;
}
.healthWithHireUp {
  width: 43%;
  border-radius: 15px;
}
.healthWithHireUp .title {
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  padding: 30px 30px 50px 30px;
}
.referralHealthResultsLineItem {
  margin-left: 50px;
  display: flex;
  align-items: center;
  padding-bottom: 20px;
}
.greenplus {
  width: 20px;
  height: auto;
  margin-right: 20px;
  object-fit: contain;
  vertical-align: middle;
}
.redminus {
  width: 20px;
  height: auto;
  margin-right: 20px;
  object-fit: contain;
  vertical-align: middle;
}
.star {
  width: 28px;
  height: auto;
  margin-right: 20px;
  object-fit: contain;
  vertical-align: middle;
}
.__react_component_tooltip {
  max-width: 38vh;
}

/* About Us */
.aboutUs {
  padding: 40px;
  line-height: 30px;
  border-radius: 20px;
  font-size: 18px;
  text-align: center;
  max-width: 800px;
  margin: auto;
}

/* Support */
.supportForm {
  max-width: 800px;
  height: auto;
  border-radius: 25px;
  padding: 30px;
  margin-left: auto;
  margin-right: auto;
}

/* Early Access */
.earlyAccessPage {
  width: 100%;
  padding: 0 60px 0 60px;
}
.ea-content {
  display: flex;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.ea-left {
  display: inline-block;
  padding: 60px 40px 60px 0;
}
.ea-left .ea-logo {
  width: 150px;
  height: auto;
  object-fit: contain;
  margin-bottom: 30px;
}
.ea-left .ea-title {
  font-size: 52px;
  color: #ffffff;
  margin-bottom: 20px;
}
.ea-left .ea-subtitle {
  font-size: 22px;
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 50px;
}
.ea-left .ea-description {
  font-size: 18px;
  color: #ffffff;
  line-height: 30px;
}
.ea-left .ea-linkback {
  margin-top: 50px;
}
.ea-left .ea-linkback .ea-link {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  display: flex;
  align-items: center;
}
.ea-left .ea-linkback .ea-link:hover {
  text-decoration: underline;
}
.ea-right {
  display: inline-block;
  margin-left: auto;
}
.ea-right .ea-form {
  width: 530px;
  min-height: 100vh;
  background: #ffffff;
  overflow-y: scroll;
  padding: 50px;
}
.ea-right .ea-form .ea-formtitle {
  font-size: 36px;
  margin-bottom: 30px;
  text-align: center;
  line-height: 60px;
}

.arrowright {
  height: 20px;
  width: auto;
  object-fit: contain;
  margin-left: 10px;
}

/* Hubspot Form */
#hubspotForm {
  width: 100%;
}
#hs-form-iframe-0 {
  width: 100% !important;
}
#hubspot-messages-iframe-container {
  z-index: 10000000 !important;
}

.confirmRegisterMessage {
  font-size: 16px;
  line-height: 30px;
  padding-top: 20px;
}

.previewFeature {
  display: flex;
  align-items: center;
  margin-top: 30px;
  color: #fd6266;
  font-weight: 500;
}

/*CUSTOM TEMP STYLINGS*/
.revolutionisingReferralsContainer {
  display: flex;
  flex-direction: row;
  width: 80%;
  margin: 0 auto;
  align-items: flex-end;
  margin-top: -15px;
  gap: 40px;
}
.revolutionisingReferralsItem {
  height: 200px;
  border: 3px solid #33bec7;
  border-radius: 10px;
  background: white;
  display: flex;
  flex-direction: column;
  font-size: 16px;
}
.revolutionisingReferralsItem.one {
  height: 240px;
}
.revolutionisingReferralsItem.two {
  height: 270px;
}
.revolutionisingReferralsItem.three {
  height: 300px;
}
.revolutionisingReferralsItem.four {
  height: 330px;
}
.revLogo {
  flex: 0 0 45%;
  align-self: center;
  padding-top: 30px;
}
.revLogo img {
  height: 70px;
  width: auto;
  object-fit: contain;
}
.revText {
  flex: 0 0 33%;
  text-align: center;
  padding: 0 5px 0 5px;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}
.quad-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 4;
}

/* Arrow under */
.arrowContainer {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 4;
}
.line-horizontal {
  height: 15px;
  border-radius: 10px;
  width: 102%;
}
.line-vertical,
.line-horizontal {
  position: relative;
  background: linear-gradient(90deg, #4d8af0, #33bec7);
}
.arrow-right::after,
.arrow-right::before {
  content: "";
  position: absolute;
  width: 45px;
  height: 14px;
  right: -2px;
  background-color: #33bec7;
  border-radius: 5px;
}
.arrow-right::after {
  top: -14px;
  transform: rotate(45deg);
}
.arrow-right::before {
  top: 14px;
  transform: rotate(-45deg);
}

/* Hide arrows on number input fields*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Tailwind Input CSS*/
.tailwindElement,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #33bec7; /* 2 */
}
::before,
::after {
  --tw-content: "";
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.left-0 {
  left: 0px;
}
.-top-1\.5 {
  top: -0.375rem;
}
.-top-1 {
  top: -0.25rem;
}
.flex {
  display: flex;
}
.h-full {
  height: 100%;
}
.w-full {
  width: 100%;
}
.grow {
  flex-grow: 1;
}
.select-none {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.rounded-\[7px\] {
  border-radius: 7px;
}
.border {
  border-width: 1px;
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-transparent {
  background-color: transparent;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-\[11px\] {
  font-size: 11px;
}
.font-normal {
  font-weight: 400;
}
.leading-tight {
  line-height: 1.25;
}
.outline {
  outline-style: solid;
}
.outline-0 {
  outline-width: 0px;
}
.transition {
  transition-property:
    color,
    background-color,
    border-color,
    fill,
    stroke,
    opacity,
    box-shadow,
    -webkit-text-decoration-color,
    -webkit-transform,
    -webkit-filter,
    -webkit-backdrop-filter;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke,
    opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke,
    opacity,
    box-shadow,
    transform,
    filter,
    backdrop-filter,
    -webkit-text-decoration-color,
    -webkit-transform,
    -webkit-filter,
    -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.before\:pointer-events-none::before {
  content: var(--tw-content);
  pointer-events: none;
}
.before\:mt-\[6\.5px\]::before {
  content: var(--tw-content);
  margin-top: 6.5px;
}
.before\:mr-1::before {
  content: var(--tw-content);
  margin-right: 0.25rem;
}
.before\:box-border::before {
  content: var(--tw-content);
  box-sizing: border-box;
}
.before\:block::before {
  content: var(--tw-content);
  display: block;
}
.before\:h-1\.5::before {
  content: var(--tw-content);
  height: 0.375rem;
}
.before\:h-1::before {
  content: var(--tw-content);
  height: 0.25rem;
}
.before\:w-2\.5::before {
  content: var(--tw-content);
  width: 0.625rem;
}
.before\:w-2::before {
  content: var(--tw-content);
  width: 0.5rem;
}
.before\:rounded-tl-md::before {
  content: var(--tw-content);
  border-top-left-radius: 0.375rem;
}
.before\:border-t::before {
  content: var(--tw-content);
  border-top-width: 1px;
}
.before\:border-l::before {
  content: var(--tw-content);
  border-left-width: 1px;
}
.before\:transition-all::before {
  content: var(--tw-content);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.after\:pointer-events-none::after {
  content: var(--tw-content);
  pointer-events: none;
}
.after\:mt-\[6\.5px\]::after {
  content: var(--tw-content);
  margin-top: 6.5px;
}
.after\:ml-1::after {
  content: var(--tw-content);
  margin-left: 0.25rem;
}
.after\:box-border::after {
  content: var(--tw-content);
  box-sizing: border-box;
}
.after\:block::after {
  content: var(--tw-content);
  display: block;
}
.after\:h-1\.5::after {
  content: var(--tw-content);
  height: 0.375rem;
}
.after\:h-1::after {
  content: var(--tw-content);
  height: 0.25rem;
}
.after\:w-2\.5::after {
  content: var(--tw-content);
  width: 0.625rem;
}
.after\:w-2::after {
  content: var(--tw-content);
  width: 0.5rem;
}
.after\:flex-grow::after {
  content: var(--tw-content);
  flex-grow: 1;
}
.after\:rounded-tr-md::after {
  content: var(--tw-content);
  border-top-right-radius: 0.375rem;
}
.after\:border-t::after {
  content: var(--tw-content);
  border-top-width: 1px;
}
.after\:border-r::after {
  content: var(--tw-content);
  border-right-width: 1px;
}
.after\:transition-all::after {
  content: var(--tw-content);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.placeholder-shown\:border:-ms-input-placeholder {
  border-width: 1px;
  border-color: blue;
}
.placeholder-shown\:border:placeholder-shown {
  border-width: 1px;
  border-color: #868686;
}
.focus\:border-2:focus {
  border-width: 2px;
}
.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: #33bec7;
}
.focus\:border-t-transparent:focus {
  border-top-color: transparent;
}
.focus\:outline-0:focus {
  outline-width: 0px;
}
.disabled\:border-0:disabled {
  border-width: 0px;
}
.peer:-ms-input-placeholder ~ .peer-placeholder-shown\:text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.peer:placeholder-shown ~ .peer-placeholder-shown\:text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.peer:-ms-input-placeholder ~ .peer-placeholder-shown\:leading-\[3\.75\] {
  line-height: 4;
}
.peer:placeholder-shown ~ .peer-placeholder-shown\:leading-\[3\.75\] {
  line-height: 4;
}
.peer:-ms-input-placeholder
  ~ .peer-placeholder-shown\:before\:border-transparent::before {
  content: var(--tw-content);
  border-color: transparent;
}
.peer:placeholder-shown
  ~ .peer-placeholder-shown\:before\:border-transparent::before {
  content: var(--tw-content);
  border-color: transparent;
}
.peer:-ms-input-placeholder
  ~ .peer-placeholder-shown\:after\:border-transparent::after {
  content: var(--tw-content);
  border-color: transparent;
}
.peer:placeholder-shown
  ~ .peer-placeholder-shown\:after\:border-transparent::after {
  content: var(--tw-content);
  border-color: transparent;
}
.peer:focus ~ .peer-focus\:text-\[11px\] {
  font-size: 11px;
}
.peer:focus ~ .peer-focus\:leading-tight {
  line-height: 1.25;
}
.peer:focus ~ .peer-focus\:text-blue-500 {
  --tw-text-opacity: 1;
  color: #33bec7;
}
.peer:focus ~ .peer-focus\:before\:border-t-2::before {
  content: var(--tw-content);
  border-top-width: 2px;
}
.peer:focus ~ .peer-focus\:before\:border-l-2::before {
  content: var(--tw-content);
  border-left-width: 2px;
}
.peer:focus ~ .peer-focus\:before\:border-blue-500::before {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: #33bec7;
}
.peer:focus ~ .peer-focus\:after\:border-t-2::after {
  content: var(--tw-content);
  border-top-width: 2px;
}
.peer:focus ~ .peer-focus\:after\:border-r-2::after {
  content: var(--tw-content);
  border-right-width: 2px;
}
.peer:focus ~ .peer-focus\:after\:border-blue-500::after {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: #33bec7;
}
.peer:disabled ~ .peer-disabled\:text-transparent {
  color: transparent;
}
.peer:disabled ~ .peer-disabled\:before\:border-transparent::before {
  content: var(--tw-content);
  border-color: transparent;
}
.peer:disabled ~ .peer-disabled\:after\:border-transparent::after {
  content: var(--tw-content);
  border-color: transparent;
}

/* Radio Toggle CSS*/
.switch-field {
  font-family: "Avenir", sans-serif;
  padding: 0px;
  overflow: hidden;
  padding-left: 40px;
}
.switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}
.switch-field label {
  display: inline-block;
  width: 50px;
  background-color: #eaeae9;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  text-shadow: none;
  padding: 6px 6px;
  transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
  cursor: pointer;
}
.switch-field input:checked + label {
  background-color: #33bec7;
  color: #fff;
  box-shadow: none;
  font-weight: bold;
}
.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}

/* Employee rating badge */
.ratingBadge {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 15px;
  border-radius: 100px;
  background: #ffffff;
}
.ratingBadge .stars {
  width: 135px;
  height: auto;
  margin-left: 15px;
}

/* Client Banner */
.clientBanner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 5px;
}
.clientBanner .clientLogo {
  height: 50px;
  width: auto;
  object-fit: contain;
  margin-right: 60px;
}
.clientBanner .clientLogo:last-child {
  margin-right: 0;
}

.imageContainer {
  text-align: center;
}

.approachPoint {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  text-align: left;
}
.approachPoint .bullet {
  min-height: 20px;
  min-width: 20px;
  border: 3px solid #33bec7;
  border-radius: 50%;
  margin-right: 20px;
}

/* ATS Banner */
.atsBanner {
  display: grid;
  grid-column-gap: 30px;
  grid-row-gap: 60px;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  margin-bottom: 40px;
}
.atsBanner .atsLogo {
  height: 50px;
  object-fit: contain;
}
.clientBanner .clientLogo:last-child {
  margin-right: 0;
}

/* CTA Cards */
.tryCTA {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  padding: 20px 30px 20px 0;
  max-width: 1000px;
  margin: 120px auto 0px auto;
}
.tryCTA .tryCTAGraphic {
  height: 320px;
  width: auto;
  object-fit: contain;
}
.tryCTA .tryCTAGraphicMobile {
  display: none;
}
.tryCTA .tryCTALeft {
  margin-left: 110px;
  line-height: 35px;
}
.cultureCTA {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  padding: 40px 30px;
  max-width: 1000px;
  margin: 70px auto;
  min-height: 320px; /* Ensure consistent height for both boxes */
}

/* Specific styling for the award and referral health sections to reduce spacing */
.featurePadding.awardSection {
  padding-bottom: 40px;
}

.featurePadding.referralHealthSection {
  padding-top: 70px;
  padding-bottom: 120px;
}

.featurePadding.referralHealthSection .cultureCTALeft {
  margin-left: 110px;
  line-height: 35px;
  min-height: 180px; /* Force consistent content height */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cultureCTA .cultureCTAGraphic {
  height: 160px;
  width: auto;
  object-fit: contain;
}
.cultureCTA .cultureCTALeft {
  margin-left: 110px;
  line-height: 35px;
}
.cultureCTABlueBlob {
  position: absolute;
  bottom: 0;
  right: 0;
}
.cultureCTAGreenBlob {
  position: absolute;
  top: 0;
  right: 0;
}

.altSectionText {
  font-size: 36px;
  margin-bottom: 20px;
  line-height: 60px;
}
.kpmgLarge {
  height: 100px;
  width: auto;
  object-fit: contain;
}

.complianceIcon,
.headsetIcon {
  height: 220px;
  width: auto;
  object-fit: contain;
}

.tryHireUpModal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.tryHireUpModal .tryHireUpGraphic {
  height: 150px;
  width: auto;
  object-fit: contain;
  margin-bottom: 50px;
}
.tryPreviewImage {
  height: 550px;
  width: auto;
  object-fit: contain;
}

.GDRPtext {
  font-size: 12px;
  text-align: center;
  line-height: 22px;
  margin: auto;
  max-width: 720px;
}
.GDRPTextAlt {
  font-size: 12px;
  text-align: left;
  line-height: 22px;
  max-width: 720px;
}

.pricingBlueBlob {
  position: absolute;
  height: 140px;
  right: -65px;
  bottom: -30px;
}
.pricingGreenBlob {
  position: absolute;
  height: 110px;
  width: auto;
  left: -55px;
  top: -25px;
}

.dogLogo {
  width: 400px;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
  max-width: 100%;
}

/* Region Select */
.regionBlock {
  display: flex;
  align-items: center;
  border: 2px solid #eaeae9;
  border-radius: 15px;
  padding: 10px;
}
.regionBlock img {
  height: 50px;
  margin-right: 20px;
}

/* Filo Demo */
.filoDemoPhoneContainer {
  width: 300px;
  height: 622px;
  background-color: white;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  padding: 3px;
  font-family: "Avenir", sans-serif;
  font-weight: 300;
}
.filoDemoHeader {
  flex: 0.1;
  background: linear-gradient(to right, #41a8a4, #4294b5);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.phoneHeaderStatusBar {
  display: flex;
  flex-direction: row;
  padding: 10px 10px 10px 10px;
  justify-content: space-between;
  align-items: center;
}
.phoneStatusIconContainer {
}
.phoneHeaderStatusBar .time {
  font-size: 12px;
  color: white;
  font-weight: 500;
  padding-left: 15px;
}
.phoneHeaderStatusBar .signal {
  height: 10px;
  width: auto;
}
.phoneHeaderStatusBar .wifi {
  height: 10px;
  width: auto;
  padding-left: 5px;
}
.phoneHeaderStatusBar .battery {
  height: 10px;
  width: auto;
  padding-left: 5px;
}
.phoneHeaderBody {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 8px;
}
.phoneHeaderBody .close {
  height: 15px;
  width: auto;
  padding-left: 5px;
}
.phoneHeaderBody .headerTitle {
  color: white;
  font-weight: 500;
}

.filoDemoBody {
  display: flex;
  flex: 0.9;
  background-color: #f2f2f2;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none;
}
.filoDemoBody::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}
.filoDemoBodyInnerContainer {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}
.filoChatContainer {
  display: flex;
  padding: 5px 10px 5px 10px;
  align-items: flex-end;
}
.userChatContainer {
  display: flex;
  padding: 5px 10px 5px 10px;
  align-items: flex-end;
  margin-top: 10px;
}
.filoIconContainer {
  flex: 0.15;
  margin-right: 10px;
}
.userIconContainer {
  flex: 0.15;
  margin-left: 10px;
  background-color: #e0e7fe;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
  width: auto;
  border-radius: 35px;
}
.filoChatBubble {
  flex: 0.85;
  font-size: 12px;
  background: #d6f2f3;
  padding: 10px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 2px;
  border-top-left-radius: 12px;
  text-align: left;
}
.userChatBubble {
  flex: 0.85;
  font-size: 12px;
  background: #ffffff;
  padding: 10px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 12px;
  border-top-left-radius: 12px;
  text-align: left;
}
.userNameInitial {
  color: #6586fb;
  font-weight: 700;
  font-size: 20px;
  font-family: sans-serif;
}
.filobot {
  width: 30px;
  height: auto;
}

.userInputContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 15px;
  font-family: "Avenir";
  margin-bottom: 20px;
}
.userInputContainer textarea {
  resize: none;
  border-radius: 10px;
  border: 1px solid gainsboro;
  flex: 0.95;
  padding-left: 5px;
  min-height: 44px;
  max-height: 100px;
  height: 35px;
}
.userInputContainer .filoInputLineHeight {
  line-height: 38px;
}
.userInputContainer .filoInputPadding {
  padding-top: 12px;
}
.userInputContainer .sendButtonContainer {
  flex: 0.15;
}
.userInputContainer .sendInputIcon {
  height: 25px;
  width: auto;
  padding-left: 5px;
}

.jobCard {
  background: white;
  margin: 10px;
  border-radius: 10px;
  display: flex;
  flex: 1;
  flex-direction: row;
  padding: 10px;
  justify-content: space-between;
  align-items: center;
}
.jobContentLeftContainer {
  display: flex;
}
.jobContentLeft {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.jobTitle {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
  text-align: left;
}
.jobLocation {
  font-size: 10px;
  color: #b1b1b1;
  text-align: left;
  margin-bottom: 10px;
}
.locationIcon {
  height: 10px;
  width: auto;
  padding-right: 10px;
}
.jobDepartment {
  font-size: 10px;
  color: #b1b1b1;
  text-align: left;
}
.departmentIcon {
  height: 10px;
  width: auto;
  padding-right: 10px;
}
.chevronRight {
  height: 20px;
  width: auto;
  padding-left: 5px;
}

.typing {
  width: 57px;
  height: 30px;
  position: relative;
  padding: 10px;
  margin-left: 5px;
  background: #d6f2f3;
  border-radius: 20px;
}
.typing__dot {
  float: left;
  width: 6px;
  height: 6px;
  margin: 0 3px;
  background: #000000;
  border-radius: 50%;
  opacity: 0;
  animation: loadingFade 1s infinite;
}
.typing__dot:nth-child(1) {
  animation-delay: 0s;
}
.typing__dot:nth-child(2) {
  animation-delay: 0.2s;
}
.typing__dot:nth-child(3) {
  animation-delay: 0.4s;
}

.userInputContainer textarea {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}
.userInputContainer textarea::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

.filoDemoContainer {
  display: flex;
  align-items: flex-end;
}
.filoDemoPositioning {
  display: flex;
  justify-content: flex-end;
}
.filotrymecontainer {
  margin-bottom: -27px;
  margin-left: 10px;
  display: flex;
  align-items: center;
}
.filotrymecontainer span {
  font-size: 28px;
  font-weight: 500;
  padding-left: 10px;
}

.filotrymecontainermobile {
  display: none;
}
.filotrymecontainermobile span {
  font-size: 28px;
  font-weight: 500;
  padding-left: 10px;
}

.filotrymearrow {
  margin-left: 10px;
  font-size: 26px;
  font-weight: bold;
}
.filoUserInputError {
  font-size: 12px;
  font-weight: "400";
  color: #fd6266;
}

@keyframes loadingFade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}

.pageSection.pricingPageHeader {
  height: auto;
  position: relative;
  width: 100%;
  overflow: visible;
  padding: 60px 0 5px;
  min-height: auto;
  margin-bottom: 0;
}

.contact-sales-modal {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  border: none !important;
  background: white !important;
  overflow: auto !important;
  border-radius: 10px !important;
  outline: none !important;
  padding: 30px !important;
}

.contact-sales-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  z-index: 9999 !important;
}

/* NEW Reusable Button Styles */
.reusable-button {
  display: inline-block;
  border-radius: 30px;
  padding: 12px 25px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-right: 20px;
}

.reusable-button-primary {
  background: linear-gradient(to right, #fd6266, #fb6592);
  color: white;
  border: none;
}

.reusable-button-secondary {
  background-color: transparent;
  color: #fd6266;
  border: 2px solid #fd6266;
}

.reusable-button-secondary:hover {
  background-color: #fd6266;
  color: white;
}

.reusable-button-text {
  font-size: 16px;
  font-weight: bold;
}

.reusable-button-primary .reusable-button-text {
  color: white;
}

.reusable-button-secondary:hover .reusable-button-text {
  color: white;
}

/* Simple Steps to Success Section */
.simpleStepsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 40px;
}

.simpleStepCard {
  background: white;
  border-radius: 20px;
  padding: 40px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.simpleStepCard:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.simpleStepNumber {
  color: #000000;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  display: block;
}

.simpleStepTitle {
  color: #000000;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

/* HubSpot Form Modal Styles */
.hubspot-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.hubspot-modal {
  background: white;
  border-radius: 10px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.hubspot-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid #e9ecef;
}

.hubspot-modal-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #000000;
}

.hubspot-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.hubspot-modal-close:hover {
  background-color: #f8f9fa;
  color: #000000;
}

.hubspot-modal-body {
  padding: 30px;
}

#hubspot-form-container,
#hubspot-form-container-companies {
  min-height: 400px;
  width: 100%;
}

#hubspot-form-container iframe,
#hubspot-form-container-companies iframe {
  width: 100% !important;
  min-height: 400px !important;
}

/* Responsive styles for HubSpot modal */
@media (max-width: 768px) {
  .hubspot-modal {
    width: 95%;
    margin: 20px;
  }
  
  .hubspot-modal-header {
    padding: 15px 20px;
  }
  
  .hubspot-modal-header h2 {
    font-size: 20px;
  }
  
  .hubspot-modal-body {
    padding: 20px;
  }
}

/* Register button styling for super connectors page */
.getStartedRegisterButton {
  background-color: #ffffff;
  color: #ff6b8a;
  padding: 18px 40px;
  border: 2px solid #ff6b8a;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 20px rgba(255, 107, 138, 0.3);
  text-decoration: none;
  display: inline-block;
  margin-top: 15px;
  width: 280px;
  text-align: center;
}

.getStartedRegisterButton:hover {
  background-color: #ff6b8a;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 138, 0.4);
}