/*=========== TABLE OF CONTENTS ===========1. Selectbox CSS2. Input CSS3. Button CSS4. Textarea CSS5. Text CSS6. Heading CSS7. Container CSS==========================================*/
/*-------------------------------------  1. Selectbox CSS--------------------------------------*/
.ui.selectbox.round {
  border-radius: var(--radius-xl);
}

.ui.selectbox.size-xs {
  height: 3rem;
  padding-left: var(--space-3xl);
  padding-right: var(--space-lg);
  font-size: 1rem;
}

.ui.selectbox.outline.gray_700_04 {
  color: var(--gray_900);
  border: 1px solid var(--gray_700_04);
}

.ui.selectbox {
  display: flex;
}

/*-------------------------------------  2. Input CSS--------------------------------------*/
.ui.input.round {
  border-radius: var(--radius-xl);
}

.ui.input.size-xs {
  height: 3.4rem;
  padding-left: var(--space-3xl);
  padding-right: var(--space-3xl);
  font-size: 1.2rem;
}

.ui.input.outline.gray_700_04 {
  color: #000000;
  border: 1px solid var(--gray_700_04);
}

.ui.input {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: text;
  color: var(--gray_500);
  font-family: Segoe UI;
  font-size: 1rem;
  align-self: stretch;
  border-radius: var(--radius-xl);
  border: 1px solid var(--gray_700_04);
}

/*-------------------------------------  3. Button CSS--------------------------------------*/
.ui.button.round {
  border-radius: var(--radius-3xl);
}

.ui.button.size-sm {
  height: 2.38rem;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.ui.button.size-2xl {
  height: 4.5rem;
  padding-left: var(--space-9xl);
  padding-right: var(--space-9xl);
  font-size: 1.6rem;

  @media (min-width: 1650px) {
    height: 6rem;
    padding-left: var(--space-9xl);
    padding-right: var(--space-9xl);
    font-size: 2rem;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.4rem;
    height: 4.8rem;
  }
}

.ui.button.size-mdhm {
  height: 3rem;
  padding-left: var(--space-7xl);
  padding-right: var(--space-3xl);
  padding-top: 0rem;
  font-size: 1.2rem;

  @media (min-width: 1650px) {
    height: 4rem;
    padding-left: var(--space-7xl);
    padding-right: var(--space-3xl);
    padding-top: 0rem;
    font-size: 1.5rem;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    margin-top: 4rem;
    margin-bottom: 4rem;
    font-size: 1.25rem;
    height: 3.8rem;
    font-weight: 350;
  }
}

.ui.button.size-md {
  height: 4.2rem;
  padding-left: var(--space-7xl);
  padding-right: var(--space-3xl);
  padding-top: 0rem;
  font-size: 1.5rem;
  font-weight: 400;

  @media (max-width: 960px) and (min-width: 1px) {
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 1.5rem;
  }
}

.ui.button.size-mdc {
  height: 3.5rem;
  padding-left: var(--space-7xl);
  padding-right: var(--space-3xl);
  padding-top: 0rem;
  font-size: 1.5rem;
  font-weight: 400;

  height: 4rem;
  padding-left: var(--space-7xl);
  padding-right: var(--space-3xl);
  padding-top: 0rem;
  font-size: 1.5rem;
  font-weight: 400;

  @media (max-width: 960px) and (min-width: 1px) {
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 1.5rem;
    padding-top: 0rem;
  }
}

.ui.button.size-xlh {
  height: 4.5rem;
  padding-left: var(--space-7xl);
  padding-right: var(--space-3xl);
  font-size: 1.5rem;

  @media (min-width: 1650px) {
    height: 4.25rem;
    padding-left: var(--space-7xl);
    padding-right: var(--space-3xl);
    font-size: 1.7rem;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    height: 4.2rem;
    font-size: 1.45rem;
    padding-top: 0rem;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 6rem;
  }
}

.ui.button.size-xl {
  height: 4.5rem;
  padding-left: var(--space-7xl);
  padding-right: var(--space-3xl);
  font-size: 1.5rem;

  @media (min-width: 1650px) {
    height: 5rem;
    padding-left: var(--space-7xl);
    padding-right: var(--space-3xl);
    font-size: 1.7rem;
  }

  @media (max-width: 1370px) and (min-width: 1080px){
    font-size: 1.2rem;
    height: 4rem;
  }
  @media (max-width: 349px) and (min-width: 20px){
  .ui.heading.size-heading15xlc {
    font-size: 1.60rem;
    font-weight: 700;
    line-height: 2rem;
}
    .col-right {
        width: 100%;
        padding: 3rem 1rem 1rem 1rem;
    }
}

  @media (max-width: 960px) and (min-width: 1px) {
    height: 4rem;
    font-size: 1.3rem;
    font-weight: 700;
    padding-top: 0rem;
    width: 82%;
    margin-top: 3rem;
    margin-bottom: 4rem;
  }
}

.ui.button.size-xl2 {
  height: 4.5rem;
  padding-left: var(--space-7xl);
  padding-right: var(--space-3xl);
  font-size: 1.4rem;

  @media (min-width: 1650px) {
    height: 5.3rem;
    padding-left: var(--space-7xl);
    padding-right: var(--space-3xl);
    font-size: 1.9rem;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    height: 4.1rem;
    font-size: 1.4rem;
    padding-top: 0rem;
    width: 85%;
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
}

.ui.button.size-xs {
  height: 2.13rem;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.ui.button.size-lg {
  height: 95%;
  width: 16%;

  @media (max-width: 1370px) and (min-width: 1080px){ 
    height: 75%;
  width: 16%;
  }
}


.ui.button.fill.white_a700_01 {
  background-color: var(--white_a700_01);
  box-shadow: var(--shadow-xs);
  color: var(--blue_gray_800);
}

.ui.button.fill.deep_purple_500_01 {
  background-color: var(--deep_purple_500_01);
  box-shadow: var(--shadow-xs);
  color: var(--white_a700_01);
}

.ui.button.fill.green_a700_02 {
  background-color: var(--green_a700_02);
}

.ui.button.fill.cyan_200 {
  background-color: var(--cyan_200);
}

.ui.button.fill.light_green_300 {
  background-color: var(--light_green_300);
}

.ui.button.fill.yellow_400 {
  background-color: var(--yellow_400);
}

.ui.button.fill.deep_orange_200_05 {
  background-color: var(--deep_orange_200_05);
}

.ui.button.outline.blue_gray_800_deep_purple_300 {
  background: linear-gradient(90deg, #3d375e, #7e6ddd);
  box-shadow: var(--shadow-sm);
  color: var(--white_a700_01);
  border: 1px solid var(--blue_gray_100_02);
}

.ui.button.fill.green_a400 {
  background-color: var(--green_a400);
}

.ui.button {
  text-align: center;
  display: flex;
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/*-------------------------------------  4. Textarea CSS--------------------------------------*/
.ui.textarea.round {
  border-radius: var(--radius-xl);
}

.ui.textarea.size-xs {
  height: 5.75rem;
  font-size: 1.2rem;
  padding: var(--space-2xl);
}

.ui.textarea.taroutlinegray70004.gray_700_04 {
  border: 1px solid var(--gray_700_04) !important;
}

/*-------------------------------------  5. Text CSS--------------------------------------*/
.ui.text.size-textxs {
  font-size: 0.44rem;
  font-weight: 400;
}

.ui.text.size-texts {
  font-size: 0.5rem;
  font-weight: 400;
}

.ui.text.size-textlg {
  font-size: 0.75rem;
  font-weight: 400;
}

.ui.text.size-textxl {
  font-size: 0.9rem;
  font-weight: 400;
  color: #3b3b3b !important;

  @media (min-width: 1650px) {
    font-size: 0.8rem;
    font-weight: 400;
    color: #3b3b3b !important;
  }
}

.ui.text.size-text2xl {
  font-size: 0.88rem;
  font-weight: 400;
  color: #cccccc !important;

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 0.8rem;
  }
}

.ui.text.size-text2xlhm {
  font-size: 0.88rem;
  font-weight: 400;

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 0.7rem;
  }
}

.ui.text.size-text3xl {
  font-size: 0.94rem;
  font-weight: 400;

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 0.8rem;
  }
}

.ui.text.size-text4xl {
  font-size: 1.2rem;
  font-weight: 350;

  @media (min-width: 1650px) {
    font-size: 1.6rem;
    font-weight: 400;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    text-align: center;
    font-size: 1.2rem;
  }
}

.ui.text.size-text5xl {
  font-size: 1.2rem;
  font-weight: 340;
  line-height: 1.5rem;
  font-family: Segoe UI;

  @media (min-width: 1650px) {
    font-size: 1.35rem;
    font-weight: 340;
    line-height: 2rem;
    font-family: Segoe UI;
  }

  @media (max-width: 1370px) and (min-width: 1080px){ 
  font-size: 1.12rem;
  font-weight: 340;
  line-height: 1.5rem;
  font-family: Segoe UI;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.2rem;
    font-weight: 340;
  }
}

.ui.text.size-text6xl {
  font-size: 1.2rem;
  font-weight: 350;
  line-height: 1.5rem;
  font-family: Segoe UI;

  @media (min-width: 1650px) {
    font-size: 1.5rem;
    font-weight: 340;
    line-height: 1.7rem;
    font-family: Segoe UI;
  }

  @media (max-width: 1370px) and (min-width: 1080px){
    font-size: 1.1rem;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.2rem;
    font-weight: 340;
    line-height: 1.5rem;
  }
}

.ui.text.size-text6xlag {
  font-size: 1.2rem;
  font-weight: 350;
  line-height: 1.5rem;
  font-family: Segoe UI;

  @media (min-width: 1650px) {
    font-size: 1.5rem;
    font-weight: 340;
    line-height: 1.7rem;
    font-family: Segoe UI;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.2rem;
    font-weight: 340;
    line-height: 1.5rem;
  }
}

.ui.text.size-text6xlf {
  font-size: 1.1rem;
  font-weight: 350;
  line-height: 1.5rem;
  font-family: Segoe UI;

  @media (min-width: 1650px) {
    font-size: 1.5rem;
    font-weight: 340;
    line-height: 1.7rem;
    font-family: Segoe UI;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.3rem;
    font-weight: 340;
    line-height: 1.6rem;
  }
}

.ui.text.size-text7xl {
  font-size: 1.5rem;
  font-weight: 400;

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1rem;
    font-weight: 350;
    text-align: end;
  }
}

.ui.text.size-text7xlc {
  font-size: 1.4rem;
  font-weight: 300;

  @media (min-width: 1650px) {
    font-size: 1.5rem;
    font-weight: 400;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.25rem;
    font-weight: 350;
    text-align: end;
  }
}

.ui.text.size-text7xlwork {
  font-size: 1.5rem;
  font-weight: 300;

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1rem;
    font-weight: 400;
    text-align: start;
  }
}

.ui.text.size-text7xlworkc {
  font-size: 1.5rem;
  font-weight: 400;

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
  }
}

.ui.text.size-text7xlworkc2 {
  font-size: 1.2rem;
  font-weight: 340;
  line-height: 1.5rem;

  @media (min-width: 1650px) {
    font-size: 1.8rem;
    font-weight: 340;
    line-height: 2rem;
  }

    @media (max-width: 1370px) and (min-width: 1080px){
      font-size: 1.12rem;
    }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.25rem;
    font-weight: 350;
    text-align: center;
    line-height: 1.7rem;
  }
}

.ui.text.size-text8xl {
  font-size: 1.3rem;
  font-weight: 340;

  @media (min-width: 1650px) {
    font-size: 1.7rem;
    font-weight: 340;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.35rem;
    font-weight: 340;
  }
}

.ui.text.size-text9xl {
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2rem;

  @media (min-width: 1650px) {
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 2.2rem;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.35rem;
    line-height: 2.2rem;
    font-weight: 300;
  }
}

@media (max-width: 1370px) and (min-width: 1080px){
  .ui.text.size-text9xl{
        font-size: 1.25rem;
        margin-block: 1rem;
        line-height: 1.5rem;  
}
}

.ui.text.size-text9xla {
  font-size: 1.4rem;
  font-weight: 350;
  line-height: 2rem;

  @media (min-width: 1650px) {
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 2rem;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.35rem;
    line-height: 1.8rem;
    font-weight: 350;
  }
}

.ui.text.size-text10xl {
  font-size: 1.44rem;
  font-weight: 400;

  @media (min-width: 1650px) {
    font-size: 1.44rem;
    font-weight: 400;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.4rem !important;
  }
}

.ui.text.size-text11xl {
  font-size: 1.6rem;
  font-weight: 400;

  @media (min-width: 1650px) {
    font-size: 2rem;
    font-weight: 400;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.5rem;
  }

  @media only screen and (max-width: 550px) {
    font-size: 1.38rem;
  }
}

.ui.text.size-text11xla {
  font-size: 1.6rem;
  font-weight: 300;

  @media (min-width: 1650px) {
    font-size: 1.45rem;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.3rem;
  }
}

.ui.text.size-text12xl {
  font-size: 1.69rem;
  font-weight: 400;

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.56rem;
  }

  @media only screen and (max-width: 550px) {
    font-size: 1.44rem;
  }
}

.ui.text.size-text20xl {
  font-size: 1.25rem;
  font-weight: 400;
  margin-left: -18%;
}

.ui.text {
  color: var(--white_a700_01);
  font-family: Segoe UI;
}

/*-------------------------------------  6. Heading CSS--------------------------------------*/
.ui.heading.size-textmd {
  font-size: 0.69rem;
  font-weight: 500;
}

.ui.heading.size-text13xl {
  font-size: 3.5rem;
  font-weight: 500;

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.9rem;
  }
}

.ui.heading.size-headingxs {
  font-size: 0.5rem;
  font-weight: 600;
}

.ui.heading.size-headings {
  font-size: 0.56rem;
  font-weight: 600;
}

.ui.heading.size-headingmd {
  font-size: 0.63rem;
  font-weight: 700;
}

.ui.heading.size-headinglg {
  font-size: 0.69rem;
  font-weight: 700;
}

.ui.heading.size-headingxl {
  font-size: 1.1rem;
  font-weight: 700;
}

.ui.heading.size-heading2xl {
  font-size: 1rem;
  font-weight: 700;
}

.ui.heading.size-heading3xl {
  font-size: 1.13rem;
  font-weight: 700;
}

.ui.heading.size-heading4xl {
  font-size: 1.19rem;
  font-weight: 600;

  @media (min-width: 1650px) {
    font-size: 1.19rem;
    font-weight: 600;
  }
}

.ui.heading.size-heading5xl {
  font-size: 1.3rem;
  font-weight: 600;

  @media (min-width: 1650px) {
    font-size: 1.5rem;
    font-weight: 600;
  }

  @media (max-width: 1370px) and (min-width: 1080px){ 
    font-size: 1.15rem;
  font-weight: 600;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.42rem;
    font-weight: 700;
    letter-spacing: -1px;
  }
}

.ui.heading.size-heading5xlag {
  font-size: 1.3rem;
  font-weight: 600;

  @media (min-width: 1650px) {
    font-size: 1.6rem;
    font-weight: 600;
  }
  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -1px;
  }
}

.ui.heading.size-heading5xlnav {
  font-size: 1.3rem;
  font-weight: 600;

  @media (min-width: 1650px) {
    font-size: 1.6rem;
    font-weight: 600;
  }
  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -1px;
  }
}

.ui.heading.size-heading6xl {
  font-size: 1.3rem;
  font-weight: 700 !important;

  @media (min-width: 1650px) {
    font-size: 1.8rem;
    font-weight: 700 !important;
  }

  @media (max-width: 1370px) and (min-width: 1080px){
    font-size: 1.2rem;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.3rem;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
  }
}

.ui.heading.size-heading7xlhm {
  font-size: 1.5rem;
  font-weight: 700;

  @media (min-width: 1650px) {
    font-size: 1.55rem;
    font-weight: 700;
  }

  @media (max-width: 1370px) and (min-width: 1080px){ 
    font-size: 1.2rem;
  font-weight: 700;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.55rem;
  }
}

.ui.heading.size-heading7xl {
  font-size: 1.6rem;
  font-weight: 700;

  @media (min-width: 1650px) {
    font-size: 1.8rem;
    font-weight: 700;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.6rem;
  }
}

.ui.heading.size-heading7xla {
  font-size: 1.5rem;
  font-weight: 700 !important;

  @media (min-width: 1650px) {
    font-size: 1.8rem;
    font-weight: 700 !important;
  }

    @media (max-width: 1370px) and (min-width: 1080px){
      font-size: 1.3rem;
    }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.6rem;
    font-weight: 700 !important;
  }
}

.ui.heading.size-heading7xln {
  font-size: 1.4rem;
  font-weight: 700;

  @media (min-width: 1650px) {
    font-size: 1.8rem;
    font-weight: 700;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.6rem;
    font-weight: bold !important;
    padding: 0.4rem 0rem 0.4rem 0rem !important;
  }
}

.ui.headinghm.size-heading8xl {
  font-size: 1.6rem;
  font-weight: 400;

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.4rem;
  }
}
.ui.heading.size-heading8xl {
  font-size: 1.5rem;
  font-weight: 600;

  @media (min-width: 1650px) {
    font-size: 2rem;
    font-weight: 600;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.38rem;
  }
}

.ui.headingn.size-heading8xl {
  font-size: 1.4rem;
  font-weight: 600;

  @media (min-width: 1650px) {
    font-size: 2rem;
    font-weight: 600;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.38rem;
  }
}

.ui.heading.size-heading9xl {
  font-size: 1.56rem;
  font-weight: 700;

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 1.6rem;
  }

  @media (max-width: 390px) {
    font-size: 1.31rem;
  }
}

.ui.heading.size-heading10xl {
  font-size: 2.3rem !important;
  font-weight: 700;

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 2.3rem !important;
    font-weight: bold !important;
  }

  @media (max-width: 390px) {
    font-size: 1.63rem !important;
  }
}

.ui.heading.size-heading11xl {
  font-size: 2.19rem;
  font-weight: 700;

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 2.06rem;
  }

  @media only screen and (max-width: 550px) {
    font-size: 1.94rem;
  }
}

.ui.heading.size-heading12xl {
  font-size: 2.81rem;
  font-weight: 700;

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 2.56rem;
  }

  @media only screen and (max-width: 550px) {
    font-size: 2.19rem;
  }
}

.ui.heading.size-heading13xl {
  font-size: 3.13rem;
  font-weight: 700;
  margin-bottom: 10px;

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 2.88rem;
  }

  @media only screen and (max-width: 550px) {
    font-size: 2.5rem;
  }
}

.ui.heading.size-heading14xl {
  font-size: 3rem;
  font-weight: 700;

  @media (min-width: 1650px) {
    font-size: 4rem;
    font-weight: 700;
  }

  @media (max-width: 1370px) and (min-width: 1080px){ 
  font-size: 2.6rem;
  font-weight: 700;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 2.4rem;
    line-height: 2.8rem;
  }
}

.ui.heading.size-heading14xldes {
  font-size: 3rem;
  font-weight: 700;
  margin-left: -0rem;

  @media (min-width: 1650px) {
    font-size: 4rem;
    font-weight: 700;
    margin-left: -0rem;
  }

  @media (max-width: 1370px) and (min-width: 1080px){ 
    font-size: 2.6rem;
  font-weight: 700;
  margin-left: -0rem;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 2.2rem;
    margin-left: 0rem;
  }
}

.ui.heading.size-heading15xl {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 4rem;

  @media (min-width: 1650px) {
    font-size: 5rem;
    font-weight: 700;
    line-height: 5rem;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 2.1rem;
    line-height: 2.5rem;
  }
}

.ui.heading.size-heading15xla {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 4rem;

  @media (min-width: 1650px) {
    font-size: 5rem;
    font-weight: 700;
    line-height: 5rem;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 2.2rem;
    line-height: 2.5rem;
  }
}

.ui.heading.size-heading15xlc {
  font-size: 4rem;
  font-weight: 700;
  line-height: 4rem;

  @media (min-width: 1650px) {
    font-size: 5rem;
    font-weight: 700;
    line-height: 5rem;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 2.1rem;
    line-height: 2.5rem;
  }
}

.ui.heading.size-heading16xl {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 3.6rem;

  @media (min-width: 1650px) {
    font-size: 5rem;
    font-weight: 700;
    line-height: 5rem;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 2.2rem;
    line-height: 2.4rem;
  }
}

.ui.heading.size-heading30xl {
  font-size: 3.9rem;
  font-weight: 700;

  @media (min-width: 1650px) {
    font-size: 4.6rem;
    line-height: 5.2rem;
  }

  @media (max-width: 1370px) and (min-width: 1080px){
    font-size: 3rem;
  font-weight: 700;
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 2.1rem;
    line-height: 2.7rem;
  }
}

.ui.heading.size-heading21xl {
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1 !important;

  @media (min-width: 1650px) {
    font-size: 5.4rem;
    line-height: 1 !important;
  }

  @media (max-width: 1370px) and (min-width: 1080px){ 
    font-size: 3.6rem;
  }

  span {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
    vertical-align: top; /* opcional, para que queden bien alineados */
  }

  @media (max-width: 960px) and (min-width: 1px) {
    font-size: 2.2rem;
    line-height: 2.8rem !important;
    margin-bottom: 7rem;
  }
}

.ui.heading {
  color: var(--gray_900);
  font-family: Segoe UI;
}

/*-------------------------------------  7. Container CSS--------------------------------------*/
.container-xs {
  width: 100%;
  max-width: 95%; /* Ancho máximo para pantallas grandes */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* Espacio interno a los laterales */
  padding-right: 1rem;
}

/* Ajuste para dispositivos con pantallas anchas: si el viewport supera el ancho máximo,
   se puede quitar o reducir el padding si se desea un efecto de "caja" más preciso */
@media (min-width: 84.5rem) {
  .container-xs {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Ajuste para pantallas pequeñas: se aumenta el padding o se asegura una separación
   mínima para evitar que el contenido quede pegado a los bordes */
@media (max-width: 960px) and (min-width: 1px) {
  .container-xs {
    padding: 0 var(--space-md);
    max-width: 96%;
  }
}