body {
  line-height: 1;
  width: 100%; 
  background-color: #327EA5;
  /*background-image: linear-gradient(120deg, #dfe6d1 0%, #bdff97 100%);*/
  font-family: "Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: -webkit-fill-available;
  min-height: 100vh;
  text-size-adjust: 100%;
  color:#0097A4;
}

html {
  min-height: -webkit-fill-available;
}

.container-fluid{
  /*text-align: center;*/
}
.main_content {
	position: relative;
}

.main_layout{
  Position:relative;
  min-height: 100vh;
  background-image: url("../images/background.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.main_whatsapp{
  Position:relative;
  //background-image: url("../images/index_content.png");
  background-position: top;
  background-repeat: no-repeat;
  background-size:100%;
}

 /* Header*/ 
.header {
    Position:relative;
    text-align: center;
}

.header .bannerImage {
    width: 100%;
    margin: 0px 0px 0px 0px;
	margin-bottom: -5px;
}
  
.header .titleImage {
    width: 50%;
    margin: 0px 0px 0px 0px;
    padding-top:0px;
}


/* Content */

.content {
    Position:relative;
    text-align: center;
    padding-top: 0px;
}

.content .form-group{
  padding-bottom: 20px;
}

.content .form-control {
  border: 1px solid #158405;
}

.content .card {
  background-color: #ebfbe1 !important;
  border-radius: 1rem;
  border: 2px solid rgb(159, 208, 152);
  overflow: hidden !important;
}

.content .card .card-body{
  overflow-y: scroll !important;

}
.navbackground {
	width: 100%; bottom: 0px; overflow: hidden; position: fixed;
}
.footer {
	width: 100%; text-align: left; bottom: 17px; color: rgb(255, 255, 255); overflow: hidden; font-size: 6.5px; font-weight: 100; position: fixed;
}
.footerimg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  //z-index: 999; /* Ensure the footer image is above other content */
}
#floatingButton {
	position: fixed;
	right: 5px;
	bottom: 40px;
	z-index: 9999;
}

/* Button */
.buttonfield {
    Position:relative;
    text-align: center;
}

/* Progressbar */
.progress-container {
	display: flex;
	justify-content: space-between;
	margin: 20px auto;
	max-width: 800px;
	position: relative;
}

.progress-container::before {
	content: '';
	position: absolute;
	top: 15px;
	left: 10%;
	width: 78%;
	height: 3px;
	background: #ccc;
	z-index: -1;
}

.step {
	text-align: center;
	position: relative;
	flex: 1;
}

.step .circle {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #ccc;
	margin: 0 auto 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: bold;
}

.step.completed .circle {
	background: green;
	box-shadow: 0 0 6px rgba(0,0,0,0.3); /* optional glow effect */
}

.step.active .circle {
	background: orange;
	border: 2px solid DarkOrange;   /* black border around active circle */
	box-shadow: 0 0 6px rgba(0,0,0,0.3); /* optional glow effect */
}

.step.pending .circle {
	background: gray;
	box-shadow: 0 0 6px rgba(0,0,0,0.3); /* optional glow effect */
}

.step-label {
	font-size: 14px;
	margin-top: 5px;
}

@media only screen and (min-width: 550px) {
	.container-fluid {
		max-width: 550px;
		margin: 0 auto;
	}
	/*
	 * 主表單欄 max-width 550px 置中時，底欄若仍 width:100% 會橫跨全視窗，
	 * 寬螢幕看起來像「底圖／社群圖走位」。改為與主內容同寬並一併置中。
	 */
	.navbackground,
	.footer {
		max-width: 550px;
		width: 100%;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		box-sizing: border-box;
	}
	#floatingButton {
		right: max(5px, calc(50vw - 275px + 5px));
	}
}

/* Default: mobile-first (100% width) */
.responsive-img {
  width: 100%;
  height: auto; /* keep aspect ratio */
  max-width: 100%;
}

/* For screens wider than 700px */
@media (min-width: 700px) {
  .responsive-img {
	width: 500px;
  }
}