:root {
  --black: black;
  --black-text: black;
  --white:#c3c9ff; 
  --white-text:white; 


  --smoky-white: #ededf1;
  --smoky-white-text: #ededf1;
  --smoky-white-bg: #ededf1;
  --light-green: #d9f9e6;
  --green: #2f9461;
  
  --ctared-hover: rgba(104, 42, 56, 0.8);
  --ctared: rgb(243, 65, 65);
  --grey-purple: #b2aebf;
  --grey-purple-text: #b2aebf;

  --dark-purple3: #8880a7;
  --dark-purple2: #4f4770;
  --dark-purple2-text: #4f4770;

  --dark-purple: #2f2b43;
  --dark-purple-text: #2f2b43;
  --darker-purple: rgba(47, 43, 67, .1);
  --darker-purple-text: rgba(47, 43, 67, .1);
  --orange: #ff4d00;
  
 
  /*DARK COLORS  */
  --dark-black: #e8e6e3;  /* Black becomes a light gray in dark mode for text */
  --dark-black-text: #e8e6e3;  /* Black becomes a light gray in dark mode for text */
  --dark-white: #181a1b;  /* White becomes a very dark gray in dark mode for backgrounds */
  --dark-white-text: #d8d5cf;  /* White becomes a very dark gray in dark mode for backgrounds */

  --dark-smoky-white: #212425;  /* A bit darker than dark-white */
  --dark-smoky-white-text: #dedbd7;
  --dark-smoky-white-bg: #dedbd7;

  --dark-light-green: #0b432a;  /* Slightly saturated version */
  --dark-green: ##71d2a1;;  /* Slightly darker version */
  
  --dark-ctared-hover: rgba(104, 42, 56, 0.8);  /* Less opacity for a softer hover */
  --dark-ctared: #a20a0a;  /* A more subdued red for less contrast in dark mode */
  
  --dark-grey-purple: #414649;  /* A tad lighter for better contrast against dark backgrounds */
  --dark-grey-purple-text: #bab4ab;

  --dark-dark-purple3: #504a6a;  /* Made lighter for contrast */
  --dark-dark-purple2: #3f395a;
  --dark-dark-purple2-text: #aea79d;  /* Adjusted for better visibility */

  --dark-dark-purple: #262236;
  --dark-dark-purple-text: #c5c0b9;  /* This one can stay as it's already dark */

  
  --dark-darker-purple: rgba(47, 43, 67, .3);  /* Increasing the opacity a bit to make it more visible */
  --dark-border-darker-purple: rgba(122, 113, 100, 0.1);
  --dark-orange: #ff9700;
  --dark-orange-text: #ff5f1a;  /* Keeping orange consistent as it's already vibrant */

  --darkreader-text--black:#e8e6e3 ;
  
}
/* SVG icon */
body.dark-mode {
  --black: var(--dark-black);
  --black-text: var(--dark-black-text);
  --white: var(--dark-white);
  --white-text: var(--dark-white-text);

  --smoky-white: var(--dark-smoky-white);
  --smoky-white-text: var(--dark-smoky-white-text);
  --smoky-white-bg: var(--dark-smoky-white-bg);

  --light-green: var(--dark-light-green);
  --green: var(--dark-green);
  --ctared-hover: var(--dark-ctared-hover);
  --ctared: var(--dark-ctared);
  --grey-purple: var(--dark-grey-purple);
  --grey-purple-text: var(--dark-grey-purple-text);  


  --dark-purple3: var(--dark-dark-purple3);
  --dark-purple2: var(--dark-dark-purple2); 
  --dark-purple2-text: var(--dark-dark-purple2-text);


  --dark-purple: var(--dark-dark-purple); 
  --dark-purple-text: var(--dark-dark-purple-text); 
  --darker-purple: var(--dark-darker-purple); 
  --orange:var(--dark-orange);
  scrollbar-color: #454a4d #202324;
  transition: color 0.2s ease;
  /* ... other variable reassignments for dark mode ... */
}
body.dark-mode svg.icon path {
  fill: #efefef;
}
/* Font icon (using Font Awesome as an example) */
body.dark-mode .fas {
  color: var(--smoky-white-bg);
}
*.dark-mode {
  scrollbar-color: #454a4d #202324;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  
  text-align: -webkit-center;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  min-height: 100%;
  margin: auto;
  text-align: center;
  z-index: -1;
  
  overflow-x: hidden;
}
element {
  max-width: 100%;
}
.hero {
  width: 100%;
  
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  
  align-items: center;

  min-height: 100vh;
  
}
.tab-base:hover {
  background-color: var(--grey-purple);
}
.FREE p {
  font-size: 2rem;
  color: var(--white-text); /* White text color for the message */
  font-weight: bold;
  text-align: center;
  rotate: -15deg;
}
.faq-background {
  padding: 7.5rem;
  max-width: 90rem;
  text-align: left;
}
.navbar {
  width: 100%;
  height: 4rem;
  max-width: 90rem;
  grid-column-gap: .625rem;
  grid-row-gap: .625rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem 7.5rem;
  display: flex;
}
.menu-button {
  display: none;
}
.faq-background {
  color: var(--smoky-white-text);
}
.userProfile {
  color: var(--black-text);
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  margin: 1rem;
  margin-top: 4rem;
}
.container {
  width: 100%;
  grid-column-gap: 5.25rem;
  grid-row-gap: 5.25rem;
  flex-wrap: nowrap;
  justify-content: center;
  align-self: auto;
  align-items: center;
  display: flex;
  flex: 1;
}

.astrigot {
  grid-column-gap: .625rem;
  grid-row-gap: .625rem;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}



.navgation {
  width: 100%;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: center;
  align-items: center;
  display: flex;
}

.label {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-button {
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  flex: 0 auto;
  text-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.label-2 {
  color: var(--dark-purple-text);
  text-align: center;
  letter-spacing: -.01em;
  flex: none;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
  transition: 250ms ease-in-out;
}

.vectors-wrapper {
  width: 1.25rem;
  height: 1.25rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.actions {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-direction: row;
  flex: none;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.label-3 {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex: 0 auto;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.button {
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  background-color: var(--white);
  border: .0625rem solid var(--darker-purple);
  border-radius: .5rem;
  flex: none;
  justify-content: flex-end;
  align-self: auto;
  align-items: center;
  padding: .375rem .75rem;
  text-decoration: none;
  display: flex;
  box-shadow: inset 0 -0.0625rem var(--darker-purple), 0 .0625rem .1875rem var(--darker-purple);
}

.label-4 {
  color: var(--black-text);
  text-align: center;
  letter-spacing: -.01em;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.25rem;
  display: block;
}
.container-about {
  max-width: 90rem;
  flex: 1;
  padding: 1rem;
}
.section {
  width: 100%;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  justify-content: center;
  align-items: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: flex;
}

.container-2 {
  width: 100%;
  max-width: 75rem;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.container-3 {
  width: 100%;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}



.caption-1-500---medium {
  color: var(--orange);
  text-align: center;
  letter-spacing: -.01em;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.container-4 {
  width: 100%;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.design-system-for-figma-framer {
  color: var(--dark-purple-text);
  letter-spacing: -.02em;
  font-size: 4rem;
  font-weight: 400;
  line-height: 4.25rem;
  text-align: left;
}

.subheadline-400---regular {
  color: var(--dark-purple-text);
  letter-spacing: -.014em;
  text-align: left;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75rem;
}

.form {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  flex: 0 auto;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.button-2 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: var(--ctared);
  border-radius: .75rem;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: .75rem 1rem;
  text-decoration: none;
  display: flex;
  box-shadow: inset 0 -0.0625rem var(--darker-purple), 0 .0625rem .1875rem var(--darker-purple);
}
.button-2, .button-3 {
  transition: 250ms ease-in-out;
}
.button-2:hover, .button-3:hover, .button-8:hover {
  background-color: var(--ctared-hover);
  translate: 0px -3px;
  
}

.container-5 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.body-2-500---medium {
  color: var(--white-text);
  text-align: center;
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.container-6 {
  width: 100%;
  height: 36.75rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex-direction: column;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.placeholder {
  object-fit: cover;
  border-radius: 18.375rem;
  flex: none;
}
.text {
  font-family: 'poppins', sans-serif;
  
}
.astrigot-0 {
  
  color: var(--orange);
  letter-spacing: -.045em;
  font-size: 1.5625rem;
  font-weight: 700;
  line-height: 120%;
  font-size: 2.5rem;
  font-family: 'poppins', sans-serif;
}

.astrigot-1 {
  opacity: 1;
  color: var(--black-text);
  letter-spacing: -.045em;
  font-family: 'poppins', sans-serif;
  font-size: 1.5625rem;
  font-weight: 700;
  line-height: 120%;
  font-size: 2.5rem;
}

.design-system-for-figma-framer-1 {
  color: var(--dark-purple-text);
  letter-spacing: -.02em;
  font-size: 4rem;
  font-weight: 700;
  line-height: 4.25rem;
}

.features {
  width: 100%;
  
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  background-color: var(--dark-purple2);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.section-headers {
  width: 100%;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 4rem;
  display: flex;
  
}

.container-7 {
  width: 100%;
  
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  background: var(--dark-purple2);
  
}

.container-8 {
  width: 100%;
  max-width: 55.5rem;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  padding-top:3rem;
}

.badge-2 {
  height: 2rem;
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  background-color: var(--light-green);
  border-radius: 1.25rem;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding-left: .5rem;
  padding-right: .5rem;
  display: flex;
}

.caption-1-500---medium-2 {
  color: var(--green);
  text-align: center;
  letter-spacing: -.01em;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.container-9 {
  width: 100%;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.build-your-website-with-blank {
  color: var(--smoky-white-text);
  text-align: center;
  letter-spacing: -.02em;
  font-size: 3rem;
  font-weight: 400;
  line-height: 3.375rem;
}

.body-1-400---regular {
  color: var(--smoky-white-text);
  text-align: center;
  letter-spacing: -.012em;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.625rem;
}

.actions-2 {
  width: 100%;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.button-3 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: var(--ctared);
  border-radius: .75rem;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: .75rem 1rem;
  text-decoration: none;
  display: flex;
  box-shadow: inset 0 -0.0625rem var(--darker-purple), 0 .0625rem .1875rem var(--darker-purple);
}

.button-4 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: var(--white);
  
  border-radius: .75rem;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: .75rem 1rem;
  text-decoration: none;
  display: flex;
  box-shadow: inset 0 -0.0625rem var(--darker-purple), 0 .0625rem .1875rem var(--darker-purple);
  transition: 250ms ease-in-out;
}
.button-4-faq {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: var(--dark-purple2);
  color: var(--smoky-white-text);
  border-radius: .75rem;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: .75rem 1rem;
  text-decoration: none;
  display: flex;
  box-shadow: inset 0 -0.0625rem var(--darker-purple), 0 .0625rem .1875rem var(--darker-purple);
  margin: 15px 0px;
}

.body-2-500---medium-2 {
  color: var(--black-text);
  text-align: center;
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}
.body-2-500---medium-2-faq {
  color: var(--smoky-white-text);
  text-align: center;
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}


.section-2 {
  width: 100%;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: flex;
}

.container-10 {
  width: 100%;
  
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: center;
  
  display: flex;
}

.container-11 {
  width: 100%;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  background-color: var(--white);
  border: .0625rem solid var(--darker-purple);
  border-radius: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 1.5rem;
  display: flex;
}

.vectors-wrapper-2 {
  width: 3rem;
  height: 3rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.container-12 {
  width: 100%;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.design-system {
  color: var(--dark-purple2-text);
  text-align: center;
  letter-spacing: -.014em;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.error-4528608f-367a-4c72-1edd-de4d3dbf145b {
  color: var(--dark-purple-text);
  text-align: center;
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.375rem;
}

.build-your-website-with-blank-1 {
  color: var(--smoky-white-text);
  text-align: center;
  letter-spacing: -.02em;
  font-size: 3rem;
  font-weight: 700;
  line-height: 3.375rem;
}

.pricing {
  width: 100%;
  max-width: 90rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  background-color: var(--white);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.container-13 {
  width: 100%;
  max-width: 75rem;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.container-14 {
  width: 100%;
  max-width: 49.5rem;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.container-15 {
  width: 100%;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.h3-600---semi-bold {
  color: var(--dark-purple-text);
  text-align: center;
  letter-spacing: -.02em;
  font-size: 3rem;
  font-weight: 600;
  line-height: 3.375rem;
}

.body-1-400---regular-2 {
  color: var(--dark-purple-text);
  text-align: center;
  letter-spacing: -.012em;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.625rem;
}

.tabs {
  height: 3rem;
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  background-color: var(--smoky-white);
  border-radius: 1.5rem;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding: .25rem;
  display: flex;
}





/* other styles */

#btnControl {
  display: none;
}

#btnControl:checked + label > img {
  width: 70px;
  height: 74px;
}


.tab-base {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: var(--white);
  border-radius: 1.5rem;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: .5rem 1rem;
  display: flex;
  box-shadow: inset 0 -0.0625rem var(--darker-purple), 0 .0625rem .1875rem var(--darker-purple);
  transition: 250ms ease-in-out;
}

.body-2-500---medium-3 {
  color: var(--dark-purple-text);
  text-align: center;
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.tab-base-2 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  border-radius: 1.5rem;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: .5rem 1rem;
  display: flex;
}

.body-2-500---medium-4 {
  color: rgba(47, 43, 67, .6);
  text-align: center;
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.section-3 {
  width: 100%;
  max-width: 90rem;
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: flex;
}

.frame-4 {
  width: 100%;
  max-width: 75rem;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.pricing-2 {
  width: 100%;
  max-width: 24rem;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  background-color: var(--white);
  border: .0625rem solid var(--darker-purple);
  border-radius: 1.5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.5rem;
  display: flex;
}

.container-16 {
  width: 100%;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.container-17 {
  width: 100%;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.container-18 {
  width: 100%;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.h6-600---semi-bold {
  color: var(--dark-purple-text);
  letter-spacing: -.016em;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;
}

.body-2-400---regular {
  color: rgba(47, 43, 67, .6);
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.container-19 {
  width: 100%;
  grid-column-gap: .375rem;
  grid-row-gap: .375rem;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.h3-600---semi-bold-2 {
  color: var(--dark-purple-text);
  letter-spacing: -.02em;
  font-size: 3rem;
  font-weight: 600;
  line-height: 3.375rem;
}

.vectors-wrapper-3 {
  height: 6.25rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  display: flex;
}

.container-20 {
  width: 100%;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  justify-content:purple flex-start;
  align-items: flex-start;
  display: flex;
}
.h1-about, .p-about, .h2-about {
  color: var(--black-text)
}
.item {
  width: 100%;
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.check-line {
  object-fit: cover;
}

.body-2-500---medium-5 {
  color: var(--dark-purple-text);
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.button-5 {
  width: 100%;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: var(--white);
  border: .0625rem solid var(--darker-purple);
  border-radius: .75rem;
  justify-content: center;
  align-items: center;
  padding: .75rem 1rem;
  text-decoration: none;
  display: flex;
  box-shadow: inset 0 -0.0625rem var(--darker-purple), 0 .0625rem .1875rem var(--darker-purple);
}

.container-21 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.pricing-3 {
  width: 100%;
  max-width: 24rem;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  border: .0625rem solid var(--darker-purple);
  border-radius: 1.5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.5rem;
  display: flex;
}

.badge-3 {
  height: 1.5rem;
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  background-color: var(--white);
  border-radius: 1.25rem;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding-left: .5rem;
  padding-right: .5rem;
  display: flex;
}

.caption-1-500---medium-3 {
  color: var(--dark-purple-text);
  text-align: center;
  letter-spacing: -.01em;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.button-6 {
  width: 100%;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: var(--dark-purple);
  border-radius: .75rem;
  justify-content: center;
  align-items: center;
  padding: .75rem 1rem;
  text-decoration: none;
  display: flex;
  box-shadow: inset 0 -0.0625rem var(--darker-purple), 0 .0625rem .1875rem var(--darker-purple);
}

.body-2-500---medium-6 {
  color: var(--white-text);
  text-align: center;
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.pricing-4 {
  width: 100%;
  
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  background-color: var(--white);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.container-22 {
  width: 100%;
  max-width: 75rem;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.container-23 {
  width: 100%;
  max-width: 49.5rem;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.container-24 {
  width: 100%;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.h3-600---semi-bold-3 {
  color: var(--dark-purple-text);
  text-align: center;
  letter-spacing: -.02em;
  font-size: 3rem;
  font-weight: 600;
  line-height: 3.375rem;
}

.body-2-500---medium-7 {
  color: var(--dark-purple-text);
  text-align: center;
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.tab-base-3 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  border-radius: 1.5rem;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: .5rem 1rem;
  display: flex;
}

.body-2-500---medium-8 {
  color: rgba(47, 43, 67, .6);
  text-align: center;
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.section-4 {
  width: 100%;
  max-width: 90rem;
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: flex;
}

.pricing-5 {
  width: 100%;
  max-width: 24rem;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  background-color: var(--white);
  border: .0625rem solid var(--darker-purple);
  border-radius: 1.5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.5rem;
  display: flex;
  height: 28.88rem;
}

.container-25 {
  width: 100%;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.container-26 {
  width: 100%;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.container-27 {
  width: 100%;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.container-28 {
  width: 100%;
  grid-column-gap: .375rem;
  grid-row-gap: .375rem;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.vectors-wrapper-4 {
  height: 6.25rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  display: none;
}

.container-29 {
  width: 100%;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  flex-grow:1;
}

.body-2-500---medium-9 {
  color: var(--dark-purple-text);
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  text-align: left;
}

.button-7 {
  width: 100%;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: var(--white);
  border: .0625rem solid var(--darker-purple);
  border-radius: .75rem;
  justify-content: center;
  align-items: center;
  padding: .75rem 1rem;
  text-decoration: none;
  display: flex;
  box-shadow: inset 0 -0.0625rem var(--darker-purple), 0 .0625rem .1875rem var(--darker-purple);
  transition: 250ms ease-in-out;
}
.button-7:hover, .button-4:hover {
  background-color: var(--dark-purple3);
  
}
.button-7:hover, .button-7:hover > .container-30 > .body-2-500---medium-2,
.button-4:hover {
  color: var(--smoky-white-text);  
  translate: 0px -3px;
}
.container-30 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.pricing-6 {
  width: 100%;
  max-width: 24rem;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  background-color: #ff6d6d;
  background-image: radial-gradient(circle at 50% 0, #fcd6ff, #fde3ff 18%, white);
  border: .0625rem solid rgba(0, 0, 0, .1);
  border-radius: 1.5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.5rem;
  height: 28.88rem;
  display: flex;
}

.badge-4 {
  height: 1.5rem;
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  background-color: var(--white);
  border-radius: 1.25rem;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  padding-left: .5rem;
  padding-right: .5rem;
  display: flex;
}

.caption-1-500---medium-4 {
  color: var(--dark-purple-text);
  text-align: center;
  letter-spacing: -.01em;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.button-8 {
  width: 100%;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: var(--ctared);
  border-radius: .75rem;
  justify-content: center;
  align-items: center;
  padding: .75rem 1rem;
  text-decoration: none;
  display: flex;
  box-shadow: inset 0 -0.0625rem var(--darker-purple), 0 .0625rem .1875rem var(--darker-purple);
}

.body-2-500---medium-10 {
  color: var(--white-text);
  text-align: center;
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.features-2 {
  width: 100%;
  
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  background-color: var(--dark-purple2);
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.container-31 {
  width: 100%;
  max-width: 75rem;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.container-32 {
  width: 100%;
  max-width: 49.5rem;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.badge-5 {
  height: 2rem;
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  background-color: var(--light-green);
  border-radius: 1.25rem;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding-left: .5rem;
  padding-right: .5rem;
  display: flex;
}

.caption-1-500---medium-5 {
  color: var(--green);
  text-align: center;
  letter-spacing: -.01em;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.container-33 {
  width: 100%;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.h3-600---semi-bold-4 {
  color: var(--smoky-white-text);
  text-align: center;
  letter-spacing: -.02em;
  font-size: 3rem;
  font-weight: 600;
  line-height: 3.375rem;
}

.body-1-400---regular-3 {
  color: var(--smoky-white-text);
  text-align: center;
  letter-spacing: -.012em;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.625rem;
}

.section-5 {
  width: 100%;
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: flex;
}

.browser {
  width: 100%;
  max-width: 62.25rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  box-shadow: 0 .25rem .5rem var(--darker-purple), inset 0 -0.0625rem var(--darker-purple);
}

.toolbar {
  width: 100%;
  grid-column-gap: 56.25rem;
  grid-row-gap: 56.25rem;
  background-color: var(--grey-purple);
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  justify-content: center;
  align-items: flex-start;
  padding: .625rem;
  display: flex;
}

.controls {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.vectors-wrapper-5 {
  width: .75rem;
  height: .75rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.frame {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex: 0 auto;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.vectors-wrapper-6 {
  width: 1.25rem;
  height: 1.25rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.screen {
  object-fit: cover;
  border-bottom-right-radius: .75rem;
  border-bottom-left-radius: .75rem;
}

.container-34 {
  width: 100%;
  max-width: 75rem;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.featured-icon {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  background-color: var(--smoky-white);
  border-radius: 2.5rem;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: .75rem;
  display: flex;
}

.vectors-wrapper-7 {
  width: 1.5rem;
  height: 1.5rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.container-35 {
  width: 100%;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.subheadline-600---semi-bold {
  color: var(--smoky-white-text);
  text-align: center;
  letter-spacing: -.014em;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.body-2-400---regular-2 {
  color: var(--smoky-white-text);
  text-align: center;
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.featured-icon-2 {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  background-color: #cac8d4;
  border-radius: 2.5rem;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: .75rem;
  display: flex;
}

.features-3 {
  width: 100%;
  max-width: 90rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  background-color: var(--white);
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.section-6 {
  width: 100%;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: center;
  align-items: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: flex;
}

.container-36 {
  width: 100%;
  max-width: 75rem;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.container-37 {
  width: 100%;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.container-38 {
  width: 100%;
  max-width: 30.375rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.vectors-wrapper-8 {
  width: 4rem;
  height: 4rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.container-39 {
  width: 100%;
  max-width: 30.375rem;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.h3-600---semi-bold-5 {
  color: var(--dark-purple-text);
  letter-spacing: -.02em;
  font-size: 3rem;
  font-weight: 600;
  line-height: 3.375rem;
}

.body-1-400---regular-4 {
  color: rgba(47, 43, 67, .6);
  letter-spacing: -.012em;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.625rem;
}

.container-40 {
  width: 100%;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.vectors-wrapper-9 {
  width: 1.5rem;
  height: 1.5rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.body-2-600---semi-bold {
  color: var(--dark-purple-text);
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.container-41 {
  width: 100%;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  justify-content: center;
  align-items: center;
  display: flex;
}

.vectors-wrapper-10 {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  display: flex;
}

.footer {
  width: 100%;
  
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.section-7 {
  width: 100%;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  background-color: var(--dark-purple2);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: flex;
}

.container-42 {
  width: 100%;
  max-width: 75rem;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.container-43 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.subheadline-600---semi-bold-2 {
  color: var(--smoky-white-text);
  letter-spacing: -.014em;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.body-2-400---regular-3 {
  color: var(--smoky-white-text);
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.form-2 {
  width: 100%;
  max-width: 30.375rem;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.input {
  width: 100%;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.field {
  width: 100%;
  height: 3rem;
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  background-color: var(--white);
  border: .0625rem solid var(--darker-purple);
  border-radius: .75rem;
  justify-content: center;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  box-shadow: inset 0 -0.0625rem var(--darker-purple), 0 .0625rem .1875rem var(--darker-purple);
}

.body-2-400---regular-4 {
  color: rgba(47, 43, 67, .6);
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.button-9 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: var(--dark-purple);
  border-radius: .75rem;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: .75rem 1rem;
  text-decoration: none;
  display: flex;
  box-shadow: inset 0 -0.0625rem var(--darker-purple), 0 .0625rem .1875rem var(--darker-purple);
}

.container-44 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.body-2-500---medium-11 {
  color: var(--smoky-white-text);
  text-align: center;
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.section-8 {
  width: 100%;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  background-color: var(--dark-purple2);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
  display: flex;
}

.container-45 {
  width: 100%;
  max-width: 75rem;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.error-d0e4ce71-844a-4a2a-d781-d9358e9834ed {
  width: 100%;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.astrigot-2 {
  grid-column-gap: .625rem;
  grid-row-gap: .625rem;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.container-46 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex: 0 auto;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.container-47 {
  width: 100%;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}

.vectors-wrapper-11 {
  width: 1.5rem;
  height: 1.5rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.section-9 {
  width: 100%;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  background-color: var(--dark-purple2);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 7.5rem 1.5rem 7.5625rem;
  display: flex;
}

.body-2-400---regular-5 {
  color: var(--grey-purple-text);
  text-align: center;
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.astrigot-3 {
  letter-spacing: -.045em;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(#ff8a00 0%, #ffc700 51%, #ff18e8 83%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 1.5625rem;
  font-weight: 800;
  line-height: 120%;
}

.astrigot-4 {
  color: var(--black-text);
  letter-spacing: -.045em;
  font-size: 1.5625rem;
  font-weight: 800;
  line-height: 120%;
}

.features-4 {
  width: 100%;
  
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  background-color: var(--dark-purple2);
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.section-headers-2 {
  width: 100%;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 4rem;
  display: flex;
}

.container-48 {
  width: 100%;
  max-width: 75rem;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.container-49 {
  width: 100%;
  max-width: 49.5rem;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.badge-6 {
  height: 2rem;
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  background-color: var(--light-green);
  border-radius: 1.25rem;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding-left: .5rem;
  padding-right: .5rem;
  display: flex;
}

.caption-1-500---medium-6 {
  color: var(--green);
  text-align: center;
  letter-spacing: -.01em;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.container-50 {
  width: 100%;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  
}

.h3-600---semi-bold-6 {
  color: var(--smoky-white-text);
  text-align: center;
  letter-spacing: -.02em;
  font-size: 3rem;
  font-weight: 600;
  line-height: 3.375rem;
}
.label-2 > a {
  text-decoration: none;
  color: var(--dark-purple-text);
  transition: 250ms ease-in-out;
}
.label-2:hover,
.label-2 > a:hover {
  text-decoration: none;
  color: rgba(255, 0, 0, 0.6);
  translate: 0px -3px;
}
.body-2-500---medium-12 > A {
  color: var(--grey-purple-text);
  text-decoration: none;
  transition: 250ms ease-in-out;
}
.body-2-500---medium-12 > A:hover {
  font-size: large;
  color: rgb(238 238 238);
}
.body-1-400---regular-5 {
  color: var(--smoky-white-text);
  text-align: center;
  letter-spacing: -.012em;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.625rem;
}

.section-10 {
  width: 100%;
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: flex;
}

.browser-2 {
  width: 100%;
  max-width: 62.25rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  box-shadow: 0 .25rem .5rem var(--darker-purple), inset 0 -0.0625rem var(--darker-purple);
}

.toolbar-2 {
  width: 100%;
  grid-column-gap: 56.25rem;
  grid-row-gap: 56.25rem;
  background-color: var(--grey-purple);
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  justify-content: center;
  align-items: flex-start;
  padding: .625rem;
  display: flex;
}

.controls-2 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.vectors-wrapper-12 {
  width: .75rem;
  height: .75rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.frame-5 {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex: 0 auto;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.vectors-wrapper-13 {
  width: 1.25rem;
  height: 1.25rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.screen-2 {
  object-fit: cover;
  border-bottom-right-radius: .75rem;
  border-bottom-left-radius: .75rem;
}

.container-51 {
  width: 100%;
  max-width: 75rem;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.featured-icon-3 {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  background-color: var(--smoky-white-bg);
  border-radius: 2.5rem;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: .75rem;
  display: flex;
}

.vectors-wrapper-14 {
  width: 1.5rem;
  height: 1.5rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.container-52 {
  width: 100%;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.subheadline-600---semi-bold-3 {
  color: var(--smoky-white-text);
  text-align: center;
  letter-spacing: -.014em;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.body-2-400---regular-6 {
  color: var(--smoky-white-text);
  text-align: center;
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.featured-icon-4 {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  background-color: #cac8d4;
  border-radius: 2.5rem;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: .75rem;
  display: flex;
}

.features-5 {
  width: 100%;
  
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  background-color: var(--white);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.section-11 {
  width: 100%;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: center;
  align-items: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: flex;
}

.container-53 {
  width: 100%;
  max-width: 75rem;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.container-54 {
  width: 100%;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.container-55 {
  width: 100%;
  max-width: 30.375rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  justify-content: center;
  align-items: center;
  display: flex;
}
.container-55 > img.vector {
  background-color: red;
}

.vectors-wrapper-15 {
  width: 4rem;
  height: 4rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}
.contact-title {
  color: var(--black-text);
  margin-top: 5rem;
}
.category-item {
  color: var(--black-text);
}
.container-56 {
  width: 100%;
  max-width: 30.375rem;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.h3-600---semi-bold-7 {
  color: var(--dark-purple-text);
  letter-spacing: -.02em;
  font-size: 3rem;
  font-weight: 600;
  line-height: 3.375rem;
}

.body-1-400---regular-6 {
  color:var(--dark-purple-text);
  letter-spacing: -.012em;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.625rem;
  text-align: left;
}

.container-57 {
  width: 100%;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  display: flex;
  text-align: left;
}

.vectors-wrapper-16 {
  width: 1.5rem;
  height: 1.5rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.body-2-600---semi-bold-2 {
  color: var(--dark-purple-text);
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}
.body-2-600---semi-bold-2-2 {
  color: var(--dark-purple-text);
  letter-spacing: -.01em;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.5rem;
}

.container-58 {
  width: 100%;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  justify-content: center;
  align-items: center;
  display: flex;
}

.vectors-wrapper-17 {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  display: flex;
}

.footer-2 {
  width: 100%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  /* other styles you want for your footer */
}

.section-12 {
  width: 100%;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  background-color: var(--dark-purple2);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: flex;
}

.container-59 {
  width: 100%;
  max-width: 75rem;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.container-60 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.subheadline-600---semi-bold-4 {
  color: var(--smoky-white-text);
  letter-spacing: -.014em;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.body-2-400---regular-7 {
  color: var(--smoky-white-text);
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.form-3 {
  width: 100%;
  max-width: 30.375rem;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.input-2 {
  width: 100%;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.field-2 {
  width: 100%;
  height: 3rem;
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  background-color: var(--white);
  border: .0625rem solid var(--darker-purple);
  border-radius: .75rem;
  justify-content: center;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  box-shadow: inset 0 -0.0625rem var(--darker-purple), 0 .0625rem .1875rem var(--darker-purple);
}

.body-2-400---regular-8 {
  color: var(--dark-purple-text);
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.button-10 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: var(--dark-purple);
  border-radius: .75rem;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: .75rem 1rem;
  text-decoration: none;
  display: flex;
  box-shadow: inset 0 -0.0625rem var(--darker-purple), 0 .0625rem .1875rem var(--darker-purple);
  transition: 250ms ease-in-out;
}
.button-10:hover {
  background-color: var(--dark-purple3);
  translate: 0px -3px;
}

.container-61 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.body-2-500---medium-12 {
  color: var(--smoky-white-text);
  text-align: center;
  letter-spacing: -.01em;
  flex: none;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.section-13 {
  width: 100%;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  background-color: var(--dark-purple2);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
  display: flex;
}

.container-62 {
  width: 100%;
  max-width: 75rem;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.error-1fe63495-2d5c-eec6-a44b-1f5442118a75 {
  width: 100%;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.astrigot-5 {
  grid-column-gap: .625rem;
  grid-row-gap: .625rem;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.container-63 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex: 0 auto;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.container-64 {
  width: 100%;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}

.vectors-wrapper-18 {
  width: 1.5rem;
  height: 1.5rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.section-14 {
  width: 100%;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  background-color: var(--dark-purple2);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 7.5rem 1.5rem 7.5625rem;
  display: flex;
}

.body-2-400---regular-9 {
  color: var(--grey-purple-text);
  text-align: center;
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.astrigot-6 {
  letter-spacing: -.045em;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(#ff8a00 0%, #ffc700 51%, #ff18e8 83%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 1.5625rem;
  font-weight: 800;
  line-height: 120%;
}

.astrigot-7 {
  color: var(--black-text);
  letter-spacing: -.045em;
  font-size: 1.5625rem;
  font-weight: 800;
  line-height: 120%;
}

.footer-3 {
  width: 100%;
  max-width: 90rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.section-15 {
  width: 100%;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  background-color: var(--dark-purple2);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: flex;
}

.container-65 {
  width: 100%;
  max-width: 75rem;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.container-66 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.subheadline-600---semi-bold-5 {
  color: var(--smoky-white-text);
  letter-spacing: -.014em;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.body-2-400---regular-10 {
  color: var(--smoky-white-text);
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.form-4 {
  width: 100%;
  max-width: 30.375rem;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.input-3 {
  width: 100%;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.field-3 {
  width: 100%;
  height: 3rem;
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  background-color: var(--white);
  border: .0625rem solid var(--darker-purple);
  border-radius: .75rem;
  justify-content: center;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  box-shadow: inset 0 -0.0625rem var(--darker-purple), 0 .0625rem .1875rem var(--darker-purple);
}

.body-2-400---regular-11 {
  color: rgba(47, 43, 67, .6);
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.button-11 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  background-color: var(--dark-purple);
  border-radius: .75rem;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: .75rem 1rem;
  text-decoration: none;
  display: flex;
  box-shadow: inset 0 -0.0625rem var(--darker-purple), 0 .0625rem .1875rem var(--darker-purple);
}

.container-67 {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.body-2-500---medium-13 {
  color: var(--smoky-white-text);
  text-align: center;
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.section-16 {
  width: 100%;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  background-color: var(--dark-purple2);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
  display: flex;
}

.container-68 {
  width: 100%;
  max-width: 75rem;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.error-af0e8c19-2dfc-c365-74f6-cd3af413d061 {
  width: 100%;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.astrigot-8 {
  grid-column-gap: .625rem;
  grid-row-gap: .625rem;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.container-69 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex: 0 auto;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.container-70 {
  width: 100%;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
}

.vectors-wrapper-19 {
  width: 1.5rem;
  height: 1.5rem;
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  display: flex;
}

.section-17 {
  width: 100%;
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  background-color: var(--dark-purple2);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 7.5rem 1.5rem 7.5625rem;
  display: flex;
}

.body-2-400---regular-12 {
  color: var(--grey-purple-text);
  text-align: center;
  letter-spacing: -.01em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}



.astrigot-10 {
  color: var(--black-text);
  letter-spacing: -.045em;
  font-size: 1.5625rem;
  font-weight: 800;
  line-height: 120%;
}


#menuToggle {
  display: none;
}

@media screen and (max-width: 61.9375rem) {
  .placeholder {
    flex: none;
    
  }
  .label-3 {
    display: none;
  }
  #menuToggle
{
  display: block;
  position: relative;
  top: 3.125rem;
  left: -2rem;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 2.0625rem;
  height: .25rem;
  margin-bottom: .3125rem;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 100vw;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 7.8125rem;
  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(100%, -0%);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}

}

#hamburger-menu {
  display:none;
}

@media screen and (max-width: 991px) {
  .astrigot {
    margin-left: 1.25rem;
    scale: 80%;
  }
  .userContent {
    margin: 1rem;
    text-align: left;
    max-width: none;
  }
  .themeswitch {
    scale: 60%;
    top: 5rem;
    right: 0.5rem;
  }
  .faq-background {
    padding: 1rem;
    max-width: 90rem;
    text-align: left;
  }
  #hamburger-menu {
    display:block;
  }
  .browser-2 {
    display: none;
  }
  .navbar {
    justify-content: center;
    align-self: flex-end;
    align-items: flex-end;
    padding-left: 0;
    padding-right: 0;
  }
  .section-4 {
    max-width: 90%;
  }

  .container {
    order: 0;
    justify-content: flex-end;
    align-self: flex-end;
    align-items: flex-end;
    overflow: visible;
  }

  .navgation {
    overflow: hidden;
  }

  .label {
    display: none;
  }

  .text-button {
    overflow: hidden;
  }

  .label-2 {
    opacity: 1;
    object-fit: fill;
    flex: none;
    display: none;
    overflow: hidden;
    transition: 250ms ease-in-out;
  }

  .actions {
    flex-wrap: nowrap;
    flex: 1;
    order: 0;
  }

  .button {
    margin-left: 15px;
    font-size: 18px;
  }
  .menu-button {
    display: block;
    margin-left: 0;
  }

  .container-2 {
    flex-direction: column;
    justify-content: flex-start;
  }

  .container-3 {
    align-items: center;
  }

  .container-4 {
    width: 85%;
    object-fit: fill;
    flex-flow: column;
    flex: 0 auto;
    align-items: flex-start;
    margin-left: 25px;
    display: flex;
    position: static;
  }

  .design-system-for-figma-framer, .subheadline-400---regular {
    text-align: center;
  }

  .form {
    text-align: center;
    flex-direction: row;
    flex: 0 auto;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 25px;
  }

  .button-2 {
    text-align: center;
    justify-content: flex-start;
    align-items: flex-start;
  }
  

  .container-6 {
    align-items: center;
  }

  .placeholder {
    flex: none;
  }

  .features {
    align-items: center;
  }

  .section-2 {
    width: 90%;
    text-align: center;
    align-items: center;
  }

  .container-11 {
    flex: 1;
    justify-content: flex-start;
  }

  .frame-4 {
    flex-direction: column;
    align-items: center;
  }

  .pricing-5 {
    flex: 1;
  }

  .pricing-6 {
    object-fit: fill;
  }

  .menu-button, .icon, .nav-menu, .container-48 {
    overflow: visible;
  }

  .button-10 {
    text-align: left;
    flex: 0 auto;
    
    font-size: 20px;
    position: static;
  }
}

@media screen and (max-width: 767px) {
  .design-system-for-figma-framer {
  font-size: 42px;
}
.FREE p {
 
  font-size: 1rem;
  color: var(--white-text); /* White text color for the message */
  font-weight: bold;
  text-align: center;
  rotate: 0deg;
  max-width: 80%;
  padding: 1rem;
  border-radius: 16px;
  background: var(--dark-purple);
}

.body-1-400---regular-5 {
  margin: 0 15px;
}
.body-1-400---regular {
  margin: 0 15px;
}
.section-10, .section-header-2 {
  width: 90%;
  margin: 0 15px;
}
.actions {
  grid-column-gap: 0;
}
.menu-button {
  display: block;
  margin-left: 0;
  margin-right: 15px;
}
.container-57 {
  width: 100%;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}
.label-nav {
  margin-top: 15px;
}
.astrigot {
  margin-left: 1.25rem;
  scale: 80%;
}
.container {
  grid-column-gap: 0;
  align-items: center;
}
.container-63  {
  flex-direction: column; 
}
.section-12, .section-11 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.input-2, .container-54 {
  width: 90%;
}
.vectors-wrapper-17 {
  scale: 70%;
}
.container-6 {
  object-fit: fill;
  overflow: visible;
}

.placeholder {
  width: 85%;
  height: 85%;
  object-fit: contain;
  flex: 0 auto;
  align-self: center;
  margin-left: 20px;
  margin-right: 20px;
}

.section-2 {
  flex-direction: column;
}

.container-10 {
  flex-direction: column;
  margin-left: 40px;
  margin-right: 40px;
}

.container-51, .container-53 {
  flex-direction: column;
}

.container-55 {
  justify-content: center;
}

.vectors-wrapper-15 {
  text-align: left;
  justify-content: flex-start;
  align-self: auto;
  align-items: flex-start;
}

.container-56 {
  text-align: left;
  justify-content: center;
  align-self: center;
  align-items: center;
}

.h3-600---semi-bold-7 {
  align-self: flex-start;
}

.section-12, .container-59 {
  text-align: center;
  flex-direction: column;
  align-items: center;
}

.container-60 {
  align-items: center;
}

.form-3 {
  flex-direction: column;
  align-items: center;
  margin-top: 27px;
}

.button-10 {
  flex: 0 auto;
}

.section-13 {
  flex-direction: column;
  align-self: center;
}

.container-62 {
  text-align: center;
  flex-direction: column;
}

.error-1fe63495-2d5c-eec6-a44b-1f5442118a75, .container-64 {
  justify-content: center;
}
}


@media screen and (max-width: 479px) {
  .design-system-for-figma-framer {
    font-size: 1.65rem;
    line-height: 1.875rem;
  }

  .form {
    width: 90%;
    justify-content: center;
    align-self: center;
    margin-left: 0;
  }

  .button-2 {
    width: 80%;
    justify-content: center;
  }

  .container-6 {
    height: 100%;
  }

  .placeholder {
    overflow: visible;
  }

  .design-system-for-figma-framer-1 {
    font-size: 1.70rem;
    line-height: 1.8rem;
  }

  .pricing-4 {
    
    margin-left: 20px;
    margin-right: 20px;
  }
  .section-headers {
    max-width: 90%;
  }
}
.container-contact {
  margin: 0 auto;
  max-width: 900px;
  flex: 1;
}
.contact-card > p {
  padding: 2rem;
  color: var(--black-text);
}
.tilt-contacts {
  margin-bottom: 30px;
}

.letter-box {
  padding: 20px;
  border-radius: 10px;
}

/* Styling for search bar */
.form-group {
  margin-bottom: 20px;
}

#searchInput {
  padding: 10px;
  font-size: 1em;
  border: 2px solid #ddd;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease-in-out;
}

#searchInput:focus {
  border-color: #4CAF50;
  outline: none;
}
#letterTypesList {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  
  align-items: start;
  
}

#letterTypesList li {
 
    color: var(--white-text);
    
    
    
    padding: 10px; /* set to 0 */
    border-radius:5px;
    text-align:center;
    background: #49494900 !important;
}

li a {
  color: black;
  margin: 10px;
  background-color: var(--dark-purple); /* Or any color you want */
  border-radius: 5px;
  padding: 3px 6px;
  transition: 250ms ease-in-out;
}

#letterTypesList li a {
  color: var(--smoky-white-text); /* Or any color you want */
  text-decoration: none;
  font-weight: bold;
  font-size: 0.75rem;
}

#letterTypesList li:hover {
  background-color: var(--dark-purple3);
    translate: 0px -3px;
}

.fade-in {
  animation: fadeIn 0.3s ease-in;
}

.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

a {
  text-decoration: none;
}
a:hover .text {
  opacity: 0.8;  /* or any other hover effect you'd like */
}

.FREE {
  position: absolute;
    top: 2rem;
    left: 0;
    right: 0;
    bottom: 2rem;
    background-color: rgba(128, 128, 128, 0.8); /* Semi-transparent gray background */
    display: flex;
    justify-content: center;
    align-items: center; /* These three properties center the "Under Construction" text both vertically and horizontally */
    z-index: 1; /* Ensures the overlay is on top of the content */
}




.submit-contact {
  margin-bottom: 4rem;
  padding: 1rem;
  border-style: none;
  border-radius: 15px;
  transition: 250ms ease-in-out;
  background-color: var(--ctared);
}
.submit-contact:hover {
  background-color: var(--ctared-hover);  
}
/* #id_topic, #id_name, #id_email, #id_subject, #id_message, #id_email2, #id_password1, #id_password2 {
  margin: 0.2rem;
  padding: 15px;
  border-radius: 8px;
  border-color: #4f4770;
} */
form[action="/letters/contact/"] .body-2-500---medium-12 {
  /* Your unique styles go here */
  background: #8880a7;
  padding: .75rem 1rem;
  color: Black;
  font-family: 'Inter', sans-serif;
  margin-bottom: 5rem;
  border-radius: .75rem;
  transition: 250ms ease-in-out;
}

form[action="/letters/contact/"] .body-2-500---medium-12:hover {
  /* Your hover styles go here */
  background-color: var(--dark-purple);
  color: var(--smoky-white-text);
}

form[action="/accounts/signup/"] .btn {
  /* Your unique styles go here */
  background: #8880a7;
  padding: .75rem 1rem;
  color: Black;
  font-family: 'Inter', sans-serif;
  margin-bottom: 5rem;
  border-radius: .75rem;
  transition: 250ms ease-in-out;
  border-style: none;
}

form[action="/accounts/signup/"] .btn:hover {
  /* Your hover styles go here */
  background-color: var(--dark-purple);
  color: var(--smoky-white-text);
}

body > div > div.faq-background > div.wrapper > pre {
  text-wrap: balance !important;
}
pre {
  text-wrap: balance !important;
}
.loading-screen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9); /* white with slight opacity */
  z-index: 9999; /* ensure it's on top */
  display: none; /* hidden by default */
}

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
#categoryList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.category-item {
  cursor: pointer;
  margin: 3rem;
  max-width: 6rem;
  min-width: 5rem;
  font-size: var(--fon)
  
}
.fa-solid, .fas {
  color: var(--dark-dark-purple);
  scale: 2.5;
  margin-bottom: 2rem;
}

.fa-solid, .fas:hover {
  color:red;
}
#navCross {
  display: none;
}
#myNav {
  background-color: var(--dark-dark-purple2);
  width: 100%;
  height: 0;
  display:flex;
  overflow: hidden;
  position: fixed;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: height 0.5s; /* Smooth transition for height */
  box-shadow: black 1px 1px 5px;
  border-radius: 0 0 15px 15px;
}
#myNav li {
  list-style: none;
  
}
#myNav a {
  
  display: block;
  color: var(--smoky-white-text);
  text-align: center;
  align-items: center;
  text-decoration: none;
  font-size: 17px;
  margin: 5px;
  transition: 250ms ease-in-out;
  background: none;
}

#myNav a:hover {
  background-color: var(--white);
  color: var(--black);
  border-radius: 30px;
}

/* Place the button in the bottom right corner */
#menuButton {
  position: fixed;
  
  top: 10px;
  right: 10px;
  z-index: 1001; /* ensure it's above other content */
  display:none;
  transition: all 0.5s; /* Smooth scale transition */
  
  
}
#menuButton.active { /* New class to scale the button when active */
  transform: scale(0.5) translateY(313px);
  box-shadow: black 5px 5px 30px;
}
#navBars {
  display:none;
}
/* Use a media query to show the button and hide the nav on smaller screens */
@media only screen and (max-width: 991px) { /* Adjust 768px as per your needs */
  
  #menuButton {
      display: block; /* show button on small screens */
      width: 4rem;
      height: 4rem;
      border-radius: 40px;
      border-style: none;
      background: var(--dark-purple2);
      position: fixed;
  }
  #navBars {
    display:block;
  }
  #navLogo {
    position: absolute;
    top: 15px;
    left: 15px;
    box-shadow: inset 1px 1px 5px black;
    background: var(--white);
    border-radius: 40px;
    scale: 80%

  }
  
}
@media only screen and (max-width: 464px) {
  #navLogo {
    position: relative;
    scale: 50%;
  }
  #myNav > ul {
    margin-right: 1rem;
  }
  
}
#navBars {
  color: var(--smoky-white-text);
  transform: translateY(.45rem);
}
.overlay {
  height: 0;
  transition: height 0.5s;
  /* ... other properties ... */
}
#myNav > ul {
  padding: 0;
}

.form-control {
  text-align: left;
  color: var(--black-text);
  
}
.form-control > label {
  text-align: left;
  font-size: 1.2rem;
  color: var(--black-text);
  margin-bottom: 1rem;
}

.form-control > input, .form-control > select, .form-control > textarea, #id_topic > textarea {
  background:var(--dark-purple3);
  font-size: medium;
  padding: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 1.2rem;
  border-style: none !important;
  resize: none;
}
.form-control > input:focus,
.form-control > textarea:focus,
.form-grouo > input:focus,
.form-grouo > select:focus,
.form-grouo > textarea:focus
{
  outline: 2px solid var(--smoky-white);
  outline-offset: .2rem;
  background: var(--grey-purple);
  
}


.form-control::placeholder {
  color: var(--dark-purple);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
}
.form-control > .placeholder {
  color: red;
}

.form-grouo {
  display: flex;
  flex-direction: column;
  align-items: left;
  margin: .6rem;
}

.form-grouo > p {
  color: var(--black-text);
}
.themeswitch {
  position: relative;
  scale: 80%;
}

.switch_bg {
  background: #7ba5e2;
  width: 66px;
  height: 34px;
  border-radius: 40px;
  border-style: solid;
  border-color: #2f2b43;
  transition: 250ms ease-in-out;
}
.switch_bg.active {
  background: #2f2b43;
  border-color: #030014;
  border-style: solid;
  transition: 250ms ease-in-out;
  
}
.switch_button {
  background: #ffd92a;
  width: 28px;
  height: 28px;
  left: 2px;
  
  position: relative;
  border-radius: 40px;
  cursor: pointer;
  transition: 250ms ease-in-out;
}
.switch_button.active {
  transform: translateX(32px); /* assuming you want to translate in X direction and fixed property name */
  transition: 250ms ease-in-out;
  background: #b2aebf;
}

.gen_text_wrap {
  margin: 5rem 1rem 5rem 1rem;
  flex: 1;
  background: white;
  border-radius: 15px;
  border-style: 1px solid;
  box-shadow: 15px 15px 150px -50px;
  max-width: 50%;
  text-wrap: balance;
}
.gen_text {
  text-align: left;
  margin: 1rem;
  text-rendering: optimizelegibility;
  font-size: 1rem;
  padding: 1rem;
}
.userContent {
  margin: 1rem;
  text-align: left;
  max-width: 991px;
}

.userContent > ul {
  padding-inline-start: 0;
  list-style: none;
  flex:1;
  text-align: left;
}
.userContent ul > li > p {
  margin: 1rem;
}
.contentHistory {
  padding: 0.5rem 0 1rem 0;
}
.historyList li {
  margin-top: 0.5rem;
  border-radius: 15px;
}
.historyList li:nth-child(odd) {
  background: var(--dark-purple2);
  color: var(--smoky-white-text);
}
.historyList li:nth-child(even) {
  background: var(--dark-purple);
  color: var(--smoky-white-text);
}
.historyList a {
  background: var(--dark-ctared);
  color: var(--smoky-white-text);
}
.historyList a:hover {
  background: var(--dark-ctared-hover);
  color: var(--smoky-white-text);
}
.profilePicture {
  display: block;
  background: var(--dark-purple2);
  height: 150px;
  width: 150px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.userInfo {
  margin-right: 5rem;
}
.profilePicture > i {
  color: var(--grey-purple);
  margin: 0;
  scale: 5;
  
}
.delAccount {
  margin-bottom: 5rem;
  text-align: right;
}