/*=========== TABLE OF CONTENTS ===========
1. Common CSS
2. Page CSS
==========================================*/

/*-------------------------------------
  1. Common CSS
--------------------------------------*/
.stackvectorfift__column--introduct {
  gap: var(--space-3xl);
  display: flex;
  width: 62%;
  flex-direction: column;
  align-items: start;
  @media only screen and (max-width: 1050px) {
    width: 100%;
  }
}

.stackvectorfift__text--description {
  color: var(--black_900) !important;
  font-family: Jost !important;
  text-align: justify;
  width: 100%;
  line-height: 155%;
}

.stackvectorfift__row--overview_one {
  align-self: stretch;
  display: flex;
  padding: var(--space-md) var(--space-3xl);
}

.stackvectorfift__text--overview_one {
  color: var(--gray_800) !important;
  font-weight: 300 !important;
}

/*-------------------------------------
  2. Page CSS
--------------------------------------*/
.columnvectorfif {
  margin-top: 24px;
  gap: var(--space-13xl);
  display: flex;
  flex-direction: column;
  @media only screen and (max-width: 1050px) {
    gap: 55px;
  }

  @media only screen and (max-width: 550px) {
    gap: 37px;
  }
}

.stackcircular {
  height: 472px;
  position: relative;
}

.section__row {
  height: 472px;
  background-image: url("../images/img_group_1080.fdf0d72cfe8b.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: start;
  padding: 174px var(--space-11xl);
  border-radius: var(--radius-3xl);
  @media only screen and (max-width: 1050px) {
    height: auto;
    padding: var(--space-4xl);
  }
}

.section__column {
  margin-bottom: 20px;
  gap: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: start;
}

.section__description {
  color: var(--white_a700) !important;
  font-family: Jost !important;
  font-weight: 200 !important;
  font-style: italic !important;
}

.image__vectorfifty-one {
  height: 452px;
  width: 40%;
  object-fit: contain;
  position: absolute;
  right: 0px;
  bottom: 0px;
  top: 0px;
  margin-top: auto;
  margin-bottom: auto;
}

.rowvectorfiftyo {
  gap: var(--space-9xl);
  display: flex;
  align-items: start;
  @media only screen and (max-width: 1050px) {
    flex-direction: column;
  }
}

.stackvectorfift-1 {
  height: auto;
  margin-bottom: 60px;
  flex: 1;
  position: relative;
  align-content: flex-end;
  @media only screen and (max-width: 1050px) {
    align-self: stretch;
    width: 100%;
    flex: unset;
    height: auto;
    padding-left: var(--space-4xl);
    padding-right: var(--space-4xl);
  }
}

.stackvectorfift__image--vector51 {
  height: 862px;
  width: 82%;
  object-fit: contain;
  position: absolute;
  left: 0px;
  top: 15%;
  margin: auto;
}

.stackvectorfift__image--vector53 {
  height: 862px;
  width: 86%;
  object-fit: contain;
  position: absolute;
  left: 0px;
  bottom: 0px;
}

.stackvectorfift__column {
  gap: var(--space-7xl);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: end;
  position: relative;
  z-index: 1;
}

.stackvectorfift__column--one_one {
  gap: 52px;
  display: flex;
  align-self: stretch;
  flex-direction: column;
  align-items: end;
  @media only screen and (max-width: 550px) {
    gap: 26px;
  }
}

.stackvectorfift__row--one_one {
  background-color: var(--white_a700);
  display: flex;
  padding: 68px 26px;
  border-radius: var(--radius-3xl);
  @media only screen and (max-width: 1050px) {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
  }

  @media only screen and (max-width: 550px) {
    padding: var(--space-4xl);
  }
}

.stackvectorfift__image--one_one {
  height: 334px;
  width: 100%;
  object-fit: cover;
  @media only screen and (max-width: 1050px) {
    height: auto;
  }
}

.stackvectorfift__text--description-4 {
  color: var(--black_900) !important;
  font-family: Jost !important;
  text-align: justify;
  width: 62%;
  line-height: 155%;
  @media only screen and (max-width: 1050px) {
    width: 100%;
  }
}

.stackvectorfift__text--description-span {
  text-decoration: underline;
  display: inline;
}

.stackvectorfift__column--aboutfutu {
  gap: var(--space-md);
  width: 78%;
  display: flex;
  flex-direction: column;
  align-items: start;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  margin: auto;
  z-index: 2;
}

.stackvectorfift__text--aboutfutural {
  color: var(--gray_700) !important;
}

.stackvectorfift__button--challenges_from {
  color: var(--b_text) !important;
  padding-left: var(--space-3xl);
  padding-right: var(--space-3xl);
  font-size: 14px;
  font-weight: 600;
  background-color: var(--teal_50_04) !important;
  height: 38px;
  min-width: 262px;
  border-radius: 8px !important;
}

.stackvectorfift__text--about {
  color: var(--gray_700) !important;
  margin-top: 8px;
}

.column-1 {
  gap: 200px;
  align-self: end;
  display: flex;
  width: 18%;
  flex-direction: column;
  align-items: end;
  @media only screen and (max-width: 1050px) {
    align-self: auto;
    width: 100%;
    gap: 100px;
    padding-left: var(--space-4xl);
    padding-right: var(--space-4xl);
  }

  @media only screen and (max-width: 550px) {
    gap: 60px;
  }
}

.column__image--vector-52 {
  height: 862px;
  width: 72%;
  object-fit: contain;
}

.column__image--vector-54 {
  height: 862px;
  object-fit: cover;
  width: 100%;
  @media only screen and (max-width: 1050px) {
    height: auto;
  }
}

/* Responsive adjustments for smaller screens */
@media only screen and (max-width: 550px) {
  body {
    font-size: 14px;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  a {
    font-size: 14px;
  }

  ul {
    padding-left: 20px;
  }

  input, button {
    font-size: 14px;
    padding: 10px;
  }

  details > summary {
    font-size: 16px;
  }
}

/* Additional mobile-friendly adjustments */

@media (max-width: 768px) {
  /* Navigation adjustments */
  .header__top-row {
    flex-direction: column;
    align-items: center;
  }

  .header__menu {
    flex-direction: column;
    gap: 20px;
    padding: 0;
  }

  /* Ensure images resize and sections stack */
  .section__column,
  .stackvectorfift__column--introduct {
    width: 100%;
    padding: 10px;
  }

  .image__vectorfifty-one {
    width: 100%;
    height: auto;
  }

  .stackvectorfift__image--vector51,
  .stackvectorfift__image--vector53 {
    width: 100%;
    height: auto;
  }

  /* Font size adjustments for smaller screens */
  .ui.text.size-text6xl {
    font-size: 32px;
  }

  .ui.text.size-text2xl {
    font-size: 18px;
  }

  .ui.text.size-textxl {
    font-size: 16px;
  }

  /* Adjust padding and margins */
  .stackvectorfift__column--introduct {
    padding: 20px;
  }
}

/* Address text overflow and image scaling for smaller screens */
@media (max-width: 768px) {
  /* Ensure flexbox items stack properly */
  .header__menu {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .header__top-row {
    flex-direction: column;
    align-items: center;
  }

  /* Handle section and image width scaling */
  .section__row, 
  .section__column,
  .stackvectorfift__column {
    width: 100%;
    height: auto;
  }

  .stackvectorfift__image--vector51,
  .stackvectorfift__image--vector53 {
    width: 100%;
    height: auto;
  }

  /* Adjust absolute positioning for images */
  .image__vectorfifty-one,
  .stackvectorfift__image--vector51,
  .stackvectorfift__image--vector53 {
    position: relative;
    width: 100%;
    height: auto;
  }

  /* Additional adjustments for padding and margins */
  .section__column,
  .stackvectorfift__column--introduct {
    padding: 20px;
  }

  /* Ensure text doesn't overflow on narrow screens */
  .stackvectorfift__text--description {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* Fix overlapping of the button and text for smaller screens */
@media (max-width: 768px) {
  /* Ensure the button and text stack vertically */
  .stackvectorfift__row--one_one {
    flex-direction: column;
    align-items: start;
  }

  /* Ensure full-width and proper padding */
  .stackvectorfift__column--introduct {
    width: 100%;
    padding: 10px;
  }

  .stackvectorfift__column--one_one {
    flex-direction: column;
    gap: 20px;
  }

  /* Ensure the button takes full width */
  .stackvectorfift__button--challenges_from {
    width: 100%;
    margin: 0 auto;
  }

  /* Ensure images resize properly */
  .stackvectorfift__image--one_one {
    width: 100%;
    height: auto;
  }
}
/* Hide the element on screens smaller than 768px */
@media screen and (max-width: 768px) {
  .stackvectorfift__column--aboutfutu {
    display: none;
  }
}

/* Ensure equal spacing for all buttons */
.stackvectorfift__column--aboutfutu a,
.stackvectorfift__column--challenge-1 a {
  display: block;
  margin-bottom: 15px; /* Ensure all links have consistent spacing */
}

.stackvectorfift__button--challenges_from {
  padding: 10px 20px;
  margin-bottom: 0; /* No extra margin needed here */
}

.stackvectorfift__column--challenge-1 {
  margin-top: 0; /* Ensure no extra top margin for inner sections */
}