/* START HERO SECTION*/
.section-hero {
  position: relative;
  background-color: var(--color-blue-500);
}

.section-hero .central-container {
  background: linear-gradient(
      to right,
      var(--color-blue-500) 0%,
      transparent 15%,
      transparent 85%,
      var(--color-blue-500) 100%
    ),
    radial-gradient(circle at center, var(--color-blue-200) 26%, var(--color-blue-500) 100%);

  min-height: 800px;
  display: flex;
  align-items: center;
  position: relative;

  width: 1440px;
}

.section-hero .central-container .content {
  max-width: 620px;
  margin: 0 auto;
  z-index: 2;
}

.section-hero .central-container .content .title br {
  display: block;
}

.section-hero .slick-ticker {
  position: absolute;
  bottom: 6rem;
  margin: 0;
}

.section-hero .slick-ticker .slick-list {
  margin: 0;
}

.section-hero .hero-image-right {
  width: clamp(220px, 28vw, 420px);
  height: auto;
  position: absolute;
  top: 5%;
  right: 0%;
}

.section-hero .hero-image-left {
  width: clamp(200px, 25vw, 370px);
  height: auto;
  position: absolute;
  bottom: 15%;
  left: 0%;
}

@media all and (max-width: 1200px) {
  .section-hero .central-container {
    background: radial-gradient(circle at center, var(--color-blue-200) 26%, var(--color-blue-500) 100%);
  }

  .section-hero .central-container .content {
    max-width: 600px;
  }
}

@media all and (max-width: 1100px) {
  .section-hero .central-container .content {
    max-width: 480px;
    margin-bottom: 9rem;
  }
}

@media all and (max-width: 810px) {
  .section-hero .slick-ticker {
    bottom: 4.6rem;
  }

  .section-hero .hero-image-left {
    bottom: 9%;
  }

  .section-hero .hero-image-right {
    top: 2%;
  }

  .section-hero .central-container {
    min-height: 920px;
  }

  .section-hero .central-container .content {
    max-width: 480px;
    margin-bottom: 10rem;
  }
}

/* END HERO SECTION*/

/* START SUPPORT SECTION */

.section-support .cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.section-support .support-card.type-1 {
  grid-column: 1 / -1;
}

.section-support .support-card {
  background-color: var(--color-gray-50);
  border-radius: var(--radius-primary);
}

.section-support .support-card .summary {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.section-support .support-card.type-1 {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 4.6rem;
}

.section-support .support-card.type-1 .content,
.section-support .support-card.type-1 .image-wrapper {
  flex: 1;
}

.section-support .support-card.type-1 .content {
  padding: 4.6rem 0;
  max-width: 515px;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  justify-content: space-between;
  align-self: stretch;
}

.section-support .support-card.type-1 .image-wrapper {
  position: relative;
  min-width: 350px;
}

.section-support .support-card.type-1 .image-wrapper img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.section-support .support-card .tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.4rem;
  background-color: var(--color-gray-800);
  border-radius: 99rem;
}

.section-support .support-card .tag p {
  line-height: 140%;
}

.section-support .support-card .tag img {
  width: 24px;
  height: 24px;
}

.section-support .support-card.type-1:first-child .tag {
  right: 26%;
  top: 45%;
}

.section-support .support-card.type-1:last-child .tag {
  left: 18%;
  top: 59%;
}

.section-support .support-card.type-2 {
  padding: 4.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 640px;
  justify-content: space-between;
  align-items: center;
}

.section-support .support-card.type-2 .details {
  max-width: 470px;
  margin: 0 auto;
}

.section-support .support-card.type-2 img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-width: 228px;
}

@media all and (max-width: 1023px) {
  .section-support .support-card.type-1 {
    gap: 0;
  }
}

@media all and (max-width: 810px) {
  .section-support .cards {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .section-support .support-card.type-1 {
    grid-column: auto;
    flex-direction: column;
    padding: 0 2.4rem;
    gap: 2rem;
  }

  .section-support .support-card.type-1 .content {
    padding: 0;
    padding-top: 2.4rem;
    max-width: 999px;
    gap: 1.8rem;
  }

  .section-support .support-card.type-1 .image-wrapper {
    max-width: 450px;
    min-width: 0;
  }

  .section-support .support-card.type-1:last-child .content {
    padding: 0;
    padding-bottom: 2.4rem;
  }

  .section-support .support-card .summary {
    gap: 1.2rem;
  }

  .section-support .support-card.type-2 {
    padding: 2.4rem;
  }

  .section-support .support-card .tag {
    padding: 0.6rem 1rem;
  }

  .section-support .support-card .tag P {
    line-height: 150%;
  }
}

/* END SUPPORT SECTION */

/* START REX MD SECTION */

.section-rex-md {
  background: linear-gradient(to bottom, var(--color-blue-900) 0%, #313252 100%);
}

.section-rex-md .central-container {
  display: flex;
  gap: 11.2rem;
  align-items: center;
}

.section-rex-md .content,
.section-rex-md .image-wrapper {
  flex: 1;
}

.section-rex-md .content {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  max-width: 515px;
}

.section-rex-md .content .text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.section-rex-md .image-wrapper {
  position: relative;
}

.section-rex-md .image-wrapper > img {
  width: 100%;
  height: auto;
  object-fit: contain;
  min-width: 420px;
}

.section-rex-md .messages {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: fit-content;
  position: absolute;
  top: 21%;
  right: 6%;
}

.section-rex-md .messages .message {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.section-rex-md .messages .message > img {
  width: 37px;
  height: 37px;
  border-radius: 99rem;
}

.section-rex-md .messages .message .content {
  border-radius: 11px;
  padding: 14.5px;
  display: flex;
  flex-direction: column;
  gap: 5.5px;
  backdrop-filter: blur(10px);
}

.section-rex-md .messages .message .content p {
  font-size: 14.5px;
  line-height: 130%;
  font-weight: 500;
}

.section-rex-md .messages .message .content .read {
  display: flex;
  gap: 3.6px;
  align-items: center;
}

.section-rex-md .messages .message .content .read p {
  font-size: 10px;
  line-height: 150%;
  font-weight: 600;
}

.section-rex-md .messages .message .content .read img {
  width: 11px;
  height: 11px;
}

.section-rex-md .messages .message-1 {
  margin-left: 146px;
}

.section-rex-md .messages .message-1 .content {
  background-color: var(--color-white);
  max-width: 212px;
}

.section-rex-md .messages .message-2 .content {
  background-color: color-mix(in srgb, var(--color-black) 24%, transparent);
  max-width: 178px;
}

@media all and (max-width: 1200px) {
  .section-rex-md .central-container {
    gap: 2.4rem;
  }
}

@media all and (max-width: 810px) {
  .section-rex-md .central-container {
    flex-direction: column;
    gap: 3.2rem;
  }

  .section-rex-md .content {
    max-width: none;
  }

  .section-rex-md .image-wrapper > img {
    min-width: 0;
    max-width: 500px;
  }

  .section-rex-md .messages {
    gap: 8px;
    top: 29%;
    right: 12%;
  }

  .section-rex-md .messages .message {
    gap: 6px;
  }

  .section-rex-md .messages .message > img {
    width: 30px;
    height: 30px;
  }

  .section-rex-md .messages .message .content {
    border-radius: 9px;
    padding: 8px;
    gap: 3px;
  }

  .section-rex-md .messages .message .content p {
    font-size: 10px;
  }

  .section-rex-md .messages .message .content .read {
    gap: 3px;
  }

  .section-rex-md .messages .message .content .read p {
    font-size: 7px;
  }

  .section-rex-md .messages .message .content .read img {
    width: 8px;
    height: 8px;
  }

  .section-rex-md .messages .message-1 {
    margin-left: 97px;
  }

  .section-rex-md .messages .message-1 .content {
    max-width: 144px;
  }

  .section-rex-md .messages .message-2 .content {
    background-color: color-mix(in srgb, var(--color-black) 24%, transparent);
    max-width: 116px;
  }
}
@media all and (max-width: 520px) {
  .section-rex-md .messages {
    top: 16%;
    right: 0%;
  }
}

/* END REX MD SECTION */


/* START HOW WORK SECTION */
.section-how-works .central-container {
    position: sticky;
    top: -21.4rem;
}

/* END  HOW WORK SECTION */