/* Global Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Base Styles */
body {
    background: #fdf8e6;
    color: #082b41;
    line-height: 1.8;
}
a {
    text-decoration: none;
}

/* Header / Navigation */
header.main-header {
    background: #f7ac00;
    min-height: 384px;
    position: relative;
    z-index: 2;
}
header .navbar-nav .nav-link {
    color: #000;
    font-size: 18px;
    font-weight: 600;
}
header .dropdown-menu {
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 3;
}

/* Hero Section */
.hero {
    align-items: center;
    display: flex;
    aspect-ratio: 1440/580;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 400px;
}

.hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    padding: 40px 20px;
}

.hero h1 {
    margin: 0;
    padding: 0;
    line-height: 1;
}

.hero h1 img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.hero-curve {
    bottom: 0;
    aspect-ratio: 1440/310;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
    display: block;
    margin-bottom: -1px;
    height: auto;
    pointer-events: none;
    margin-bottom: -60px;
}

.hero-curve-top {
    width: 100%;
    display: block;
    aspect-ratio: 1440/320;
    transform: scaleY(-1);
    margin-top: -80px;
}
@media screen and (max-width: 1900px) {
    .hero-curve {
        margin-bottom: -100px;
     }
}

/* RWD - 1400px ~ 1800px */
@media screen and (max-width: 1800px) {
    .hero {
        min-height: 380px;
    }

    .hero-curve {
        margin-bottom: -60px;
     }
}

@media screen and (max-width: 1600px) {
    .hero {
        min-height: 360px;
        aspect-ratio: 1440/600;
    }
    .hero-curve {
       margin-bottom: -60px;
    }
}

@media screen and (max-width: 1500px) {
    .hero {
        min-height: 350px;
        aspect-ratio: 1440/610;
    }

    .hero-curve {
        aspect-ratio: 1440/320;
        margin-bottom: -60px;
    }
}

@media screen and (max-width: 1400px) {
    .hero {
        min-height: 340px;
        aspect-ratio: 1440/620;
    }

    .hero-curve {
        aspect-ratio: 1440/330;
        margin-bottom: -60px;
    }
}

@media screen and (max-width: 1300px) {
    .hero {
        min-height: 330px;
        aspect-ratio: 1440/630;
    }

    .hero-curve {
        aspect-ratio: 1440/340;
        margin-bottom: -60px;
    }
}

/* RWD - 1200px */
@media screen and (max-width: 1200px) {
    .hero {
        min-height: 320px;
        aspect-ratio: 1440/640;
    }

    .hero .container {
        padding: 35px 15px;
    }

    .hero-curve {
        aspect-ratio: 1440/350;
        margin-bottom: -60px;
    }
}

@media screen and (max-width: 1100px) {
    .hero {
        min-height: 310px;
        aspect-ratio: 1440/660;
    }

    .hero-curve {
        aspect-ratio: 1440/370;
        margin-bottom: -60px;
    }
}

@media screen and (max-width: 1000px) {
    .hero {
        min-height: 300px;
        aspect-ratio: 1440/680;
    }

    .hero .container {
        padding: 32px 15px;
    }

    .hero-curve {
        aspect-ratio: 1440/390;
        margin-bottom: -60px;
    }
}

/* RWD - Hero 平板 */
@media screen and (max-width: 991px) {
    .hero {
        aspect-ratio: 1440/700;
        min-height: 300px;
    }

    .hero .container {
        padding: 30px 15px;
    }

    .hero-curve {
        aspect-ratio: 1440/400;
        margin-bottom: -60px;
    }
}

/* RWD - 768px */
@media screen and (max-width: 768px) {
    .hero {
        aspect-ratio: 1440/800;
        min-height: 280px;
    }

    .hero .container {
        padding: 25px 15px;
    }
}

/* RWD - Hero 手機 */
@media screen and (max-width: 576px) {
    .hero {
        aspect-ratio: 1440/900;
        min-height: 250px;
    }

    .hero .container {
        padding: 20px 15px;
    }

    .hero-curve {
        aspect-ratio: 1440/400;
        margin-bottom: -40px;
    }
}

/* RWD - 小手機 */
@media screen and (max-width: 375px) {
    .hero {
        min-height: 220px;
    }

    .hero .container {
        padding: 15px 10px;
    }
}

@media (min-width: 2000px) {
    .hero-curve-top {
        margin-top: -110px;
    }
}
@media screen and (max-width: 1900px) {
    .hero-curve-top {
        margin-top: -90px;
    }
}
/* RWD - hero-curve-top (上方藍色弧形) */
@media screen and (max-width: 1800px) {
    .hero-curve-top {
        margin-top: -80px;
    }
}

@media screen and (max-width: 1600px) {
    .hero-curve-top {
        margin-top: -75px;
    }
}

@media screen and (max-width: 1500px) {
    .hero-curve-top {
        margin-top: -75px;
    }
}

@media screen and (max-width: 1400px) {
    .hero-curve-top {
        margin-top: -70px;
    }
}

@media screen and (max-width: 1300px) {
    .hero-curve-top {
        margin-top: -60px;
    }
}

@media screen and (max-width: 1200px) {
    .hero-curve-top {
        margin-top: -55px;
    }
}

@media screen and (max-width: 1100px) {
    .hero-curve-top {
        margin-top: -50px;
    }
}

@media screen and (max-width: 1000px) {
    .hero-curve-top {
        margin-top: -50px;
    }
}

@media screen and (max-width: 991px) {
    .hero-curve-top {
        margin-top: -45px;
    }
}

@media screen and (max-width: 768px) {
    .hero-curve-top {
        margin-top: -30px;
        aspect-ratio: 1440/300;
    }
}

@media screen and (max-width: 576px) {
    .hero-curve-top {
        margin-top: -23px;
        aspect-ratio: 1440/300;
    }
}

@media screen and (max-width: 375px) {
    .hero-curve-top {
        margin-top: -20px;
    }
}
/* 移至 index.scss*/

/* 橫幅主文案 */
.banner-water-text {
    /* 1. 流式字體大小：視窗越大字越大 */
    font-size: clamp(1.25rem, 3vw + 0.5rem, 2.5rem);
    /* 2. 行高、字重 */
    line-height: 1.35;
    font-weight: 700;
    color: #fff;
    /* 3. 讓句子別太長，方便自動換行 */
    max-width: 28rem; /* ≈ 512px */
    /* 4. 字少時拉寬區塊保持置中 */
    margin-inline: auto;
    margin-block: 5rem;
}

/* 2-3 圖片：桌機寬度鎖 260px，再小螢幕仍 100% RWD */
/* @media (min-width: 992px) {
    .banner-cert-img {
        max-width: 260px;
    }
} */


/* ===== 區塊導言 ===== */
/** 移到 welcome scss*/


/* 可選：讓小螢幕行距更寬鬆 */
/* @media (max-width: 575.98px) {
    .why-item-text {
        line-height: 1.8;
    }
} */

/* Product Items Centering Overrides */
.product-items .row.g-4.justify-content-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.product-items .row.g-4.justify-content-center > [class*="col-"] {
    flex: 0 0 auto;
    max-width: 360px;
    width: 360px;
}
.product-items .row.g-4.justify-content-center .card {
    width: 100%;
}

/* Product Items Base */
.product-items {
    background: #feb100;
    overflow: visible;
    position: relative;
}
.product-items .container {
    position: relative;
    z-index: 1;
}
/* .product-items::after {
    background: #fff;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    bottom: 0;
    content: "";
    height: 500px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 120%;
    z-index: 0;
} */

/* Card & Animation */

@keyframes rotate {
    from {
        transform: rotate(-57deg);
    }
    to {
        transform: rotate(303deg);
    }
}

/* Card Body & Text */
.card-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Device Image */
.device-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.device-image .product-back-image {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: auto;
}

.device-image img:not(.product-back-image) {
    position: relative;
    z-index: 1;
}

/* Content Text */
.card h3 {
    color: #1f2937;
    font-size: 20px;
    margin: 0 0 15px;
    text-align: center;
}
.card p {
    height: 58px;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.81;
    letter-spacing: 1.55px;
    color: #7c8994;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;   /* 最多顯示 2 行 */
    overflow: hidden;
    text-overflow: ellipsis;
}

@media  (max-width: 768px) {
    .card p {
        margin:0px 0px 28px 0px;
    }
}

.Shape {
  width: 24px;
  height: 23px;
  margin: 1.4px 0 0 52px;
  padding: 5.1px 8px 5.1px 8.3px;
}

.Path {
  width: 7.7px;
  height: 12.8px;
  background-color: #004280;
}

/* === CLEAN NAVBAR MANUAL DROPDOWN & COLLAPSE === */
.navbar .dropdown {
    position: relative;
}
.navbar .dropdown-menu {
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    z-index: 2000;
    display: none;
}
.navbar .dropdown-menu.show {
    display: block;
}
@media (max-width: 991.98px) {
    #mainNav {
        display: none;
    }
    #mainNav.show {
        display: block;
    }
    #mainNav .dropdown-menu {
        position: static;
        width: 100%;
        margin-top: 0;
    }
}
/* 還原預設：手機收合時 nav 隱藏，展開時 block */
@media (max-width: 991.98px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.show {
        display: block !important;
        background: transparent;
        padding: 0;
        margin: 0;
    }
    .navbar-collapse .navbar-nav {
        align-items: flex-start;
        text-align: start;
        width: 100%;
    }
}