html{
	scroll-behavior: smooth;
}

body {
	font-family: 'Lato', sans-serif;
}

.layout_padding {
	padding: 40px 0 0 0;
}

/*header section*/

.header_section {
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	position: sticky;           /* 關鍵：固定在頂部 */
    top: 0;
    z-index: 999;               /* 確保在最上層 */
    width: 100%;
    background-color: #060606;  /* 背景顏色，防止透明時看不清 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 增加陰影，更有立體感 */
    transition: all 0.3s ease;

}

.header_img {
	/*background: url("../images/coming_soon.jpg");*/
	background-color: #060606;
	background-size: cover;
	min-height: 10vh;
	position: relative;
}

/* ==================== Navbar ==================== */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 12px 0;
    width: 100%;
}

.nav {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-link {
    color: #fff;
    text-transform: uppercase;
    padding: 8px 15px;
}

.nav-link:hover {
    color: #f6bb08;        /* 你原本是 #fefefe，我建議改成咖啡色調更協調 */
}

/* ==================== Mobile Menu (手機版) ==================== */
@media (max-width: 991px) {
    .nav {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #060606;
        padding: 20px 0;
        box-shadow: 0 5px 15px rgba(0,0,0,0.4);
        z-index: 1000;
    }
    
    .nav.show {
        display: flex;
    }
    
    .nav .nav-item {
        width: 100%;
        text-align: center;
    }
    
    .nav-link {
        padding: 12px 0;
        display: block;
    }
    
    /* Hamburger Button */
    .navbar-toggler {
    margin-left: auto;        /* 強制靠右 */
    padding: 5px 10px;
    font-size: 28px;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
}
}

/* 大於991px（電腦版）隱藏 Hamburger */
@media (min-width: 992px) {
    .navbar-toggler {
        display: none;
    }
}

.logo_box a,
.logo_box a:hover {
	display: flex;
	align-items: flex-end;
	font-weight: bold;
	color: #fff;
	text-transform: uppercase;
}

.logo_box img {
	width: 45px;
	margin-right: 7px;
}



.header_detail h1,
.header_detail h2 {
	font-weight: 700;
}

.header_detail h1 {
	font-size: 80px;
}

.call_to_btn {
	display: inline-block;
	color: #fefefe;
	padding: 10px 35px;
	background-color: #f6bb08;
	margin-top: 5%;
	margin-bottom: 20%;
	border-radius: 0;
}

/* cofee form style */
.cofee_form .form_container {
	width: 90%;
	min-width: 320px;
	margin-left: auto;
	padding: 40px;
	background-color: rgba(240, 236, 233, 1)
}

.cofee_form .form-group .form-control,
.cofee_form .form-group .form-control:focus {
	border-radius: 0;
	outline: none;
	box-shadow: none;
	border: none;
	padding: 11px 10px;
	height: auto;
}

.cofee_form .call_to_btn {
	padding: 12px 50px;
	margin-bottom: 0;
}


/* cofee form style */



/*end header section*/


/*story section*/

.story-detail h2 {
	font-weight: 700;
	text-align: center;
}

.story-detail h2::after {
	content: "";
	display: block;
	width: 145px;
	margin: 0 auto;
	height: 1px;
	background-color: #8f3d03;
}

.story_btn-container {
	display: flex;
	justify-content: center;
}



.story-detail p {
	text-align: center;
	margin: 8% auto;

}

.story_btn {
	display: inline-block;
	color: #fefefe;
	padding: 10px 35px;
	background-color: #f6bb08;
	margin: 0 auto;
	border-radius: 0;
}


.story_img-box {
	display: flex;
	margin: 0 auto;
}

.story_img-box img {
	width: 85%;
}

/*end story section*/


/*shop section*/
.shop_section {
	background-image: url(../images/coffee-shop.jpg);
	background-size: cover;
	color: #fff;
}

.shop_detail {
	width: 80%;
	margin: 0 auto;
	padding: 10% 5%;
	border-radius: 20px;
	border: 1px solid #fefefe;
}

.shop_detail h3 {
	font-weight: 700;
}

.shop_detail p {
	width: 55%;
	margin: 3% 0;
}


.shop_btn {
	display: inline-block;
	color: #fefefe;
	padding: 10px 35px;
	background-color: #f6bb08;
	border-radius: 0;
}


/*end shop section*/


/*our-coffee section*/
.ourcoffee_section {
	padding-left: 10%;
	padding-right: 10%;

}

.ourcoffee_section h3 {
	font-weight: 700;
	margin-bottom: 40px;
	text-align: center;
}

.ourcoffee_section h3::after {
	content: "";
	display: block;
	width: 145px;
	margin: 0 auto;
	height: 1px;
	background-color: #8f3d03;
}


.ourcoffee_img-box img {
	width: 100%;
}



.ourcoffee_detail p {
	text-align: center;
	margin-top: 10%;
}



.carousel-wrap {
	margin: 0 auto;
	padding: 0 5%;
	width: 80%;
	position: relative;
}


.owl-nav>div {
	margin-top: -26px;
	position: absolute;
	top: 50%;
	color: #cdcbcd;
}

.owl-nav .owl-prev {
	background-image: url(../images/left-arrow.png);
	left: -10%;
	width: 50px;
	height: 50px;
	background-color: #f6bb08;
	background-size: cover;
}

.owl-nav .owl-next {
	right: -10%;
	background-image: url(../images/right-arrow.png);
	width: 50px;
	height: 50px;
	background-color: #f6bb08;
	background-size: cover;
}

/*end our-coffee section*/


/*testimonial section*/
.testimonial_section {
	background-image: url(../images/testimonial-bg.jpg);
	background-size: cover;
}

.testimonial_container {
	width: 400px;
}

.testimonial_container h3 {
	color: #fff;
	font-weight: 700;
	margin-bottom: 15%;
	text-align: center;
}

.testimonial_container h3::after {
	content: "";
	display: block;
	width: 148px;
	margin: 2px auto;
	height: 1px;
	background-color: #fefefe;
}

.testimonial_detail {
	background-color: rgba(254, 254, 254, .88);
	padding: 10% 8%;
	border-radius: 20px;
}

.testimonial_detail h6 {
	font-weight: 700;
	text-align: center;
}

.testimonial_detail h6::after {
	content: "";
	display: block;
	width: 90px;
	margin: 2px auto;
	height: 1px;
	background-color: #121214;
}

.testimonial_detail p {
	color: #201f1f;
}

.quote_img-container {
	width: 50px;
	margin: 0 auto;
	margin-top: 7%;
}

.quote_img-container img {
	width: 100%;
}



/*end testimonial section*/


/*download section*/
.download-section {
	background-color: #121212;
	padding: 4% 0;
}


.download-detail h3 {
	font-weight: 700;
	text-align: center;
	color: #e2e2e3;
}

.download_btn-container {
	display: flex;
	justify-content: center;

}

.download_btn {
	display: inline-block;
	color: #fefefe;
	padding: 10px 35px;
	background-color: #f6bb08;
	margin: 35px auto 0;
	border-radius: 0;
}


/*end download section*/



/* footer section*/

.footer_section {
    background-color: #1e1e1e;
    color: #ddd;
    padding: 35px 0 25px;
    font-size: 0.95rem;
}

.footer_section p {
	margin: 0;
	text-align: center;
}
.footer_section p  a{
	color: inherit;
	text-decoration: none;
}

.footer_social a {
    color: #ddd;
    font-size: 1.35rem;
    transition: all 0.3s;
}

.footer_social a:hover {
    color: #f6bb08;
    transform: translateY(-2px);
}
/* end footer section*/