@font-face {
  font-family: AtillaSansClassic;
  src: url("../assets/AttilaSansClassicTrial-Regular.otf");
}

@font-face {
  font-family: No3Series;
  src: url("../assets/No3SeriesNarrow-RegularTrial.otf");
}

.hello {
  width: 100%;
  top: 0;
  left: 0;
  font-family: No3Series !important;
  font-size: 35rem;
  font-weight: normal;
  font-family: var(--header-xl);
  color: var(--color-black);
  text-align: center;
  display: inline-block;
}

.uccesful-brands-have {
  text-transform: lowercase;
}
.succesful-brands-have-container {
  align-self: stretch;
  height: 90px;
  position: relative;
  line-height: 120%;
  display: inline-block;
  flex-shrink: 0;
}
.t-liberate-we {
  text-transform: lowercase;
}
.at-liberate-we-container {
  align-self: stretch;
  height: 150px;
  position: relative;
  line-height: 120%;
  display: inline-block;
  flex-shrink: 0;
}
.your-brands-niche {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 35px;
}
.his-tool-will {
  text-transform: lowercase;
}
.this-tool-will-container {
  align-self: stretch;
  height: 90px;
  position: relative;
  line-height: 120%;
  display: inline-block;
  flex-shrink: 0;
}
.at-liberate {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 31px;
}
.frame-child {
  height: 83.5px;
  width: 7.4px;
  position: relative;
}

.home-button {
  width: 290px;
  flex-shrink: 0;

  border-radius: 50px;
  border: 1px solid #000;

  /* Additional styles to ensure text and content alignment */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;

  /* Resetting default button styles */
  background: none;
  padding: 0;
  margin: 0 auto; /* Additional centering for the buttons if needed */
  display: block; /* Makes the button a block element to allow margin auto to work */
  outline: none;
}

.home-button:hover {
  background-color: #000; /* New background color on hover */
  color: #e4e8dd; /* New text color on hover */
}

.brand-understanding-inner {
  align-self: stretch;
  height: 83.5px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 0 24px 0 var(--padding-xl);
  box-sizing: border-box;
}
.brand-understanding,
.frame-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 105px;
}
.frame-parent {
  padding: 0 0 81.5px;
  gap: 159.19999999999982px;
  text-align: center;
  font-size: var(--cta-link-size);
  color: var(--color-black);
  font-family: var(--cta-link);
}
.before-we-begin {
  margin: 0;
  height: 135px;
  flex: 1;
  position: relative;
  font-size: inherit;
  line-height: 35px;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  width: 100%;
  text-align: left;
}
.before-we-begin-who-are-you-f-wrapper {
  width: 320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 13px;
  box-sizing: border-box;
  font-size: var(--body-large-size);
  color: var(--color-black);
  font-family: var(--cta-link);
}
.myself {
  height: 30px;
  flex: 1;
  position: relative;
  line-height: 120%;
  display: inline-block;
}
.frame-item {
  height: 62px;
  width: 290px;
  position: relative;
  box-sizing: border-box;
  display: none;
}
.frame-inner,
.frame-item,
.myself-parent {
  border-radius: var(--br-31xl);
  border: 1px solid var(--color-black);
}
.myself-parent {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-2xl) 0 var(--padding-2xs);
  z-index: 1;
}
.frame-inner {
  height: 62px;
  width: 290px;
  position: relative;
  background-color: var(--color-black);
  box-sizing: border-box;
  display: none;
}
.a-friend {
  height: 30px;
  flex: 1;
  position: relative;
  line-height: 120%;
  display: inline-block;
  z-index: 1;
}
.frame-container,
.rectangle-parent {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.rectangle-parent {
  border-radius: var(--br-31xl);
  background-color: var(--color-black);
  border: 1px solid var(--color-black);
  flex-direction: row;
  padding: var(--padding-2xl) 0 var(--padding-2xs);
  white-space: nowrap;
  color: var(--color-linen);
}
.frame-container {
  flex-direction: column;
  gap: 20px;
  text-align: center; /* Centers the content horizontally */
}
.next {
  align-self: stretch;
  height: 30px;
  position: relative;
  text-decoration: underline;
  display: inline-block;
  flex-shrink: 0;
  border: none;
  background-color: inherit;
  font-family: var(--cta-link);
  font-size: 20px;
}
.frame-group {
  flex: 1;
  flex-direction: column;
  gap: 237px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* This makes sure it takes the full height of the viewport */
}
.frame-group,
.intro-mobile-lex,
.intro-mobile-lex-inner {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.intro-mobile-lex-inner {
  align-self: stretch;
  flex-direction: row;
  padding: 0 31px 0 27px;
  text-align: center;
  font-size: var(--cta-link-size);
  color: var(--color-black);
  font-family: var(--cta-link);
}
.intro-mobile-lex {
  width: 100%;
  position: relative;
  background-color: var(--color-linen);
  overflow: hidden;
  flex-direction: column;
  box-sizing: border-box;
  letter-spacing: normal;
}

/*strengths.html */
.your-strengths {
  margin: 0;
  align-self: stretch;
  height: 182px;
  position: relative;
  font-size: inherit;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  color: white;
}
.your-strengths-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-4xs) 0 0;
}
.page-number {
  height: 108px;
  width: 26px;
  position: relative;
  font-size: var(--font-size-61xl);
  display: inline-block;
  flex-shrink: 0;
  min-width: 26px;
  color: white;
}
.strength-group {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 56px;
  text-align: left;
  font-size: var(--header-medium-size);
  color: var(--color-white);
}
.first-we-would {
  margin: 0;
  height: 135px;
  flex: 1;
  position: relative;
  font-size: inherit;
  line-height: 35px;
  font-weight: 400;
  font-family: inherit;
  display: inline-block;
  color: white;
}
.question-wrapper,
.strength-parent {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}
.question-wrapper {
  width: 332px;
  flex-direction: row;
  padding: 0 19px;
  box-sizing: border-box;
}
.strength-parent {
  align-self: stretch;
  flex-direction: column;
  gap: 136px;
  text-align: left;
  font-size: var(--body-large-size);
  color: var(--color-white);
  font-family: var(--cta-link);
}
.next {
  height: 30px;
  flex: 1;
  position: relative;
  text-decoration: underline;
  display: inline-block;
}
.next--alt {
  color: white;
}
.next-wrapper,
.strengths {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.next-wrapper {
  align-self: stretch;
  flex-direction: row;
  padding: 0 var(--padding-34xl) 0 47px;
}
.strengths {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  padding: 16px var(--padding-mid) var(--padding-24xl) 23px;
  box-sizing: border-box;
  gap: 381px;
  letter-spacing: normal;
  text-align: center;
  font-size: var(--cta-link-size);
  font-family: var(--cta-link);
}

.strengths-background {
  background-color: black;
  color: white; /* It's a good practice to set a contrasting text color */
}

.question-background {
  background-color: #ad9a86;
  color: black;
}

.black--number {
  color: #000;
}

.option-button.selected {
  background-color: #333;
  color: #fff;
}

#next {
  align-self: stretch;
  height: 30px;
  position: relative;
  text-decoration: underline;
  display: inline-block;
  flex-shrink: 0;
  border: none;
  background-color: inherit;
  font-family: var(--cta-link);
  font-size: 20px;
}

#profile-result {
  padding: 20px;
  margin: 20px;
  background-color: #f0f0f0; /* Light grey background */
  color: #333; /* Dark text for readability */
  border-radius: 8px; /* Rounded corners */
}

@media screen and (max-width: 348px) {
  .your-brands-niche {
    gap: 17px 35px;
  }
  .at-liberate {
    gap: 15px 31px;
  }
  .brand-understanding {
    gap: 52px 105px;
  }
  .frame-parent {
    gap: 80px 159.19999999999982px;
  }
}
@media screen and (max-width: 290px) {
  .frame-group {
    gap: 118px 237px;
  }
}
.brand-understanding p {
  margin-bottom: 20px; /* Adjust as needed for spacing */
  /* Add any additional styling here */
}

.arrow {
  width: 7.4px;
  height: 83.5px;
  /* Remove position, top, left, and transform properties */
}
/* This ensures the content is aligned as it is on mobile screens by default */
.brand-understanding {
  text-align: center; /* or your default alignment */
}

.arrow {
  position: relative; /* Change position to relative */
  margin: auto; /* Center the image */
  display: block; /* Change display to block */
  top: 0;
  left: 0;
  transform: none; /* Remove transform */
}
.myself:hover,
.a-friend:hover {
  background-color: #f0f0f0; /* Light grey background on hover */
  cursor: pointer; /* Changes the cursor to a pointer to indicate it's clickable */
}

/* Ensure buttons keep the original styling from the div */
.myself,
.a-friend {
  border: none; /* Removes the default button border */
  outline: none; /* Removes the outline on focus for a clean look */
  background: none; /* Keeps the background transparent or set to whatever it was */
  padding: 0; /* Adjust padding as needed, this removes default padding */
  margin: 0; /* Adjust margin as needed, this removes default margin */
  /* Add any other styles here to match the original div styling */
}
.myself-parent,
.rectangle-parent {
  border: none; /* Removes the default button border */
  outline: none; /* Removes the outline on focus for a clean look */
  background: none; /* Keeps the background transparent or set to whatever it was */
  padding: 0; /* Adjust padding as needed, this removes default padding */
  margin: 0; /* Adjust margin as needed, this removes default margin */
  width: 100%; /* Ensures the button takes full width, adjust as needed */
  cursor: pointer; /* Changes the cursor to a pointer to indicate it's clickable */
  /* Add any other styles here to match the original div styling */
}

.myself-parent:hover,
.rectangle-parent:hover {
  background-color: #f0f0f0; /* Light grey background on hover, adjust as needed */
}