/** 1280px - 1920px 屏幕适配 **/
@media screen and (min-width: 1531px) and (max-width: 1920px) {
  .cards-container {
    padding-left: 5%;
    padding-right: 5%;
  }

  .cards-item {
    width: 32%;
    height: auto;
    min-height: 498px;
    padding-bottom: 20px;
  }

  .cards-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/** 新官网 1530px 小屏适配 **/
@media screen and (max-width: 1530px) {
  header {
    padding: 0 var(--pad-padding-x);
  }
  .title-container {
    text-align: center;
    flex-direction: column;
    margin-bottom: var(--pad-gap);
    padding: 0 var(--pad-padding-x);
  }
  .title-container .title {
    margin-bottom: var(--pad-gap);
  }
  .waterfall-container {
    margin-bottom: 100px;
  }
  .cards-container .cards {
    flex-direction: column;
  }
  .cards-item {
    margin-bottom: 57px;
  }
  .cards-item:last-child {
    margin-bottom: 0;
  }
}

/** 新官网 移动端适配 **/
@media screen and (max-width: 768px) {
  header {
    height: 56px;
    padding: 0 var(--mobile-padding-x);
    margin-bottom: var(--mobile-gap);
  }
  header img {
    width: 120px;
    height: 18px;
  }
  .header-btn {
    /* width: 122px; */
    height: 36px;
    font-size: 14px;
  }
  .desktop-logo{
    height: 18px;
  }
  .title-container {
    margin-bottom: var(--mobile-gap);
    padding: 0 var(--mobile-padding-x);
  }
  .title-container .title {
    margin-bottom: var(--mobile-gap);
  }
  .title-container .title-main {
    font-size: var(--mobile-title-main);
  }
  .title-container .title-sub {
    font-size: var(--mobile-title-sub);
  }
  .title-container .btns {
    width: 100%;
  }
  .title-container .btns .localized-btn {
    font-size: 16px;
    width: 100%;
    height: 52px;
  }
  .download-btns img {
    height: 42px;
  }
  .waterfall-container {
    margin-bottom: var(--mobile-gap);
  }
  .waterfall-container img {
    height: 320px;
    margin-right: 11px;
  }
  .carousel-container {
    padding: 36px 0;
  }
  .carousel-container .title {
    margin-bottom: var(--mobile-gap);
  }
  .carousel-container .title .title-main {
    font-size: var(--mobile-title-main);
  }
  .carousel-container .title .title-sub {
    font-size: var(--mobile-title-sub);
  }
  .carousel-container .content {
    height: 500px;
  }
  .carousel-dots {
    gap: 8px !important;
  }
  .carousel-dot {
    width: 8px !important;
    height: 8px !important;
  }
  .carousel-dot.active {
    width: 12px !important;
    height: 8px !important;
  }
  .carousel-item {
    width: 220px;
    height: 385px;
  }
  .carousel-item .item-title {
    width: 100%;
    height: 170px;
    font-size: 26px;
  }
  .carousel-item .item-title span {
    bottom: 22px;
  }
  .carousel-controls {
    bottom: 0;
  }

  .carousel-btns {
    gap: 60px;
  }
  .carousel-btn {
    width: 48px;
    height: 48px;
  }

  .cards-container .title .title-main {
    font-size: var(--mobile-title-main);
  }
  .cards-container .title .title-sub {
    font-size: var(--mobile-title-sub);
  }

  .cards-container .title {
    margin-bottom: calc(var(--mobile-gap) + var(--mobile-padding-x));
  }

  .cards-container {
    padding: var(--mobile-gap) var(--mobile-padding-x);
  }
  .cards-item {
    width: 343px;
    height: 408px;
    margin-bottom: calc(var(--mobile-gap) + var(--mobile-padding-x));
  }
  .cards-item .detail {
    padding: 0 var(--mobile-padding-x);
  }
  .cards-item .detail .detail-title {
    font-size: 18px;
  }
  .cards-item .detail .detail-desc {
    font-size: 16px;
  }
  .cards-item img {
    top: -16px;
    width: 343px;
    height: 204px;
  }
  .join-container {
    padding: var(--mobile-gap) 0;
  }
  .join-container .title {
    margin-bottom: 60px;
  }
  .join-container .title .title-main {
    font-size: var(--mobile-title-main);
  }
  .join-container .title .title-sub {
    font-size: var(--mobile-title-sub);
  }
  .footer {
    padding: 48px 20px 60px var(--mobile-padding-x);
  }
  .footer img {
    width: 123px;
    height: 18px;
  }
  .footer .menu {
    margin-bottom: 48px;
    font-size: 16px;
  }

  /* Sticky Button Styles for Mobile */
  .sticky-btn {
    top: auto; /* Reset top */
    bottom: 42px;
    width: calc(
      100% - 2 * var(--mobile-padding-x)
    ); /* 16px padding on each side */
    height: 52px;
    font-size: 16px;
    border-radius: 26px; /* Half of height */
  }

  /* Join Us / Testimonials Mobile Styles */
  .join-container .content {
    height: 321px;
    width: 100%;
    padding: 0;
  }

  .join-item {
    width: 318px;
    height: auto;
  }

  .join-item .avatar {
    width: 120px;
    height: 120px;
    bottom: 53px;
    left: 0px;
    z-index: 5;
  }

  .join-item .comment-info {
    padding: 12px 16px 16px 86px;
    width: 274px;
    height: 153px;
    border-radius: 14px;
    margin-left: 44px;
  }

  .join-item .comment-info .marks {
    width: 24px;
    height: 17px;
    top: 12px;
    right: 11px;
  }

  .join-item .comment-item-name {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .join-item .comment-item-text {
    font-size: 12px;
  }

  /* Carousel Item Positions Override for Mobile */
  .join-item.pos-center {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    z-index: 10;
  }

  .join-item.pos-right-1 {
    transform: translateX(calc(-50% + 360px)) scale(0.9);
    opacity: 0.5;
    z-index: 9;
  }

  .join-item.pos-left-1 {
    transform: translateX(calc(-50% - 360px)) scale(0.9);
    opacity: 0.5;
    z-index: 9;
  }

  .join-item.pos-right-2 {
    transform: translateX(calc(-50% + 720px)) scale(0.8);
    opacity: 0;
    visibility: hidden;
  }

  .join-item.pos-left-2 {
    transform: translateX(calc(-50% - 720px)) scale(0.8);
    opacity: 0;
    visibility: hidden;
  }

  .join-container .carousel-controls {
    bottom: 48px;
  }

  .join-container .carousel-btns {
    gap: 60px;
  }

  .join-container .carousel-btn {
    width: 48px;
    height: 48px;
  }
  .sticky-btn-inner {
    height: 52px !important;
    font-size: 16px !important;
  }
}