/* Carousel Styles */
.carousel {
    /* ... existing styles ... */
}


.slide {
    min-width: 100%;
    /* ... existing styles ... */
}

.slide img {
    width: 100%;    /* Make the image full width of the slide */
    height: auto;   /* Maintain the aspect ratio */
    display: block; /* Remove any extra space below the image */
}


/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}



.hero {
    background: #bbb;
    padding: 2em;
    text-align: center;
}

.features {
    display: flex;
    justify-content: space-around;
    padding: 1em;
}

.feature {
    width: 30%;
    background: #eee;
    padding: 1em;
    margin: 1em 0;
}

.about {
    background: #ccc;
    padding: 2em;
    margin-top: 1em;
}

footer {
    background: #aaa;
    padding: 1em;
    text-align: center;
}


/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



body {
    font-family: Arial, sans-serif;
}

/* Header and Navigation Styles */


header {
    background: #FFFFFF; /* Set header background to white */
    color: #000000; /* Set default text color to black */
    padding: 0em 6em;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF; /* White background */
}

.logo {
    font-size: 0.5em;
    font-weight: bold;
    color: #000000; /* Black text */
}

.menu {
    list-style: none;
    display: flex;
   
}

.menu li {
    padding: 0 2em;
    
}

.menu li a {
    text-decoration: none;
    transition: color 0.3s;
    color: #000000; /* Black text */
}

.menu li a:hover {
    color: #ccc;
}

/* 以下滑鼠移至特效 */

.banner img {
    transition: transform 0.3s ease; /* 添加平滑過渡效果 */
}

.banner:hover img {
    transform: scale(1.1); /* 指標經過時放大圖片 */
}



/* Add styles for the rest of the layout as needed */
/* ... */




/* Menu Item with Submenu 會員瀏覽下一層*/
.menu-item {
    position: relative; /* Needed for absolute positioning of submenu */
}

/* Submenu Styles */
.submenu {
    display: none; /* Hide submenu */
    position: absolute; /* Positioning the submenu */
    background-color: #fff; /* Background color */
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* Optional: Add a shadow */
    z-index: 1; /* Ensure submenu is on top */
    white-space: nowrap; /* Prevent wrapping of menu items */
}

.submenu a {
    display: block; /* Stack links vertically */
    color: #000000; /* Text color for submenu items */
    padding: 12px 16px; /* Padding for submenu items */
    text-decoration: none; /* Remove underline from links */
}

.submenu a:hover {
    background-color: #f7f7f7; /* Hover background color */
}

/* Show Submenu on Hover */
.menu-item:hover .submenu {
    display: flex; /* Display submenu on hover */
    flex-direction: row; /* Arrange submenu items in a row */
}


/*會員瀏覽下一層結束*/





/* 會員登入下一層 */
.menu-item {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.menu-item:hover .dropdown-content {
    display: block;
}

/* Style for the hover state of the dropdown items */
.dropdown-content a:hover {
    background-color: #f1f1f1;
}



/* 會員登入下一層結束 */




/* Previous styles */

/* Carousel Styles */
.carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-slides {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    min-width: 100%;
    transition: opacity 0.5s ease;
    position: relative;
}

.slide:not(.active) {
    display: none;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 10px;
    z-index: 1000;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Additional styles */
/* ... */




.carousel-dots {
    text-align: center;
    padding: 10px 0;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active-dot {
    background-color: #717171; /* 活動點的背景顏色 */
    // 其他需要的樣式
}


.active-dot, .dot:hover {
    background-color: #717171;
}

/* ... 這是標題文字 ... */
.section-title {
    text-align: center; /* Center the title text */
    font-size: 24px; /* Large font size for visibility */
    padding: 20px 0; /* Add some space above and below the title */
    background: #FFFFFF; /* Optional: a light background color */
    color: #333; /* Dark text color for contrast */
}






/* ... existing styles ... */

.small-banners-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


/* ... 3個1組輪播banner最新 ... */
.banner-row {
    display: flex;
    justify-content: space-around;
    width: 70%; /* Adjust if needed */
    margin-bottom: 1em; /* Space between rows */
}

/* ... 6靜態banner ... */
.banner-row1 {
    display: flex;
    justify-content: center;
    width: 100%; /* Adjust if needed */
    margin-bottom: 1em; /* Space between rows */
}




/* ... 3個1組輪播banner2好評 ... */
.banner-row3 {
    display: flex;
    justify-content: center;
    width: 70%; /* Adjust if needed */
    margin-bottom: 1em; /* Space between rows */
}


.banner {
    flex: 0 0 30%; /* Adjust if needed to fit three banners in a row */
    margin: 0.5%; /* Space between banners */
    position: relative;
    cursor: pointer;
}




.banner img {
    width: 100%;
    height: auto;
    display: block;
}




.banner-title {
    /* ... existing styles ... */
    position: relative; /* Changed from absolute to relative */
    top: 0; /* Align to the top of the banner */
    background-color: transparent; /* Remove background color to make it blend with the section */
    color: #333; /* Dark text for visibility */
    padding: 10px; /* Add some padding */
    text-align: center; /* Center the text */
    font-size: 18px; /* Adjust the font size as needed */
}







/* ... additional styles ... */



/* ... existing styles ... */


/*第二輪播 Second Carousel Styles */
.carousel-2 {
    width: 100%; /* Full width of the parent */
    position: relative; /* Establishes a positioning context for inner elements */
    display: flex;
    justify-content: center; /* Centers the slides-container-2 horizontally */
    align-items: center; /* Centers the slides-container-2 vertically */
    overflow: hidden; /* Hides the parts of the slide that overflow the container */
}

.slides-container-2 {
    width: 50%; /* Adjust as needed, this will make the slide half the width of the screen */
    height: 50vh; /* Half the height of the viewport */
    position: relative; /* Needed for the absolute positioning of slides */
}

.slide-2 {
    position: absolute; /* Positioned absolutely to stack on top of each other */
    top: 50%; /* Initially align at the top of the slides-container-2 */
    left: 50%; /* Center point of the container */
    width: auto; /* Adjust based on content */
    height: 100%; /* Slide takes the full height of its parent */
    transform: translate(-50%, -50%); /* Center the slide */
    display: flex; /* Use flexbox to center the image */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.slide-2 img {
    max-height: 100%; /* Maximum height of the image is the container's height */
    max-width: 100%; /* Ensure the image doesn't exceed the container's width */
    object-fit: contain; /* Ensures the image is fully visible, contained within the element's box */
}

/* Adjusting navigation buttons to be on the sides of the carousel */
.prev-2, .next-2 {
    position: absolute;
    top: 50%; /* Align vertically at the center of the slide */
    transform: translateY(-50%);
    cursor: pointer;
    padding: 10px;
    color: white;
    background-color: rgba(0,0,0,0.5);
    border: none;
    z-index: 10; /* Ensure they are above the images */
}

.prev-2 {
    left: 10px; /* Adjust as necessary to position inside the slides-container-2 */
}

.next-2 {
    right: 10px; /* Adjust as necessary to position inside the slides-container-2 */
}

/* ... additional styles ... */












/* .輪播6點點.. existing styles ... */



.dots-container-2 {
    text-align: center;
    position: absolute;
    bottom: -0px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.dot-2 {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.dot-2.active {
    background-color: #717171; /* Active dot color */
}

/* ... additional styles ... */











/* 登入會員頁Reset some default styles */




* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




.body-login {
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}


/* 蠻多頁面單身使用*/
.member-login {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    /* display: flex;*//* 會影響版面佈局大小*/
    justify-content: center;
    align-items: center;
    height: 100vh;/* 會影響menu bar的位置*/
}




/*搜尋用*/
.search-login {
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
	display: flex;
   justify-content: center;
    height: 30vh;/* 會影響menu bar的位置*/
     width: 80%;
margin-left: 10%; /* 左边留出10%的空间 */
    margin-right: 10%; /* 右边留出10%的空间 */
 box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    
}



.cards-login {
	font-family: Arial, sans-serif;
    background-color: #ffffff;
    /* display: flex;*//* 會影響版面佈局大小*/
    justify-content: center;
    align-items: center;
    height: 70vh;/* 會影響menu bar的位置*/
}





/* contact頁面單身使用*/
.member-contact {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    /*display: flex;*//* 會影響版面佈局大小*/
    justify-content: center;
    align-items: center;
    height: 10vh;/* 會影響menu bar的位置*/
    width: 70%; /* 新增的設定，將容器寬度設為50% */
    margin: 0 15%; /* 上下保持原有的margin（此處為0），左右各設為15% */
}


/* member-browsing頁面單身使用*/
.member-browsing-contact {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    /*display: flex;*//* 會影響版面佈局大小*/
    justify-content: center;
    align-items: center;
    height: 70vh;/* 會影響menu bar的位置*/
    width: 70%; /* 新增的設定，將容器寬度設為50% */
    margin: 0 15%; /* 上下保持原有的margin（此處為0），左右各設為15% */
}




.login-container {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}

h1 {
    color: #333;
    text-align: center;
}

.form-group {
    margin-bottom: 15px;
    
}

.form-group label {
    display: block;
    color: #666;
}

.form-group input {
    width: calc(100% - 20px);
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    
}

.login-btn {
    width: 100%;
    padding: 10px;
    background-color: #F4C1D1;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.login-btn:hover {
    background-color: #C9F8F7;
}

.links {
    margin-top: 20px;
    text-align: center;
}

.links a {
    margin-right: 10px;
    color: #F4C1D1;
    text-decoration: none;
}

.links a:hover {
    text-decoration: underline;
}













/*第三輪播 Second Carousel Styles */
.carousel-3 {
    width: 100%; /* Full width of the parent */
    position: relative; /* Establishes a positioning context for inner elements */
    display: flex;
    justify-content: center; /* Centers the slides-container-2 horizontally */
    align-items: center; /* Centers the slides-container-2 vertically */
    overflow: hidden; /* Hides the parts of the slide that overflow the container */
}

.slides-container-3 {
    width: 50%; /* Adjust as needed, this will make the slide half the width of the screen */
    height: 50vh; /* Half the height of the viewport */
    position: relative; /* Needed for the absolute positioning of slides */
}

.slide-3 {
    position: absolute; /* Positioned absolutely to stack on top of each other */
    top: 50%; /* Initially align at the top of the slides-container-2 */
    left: 50%; /* Center point of the container */
    width: auto; /* Adjust based on content */
    height: 100%; /* Slide takes the full height of its parent */
    transform: translate(-50%, -50%); /* Center the slide */
    display: flex; /* Use flexbox to center the image */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.slide-3 img {
    max-height: 100%; /* Maximum height of the image is the container's height */
    max-width: 100%; /* Ensure the image doesn't exceed the container's width */
    object-fit: contain; /* Ensures the image is fully visible, contained within the element's box */
}



/* 第3輪播的2側按鈕 */
.prev-3, .next-3 {
    position: absolute;
    top: 50%; /* Align vertically at the center of the slide */
    transform: translateY(-50%);
    cursor: pointer;
    padding: 10px;
    color: white;
    background-color: rgba(0,0,0,0.5);
    border: none;
    z-index: 10; /* Ensure they are above the images */
}

.prev-3 {
    left: 10px; /* Adjust as necessary to position inside the slides-container-2 */
}

.next-3 {
    right: 10px; /* Adjust as necessary to position inside the slides-container-2 */
}

/* ... additional styles ... */



/* 第三輪.輪播6點點.. existing styles ... */



.dots-container-3 {
    text-align: center;
    position: absolute;
    bottom: -0px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.dot-3 {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.dot-3.active {
    background-color: #717171; /* Active dot color */
}

/* ... additional styles ... */






/* small-banners-container2 的樣式 -3banner輪播樣式*/
.small-banners-container2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* 根據需求調整寬度 */
    margin: 0 auto;
    flex-direction: column;
    position: relative;
    /* 保留原有的其他屬性 */
}

/* 調整輪播中的圖片樣式 */
.slide-2b img {
    width: 100%;
    height: auto;
    max-width: 100%; /* 確保圖片不會超過其容器的寬度 */
    object-fit: contain; /* 確保圖片完全可見且不失真 */
    /* display: block;*/
    /* 保留原有的其他屬性 */
}



.slide-2b-1 img {
    width: 100%;
    height: auto;
    max-width: 100%; /* 確保圖片不會超過其容器的寬度 */
    object-fit: contain; /* 確保圖片完全可見且不失真 */
    /* display: block;*/
    /* 保留原有的其他屬性 */
}


.small-banners-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


/* 對每組輪播內部元素進行調整 */
.slides-container-2b {
    display: flex;
    justify-content: space-between;
    width: 100%;
    transition: transform 0.5s ease;
    /* 保留原有的其他屬性 */
}
.slide-2b {
    min-width: 100%;
    transition: opacity 0.5s ease;
    position: relative;
}

/* .prev-2b, .next-2b {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 10px;
    z-index: 100;
}

*/
.prev-2b {
    left: 10px;
}

.next-2b {
    right: 10px;
}



/* 3banner輪播的2側按鈕 */
.prev-2b, .next-2b  {
    position: absolute;
    top: 50%; /* Align vertically at the center of the slide */
    transform: translateY(-50%);
    cursor: pointer;
    padding: 10px;
    color: white;
    background-color: rgba(0,0,0,0.5);
    border: none;
    /* z-index: 100; /* Ensure they are above the images */
}





.dots-container-2b {
    text-align: center;
    padding: 10px 0;
}

.dot-2b {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot-2b.active {
    background-color: #717171;
}



















/* small-banners-container3 的樣式 -3banner輪播樣式*/
.small-banners-container3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* 根據需求調整寬度 */
    margin: 0 auto;
    flex-direction: column;
    position: relative;
    /* 保留原有的其他屬性 */
}

/* 調整輪播中的圖片樣式 */
.slide-3b img {
    width: 100%;
    height: auto;
    max-width: 100%; /* 確保圖片不會超過其容器的寬度 */
    object-fit: contain; /* 確保圖片完全可見且不失真 */
    /* display: block;*/
    /* 保留原有的其他屬性 */
}

/* 用於手機消失 */
.slide-3b-1 img {
    width: 100%;
    height: auto;
    max-width: 100%; /* 確保圖片不會超過其容器的寬度 */
    object-fit: contain; /* 確保圖片完全可見且不失真 */
    /* display: block;*/
    /* 保留原有的其他屬性 */
}


.small-banners-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


/* 對每組輪播內部元素進行調整 */
.slides-container-3b {
    display: flex;
    justify-content: space-between;
    width: 100%;
    transition: transform 0.5s ease;
    /* 保留原有的其他屬性 */
}
.slide-3b {
    min-width: 100%;
    transition: opacity 0.5s ease;
    position: relative;
}

/* .prev-3b, .next-3b {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 10px;
    z-index: 100;
}

*/
.prev-3b {
    left: 10px;
}

.next-3b {
    right: 10px;
}



/* 3banner輪播的2側按鈕 */
.prev-3b, .next-3b  {
    position: absolute;
    top: 50%; /* Align vertically at the center of the slide */
    transform: translateY(-50%);
    cursor: pointer;
    padding: 10px;
    color: white;
    background-color: rgba(0,0,0,0.5);
    border: none;
    /* z-index: 100; /* Ensure they are above the images */
}





.dots-container-3b {
    text-align: center;
    padding: 10px 0;
}

.dot-3b {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot-3b.active {
    background-color: #717171;
}


/* 登入成功提示畫面 */

.success {
    text-align: center;
    background-color: #ffffff;
    /* border-left: 5px solid #34a853;*/
    padding: 100px;
    position: fixed; /* Fixed position relative to the viewport */
    top: 50%; /* Position at the top 50% of the viewport */
    left: 50%; /* Position at the left 50% of the viewport */
    transform: translate(-50%, -50%); /* Shift the element back by half its own width and height */
    width: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds shadow for better visibility */
    z-index: 1000; /* Ensures it's above other elements */
}

.success i {
    color:#C9F8F7;
    font-size: 48px; /* Adjust size as needed */
    margin-bottom: 10px;
}

.success h2 {
    color: #333;
    font-weight: bold;
}

.success p {
    color: #666;
}





/* 登入失敗提示畫面 */

.error {
    text-align: center;
    background-color:  #ffffff;
    /* border-left: 5px solid #d93025;*/
    padding: 100px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
}

.error i {
    color: #F4C1D1;
    font-size: 48px;
    margin-bottom: 10px;
}

.error h2 {
    color: #333;
    font-weight: bold;
}

.error p {
    color: #666;
}


/* 會員瀏覽 */



.member-browsing {
    display: flex;
    justify-content: center; /* 中心對齊內容 */
    align-items: flex-start; /* 頂部對齊內容 */
}

.carousel-container {
    flex: 1;
    position: relative;
   
}

.carousel-slide {
    display: none;
    /* Add styles for your images */
}

.carousel-slide.active {
    display: block;
}

.carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.dot {
    padding: 5px;
    margin-right: 5px;
    cursor: pointer;
    border-radius: 50%;
    background: #bbb;
}

.dot.active {
    background: #717171;
}

.word-section {
     flex: 1; /* 與輪播容器等寬 */
    padding-left: 20px; /* 與輪播圖片有間距 */
}

.btn {
    /* Add styles for your buttons */
}

.btn.heart {
    /* Specific styles for '加入心動' button */
}

.btn.date {
    /* Specific styles for '我想約你' button */
}


.btn.heart, .btn.date {
    margin-top: 10px; /* 按鈕與文字區域有間距 */
    display: block; /* 使按鈕占滿整行 */
}



/* 從1.css代碼整合到2.css代碼，並避免衝突的樣式 */

/* 針對會員瀏覽功能的容器樣式，加前綴避免衝突 */
.browsing-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    padding-left: 15%; /* 左內距 10% */
    padding-bottom: 10%; /* 下內距 5% */
    align-items: start; /* 若需要垂直對齊，可調整此處 */
    gap: 30px; /* 根據需要調整間隙 */
height: 70vh;

}

.browsing-carousel-container {
    width: 50%;
    background-color: #ddd; /* 輪播圖片區塊背景色 */
    padding: 20px;
    margin-right: 20px;
    text-align: center;

}

.browsing-info-container {
    background-color: #FDF6C0; /* 文字區塊背景色馬卡龍淡黃 */
    padding: 20px;
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 陰影 */
    color: #333; /* 文字颜色 */
    width: 90%;
    font-size: 1.2em;
    line-height: 2;
    height: 63vh;  /* 黃底高度 */
}

.browsing-button-container {
    display: flex;
    justify-content: space-around; /* 使按鈕分散開來 */
    padding: 10px;
    background-color: #ffffff; /* 按鈕容器背景色 */
    /*width: 85%;註解掉因已在2024改新增於rwd.css中*/
    
}

.browsing-button {
    padding: 10px 20px;
    background-color: #F4C1D1; /* 按鈕背景色 */
    text-decoration: none;
    color: black;
    border: none;
    cursor: pointer;
    border-radius: 5px; /* 圓角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 陰影 */
    text-decoration: none;
    font-size: 1.2em;
    transition: transform 0.3s ease; /* 平滑過渡效果 */
}

/* 滑鼠懸浮時的放大效果 */
.browsing-button:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 滑鼠滑過時增加陰影 */
    transform: scale(1.05); /* 放大至 110% 的大小 */
    background-color: #C9F8F7; /* 滑鼠滑過去時的背景顏色 */
}

.browsing-button-link {
    text-decoration: none; /* 移除超連結的底線 */
    color: inherit; /* 保持文字顏色不變 */
    display: inline-block; /* 或者使用 block，取決於布局需求 */
}


.browsing-carousel-indicators {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.browsing-dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}

/* 保持2.css的原有樣式不變 */





/* 會員瀏覽的會員照片 */

.carousel-slide {
    background-size: cover; /* Cover ensures the image covers the slide */
    background-position: center; /* Center the background image */
    width: 100%; /* Adjust width as needed */
    height: 650px; /* Adjust height as needed */
    border-radius: 10px; /* 圆角 */
    
}



/* 普通 dot 的樣式 */
.browsing-dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
}

/* 激活狀態的 dot 樣式 */
.browsing-dot.active {
    background-color: #717171; /* 激活狀態的 dot 的背景色 */
}

.carousel-container, .info-section {
    flex: 1; /* 讓兩個區塊平分可用空間，或根據需要調整 */
    
}




/* 約會記錄表格基本樣式 */
.stylish-table {
    width: 80%;
    border-collapse: separate; /* 改为separate以支持圆角 */
    border-spacing: 0; /* 移除单元格之间的间距 */
    margin: 0 auto; /* 上下邊距為 0，左右自動（auto），表格居中 */
    font-size: 0.9em;
    background-color: #fff; /* 背景颜色 */
    font-family: sans-serif;
    text-align: center; /* 對齊方式 */
    min-width: 400px;
    color: #333; /* 文本颜色 */
    border-radius: 10px; /* 添加圆角 */
    overflow: hidden; /* 隐藏溢出的子元素，确保圆角效果 */
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

.stylish-table .points {
    text-align: right; /* 文本右對齊 */
}

.stylish-table .th {
    text-align: center; /* 文本置中 */
   
}


.stylish-table thead tr {
    background-color: #FDF6C0;/* #F4C1D1馬卡龍粉 */
    color: #000000;
    text-align: left;
    border-bottom: solid 2px #ddd; /* 可选：为表头和表体之间添加分隔线 */
}

.stylish-table th,
.stylish-table td {
    padding: 12px 15px;
    text-align: center; /* 對齊方式 */
}

.stylish-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

/* 隔行变色效果 */
/*.stylish-table tbody tr:nth-of-type(even) {
    background-color: #FDF6C0;/* #FDF6C0馬卡龍黃 */
}*/

/* 鼠标悬停行变色效果 */
.stylish-table tbody tr:hover {
    background-color: #f1f1f1;
}

/* 表格头部样式 */
.stylish-table thead th {
    font-weight: bold;
}

/*
.stylish-table tbody tr:nth-child(odd) {
    background-color: #C9F8F7; /* #c9f8f7馬卡龍藍为奇数行設置背景色 */
}*/

/* 會員搜尋 */


.search-section {
    font-family: Arial, sans-serif;
    background-color: #fff;
    padding: 20px;
    margin: 20px auto;
    width: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    text-align: center;
}

.search-section h2 {
    color: #333;
    margin-bottom: 20px;
}

.search-section input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.search-buttons button {
    padding: 10px 20px;
    margin: 0 10px;
    background-color: #F4C1D1;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 5px;
}

.search-buttons button:hover {
    background-color: #C9F8F7;
}

/* 添加一個過渡效果 */
.search-buttons button:not(:last-child) {
    margin-right: 15px;
}





/* 活動和課程 */
.activities-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px auto; /* 中心對齊並設定上下邊距 */
    flex-wrap: wrap;
}

.activities-container .activity-block {
    display: flex;
    flex-direction: column;
    align-items: center; /* 子項目在交叉軸的中心對齊 */
    width: calc(33.333% - 20px); /* 減去間隔 */
    margin: 5px;
    text-decoration: none;
    color: #333;
    transition: transform 0.3s ease;
}

.activities-container .activity-block:hover {
    transform: translateY(-5px); /* 滑鼠懸停時輕微上移 */
}

.activities-container .activity-content h2 {
    width: 90%;
    text-align: center; /* 標題文字置中 */
    position: relative;
    top: 10px; /* 標題上移以覆蓋圖片部分區域 */
    background-color: rgba(255, 255, 255, 0.8); /* 半透明背景增加可讀性 */
    margin: 5px 0;
    padding: 3px 0; /* 添加上下內距 */
}

.activities-container .activity-content img {
    width: 90%; /* 輕微縮小圖片以顯示邊距 */
    margin: 10px 20px; /* 與上方文字保持間距 */
    border-radius: 10px;
}

/*備份
.activities-container .activity-content img {
    width: 90%; /* 輕微縮小圖片以顯示邊距 */
    margin-top: 20px; /* 與上方文字保持間距 */
    border-radius: 10px;
}
*/
.activities-container .activity-info {
    display: flex;
    justify-content: center; /* 內容居中顯示 */
    padding: 10px 0;
    width: 90%; /* 資訊區塊寬度 */
}

.activities-container .activity-info span {
    margin: 0 100px; /* 增加左右間距 */
}

.reserve-btn {
    display: block; /* 確保按鈕是塊級元素 */
    margin-top: 12px; /* 上邊距 */
    /* margin-bottom: 12px; 下邊距 */
    margin-left: 35%; /* 想要的左邊距 */
    padding: 10px 20px;
    background-color: #F4C1D1;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 5px;
    width: 30%; /* 或者任何指定的寬度 */
}

.reserve-btn:hover {
    background-color: #C9F8F7;
}







/* 課程詳情 */

.date-event-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70%; /* 或根據您的設計調整 */
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
    text-align: center;
}

.date-event-container h2, .date-event-container p {
    margin: 10px 0;
}

.date-event-container img {
    width: 50%; /* 根據需要調整 */
    border-radius: 10px;
    margin: 20px 0;
}

.date-event-reserve-btn {
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #F4C1D1;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 5px;
    width: 20%; /* 調整按鈕寬度 */
}



.date-event-reserve-btn:hover {
    background-color: #C9F8F7;
}



/* 會員檔案 */

.member-profile {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 20px auto;
    width: 50%;
}

.upload-photos {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.photo-upload {
    width: 60px;
    height: 60px;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    font-size: 24px;
    border-radius: 5px;
    cursor: pointer;
}

.profile-buttons button {
    padding: 10px 20px;
    margin: 10px;
    background-color: #F4C1D1;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 5px;
}

.profile-buttons {
    display: flex;
    justify-content: center;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    margin: 20px 0;
}


.member-profile p, .member-profile h2 {
    text-align: center;
    margin: 10px 0;
}

/* 提高可讀性，對於那些非標題的段落添加額外的邊距 */
.member-profile p:not(:first-of-type) {
    margin: 5px 20px;
}


.member-profile {
    display: flex;
    flex-direction: column;
    width: 20%;
}

.member-profile .text-container {
    width: 80%; /* 或根據你的設計需求調整 */
    text-align: left;
    margin: 5px 0;
    padding-left: 20%; /* 根據需要調整，以確保文字開頭對齊 */
}

/* 對於標題和段落的特定樣式 */
.member-profile h2, .member-profile p {
    margin: 10px 0;
}


.profile-info {
    display: grid;
    gap: 10px; /* 根據需要調整間隙 */
    width: 80%; /* 或根據你的設計需求調整 */
    margin: 0 auto; /* 居中顯示 */
}

.profile-info div {
    text-align: left; /* 確保文字左對齊 */
}





/* 聯絡我們容器樣式 */
.contact-us-container {
    display: flex;
    justify-content: center; /* 確保內容居中 */
    padding: 20px;
    background-color: #ffffff; 
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    gap: 10px; /* 根據需要調整間隙大小，但設置一個小的間隔 */
}

/* 註冊頁容器頁式*/
.ok-us-container {
    /* display: flex;*/
    justify-content: center; /* 確保內容居中 */
    padding: 20px 250px; /* 註冊頁欄位寬縮小 */
    background-color: #ffffff; 
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    gap: 10px; /* 根據需要調整間隙大小，但設置一個小的間隔 */
}


.contact-image img {
    width: auto; /* 保持圖片原始寬度 */
    max-width: 25%; /* 限制圖片最大寬度 */
    border-radius: 10px;/* 圖片圓角 */
}

.contact-form {
    flex-grow: 1; /* 表單佔據剩餘空間 */
    padding: 0 20px; /* 在表單內側添加一些間距，使內容不會太壓縮 */
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input[type="text"],
.form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.gender {
    display: flex; /* 保持橫向排列 */
    align-items: center;
}

.contact-age {
  display: flex; /* 設定為flex布局 */
  flex-direction: row; /* 子元素橫向排列 */
  margin-right: 30px
}


.gender label {
    margin-right: 10px; /* 為男女選項添加間距 */
    display: flex; /* 保持橫向排列 */
}

.gender span {
    padding-left: 10px; /* 為年齡添加一些間距 */
}

.submit-btn {
    padding: 10px 20px;
    background-color: #F4C1D1;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 5px;
    margin-top: 10px; /* 為提交按鈕添加一些上邊距 */
}



.submit-btn:hover {
    background-color: #C9F8F7;
}


/* footer */
.site-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9; /* 背景色 */
    padding: 20px;
    
}

.footer-logo img {
    width: 220px; /* 根據需要調整 */
    margin-right: 80px; /* 與信息部分的間隔 */
}

.footer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-info p {
    margin: 5px 0; /* 每行信息間的間隔 */
}


/* footer與個人資料緊密處理 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
}

/* Layout adjustments */
.member-login {
    padding-bottom: 0; /* Reduce padding to decrease space to the footer */
}



/* Adjust the flex properties to ensure elements are closer */
.contact-image, .contact-form {
    flex: 1;
}

.contact-image img {
    max-width: 75%; /* Ensure image uses available space efficiently */
    height: auto;
}

/* Ensure the footer directly follows the content without additional space */
.site-footer {
    margin-top: 20px; /* Adjust as needed to ensure no gap with the content above */
    width: 100%;
    background-color: #ffffff;
    padding: 20px 0; /* Adjust padding to reduce space */
    /* box-shadow: 0 -2px 4px rgba(0,0,0,0.1); Removed shadow */
    display: flex;
    justify-content: space-around; /* Adjust based on content */
    align-items: center;
}

.footer-logo img {
    width: 188px; /* Adjust for consistency */
}

/* 定位頁角logo */
.footer-logo {
    display: flex;
    justify-content: center; /* 使圖片水平居中 */
    width: 50%; /* 確保容器寬度為100% */
    padding-left: 30%; /* 僅在容器左側設置30%的padding */
}



.footer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0px; /* Add some spacing between logo and text */
}

.footer-info p {
    margin: 3px 0; /* 高度 */
}










/* 會員翻牌 */

.cards {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
}

.card {
    perspective: 1000px;
    width: 20%;
    height: 70vh;/* 這電腦版每3組卡牌不疊加 */
}

.card-inner {
    transition: transform 0.8s;
    transform-style: preserve-3d;
    position: relative;
}

/* 
.card:hover .card-inner {
    transform: rotateY(180deg);
}
*/

.card-inner.is-flipped {
    transform: rotateY(180deg);
}


.card-front, .card-back {
    backface-visibility: hidden;
    position: absolute;
    width: 100%;
    text-align: center;
}

.card-front {
    z-index: 2;
    transform: rotateY(0deg);
}

.card-back {
    transform: rotateY(180deg);
}

.card p {
    margin: 10px 0;
}

.card img {
    width: 100%;
    height: auto;
}



/* 註冊頁飲食狀況複選樣式 */
.diet-habits {
    display: flex;
    flex-wrap: wrap; /* 允許選項在必要時換行 */
    align-items: center; /* 垂直居中對齊 */
}

.diet-option,
.diet-other-option {
    display: flex;
    align-items: center; /* 垂直居中對齊 */
    margin-right: 30px; /* 右邊距，保持選項間距 */
}
/* 充滿熱情選項居中對齊 */
.fdiet-option,
.fdiet-other-option
 {
    display: flex;
    align-items: center; /* 垂直居中對齊 */
    margin-right: 15px; /* 右邊距，保持選項間距 */
}

.diet-option label,
.diet-other-option label {
    margin-left: 5px; /* 為了在複選框和文字之間提供一點間距 */
    display: flex; /* 讓label內的內容也能使用flex布局 */
    flex-wrap: nowrap; /* 防止內容換行 */
    justify-content: space-between; /* 在"素"和"食"之間增加一些間距 */
    width: 50px; /* 根據實際需要調整 */

}




/* 新增的CSS類別 */
.diet-label {
    color: #666; /* 淡灰色 */
    margin-right: 10px; /* 與後面選項的間距 */
}

.diet-other-option input[type="text"] {
    margin-left: 5px; /* 為了在“其它”標籤和輸入框之間提供間距 */
}


.cokiyo{
display: flex;
    justify-content: center;
	padding:0px 0px 20px 0px;

}







/* 地點、點數置中 */



 /* .activities-container .activity-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    } */

  /*   .activities-container .activity-info span {
        margin: 0; /* 移除左右外边距，以便在小屏幕上居中显示 */
    } */

    .reserve-btn {
        width: auto; /* 如果按钮宽度是固定的，改为auto以适应内容 */
        margin-top: 12px;
    }

 .activities-container .activity-info {
        display: flex;
        justify-content: center; /* 使子元素在主轴上居中对齐 */
        flex-wrap: wrap; /* 允许子元素在必要时换行 */
    }

    .activities-container .activity-info span {
        margin: 0 10px; /* 调整为适当的间距，确保在小屏幕上也能良好显示 */
    }

    /* 可选：如果希望在非常窄的屏幕上仍然强制它们在同一行显示，可以设置最小宽度 */
    .activities-container .activity-info {
        min-width: 0; /* 根据需要调整 */
    }




/* 外型 */
/* 關於你的外型選項橫向排列 */
.diet-habits {
    display: flex;
    flex-wrap: wrap; /* 允許選項換行 */
    justify-content: start; /* 選項從行首開始排列 */
    gap: 10px; /* 選項之間的間距 */
 min-width: 50px; /* 調整為合適的最小寬度 */
}

.diet-option,
.diet-other-option {
    display: flex;
    align-items: center; /* 確保選項與旁邊的文字垂直居中對齊 */
}