.EOFY-TRAYCANOPY-banner-image {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
        }
        
/* === INTRO SECTION LAYOUT=== */
.EOFY-TRAYCANOPY-section-profile {
  width: 100%;
  background-color: white;
  padding: 80px 5vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 60px;
}


.EOFY-TRAYCANOPY-section-profile-text {
  flex: 1 1 300px;
  max-width: 600px;
}


.EOFY-TRAYCANOPY-section-profile-title {
  font-size: 3rem;
  margin-bottom: 2.2rem;  
  color: #202124;
  text-align: left;
  font-weight: 800;
  line-height: 1.25;
}


.EOFY-TRAYCANOPY-section-profile-desc {
  font-size: 1.8rem;
  color: #444;
  line-height: 1.9;
  margin-bottom: 2.4rem;
}


.EOFY-TRAYCANOPY-section-profile-text a {
  display: inline-block;
  padding: 1em 2.5em;
  background-color: #fff;
  border: 3px solid #202124;
  color: #202124;
  border-radius: 8px;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 900;
  transition: all 0.2s ease;
  margin-bottom: 1.5rem;
}

.EOFY-TRAYCANOPY-section-profile-text a:hover {
  background-color: #202124;
  color: #fff;
}


.EOFY-TRAYCANOPY-section-profile-image-box {
  flex: 1 1 300px;
  max-width: 600px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
}

.EOFY-TRAYCANOPY-section-profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}


@media (max-width: 768px) {
  .EOFY-TRAYCANOPY-section-profile {
    flex-direction: column;
    text-align: center;
    padding: 60px 20px;
  }

  .EOFY-TRAYCANOPY-section-profile-title {
    font-size: 2.2rem;
    margin-bottom: 1.8rem;
    text-align: center;
  }

  .EOFY-TRAYCANOPY-section-profile-desc {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    text-align: center;
  }

  .EOFY-TRAYCANOPY-section-profile-text a {
    font-size: 1.15rem;
    padding: 0.9em 2.2em;
    margin: 0 auto 2rem;
  }

  .EOFY-TRAYCANOPY-section-profile-image-box {
    max-width: 90%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
  }
}
/*前两个模块截至位置*/


/* 产品模块 */
.EOFY-TRAYCANOPY-product-bg {
  background-color: #fff;
}

.EOFY-TRAYCANOPY-product {
  
  padding: 0 100px;
  background-color: rgb(247, 247, 247);
}

/* New styles for the header section to align title and link */
.EOFY-TRAYCANOPY-product-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8vh 100px 4vh 100px;
}

.EOFY-TRAYCANOPY-title{
  font-size: 26px;
  font-weight: 800;
  color: #1f1f1f;
  line-height: 1.2;
  text-align: left;
}

.EOFY-viewAll{
  position: relative;
  width: 100%;
  height: 50px;
}

.view-all-button {
  position: absolute;
  right: 100px;
  bottom: 60px;
  font-size: 1em;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  padding-bottom: 2px;
}




.EOFY-TRAYCANOPY-switch {
  margin-left: 100px;
  position: relative;
  display: flex;
  width: 320px;
  background-color: white;
  border-radius: 50px;
  overflow: hidden;
  cursor: pointer;
  font-family: Arial, sans-serif;
}

.switch-option {
  flex: 1;
  padding: 12px 15px;
  text-align: center;
  color: black;
  z-index: 1;
  transition: color 0.3s ease-in-out;
  user-select: none;
}

.switch-option.active {
  color: white;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background-color: #333333;
  border-radius: 50px;
  z-index: 0;
  transition: transform 0.3s ease-in-out;
}


.product-list-container {
  padding: 2vh 100px;
  display: flex;
  gap: 30px; /* Changed from 10% to a fixed gap for stability */
  flex-wrap: wrap;
  justify-content: left;
}

.product-card {
  border-radius: 8px;
  padding: 20px;
  text-align: left;
  width: 30%; /* Base width for product cards */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#canopy-products .product-card {
    width: 23%; /* Adjust width to fit 4 items in a row for canopy products */
}


.product-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: 15px;
  align-self: center;
}


.product-name {
  font-size: 1.25em;
  font-weight: bold;
  color: #333333;
  margin-top: 0;
  margin-bottom: 8px;
}

.product-description {
  font-size: 12.5px;
  color: #555555;
  margin-bottom: 12px;
}

.product-price {
  font-size: 1.1em;
  font-weight: bold;
  color: #d10000;
  margin-bottom: 20px;
}


/* 响应式设计: 在小屏幕上，卡片可能会堆叠而不是并排 */
@media (max-width: 768px) {
  .EOFY-TRAYCANOPY-product-header{
    padding: 6vh 0px 2vh 0px;
  }
  .EOFY-TRAYCANOPY-title{
    margin: 0 auto;
    text-align: center;
    font-size: 20px;

  }
  .EOFY-viewAll{
    top: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
  .view-all-button {
    position: static;
  }
  .product-list-container{
    padding: 0;
  }
  .product-name{
    margin: 5px auto;
    font-size: 14.5px;
  }
  .product-description{
    margin: 5px auto;
    font-size: 12.5px; /* Corrected to include 'px' unit */
  }
  .product-price{
    margin: 5px auto;
    font-size: 13px;
    color: #D10000;
  }
  .product-card{
    padding: 0px;
    margin: 0px;
  }
}

@media (max-width: 768px) {
  
  .EOFY-TRAYCANOPY-product{
    padding: 0;
  }
  .EOFY-TRAYCANOPY-switch {
    margin: 0 auto;
    width: 50%;
  }
  .product-list-container {
    flex-direction: column;
    align-items: center;
  }

  .product-card, #canopy-products .product-card {
    width: 90%; /* On small screens, cards take up more width */
    max-width: 400px;
    margin-bottom: 20px;
  }
}

/*XIAOMI*/
       .SERVICE-BODY-Carousel {
            background: #e6e6e6;
        }

        .SERVICE-BODY-Carousel-wrapper {
            padding-top: 2rem;
            padding-bottom: 2rem;
            width: 100%;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: #1F2937;
            user-select: none;
            background-color: #000000;
        }

        .SERVICE-BODY-Carousel-box {
            padding-left: 1rem;
            padding-right: 1rem;
            max-width: 1600px;
            margin: 0 auto;
        }

        .SERVICE-BODY-Carousel-title {
            margin-bottom: 1.5rem;
            width: 100%;
        }

        .SERVICE-BODY-Carousel-title-left-box {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .SERVICE-BODY-Carousel-title-left {
            margin-bottom: 1rem;
            text-align: center;
        }

        .SERVICE-BODY-Carousel-title-left-h1 {
            font-size: 1.875rem;
            line-height: 2.25rem;
            font-weight: 700;
            color: white;
        }

        .SERVICE-BODY-Carousel-title-left-h2 {
            margin-top: 0.25rem;
            font-size: 1.25rem;
            line-height: 1.75rem;
            color: white;
        }

        .SERVICE-BODY-Carousel-title-right {
            margin-top: 1rem;
            width: 100%;
            text-align: center;
        }

        .SERVICE-BODY-Carousel-title-right-p {
            font-size: 1.2rem;
            line-height: 1.625;
            color: white;
        }

        /* 轮播容器和轨道 */
        .SERVICE-BODY-Carousel-Container {
            overflow: hidden;
            position: relative;
            width: 100%;
            height: 45vh;
            max-height: 700px;
        }

        .SERVICE-BODY-Carousel-track {
            display: flex;
            height: 100%;
        }

        /* 控件样式（桌面和移动） */
        .SERVICE-BODY-Carousel-desktop-controls {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 30;
            padding: 1rem;
            color: #ffffff;
            pointer-events: none;
            /* 更新：使用Flexbox居中并添加渐变背景 */
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            /* background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); */
        }

        .SERVICE-BODY-Carousel-nav-buttons {
            display: flex;
            margin-bottom: 0.75rem;
            justify-content: center;
            pointer-events: auto;
            flex-wrap: wrap;
        }

        .SERVICE-BODY-Carousel-text-box {
            text-align: center;
            pointer-events: auto;
        }

        .SERVICE-BODY-Carousel-text-box-h3 {
            font-size: 1.125rem;
            line-height: 1.75rem;
            font-weight: 600;
        }

        .SERVICE-BODY-Carousel-text-box-p {
            margin-top: 0.25rem;
            max-width: 32rem; /* 稍微增加最大宽度 */
            font-size: 0.75rem;
            line-height: 1.625;
            opacity: 0.9;
            /* 更新：添加左右margin以实现居中 */
            margin-left: auto;
            margin-right: auto;
        }

        .SERVICE-BODY-Carousel-mobile-controls {
            padding: 1rem;
            margin-top: 1.5rem;
            text-align: center;
        }

        .SERVICE-BODY-Carousel-mobile-title {
            font-size: 1.6rem;
            line-height: 1.75rem;
            font-weight: 600;
            color: white;
        }

        .SERVICE-BODY-Carousel-mobile-description {
            margin-top: 0.25rem;
            font-size: 1.2rem;
            line-height: 1.625;
            color: white;
        }

        .SERVICE-BODY-Carousel-mobile-dots {
            display: flex;
            margin-top: 1rem;
            justify-content: center;
        }

        /* 默认隐藏桌面控件，显示移动控件 */
        .SERVICE-BODY-Carousel-desktop-controls { display: none; }
        .SERVICE-BODY-Carousel-mobile-controls { display: block; }


        /* 单个幻灯片和遮罩层 */
        .SERVICE-BODY-Carousel-slide-div {
            position: relative;
            flex-shrink: 0;
            height: 100%;
        }

        .SERVICE-BODY-Carousel-overlay {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 10;
            border-radius: 0.5rem;
            background-color: #000000;
            pointer-events: none;
        }

        /* 动态添加的按钮和点的基本样式 */
        .SERVICE-BODY-Carousel-js-nav-buttons {
            padding: 0.25rem 0.5rem;
            margin: 0 0.2rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            line-height: 1rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: none;
            background-color: transparent;
            cursor: pointer;
        }

        .SERVICE-BODY-Carousel-mb-dot {
            border-radius: 9999px;
            width: 0.625rem;
            height: 0.625rem;
            margin: 0 0.3rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: none;
            padding: 0;
            cursor: pointer;
        }

        /* 按钮和点的激活/非激活状态 */
        .nav-btn-active {
            color: #ffffff;
            font-weight: 600;
            opacity: 1;
            background-color: rgba(255, 255, 255, 0.2);
        }
        .nav-btn-inactive {
            color: #D1D5DB;
            opacity: 0.75;
        }
        .nav-btn-inactive:hover {
            color: #ffffff;
            opacity: 1;
        }
        .mobile-dot-active {
            background-color: #a40201;
        }
        .mobile-dot-inactive {
            background-color: #D1D5DB;
        }
        .mobile-dot-inactive:hover {
            background-color: #9CA3AF;
        }


        /* 动画和过渡效果 */
        .carousel-track {
            transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
            will-change: transform;
        }

        .carousel-slide {
            transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
            will-change: transform, opacity;
        }

        .carousel-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0.5rem;
            display: block;
        }

        .slide-overlay {
            transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
            will-change: opacity;
            transform: translateZ(0);
        }

        .dragging .carousel-track,
        .dragging .carousel-slide {
            transition: none !important;
        }
        
        .no-transition {
            transition: none !important;
        }

        .fade-in-element {
            opacity: 0;
            transform: translateY(15px);
            animation: fadeInElementAnimation 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
        }

        @keyframes fadeInElementAnimation {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 响应式设计 */
        @media (min-width: 640px) {
            .SERVICE-BODY-Carousel-title-left-h1 { font-size: 1.875rem; line-height: 2.25rem; }
            .SERVICE-BODY-Carousel-title-left-h2 { font-size: 1.5rem; line-height: 2rem; }
            .SERVICE-BODY-Carousel-title-right-p { font-size: 1.4rem; line-height: 1.25rem; }
            .SERVICE-BODY-Carousel-nav-buttons { margin-bottom: 1rem; }
            .SERVICE-BODY-Carousel-text-box-h3 { font-size: 1.25rem; line-height: 1.75rem; }
            .SERVICE-BODY-Carousel-text-box-p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; }
            .SERVICE-BODY-Carousel-js-nav-buttons { padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; }
        }

        @media (min-width: 768px) {
            .SERVICE-BODY-Carousel-wrapper { padding-top: 8rem; padding-bottom: 12rem; }
            .SERVICE-BODY-Carousel-title { margin-bottom: 2.5rem; width: 90%; margin-left:auto; margin-right:auto; }
            .SERVICE-BODY-Carousel-title-left-box { flex-direction: row; justify-content: space-between; align-items: center; }
            .SERVICE-BODY-Carousel-title-left { margin-bottom: 0; text-align: left; }
            .SERVICE-BODY-Carousel-title-right { padding-left: 1rem; margin-top: 0; text-align: right; max-width: 48%; }
            .SERVICE-BODY-Carousel-Container { height: 55vh; }
            .SERVICE-BODY-Carousel-desktop-controls { display: flex; padding: 1.5rem; } /* 确保在桌面端显示为flex */
            .SERVICE-BODY-Carousel-mobile-controls { display: none; }
        }

        @media (min-width: 1024px) {
            .SERVICE-BODY-Carousel-title-left-h1 { font-size: 3rem; line-height: 1; }
            .SERVICE-BODY-Carousel-title-left-h2 { margin-top: 0.5rem; font-size: 1.875rem; line-height: 2.25rem; }
            .SERVICE-BODY-Carousel-Container { height: 60vh; }
            .SERVICE-BODY-Carousel-desktop-controls { padding: 2rem; }
            .SERVICE-BODY-Carousel-nav-buttons { margin-bottom: 1.5rem; }
            .SERVICE-BODY-Carousel-text-box-h3 { font-size: 1.5rem; line-height: 2rem; }
            .SERVICE-BODY-Carousel-text-box-p { font-size: 1rem; line-height: 1.5rem; }
            .SERVICE-BODY-Carousel-js-nav-buttons { font-size: 1.6rem; line-height: 1.5rem; }
        }

    
    /*PKG*/
EOFY-PKG-container {
    max-width: 1280px; /* Standard container width */
    margin-left: auto;
    margin-right: auto;
    padding: 1rem; /* p-4 */
}

/* Main Title */
.EOFY-PKG-main-title {
    font-size: 1.875rem; /* text-3xl */
    line-height: 2.25rem;
    font-weight: 700;
    color: white;
    text-align: center;
    margin-bottom: 2rem; /* mb-8 */
    margin-top:3rem;
}

/* Card Slider Wrapper & Container */
.EOFY-PKG-card-slider-wrapper {
    position: relative;
    display: flex;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    border-radius: 0.5rem; /* rounded-lg */
}

.EOFY-PKG-card-container {
    display: flex;
    overflow-x: auto;
    /* padding: 1rem; p-4 */
    cursor: grab;
    user-select: none;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.EOFY-PKG-card-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}

.EOFY-PKG-card-container:active {
    cursor: grabbing;
}

/* Individual Card Item */
.EOFY-PKG-card-item {
    flex-shrink: 0;
    width: 25rem; /* w-80 */
    background-color: #262626; /* bg-neutral-800 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-lg */
    margin-right: 1.5rem; /* mr-6 */
    display: flex;
    flex-direction: column;
}

.EOFY-PKG-card-image-wrapper {
    aspect-ratio: 4 / 4;
    background-color: #404040; /* bg-neutral-700 */
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    overflow: hidden;
}

.EOFY-PKG-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.EOFY-PKG-card-content {
    padding: 1.5rem; /* p-6 */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.EOFY-PKG-card-title {
    font-size: 1.5rem; /* sm:text-2xl */
    line-height: 2rem;
    font-weight: 700;
    margin-bottom: 1rem; /* mb-4 */
    color: #f5f5f5; /* text-neutral-100 */
}

.EOFY-PKG-card-features {
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
    color: #d4d4d4; /* text-neutral-300 */
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0; /* mb-4 */
    flex-grow: 1;
}

/* Divider line for features using a pseudo-element */
.EOFY-PKG-card-features > li {
    padding-bottom: 0.5rem; /* pb-2 */
    margin-top: 0.5rem; /* space-y-2 */
    border-bottom: 1px solid #404040; /* A subtle divider */
}
.EOFY-PKG-card-features > li:first-child {
    margin-top: 0;
}
.EOFY-PKG-card-features > li:last-child {
    border-bottom: none;
}


.EOFY-PKG-card-pricing {
    margin-top: auto;
    padding-top: 1rem; /* pt-4 */
}

.EOFY-PKG-price-supplied {
    font-size: 1.5rem; /* text-lg */
    line-height: 1.75rem;
    font-weight: 600;
    color: #da6060; /* text-neutral-200 */
}

.EOFY-PKG-price-unavailable {
    color: #f97316; /* text-orange-500 */
}

.EOFY-PKG-price-poa {
    color: #eab308; /* text-yellow-400 */
}

.EOFY-PKG-price-installed {
    font-size: 2.4rem; /* text-sm */
    font-weight:800;
    color:#d8d8d8;
    line-height: 2.6rem;
}

.EOFY-PKG-card-actions {
    margin-top: 1.5rem; /* mt-6 */
}

.EOFY-PKG-learn-more-button {
    display: block;
    background-color: #a40201;
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem 1rem; /* py-3 px-4 */
    border-radius: 0.5rem; /* rounded-lg */
    text-align: center;
    text-decoration: none;
    transition: background-color 150ms ease-in-out;
}

.EOFY-PKG-learn-more-button:hover {
    background-color: #8e0201; /* Darken on hover */
}

/* Navigation Arrows */
.EOFY-PKG-nav-arrows {
    position: relative;
    justify-content: flex-end;
height:auto;
align-items: center;
    display: inline-flex;
    padding: 1rem;
    z-index: 20;
}
.EOFY-PKG-nav-arrows > button:not(:first-child) {
}

.EOFY-PKG-arrow-button {
    background-color: #a40201;
    color: white;
    padding: 0.75rem; /* p-3 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: opacity 150ms ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}
.EOFY-PKG-arrow-button:hover {
     background-color: #8e0201; /* Darken on hover */
}

.EOFY-PKG-arrow-icon {
    width: 1.5rem; /* w-6 */
    height: 1.5rem; /* h-6 */
}

/* Utility Classes for JS control */
.EOFY-PKG-hidden {
    display: none !important;
}

.EOFY-PKG-cursor-not-allowed {
    cursor: not-allowed;
}


/* Responsive Design */
@media (min-width: 640px) { /* sm breakpoint */
    .EOFY-PKG-container {
        padding: 2rem; /* sm:p-8 */
    }

    .EOFY-PKG-main-title {
        font-size: 2.25rem; /* sm:text-4xl */
        line-height: 2.5rem;
        margin-bottom: 3rem; /* sm:mb-12 */
    }
    
    .EOFY-PKG-card-content {
        padding: 1.5rem; /* sm:p-6 */
    }

    .EOFY-PKG-card-title {
        font-size: 1.5rem; /* sm:text-2xl */
    }
}

@media (max-width: 768px) { /* md breakpoint */
    .EOFY-PKG-nav-arrows {
        display: none; /* md:hidden */ }
   .EOFY-PKG-card-slider-wrapper {
        padding:0% 5% 2.5% 5%;
   
    }
}