#about{
    /* position: relative; */
    /* background-color: rgba(47, 75, 59, 0.2); */
    /* color: white; */
    margin:40px 20px;
    width: auto;
    border-radius: 12px;
    border: 1px solid #2E4A3A;
    padding-bottom: 50px;
}
#about .textWrap{
    max-width: 450px;
    margin: auto;
    /* border: 1px solid blue; */
}
#about h1{
    font-size: clamp(22px, 5vw, 36px);;
}
#about h3{
    margin-top: 12px;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
    font-size: clamp(12px, 3.2vw, 18px);
    /* background-color: #2E4A3A; */
    /* color: white; */
    border-radius: 30px;
    padding: 3px 10px;
}
#about p{
    /* text-align: left; */
    margin: 5px;
    padding: 0;
    font-size:clamp(12px, 3.6vw, 18px);
    /* line-height: 1.7em; */
    /* display: inline-block; */
}

#services h2{
    margin: 0;
}

#services>h3{
    font-size: 1.4em;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
    padding: 5px;
    line-height: 1.8;
}

#services>h3 span{
    background-color: #4A6B58;
    color: white;
    font-size: 0.9em;
    letter-spacing: 0.1em;
    border-radius: 20px;
    padding: 1px 15px;
    text-wrap: nowrap;
    white-space: nowrap;
    display: inline-block;
    margin: 2px;
}

#services ul{
    list-style: none;
    padding: 0;
    margin: 60px 0 0 0;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}   

#services ul li{
    width: 100%;
    margin: 0px 10px 20px 10px;
    /* border: 1px solid red; */
    text-align: center;
}   

#services>ul>li>a{
    text-decoration: none;
    display: block;
}

#services ul li h3{
    font-weight: 800;
    font-size: 1.4em;
    color: #4A6B58;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
}

#services ul li p{
    font-weight: 400;
    letter-spacing: 0.1em;
    color: #4A6B58;
    line-height: 1.6em;
    margin: auto;
    text-align: center;
}   

#services ul li .imgWrap{
    width: 100%;
    overflow: hidden;
    margin: 15px auto;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    position: relative;
}
#services ul li .imgWrap img{
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
    display: block;
}
#services .imgWrap p{
    font-size: 1.4em;
    position: absolute;
    left:50%;
    bottom: 15px;
    color: white;
    transform: translateX(-50%);
}
#services .imgWrap p a{
    text-decoration: none;
    vertical-align: middle;
    display: inline-block;
    width: 45px;
    height: 45px;
    background-size: cover;
    border-radius: 8px;
    margin: 0 5px;
}
#services .imgWrap p a:nth-of-type(1){
    background-image: url('../img/iconLine.jpg');
}
#services .imgWrap p a:nth-of-type(2){
    background-image: url('../img/iconIG.jpg');
}



.hero-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;   /* 👈 換比例就改這裡，例如 4 / 3、3 / 2、21 / 9 */
  overflow: hidden;
  background: #000;
}

/* 三張圖都疊在同一個區塊上 */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fade 9s infinite;
  transition: opacity .8s ease;
}

/* 圖片網址換這裡 */
#slideBox1 .slide1 {
    background-image: url('../imgCase/thum/buffet01.jpg');
    animation-delay: 0s;
}
#slideBox1 .slide2 {
    background-image: url('../imgCase/buffet02.jpg');
    animation-delay: 3s;
}
#slideBox1 .slide3 {
    background-image: url('../imgCase/thum/buffet03.jpg');
    animation-delay: 6s;
}
#slideBox2 .slide1 {
    background-image: url('../imgCase/thum/afternoontea01.jpg');
    animation-delay: 0s;
}
#slideBox2 .slide2 {
    background-image: url('../imgCase/thum/afternoontea02.jpg');
    animation-delay: 3s;
}
#slideBox2 .slide3 {
    background-image: url('../imgCase/thum/afternoontea03.jpg');
    animation-delay: 6s;
}
#slideBox3 .slide1 {
    background-image: url('../imgCase/thum/ballon01.jpg');
    animation-delay: 0s;
}
#slideBox3 .slide2 {
    background-image: url('../imgCase/thum/ballon05.jpg');
    animation-delay: 3s;
}
#slideBox3 .slide3 {
    background-image: url('../imgCase/thum/ballon07.jpg');
    animation-delay: 6s;
}
#slideBox4 .slide1 {
    background-image: url('../imgCase/thum/show01.jpg');
    animation-delay: 0s;
}
#slideBox4 .slide2 {
    background-image: url('../imgCase/thum/show04.jpg');
    animation-delay: 3s;
}
#slideBox4 .slide3 {
    background-image: url('../imgCase/thum/show03.jpg');
    animation-delay: 6s;
}

/* 淡入淡出動畫 */
@keyframes fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  33%  { opacity: 1; }
  80%  { opacity: 0; }
  100% { opacity: 0; }
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content:space-around;
  align-items: center;   /* 想置中就改成 center */
  gap: 0rem;
  /* padding: 2.5rem 4vw; */
  color: #fff;
  z-index: 10;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}


.hero-btn {
  display: block;
  width: 50%;
  margin-top: 5rem;
  padding: .6rem 1.4rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: .2s ease;
  font-size:clamp(12px, 3.6vw, 24px);
  letter-spacing: 0.2em;
}
.hero-btn:hover {
  background: rgba(255,255,255,.32);
}







.feedbackItem{
    /* border: 1px solid red; */
    max-width: 550px;
    margin: auto;
    margin-bottom: 50px;
}
.feedbackItem blockquote{
    background-color: #4A6B58;
    /* background-color: #ff9a41; */
    color: white;
    font-size: 1.1em;
    letter-spacing: 0.2em;
    padding:35px 50px;
    border-radius: 12px;
    margin: 0 20px;
    position: relative;
}
.feedbackItem:nth-of-type(even) blockquote{
    background-color: #93b7a2;
}
.feedbackItem blockquote::before,
.feedbackItem blockquote::after{
    /* font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
    display: block;
    color: white;
    font-size: 4em;
    width: 100%;
    /* height: 20px; */
    margin: 0;
    /* border: 1px solid blue; */
    padding: 0;
    position: absolute;
}
.feedbackItem blockquote::before{
    content: "\201c";
    top:-15px;
    left:-10px;
}
.feedbackItem blockquote::after{
    content: "\201d";
    text-align: right;
    bottom:-35px;
    right:-10px;
}
.feedbackItem blockquote span{
    display: block;
    width: 30px;
    height: 30px;
    content: "";
    background-color: #4A6B58;
    /* background-color: red; */
    position: absolute;
    bottom: 0px;
    left: 40px;
    transform: rotate(90deg) skew(50deg);
    z-index: -1;
}
.feedbackItem:nth-of-type(even) blockquote span{
    background-color: #93b7a2;
}
.feedbackItem .customer{
    margin: 20px 0 0px 30px;
    color: #4A6B58;
    font-weight: 500;
    letter-spacing: 0.1em;
    font-size: 1.1em;

}   
.feedbackItem .customer img{
    width: 55px;
    height: 55px;
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 50%;
}