@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');

.main {
    position: relative;
    background: linear-gradient(180deg, rgb(7 7 7) 10%, rgba(24, 36, 59, 1) 100%);
    z-index: 0;
}

/*-----------------麵包穴----------*/
.breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    color: rgba(255, 255, 255, .87);
    content: "/";
}

.breadcrumb .breadcrumb-item a {
    color: rgba(255, 255, 255, 1);
}

.breadcrumb .breadcrumb-item a:hover {
    color: rgba(255, 255, 255, 0.87);
    text-decoration: underline;
    text-underline-position: under;
    transition: all .2s ease-in;
}

.breadcrumb .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.87);
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    max-width: 270px;
    overflow: hidden;
}

/* --------------------top----------*/
.background_feather {
    position: absolute;
    top: -60px;
    right: 300px;
    z-index: -1;
}

.personalityslogan {
    width: 800px;
    margin-top: 18px;
    margin-bottom: 120px;
}

.Wrapper-personality h1 {
    font-family: "Noto Serif TC", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 110px;
    margin-bottom: 54px;
    z-index: 1;
}

.Wrapper-personality h1 .red_ {
    color: #db254c;
    padding-bottom: 18px;
}

.Wrapper-personality h1 span {
    color: #fafafa;
}

.Wrapper-personality p {
    color: #fafafa;
    font-family: "Noto Serif TC", serif;
    font-optical-sizing: auto;
    font-size: 24px;
    line-height: 1.8;
    letter-spacing: 1px;
    width: 800px;
    margin-bottom: 75px;
}

.btn-start-quiz {
    background-color: transparent;
    color: #00f2ea;
    border: 2px solid #00f2ea;
    border-radius: 50px;
    font-size: 24px;
    font-weight: bold;
    padding: 10px 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    /* 套用動畫：2秒一個循環，無限重複 */
    animation: breathing 2s infinite ease-in-out;
    transition: all 0.3s ease;
}

.btn-start-quiz:hover {
    background-color: #00f2ea;
    color: #121212;
    animation: none;
    /* 滑鼠移上去時停止動畫，維持亮色 */
    box-shadow: 0 0 25px #00f2ea;
}

@keyframes breathing {
    0% {
        box-shadow: 0 0 5px rgba(0, 242, 234, 0.2);
        border-color: rgba(0, 242, 234, 0.5);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 242, 234, 0.8);
        border-color: rgba(0, 242, 234, 1);
    }

    100% {
        box-shadow: 0 0 5px rgba(0, 242, 234, 0.2);
        border-color: rgba(0, 242, 234, 0.5);
    }
}

.icon {
    font-size: 18px;
    /* 讓播放符號小一點點 */
}

.section-title {
    display: flex;
    /* 使用 Flex 佈局 */
    align-items: center;
    /* 垂直置中 */
    text-align: center;
    color: #fafafa;
    /* 文字顏色 */
    font-family: "Noto Serif TC", serif;
    font-optical-sizing: auto;
    font-weight: 700;
}

.section-title::before,
.section-title::after {
    content: "";
    flex: 1;
    /* 自動填滿剩餘空間，讓線條等長 */
    height: 1px;
    /* 線條寬度 */
    background: #9b9b9b;
    /* 線條顏色（深灰色） */
}

/* 調整文字與左右線條的間距 */
.section-title span {
    padding: 0 20px;
    font-size: 36px;
    /* 標題字級 */
    letter-spacing: 2px;
    /* 字距 */
}

.Wrapper-personality h3 {
    color: #fafafa;
    font-family: "Noto Serif TC", serif;
    font-optical-sizing: auto;
    font-size: 24px;
    text-align: center;
}

.Wrapper-personality h3.smallfont {
    font-size: 18px;
    letter-spacing: 1px;
    margin-top: 24px;
    margin-bottom: 36px;
}

.btn-view-details {
    position: absolute;
    left: calc(50% - 69px);
    bottom: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #6e6e6e;
    color: #fafafa;
    border: none;
    border-radius: 25px;
    padding: 8px 24px;
    font-size: 16px;
    cursor: pointer;

    /* 動畫 */
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 滑鼠移入效果 (Hover) */
.btn-view-details:hover {
    background-color: #4a4756;
    transform: translateY(-2px);
    /* 輕微上浮感 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* 點擊效果 */
.btn-view-details:active {
    transform: translateY(0);
}

.card_images {
    color: #fafafa;
}

@media (max-width: 1399.98px) {
    .background_feather {
        right: 120px;
    }
}

@media (max-width: 1199.98px) {
    .background_feather {
        right: 80px;
        opacity: 0.8;
    }

    .btn-view-details {
        bottom: 21px;
    }
}

@media (max-width: 991.98px) {
    .personalityslogan {
        width: auto;
        display: inline-flex;
        flex-direction: column;
    }

    .btn-start-quiz {
        margin: 0 auto;
    }

    .background_feather {
        right: unset;
        left: calc(50% - 276px);
    }

    .Wrapper-personality h1 {
        font-size: 90px;
    }

    .Wrapper-personality p {
        width: auto;
        margin-bottom: 75px;
    }
}

@media (max-width: 767.98px) {
    .Wrapper-personality h1 {
        font-size: 72px;
    }

    .Wrapper-personality h3.smallfont {
        margin-bottom: 24px;
    }

    .btn-view-details {
        bottom: 39px;
    }
}

@media (max-width:575.98px) {
    .personalityslogan {
        height: auto;
    }

    .Wrapper-personality h1 {
        font-size: 13vw;
        margin-bottom: 30px;
    }

    .Wrapper-personality h1 .red_ {
        padding-bottom: 9px;
    }

    .Wrapper-personality p {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 45px;
    }

    .btn-start-quiz {
        margin: 15vw auto 0;
    }

    .Wrapper-personality h3.smallfont {
        font-size: 16px;
        letter-spacing: 1px;
        margin-top: 18px;
        margin-bottom: 15px;
    }

    .section-title span {
        padding: 0px 7px;
        letter-spacing: 2px;
    }

    .btn-view-details {
        bottom: unset;
        top: calc(50% + 50vw);
    }

    .Wrapper-personality h3 {
        font-size: 24px;
        line-height: 1.5;
    }

    .background_feather {
        right: unset;
        left: calc(50% - 50vw);
    }
}