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

/*-------------------------------------
  1. Common CSS
--------------------------------------*/
.user-profile-header {
  background-color: var(--white_a700);
  width: 24%;
  display: flex;
  justify-content: center;
  padding: 106px var(--space-11xl);
  border-radius: var(--radius-3xl);
  border: 1px solid var(--teal_50_05);
  @media only screen and (max-width: 1050px) {
    width: 100%;
    padding: var(--space-4xl);
  }
}

.faq-section__title {
  color: var(--teal_700_01) !important;
  font-family: Jost !important;
}

.columnline {
  padding-left: var(--space-11xl);
  padding-right: var(--space-11xl);
  gap: var(--space-7xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  @media only screen and (max-width: 1050px) {
    padding-left: var(--space-4xl);
    padding-right: var(--space-4xl);
  }
}

/*-------------------------------------
  2. Page CSS
--------------------------------------*/
.newscreenbody {
  margin-top: 48px;
}

.stackvectorfift {
  height: 592px;
  position: relative;
  @media only screen and (max-width: 1050px) {
    height: auto;
  }
}

.image {
  height: 148px;
  margin-top: 74px;
  width: 6%;
  object-fit: contain;
}

.section__content {
  height: 592px;
  background-image: url("../images/img_group_82.e914f888065b.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  position: relative;
  align-content: center;
  border-radius: var(--radius-3xl);
  @media only screen and (max-width: 1050px) {
    height: auto;
  }
}

.section__top {
  height: 588px;
  flex: 1;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.section__top-image {
  height: 588px;
  width: 48%;
  object-fit: contain;
  position: absolute;
  right: 1px;
  bottom: 0px;
  top: 0px;
  margin-top: auto;
  margin-bottom: auto;
  border-radius: var(--radius-3xl);
}

.section__top-controls {
  display: flex;
  align-items: start;
  position: absolute;
  bottom: 35%;
  right: 0px;
  left: 0px;
  margin: auto;
}

.section__top-controls-item {
  height: 52px;
  margin-top: 12px;
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
  align-self: end;
  background-color: var(--white_a700) !important;
  width: 52px;
  border-radius: 26px !important;
}

.section__top-controls-item--settings {
  height: 52px;
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
  background-color: var(--white_a700) !important;
  width: 52px;
  border-radius: 26px !important;
}

.section__main {
  flex: 1;
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  top: 0px;
  height: max-content;
  margin: auto 90px;
  z-index: 2;
  @media only screen and (max-width: 1050px) {
    margin-left: 0px;
    margin-right: 0px;
  }
}

.section__main-column {
  display: flex;
  flex-direction: column;
}

.section__main-column-title {
  color: var(--teal_700) !important;
  font-family: Jost !important;
  line-height: 155%;
}

.section__main-column-description {
  color: var(--teal_700) !important;
  margin-top: 16px;
  font-family: Jost !important;
  text-align: justify;
  font-weight: 200 !important;
  width: 42%;
  line-height: 155%;
  font-style: italic !important;
  @media only screen and (max-width: 1050px) {
    width: 100%;
  }
}

.section__main-column-actions {
  margin-top: 76px;
  margin-left: 148px;
  margin-right: 148px;
  gap: var(--space-3xl);
  display: flex;
  align-items: center;
  @media only screen and (max-width: 1050px) {
    margin-left: 0px;
    margin-right: 0px;
  }
}

.section__main-column-actions-button {
  color: var(--blue_gray_700) !important;
  padding-left: var(--space-3xl);
  padding-right: var(--space-3xl);
  font-size: 14px;
  background-color: var(--teal_50_05) !important;
  height: 40px;
  min-width: 196px;
  border-radius: 20px !important;
}

.section__main-column-actions-button--explore {
  color: var(--gray_200_01) !important;
  padding-left: var(--space-3xl);
  padding-right: var(--space-3xl);
  font-size: 14px;
  background-color: var(--cyan_700_01) !important;
  height: 38px;
  min-width: 138px;
  border-radius: 18px !important;
}

.section__image {
  height: 140px;
  flex: 1;
  object-fit: cover;
  position: absolute;
  bottom: 0px;
  right: 0px;
  left: 0px;
  margin: auto;
  pointer-events: none;
}

.column {
  margin-top: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.columnline__separator {
  height: 1px;
  background-color: var(--teal_50_06);
  width: 96%;
  border-radius: var(--radius-xs);
}

.columnline__content {
  gap: var(--space-7xl);
  display: flex;
  width: 96%;
  flex-direction: column;
  align-items: center;
  @media only screen and (max-width: 1050px) {
    width: 100%;
  }
}

.columnline__list {
  gap: var(--space-7xl);
  display: flex;
  align-self: stretch;
  @media only screen and (max-width: 1050px) {
    flex-direction: column;
  }
}

.column_one {
  margin-top: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq-section__divider {
  height: 1px;
  margin-left: 38px;
  margin-right: 38px;
  background-color: var(--gray_200);
  align-self: stretch;
  @media only screen and (max-width: 1050px) {
    margin-left: 0px;
    margin-right: 0px;
  }
}

.faq-section__list {
  margin-left: 34px;
  gap: var(--space-4xl);
  display: flex;
  align-self: stretch;
  flex-direction: column;
  @media only screen and (max-width: 1050px) {
    margin-left: 0px;
  }
}

.case-studies-column {
  display: flex;
  background-color: var(--white_a700);
  flex: 1;
  flex-direction: column;
  padding: var(--space-8xl) var(--space-7xl);
  border-radius: var(--radius-md);
  @media only screen and (max-width: 1050px) {
    gap: var(--space-3xl);
  }

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

.faq-section__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4xl);
  position: relative;
  cursor: pointer;
  @media only screen and (max-width: 550px) {
    flex-direction: column;
  }

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    left: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 1;
    background-image: url("../images/img_plus.73422027c1ee.svg");
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: center;
  }
}

details[open] .faq-section__item::before {
  background-image: url("../images/img_television.6c573a283909.svg");
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: center;
}

.faq-section__question {
  color: var(--teal_700_01) !important;
  font-family: Jost !important;
  font-weight: 500 !important;
}

.faq-section__description-container {
  margin-right: 4px;
  margin-top: 16px;
  @media only screen and (max-width: 1050px) {
    margin-right: 0px;
  }
}

.faq-section__description {
  color: var(--blue_gray_800) !important;
  line-height: 155%;
}

/* Responsive adjustments for smaller screens */
@media only screen and (max-width: 550px) {
  .section__main-column-description {
    width: 100%;
  }

  .section__top-image {
    width: 100%;
    height: auto;
  }

  .columnline__list {
    flex-direction: column;
    gap: var(--space-4xl);
  }

  .faq-section__list {
    margin-left: 0px;
  }

  .section__top-controls-item {
    width: 40px;
    height: 40px;
  }
}