/*
 Theme Name: Crea Child
 Template: twentytwentyfive
 Version: 1.0
*/

p {
  font-family: Poppins;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 176.471% */
  margin: 0;
}

p.p1 {
  font-family: Poppins;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 176.471% */
  margin: 0;
}

li {
  font-family: Poppins;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 176.471% */
}

h1 {
  font-family: Poppins;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 50px; /* 138.889% */
}

.icon-date {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("img/icons/date.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.icon-date.past {
  background-image: url("img/icons/date_past.svg") !important;
}

.icon-time {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("img/icons/time.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.icon-time.past {
  background-image: url("img/icons/time_past.svg") !important;
}

.icon-location {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("img/icons/location.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.icon-location.past {
  background-image: url("img/icons/location_past.svg") !important;
}

.icon-resource {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("img/icons/resource.svg"); /* adjust path if different */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.no-border {
  border: none !important;
  border-bottom: none !important;
}

/* --- Homepage hero styles (child theme overrides) --- */
.hero {
  padding: 40px 0;
  overflow: visible; /* ensure children are not clipped */
}

/* Ensure bullets for lists in theme-detailed-text-wrapper-5 */
.theme-detailed-text-wrapper-5 ul {
  list-style-type: disc;
  margin-left: 2em;
}
.theme-detailed-text-wrapper-5 ol {
  list-style-type: decimal;
  margin-left: 2em;
}
.theme-detailed-text-wrapper-5 li {
  margin-bottom: 0.5em;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.hero-title {
  font-size: 48px;
  line-height: 1.1;
  margin: 0 0 12px;
}

.hero-subtitle {
  margin: 0 0 18px;
  color: #666;
}

.hero-buttons .btn {
  margin: 0 6px;
}

.hero-images {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 18px;
  align-items: flex-end;
}

.hero-images img {
  max-width: 45%;
  height: auto;
  display: block;
}

/* Stack images on small screens */
@media (max-width: 780px) {
  .hero-images {
    flex-direction: column;
    gap: 12px;
  }
  .hero-images img {
    max-width: 80%;
  }
  .hero-title {
    font-size: 34px;
  }
}

/* Header Styling Starts */

.header-nav-bar {
  display: flex;
  width: 100%;

  height: 100px;
  align-items: center;
  padding: 20px 40px;
  position: relative;
  /* background-color: var(--x-50-0yellow); */
}

.header-frame {
  display: flex;
  gap: 32px;
  flex: 1;
  flex-grow: 1;
  align-items: center;
  position: relative;
}

.header-centre-for-inclusive {
  position: relative;
  width: 189.67px;
  height: 45.1px;
}

.header-vector {
  position: relative;
  width: 1px;
  height: 40px;
}

.header-new-logo {
  position: relative;
  width: 39px;
  height: 56px;
  aspect-ratio: 0.7;
  object-fit: cover;
}

.header-div {
  display: flex;
  justify-content: space-between;
  flex: 1;
  flex-grow: 1;
  align-items: center;
  position: relative;
}

.header-frame-2 {
  display: inline-flex;
  gap: 24px;
  align-self: stretch;
  flex: 0 0 auto;
  align-items: center;
  position: relative;
}

.header-frame-3 {
  display: inline-flex;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  flex: 0 0 auto;
  align-items: center;
  position: relative;
}

.header-text-wrapper {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: var(--black);
  font-size: 15px;
  letter-spacing: 0.15px;
  line-height: 22px;
  white-space: nowrap;
}

.header-dropdown-link {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: var(--black);
  font-family: "Poppins", Helvetica;
  font-size: 15px;
  letter-spacing: 0.15px;
  line-height: 22px;
  white-space: nowrap;
}

.header-sale {
  position: relative;
  width: 24px;
  height: 24px;
  transform: rotate(90deg);
  aspect-ratio: 1;
}

.header-chevron-right {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
}

.header-div-wrapper {
  gap: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  position: relative;
  flex: 0 0 auto;
}

.header-text-wrapper-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 500;
  color: var(--black);
  font-size: 15px;
  letter-spacing: 0.15px;
  line-height: 22px;
  white-space: nowrap;
  font-family: "Poppins", Helvetica;
}

.header-frame-4 {
  gap: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  position: relative;
  flex: 0 0 auto;
}

.header-frame-5 {
  display: inline-flex;
  height: 48px;
  justify-content: center;
  gap: 16px;
  padding: 0px 24px;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 12px;
  align-items: center;
  position: relative;
}

.header-PRIMARY {
  position: relative;
  width: fit-content;
  font-family: var(--label-h3-font-family);
  font-weight: var(--label-h3-font-weight);
  color: #ffffff;
  font-size: var(--label-h3-font-size);
  letter-spacing: var(--label-h3-letter-spacing);
  line-height: var(--label-h3-line-height);
  white-space: nowrap;
  font-style: var(--label-h3-font-style);
}

.header-sale-2 {
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
  background-image: url(./img/chevron-right.svg);
  background-size: 100% 100%;
}
/* Original CSS code should be injected here from style.css */

.header-frame {
  display: flex;
  gap: 32px;
  flex: 1;
  flex-grow: 1;
  align-items: center;
  position: relative;
}

.header-centre-for-inclusive {
  position: relative;
  width: 189.67px;
  height: 45.1px;
}

.header-vector {
  position: relative;
  width: 1px;
  height: 40px;
}

.header-new-logo {
  position: relative;
  width: 39px;
  height: 56px;
  aspect-ratio: 0.7;
  object-fit: cover;
}

.header-div {
  display: flex;
  justify-content: space-between;
  flex: 1;
  flex-grow: 1;
  align-items: center;
  position: relative;
}

.header-frame-2 {
  display: inline-flex;
  gap: 24px;
  align-self: stretch;
  flex: 0 0 auto;
  align-items: center;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-frame-3 {
  display: inline-flex;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  flex: 0 0 auto;
  align-items: center;
  position: relative;
}

.header-text-wrapper {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: var(--black);
  font-size: 15px;
  letter-spacing: 0.15px;
  line-height: 22px;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.header-text-wrapper:hover {
  opacity: 0.8;
}

.header-text-wrapper:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.header-sale {
  position: relative;
  width: 24px;
  height: 24px;
  transform: rotate(90deg);
  aspect-ratio: 1;
}

.header-chevron-right {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
}

.header-div-wrapper {
  gap: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  position: relative;
  flex: 0 0 auto;
}

.header-text-wrapper-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 500;
  color: var(--black);
  font-size: 15px;
  letter-spacing: 0.15px;
  line-height: 22px;
  white-space: nowrap;
  text-decoration: none;
}

.header-text-wrapper-2:hover {
  opacity: 0.8;
}

.header-text-wrapper-2:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.header-frame-4 {
  gap: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  position: relative;
  flex: 0 0 auto;
}

.header-frame-5 {
  display: inline-flex;
  height: 48px;
  justify-content: center;
  gap: 16px;
  padding: 0px 24px;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 12px;
  align-items: center;
  position: relative;
}

.header-frame-5:hover {
  opacity: 0.9;
}

.header-PRIMARY {
  position: relative;
  width: fit-content;
  font-family: var(--label-h3-font-family);
  font-weight: var(--label-h3-font-weight);
  color: #ffffff;
  font-size: var(--label-h3-font-size);
  letter-spacing: var(--label-h3-letter-spacing);
  line-height: var(--label-h3-line-height);
  white-space: nowrap;
  font-style: var(--label-h3-font-style);
  text-decoration: none;
}

.header-PRIMARY:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.header-sale-2 {
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
  background-image: url(./img/chevron-right.svg);
  background-size: 100% 100%;
}

/* Header Styling Ends */

/* Footer Styling Starts */

.footer {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  padding: 0px 100px;
  position: relative;
  background-color: var(--light-blue);
  border-radius: 32px 32px 0px 0px;
}

.footer-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.footer-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.footer-div-wrapper {
  display: flex;
  flex-direction: column;
  width: 1240px;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
  margin-left: -100px;
  margin-right: -100px;
}

.footer-text-wrapper {
  position: relative;
  width: 864px;
  margin-top: -1px;
  font-family: var(--title-h1-font-family);
  font-weight: var(--title-h1-font-weight);
  color: var(--black);
  font-size: var(--title-h1-font-size);
  text-align: center;
  letter-spacing: var(--title-h1-letter-spacing);
  line-height: var(--title-h1-line-height);
  font-style: var(--title-h1-font-style);
}

.footer-vector {
  position: relative;
  width: 285.51px;
  height: 8.84px;
  margin-bottom: -3.88px;
}

.footer-frame-2 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.footer-p {
  position: relative;
  width: 455px;
  margin-top: -1px;
  font-weight: 400;
  color: var(--black);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: 28px;
}

.footer-frame-3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.footer-frame-4 {
  display: flex;
  width: 252px;
  height: 54px;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  position: relative;
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid;
  border-color: #dedede;
}

.footer-text-wrapper-2 {
  position: relative;
  width: fit-content;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: var(--x-70-0neutral);
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  white-space: nowrap;
  font-style: var(--body-p3-font-style);
}

.footer-frame-5 {
  display: inline-flex;
  height: 54px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 12px;
}

.footer-text-wrapper-3 {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.15px;
  line-height: 22px;
  white-space: nowrap;
}

.footer-sale {
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: -1px;
  margin-bottom: -1px;
  aspect-ratio: 1;
  background-image: url(./img/chevron-right-2.svg);
  background-size: 100% 100%;
}

.footer-frame-6 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 0px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #d7d7d7;
}

.footer-frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 1240px;
  height: 313px;
  align-items: flex-start;
  gap: 80px;
  position: relative;
}

.footer-frame-7 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.footer-img {
  position: relative;
  flex: 0 0 auto;
}

.footer-frame-8 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.footer-frame-9 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  position: relative;
  flex: 0 0 auto;
}

.footer-frame-10 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.footer-text-wrapper-4 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 700;
  color: var(--black);
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.footer-frame-11 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.footer-text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 400;
  color: var(--black);
  font-size: 13px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.footer-text-wrapper-6 {
  position: relative;
  width: 128px;
  margin-top: -1px;
  font-weight: 400;
  color: var(--black);
  font-size: 13px;
  letter-spacing: 0;
  line-height: normal;
}

.footer-frame-12 {
  position: relative;
  width: 127px;
  height: 25px;
}

.footer-frame-13 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.footer-frame-14 {
  display: flex;
  flex-direction: column;
  width: 160px;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  position: relative;
  flex: 0 0 auto;
}

.footer-frame-15 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.footer-frame-16 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  position: relative;
  flex: 0 0 auto;
}

.footer-frame-17 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.footer-frame-18 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 9px;
}

.footer-frame-19 {
  display: flex;
  flex-direction: column;
  height: 112px;
  align-items: flex-start;
  justify-content: space-around;
  gap: 18px;
  position: relative;
  align-self: stretch;
  width: 100%;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #d7d7d7;
}

.footer-frame-20 {
  display: flex;
  width: 206px;
  align-items: center;
  position: relative;
}

.footer-frame-21 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  position: relative;
  flex: 0 0 auto;
  margin-right: -15px;
}

.footer-frame-22 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  position: relative;
  flex: 0 0 auto;
  margin-right: -221px;
}

.footer-frame-23 {
  position: relative;
  width: 190px;
  height: 9px;
}

.footer-frame-24 {
  display: inline-flex;
  height: 28px;
  align-items: center;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.footer-content {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 24px;
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
}

.footer-vector-2 {
  position: relative;
  width: 1px;
  height: 24px;
  margin-left: -0.5px;
}

.footer-social-icon {
  position: relative;
  width: 24px;
  height: 24px;
}

.footer-vector-3 {
  position: relative;
  width: 1px;
  height: 24px;
}

.footer-frame-25 {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.footer-new-logo {
  position: relative;
  width: 35px;
  height: 50px;
  aspect-ratio: 0.7;
  object-fit: cover;
}

.footer-gates-foundation {
  position: relative;
  width: 84px;
  height: 30px;
  aspect-ratio: 2.8;
}

.footer-quicksand-logo-solid {
  position: relative;
  width: 50px;
  height: 50px;
  aspect-ratio: 1;
}
/* Original CSS code should be injected here */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.footer-frame-3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.footer-frame-4 {
  display: flex;
  width: 252px;
  height: 54px;
  align-items: center;
  gap: 10px;
  padding: 0;
  position: relative;
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid;
  border-color: #dedede;
}

.footer-frame-4 input {
  width: 100%;
  height: 100%;
  padding: 16px 24px;
  border: none;
  background: transparent;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: var(--black);
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  font-style: var(--body-p3-font-style);
}

.footer-frame-4 input::placeholder {
  color: var(--x-70-0neutral);
}

.footer-frame-4 input:focus {
  outline: none;
}

.footer-frame-4:focus-within {
  border-color: var(--x500crea-pink);
  box-shadow: 0 0 0 2px rgba(250, 69, 92, 0.2);
}

.footer-frame-5 {
  display: inline-flex;
  height: 54px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.footer-frame-5:hover {
  background-color: var(--x700crea-pink);
}

.footer-frame-5:active {
  background-color: var(--x900crea-pink);
}

.footer-frame-5:focus-visible {
  outline: 2px solid var(--x500crea-pink);
  outline-offset: 2px;
}

.footer-frame-11 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 400;
  color: var(--black);
  font-size: 13px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer a.text-wrapper-5:hover {
  color: var(--x500crea-pink);
  text-decoration: underline;
}

.footer a.text-wrapper-5:focus-visible {
  outline: 2px solid var(--x500crea-pink);
  outline-offset: 2px;
  border-radius: 2px;
}

.footer-text-wrapper-6 {
  position: relative;
  width: 128px;
  margin-top: -1px;
  font-weight: 400;
  color: var(--black);
  font-size: 13px;
  letter-spacing: 0;
  line-height: normal;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer a.text-wrapper-6:hover {
  color: var(--x500crea-pink);
  text-decoration: underline;
}

.footer a.text-wrapper-6:focus-visible {
  outline: 2px solid var(--x500crea-pink);
  outline-offset: 2px;
  border-radius: 2px;
}

.footer-content a {
  display: inline-flex;
  transition: opacity 0.2s ease;
}

.footer-content a:hover {
  opacity: 0.7;
}

.footer-content a:focus-visible {
  outline: 2px solid var(--x500crea-pink);
  outline-offset: 2px;
  border-radius: 4px;
}

.footer-vector-2 {
  position: relative;
  width: 1px;
  height: 24px;
  margin-left: -0.5px;
  background-color: #d7d7d7;
}

.footer-vector-3 {
  position: relative;
  width: 1px;
  height: 24px;
  background-color: #d7d7d7;
}

.footer {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  padding: 0px 100px;
  position: relative;
  background-color: var(--light-blue);
  border-radius: 32px 32px 0px 0px;
}

.footer-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.footer-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.footer-div-wrapper {
  display: flex;
  flex-direction: column;
  width: 1240px;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
  margin-left: -100px;
  margin-right: -100px;
}

.footer-text-wrapper {
  position: relative;
  width: 864px;
  margin-top: -1px;
  font-family: var(--title-h1-font-family);
  font-weight: var(--title-h1-font-weight);
  color: var(--black);
  font-size: var(--title-h1-font-size);
  text-align: center;
  letter-spacing: var(--title-h1-letter-spacing);
  line-height: var(--title-h1-line-height);
  font-style: var(--title-h1-font-style);
}

.footer-vector {
  position: relative;
  width: 285.51px;
  height: 8.84px;
  margin-bottom: -3.88px;
}

.footer-frame-2 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.footer-p {
  position: relative;
  width: 455px;
  margin-top: -1px;
  font-weight: 400;
  color: var(--black);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: 28px;
}

.footer-text-wrapper-2 {
  position: relative;
  width: fit-content;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: var(--x-70-0neutral);
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  white-space: nowrap;
  font-style: var(--body-p3-font-style);
}

.footer-text-wrapper-3 {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.15px;
  line-height: 22px;
  white-space: nowrap;
}

.footer-sale {
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: -1px;
  margin-bottom: -1px;
  aspect-ratio: 1;
  background-image: url(./img/chevron-right-2.svg);
  background-size: 100% 100%;
}

.footer-frame-6 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 0px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #d7d7d7;
}

.footer-frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 1240px;
  height: 313px;
  align-items: flex-start;
  gap: 80px;
  position: relative;
}

.footer-frame-7 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.footer-img {
  position: relative;
  flex: 0 0 auto;
}

.footer-frame-8 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.footer-frame-9 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  position: relative;
  flex: 0 0 auto;
}

.footer-frame-10 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.footer-text-wrapper-4 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 700;
  color: var(--black);
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.footer-frame-12 {
  position: relative;
  width: 127px;
  height: 25px;
}

.footer-frame-13 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.footer-frame-14 {
  display: flex;
  flex-direction: column;
  width: 160px;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  position: relative;
  flex: 0 0 auto;
}

.footer-frame-15 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.footer-frame-16 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  position: relative;
  flex: 0 0 auto;
}

.footer-frame-17 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.footer-frame-18 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 9px;
}

.footer-frame-19 {
  display: flex;
  flex-direction: column;
  height: 112px;
  align-items: flex-start;
  justify-content: space-around;
  gap: 18px;
  position: relative;
  align-self: stretch;
  width: 100%;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #d7d7d7;
}

.footer-frame-20 {
  display: flex;
  width: 206px;
  align-items: center;
  position: relative;
}

.footer-frame-21 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  position: relative;
  flex: 0 0 auto;
  margin-right: -15px;
}

.footer-frame-22 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  position: relative;
  flex: 0 0 auto;
  margin-right: -221px;
}

.footer-frame-23 {
  position: relative;
  width: 190px;
  height: 9px;
}

.footer-frame-24 {
  display: inline-flex;
  height: 28px;
  align-items: center;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.footer-content {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 24px;
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
}

.footer-social-icon {
  position: relative;
  width: 24px;
  height: 24px;
}

.footer-frame-25 {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.footer-new-logo {
  position: relative;
  width: 35px;
  height: 50px;
  aspect-ratio: 0.7;
  object-fit: cover;
}

.footer-gates-foundation {
  position: relative;
  width: 84px;
  height: 30px;
  aspect-ratio: 2.8;
}

.footer-quicksand-logo-solid {
  position: relative;
  width: 50px;
  height: 50px;
  aspect-ratio: 1;
}

/* Footer Styling Ends */

/* Themes overview Styling starts */

.footer-themes-overview-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: #ffffff;
}

.themes-frame {
  display: flex;
  flex-direction: column;
  height: 500px;
  align-items: flex-start;
  justify-content: space-around;
  gap: 164px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--x-50-0teal);
  border-radius: 0px 0px 32px 32px;
}

.themes-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 100px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.themes-frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 377px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
}

.themes-frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.themes-text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  margin-right: -9px;
  font-family: var(--dispaly-h2-font-family);
  font-weight: var(--dispaly-h2-font-weight);
  color: #ffffff;
  font-size: var(--dispaly-h2-font-size);
  text-align: center;
  letter-spacing: var(--dispaly-h2-letter-spacing);
  line-height: var(--dispaly-h2-line-height);
  white-space: nowrap;
  font-style: var(--dispaly-h2-font-style);
}

.themes-vector {
  position: relative;
  width: 160.01px;
  height: 8.54px;
  margin-bottom: -3.92px;
  margin-left: -0.01px;
}

.themes-group {
  position: relative;
  width: 333.13px;
  height: 334.16px;
}

.themes-option {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: flex-start;
  gap: 80px;
  padding: 120px 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.themes-div-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.themes-frame-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.themes-frame-4 {
  display: flex;
  flex-direction: column;
  width: 1240px;
  align-items: center;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.themes-frame-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.themes-frame-6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.themes-frame-7 {
  display: flex;
  flex-direction: column;
  width: 1240px;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.themes-text-wrapper-2 {
  width: 864px;
  margin-top: -1px;
  font-weight: var(--title-h1-font-weight);
  font-size: var(--title-h1-font-size);
  text-align: center;
  line-height: var(--title-h1-line-height);
  position: relative;
  font-family: var(--title-h1-font-family);
  color: var(--black);
  letter-spacing: var(--title-h1-letter-spacing);
  font-style: var(--title-h1-font-style);
}

.themes-img {
  position: relative;
  width: 285.51px;
  height: 8.84px;
  margin-bottom: -3.88px;
}

.themes-frame-8 {
  display: flex;
  flex-direction: column;
  width: 560px;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.themes-p {
  position: relative;
  width: 560px;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  text-align: center;
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.themes-frame-9 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.themes-frame-10 {
  display: flex;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.themes-frame-11 {
  display: flex;
  width: 498px;
  height: 460px;
  align-items: flex-start;
  gap: 40px;
  padding: 60px;
  position: relative;
  background-color: #f8f8f9;
  border-radius: 16px 0px 0px 16px;
}

.themes-frame-12 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
}

.themes-text-wrapper-3 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-weight: 700;
  color: var(--black);
  font-size: 24px;
  letter-spacing: -0.24px;
  line-height: 28.8px;
}

.themes-text-wrapper-4 {
  align-self: stretch;
  font-weight: var(--body-p1-font-weight);
  font-size: var(--body-p1-font-size);
  line-height: var(--body-p1-line-height);
  position: relative;
  font-family: var(--body-p1-font-family);
  color: var(--black);
  letter-spacing: var(--body-p1-letter-spacing);
  font-style: var(--body-p1-font-style);
}

.themes-frame-13 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.themes-text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  font-size: 16px;
  letter-spacing: 0.16px;
  line-height: 24px;
  white-space: nowrap;
}

.themes-grid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 41px;
  overflow: hidden;
  transform: rotate(-90deg);
}

.themes-sale {
  position: relative;
  width: 18px;
  height: 18px;
  transform: rotate(90deg);
  background-image: url(./img/chevron-right-7.svg);
  background-size: 100% 100%;
}

.themes-frame-14 {
  position: relative;
  flex: 1;
  flex-grow: 1;
  height: 460px;
}
/* Inject original CSS from globals.css and styleguide.css here */

.themes-themes-overview-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: #ffffff;
}

.themes-frame {
  display: flex;
  flex-direction: column;
  min-height: 500px;
  align-items: flex-start;
  justify-content: space-around;
  gap: 164px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--x-50-0teal);
  border-radius: 0px 0px 32px 32px;
}

.themes-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 100px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.themes-frame-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 377px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
}

.themes-frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.themes-text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  margin-right: -9px;
  font-family: var(--dispaly-h2-font-family);
  font-weight: var(--dispaly-h2-font-weight);
  color: #ffffff;
  font-size: var(--dispaly-h2-font-size);
  text-align: center;
  letter-spacing: var(--dispaly-h2-letter-spacing);
  line-height: var(--dispaly-h2-line-height);
  white-space: nowrap;
  font-style: var(--dispaly-h2-font-style);
}

.themes-vector {
  position: relative;
  width: 160.01px;
  height: 8.54px;
  margin-bottom: -3.92px;
  margin-left: -0.01px;
}

.themes-group {
  position: relative;
  width: 333.13px;
  height: 334.16px;
}

.themes-option {
  display: flex;
  flex-direction: column;
  max-width: 1440px;
  align-items: flex-start;
  gap: 80px;
  padding: 120px 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.themes-div-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.themes-frame-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.themes-frame-4 {
  display: flex;
  flex-direction: column;
  max-width: 1240px;
  align-items: center;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.themes-frame-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.themes-frame-6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.themes-frame-7 {
  display: flex;
  flex-direction: column;
  max-width: 1240px;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.themes-text-wrapper-2 {
  max-width: 864px;
  margin-top: -1px;
  font-weight: var(--title-h1-font-weight);
  font-size: var(--title-h1-font-size);
  text-align: center;
  line-height: var(--title-h1-line-height);
  position: relative;
  font-family: var(--title-h1-font-family);
  color: var(--black);
  letter-spacing: var(--title-h1-letter-spacing);
  font-style: var(--title-h1-font-style);
}

.themes-img {
  position: relative;
  width: 285.51px;
  height: 8.84px;
  margin-bottom: -3.88px;
}

.themes-frame-8 {
  display: flex;
  flex-direction: column;
  max-width: 560px;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.themes-p {
  position: relative;
  max-width: 560px;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  text-align: center;
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.themes-frame-9 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.themes-frame-10 {
  display: flex;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.themes-frame-11 {
  display: flex;
  max-width: 498px;
  min-height: 460px;
  align-items: flex-start;
  gap: 40px;
  padding: 60px;
  position: relative;
  background-color: #f8f8f9;
  border-radius: 16px 0px 0px 16px;
}

.themes-frame-12 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
}

.themes-text-wrapper-3 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-weight: 700;
  color: var(--black);
  font-size: 24px;
  letter-spacing: -0.24px;
  line-height: 28.8px;
}

.themes-text-wrapper-4 {
  align-self: stretch;
  font-weight: var(--body-p1-font-weight);
  font-size: var(--body-p1-font-size);
  line-height: var(--body-p1-line-height);
  position: relative;
  font-family: var(--body-p1-font-family);
  color: var(--black);
  letter-spacing: var(--body-p1-letter-spacing);
  font-style: var(--body-p1-font-style);
}

.themes-frame-13 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.themes-text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  font-size: 16px;
  letter-spacing: 0.16px;
  line-height: 24px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.themes-text-wrapper-5:hover {
  text-decoration: underline;
}

.themes-text-wrapper-5:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.themes-grid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 41px;
  overflow: hidden;
  transform: rotate(-90deg);
}

.themes-sale {
  position: relative;
  width: 18px;
  height: 18px;
  transform: rotate(90deg);
  background-image: url(./img/chevron-right-7.svg);
  background-size: 100% 100%;
}

.themes-frame-14 {
  position: relative;
  flex: 1;
  flex-grow: 1;
  min-height: 460px;
}

/* Themes overview Styling ends */

/* Resource Persons Styling Stars */

.people-directory-of {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: #ffffff;
  max-width: 1440px;
}

.people-frame {
  display: flex;
  flex-direction: column;
  height: 500px;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--x-50-0teal);
  border-radius: 0px 0px 32px 32px;
}

.people-menu {
  display: flex;
  height: 100px;
  align-items: center;
  padding: 0px 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--x-50-0teal);
}

.people-div {
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.people-img {
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
}

.people-vector {
  position: relative;
  width: 1px;
  height: 40px;
}

.people-frame-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.people-frame-3 {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
}

.people-frame-4 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  position: relative;
  flex: 0 0 auto;
}

.people-text-wrapper {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.15px;
  line-height: 22px;
  white-space: nowrap;
}

.people-sale {
  position: relative;
  width: 24px;
  height: 24px;
  transform: rotate(90deg);
  aspect-ratio: 1;
}

.people-chevron-right {
  height: 100%;
  transform: rotate(-90deg);
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.people-div-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 8px;
  position: relative;
  flex: 0 0 auto;
}

.people-text-wrapper-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.15px;
  line-height: 22px;
  white-space: nowrap;
}

.people-frame-5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 8px;
  position: relative;
  flex: 0 0 auto;
}

.people-frame-6 {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 12px;
}

.people-sale-2 {
  margin-top: -4px;
  margin-bottom: -4px;
  background-image: url(./img/chevron-right-1.svg);
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
  background-size: 100% 100%;
}

.people-frame-7 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 100px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.people-frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 377px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
}

.people-frame-8 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.people-text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  margin-right: -272px;
  font-family: var(--dispaly-h2-font-family);
  font-weight: var(--dispaly-h2-font-weight);
  color: #ffffff;
  font-size: var(--dispaly-h2-font-size);
  text-align: center;
  letter-spacing: var(--dispaly-h2-letter-spacing);
  line-height: var(--dispaly-h2-line-height);
  white-space: nowrap;
  font-style: var(--dispaly-h2-font-style);
}

.people-vector-2 {
  position: relative;
  width: 160.01px;
  height: 8.54px;
  margin-bottom: -3.92px;
  margin-left: -0.01px;
}

.people-group {
  position: relative;
  width: 333.13px;
  height: 334.16px;
  margin-top: -27.08px;
  margin-bottom: -27.08px;
}

.people-frame-9 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.people-frame-10 {
  display: flex;
  flex-direction: column;
  width: 392px;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  overflow-y: scroll;
}

.people-frame-10::-webkit-scrollbar {
  width: 0;
  display: none;
}

.people-text-wrapper-4 {
  position: relative;
  width: 379px;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: var(--black);
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  font-style: var(--title-h2-font-style);
}

.people-vector-3 {
  position: relative;
  width: 189px;
  height: 1px;
}

.people-frame-11 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.people-frame-12 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.people-frame-13 {
  display: inline-flex;
  align-items: flex-start;
  gap: 40px;
  padding: 0px 0px 32px;
  position: relative;
  flex: 0 0 auto;
}

.people-frame-14 {
  display: flex;
  width: 808px;
  align-items: flex-start;
  gap: 40px;
  position: relative;
}

.people-frame-15 {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 153px;
  aspect-ratio: 1;
  background-size: cover;
  background-position: 50% 50%;
}

.people-frame-16 {
  display: flex;
  width: 601px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 0px;
  position: relative;
}

.people-frame-17 {
  display: flex;
  flex-direction: column;
  width: 551px;
  align-items: flex-start;
  gap: 24px;
  position: relative;
}

.people-frame-18 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.people-frame-19 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.people-text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 700;
  color: var(--black);
  font-size: 24px;
  letter-spacing: -0.24px;
  line-height: 28.8px;
  white-space: nowrap;
}

.people-vector-4 {
  position: relative;
  width: 1px;
  height: 23px;
}

.people-text-wrapper-6 {
  position: relative;
  width: fit-content;
  font-weight: 600;
  color: var(--black);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 34px;
  white-space: nowrap;
}

.people-vector-5 {
  position: relative;
  width: 117px;
  height: 5px;
  margin-bottom: -2.5px;
}

.people-frame-20 {
  display: inline-flex;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.people-label-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x-50-0yellow);
  border-radius: 41px;
}

.people-label {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: 16px;
  white-space: nowrap;
}

.people-co-founder-executive {
  position: relative;
  align-self: stretch;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: var(--black);
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  font-style: var(--body-p3-font-style);
}

.people-icons-wrapper {
  display: flex;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  position: relative;
  border-radius: 25px;
  aspect-ratio: 1;
}

.people-icons {
  position: relative;
  width: 44px;
  height: 44px;
  margin-top: -5px;
  margin-bottom: -5px;
  margin-left: -5px;
  margin-right: -5px;
  background-image: url(./img/chevron-down-4.svg);
  background-size: 100% 100%;
}

.people-frame-21 {
  display: inline-flex;
  align-items: flex-start;
  gap: 40px;
  padding: 32px 0px;
  position: relative;
  flex: 0 0 auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #cad4de;
}

.people-frame-22 {
  background-image: url(./img/frame-645-1.svg);
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 153px;
  aspect-ratio: 1;
  background-size: cover;
  background-position: 50% 50%;
}

.people-frame-23 {
  display: flex;
  flex-direction: column;
  width: 551px;
  align-items: flex-start;
  gap: 40px;
  position: relative;
}

.people-frame-24 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.people-frame-25 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.people-text-wrapper-7 {
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  letter-spacing: -0.14px;
  line-height: 16px;
  position: relative;
  width: fit-content;
  margin-top: -1px;
  color: var(--black);
  white-space: nowrap;
}

.people-dr-anjlee-agarwal {
  position: relative;
  align-self: stretch;
  font-weight: 400;
  color: var(--black);
  font-size: 18px;
  letter-spacing: 0;
  line-height: 18px;
}

.people-span {
  line-height: 30px;
}

.people-text-wrapper-8 {
  font-weight: 600;
  line-height: 28px;
  text-decoration: underline;
}

.people-frame-26 {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.people-frame-27 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.people-frame-28 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 8px 0px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.people-text-wrapper-9 {
  position: relative;
  align-self: stretch;
  font-family: var(--body-p2-font-family);
  font-weight: var(--body-p2-font-weight);
  color: var(--black);
  font-size: var(--body-p2-font-size);
  letter-spacing: var(--body-p2-letter-spacing);
  line-height: var(--body-p2-line-height);
  font-style: var(--body-p2-font-style);
}

.people-frame-29 {
  display: flex;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  position: relative;
  margin-left: -2.19e-6px;
  border-radius: 25px;
  transform: rotate(180deg);
  aspect-ratio: 1;
}

.people-chevron-down-wrapper {
  position: relative;
  width: 44px;
  height: 44px;
  margin-top: -5px;
  margin-bottom: -5px;
  margin-left: -5px;
  margin-right: -5px;
}

.people-chevron-down {
  height: 100%;
  transform: rotate(-180deg);
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.people-frame-30 {
  background-image: url(./img/frame-645-2.svg);
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 153px;
  aspect-ratio: 1;
  background-size: cover;
  background-position: 50% 50%;
}

.people-frame-31 {
  background-image: url(./img/frame-645-3.svg);
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 153px;
  aspect-ratio: 1;
  background-size: cover;
  background-position: 50% 50%;
}

.people-frame-32 {
  background-image: url(./img/frame-645-4.svg);
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 153px;
  aspect-ratio: 1;
  background-size: cover;
  background-position: 50% 50%;
}

.people-footer-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.people-footer {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  padding: 0px 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--light-blue);
  border-radius: 32px 32px 0px 0px;
  overflow: hidden;
}

.people-frame-33 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.people-frame-34 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.people-frame-35 {
  display: flex;
  flex-direction: column;
  width: 1240px;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
  margin-left: -100px;
  margin-right: -100px;
}

.people-text-wrapper-10 {
  position: relative;
  width: 864px;
  margin-top: -1px;
  font-family: var(--title-h1-font-family);
  font-weight: var(--title-h1-font-weight);
  color: var(--black);
  font-size: var(--title-h1-font-size);
  text-align: center;
  letter-spacing: var(--title-h1-letter-spacing);
  line-height: var(--title-h1-line-height);
  font-style: var(--title-h1-font-style);
}

.people-vector-6 {
  position: relative;
  width: 285.51px;
  height: 8.84px;
  margin-bottom: -3.88px;
}

.people-frame-36 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.people-p {
  position: relative;
  width: 455px;
  margin-top: -1px;
  font-weight: 400;
  color: var(--black);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: 28px;
}

.people-frame-37 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.people-frame-38 {
  display: flex;
  width: 252px;
  height: 54px;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  position: relative;
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid;
  border-color: #dedede;
}

.people-text-wrapper-11 {
  position: relative;
  width: fit-content;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: var(--x-70-0neutral);
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  white-space: nowrap;
  font-style: var(--body-p3-font-style);
}

.people-frame-39 {
  display: inline-flex;
  height: 54px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 12px;
}

.people-sale-3 {
  margin-top: -1px;
  margin-bottom: -1px;
  background-image: url(./img/chevron-right-2.svg);
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
  background-size: 100% 100%;
}

.people-frame-40 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 0px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #d7d7d7;
}

.people-frame-41 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.people-frame-42 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.people-frame-43 {
  position: relative;
  flex: 0 0 auto;
}

.people-frame-44 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.people-frame-45 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  position: relative;
  flex: 0 0 auto;
}

.people-frame-46 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.people-text-wrapper-12 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 700;
  color: var(--black);
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.people-frame-47 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.people-text-wrapper-13 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 400;
  color: var(--black);
  font-size: 13px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.people-text-wrapper-14 {
  position: relative;
  width: 128px;
  margin-top: -1px;
  font-weight: 400;
  color: var(--black);
  font-size: 13px;
  letter-spacing: 0;
  line-height: normal;
}

.people-frame-48 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.people-frame-49 {
  display: flex;
  flex-direction: column;
  width: 160px;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  position: relative;
  flex: 0 0 auto;
}

.people-frame-50 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.people-frame-51 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.people-frame-52 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  position: relative;
  flex: 0 0 auto;
}

.people-frame-53 {
  display: flex;
  flex-direction: column;
  height: 112px;
  align-items: flex-start;
  justify-content: space-around;
  gap: 18px;
  position: relative;
  align-self: stretch;
  width: 100%;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #d7d7d7;
}

.people-frame-54 {
  display: flex;
  width: 206px;
  align-items: center;
  position: relative;
}

.people-frame-55 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  position: relative;
  flex: 0 0 auto;
  margin-right: -15px;
}

.people-frame-56 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  position: relative;
  flex: 0 0 auto;
  margin-right: -221px;
}

.people-frame-57 {
  position: relative;
  width: 190px;
  height: 9px;
}

.people-frame-58 {
  display: inline-flex;
  height: 28px;
  align-items: center;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.people-content {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 24px;
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
}

.people-vector-7 {
  position: relative;
  width: 1px;
  height: 24px;
  margin-left: -0.5px;
}

.people-social-icon {
  position: relative;
  width: 24px;
  height: 24px;
}

.people-vector-8 {
  position: relative;
  width: 1px;
  height: 24px;
}

.people-frame-59 {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.people-quicksand-logo-solid {
  position: relative;
  width: 46px;
  height: 46px;
  aspect-ratio: 1;
}

.people-LOGO-RGB-all-pink {
  position: relative;
  width: 31px;
  height: 44px;
  aspect-ratio: 0.7;
  object-fit: cover;
}

.people-gates-foundation {
  position: relative;
  width: 84px;
  height: 30px;
  aspect-ratio: 2.8;
}

/* Resource Persons Styling Ends */

/* Knowledge Resources Styling Starts */

.resources-knowledge-resources {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: #ffffff;
}

.resources-frame {
  display: flex;
  flex-direction: column;
  height: 500px;
  align-items: flex-start;
  justify-content: space-around;
  gap: 164px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #00807d;
  border-radius: 0px 0px 32px 32px;
}

.resources-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 100px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.resources-frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 377px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
}

.resources-frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.resources-text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  margin-right: -76px;
  font-family: var(--dispaly-h2-font-family);
  font-weight: var(--dispaly-h2-font-weight);
  color: #ffffff;
  font-size: var(--dispaly-h2-font-size);
  text-align: center;
  letter-spacing: var(--dispaly-h2-letter-spacing);
  line-height: var(--dispaly-h2-line-height);
  white-space: nowrap;
  font-style: var(--dispaly-h2-font-style);
}

.resources-vector {
  position: relative;
  width: 160.02px;
  height: 8.54px;
  margin-bottom: -3.92px;
  margin-left: -0.01px;
}

.resources-group {
  position: relative;
  width: 333.13px;
  height: 334.16px;
}

.resources-div-wrapper {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: flex-start;
  gap: 60px;
  padding: 40px 0px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.resources-frame-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.resources-frame-4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.resources-frame-5 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.resources-frame-6 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
  flex: 0 0 auto;
}

.resources-text-wrapper-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 700;
  color: #000000;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 25.2px;
  white-space: nowrap;
}

.resources-frame-7 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
  flex: 0 0 auto;
  opacity: 0.2;
}

.resources-frame-8 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.resources-grid {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--2-radius-radius-md);
  overflow: hidden;
  gap: var(--3-spacing-spacing-xl);
}

.resources-img {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
}

.resources-list-wrapper {
  position: relative;
  width: 44px;
  height: 44px;
  background-color: #f04e631a;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1;
  gap: var(--3-spacing-spacing-xl);
}

.resources-list {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 24px;
  height: 24px;
}

.resources-frame-9 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.resources-frame-10 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  padding: 0px 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.resources-frame-11 {
  display: flex;
  flex-direction: column;
  width: 392px;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
  overflow-y: scroll;
}

.resources-frame-11::-webkit-scrollbar {
  width: 0;
  display: none;
}

.resources-gender-WASH {
  position: relative;
  width: 379px;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: #000000;
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  font-style: var(--title-h2-font-style);
}

.resources-vector-2 {
  position: relative;
  width: 189px;
  height: 1px;
}

.resources-frame-12 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.resources-frame-13 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.resources-card {
  display: flex;
  flex-direction: column;
  width: 392px;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
  background-color: #f8f8f9;
  border-radius: 18px;
  border: 0.5px solid;
  border-color: #d8dbde;
}

.resources-frame-14 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 260px;
}

.resources-frame-15 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  padding: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.resources-frame-16 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.resources-frame-17 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.resources-label-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  position: relative;
  flex: 0 0 auto;
  background-color: #fbc84e;
  border-radius: 41px;
}

.resources-label {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: #000000;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: 16px;
  white-space: nowrap;
}

.resources-frame-18 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.resources-p {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-weight: 600;
  color: #000000;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 30px;
}

.resources-frame-19 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 6px;
  position: relative;
  flex: 0 0 auto;
}

.resources-frame-20 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 1000px;
  border: 1px solid;
  border-color: #d8dbde;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
}

.resources-label-2 {
  width: fit-content;
  font-weight: var(--label-h4-font-weight);
  font-size: var(--label-h4-font-size);
  letter-spacing: var(--label-h4-letter-spacing);
  white-space: nowrap;
  position: relative;
  margin-top: -1px;
  font-family: var(--label-h4-font-family);
  color: #000000;
  text-align: center;
  line-height: var(--label-h4-line-height);
  font-style: var(--label-h4-font-style);
}

.resources-text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 500;
  color: #000000;
  font-size: 15px;
  letter-spacing: 0.15px;
  line-height: 22px;
  white-space: nowrap;
}

.resources-icons-wrapper {
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px;
  position: relative;
  background-color: #f04e63;
  border-radius: 26px;
  aspect-ratio: 1;
}

.resources-icons {
  position: relative;
  width: 18px;
  height: 18px;
  background-image: url(./img/arrow-right-18.svg);
  background-size: 100% 100%;
}

.resources-text-wrapper-4 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-weight: 600;
  color: #000000;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 30px;
}

.resources-frame-21 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.resources-image {
  position: relative;
  align-self: stretch;
  width: 100%;
  aspect-ratio: 1.51;
}

.resources-frame-22 {
  display: flex;
  width: 108px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  position: relative;
  flex: 0 0 auto;
  background-color: #fbc84e;
  border-radius: 41px;
}

.resources-label-3 {
  width: 115px;
  margin-left: -17.5px;
  margin-right: -17.5px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  position: relative;
  margin-top: -1px;
  color: #000000;
  text-align: center;
  line-height: 16px;
}

.resources-frame-23 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.resources-text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-right: -17px;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: #000000;
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  white-space: nowrap;
  font-style: var(--title-h2-font-style);
}

.resources-image-2 {
  position: relative;
  width: 389px;
  height: 260px;
  aspect-ratio: 1.5;
}

.resources-image-3 {
  position: relative;
  width: 392px;
  height: 257px;
  aspect-ratio: 1.52;
  object-fit: cover;
}

.resources-frame-24 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding: 0px 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.resources-text-wrapper-6 {
  position: relative;
  width: fit-content;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: #000000;
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  white-space: nowrap;
  font-style: var(--title-h2-font-style);
}

.resources-frame-25 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 262px;
}
.knowledge-resources {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: #ffffff;
}

.resources-frame {
  display: flex;
  flex-direction: column;
  height: 500px;
  align-items: flex-start;
  justify-content: space-around;
  gap: 164px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #00807d;
  border-radius: 0px 0px 32px 32px;
}

.resources-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 100px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.resources-frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 377px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
}

.resources-frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.resources-text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  margin-right: -76px;
  font-family: var(--dispaly-h2-font-family);
  font-weight: var(--dispaly-h2-font-weight);
  color: #ffffff;
  font-size: var(--dispaly-h2-font-size);
  text-align: center;
  letter-spacing: var(--dispaly-h2-letter-spacing);
  line-height: var(--dispaly-h2-line-height);
  white-space: nowrap;
  font-style: var(--dispaly-h2-font-style);
}

.resources-vector {
  position: relative;
  width: 160.02px;
  height: 8.54px;
  margin-bottom: -3.92px;
  margin-left: -0.01px;
}

/* Knowledge Resources Styling Ends */

/* About page styling starts */

.about-about-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  width: 1440px;
}

.about-frame {
  display: flex;
  flex-direction: column;
  height: 500px;
  align-items: flex-start;
  justify-content: space-around;
  gap: 164px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--x-50-0teal);
  border-radius: 0px 0px 32px 32px;
}

.about-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 100px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.about-frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 377px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
}

.about-centre-for-inclusive {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--dispaly-h2-font-family);
  font-weight: var(--dispaly-h2-font-weight);
  color: #ffffff;
  font-size: var(--dispaly-h2-font-size);
  letter-spacing: var(--dispaly-h2-letter-spacing);
  line-height: var(--dispaly-h2-line-height);
  font-style: var(--dispaly-h2-font-style);
}

.about-group {
  position: relative;
  width: 333.13px;
  height: 334.16px;
}

.about-theme-listing-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  padding: 100px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.about-div-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  padding: 0px 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.about-frame-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.about-frame-6 {
  display: flex;
  flex-direction: column;
  width: 392px;
  align-items: flex-start;
  gap: 5px;
  position: relative;
  flex: 0 0 auto;
  margin-right: -68px;
  overflow-y: scroll;
}

.about-frame-6::-webkit-scrollbar {
  width: 0;
  display: none;
}

.about-frame-7 {
  display: flex;
  flex-direction: column;
  width: 816px;
  align-items: flex-start;
  gap: 40px;
  position: relative;
}

.about-p {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--title-h3-font-family);
  font-weight: var(--title-h3-font-weight);
  color: var(--black);
  font-size: var(--title-h3-font-size);
  letter-spacing: var(--title-h3-letter-spacing);
  line-height: var(--title-h3-line-height);
  font-style: var(--title-h3-font-style);
}

.about-frame-9 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 543px;
}

.about-frame-10 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  padding: 0px 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.about-frame-11 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.about-frame-12 {
  display: flex;
  flex-direction: column;
  width: 392px;
  align-items: flex-start;
  gap: 24px;
  position: relative;
}

.about-frame-13 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.about-frame-14 {
  display: flex;
  flex-direction: column;
  width: 392px;
  align-items: flex-start;
  gap: 5px;
  position: relative;
  flex: 0 0 auto;
  overflow-y: scroll;
}

.about-frame-14::-webkit-scrollbar {
  width: 0;
  display: none;
}

.about-frame-15 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.about-frame-16 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.about-text-wrapper-3 {
  /* position: relative; */
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.about-frame-17 {
  display: flex;
  flex-direction: column;
  width: 816px;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
}

.about-frame-19 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.about-frame-20 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 496px;
}

.about-frame-21 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.about-frame-22 {
  display: flex;
  flex-direction: column;
  width: 816px;
  align-items: flex-start;
  padding: 0px 40px;
  position: relative;
  flex: 0 0 auto;
}

.about-frame-23 {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  padding: 40px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #dedede;
}

.about-frame-24 {
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.about-frame-25 {
  position: relative;
  align-self: stretch;
  width: 268px;
  object-fit: cover;
}

.about-frame-26 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 16px 0px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.about-frame-27 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.about-label-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x-50-0yellow);
  border-radius: 1000px;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
}

.about-label {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  font-size: 18px;
  text-align: center;
  letter-spacing: -0.18px;
  line-height: 16px;
  white-space: nowrap;
}

.about-frame-28 {
  position: relative;
  width: 268px;
  height: 221px;
  object-fit: cover;
}

.about-frame-29 {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  padding: 40px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.about-vector-2 {
  position: absolute;
  top: 37px;
  left: 0;
  width: 1px;
  height: 1191px;
}

.about-rectangle {
  position: absolute;
  top: 951px;
  left: 0;
  width: 835px;
  height: 321px;
  background: linear-gradient(
    360deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.about-ellipse {
  position: absolute;
  top: 363px;
  left: 405px;
  width: 38px;
  height: 38px;
  background-color: var(--x-50-0yellow);
  border-radius: 19px;
  border: 10px solid;
  border-color: #fbc84e1a;
}

.about-ellipse-2 {
  position: absolute;
  top: 692px;
  left: 417px;
  width: 14px;
  height: 14px;
  background-color: #cad4de;
  border-radius: 7px;
  aspect-ratio: 1;
}

.about-ellipse-3 {
  position: absolute;
  top: 1009px;
  left: 417px;
  width: 14px;
  height: 14px;
  background-color: #cad4de;
  border-radius: 7px;
  aspect-ratio: 1;
}

.about-ellipse-4 {
  position: absolute;
  top: 1326px;
  left: 417px;
  width: 14px;
  height: 14px;
  background-color: #cad4de;
  border-radius: 7px;
  aspect-ratio: 1;
}
/* Original CSS code should be injected here from style.css */

.about-about-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.about-frame {
  display: flex;
  flex-direction: column;
  height: 500px;
  align-items: flex-start;
  justify-content: space-around;
  gap: 164px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--x-50-0teal);
  border-radius: 0px 0px 32px 32px;
}

.about-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 100px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.about-frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 377px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
}

.about-frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.about-centre-for-inclusive {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--dispaly-h2-font-family);
  font-weight: var(--dispaly-h2-font-weight);
  color: #ffffff;
  font-size: var(--dispaly-h2-font-size);
  letter-spacing: var(--dispaly-h2-letter-spacing);
  line-height: var(--dispaly-h2-line-height);
  font-style: var(--dispaly-h2-font-style);
}

.about-vector {
  position: relative;
  width: 170.02px;
  height: 16.54px;
  margin-bottom: -3.92px;
  margin-left: -0.01px;
}

.about-group {
  position: relative;
  width: 333.13px;
  height: 334.16px;
}

.about-frame-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.about-frame-6::-webkit-scrollbar {
  width: 0;
  display: none;
}

.about-text-wrapper {
  position: relative;
  width: fit-content;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: var(--black);
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  white-space: nowrap;
  font-style: var(--title-h2-font-style);
}

.about-img {
  position: relative;
  width: 129px;
  height: 20px;
}

.about-frame-8 {
  display: flex;
  flex-direction: column;
  width: 816px;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.about-p {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--title-h3-font-family);
  font-weight: var(--title-h3-font-weight);
  color: var(--black);
  font-size: var(--title-h3-font-size);
  letter-spacing: var(--title-h3-letter-spacing);
  line-height: var(--title-h3-line-height);
  font-style: var(--title-h3-font-style);
}

.about-frame-9 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 543px;
}

.about-frame-10 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  padding: 0px 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.about-frame-11 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.about-frame-12 {
  display: flex;
  flex-direction: column;
  width: 392px;
  align-items: flex-start;
  gap: 24px;
  position: relative;
}

.about-frame-13 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.about-frame-14::-webkit-scrollbar {
  width: 0;
  display: none;
}

.about-frame-15 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.about-frame-16 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.about-text-wrapper-3 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.about-text-wrapper-4 {
  /* position: relative; */
  width: 295px;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: var(--black);
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  font-style: var(--title-h2-font-style);
}

.about-frame-17 {
  display: flex;
  flex-direction: column;
  width: 816px;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
}

.about-frame-18 {
  position: relative;
  /* align-self: stretch; */
  width: 100%;
  flex: 0 0 auto;
}

.about-frame-19 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.about-frame-20 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 496px;
}

.about-text-wrapper-5 {
  /* position: relative; */
  width: 324px;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: var(--black);
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  font-style: var(--title-h2-font-style);
}

.about-frame-21 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.about-frame-22 {
  display: flex;
  flex-direction: column;
  width: 816px;
  align-items: flex-start;
  padding: 0px 40px;
  position: relative;
  flex: 0 0 auto;
}

.about-frame-23 {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  padding: 40px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #dedede;
}

.about-frame-24 {
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.about-frame-25 {
  position: relative;
  align-self: stretch;
  width: 268px;
  object-fit: cover;
}

.about-frame-26 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 16px 0px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.about-frame-27 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.about-label-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x-50-0yellow);
  border-radius: 1000px;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
}

.about-label {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  font-size: 18px;
  text-align: center;
  letter-spacing: -0.18px;
  line-height: 16px;
  white-space: nowrap;
}

.about-frame-28 {
  position: relative;
  width: 268px;
  height: 221px;
  object-fit: cover;
}

.about-frame-29 {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  padding: 40px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.about-vector-2 {
  position: absolute;
  top: 37px;
  left: 0;
  width: 1px;
  height: 1191px;
}

.about-rectangle {
  position: absolute;
  top: 951px;
  left: 0;
  width: 835px;
  height: 321px;
  background: linear-gradient(
    360deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.about-ellipse {
  position: absolute;
  top: 363px;
  left: 405px;
  width: 38px;
  height: 38px;
  background-color: var(--x-50-0yellow);
  border-radius: 19px;
  border: 10px solid;
  border-color: #fbc84e1a;
}

.about-ellipse-2 {
  position: absolute;
  top: 692px;
  left: 417px;
  width: 14px;
  height: 14px;
  background-color: #cad4de;
  border-radius: 7px;
  aspect-ratio: 1;
}

.about-ellipse-3 {
  position: absolute;
  top: 1009px;
  left: 417px;
  width: 14px;
  height: 14px;
  background-color: #cad4de;
  border-radius: 7px;
  aspect-ratio: 1;
}

.about-ellipse-4 {
  position: absolute;
  top: 1326px;
  left: 417px;
  width: 14px;
  height: 14px;
  background-color: #cad4de;
  border-radius: 7px;
  aspect-ratio: 1;
}

/* About page styling ends */

/* Homepage styling starts */
.homepage-styling-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background-color: #ffffff;
  max-width: 1440px;
}

.homepage-styling-div {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--light-blue);
  border-radius: 0px 0px 32px 32px;
}

.homepage-styling-dropdown {
  position: relative;
  width: 1440px;
  height: 700px;
  background-color: var(--x-50-0yellow);
  border-radius: 0px 0px 32px 32px;
}

.homepage-styling-frame {
  width: 1440px;
  display: flex;
  border-radius: 0px 0px 32px 32px;
}

.homepage-styling-frame-wrapper {
  width: 1440px;
  display: flex;
}

.homepage-styling-frame-2 {
  width: 1440px;
  height: 700px;
  position: relative;
  background-color: var(--x-50-0yellow);
  border-radius: 32px;
}

.homepage-styling-div-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  position: absolute;
  top: 91px;
  left: calc(50% - 336px);
}

.homepage-styling-frame-3 {
  display: flex;
  flex-direction: column;
  width: 672px;
  align-items: center;
  gap: 60px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
  margin-left: -32px;
  margin-right: -32px;
}

.homepage-styling-frame-5 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-text-wrapper {
  position: relative;
  width: 736px;
  margin-top: -1px;
  font-family: var(--display-h1-font-family);
  font-weight: var(--display-h1-font-weight);
  color: var(--black);
  font-size: var(--display-h1-font-size);
  text-align: center;
  letter-spacing: var(--display-h1-letter-spacing);
  line-height: var(--display-h1-line-height);
  font-style: var(--display-h1-font-style);
}

.homepage-styling-vector {
  position: relative;
  width: 394.5px;
  height: 8.35px;
  margin-bottom: -3.39px;
}

.homepage-styling-p {
  position: relative;
  width: 528px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  text-align: center;
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.homepage-styling-frame-6 {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-7 {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0px 24px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 12px;
}

.homepage-styling-PRIMARY {
  position: relative;
  width: fit-content;
  font-family: var(--label-h3-font-family);
  font-weight: var(--label-h3-font-weight);
  color: #ffffff;
  font-size: var(--label-h3-font-size);
  letter-spacing: var(--label-h3-letter-spacing);
  line-height: var(--label-h3-line-height);
  white-space: nowrap;
  font-style: var(--label-h3-font-style);
}

.homepage-styling-sale {
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
  background-image: url(./img/home-button-chevron-right.svg) !important;
  position: relative;
  background-size: 100% 100%;
}

.homepage-styling-frame-8 {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0px 24px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 12px;
  border: 1px solid;
  border-color: var(--black);
}

.homepage-styling-SECONDARY {
  position: relative;
  width: fit-content;
  font-family: var(--label-h3-font-family);
  font-weight: var(--label-h3-font-weight);
  color: var(--black);
  font-size: var(--label-h3-font-size);
  letter-spacing: var(--label-h3-letter-spacing);
  line-height: var(--label-h3-line-height);
  white-space: nowrap;
  font-style: var(--label-h3-font-style);
}

.homepage-styling-sale-2 {
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
  background-image: url(./img/home-button-chevron-right-1.svg) !important;
  position: relative;
  background-size: 100% 100%;
}

.homepage-styling-layer {
  position: absolute;
  top: 336px;
  left: 100px;
  width: 182px;
  height: 270px;
}

.homepage-styling-frame-9 {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: flex-start;
  justify-content: center;
  padding: 0px 16px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 0px 0px 32px 32px;
}

.homepage-styling-frame-10 {
  display: flex;
  flex-direction: column;
  height: 100px;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  border-radius: 0px 0px 32px 32px;
  overflow: hidden;
}

.homepage-styling-frame-11 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  margin-top: -25px;
  border-radius: 0px 0px 54px 54px;
  overflow: hidden;
}

.homepage-styling-frame-12 {
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage-styling-text-wrapper-2 {
  position: relative;
  width: fit-content;
  font-weight: 600;
  color: var(--black);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 25.4px;
  white-space: nowrap;
}

.homepage-styling-img {
  position: relative;
  width: 1px;
  height: 35.5px;
}

.homepage-styling-frame-13 {
  position: relative;
  flex: 0 0 auto;
  height: 70px;
}

.homepage-styling-frame-14 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 112px;
  padding: 100px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage-styling-frame-15 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0px 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-radius: 32px;
}

.homepage-styling-frame-16 {
  display: flex;
  flex-direction: column;
  height: 90px;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.homepage-styling-frame-17 {
  flex: 0 0 auto;
  margin-bottom: -42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.homepage-styling-frame-18 {
  display: flex;
  flex-direction: column;
  width: 673px;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-text-wrapper-3 {
  position: relative;
  width: 720px;
  height: 132px;
  margin-top: -1px;
  margin-left: -23.5px;
  margin-right: -23.5px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  text-align: center;
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.homepage-styling-option {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: flex-start;
  gap: 60px;
  padding: 0px 100px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-19 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage-styling-frame-20 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-21 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage-styling-frame-22 {
  height: 87px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.homepage-styling-frame-23 {
  display: flex;
  flex-direction: column;
  width: 1240px;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-add-an-inclusion {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 864px;
  height: 86px;
  margin-top: -1px;
  font-family: var(--title-h1-font-family);
  font-weight: var(--title-h1-font-weight);
  color: var(--black);
  font-size: var(--title-h1-font-size);
  text-align: center;
  letter-spacing: var(--title-h1-letter-spacing);
  line-height: var(--title-h1-line-height);
  font-style: var(--title-h1-font-style);
}

.homepage-styling-vector-2 {
  position: relative;
  width: 285.51px;
  height: 8.84px;
  margin-bottom: -3.88px;
}

.homepage-styling-text-wrapper-4 {
  position: relative;
  width: 652px;
  height: 23px;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  text-align: center;
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  white-space: nowrap;
  font-style: var(--body-p1-font-style);
}

.homepage-styling-frame-24 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  overflow-x: auto;
  width: 100%;
  /* Remove min-width, max-width, and margin-right */
}

.homepage-styling-frame-25 {
  display: flex;
  flex-direction: column;
  width: 604px;
  align-items: flex-start;
  position: relative;
}

.homepage-styling-frame-26 {
  display: flex;
  height: 460px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  border-radius: 16px;
}

.homepage-styling-frame-27 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage-styling-text-wrapper-5 {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-weight: 700;
  color: var(--black);
  font-size: 24px;
  letter-spacing: -0.24px;
  line-height: 28.8px;
}

.homepage-styling-crea-wrapper {
  display: flex;
  height: 460px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.homepage-styling-crea {
  position: relative;
  width: 604px;
  height: 460px;
  margin-top: -24px;
  margin-bottom: -24px;
  margin-left: -24px;
  margin-right: -24px;
  aspect-ratio: 1.5;
  object-fit: cover;
}

.homepage-styling-frame-28 {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: #f7f8f8;
  border-radius: 32px;
}

.homepage-styling-frame-29 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage-styling-frame-30 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-31 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage-styling-text-wrapper-6 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--title-h1-font-family);
  font-weight: var(--title-h1-font-weight);
  color: var(--black);
  font-size: var(--title-h1-font-size);
  text-align: center;
  letter-spacing: var(--title-h1-letter-spacing);
  line-height: var(--title-h1-line-height);
  white-space: nowrap;
  font-style: var(--title-h1-font-style);
}

.homepage-styling-frame-32 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-33 {
  display: flex;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage-styling-frame-34 {
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  border-radius: 16px 0px 0px 16px;
  overflow: hidden;
  background-image: url(./img/frame-1000004395.png);
  background-size: cover;
  background-position: 50% 50%;
}

.homepage-styling-frame-35 {
  display: flex;
  flex-direction: column;
  width: 104px;
  height: 104px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  position: relative;
  top: 24px;
  left: 27px;
  background-color: var(--black);
  border-radius: 12px;
}

.homepage-styling-frame-36 {
  display: inline-flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-text-wrapper-8 {
  font-weight: 600;
  color: #ffffff;
  font-size: 15px;
  margin-top: -45% !important;
  text-align: center;
  letter-spacing: 1px; /* Minimal spacing */
  line-height: 1.2; /* Better line height */
}

.homepage-styling-frame-37 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 60px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: var(--black);
  border-radius: 0px 16px 16px 0px;
}

.homepage-styling-frame-38 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-39 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 8px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-40 {
  display: flex;
  flex-wrap: wrap;
  width: 349px;
  align-items: center;
  gap: 10px 10px;
  position: relative;
}

.homepage-styling-label-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 1000px;
  border: 1px solid;
  border-color: #ffffff99;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-label {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--label-h3-font-family);
  font-weight: var(--label-h3-font-weight);
  color: #ffffff;
  font-size: var(--label-h3-font-size);
  text-align: center;
  letter-spacing: var(--label-h3-letter-spacing);
  line-height: var(--label-h3-line-height);
  white-space: nowrap;
  font-style: var(--label-h3-font-style);
}

.homepage-styling-text-wrapper-9 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: var(--light-blue);
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  font-style: var(--title-h2-font-style);
}

.homepage-styling-nulla-non-turpis {
  position: relative;
  align-self: stretch;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: #ffffffcc;
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-style: var(--body-p1-font-style);
}

.homepage-styling-text-wrapper-10 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--x-50-0yellow);
  font-size: 20px;
  letter-spacing: 0;
  line-height: 30px;
  white-space: nowrap;
}

.homepage-styling-frame-41 {
  display: inline-flex;
  height: 24px;
  align-items: center;
  gap: 8px;
  position: relative;
}

.homepage-styling-text-wrapper-11 {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 28px;
  white-space: nowrap;
}

.homepage-styling-text-wrapper-12 {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 28px;
  white-space: nowrap;
}

.homepage-styling-arrows {
  display: inline-flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-42 {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  gap: 60px;
  padding: 0px 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.homepage-styling-equip-yourself-with {
  position: relative;
  width: 864px;
  margin-top: -1px;
  font-family: var(--title-h1-font-family);
  font-weight: var(--title-h1-font-weight);
  color: var(--black);
  font-size: var(--title-h1-font-size);
  text-align: center;
  letter-spacing: var(--title-h1-letter-spacing);
  line-height: var(--title-h1-line-height);
  font-style: var(--title-h1-font-style);
}

.homepage-styling-frame-43 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-text-wrapper-13 {
  position: relative;
  width: 560px;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  text-align: center;
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.homepage-styling-frame-44 {
  display: flex;
  width: 1440px;
  align-items: flex-start;
  gap: 32px;
  padding: 0px 100px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-45 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.homepage-styling-frame-46 {
  display: flex;
  height: 280px;
  align-items: center;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.homepage-styling-frame-47 {
  display: flex;
  flex-direction: column;
  width: 392px;
  height: 219px;
  align-items: flex-start;
  gap: 80px;
  padding: 40px;
  position: relative;
  background-color: var(--x-50-0yellow);
  border-radius: 16px;
}

.homepage-styling-frame-48 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
  gap: 120px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.homepage-styling-text-wrapper-14 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-weight: 700;
  color: var(--black);
  font-size: 24px;
  letter-spacing: -0.5px;
  line-height: 32px;
}

.homepage-styling-frame-49 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-know-more {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  font-size: 16px;
  letter-spacing: 0.16px;
  line-height: 24px;
  white-space: nowrap;
}

.homepage-styling-grid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 41px;
  overflow: hidden;
  transform: rotate(-90deg);
}

.homepage-styling-sale-3 {
  width: 18px;
  height: 18px;
  transform: rotate(90deg);
  background-image: url(./img/chevron-right-9.svg);
  position: relative;
  background-size: 100% 100%;
}

.homepage-styling-frame-50 {
  display: flex;
  flex-direction: column;
  height: 219px;
  align-items: flex-start;
  gap: 80px;
  padding: 40px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: var(--x-50-0yellow);
  border-radius: 16px;
}

.homepage-styling-stories-no-image {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: #f9fafb;
  border-radius: 32px;
}

.homepage-styling-frame-51 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 60px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: var(--black);
  border-radius: 16px;
}

.homepage-styling-image {
  position: relative;
  width: 56px;
  height: 43px;
}

.homepage-styling-text-wrapper-15 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-weight: 400;
  color: var(--white);
  font-size: 24px;
  letter-spacing: 0;
  line-height: 36px;
}

.homepage-styling-text-wrapper-16 {
  position: relative;
  width: fit-content;
  font-weight: 700;
  color: var(--x-50-0yellow);
  font-size: 18px;
  letter-spacing: 0;
  line-height: 30px;
  white-space: nowrap;
}

.homepage-styling-frame-52 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 40px 0px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #ffffff99;
}

.homepage-styling-frame-53 {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage-styling-frame-54 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.homepage-styling-text-wrapper-17 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 700;
  color: var(--x-50-0yellow);
  font-size: 18px;
  letter-spacing: 0;
  line-height: 30px;
  white-space: nowrap;
}

.homepage-styling-text-wrapper-18 {
  position: relative;
  align-self: stretch;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: var(--white);
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  font-style: var(--body-p3-font-style);
}

.homepage-styling-div {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1440px;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--light-blue);
  border-radius: 0px 0px 32px 32px;
}

.homepage-styling-dropdown {
  position: relative;
  width: 100%;
  max-width: 1440px;
  height: 700px;
  background-color: var(--x-50-0yellow);
  border-radius: 0px 0px 32px 32px;
}

.homepage-styling-frame {
  width: 100%;
  max-width: 1440px;
  display: flex;
  border-radius: 0px 0px 32px 32px;
}

.homepage-styling-frame-wrapper {
  width: 100%;
  max-width: 1440px;
  display: flex;
}

.homepage-styling-frame-2 {
  width: 100%;
  max-width: 1440px;
  height: 700px;
  position: relative;
  background-color: var(--x-50-0yellow);
  border-radius: 32px;
}

.homepage-styling-div-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  position: absolute;
  top: 91px;
  left: calc(50% - 336px);
}

.homepage-styling-frame-3 {
  display: flex;
  flex-direction: column;
  width: 672px;
  align-items: center;
  gap: 60px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
  margin-left: -32px;
  margin-right: -32px;
}

.homepage-styling-frame-5 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-text-wrapper {
  position: relative;
  width: 736px;
  margin-top: -1px;
  font-family: var(--display-h1-font-family);
  font-weight: var(--display-h1-font-weight);
  color: var(--black);
  font-size: var(--display-h1-font-size);
  text-align: center;
  letter-spacing: var(--display-h1-letter-spacing);
  line-height: var(--display-h1-line-height);
  font-style: var(--display-h1-font-style);
}

.homepage-styling-vector {
  position: relative;
  width: 394.5px;
  height: 8.35px;
  margin-bottom: -3.39px;
}

.homepage-styling-p {
  position: relative;
  width: 528px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  text-align: center;
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.homepage-styling-frame-6 {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-7 {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0px 24px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.homepage-styling-frame-7:hover {
  background-color: var(--x700crea-pink);
}

.homepage-styling-frame-7:focus {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.homepage-styling-PRIMARY {
  position: relative;
  width: fit-content;
  font-family: var(--label-h3-font-family);
  font-weight: var(--label-h3-font-weight);
  color: #ffffff;
  font-size: var(--label-h3-font-size);
  letter-spacing: var(--label-h3-letter-spacing);
  line-height: var(--label-h3-line-height);
  white-space: nowrap;
  font-style: var(--label-h3-font-style);
}

.homepage-styling-sale {
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
  background-image: url(./img/chevron-right-2.svg);
  position: relative;
  background-size: 100% 100%;
}

.homepage-styling-frame-8 {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0px 24px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 12px;
  border: 1px solid;
  border-color: var(--black);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.homepage-styling-frame-8:hover {
  background-color: var(--x-5-0neutral);
}

.homepage-styling-frame-8:focus {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.homepage-styling-SECONDARY {
  position: relative;
  width: fit-content;
  font-family: var(--label-h3-font-family);
  font-weight: var(--label-h3-font-weight);
  color: var(--black);
  font-size: var(--label-h3-font-size);
  letter-spacing: var(--label-h3-letter-spacing);
  line-height: var(--label-h3-line-height);
  white-space: nowrap;
  font-style: var(--label-h3-font-style);
}

.homepage-styling-sale-2 {
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
  background-image: url(./img/chevron-right-3.svg);
  position: relative;
  background-size: 100% 100%;
}

.homepage-styling-layer {
  position: absolute;
  top: 336px;
  left: 100px;
  width: 182px;
  height: 270px;
}

.homepage-styling-frame-9 {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1440px;
  align-items: flex-start;
  justify-content: center;
  padding: 0px 16px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 0px 0px 32px 32px;
}

.homepage-styling-frame-10 {
  display: flex;
  flex-direction: column;
  height: 100px;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  border-radius: 0px 0px 32px 32px;
  overflow: hidden;
}

.homepage-styling-frame-11 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  margin-top: -25px;
  border-radius: 0px 0px 54px 54px;
  overflow: hidden;
}

.homepage-styling-frame-12 {
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage-styling-text-wrapper-2 {
  position: relative;
  width: fit-content;
  font-weight: 600;
  color: var(--black);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 25.4px;
  white-space: nowrap;
}

.homepage-styling-img {
  position: relative;
  width: 1px;
  height: 35.5px;
}

.homepage-styling-frame-13 {
  position: relative;
  flex: 0 0 auto;
  height: 70px;
}

.homepage-styling-frame-14 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 112px;
  padding: 100px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage-styling-frame-15 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0px 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-radius: 32px;
}

.homepage-styling-frame-16 {
  display: flex;
  flex-direction: column;
  height: 90px;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.homepage-styling-frame-17 {
  flex: 0 0 auto;
  margin-bottom: -42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.homepage-styling-frame-18 {
  display: flex;
  flex-direction: column;
  width: 673px;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-text-wrapper-3 {
  position: relative;
  width: 720px;
  height: 132px;
  margin-top: -1px;
  margin-left: -23.5px;
  margin-right: -23.5px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  text-align: center;
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.homepage-styling-option {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1440px;
  align-items: flex-start;
  gap: 60px;
  padding: 0px 100px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-19 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage-styling-frame-20 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-21 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage-styling-frame-22 {
  height: 87px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.homepage-styling-frame-23 {
  display: flex;
  flex-direction: column;
  width: 1240px;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-add-an-inclusion {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 864px;
  height: 86px;
  margin-top: -1px;
  font-family: var(--title-h1-font-family);
  font-weight: var(--title-h1-font-weight);
  color: var(--black);
  font-size: var(--title-h1-font-size);
  text-align: center;
  letter-spacing: var(--title-h1-letter-spacing);
  line-height: var(--title-h1-line-height);
  font-style: var(--title-h1-font-style);
}

.homepage-styling-vector-2 {
  position: relative;
  width: 285.51px;
  height: 8.84px;
  margin-bottom: -3.88px;
}

.homepage-styling-text-wrapper-4 {
  position: relative;
  width: 652px;
  height: 23px;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  text-align: center;
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  white-space: nowrap;
  font-style: var(--body-p1-font-style);
}

.homepage-styling-frame-25 {
  display: flex;
  flex-direction: column;
  width: 604px;
  align-items: flex-start;
  position: relative;
}

.homepage-styling-frame-26 {
  display: flex;
  height: 460px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  border-radius: 16px;
}

.homepage-styling-frame-27 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage-styling-text-wrapper-5 {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-weight: 700;
  color: var(--black);
  font-size: 24px;
  letter-spacing: -0.24px;
  line-height: 28.8px;
}

.homepage-styling-crea-wrapper {
  display: flex;
  height: 460px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.homepage-styling-crea {
  position: relative;
  width: 604px;
  height: 460px;
  margin-top: -24px;
  margin-bottom: -24px;
  margin-left: -24px;
  margin-right: -24px;
  aspect-ratio: 1.5;
  object-fit: cover;
}

.homepage-styling-frame-28 {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1440px;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: #f7f8f8;
  border-radius: 32px;
}

.homepage-styling-frame-29 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage-styling-frame-31 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage-styling-text-wrapper-6 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--title-h1-font-family);
  font-weight: var(--title-h1-font-weight);
  color: var(--black);
  font-size: var(--title-h1-font-size);
  text-align: center;
  letter-spacing: var(--title-h1-letter-spacing);
  line-height: var(--title-h1-line-height);
  white-space: nowrap;
  font-style: var(--title-h1-font-style);
}

.homepage-styling-vector-3 {
  position: relative;
  width: 112.01px;
  height: 8.21px;
  margin-bottom: -3.96px;
  margin-left: -0.01px;
}

.homepage-styling-frame-32 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-33 {
  display: flex;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage-styling-frame-34 {
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  border-radius: 16px 0px 0px 16px;
  overflow: hidden;
  background-image: url(./img/frame-1000004395.png);
  background-size: cover;
  background-position: 50% 50%;
}

.homepage-styling-frame-35 {
  display: flex;
  flex-direction: column;
  width: 104px;
  height: 104px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  position: relative;
  top: 24px;
  left: 27px;
  background-color: var(--black);
  border-radius: 12px;
}

.homepage-styling-text-wrapper-7 {
  font-weight: 700;
  color: #ffffff;
  font-size: 32px; /* Smaller than 48px */
  text-align: center;
  letter-spacing: 0px; /* Remove excessive spacing */
  line-height: 1.2; /* Better line height */
}

.homepage-styling-frame-37 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 60px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: var(--black);
  border-radius: 0px 16px 16px 0px;
}

.homepage-styling-frame-38 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-39 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 8px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-40 {
  display: flex;
  flex-wrap: wrap;
  width: 349px;
  align-items: center;
  gap: 10px 10px;
  position: relative;
}

.homepage-styling-label-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 1000px;
  border: 1px solid;
  border-color: #ffffff99;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-label {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--label-h3-font-family);
  font-weight: var(--label-h3-font-weight);
  color: #ffffff;
  font-size: var(--label-h3-font-size);
  text-align: center;
  letter-spacing: var(--label-h3-letter-spacing);
  line-height: var(--label-h3-line-height);
  white-space: nowrap;
  font-style: var(--label-h3-font-style);
}

.homepage-styling-text-wrapper-9 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: var(--light-blue);
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  font-style: var(--title-h2-font-style);
}

.homepage-styling-nulla-non-turpis {
  position: relative;
  align-self: stretch;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: #ffffffcc;
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-style: var(--body-p1-font-style);
}

.homepage-styling-text-wrapper-10 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--x-50-0yellow);
  font-size: 20px;
  letter-spacing: 0;
  line-height: 30px;
  white-space: nowrap;
}

.homepage-styling-frame-41 {
  display: inline-flex;
  height: 24px;
  align-items: center;
  gap: 8px;
  position: relative;
}

.homepage-styling-text-wrapper-11 {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 28px;
  white-space: nowrap;
}

.homepage-styling-text-wrapper-12 {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 28px;
  white-space: nowrap;
}

.homepage-styling-arrows {
  display: inline-flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-42 {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1440px;
  align-items: center;
  gap: 60px;
  padding: 0px 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.homepage-styling-equip-yourself-with {
  position: relative;
  width: 864px;
  margin-top: -1px;
  font-family: var(--title-h1-font-family);
  font-weight: var(--title-h1-font-weight);
  color: var(--black);
  font-size: var(--title-h1-font-size);
  text-align: center;
  letter-spacing: var(--title-h1-letter-spacing);
  line-height: var(--title-h1-line-height);
  font-style: var(--title-h1-font-style);
}

.homepage-styling-frame-43 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-text-wrapper-13 {
  position: relative;
  width: 560px;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  text-align: center;
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.homepage-styling-frame-44 {
  display: flex;
  width: 100%;
  max-width: 1440px;
  align-items: flex-start;
  gap: 32px;
  padding: 0px 100px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-frame-45 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.homepage-styling-frame-46 {
  display: flex;
  height: 280px;
  align-items: center;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.homepage-styling-frame-47 {
  display: flex;
  flex-direction: column;
  width: 392px;
  height: 219px;
  align-items: flex-start;
  gap: 80px;
  padding: 40px;
  position: relative;
  background-color: var(--x-50-0yellow);
  border-radius: 16px;
}

.homepage-styling-frame-48 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
  gap: 120px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.homepage-styling-text-wrapper-14 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-weight: 700;
  color: var(--black);
  font-size: 24px;
  letter-spacing: -0.5px;
  line-height: 32px;
}

.homepage-styling-frame-49 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.homepage-styling-know-more {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  font-size: 16px;
  letter-spacing: 0.16px;
  line-height: 24px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

.homepage-styling-know-more:hover {
  color: var(--x500crea-pink);
}

.homepage-styling-know-more:focus {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.homepage-styling-grid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 41px;
  overflow: hidden;
  transform: rotate(-90deg);
}

.homepage-styling-sale-3 {
  width: 18px;
  height: 18px;
  transform: rotate(90deg);
  background-image: url(./img/chevron-right-9.svg);
  position: relative;
  background-size: 100% 100%;
}

.homepage-styling-frame-50 {
  display: flex;
  flex-direction: column;
  height: 219px;
  align-items: flex-start;
  gap: 80px;
  padding: 40px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: var(--x-50-0yellow);
  border-radius: 16px;
}

.homepage-styling-stories-no-image {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1440px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: #f9fafb;
  border-radius: 32px;
}

.homepage-styling-frame-51 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 60px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: var(--black);
  border-radius: 16px;
}

.homepage-styling-image {
  position: relative;
  width: 56px;
  height: 43px;
}

.homepage-styling-text-wrapper-15 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-weight: 400;
  color: var(--white);
  font-size: 24px;
  letter-spacing: 0;
  line-height: 36px;
}

.homepage-styling-text-wrapper-16 {
  position: relative;
  width: fit-content;
  font-weight: 700;
  color: var(--x-50-0yellow);
  font-size: 18px;
  letter-spacing: 0;
  line-height: 30px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

.homepage-styling-text-wrapper-16:hover {
  color: var(--x-30-0yellow);
}

.homepage-styling-text-wrapper-16:focus {
  outline: 2px solid var(--x-50-0yellow);
  outline-offset: 2px;
}

.homepage-styling-frame-52 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 40px 0px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #ffffff99;
}

.homepage-styling-frame-53 {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.homepage-styling-frame-54 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.homepage-styling-text-wrapper-17 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 700;
  color: var(--x-50-0yellow);
  font-size: 18px;
  letter-spacing: 0;
  line-height: 30px;
  white-space: nowrap;
  font-style: normal;
}

.homepage-styling-text-wrapper-18 {
  position: relative;
  align-self: stretch;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: var(--white);
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  font-style: var(--body-p3-font-style);
}

/* Themes Styling Starts */

.theme-detailed-text-wrapper-5 ul {
  list-style-type: disc;
  margin-left: 2em;
}
.theme-detailed-text-wrapper-5 ol {
  list-style-type: decimal;
  margin-left: 2em;
}
.theme-detailed-text-wrapper-5 li {
  margin-bottom: 0.5em;
}

.theme-detailed-theme-page-gender {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: #ffffff;
  width: 1440px;
}

.theme-detailed-frame {
  display: flex;
  flex-direction: column;
  height: 516px;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #00807d;
  border-radius: 0px 0px 32px 32px;
}

.theme-detailed-menu {
  display: flex;
  height: 100px;
  align-items: center;
  padding: 0px 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #00807d;
}

.theme-detailed-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 100px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.theme-detailed-frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 377px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
}

.theme-detailed-frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.theme-detailed-gender-WASH {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: #ffffff;
  font-size: 40px;
  text-align: center;
  letter-spacing: 0;
  line-height: 50px;
  white-space: nowrap;
}

.theme-detailed-vector {
  position: relative;
  width: 160.01px;
  height: 8.54px;
  margin-bottom: -3.92px;
  margin-left: -0.01px;
}

.theme-detailed-group {
  position: relative;
  width: 333.13px;
  height: 334.16px;
  margin-top: -19.08px;
  margin-bottom: -19.08px;
}

.theme-detailed-div-wrapper {
  display: flex;
  flex-direction: column;
  height: 658px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 80px 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.theme-detailed-frame-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.theme-detailed-frame-4 {
  display: flex;
  height: 469px;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.theme-detailed-frame-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 60px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: #000000;
  border-radius: 36px;
}

.theme-detailed-frame-6 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.theme-detailed-frame-7 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.theme-detailed-image {
  position: relative;
  width: 56px;
  height: 43px;
}

.theme-detailed-text-wrapper {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-weight: 400;
  color: #eafafc;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 36px;
}

.theme-detailed-text-wrapper-2 {
  position: relative;
  width: fit-content;
  font-weight: 700;
  color: #ffc845;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 30px;
  white-space: nowrap;
}

.theme-detailed-frame-8 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 40px 0px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #575757;
}

.theme-detailed-frame-9 {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.theme-detailed-frame-10 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.theme-detailed-text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 700;
  color: #ffc845;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 30px;
  white-space: nowrap;
}

.theme-detailed-p {
  position: relative;
  align-self: stretch;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: #eafafc;
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  font-style: var(--body-p3-font-style);
}

.theme-detailed-arrows {
  display: inline-flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.theme-detailed-frame-11 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.theme-detailed-testiomonial {
  display: flex;
  width: 60px;
  height: 60px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  border-radius: 9999px;
  border: 1px solid;
  border-color: #ffffff;
  aspect-ratio: 1;
}

.theme-detailed-img {
  position: relative;
  width: 24px;
  height: 24px;
}

.theme-detailed-arrow-right-wrapper {
  display: flex;
  width: 60px;
  height: 60px;
  align-items: center;
  justify-content: center;
  gap: var(--3-spacing-spacing-lg);
  position: relative;
  border-radius: var(--2-radius-radius-full);
  border: 1px solid;
  border-color: #ffffff;
  aspect-ratio: 1;
}

.theme-detailed-frame-12 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 41px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.theme-detailed-frame-13 {
  display: flex;
  flex-direction: column;
  width: 1240px;
  align-items: flex-start;
  gap: 80px;
  position: relative;
  flex: 0 0 auto;
}

.theme-detailed-frame-14 {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 33px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.theme-detailed-frame-15 {
  display: flex;
  width: 392px;
  position: relative;
  overflow-y: scroll;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.theme-detailed-frame-15::-webkit-scrollbar {
  width: 0;
  display: none;
}

.theme-detailed-text-wrapper-4 {
  position: relative;
  width: 379px;
  font-family: var(--title-h3-font-family);
  font-weight: var(--title-h3-font-weight);
  color: #000000;
  font-size: var(--title-h3-font-size);
  letter-spacing: var(--title-h3-letter-spacing);
  line-height: var(--title-h3-line-height);
  font-style: var(--title-h3-font-style);
}

.theme-detailed-vector-2 {
  position: relative;
  width: 189px;
  height: 1px;
}

.theme-detailed-frame-16 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.theme-detailed-text-wrapper-5 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: #000000;
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.theme-detailed-frame-17 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.theme-detailed-ellipse-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px;
  position: relative;
  flex: 0 0 auto;
}

.theme-detailed-ellipse {
  position: relative;
  width: 8px;
  height: 8px;
  background-color: #000000;
  border-radius: 4px;
  aspect-ratio: 1;
}

.theme-detailed-text-wrapper-6 {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: #000000;
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.theme-detailed-text-wrapper-7 {
  position: relative;
  align-self: stretch;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: #000000;
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.theme-detailed-text-wrapper-8 {
  position: relative;
  align-self: stretch;
  font-weight: 600;
  color: #000000;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 28px;
  text-decoration: underline;
}

.theme-detailed-frame-18 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.theme-detailed-card {
  width: 388px;
  background-color: #f5f3f3;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.theme-detailed-frame-19 {
  height: 217px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.theme-detailed-frame-20 {
  height: 289px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  padding: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.theme-detailed-frame-21 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.theme-detailed-label-wrapper {
  display: flex;
  width: 256px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  position: relative;
  flex: 0 0 auto;
  background-color: #000000;
  border-radius: 8px;
}

.theme-detailed-label {
  position: relative;
  width: 278px;
  margin-top: -1px;
  margin-left: -25px;
  margin-right: -25px;
  font-weight: 600;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 0;
  text-align: center;
  line-height: 16px;
}

.theme-detailed-text-wrapper-9 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-weight: 400;
  color: #000000;
  font-size: 20px;
  letter-spacing: -0.2px;
  line-height: 28px;
}

.theme-detailed-frame-22 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 8px;
  position: relative;
  flex: 0 0 auto;
  margin-right: -9px;
}

.theme-detailed-frame-23 {
  display: flex;
  flex-wrap: wrap;
  width: 349px;
  align-items: center;
  gap: 10px 10px;
  position: relative;
}

.theme-detailed-frame-24 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 1000px;
  border: 1px solid;
  border-color: #d0d0d0;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
}

.theme-detailed-label-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--label-h4-font-family);
  font-weight: var(--label-h4-font-weight);
  color: #000000;
  font-size: var(--label-h4-font-size);
  text-align: center;
  letter-spacing: var(--label-h4-letter-spacing);
  line-height: var(--label-h4-line-height);
  white-space: nowrap;
  font-style: var(--label-h4-font-style);
}

.theme-detailed-frame-25 {
  display: flex;
  width: 1240px;
  height: 368px;
  align-items: flex-start;
  padding: 40px 0px;
  position: relative;
}

.theme-detailed-frame-26 {
  display: flex;
  flex-direction: column;
  width: 831px;
  align-items: flex-start;
  gap: 10px;
  position: relative;
}

.theme-detailed-frame-27 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 44px !important;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #fbc84e;
  border-radius: 24px 0px 0px 24px;
}

.theme-detailed-frame-28 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.theme-detailed-text-wrapper-10 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-weight: 700;
  color: #000000;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 31.1px;
}

.theme-detailed-vector-3 {
  position: relative;
  width: 135.01px;
  height: 6.57px;
  margin-bottom: -2.92px;
  margin-left: -0.01px;
}

.theme-detailed-quote-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.theme-detailed-quote {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-weight: 400;
  color: transparent;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 38px;
}

.theme-detailed-span {
  font-weight: 700;
  color: #000000;
}

.theme-detailed-text-wrapper-11 {
  font-weight: 700;
  color: #ffffff;
}

.theme-detailed-text-wrapper-12 {
  color: #000000;
}

.theme-detailed-frame-29 {
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
}

.theme-detailed-frame-30 {
  width: 1442px;
  height: 937px;
  padding: 52px 98px;
  margin-left: -1px;
  margin-right: -1px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  position: relative;
}

.theme-detailed-frame-31 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
  overflow-y: scroll;
}

.theme-detailed-frame-31::-webkit-scrollbar {
  width: 0;
  display: none;
}

.theme-detailed-text-wrapper-13 {
  position: relative;
  width: 392px;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: #000000;
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  font-style: var(--title-h2-font-style);
}

.theme-detailed-vector-4 {
  position: relative;
  width: 125px;
  height: 1px;
}

.theme-detailed-poor-sanitation {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: #010101;
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.theme-detailed-card-wrapper {
  flex: 0 0 auto;
  display: flex;
  width: 388px;
  align-items: flex-start;
  gap: 32px;
  position: relative;
}

.theme-detailed-card-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: #f5f3f3;
  border-radius: 18px;
}

.theme-detailed-frame-32 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 220px;
}

.theme-detailed-frame-33 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  padding: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.theme-detailed-frame-34 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  position: relative;
  flex: 0 0 auto;
  background-color: #000000;
  border-radius: 8px;
}

.theme-detailed-label-3 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: center;
  line-height: 16px;
}

.theme-detailed-frame-35 {
  display: flex;
  align-items: center;
  gap: 50px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.theme-detailed-frame-36 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0px 16px;
  position: relative;
  flex: 0 0 auto;
}

.theme-detailed-text-wrapper-14 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: #000000;
  font-size: 18px;
  letter-spacing: 0.18px;
  line-height: 22px;
  white-space: nowrap;
}

.theme-detailed-icons-wrapper {
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px;
  position: relative;
  background-color: #f04e63;
  border-radius: 26px;
  aspect-ratio: 1;
}

.theme-detailed-icons {
  position: relative;
  width: 18px;
  height: 18px;
  background-image: url(./img/arrow-right-10.svg);
  background-size: 100% 100%;
}

.theme-detailed-frame-37 {
  width: 1240px;
  height: 911px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  position: relative;
}

.theme-detailed-group-2 {
  position: relative;
  width: 392px;
  height: 266px;
}

.theme-detailed-frame-38 {
  display: inline-flex;
  height: 114px;
  position: absolute;
  top: 0;
  left: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.theme-detailed-text-wrapper-15 {
  position: relative;
  width: 392px;
  margin-top: -1px;
  margin-bottom: -106.63px;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: #000000;
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  font-style: var(--title-h2-font-style);
}

.theme-detailed-vector-5 {
  position: absolute;
  top: 262px;
  left: 0;
  width: 206px;
  height: 8px;
}

.theme-detailed-frame-39 {
  gap: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.theme-detailed-frame-40 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.theme-detailed-frame-41 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.theme-detailed-frame-42 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.theme-detailed-card-3 {
  width: 392px;
  background-color: #f5f3f3;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.theme-detailed-frame-43 {
  height: 216px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.theme-detailed-frame-44 {
  flex-wrap: wrap;
  gap: 8px 8px;
  margin-right: -5px;
  display: inline-flex;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.theme-detailed-frame-45 {
  display: flex;
  flex-direction: column;
  width: 1437px;
  height: 1356px;
  align-items: flex-start;
  gap: 60px;
  padding: 0px 79px;
  position: relative;
}

.theme-detailed-frame-46 {
  height: 1356px;
  padding: 64px 0px;
  align-self: stretch;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  position: relative;
}

.theme-detailed-frame-47 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.theme-detailed-text-wrapper-16 {
  position: relative;
  width: 392px;
  margin-top: -1px;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: #000000;
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  font-style: var(--title-h2-font-style);
}

.theme-detailed-vector-6 {
  position: relative;
  width: 152px;
  height: 8px;
  margin-bottom: -4px;
}

.theme-detailed-frame-48 {
  gap: 61px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.theme-detailed-frame-49 {
  height: 194px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.theme-detailed-frame-50 {
  flex-wrap: wrap;
  gap: 8px 8px;
  display: inline-flex;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.theme-detailed-frame-51 {
  gap: 8px;
  display: inline-flex;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.theme-detailed-frame-52 {
  display: flex;
  width: 388px;
  align-items: flex-start;
  gap: 32px;
  position: relative;
}

.theme-detailed-frame-53 {
  display: flex;
  width: 1240px;
  height: 288px;
  align-items: flex-start;
  position: relative;
}

.theme-detailed-quote-2 {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-weight: 400;
  color: #000000;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 38px;
}

.theme-detailed-text-wrapper-17 {
  font-weight: 700;
}

.theme-detailed-text-wrapper-18 {
  font-weight: 400;
  color: #000000;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 38px;
}

.theme-detailed-frame-54 {
  width: 1240px;
  height: 1407px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  position: relative;
}

.theme-detailed-frame-55 {
  gap: 40px;
  margin-bottom: -155px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.theme-detailed-frame-56 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.theme-detailed-frame-57 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.theme-detailed-frame-58 {
  display: flex;
  width: 808px;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 0px;
  position: relative;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #cad4de;
}

.theme-detailed-frame-59 {
  position: relative;
  width: 167px;
  height: 167px;
  border-radius: 153px;
  aspect-ratio: 1;
  background-image: url(./img/frame-645.svg);
  background-size: cover;
  background-position: 50% 50%;
}

.theme-detailed-frame-60 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.theme-detailed-frame-61 {
  display: flex;
  flex-direction: column;
  width: 490px;
  align-items: flex-start;
  gap: 9px;
  position: relative;
}

.theme-detailed-frame-62 {
  display: flex;
  flex-direction: column;
  width: 328px;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  flex: 0 0 auto;
}

.theme-detailed-frame-63 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.theme-detailed-text-wrapper-19 {
  position: relative;
  width: fit-content;
  font-family: var(--title-h3-font-family);
  font-weight: var(--title-h3-font-weight);
  color: #000000;
  font-size: var(--title-h3-font-size);
  letter-spacing: var(--title-h3-letter-spacing);
  line-height: var(--title-h3-line-height);
  white-space: nowrap;
  font-style: var(--title-h3-font-style);
}

.theme-detailed-vector-7 {
  position: relative;
  width: 1px;
  height: 23px;
}

.theme-detailed-text-wrapper-20 {
  position: relative;
  width: fit-content;
  font-weight: 600;
  color: #000000;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 34px;
  white-space: nowrap;
}

.theme-detailed-vector-8 {
  position: relative;
  width: 117px;
  height: 5px;
  margin-bottom: -2.5px;
}

.theme-detailed-frame-64 {
  position: relative;
  width: 120px;
  height: 29px;
  border-radius: 1000px;
  border: 1px solid;
  border-color: #d0d0d0;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
}

.theme-detailed-label-4 {
  position: absolute;
  top: 10px;
  left: -23px;
  width: 166px;
  font-weight: var(--label-h4-font-weight);
  color: #000000;
  font-size: var(--label-h4-font-size);
  letter-spacing: var(--label-h4-letter-spacing);
  font-family: var(--label-h4-font-family);
  text-align: center;
  line-height: var(--label-h4-line-height);
  font-style: var(--label-h4-font-style);
}

.theme-detailed-text-wrapper-21 {
  position: relative;
  align-self: stretch;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: #181c20;
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  font-style: var(--body-p3-font-style);
}

.theme-detailed-frame-65 {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.theme-detailed-frame-66 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.theme-detailed-frame-67 {
  position: relative;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
}

.theme-detailed-frame-68 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0px;
  position: relative;
  flex: 0 0 auto;
}

.theme-detailed-text-wrapper-22 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: #000000;
  font-size: 14px;
  text-align: center;
  letter-spacing: -0.14px;
  line-height: 16px;
  white-space: nowrap;
}

.theme-detailed-text-wrapper-23 {
  position: relative;
  width: fit-content;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: #181c20;
  font-size: var(--body-p3-font-size);
  text-align: center;
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  white-space: nowrap;
  font-style: var(--body-p3-font-style);
}

.theme-detailed-frame-69 {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 25px;
}

.theme-detailed-frame-70 {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  position: relative;
  background-color: #f04e63;
  border-radius: 25px;
}

.theme-detailed-icons-2 {
  width: 24px;
  height: 24px;
  background-image: url(./img/chevron-down-3.svg);
  position: relative;
  background-size: 100% 100%;
}

.theme-detailed-frame-71 {
  height: 168px;
  aspect-ratio: 0.99;
  background-image: url(./img/frame-645-1.svg);
  position: relative;
  width: 167px;
  border-radius: 153px;
  background-size: cover;
  background-position: 50% 50%;
}

.theme-detailed-frame-72 {
  display: flex;
  flex-direction: column;
  width: 490px;
  align-items: flex-start;
  gap: 44px;
  position: relative;
}

.theme-detailed-frame-73 {
  display: inline-flex;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 0px;
  position: relative;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #cad4de;
}

.theme-detailed-frame-74 {
  height: 167px;
  aspect-ratio: 1;
  background-image: url(./img/frame-645-2.svg);
  position: relative;
  width: 167px;
  border-radius: 153px;
  background-size: cover;
  background-position: 50% 50%;
}

.theme-detailed-frame-75 {
  display: flex;
  width: 601px;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

.theme-detailed-dr-anjlee-agarwal {
  position: relative;
  align-self: stretch;
  font-weight: 400;
  color: #181c20;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 24px;
}

.theme-detailed-text-wrapper-24 {
  font-weight: 400;
  color: #181c20;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 24px;
}

.theme-detailed-frame-76 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  background-color: #f04e63;
  aspect-ratio: 1;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 25px;
}

.theme-detailed-icons-3 {
  width: 24px;
  height: 24px;
  background-image: url(./img/chevron-up-2.svg);
  position: relative;
  background-size: 100% 100%;
}

.theme-detailed-frame-77 {
  display: flex;
  width: 1240px;
  height: 64px;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  padding: 16px;
  position: absolute;
  top: 4853px;
  left: 96px;
}

.theme-detailed-frame-78 {
  display: flex;
  flex-direction: column;
  width: 1440px;
  height: 718px;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  padding: 0px 100px 80px;
  position: relative;
  background-color: #ffffff;
}

.theme-detailed-text-wrapper-25 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 700;
  color: #000000;
  font-size: 32px;
  letter-spacing: -0.32px;
  line-height: 38.4px;
  white-space: nowrap;
}

.theme-detailed-vector-9 {
  position: relative;
  width: 136px;
  height: 8px;
  margin-bottom: -4px;
}

.theme-detailed-card-4 {
  flex: 1;
  flex-grow: 1;
  background-color: #000000;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.theme-detailed-frame-79 {
  height: 320px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.theme-detailed-frame-80 {
  height: 100px;
  justify-content: center;
  background-color: #000000;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  padding: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.theme-detailed-frame-81 {
  display: flex;
  flex-direction: column;
  width: 266px;
  align-items: flex-start;
  gap: 19px;
  position: relative;
  flex: 0 0 auto;
}

.theme-detailed-text-wrapper-26 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  margin-right: -50px;
  font-weight: 600;
  color: #ffffff;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 34px;
  white-space: nowrap;
}

.theme-detailed-vector-10 {
  position: relative;
  width: 125px;
  height: 8px;
  margin-bottom: -4px;
}

.theme-detailed-text-wrapper-27 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  margin-right: -5px;
  font-weight: 600;
  color: #ffffff;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 34px;
  white-space: nowrap;
}

.theme-detailed-card-5 {
  width: 391px;
  background-color: #000000;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.theme-detailed-text-wrapper-28 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-weight: 600;
  color: #ffffff;
  font-size: 24px;
  letter-spacing: 0;
  line-height: 34px;
}
/* Original CSS from style.css should be injected here */

/* Additional CSS for semantic HTML refactoring */

.theme-detailed-theme-page-gender button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.theme-detailed-theme-page-gender a {
  text-decoration: none;
  color: inherit;
}

.theme-detailed-theme-page-gender ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.theme-detailed-theme-page-gender blockquote {
  margin: 0;
}

/* Themes Styling Ends */

/* Exchanges styling start */

.exchanges-training-page-self {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: #ffffff;
}

.exchanges-frame {
  display: flex;
  flex-direction: column;
  height: 500px;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--x-50-0teal);
  border-radius: 0px 0px 32px 32px;
}

.exchanges-menu {
  display: flex;
  height: 100px;
  align-items: center;
  padding: 0px 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--x-50-0teal);
}

.exchanges-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 100px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.exchanges-frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 377px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
}

.exchanges-frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.exchanges-text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--dispaly-h2-font-family);
  font-weight: var(--dispaly-h2-font-weight);
  color: #ffffff;
  font-size: var(--dispaly-h2-font-size);
  text-align: center;
  letter-spacing: var(--dispaly-h2-letter-spacing);
  line-height: var(--dispaly-h2-line-height);
  white-space: nowrap;
  font-style: var(--dispaly-h2-font-style);
}

.exchanges-vector {
  position: relative;
  width: 160.02px;
  height: 8.54px;
  margin-bottom: -3.92px;
  margin-left: -0.01px;
}

.exchanges-group {
  position: relative;
  width: 333.13px;
  height: 334.16px;
  margin-top: -27.08px;
  margin-bottom: -27.08px;
}

.exchanges-frame-3 {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: #f7f8f8;
  border-radius: 32px;
}

.exchanges-div-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.exchanges-frame-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.exchanges-frame-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.exchanges-frame-6 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.exchanges-text-wrapper-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--title-h1-font-family);
  font-weight: var(--title-h1-font-weight);
  color: var(--black);
  font-size: var(--title-h1-font-size);
  text-align: center;
  letter-spacing: var(--title-h1-letter-spacing);
  line-height: var(--title-h1-line-height);
  white-space: nowrap;
  font-style: var(--title-h1-font-style);
}

.exchanges-img {
  position: relative;
  width: 112.01px;
  height: 8.21px;
  margin-bottom: -3.96px;
  margin-left: -0.01px;
}

.exchanges-frame-7 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.exchanges-frame-8 {
  display: flex;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.exchanges-frame-9 {
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  border-radius: 16px 0px 0px 16px;
  overflow: hidden;
  background-image: url(./img/frame-1000004395.png);
  background-size: cover;
  background-position: 50% 50%;
}

.exchanges-frame-10 {
  display: flex;
  flex-direction: column;
  width: 104px;
  height: 104px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  position: relative;
  top: 24px;
  left: 27px;
  background-color: var(--black);
  border-radius: 12px;
}

.exchanges-frame-11 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.exchanges-text-wrapper-3 {
  position: relative;
  width: 56px;
  height: 28px;
  margin-top: -1px;
  font-weight: 700;
  color: #ffffff;
  font-size: 48px;
  text-align: center;
  letter-spacing: 4px;
  line-height: 16px;
}

.exchanges-text-wrapper-4 {
  position: relative;
  align-self: stretch;
  font-weight: 600;
  color: #ffffff;
  font-size: 18px;
  text-align: center;
  letter-spacing: 4px;
  line-height: 16px;
}

.exchanges-frame-12 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 60px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: var(--black);
  border-radius: 0px 16px 16px 0px;
}

.exchanges-frame-13 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.exchanges-frame-14 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.exchanges-frame-15 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 8px;
  position: relative;
  flex: 0 0 auto;
}

.exchanges-frame-16 {
  display: flex;
  flex-wrap: wrap;
  width: 349px;
  align-items: center;
  gap: 10px 10px;
  position: relative;
}

.exchanges-label-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 1000px;
  border: 1px solid;
  border-color: #ffffff99;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
  position: relative;
  flex: 0 0 auto;
}

.exchanges-label {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--label-h3-font-family);
  font-weight: var(--label-h3-font-weight);
  color: #ffffff;
  font-size: var(--label-h3-font-size);
  text-align: center;
  letter-spacing: var(--label-h3-letter-spacing);
  line-height: var(--label-h3-line-height);
  white-space: nowrap;
  font-style: var(--label-h3-font-style);
}

.exchanges-p {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: var(--light-blue);
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  font-style: var(--title-h2-font-style);
}

.exchanges-nulla-non-turpis {
  position: relative;
  align-self: stretch;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: #ffffffcc;
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-style: var(--body-p1-font-style);
}

.exchanges-text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--x-50-0yellow);
  font-size: 20px;
  letter-spacing: 0;
  line-height: 30px;
  white-space: nowrap;
}

.exchanges-frame-17 {
  display: inline-flex;
  height: 24px;
  align-items: center;
  gap: 8px;
  position: relative;
}

.exchanges-text-wrapper-6 {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 28px;
  white-space: nowrap;
}

.exchanges-text-wrapper-7 {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 28px;
  white-space: nowrap;
}

.exchanges-arrows {
  display: inline-flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.exchanges-frame-18 {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0px 24px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 12px;
}

.exchanges-PRIMARY {
  position: relative;
  width: fit-content;
  font-family: var(--label-h3-font-family);
  font-weight: var(--label-h3-font-weight);
  color: #ffffff;
  font-size: var(--label-h3-font-size);
  letter-spacing: var(--label-h3-letter-spacing);
  line-height: var(--label-h3-line-height);
  white-space: nowrap;
  font-style: var(--label-h3-font-style);
}

.exchanges-sale {
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
  background-image: url(./img/chevron-right-3.svg);
  background-size: 100% 100%;
}

.exchanges-frame-19 {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  padding: 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.exchanges-vector-2 {
  position: relative;
  width: 144px;
  height: 8.02px;
  margin-bottom: -3.52px;
}

.exchanges-frame-20 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.exchanges-frame-21 {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.exchanges-card {
  display: flex;
  flex-direction: column;
  width: 602px;
  align-items: flex-start;
  position: relative;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-left: -1px;
  background-color: #f8f8f9;
  border-radius: 16px;
  border: 1px solid;
  border-color: #e9e9e9;
}

.exchanges-frame-22 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 360px;
  border-radius: 16px 16px 0px 0px;
  background-image: url(./img/frame-1000004278.png);
  background-size: cover;
  background-position: 50% 50%;
}

.exchanges-frame-23 {
  display: flex;
  flex-direction: column;
  width: 104px;
  height: 104px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  position: relative;
  top: 24px;
  left: 27px;
  background-color: #ffc845;
  border-radius: 16px;
}

.exchanges-text-wrapper-8 {
  position: relative;
  width: 56px;
  height: 28px;
  margin-top: -1px;
  font-weight: 700;
  color: var(--black);
  font-size: 48px;
  text-align: center;
  letter-spacing: 4px;
  line-height: 16px;
}

.exchanges-text-wrapper-9 {
  position: relative;
  align-self: stretch;
  font-weight: 600;
  color: var(--black);
  font-size: 18px;
  text-align: center;
  letter-spacing: 4px;
  line-height: 16px;
}

.exchanges-frame-24 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  padding: 44px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.exchanges-text-wrapper-10 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--title-h3-font-family);
  font-weight: var(--title-h3-font-weight);
  color: var(--black);
  font-size: var(--title-h3-font-size);
  letter-spacing: var(--title-h3-letter-spacing);
  line-height: var(--title-h3-line-height);
  font-style: var(--title-h3-font-style);
}

.exchanges-text-wrapper-11 {
  position: relative;
  align-self: stretch;
  font-family: "Inter", Helvetica;
  font-weight: 400;
  color: var(--black);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 22.4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.exchanges-frame-25 {
  display: flex;
  flex-wrap: wrap;
  width: 349px;
  align-items: center;
  gap: 6px 6px;
  position: relative;
  flex: 0 0 auto;
}

.exchanges-frame-26 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 6px;
  position: relative;
  flex: 0 0 auto;
}

.exchanges-frame-27 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 1000px;
  border: 1px solid;
  border-color: #d8dbde;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
  position: relative;
  flex: 0 0 auto;
}

.exchanges-label-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--label-h4-font-family);
  font-weight: var(--label-h4-font-weight);
  color: var(--black);
  font-size: var(--label-h4-font-size);
  text-align: center;
  letter-spacing: var(--label-h4-letter-spacing);
  line-height: var(--label-h4-line-height);
  white-space: nowrap;
  font-style: var(--label-h4-font-style);
}

.exchanges-frame-28 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.exchanges-text-wrapper-12 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  font-size: 16px;
  letter-spacing: 0.16px;
  line-height: 24px;
  white-space: nowrap;
}

.exchanges-grid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 41px;
  overflow: hidden;
  transform: rotate(-90deg);
}

.exchanges-sale-2 {
  background-image: url(./img/chevron-right.svg);
  position: relative;
  width: 18px;
  height: 18px;
  transform: rotate(90deg);
  background-size: 100% 100%;
}

.exchanges-card-2 {
  display: flex;
  flex-direction: column;
  width: 602px;
  align-items: flex-start;
  position: relative;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-right: -1px;
  background-color: #f8f8f9;
  border-radius: 16px;
  border: 1px solid;
  border-color: #e9e9e9;
}
/* INJECT ORIGINAL CSS CODE HERE */

.exchanges-frame-16 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.exchanges-frame-17 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.exchanges-frame-26 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.exchanges-frame-18 {
  text-decoration: none;
  cursor: pointer;
}

.exchanges-frame-18:hover {
  opacity: 0.9;
}

.exchanges-frame-18:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.exchanges-frame-28 a {
  text-decoration: none;
  cursor: pointer;
}

.exchanges-frame-28 a:hover {
  text-decoration: underline;
}

.exchanges-frame-28 a:focus {
  outline: 2px solid var(--x500crea-pink);
  outline-offset: 2px;
}

/* Exchanges styling ends */

/* Lived experience Styling Starts */

.lived-experience-no {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  position: relative;
  background-color: #ffffff;
}

.lived-experience-frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-frame-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.lived-experience-div-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-frame-3 {
  display: flex;
  flex-direction: column;
  width: 816px;
  align-items: flex-start;
  gap: 63px;
  padding: 0px 100px;
  position: relative;
  flex: 0 0 auto;
}

.lived-experience-frame-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
  margin-right: -77px;
}

.lived-experience-text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--dispaly-h2-font-family);
  font-weight: var(--dispaly-h2-font-weight);
  color: var(--black);
  font-size: var(--dispaly-h2-font-size);
  letter-spacing: var(--dispaly-h2-letter-spacing);
  line-height: var(--dispaly-h2-line-height);
  white-space: nowrap;
  font-style: var(--dispaly-h2-font-style);
}

.lived-experience-vector {
  position: relative;
  width: 298.02px;
  height: 9.9px;
  margin-bottom: -3.76px;
  margin-left: -0.02px;
}

.lived-experience-frame-5 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 0px 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-frame-6 {
  display: flex;
  flex-direction: column;
  width: 392px;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  padding: 24px 24px 24px 0px;
  position: relative;
}

.lived-experience-object {
  position: relative;
  width: 102px;
  height: 65px;
  background-image: url(./img/vector.svg);
  background-size: 100% 100%;
}

.lived-experience-img {
  position: absolute;
  width: 0;
  height: 18.37%;
  top: 4.24%;
  left: 8.18%;
}

.lived-experience-vector-2 {
  position: absolute;
  width: 0;
  height: 19.26%;
  top: 3.31%;
  left: 15.62%;
}

.lived-experience-vector-3 {
  position: absolute;
  width: 0;
  height: 16.63%;
  top: 5.53%;
  left: 91.59%;
}

.lived-experience-vector-4 {
  position: absolute;
  width: 0;
  height: 17.64%;
  top: 5.49%;
  left: 84.42%;
}

.lived-experience-vector-5 {
  position: absolute;
  width: 15.66%;
  height: 88.11%;
  top: 8.28%;
  left: 44.96%;
}

.lived-experience-p {
  position: relative;
  width: 339px;
  font-weight: 600;
  font-style: italic;
  color: var(--black);
  font-size: 18px;
  letter-spacing: 0;
  line-height: 29px;
}

.lived-experience-frame-7 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  padding: 24px 0px 80px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.lived-experience-frame-8 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 0px 0px 60px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #dedede;
}

.lived-experience-text-wrapper-2 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--title-h3-font-family);
  font-weight: var(--title-h3-font-weight);
  color: var(--black);
  font-size: var(--title-h3-font-size);
  letter-spacing: var(--title-h3-letter-spacing);
  line-height: var(--title-h3-line-height);
  font-style: var(--title-h3-font-style);
}

.lived-experience-text-wrapper-3 {
  flex: 1;
  width: 817px;
  margin-right: -1px;
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  position: relative;
  font-family: var(--body-p1-font-family);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.lived-experience-frame-9 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-frame-10 {
  display: flex;
  flex-direction: column;
  width: 817px;
  align-items: flex-start;
  gap: 40px;
  padding: 40px;
  position: relative;
  flex: 0 0 auto;
  margin-right: -1px;
  background-color: var(--black);
  border-radius: 16px;
}

.lived-experience-frame-11 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-frame-12 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-image {
  position: relative;
  width: 56px;
  height: 43px;
}

.lived-experience-frame-13 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-text-wrapper-4 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-weight: 400;
  color: var(--white);
  font-size: 24px;
  letter-spacing: 0;
  line-height: 36px;
}

.lived-experience-frame-14 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 60px 0px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #dedede;
}

.lived-experience-text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--title-h3-font-family);
  font-weight: var(--title-h3-font-weight);
  color: var(--black);
  font-size: var(--title-h3-font-size);
  letter-spacing: var(--title-h3-letter-spacing);
  line-height: var(--title-h3-line-height);
  white-space: nowrap;
  font-style: var(--title-h3-font-style);
}

.lived-experience-frame-15 {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.lived-experience-text-wrapper-6 {
  position: relative;
  width: 776px;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.lived-experience-frame-16 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 40px 0px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #ffffff99;
}

.lived-experience-frame-17 {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-frame-18 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.lived-experience-text-wrapper-7 {
  width: fit-content;
  margin-top: -1px;
  font-weight: 700;
  color: var(--x-50-0yellow);
  font-size: 18px;
  white-space: nowrap;
  position: relative;
  letter-spacing: 0;
  line-height: 30px;
}

.lived-experience-text-wrapper-8 {
  position: relative;
  align-self: stretch;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: var(--white);
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  font-style: var(--body-p3-font-style);
}

.lived-experience-frame-19 {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  padding: 80px 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.lived-experience-frame-20 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.lived-experience-frame-21 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.lived-experience-text-wrapper-9 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--title-h1-font-family);
  font-weight: var(--title-h1-font-weight);
  color: var(--black);
  font-size: var(--title-h1-font-size);
  text-align: center;
  letter-spacing: var(--title-h1-letter-spacing);
  line-height: var(--title-h1-line-height);
  white-space: nowrap;
  font-style: var(--title-h1-font-style);
}

.lived-experience-vector-6 {
  position: relative;
  width: 112.01px;
  height: 8.21px;
  margin-bottom: -3.96px;
  margin-left: -0.01px;
}

.lived-experience-frame-22 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-frame-23 {
  display: flex;
  flex-direction: column;
  height: 392px;
  align-items: center;
  position: relative;
  flex: 1;
  flex-grow: 1;
  border-radius: 24px;
}

.lived-experience-group {
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.lived-experience-frame-24 {
  width: 392px;
  height: 312px;
  border-radius: 16px;
  background-image: url(./img/frame-645.png);
  background-size: cover;
  background-position: 50% 50%;
}

.lived-experience-frame-25 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-text-wrapper-10 {
  position: relative;
  width: fit-content;
  font-weight: 600;
  color: var(--black);
  font-size: 20px;
  letter-spacing: -0.2px;
  line-height: 24px;
  white-space: nowrap;
}

.lived-experience-grid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 41px;
  overflow: hidden;
  transform: rotate(-90deg);
}

.lived-experience-sale {
  position: relative;
  width: 18px;
  height: 18px;
  transform: rotate(90deg);
  background-image: url(./img/chevron-right-4.svg);
  background-size: 100% 100%;
}

.lived-experience-group-2 {
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
  background-image: url(./img/image-1.png);
  background-size: 100% 100%;
}

.lived-experience-frame-26 {
  width: 392px;
  height: 312px;
  border-radius: 16px;
  background-image: url(./img/frame-645-1.png);
  background-size: cover;
  background-position: 50% 50%;
}
/* Inject original CSS from globals.css and styleguide.css here */

.lived-experience-no {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  position: relative;
  background-color: #ffffff;
}

.lived-experience-frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-frame-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.lived-experience-div-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-frame-3 {
  display: flex;
  flex-direction: column;
  max-width: 816px;
  align-items: flex-start;
  gap: 63px;
  padding: 0px 100px;
  position: relative;
  flex: 0 0 auto;
}

.lived-experience-frame-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
  margin-right: -77px;
}

.lived-experience-text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--dispaly-h2-font-family);
  font-weight: var(--dispaly-h2-font-weight);
  color: var(--black);
  font-size: var(--dispaly-h2-font-size);
  letter-spacing: var(--dispaly-h2-letter-spacing);
  line-height: var(--dispaly-h2-line-height);
  white-space: nowrap;
  font-style: var(--dispaly-h2-font-style);
}

.lived-experience-vector {
  position: relative;
  width: 298.02px;
  height: 9.9px;
  margin-bottom: -3.76px;
  margin-left: -0.02px;
}

.lived-experience-frame-5 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 0px 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-frame-6 {
  display: flex;
  flex-direction: column;
  max-width: 392px;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  padding: 24px 24px 24px 0px;
  position: relative;
}

.lived-experience-object {
  position: relative;
  width: 102px;
  height: 65px;
  background-image: url(./img/vector.svg);
  background-size: 100% 100%;
}

.lived-experience-img {
  position: absolute;
  width: 0;
  height: 18.37%;
  top: 4.24%;
  left: 8.18%;
}

.lived-experience-vector-2 {
  position: absolute;
  width: 0;
  height: 19.26%;
  top: 3.31%;
  left: 15.62%;
}

.lived-experience-vector-3 {
  position: absolute;
  width: 0;
  height: 16.63%;
  top: 5.53%;
  left: 91.59%;
}

.lived-experience-vector-4 {
  position: absolute;
  width: 0;
  height: 17.64%;
  top: 5.49%;
  left: 84.42%;
}

.lived-experience-vector-5 {
  position: absolute;
  width: 15.66%;
  height: 88.11%;
  top: 8.28%;
  left: 44.96%;
}

.lived-experience-p {
  position: relative;
  max-width: 339px;
  font-weight: 600;
  font-style: italic;
  color: var(--black);
  font-size: 18px;
  letter-spacing: 0;
  line-height: 29px;
}

.lived-experience-frame-7 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  padding: 24px 0px 80px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.lived-experience-frame-8 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 0px 0px 60px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #dedede;
}

.lived-experience-text-wrapper-2 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--title-h3-font-family);
  font-weight: var(--title-h3-font-weight);
  color: var(--black);
  font-size: var(--title-h3-font-size);
  letter-spacing: var(--title-h3-letter-spacing);
  line-height: var(--title-h3-line-height);
  font-style: var(--title-h3-font-style);
}

.lived-experience-text-wrapper-3 {
  flex: 1;
  max-width: 817px;
  margin-right: -1px;
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  position: relative;
  font-family: var(--body-p1-font-family);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.lived-experience-frame-9 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-frame-10 {
  display: flex;
  flex-direction: column;
  max-width: 817px;
  align-items: flex-start;
  gap: 40px;
  padding: 40px;
  position: relative;
  flex: 0 0 auto;
  margin-right: -1px;
  background-color: var(--black);
  border-radius: 16px;
}

.lived-experience-frame-11 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-frame-12 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-image {
  position: relative;
  width: 56px;
  height: 43px;
}

.lived-experience-frame-13 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-text-wrapper-4 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-weight: 400;
  color: var(--white);
  font-size: 24px;
  letter-spacing: 0;
  line-height: 36px;
}

.lived-experience-frame-14 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 60px 0px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #dedede;
}

.lived-experience-text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--title-h3-font-family);
  font-weight: var(--title-h3-font-weight);
  color: var(--black);
  font-size: var(--title-h3-font-size);
  letter-spacing: var(--title-h3-letter-spacing);
  line-height: var(--title-h3-line-height);
  white-space: nowrap;
  font-style: var(--title-h3-font-style);
}

.lived-experience-frame-15 {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.lived-experience-text-wrapper-6 {
  position: relative;
  max-width: 776px;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.lived-experience-frame-16 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 40px 0px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #ffffff99;
}

.lived-experience-frame-17 {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-frame-18 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.lived-experience-text-wrapper-7 {
  width: fit-content;
  margin-top: -1px;
  font-weight: 700;
  color: var(--x-50-0yellow);
  font-size: 18px;
  white-space: nowrap;
  position: relative;
  letter-spacing: 0;
  line-height: 30px;
}

.lived-experience-text-wrapper-8 {
  position: relative;
  align-self: stretch;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: var(--white);
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  font-style: var(--body-p3-font-style);
}

.lived-experience-frame-19 {
  display: flex;
  flex-direction: column;
  max-width: 1440px;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  padding: 80px 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.lived-experience-frame-20 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.lived-experience-frame-21 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.lived-experience-text-wrapper-9 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--title-h1-font-family);
  font-weight: var(--title-h1-font-weight);
  color: var(--black);
  font-size: var(--title-h1-font-size);
  text-align: center;
  letter-spacing: var(--title-h1-letter-spacing);
  line-height: var(--title-h1-line-height);
  white-space: nowrap;
  font-style: var(--title-h1-font-style);
}

.lived-experience-vector-6 {
  position: relative;
  width: 112.01px;
  height: 8.21px;
  margin-bottom: -3.96px;
  margin-left: -0.01px;
}

.lived-experience-frame-22 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-frame-23 {
  display: flex;
  flex-direction: column;
  height: 392px;
  align-items: center;
  position: relative;
  flex: 1;
  flex-grow: 1;
  border-radius: 24px;
}

.lived-experience-group {
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.lived-experience-frame-24 {
  max-width: 392px;
  height: 312px;
  border-radius: 16px;
  background-image: url(./img/frame-645.png);
  background-size: cover;
  background-position: 50% 50%;
}

.lived-experience-frame-25 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lived-experience-text-wrapper-10 {
  position: relative;
  width: fit-content;
  font-weight: 600;
  color: var(--black);
  font-size: 20px;
  letter-spacing: -0.2px;
  line-height: 24px;
  white-space: nowrap;
}

.lived-experience-grid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px;
  position: relative;
  flex: 0 0 auto;

  background-color: var(--x500crea-pink);
  border-radius: 41px;
  overflow: hidden;
  transform: rotate(-90deg);
  text-decoration: none;
  cursor: pointer;
}

.lived-experience-grid:hover {
  background-color: var(--x700crea-pink);
}

.lived-experience-grid:focus {
  outline: 2px solid var(--x500crea-pink);
  outline-offset: 2px;
}

.lived-experience-sale {
  position: relative;
  width: 18px;
  height: 18px;
  transform: rotate(90deg);
  background-image: url(./img/chevron-right-4.svg);
  background-size: 100% 100%;
}

.lived-experience-group-2 {
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
  background-image: url(./img/image-1.png);
  background-size: 100% 100%;
}

.lived-experience-frame-26 {
  max-width: 392px;
  height: 312px;
  border-radius: 16px;
  background-image: url(./img/frame-645-1.png);
  background-size: cover;
  background-position: 50% 50%;
}

/* Lived experience Styling Ends */

/* Upcoming event styling starts */

.exchanges-specific {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: #ffffff;
}

.upcoming-event-frame {
  display: flex;
  flex-direction: column;
  height: 500px;
  align-items: flex-start;
  justify-content: space-around;
  gap: 164px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--x-50-0teal);
  border-radius: 0px 0px 32px 32px;
}

.upcoming-event-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 100px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.upcoming-event-frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 377px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
}

.upcoming-event-frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.upcoming-event-text-wrapper {
  position: relative;
  width: 541px;
  margin-top: -1px;
  margin-right: -164px;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: #ffffff;
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  font-style: var(--title-h2-font-style);
}

.upcoming-event-vector {
  position: relative;
  width: 160.02px;
  height: 8.54px;
  margin-bottom: -3.92px;
  margin-left: -0.01px;
}

.upcoming-event-group {
  position: relative;
  width: 333.13px;
  height: 334.16px;
}

.upcoming-event-div-wrapper {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: flex-start;
  gap: 60px;
  padding: 80px 0px 0px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.upcoming-event-frame-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.upcoming-event-frame-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.upcoming-event-frame-5 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 0px 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.upcoming-event-frame-6 {
  display: flex;
  flex-direction: column;
  width: 391px;
  align-items: flex-start;
  gap: 24px;
  position: relative;
}

.upcoming-event-frame-7 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.upcoming-event-frame-8 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.upcoming-event-frame-9 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.upcoming-event-label-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x-50-0yellow);
  border-radius: 1000px;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
}

.upcoming-event-label {
  font-size: 18px;
  letter-spacing: -1px;
  line-height: 32px;
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  text-align: center;
  white-space: nowrap;
}

.upcoming-event-frame-10 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.upcoming-event-frame-11 {
  display: flex;
  width: 320px;
  align-items: center;
  gap: 12px;
  padding: 16px 0px;
  position: relative;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #cad4de;
}

.upcoming-event-frame-12 {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  position: relative;
  background-color: var(--x-50-0yellow);
  border-radius: 25px;
  aspect-ratio: 1;
}

.upcoming-event-calendar {
  position: relative;
  width: 18px;
  height: 18px;
}

.upcoming-event-icon {
  position: absolute;
  width: 75%;
  height: 83.33%;
  top: 4.17%;
  left: 8.33%;
}

.upcoming-event-text-wrapper-2 {
  position: relative;
  width: fit-content;
  font-weight: 600;
  color: var(--black);
  font-size: 18px;
  letter-spacing: 0;
  line-height: 30px;
  white-space: nowrap;
}

.upcoming-event-img {
  position: relative;
  width: 16.5px;
  height: 16.5px;
}

.upcoming-event-frame-13 {
  display: flex;
  width: 320px;
  align-items: center;
  gap: 12px;
  padding: 16px 0px;
  position: relative;
  flex: 0 0 auto;
}

.upcoming-event-frame-14 {
  display: flex;
  flex-wrap: wrap;
  width: 349px;
  align-items: center;
  gap: 12px 12px;
  position: relative;
  flex: 0 0 auto;
}

.upcoming-event-frame-15 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 1000px;
  border: 1px solid;
  border-color: #d0d0d0;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
  position: relative;
  flex: 0 0 auto;
}

.upcoming-event-label-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--label-h4-font-family);
  font-weight: var(--label-h4-font-weight);
  color: var(--black);
  font-size: var(--label-h4-font-size);
  text-align: center;
  letter-spacing: var(--label-h4-letter-spacing);
  line-height: var(--label-h4-line-height);
  white-space: nowrap;
  font-style: var(--label-h4-font-style);
}

.upcoming-event-frame-16 {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  position: relative;
  background-color: var(--x500crea-pink);
  border-radius: 12px;
}

.upcoming-event-text-wrapper-3 {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.15px;
  line-height: 22px;
  white-space: nowrap;
}

.upcoming-event-sale {
  width: 24px;
  height: 24px;
  margin-top: -4px;
  margin-bottom: -4px;
  aspect-ratio: 1;
  background-image: url(./img/chevron-right-3.svg);
  position: relative;
  background-size: 100% 100%;
}

.upcoming-event-frame-17 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.upcoming-event-frame-18 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.upcoming-event-frame-19 {
  height: 426px;
  border-radius: 16px;
  background-image: url(./img/frame-1000004278-3.png);
  position: relative;
  align-self: stretch;
  width: 100%;
  background-size: cover;
  background-position: 50% 50%;
}

.upcoming-event-frame-20 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  top: 387px;
  left: 357px;
}

.upcoming-event-ellipse {
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #d9d9d9;
  border-radius: 6px;
  aspect-ratio: 1;
}

.upcoming-event-ellipse-2 {
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #d9d9d966;
  border-radius: 6px;
  aspect-ratio: 1;
}

.upcoming-event-lorem-ipsum-dolor-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0px 0px 60px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #c9d3dd;
}

.upcoming-event-p {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.upcoming-event-frame-21 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 0px 0px 60px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #cad4de;
}

.upcoming-event-text-wrapper-4 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--title-h3-font-family);
  font-weight: var(--title-h3-font-weight);
  color: var(--black);
  font-size: var(--title-h3-font-size);
  letter-spacing: var(--title-h3-letter-spacing);
  line-height: var(--title-h3-line-height);
  font-style: var(--title-h3-font-style);
}

.upcoming-event-frame-22 {
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.upcoming-event-frame-23 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.upcoming-event-frame-24 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.upcoming-event-card {
  display: flex;
  flex-direction: column;
  width: 392px;
  align-items: flex-start;
  position: relative;
  background-color: #f8f8f9;
  border-radius: 16px;
  border: 0.5px solid;
  border-color: #d8dbde;
}

.upcoming-event-frame-25 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 260px;
}

.upcoming-event-frame-26 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.upcoming-event-frame-27 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x-50-0yellow);
  border-radius: 41px;
}

.upcoming-event-label-3 {
  font-size: 14px;
  letter-spacing: 0;
  line-height: 16px;
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  text-align: center;
  white-space: nowrap;
}

.upcoming-event-frame-28 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.upcoming-event-frame-29 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 6px;
  position: relative;
  flex: 0 0 auto;
}

.upcoming-event-frame-30 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 1000px;
  border: 1px solid;
  border-color: #d8dbde;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
  position: relative;
  flex: 0 0 auto;
}

.upcoming-event-grid-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.upcoming-event-grid {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: var(--x500crea-pink);
  border-radius: 41px;
  overflow: hidden;
  aspect-ratio: 1;
  gap: var(--3-spacing-spacing-xl);
}

.upcoming-event-sale-2 {
  /* top: calc(50.00% - 9px);
  left: calc(50.00% - 10px); */
  width: 20px;
  height: 20px;
  aspect-ratio: 1;
  background-image: url(./img/arrow-down-4.svg);
  position: relative;
  background-size: 100% 100%;
}

.upcoming-event-frame-31 {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  padding: 80px 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.upcoming-event-frame-32 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.upcoming-event-frame-33 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.upcoming-event-text-wrapper-5 {
  width: fit-content;
  font-weight: var(--title-h1-font-weight);
  font-size: var(--title-h1-font-size);
  text-align: center;
  line-height: var(--title-h1-line-height);
  white-space: nowrap;
  position: relative;
  margin-top: -1px;
  font-family: var(--title-h1-font-family);
  color: var(--black);
  letter-spacing: var(--title-h1-letter-spacing);
  font-style: var(--title-h1-font-style);
}

.upcoming-event-vector-2 {
  position: relative;
  width: 153px;
  height: 8.21px;
  margin-bottom: -3.96px;
}

.upcoming-event-frame-34 {
  display: inline-flex;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.upcoming-event-card-2 {
  margin-left: -1px;
  display: flex;
  flex-direction: column;
  width: 602px;
  align-items: flex-start;
  position: relative;
  margin-top: -1px;
  margin-bottom: -1px;
  background-color: #f8f8f9;
  border-radius: 16px;
  border: 1px solid;
  border-color: #e9e9e9;
}

.upcoming-event-frame-35 {
  height: 360px;
  border-radius: 16px 16px 0px 0px;
  background-image: url(./img/frame-1000004278.png);
  position: relative;
  align-self: stretch;
  width: 100%;
  background-size: cover;
  background-position: 50% 50%;
}

.upcoming-event-frame-36 {
  display: flex;
  flex-direction: column;
  width: 104px;
  height: 104px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  position: relative;
  top: 24px;
  left: 27px;
  background-color: #ffc845;
  border-radius: 16px;
}

.upcoming-event-frame-37 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.upcoming-event-text-wrapper-6 {
  position: relative;
  width: 56px;
  height: 28px;
  margin-top: -1px;
  font-weight: 700;
  color: var(--black);
  font-size: 48px;
  text-align: center;
  letter-spacing: 4px;
  line-height: 16px;
}

.upcoming-event-text-wrapper-7 {
  position: relative;
  align-self: stretch;
  font-weight: 600;
  color: var(--black);
  font-size: 18px;
  text-align: center;
  letter-spacing: 4px;
  line-height: 16px;
}

.upcoming-event-frame-38 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  padding: 44px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.upcoming-event-text-wrapper-8 {
  position: relative;
  align-self: stretch;
  font-family: "Inter", Helvetica;
  font-weight: 400;
  color: var(--black);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 22.4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.upcoming-event-frame-39 {
  display: flex;
  flex-wrap: wrap;
  width: 349px;
  align-items: center;
  gap: 6px 6px;
  position: relative;
  flex: 0 0 auto;
}

.upcoming-event-frame-40 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.upcoming-event-text-wrapper-9 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  font-size: 16px;
  letter-spacing: 0.16px;
  line-height: 24px;
  white-space: nowrap;
}

.upcoming-event-sale-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 41px;
  overflow: hidden;
  transform: rotate(-90deg);
}

.upcoming-event-sale-3 {
  width: 18px;
  height: 18px;
  transform: rotate(90deg);
  background-image: url(./img/chevron-right.svg);
  position: relative;
  background-size: 100% 100%;
}

.upcoming-event-card-3 {
  margin-right: -1px;
  display: flex;
  flex-direction: column;
  width: 602px;
  align-items: flex-start;
  position: relative;
  margin-top: -1px;
  margin-bottom: -1px;
  background-color: #f8f8f9;
  border-radius: 16px;
  border: 1px solid;
  border-color: #e9e9e9;
}
/* Original CSS code should be injected here */

.upcoming-event-text-wrapper-2 {
  font-style: normal;
}

.upcoming-event-frame-16 {
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.upcoming-event-frame-16:hover {
  background-color: #e04558;
}

.upcoming-event-frame-16:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.upcoming-event-ellipse,
.upcoming-event-ellipse-2 {
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.upcoming-event-ellipse:hover,
.upcoming-event-ellipse-2:hover {
  background-color: #b3b3b3;
}

.upcoming-event-ellipse:focus,
.upcoming-event-ellipse-2:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.upcoming-event-grid {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.upcoming-event-grid:hover {
  background-color: #e04558;
}

.upcoming-event-grid:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.upcoming-event-frame-40 a {
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.upcoming-event-frame-40 a:hover .text-wrapper-9 {
  color: var(--x500crea-pink);
}

.upcoming-event-frame-40 a:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* Upcoming events styling ends */

/* past events styling starts */

.exchanges-specific {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: #ffffff;
}

.past-event-frame {
  display: flex;
  flex-direction: column;
  height: 500px;
  align-items: flex-start;
  justify-content: space-around;
  gap: 164px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--x-50-0teal);
  border-radius: 0px 0px 32px 32px;
}

.past-event-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 100px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.past-event-frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 377px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
}

.past-event-frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.past-event-text-wrapper {
  position: relative;
  width: 541px;
  margin-top: -1px;
  margin-right: -164px;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: #ffffff;
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  font-style: var(--title-h2-font-style);
}

.past-event-vector {
  position: relative;
  width: 160.02px;
  height: 8.54px;
  margin-bottom: -3.92px;
  margin-left: -0.01px;
}

.past-event-group {
  position: relative;
  width: 333.13px;
  height: 334.16px;
}

.past-event-frame-3 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 100px;
  position: relative;
  flex: 0 0 auto;
}

.past-event-div-wrapper {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: flex-start;
  padding: 80px 0px 0px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.past-event-frame-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.past-event-frame-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.past-event-frame-6 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 0px 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.past-event-frame-7 {
  display: flex;
  flex-direction: column;
  width: 391px;
  align-items: flex-start;
  gap: 50px;
  position: relative;
}

.past-event-frame-8 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.past-event-label-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  position: relative;
  flex: 0 0 auto;
  background-color: #e9e9e9;
  border-radius: 1000px;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
}

.past-event-label {
  color: #00000066;
  font-size: 18px;
  letter-spacing: -1px;
  line-height: 32px;
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.past-event-frame-9 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.past-event-frame-10 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.past-event-frame-11 {
  display: flex;
  width: 320px;
  align-items: center;
  gap: 12px;
  padding: 16px 0px;
  position: relative;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #cad4de;
}

.past-event-frame-12 {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  position: relative;
  background-color: #e9e9e9;
  border-radius: 25px;
  aspect-ratio: 1;
}

.past-event-img {
  position: relative;
  width: 18px;
  height: 18px;
}

.past-event-icon {
  position: absolute;
  width: 75%;
  height: 83.33%;
  top: 4.17%;
  left: 8.33%;
}

.past-event-text-wrapper-2 {
  position: relative;
  width: fit-content;
  font-weight: 600;
  color: var(--black);
  font-size: 18px;
  letter-spacing: 0;
  line-height: 30px;
  white-space: nowrap;
}

.past-event-icon-2 {
  position: relative;
  width: 16.5px;
  height: 16.5px;
}

.past-event-frame-13 {
  display: flex;
  width: 320px;
  align-items: center;
  gap: 12px;
  padding: 16px 0px;
  position: relative;
  flex: 0 0 auto;
}

.past-event-frame-14 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.past-event-frame-15 {
  display: flex;
  flex-wrap: wrap;
  width: 349px;
  align-items: center;
  gap: 12px 12px;
  position: relative;
  flex: 0 0 auto;
}

.past-event-frame-16 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 1000px;
  border: 1px solid;
  border-color: #d0d0d0;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
  position: relative;
  flex: 0 0 auto;
}

.past-event-label-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--label-h4-font-family);
  font-weight: var(--label-h4-font-weight);
  color: var(--black);
  font-size: var(--label-h4-font-size);
  text-align: center;
  letter-spacing: var(--label-h4-letter-spacing);
  line-height: var(--label-h4-line-height);
  white-space: nowrap;
  font-style: var(--label-h4-font-style);
}

.past-event-frame-17 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.past-event-text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  font-size: 18px;
  letter-spacing: 0;
  line-height: 30px;
  white-space: nowrap;
}

.past-event-frame-18 {
  display: inline-flex;
  height: 24px;
  align-items: center;
  gap: 8px;
  position: relative;
}

.past-event-text-wrapper-4 {
  position: relative;
  width: fit-content;
  font-family: var(--label-h3-font-family);
  font-weight: var(--label-h3-font-weight);
  color: var(--black);
  font-size: var(--label-h3-font-size);
  letter-spacing: var(--label-h3-letter-spacing);
  line-height: var(--label-h3-line-height);
  white-space: nowrap;
  font-style: var(--label-h3-font-style);
}

.past-event-text-wrapper-5 {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: var(--black);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 28px;
  white-space: nowrap;
}

.past-event-frame-19 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  position: relative;
  flex: 0 0 auto;
}

.past-event-frame-20 {
  display: flex;
  flex-direction: column;
  width: 817px;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.past-event-frame-21 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 426px;
  border-radius: 16px;
  background-image: url(./img/frame-1000004278-2.png);
  background-size: cover;
  background-position: 50% 50%;
}

.past-event-frame-22 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  top: 387px;
  left: 357px;
}

.past-event-ellipse {
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #d9d9d9;
  border-radius: 6px;
  aspect-ratio: 1;
}

.past-event-ellipse-2 {
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #d9d9d966;
  border-radius: 6px;
  aspect-ratio: 1;
}

.past-event-lorem-ipsum-dolor-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0px 0px 60px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #c9d3dd;
}

.past-event-p {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.past-event-frame-23 {
  display: flex;
  flex-direction: column;
  width: 817px;
  align-items: flex-start;
  gap: 10px;
  padding: 0px 0px 60px;
  position: relative;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #cad4de;
}

.past-event-text-wrapper-6 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--title-h3-font-family);
  font-weight: var(--title-h3-font-weight);
  color: var(--black);
  font-size: var(--title-h3-font-size);
  letter-spacing: var(--title-h3-letter-spacing);
  line-height: var(--title-h3-line-height);
  font-style: var(--title-h3-font-style);
}

.past-event-frame-24 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.past-event-frame-25 {
  display: flex;
  flex-direction: column;
  width: 817px;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.past-event-frame-26 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #cad4de;
}

.past-event-frame-27 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.past-event-img-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x-50-0yellow);
  border-radius: 25px;
}

.past-event-text-wrapper-7 {
  position: relative;
  width: fit-content;
  font-family: var(--title-h3-font-family);
  font-weight: var(--title-h3-font-weight);
  color: var(--black);
  font-size: var(--title-h3-font-size);
  letter-spacing: var(--title-h3-letter-spacing);
  line-height: var(--title-h3-line-height);
  white-space: nowrap;
  font-style: var(--title-h3-font-style);
}

.past-event-grid {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: var(--x500crea-pink);
  border-radius: 41px;
  overflow: hidden;
  aspect-ratio: 1;
  gap: var(--3-spacing-spacing-xl);
}

.past-event-sale {
  width: 20px;
  height: 20px;
  aspect-ratio: 1;
  background-image: url(./img/arrow-down-6.svg);
  position: relative;
  background-size: 100% 100%;
}

.past-event-frame-28 {
  display: flex;
  flex-direction: column;
  width: 817px;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.past-event-frame-29 {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 32px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #cad4de;
}

.past-event-frame-30 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.past-event-frame-31 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x-50-0yellow);
  border-radius: 41px;
}

.past-event-label-3 {
  color: var(--black);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 16px;
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.past-event-frame-32 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.past-event-text-wrapper-8 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  font-size: 18px;
  letter-spacing: 0;
  line-height: 30px;
}

.past-event-frame-33 {
  display: flex;
  flex-wrap: wrap;
  width: 349px;
  align-items: center;
  gap: 6px 6px;
  position: relative;
  flex: 0 0 auto;
}

.past-event-frame-34 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 1000px;
  border: 1px solid;
  border-color: #d8dbde;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
  position: relative;
  flex: 0 0 auto;
}

.past-event-frame-35 {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  padding: 80px 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.past-event-frame-36 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.past-event-frame-37 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.past-event-text-wrapper-9 {
  width: fit-content;
  font-weight: var(--title-h1-font-weight);
  font-size: var(--title-h1-font-size);
  text-align: center;
  line-height: var(--title-h1-line-height);
  white-space: nowrap;
  position: relative;
  margin-top: -1px;
  font-family: var(--title-h1-font-family);
  color: var(--black);
  letter-spacing: var(--title-h1-letter-spacing);
  font-style: var(--title-h1-font-style);
}

.past-event-vector-2 {
  position: relative;
  width: 153px;
  height: 8.21px;
  margin-bottom: -3.96px;
}

.past-event-frame-38 {
  display: inline-flex;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.past-event-card {
  display: flex;
  flex-direction: column;
  width: 602px;
  align-items: flex-start;
  position: relative;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-left: -1px;
  background-color: #f8f8f9;
  border-radius: 16px;
  border: 1px solid;
  border-color: #e9e9e9;
}

.past-event-frame-39 {
  background-image: url(./img/frame-1000004278.png);
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 360px;
  border-radius: 16px 16px 0px 0px;
  background-size: cover;
  background-position: 50% 50%;
}

.past-event-frame-40 {
  display: flex;
  flex-direction: column;
  width: 104px;
  height: 104px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  position: relative;
  top: 24px;
  left: 27px;
  background-color: #ffc845;
  border-radius: 16px;
}

.past-event-frame-41 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.past-event-text-wrapper-10 {
  position: relative;
  width: 56px;
  height: 28px;
  margin-top: -1px;
  font-weight: 700;
  color: var(--black);
  font-size: 48px;
  text-align: center;
  letter-spacing: 4px;
  line-height: 16px;
}

.past-event-text-wrapper-11 {
  position: relative;
  align-self: stretch;
  font-weight: 600;
  color: var(--black);
  font-size: 18px;
  text-align: center;
  letter-spacing: 4px;
  line-height: 16px;
}

.past-event-frame-42 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  padding: 44px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.past-event-text-wrapper-12 {
  position: relative;
  align-self: stretch;
  font-family: "Inter", Helvetica;
  font-weight: 400;
  color: var(--black);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 22.4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.past-event-frame-43 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 6px;
  position: relative;
  flex: 0 0 auto;
}

.past-event-text-wrapper-13 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  font-size: 16px;
  letter-spacing: 0.16px;
  line-height: 24px;
  white-space: nowrap;
}

.past-event-sale-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 41px;
  overflow: hidden;
  transform: rotate(-90deg);
}

.past-event-sale-2 {
  width: 18px;
  height: 18px;
  transform: rotate(90deg);
  background-image: url(./img/chevron-right.svg);
  position: relative;
  background-size: 100% 100%;
}

.past-event-card-2 {
  display: flex;
  flex-direction: column;
  width: 602px;
  align-items: flex-start;
  position: relative;
  margin-top: -1px;
  margin-bottom: -1px;
  margin-right: -1px;
  background-color: #f8f8f9;
  border-radius: 16px;
  border: 1px solid;
  border-color: #e9e9e9;
}
/* Inject original CSS code here */

.past-event-ellipse {
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #d9d9d9;
  border-radius: 6px;
  aspect-ratio: 1;
  border: none;
  padding: 0;
  cursor: pointer;
}

.past-event-ellipse-2 {
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #d9d9d966;
  border-radius: 6px;
  aspect-ratio: 1;
  border: none;
  padding: 0;
  cursor: pointer;
}

.past-event-ellipse:hover,
.past-event-ellipse-2:hover {
  opacity: 0.8;
}

.past-event-ellipse:focus,
.past-event-ellipse-2:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.past-event-frame-15 {
  display: flex;
  flex-wrap: wrap;
  width: 349px;
  align-items: center;
  gap: 12px 12px;
  position: relative;
  flex: 0 0 auto;
  list-style: none;
  padding: 0;
  margin: 0;
}

.past-event-frame-24 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  list-style: none;
  padding: 0;
  margin: 0;
}

.past-event-frame-24::before {
  content: "•";
  color: var(--black);
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  font-size: var(--body-p1-font-size);
  line-height: var(--body-p1-line-height);
  flex-shrink: 0;
}

.past-event-frame-33 {
  display: flex;
  flex-wrap: wrap;
  width: 349px;
  align-items: center;
  gap: 6px 6px;
  position: relative;
  flex: 0 0 auto;
  list-style: none;
  padding: 0;
  margin: 0;
}

.past-event-frame-43 {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 6px;
  position: relative;
  flex: 0 0 auto;
  list-style: none;
  padding: 0;
  margin: 0;
}

.past-event-grid {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: var(--x500crea-pink);
  border-radius: 41px;
  overflow: hidden;
  aspect-ratio: 1;
  gap: var(--3-spacing-spacing-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.past-event-grid:hover {
  background-color: var(--x700crea-pink);
}

.past-event-grid:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.past-event-sale-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 41px;
  overflow: hidden;
  transform: rotate(-90deg);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.past-event-sale-wrapper:hover {
  background-color: var(--x700crea-pink);
}

.past-event-sale-wrapper:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.past-event-frame-27 a.frame-27 {
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.past-event-frame-27 a.frame-27:hover {
  opacity: 0.8;
}

.past-event-frame-27 a.frame-27:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* Past events styling ends */

/* Training and Services Styling Starts */

.trainings-training {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: #ffffff;
}

.trainings-frame {
  display: flex;
  flex-direction: column;
  height: 500px;
  align-items: flex-start;
  justify-content: space-around;
  gap: 164px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--x-50-0teal);
  border-radius: 0px 0px 32px 32px;
}

.trainings-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 100px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.trainings-frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 377px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
}

.trainings-frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.trainings-text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--dispaly-h2-font-family);
  font-weight: var(--dispaly-h2-font-weight);
  color: #ffffff;
  font-size: var(--dispaly-h2-font-size);
  text-align: center;
  letter-spacing: var(--dispaly-h2-letter-spacing);
  line-height: var(--dispaly-h2-line-height);
  white-space: nowrap;
  font-style: var(--dispaly-h2-font-style);
}

.trainings-vector {
  position: relative;
  width: 160.02px;
  height: 8.54px;
  margin-bottom: -3.92px;
  margin-left: -0.01px;
}

.trainings-group {
  position: relative;
  width: 333.13px;
  height: 334.16px;
}

.trainings-div-wrapper {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  padding: 80px 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.trainings-frame-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.trainings-frame-4 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.trainings-frame-5 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.trainings-frame-6 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.trainings-frame-7 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.trainings-text-wrapper-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--title-h1-font-family);
  font-weight: var(--title-h1-font-weight);
  color: var(--black);
  font-size: var(--title-h1-font-size);
  text-align: center;
  letter-spacing: var(--title-h1-letter-spacing);
  line-height: var(--title-h1-line-height);
  white-space: nowrap;
  font-style: var(--title-h1-font-style);
}

.trainings-img {
  position: relative;
  width: 112.01px;
  height: 8.21px;
  margin-bottom: -3.96px;
  margin-left: -0.01px;
}

.trainings-frame-8 {
  display: flex;
  flex-direction: column;
  width: 817px;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  position: relative;
}

.trainings-frame-9 {
  display: flex;
  width: 816px;
  align-items: center;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.trainings-frame-10 {
  display: flex;
  flex-direction: column;
  height: 392px;
  align-items: center;
  position: relative;
  flex: 1;
  flex-grow: 1;
  border-radius: 24px;
}

.trainings-group-2 {
  background-image: url(./img/image-1-1.png);
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
  background-size: 100% 100%;
}

.trainings-frame-11 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.trainings-text-wrapper-3 {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-weight: 700;
  color: var(--black);
  font-size: 24px;
  letter-spacing: -0.24px;
  line-height: 28.8px;
}

.trainings-group-3 {
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.trainings-frame-12 {
  width: 392px;
  height: 315px;
  border-radius: 16px;
  background-image: url(./img/frame-645-1.png);
  background-size: cover;
  background-position: 50% 50%;
}

.trainings-frame-13 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 80px 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.trainings-frame-14 {
  display: flex;
  flex-direction: column;
  width: 392px;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  overflow-y: scroll;
}

.trainings-frame-14::-webkit-scrollbar {
  width: 0;
  display: none;
}

.trainings-text-wrapper-4 {
  position: relative;
  width: 379px;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: var(--black);
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  font-style: var(--title-h2-font-style);
}

.trainings-vector-2 {
  position: relative;
  width: 189px;
  height: 1px;
}

.trainings-frame-15 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}

.trainings-frame-16 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.trainings-frame-17 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.trainings-frame-18 {
  display: inline-flex;
  align-items: flex-start;
  gap: 40px;
  padding: 0px 0px 32px;
  position: relative;
  flex: 0 0 auto;
}

.trainings-frame-19 {
  display: flex;
  width: 808px;
  align-items: flex-start;
  gap: 40px;
  position: relative;
}

.trainings-frame-20 {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 153px;
  aspect-ratio: 1;
  background-image: url(./img/frame-645-2.svg);
  background-size: cover;
  background-position: 50% 50%;
}

.trainings-frame-21 {
  display: flex;
  width: 601px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 0px;
  position: relative;
}

.trainings-frame-22 {
  display: flex;
  flex-direction: column;
  width: 551px;
  align-items: flex-start;
  gap: 24px;
  position: relative;
}

.trainings-frame-23 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.trainings-frame-24 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.trainings-text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 700;
  color: var(--black);
  font-size: 24px;
  letter-spacing: -0.24px;
  line-height: 28.8px;
  white-space: nowrap;
}

.trainings-vector-3 {
  position: relative;
  width: 1px;
  height: 23px;
}

.trainings-text-wrapper-6 {
  position: relative;
  width: fit-content;
  font-weight: 600;
  color: var(--black);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 34px;
  white-space: nowrap;
}

.trainings-vector-4 {
  position: relative;
  width: 117px;
  height: 5px;
  margin-bottom: -2.5px;
}

.trainings-frame-25 {
  display: inline-flex;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.trainings-label-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x-50-0yellow);
  border-radius: 41px;
}

.trainings-label {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: 16px;
  white-space: nowrap;
}

.trainings-co-founder-executive {
  position: relative;
  align-self: stretch;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: var(--black);
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  font-style: var(--body-p3-font-style);
}

.trainings-icons-wrapper {
  display: flex;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  position: relative;
  border-radius: 25px;
  aspect-ratio: 1;
}

.trainings-icons {
  background-image: url(./img/chevron-down-5.svg);
  position: relative;
  width: 44px;
  height: 44px;
  margin-top: -5px;
  margin-bottom: -5px;
  margin-left: -5px;
  margin-right: -5px;
  background-size: 100% 100%;
}

.trainings-frame-26 {
  display: inline-flex;
  align-items: flex-start;
  gap: 40px;
  padding: 32px 0px;
  position: relative;
  flex: 0 0 auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #cad4de;
}

.trainings-frame-27 {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 153px;
  aspect-ratio: 1;
  background-image: url(./img/frame-645-3.svg);
  background-size: cover;
  background-position: 50% 50%;
}

.trainings-frame-28 {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 153px;
  aspect-ratio: 1;
  background-image: url(./img/frame-645-4.svg);
  background-size: cover;
  background-position: 50% 50%;
}

.trainings-frame-29 {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 153px;
  aspect-ratio: 1;
  background-image: url(./img/frame-645-5.svg);
  background-size: cover;
  background-position: 50% 50%;
}
/* Inject original CSS code here */

.trainings-icons-wrapper {
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.trainings-icons-wrapper:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.trainings-icons-wrapper:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.trainings-icons-wrapper:active {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Training and Services Styling Ends */

/* Join Us styling starts */

.join-us-get-in-touch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.join-us-frame {
  display: flex;
  flex-direction: column;
  height: 500px;
  align-items: flex-start;
  justify-content: space-around;
  gap: 164px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--x-50-0teal);
  border-radius: 0px 0px 32px 32px;
}

.join-us-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 100px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.join-us-frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 377px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
}

.join-us-frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-text-wrapper {
  font-weight: var(--dispaly-h2-font-weight);
  color: #ffffff;
  font-size: var(--dispaly-h2-font-size);
  letter-spacing: var(--dispaly-h2-letter-spacing);
  line-height: var(--dispaly-h2-line-height);
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--dispaly-h2-font-family);
  white-space: nowrap;
  font-style: var(--dispaly-h2-font-style);
}

.join-us-vector {
  position: relative;
  width: 160.02px;
  height: 8.54px;
  margin-bottom: -3.92px;
  margin-left: -0.01px;
}

.join-us-group {
  position: relative;
  width: 333.13px;
  height: 334.16px;
}

.join-us-div-wrapper {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.join-us-frame-3 {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  padding: 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.join-us-frame-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-frame-5 {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-frame-6 {
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  border-radius: 16px;
  background-image: url(./img/frame-1000004278-1.png);
  background-size: cover;
  background-position: 50% 50%;
}

.join-us-frame-7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  padding: 24px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.join-us-group-2 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 215px;
  margin-right: -2px;
}

.join-us-frame-8 {
  display: flex;
  flex-direction: column;
  width: 370.09px;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  position: absolute;
  top: 0;
  left: 0;
}

.join-us-p {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  margin-right: -35.91px;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: var(--black);
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  white-space: nowrap;
  font-style: var(--title-h2-font-style);
}

.join-us-text-wrapper-2 {
  position: absolute;
  top: 53px;
  left: 0;
  width: 552px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.join-us-frame-9 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-text-wrapper-3 {
  font-weight: var(--title-h2-font-weight);
  color: var(--black);
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--title-h2-font-family);
  white-space: nowrap;
  font-style: var(--title-h2-font-style);
}

.join-us-frame-10 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-frame-11 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-frame-12 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-frame-13 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-frame-14 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.join-us-frame-15 {
  display: flex;
  height: 54px;
  align-items: center;
  gap: 10px;
  padding: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid;
  border-color: #dedede;
}

.join-us-text-wrapper-4 {
  position: relative;
  width: fit-content;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: var(--x-70-0neutral);
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  white-space: nowrap;
  font-style: var(--body-p3-font-style);
}

.join-us-frame-16 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-frame-17 {
  display: flex;
  height: 134px;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid;
  border-color: #dedede;
}

.join-us-text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: var(--x-70-0neutral);
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  white-space: nowrap;
  font-style: var(--body-p3-font-style);
}

.join-us-frame-18 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-frame-19 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.join-us-frame-20 {
  position: relative;
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px solid;
  border-color: #dedede;
  aspect-ratio: 1;
}

.join-us-frame-21 {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  position: relative;
  background-color: var(--x500crea-pink);
  border-radius: 12px;
}

.join-us-text-wrapper-6 {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.15px;
  line-height: 22px;
  white-space: nowrap;
}

.join-us-sale {
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: -4px;
  margin-bottom: -4px;
  aspect-ratio: 1;
  background-image: url(./img/chevron-right-2.svg);
  background-size: 100% 100%;
}
/* Original CSS should be injected here */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.join-us-frame-15 input[type="text"],
.join-us-frame-15 input[type="email"] {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: var(--black);
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  font-style: var(--body-p3-font-style);
  outline: none;
}

.join-us-frame-15 input[type="text"]::placeholder,
.join-us-frame-15 input[type="email"]::placeholder {
  color: var(--x-70-0neutral);
}

.join-us-frame-15 input[type="text"]:focus,
.join-us-frame-15 input[type="email"]:focus {
  outline: 2px solid var(--x-50-0teal);
  outline-offset: -2px;
}

.join-us-frame-17 textarea {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: var(--black);
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  font-style: var(--body-p3-font-style);
  resize: vertical;
  outline: none;
  margin: 0;
  padding: 0;
}

.join-us-frame-17 textarea::placeholder {
  color: var(--x-70-0neutral);
}

.join-us-frame-17 textarea:focus {
  outline: 2px solid var(--x-50-0teal);
  outline-offset: -2px;
}

.join-us-frame-20 {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  cursor: pointer;
}

.join-us-frame-20:checked {
  background-color: var(--x-50-0teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  border-color: var(--x-50-0teal);
}

.join-us-frame-20:focus {
  outline: 2px solid var(--x-50-0teal);
  outline-offset: 2px;
}

.join-us-frame-19 label {
  cursor: pointer;
}

.join-us-frame-21 {
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.join-us-frame-21:hover {
  background-color: var(--x700crea-pink);
}

.join-us-frame-21:focus {
  outline: 2px solid var(--x-50-0teal);
  outline-offset: 2px;
}

.join-us-frame-21:active {
  background-color: var(--x900crea-pink);
}

.join-us-get-in-touch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.join-us-frame {
  display: flex;
  flex-direction: column;
  height: 500px;
  align-items: flex-start;
  justify-content: space-around;
  gap: 164px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--x-50-0teal);
  border-radius: 0px 0px 32px 32px;
}

.join-us-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 100px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.join-us-frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 377px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
}

.join-us-frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-text-wrapper {
  font-weight: var(--dispaly-h2-font-weight);
  color: #ffffff;
  font-size: var(--dispaly-h2-font-size);
  letter-spacing: var(--dispaly-h2-letter-spacing);
  line-height: var(--dispaly-h2-line-height);
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--dispaly-h2-font-family);
  white-space: nowrap;
  font-style: var(--dispaly-h2-font-style);
}

.join-us-vector {
  position: relative;
  width: 160.02px;
  height: 8.54px;
  margin-bottom: -3.92px;
  margin-left: -0.01px;
}

.join-us-group {
  position: relative;
  width: 333.13px;
  height: 334.16px;
}

.join-us-div-wrapper {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.join-us-frame-3 {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  padding: 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.join-us-frame-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-frame-5 {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-frame-6 {
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  border-radius: 16px;
  background-image: url(./img/frame-1000004278-1.png);
  background-size: cover;
  background-position: 50% 50%;
}

.join-us-frame-7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  padding: 24px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.join-us-group-2 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 215px;
  margin-right: -2px;
}

.join-us-frame-8 {
  display: flex;
  flex-direction: column;
  width: 370.09px;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  position: absolute;
  top: 0;
  left: 0;
}

.join-us-p {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  margin-right: -35.91px;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: var(--black);
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  white-space: nowrap;
  font-style: var(--title-h2-font-style);
}

.join-us-text-wrapper-2 {
  position: absolute;
  top: 53px;
  left: 0;
  width: 552px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.join-us-frame-9 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-text-wrapper-3 {
  font-weight: var(--title-h2-font-weight);
  color: var(--black);
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--title-h2-font-family);
  white-space: nowrap;
  font-style: var(--title-h2-font-style);
}

.join-us-frame-10 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-frame-11 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-frame-12 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-frame-13 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-frame-14 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.join-us-frame-15 {
  display: flex;
  height: 54px;
  align-items: center;
  gap: 10px;
  padding: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid;
  border-color: #dedede;
}

.join-us-text-wrapper-4 {
  position: relative;
  width: fit-content;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: var(--x-70-0neutral);
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  white-space: nowrap;
  font-style: var(--body-p3-font-style);
}

.join-us-frame-16 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-frame-17 {
  display: flex;
  height: 134px;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid;
  border-color: #dedede;
}

.join-us-text-wrapper-5 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: var(--x-70-0neutral);
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  white-space: nowrap;
  font-style: var(--body-p3-font-style);
}

.join-us-frame-18 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us-frame-19 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.join-us-frame-20 {
  position: relative;
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px solid;
  border-color: #dedede;
  aspect-ratio: 1;
}

.join-us-frame-21 {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  position: relative;
  background-color: var(--x500crea-pink);
  border-radius: 12px;
}

.join-us-text-wrapper-6 {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.15px;
  line-height: 22px;
  white-space: nowrap;
}

.join-us-sale {
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: -4px;
  margin-bottom: -4px;
  aspect-ratio: 1;
  background-image: url(./img/chevron-right-2.svg);
  background-size: 100% 100%;
}

/* Join Us styling ends */

/* Online Course Styling Starts */

.lp-course-course-self-paced {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: #ffffff;
}

.lp-course-frame {
  display: flex;
  flex-direction: column;
  height: 500px;
  align-items: flex-start;
  justify-content: space-around;
  gap: 164px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--x-50-0teal);
  border-radius: 0px 0px 32px 32px;
}

.lp-course-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 100px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.lp-course-frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 377px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
}

.lp-course-frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lp-course-text-wrapper {
  position: relative;
  width: 646px;
  margin-top: -1px;
  margin-right: -269px;
  font-family: var(--title-h1-font-family);
  font-weight: var(--title-h1-font-weight);
  color: #ffffff;
  font-size: var(--title-h1-font-size);
  letter-spacing: var(--title-h1-letter-spacing);
  line-height: var(--title-h1-line-height);
  font-style: var(--title-h1-font-style);
}

.lp-course-vector {
  position: relative;
  width: 160.02px;
  height: 8.54px;
  margin-bottom: -3.92px;
  margin-left: -0.01px;
}

.lp-course-group {
  position: relative;
  width: 333.13px;
  height: 334.16px;
}

.lp-course-frame-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lp-course-frame-4 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 80px 100px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lp-course-frame-5 {
  display: flex;
  flex-direction: column;
  width: 391px;
  align-items: flex-start;
  gap: 32px;
  position: relative;
}

.lp-course-frame-6 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lp-course-label-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x-50-0yellow);
  border-radius: 1000px;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
}

.lp-course-label {
  font-size: 18px;
  letter-spacing: 0;
  line-height: 30px;
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
}

.lp-course-div-wrapper {
  display: flex;
  width: 320px;
  align-items: center;
  gap: 12px;
  padding: 16px 0px;
  position: relative;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #cad4de;
}

.lp-course-frame-7 {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.lp-course-frame-8 {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px;
  position: relative;
  background-color: var(--x-50-0yellow);
  border-radius: 25px;
  aspect-ratio: 1;
}

.lp-course-icons {
  position: relative;
  width: 18px;
  height: 18px;
  background-image: url(./img/video.svg);
  background-size: 100% 100%;
}

.lp-course-frame-9 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.lp-course-text-wrapper-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--label-h4-font-family);
  font-weight: var(--label-h4-font-weight);
  color: #00000099;
  font-size: var(--label-h4-font-size);
  text-align: center;
  letter-spacing: var(--label-h4-letter-spacing);
  line-height: var(--label-h4-line-height);
  white-space: nowrap;
  font-style: var(--label-h4-font-style);
}

.lp-course-text-wrapper-3 {
  position: relative;
  width: fit-content;
  font-weight: 600;
  color: var(--black);
  font-size: 18px;
  letter-spacing: 0;
  line-height: 30px;
  white-space: nowrap;
}

.lp-course-calendar {
  position: relative;
  width: 18px;
  height: 18px;
}

.lp-course-icon {
  position: absolute;
  width: 75%;
  height: 83.33%;
  top: 4.17%;
  left: 8.33%;
}

.lp-course-icons-2 {
  position: relative;
  width: 18px;
  height: 18px;
  background-image: url(./img/clock-2.svg);
  background-size: 100% 100%;
}

.lp-course-frame-10 {
  display: flex;
  width: 320px;
  align-items: center;
  gap: 12px;
  padding: 16px 0px;
  position: relative;
  flex: 0 0 auto;
}

.lp-course-img {
  position: relative;
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
}

.lp-course-frame-11 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.lp-course-frame-12 {
  display: flex;
  flex-wrap: wrap;
  width: 349px;
  align-items: center;
  gap: 12px 12px;
  position: relative;
  flex: 0 0 auto;
}

.lp-course-frame-13 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 1000px;
  border: 1px solid;
  border-color: #d0d0d0;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
}

.lp-course-label-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--label-h4-font-family);
  font-weight: var(--label-h4-font-weight);
  color: var(--black);
  font-size: var(--label-h4-font-size);
  text-align: center;
  letter-spacing: var(--label-h4-letter-spacing);
  line-height: var(--label-h4-line-height);
  white-space: nowrap;
  font-style: var(--label-h4-font-style);
}

.lp-course-frame-14 {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  position: relative;
  background-color: var(--x500crea-pink);
  border-radius: 12px;
}

.lp-course-text-wrapper-4 {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.15px;
  line-height: 22px;
  white-space: nowrap;
}

.lp-course-sale {
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: -4px;
  margin-bottom: -4px;
  aspect-ratio: 1;
  background-image: url(./img/chevron-right-2.svg);
  background-size: 100% 100%;
}

.lp-course-frame-15 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  position: relative;
  flex: 0 0 auto;
}

.lp-course-frame-16 {
  display: flex;
  flex-direction: column;
  width: 817px;
  align-items: flex-start;
  gap: 60px;
  position: relative;
  flex: 0 0 auto;
}

.lp-course-a-self-administered-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lp-course-p {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.lp-course-frame-17 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lp-course-frame-18 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 426px;
  border-radius: 16px;
  background-image: url(./img/frame-1000004278-1.png);
  background-size: cover;
  background-position: 50% 50%;
}

.lp-course-frame-19 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  top: 387px;
  left: 357px;
}

.lp-course-ellipse {
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #d9d9d9;
  border-radius: 6px;
  aspect-ratio: 1;
}

.lp-course-ellipse-2 {
  position: relative;
  width: 12px;
  height: 12px;
  background-color: #d9d9d966;
  border-radius: 6px;
  aspect-ratio: 1;
}

.lp-course-frame-20 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  position: relative;
  flex: 0 0 auto;
}

.lp-course-frame-21 {
  display: flex;
  flex-direction: column;
  width: 817px;
  align-items: flex-start;
  gap: 32px;
  padding: 0px 0px 60px;
  position: relative;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #cad4de;
}

.lp-course-text-wrapper-5 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--title-h3-font-family);
  font-weight: var(--title-h3-font-weight);
  color: var(--black);
  font-size: var(--title-h3-font-size);
  letter-spacing: var(--title-h3-letter-spacing);
  line-height: var(--title-h3-line-height);
  font-style: var(--title-h3-font-style);
}

.lp-course-frame-22 {
  display: flex;
  align-self: stretch;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  position: relative;
  flex: 0 0 auto;
}

.lp-course-frame-23 {
  display: flex;
  flex-direction: column;
  width: 817px;
  align-items: flex-start;
  gap: 10px;
  padding: 0px 0px 60px;
  position: relative;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #cad4de;
}

.lp-course-frame-24 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lp-course-frame-25 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lp-course-text-wrapper-6 {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.lp-course-text-wrapper-7 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--title-h3-font-family);
  font-weight: var(--title-h3-font-weight);
  color: var(--black);
  font-size: var(--title-h3-font-size);
  letter-spacing: var(--title-h3-letter-spacing);
  line-height: var(--title-h3-line-height);
  white-space: nowrap;
  font-style: var(--title-h3-font-style);
}

.lp-course-frame-26 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lp-course-frame-27 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.lp-course-frame-28 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x-10-0yellow);
  border-radius: 8px;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
}

.lp-course-label-3 {
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.16px;
  line-height: 16px;
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
}

.lp-course-frame-29 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lp-course-frame-30 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lp-course-frame-31 {
  display: flex;
  width: 26px;
  align-items: center;
  gap: 10px;
  position: relative;
}

.lp-course-text-wrapper-8 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 400;
  color: var(--black);
  font-size: 18px;
  letter-spacing: 0;
  line-height: 30px;
  white-space: nowrap;
}

.lp-course-frame-32 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.lp-course-text-wrapper-9 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  white-space: nowrap;
  font-style: var(--body-p1-font-style);
}

.lp-course-frame-33 {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  padding: 80px 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
}

.lp-course-frame-34 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.lp-course-frame-35 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.lp-course-text-wrapper-10 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--title-h1-font-family);
  font-weight: var(--title-h1-font-weight);
  color: var(--black);
  font-size: var(--title-h1-font-size);
  text-align: center;
  letter-spacing: var(--title-h1-letter-spacing);
  line-height: var(--title-h1-line-height);
  white-space: nowrap;
  font-style: var(--title-h1-font-style);
}

.lp-course-vector-2 {
  position: relative;
  width: 112.01px;
  height: 8.21px;
  margin-bottom: -3.96px;
  margin-left: -0.01px;
}

.lp-course-frame-36 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lp-course-frame-37 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lp-course-frame-38 {
  display: flex;
  flex-direction: column;
  height: 392px;
  align-items: center;
  position: relative;
  flex: 1;
  flex-grow: 1;
  border-radius: 24px;
}

.lp-course-group-2 {
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.lp-course-frame-39 {
  width: 392px;
  height: 312px;
  border-radius: 16px;
  background-image: url(./img/frame-645.png);
  background-size: cover;
  background-position: 50% 50%;
}

.lp-course-frame-40 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.lp-course-text-wrapper-11 {
  position: relative;
  width: fit-content;
  font-weight: 600;
  color: var(--black);
  font-size: 20px;
  letter-spacing: -0.2px;
  line-height: 24px;
  white-space: nowrap;
}

.lp-course-grid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 41px;
  overflow: hidden;
  transform: rotate(-90deg);
}

.lp-course-sale-2 {
  background-image: url(./img/chevron-right-5.svg);
  position: relative;
  width: 18px;
  height: 18px;
  transform: rotate(90deg);
  background-size: 100% 100%;
}

.lp-course-group-3 {
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
  background-image: url(./img/image-1.png);
  background-size: 100% 100%;
}

.lp-course-frame-41 {
  width: 392px;
  height: 312px;
  border-radius: 16px;
  background-image: url(./img/frame-645-1.png);
  background-size: cover;
  background-position: 50% 50%;
}
/* Original CSS code should be injected here */

/* Refactored CSS additions and modifications */

.lp-course-frame-11 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-course-frame-11 li {
  display: inline-flex;
}

.lp-course-frame-24 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-course-frame-24 > li::before {
  content: "•";
  color: var(--black);
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.lp-course-frame-29 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-course-frame-37 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-course-frame-14 {
  text-decoration: none;
  cursor: pointer;
}

.lp-course-frame-14:hover {
  opacity: 0.9;
}

.lp-course-frame-14:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.lp-course-grid {
  text-decoration: none;
  cursor: pointer;
}

.lp-course-grid:hover {
  opacity: 0.9;
}

.lp-course-grid:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.lp-course-frame-19 span {
  cursor: pointer;
}

.lp-course-frame-19 span:hover {
  opacity: 0.8;
}

.lp-course-frame-19 span:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* Online Course Styling Ends */

/* Single Knowledge Resource Styling  */

.knowledge-resources {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: #ffffff;
}

.single-knowledge-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  position: relative;
  align-self: stretch;
  width: 1440px;
  flex: 0 0 auto;
}

.single-knowledge-div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.single-knowledge-frame-2 {
  display: flex;
  flex-direction: column;
  width: 1441px;
  height: 500px;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  margin-right: -1px;
  background-color: var(--x-50-0teal);
  border-radius: 0px 0px 32px 32px;
}

.single-knowledge-menu {
  display: flex;
  height: 100px;
  align-items: center;
  padding: 0px 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--x-50-0teal);
}

.single-knowledge-frame-3 {
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.single-knowledge-img {
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
}

.single-knowledge-vector {
  position: relative;
  width: 1px;
  height: 40px;
}

.single-knowledge-frame-4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.single-knowledge-frame-5 {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
}

.single-knowledge-frame-6 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-text-wrapper {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.15px;
  line-height: 22px;
  white-space: nowrap;
}

.single-knowledge-sale {
  position: relative;
  width: 24px;
  height: 24px;
  transform: rotate(90deg);
  aspect-ratio: 1;
}

.single-knowledge-chevron-right {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
}

.single-knowledge-div-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 8px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-text-wrapper-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 500;
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.15px;
  line-height: 22px;
  white-space: nowrap;
}

.single-knowledge-frame-7 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 8px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-frame-8 {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 12px;
}

.single-knowledge-sale-2 {
  width: 24px;
  height: 24px;
  margin-top: -4px;
  margin-bottom: -4px;
  background-image: url(./img/chevron-right-1.svg);
  position: relative;
  aspect-ratio: 1;
  background-size: 100% 100%;
}

.single-knowledge-frame-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 40px;
  padding: 0px 100px 60px;
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
}

.single-knowledge-frame-9 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.single-knowledge-frame-10 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-frame-11 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-text-wrapper-3 {
  position: relative;
  width: fit-content;
  font-weight: 500;
  color: var(--x-30-0neutral);
  font-size: 14px;
  letter-spacing: 2.52px;
  line-height: 24.2px;
  white-space: nowrap;
}

.single-knowledge-chevron-right-2 {
  position: relative;
  width: 18px;
  height: 18px;
}

.single-knowledge-knowledge-brief {
  font-weight: 500;
  color: var(--white);
  font-size: 14px;
  letter-spacing: 2.52px;
  line-height: 24.2px;
  position: relative;
  width: fit-content;
  white-space: nowrap;
}

.single-knowledge-frame-12 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-p {
  position: relative;
  width: 654px;
  margin-top: -1px;
  font-family: var(--title-h1-font-family);
  font-weight: var(--title-h1-font-weight);
  color: #ffffff;
  font-size: var(--title-h1-font-size);
  letter-spacing: var(--title-h1-letter-spacing);
  line-height: var(--title-h1-line-height);
  font-style: var(--title-h1-font-style);
}

.single-knowledge-vector-2 {
  position: relative;
  width: 298.02px;
  height: 9.9px;
  margin-bottom: -3.76px;
  margin-left: -0.02px;
}

.single-knowledge-group {
  position: relative;
  width: 333.13px;
  height: 334.16px;
}

.single-knowledge-frame-13 {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 0px 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.single-knowledge-frame-14 {
  display: flex;
  flex-direction: column;
  width: 391px;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 0px;
  position: relative;
}

.single-knowledge-frame-15 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.single-knowledge-frame-16 {
  display: flex;
  flex-wrap: wrap;
  width: 349px;
  align-items: center;
  gap: 10px 10px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-label-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 1000px;
  border: 1px solid;
  border-color: #d0d0d0;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-label {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--label-h4-font-family);
  font-weight: var(--label-h4-font-weight);
  color: var(--black);
  font-size: var(--label-h4-font-size);
  text-align: center;
  letter-spacing: var(--label-h4-letter-spacing);
  line-height: var(--label-h4-line-height);
  white-space: nowrap;
  font-style: var(--label-h4-font-style);
}

.single-knowledge-frame-17 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-element-jan-min {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--body-p2-font-family);
  font-weight: var(--body-p2-font-weight);
  color: var(--black);
  font-size: var(--body-p2-font-size);
  text-align: center;
  letter-spacing: var(--body-p2-letter-spacing);
  line-height: var(--body-p2-line-height);
  white-space: nowrap;
  font-style: var(--body-p2-font-style);
}

.single-knowledge-vector-3 {
  position: relative;
  width: 100px;
  height: 8px;
  margin-bottom: -4px;
}

.single-knowledge-frame-18 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  padding: 24px 0px 60px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.single-knowledge-frame-19 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0px 0px 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #dedede;
}

.single-knowledge-text-wrapper-4 {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.single-knowledge-text-wrapper-5 {
  position: relative;
  align-self: stretch;
  font-family: var(--title-h3-font-family);
  font-weight: var(--title-h3-font-weight);
  color: var(--black);
  font-size: var(--title-h3-font-size);
  letter-spacing: var(--title-h3-letter-spacing);
  line-height: var(--title-h3-line-height);
  font-style: var(--title-h3-font-style);
}

.single-knowledge-frame-20 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.single-knowledge-frame-21 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-text-wrapper-6 {
  position: relative;
  width: 776px;
  margin-top: -1px;
  font-family: var(--body-p1-font-family);
  font-weight: var(--body-p1-font-weight);
  color: var(--black);
  font-size: var(--body-p1-font-size);
  letter-spacing: var(--body-p1-letter-spacing);
  line-height: var(--body-p1-line-height);
  font-style: var(--body-p1-font-style);
}

.single-knowledge-frame-22 {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-frame-23 {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0px 24px;
  position: relative;
  border-radius: 12px;
  border: 1px solid;
  border-color: var(--black);
}

.single-knowledge-SECONDARY {
  position: relative;
  width: fit-content;
  font-family: var(--label-h3-font-family);
  font-weight: var(--label-h3-font-weight);
  color: var(--black);
  font-size: var(--label-h3-font-size);
  letter-spacing: var(--label-h3-letter-spacing);
  line-height: var(--label-h3-line-height);
  white-space: nowrap;
  font-style: var(--label-h3-font-style);
}

.single-knowledge-sale-3 {
  width: 24px;
  height: 24px;
  background-image: url(./img/chevron-right-4.svg);
  position: relative;
  aspect-ratio: 1;
  background-size: 100% 100%;
}

.single-knowledge-frame-24 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
  border-radius: 32px 32px 0px 0px;
}

.single-knowledge-frame-25 {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: flex-start;
  gap: 40px;
  padding: 100px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 32px 32px 0px 0px;
}

.single-knowledge-frame-26 {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.single-knowledge-frame-27 {
  display: flex;
  flex-direction: column;
  width: 392px;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
  overflow-y: scroll;
}

.single-knowledge-frame-27::-webkit-scrollbar {
  width: 0;
  display: none;
}

.single-knowledge-text-wrapper-7 {
  position: relative;
  width: 379px;
  font-family: var(--title-h2-font-family);
  font-weight: var(--title-h2-font-weight);
  color: var(--black);
  font-size: var(--title-h2-font-size);
  letter-spacing: var(--title-h2-letter-spacing);
  line-height: var(--title-h2-line-height);
  font-style: var(--title-h2-font-style);
}

.single-knowledge-vector-4 {
  position: relative;
  width: 189px;
  height: 1px;
}

.single-knowledge-frame-28 {
  flex: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.single-knowledge-frame-29 {
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}

.single-knowledge-frame-30 {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 32px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #cad4de;
}

.single-knowledge-frame-31 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.single-knowledge-frame-32 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x-50-0yellow);
  border-radius: 41px;
}

.single-knowledge-label-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
  line-height: 16px;
  white-space: nowrap;
}

.single-knowledge-text-wrapper-8 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-weight: 600;
  color: var(--black);
  font-size: 18px;
  letter-spacing: 0;
  line-height: 30px;
}

.single-knowledge-frame-33 {
  display: flex;
  flex-wrap: wrap;
  width: 349px;
  align-items: center;
  gap: 6px 6px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-frame-34 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 1000px;
  border: 1px solid;
  border-color: #d8dbde;
  backdrop-filter: blur(6px) brightness(100%);
  -webkit-backdrop-filter: blur(6px) brightness(100%);
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-grid-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-grid {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: var(--x500crea-pink);
  border-radius: 41px;
  overflow: hidden;
  aspect-ratio: 1;
  gap: var(--3-spacing-spacing-xl);
}

.single-knowledge-sale-4 {
  top: calc(50% - 9px);
  left: calc(50% - 10px);
  width: 20px;
  height: 20px;
  background-image: url(./img/arrow-down-2.svg);
  position: relative;
  aspect-ratio: 1;
  background-size: 100% 100%;
}

.single-knowledge-footer {
  display: flex;
  flex-direction: column;
  width: 1440px;
  align-items: center;
  padding: 0px 100px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--light-blue);
  border-radius: 32px 32px 0px 0px;
  overflow: hidden;
}

.single-knowledge-frame-35 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 100px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.single-knowledge-frame-36 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.single-knowledge-frame-37 {
  display: flex;
  flex-direction: column;
  width: 1240px;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
  margin-left: -100px;
  margin-right: -100px;
}

.single-knowledge-text-wrapper-9 {
  position: relative;
  width: 864px;
  margin-top: -1px;
  font-family: var(--title-h1-font-family);
  font-weight: var(--title-h1-font-weight);
  color: var(--black);
  font-size: var(--title-h1-font-size);
  text-align: center;
  letter-spacing: var(--title-h1-letter-spacing);
  line-height: var(--title-h1-line-height);
  font-style: var(--title-h1-font-style);
}

.single-knowledge-vector-5 {
  position: relative;
  width: 285.51px;
  height: 8.84px;
  margin-bottom: -3.88px;
}

.single-knowledge-frame-38 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-text-wrapper-10 {
  position: relative;
  width: 455px;
  margin-top: -1px;
  font-weight: 400;
  color: var(--black);
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: 28px;
}

.single-knowledge-frame-39 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-frame-40 {
  display: flex;
  width: 252px;
  height: 54px;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  position: relative;
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid;
  border-color: #dedede;
}

.single-knowledge-text-wrapper-11 {
  position: relative;
  width: fit-content;
  font-family: var(--body-p3-font-family);
  font-weight: var(--body-p3-font-weight);
  color: var(--x-70-0neutral);
  font-size: var(--body-p3-font-size);
  letter-spacing: var(--body-p3-letter-spacing);
  line-height: var(--body-p3-line-height);
  white-space: nowrap;
  font-style: var(--body-p3-font-style);
}

.single-knowledge-frame-41 {
  display: inline-flex;
  height: 54px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--x500crea-pink);
  border-radius: 12px;
}

.single-knowledge-sale-5 {
  width: 24px;
  height: 24px;
  margin-top: -1px;
  margin-bottom: -1px;
  background-image: url(./img/chevron-right-5.svg);
  position: relative;
  aspect-ratio: 1;
  background-size: 100% 100%;
}

.single-knowledge-frame-42 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 0px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #d7d7d7;
}

.single-knowledge-frame-43 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.single-knowledge-frame-44 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.single-knowledge-frame-45 {
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-frame-46 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-frame-47 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-frame-48 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.single-knowledge-text-wrapper-12 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 700;
  color: var(--black);
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.single-knowledge-frame-49 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-text-wrapper-13 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 400;
  color: var(--black);
  font-size: 13px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.single-knowledge-text-wrapper-14 {
  position: relative;
  width: 128px;
  margin-top: -1px;
  font-weight: 400;
  color: var(--black);
  font-size: 13px;
  letter-spacing: 0;
  line-height: normal;
}

.single-knowledge-frame-50 {
  display: flex;
  flex-direction: column;
  width: 160px;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-frame-51 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-frame-52 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-frame-53 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-frame-54 {
  display: flex;
  flex-direction: column;
  height: 112px;
  align-items: flex-start;
  justify-content: space-around;
  gap: 18px;
  position: relative;
  align-self: stretch;
  width: 100%;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: #d7d7d7;
}

.single-knowledge-frame-55 {
  display: flex;
  width: 206px;
  align-items: center;
  position: relative;
}

.single-knowledge-frame-56 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  position: relative;
  flex: 0 0 auto;
  margin-right: -15px;
}

.single-knowledge-frame-57 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  position: relative;
  flex: 0 0 auto;
  margin-right: -221px;
}

.single-knowledge-frame-58 {
  position: relative;
  width: 190px;
  height: 9px;
}

.single-knowledge-frame-59 {
  display: inline-flex;
  height: 28px;
  align-items: center;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-content {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 24px;
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
}

.single-knowledge-vector-6 {
  position: relative;
  width: 1px;
  height: 24px;
  margin-left: -0.5px;
}

.single-knowledge-social-icon {
  position: relative;
  width: 24px;
  height: 24px;
}

.single-knowledge-vector-7 {
  position: relative;
  width: 1px;
  height: 24px;
}

.single-knowledge-frame-60 {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.single-knowledge-quicksand-logo-solid {
  position: relative;
  width: 46px;
  height: 46px;
  aspect-ratio: 1;
}

.single-knowledge-LOGO-RGB-all-pink {
  position: relative;
  width: 31px;
  height: 44px;
  aspect-ratio: 0.7;
  object-fit: cover;
}

.single-knowledge-gates-foundation {
  position: relative;
  width: 84px;
  height: 30px;
  aspect-ratio: 2.8;
}