/**
 * 首頁樣式 (index.php)
 *
 * 此檔案包含首頁的所有特定樣式
 * 引入順序：依賴於 component.css
 *
 * 內容：
 * - 網站架設流程區塊樣式
 * - 特色卡片樣式
 * - 特色描述文字
 * - CTA 按鈕區域
 *
 * @package 起吉科技
 */

/* 首頁首圖 */
.hero-image {
  width: 100%;
}

/* ===== 關於我們區塊 ===== */
.home-about-section {
  padding: 92px 0 104px;
  position: relative;
}

.mobile-btn__about {
  display: none;
}

.frame {
  display: flex;
  flex-direction: column;
  width: 876px;
  align-items: flex-start;
  gap: 28px;
  position: relative;
}

.frame .text-wrapper {
  margin-top: -1px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #0b2341;
  font-size: 28px;
  text-align: center;
  position: relative;
  align-self: stretch;
  letter-spacing: 0;
  line-height: 48px;
}

.frame .div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 20px;
  position: relative;
  align-self: stretch;
  letter-spacing: 0;
  line-height: 48px;
}

/* why choose caioli */

.about-deco1 {
  position: absolute;
  left: 0;
  top: 166.6px;
}

.about-deco2 {
  position: absolute;
  right: 41.67px;
  top: -117.56px;
}

.about-content {
  display: flex;
  flex-direction: row;
  margin: 44px auto 0;
  gap: 34px;
  width: 100%;
  max-width: 1362px;
}

/* 左側區塊 */
.about-left {
  display: flex;
  flex-direction: column;
  max-width: 532px;
  width: 100%;
  gap: 32px;
  padding-top: 110px;
}

.about-description {
  line-height: 48px;
}

/* 右側區塊 */
.about-right {
  display: flex;
  flex-direction: row;
  gap: 40px;
  width: 100%;
}

.about-compare-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: 16px;
  z-index: 1;
}

.about-compare-item--primary {
}

.about-compare-item--secondary {
}

.about-compare-title {
  width: 100%;
  max-width: 378px;
  height: 60px;
  text-align: center;
  align-content: center;
}

.about-compare-title--primary {
  background: #ffdc37;
}

.about-compare-title--secondary {
  background: #dadada;
}

.about-compare-text {
  line-height: 48px;
  width: 100%;
  text-align: center;
}

.hr-line {
  width: 100%;
  border: none;
  border-top: 1px solid #000;
  margin: 0;
}

/* 監視器區塊 */
.home-monitor-section {
  position: relative;
  padding: 148px 0 55px;
  background-image: url("../../images/home_monitor_section_bg.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.momitor-right-dec {
  position: absolute;
  right: 0;
  top: -103px;
  z-index: 1;
}

.home-section-des {
  max-width: 700px;
  line-height: 48px;
  margin-top: 44px;
}

.comparison-items {
  display: flex;
  justify-content: space-between;
  gap: 62px;
  width: 100%;
  max-width: 916px;
  margin: 36px auto;
}

.comparison-item {
  max-width: 427px;
  width: 100%;
  height: 448px;
  background-color: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 0 4px 10.1px 0 rgba(0, 0, 0, 0.25);
  align-items: center;
  padding: 28px 22px 28px;
  gap: 20px;
}

.comparison-item-title {
  max-width: 378px;
  width: 100%;
  height: 60px;
  border-radius: 20px;
  font-size: 20px;
  line-height: 48px;
  align-content: center;
}

.yellow-shadow {
  border: 1px solid var(--0001, #ffdc37);
}

.gray-shadow {
  border: 1px solid #bebebe;
}

.yellow-title {
  background-color: #ffdc37;
}

.gray-title {
  background: #bebebe;
}

.monitor-hr-line {
  max-width: 320px;
  width: 100%;
  border: none;
  border-top: 1px solid #000;
  margin: 0;
}

/* wifi安裝 */
.home-wifi-setup-section {
  position: relative;
  padding: 135px 0 90px;
}

.wifi-setup-lefr-dec {
  position: absolute;
  top: -44px;
  left: 0;
  z-index: -1;
}

.wifi-item-wrapper {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
}

.wifi-setup-items {
  display: flex;
  gap: 42px;
  width: 100%;
  max-width: 878px;
  margin: 36px auto;
  position: relative;
  justify-content: space-between;
}

.wifi-setup-item {
  width: 100%;
  max-width: 418px;
  height: 525px;
  border-radius: 20px;
}

.yellow-border {
  border: 1px solid var(--0002, #ff942b);
}

.black-border {
  border: 1px solid #2a2f32;
}

.wifi-set-item-title {
  font-size: 1.25rem;
  text-align: center;
  width: 100%;
  height: 67px;
  border-radius: 20px;
  align-content: center;
}

.wifi-setup-item-text {
  line-height: 32px;
}

.yellow-gradient-title {
  background: var(--0002, linear-gradient(90deg, #ff942b 0%, #ffdc37 100%));
}

.dark-title {
  color: #fff;
  background: #2a2f32;
}

.wifi-setup-item-text {
  max-width: 269px;
}

.wifi-setup-hr-line {
  max-width: 269px;
  width: 100%;
  border: none;
  border-top: 1px solid #000;
  margin: 0;
}

.wifi-setup-middle-dec {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 其他服務 */
.home-other-section {
  position: relative;
  padding: 162px 0 280px;
  background: #fff8d7;
}

.other-service-lefr-dec {
  position: absolute;
  top: -260.88px;
  left: 0;
}

.other-service-lower-right-bg {
  position: absolute;
  bottom: 0;
  right: 0;
}

.other-service-items {
  display: flex;
  gap: 84px;
  margin: 36px auto;
  max-width: 1316px;
  width: 100%;
  position: relative;
}

.service-item {
  display: flex;
  flex-direction: column;
  max-width: 616px;
  width: 100%;
  text-align: center;
}

.service-middle-item {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 20px;
  background: #fff;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
  gap: 13.9px;
  padding: 19px 0;
  width: 100%;
  max-width: 192px;
  top: 107px;
}

.middle-text {
  line-height: 24px;
  text-align: center;
}

.service-item-title {
  height: 80px;
  font-size: 1.25rem;
  width: 100%;
  align-content: center;
}

.dark-blue-title {
  color: #fff;
  background: #0b2341;
}

.service-item-text {
  align-content: center;
  height: 69px;
}

.service-text-odd {
  background: rgba(217, 217, 217, 0.6);
}

.service-text-even {
  background: #fff;
}

.other-service-des-wrapper {
  max-width: 1003px;
  width: 100%;
  border-radius: 22px;
  background: #fff;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  display: flex;
  height: 215px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: -31px;
}

.other-service-upper-right-dec {
  position: absolute;
  top: 11px;
  right: 15px;
}

.other-service-lower-left-dec {
  position: absolute;
  bottom: 13px;
  left: 15px;
}

.other-service-des-text {
  max-width: 809px;
  width: 100%;
}

.home-other-section .home-btn {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}

@media (max-width: 480px) {
  .hero-img-desktop {
    display: block;
  }
  /* 關於我們區塊 */

  .home-about-section {
    padding: 31px 0 44px;
  }

  .home-title-wrapper {
    max-width: 120px;
    border-bottom: 1px solid #000;
  }

  .home-title-wrapper::after {
    height: 1px;
    bottom: -3px;
  }

  .home-title {
    margin-bottom: 3px;
    position: relative;
    right: -9px;
  }

  .home-title-dec {
    max-width: 40.75px;
    height: auto;
    bottom: 0;
  }

  .about-content {
    flex-direction: column;
    margin: 16px auto 0;
    gap: 20px;
    align-items: center;
  }

  .about-left {
    padding-top: 0;
  }

  .desktop-btn__about {
    display: none;
  }

  .mobile-btn__about {
    display: flex;
  }

  .home-btn {
    max-width: 157px;
    height: 36px;
    flex-direction: row;
    padding: 0 8.8px 0 18.72px;
  }

  .home-btn-text {
    font-size: 13px;
  }

  .home-btn-arrow {
    width: 18.72px;
    height: 18.72px;
  }

  .about-right {
    max-width: 220px;
    flex-direction: column;
    gap: 24px;
  }

  .about-compare-title {
    height: 38px;
  }

  .about-compare-item {
    gap: 10.12px;
  }

  /* monitor section */
  .home-monitor-section {
    padding: 35px 0 33px;
    background-image: url("../../images/monitor_BG_RWD.webp");
  }

  .home-section-des {
    margin-top: 12px;
  }

  .comparison-items {
    flex-direction: column;
    margin: 16px auto 20px;
    gap: 24px;
    align-items: center;
  }

  .comparison-item {
    max-width: 238px;
    height: 250px;
    padding: 14.79px 12.5px;
    gap: 11.24px;
    box-shadow: 0 2.248px 5.677px 0 rgba(0, 0, 0, 0.25);
    border-radius: 11.241px;
  }

  .comparison-item-title {
    border-radius: 11.241px;
  }

  /* wifi setup */

  .home-wifi-setup-section {
    padding: 46px 0 44px;
  }
  .wifi-setup-items {
    max-width: 240px;
    flex-direction: column;
    margin: 16px auto 20px;
    gap: 72px;
    align-items: center;
  }

  .wifi-setup-item {
    height: auto;
    padding-bottom: 13px;
  }

  .wifi-set-item-title {
    height: 38px;
    border-radius: 12px;
  }

  .wifi-setup-item-text,
  .wifi-setup-hr-line {
    max-width: 155px;
    text-align: center;
    line-height: 18.387px !important;
  }

  .wifi-item-wrapper {
    gap: 16px;
  }

  .wifi-setup-middle-dec {
    width: 90px;
    top: 53%;
  }

  /* 其他服務 */
  .home-other-section {
    padding: 35px 0 96px;
  }

  .other-service-items {
    margin: 16px auto 20px;
    gap: 52px;
  }

  .service-item-title {
    height: 70px;
  }

  .service-item-text {
    height: 87px;
    padding: 0 23px;
    line-height: normal !important;
  }

  .service-middle-item {
    max-width: 85px;
    gap: 26px;
    padding: 35px 0 27px;
    align-items: center;
    top: 83px;
  }

  .middle-text {
    font-size: 12px !important;
  }

  .mobile-br_text {
    max-width: 44px;
    line-height: normal !important;
  }

  .other-service-des-wrapper {
    border-radius: 22px;
    max-width: 326px;
    width: 100%;
    height: 167px;
    margin-bottom: -13px;
  }

  .other-service-des-text {
    max-width: 250px;
  }

  .about_lower_left_RWD {
    position: absolute;
    top: 154.19px;
    left: 0;
  }

  .about_upper_right_RWD {
    position: absolute;
    top: -98.58px;
    right: 0;
  }

  .wigi-bg-rwd {
    position: absolute;
    top: 227px;
    left: 0;
    z-index: -1;
  }

  .other_service_left_dec_RWD {
    position: absolute;
    top: -59px;
    left: 0;
  }

  .des-upper-right-RWD {
    position: absolute;
    top: 12px;
    right: 8px;
  }

  .des-lower-left-RWD {
    position: absolute;
    bottom: 12px;
    left: 8px;
  }

  .yellow_dot_dec_RWD {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}