*{
	box-sizing:border-box;
}
html{
	font-size:16px;
}
body{
	margin:0;
}

#main_container{
	width:100%;
	height:auto;
}
/*------------------header----------------*/
.hero_image{
	width:100%;
	height:auto;
	max-height:90vh;
	display:block;
	object-fit:contain;
}
#header {
    position: relative;
	width:100%;
	background-color:#a3cca6;
}
#header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.25);
    z-index: 1;
}

.nav_bar {
    position: absolute;
    top: 2rem;
    width: 100%;
    z-index: 2;
	padding:0 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
	gap:5rem;
}

#nav_bar_list {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    gap: 2rem;
    align-items: center;
}
#nav_bar_list li {
    font-family: chonburi;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.05rem;
}

.logo img {
    height: 6rem;
    width: auto;
}

.mobile_nav {
    display: none;
}

li.youarehere{
	color:#d29388;
	text-decoration:none;
}
#nav_bar_list a:link{
	color:#ecefdf;
	text-decoration:none;
}
#nav_bar_list a:visited{
	color:#ecefdf;
	text-decoration:none;
}
#nav_bar_list a:hover{
	color:#d29388;
	text-decoration:none;
}
#nav_bar_list a:active{
	color:#d29388;
	text-decoration:none;
}

.dropdown {
	position:relative;
	display:inline-block;
}
.dropdown-content {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	list-style: none;
	z-index: 5;
	min-width:10rem;
	margin:0;
	padding:0;
}
.dropdown:hover .dropdown-content, 
.dropdown:focus-within .dropdown-content {
	display: block;
}
.dropdown-content li a {
	display: block;
	padding: 0.5rem 1rem;
	text-decoration: none;
	color: #730912;
}
/*--------------------text spec--------------------*/
h1{
	font-family:chonburi;
	font-size:5rem;
	font-weight:bold;
	text-align:center;
	color:#730912;
	padding:0;
	margin:0;
}
h2{
	font-family:chonburi;
	font-size:3rem;
	font-weight:bold;
	text-align:center;
	color:#730912;
	padding:0;
	margin:0;
}
h3{
	font-family:chonburi;
	font-size:2rem;
	font-weight:bold;
	text-align:left;
	color:#730912;
	margin:2rem;
}
h4{
	font-family:chonburi;
	font-size:3rem;
	font-weight:bold;
	text-align:center;
	color:#730912;
	padding:1rem 0 2rem 0;
	margin:0;
	width: 96%;
}
h5{
	font-family:lato;
	font-size:1.25rem;
	color:#730912;
	margin:auto;
	text-align:left;
	padding:0.5rem 0;
}
p{
	font-family:lato;
	font-size:1.25rem;
	color:#730912;
	padding:1rem 0;
	margin:auto;
	width:50vw;
	text-align:center;
	line-height:1.2;
}
/*------------------main section---------------------*/
#home_container{
	background-color:#a3cca6;
	width: 100%;
	height:auto;
	padding:1.5rem 2rem;
	position: relative;
	overflow: hidden;
}
.intro {
	width:35%;
	display:block;
	margin:0 auto;
}
#middle_container{
	background-color:#ecefdf;
	width:100%;
	height:auto;
	padding:4rem;
	display:flex;
	flex-direction: column;
	position:relative;
	overflow: hidden;
}

.flower {
    position: absolute;
    width: 25rem; 
    opacity: 0.6;
    z-index:0;
}

.flower-bottom_left {
    bottom:-1rem;
    left:-1rem;
    z-index:0;
}
.flower-bottom_right {
    bottom:-1rem;
    right:-1rem;
    z-index:0;
}
.flower-top_left {
	top:-1rem;
    left:-1rem;
}
.flower-top_right {
	top:-1rem;
    right:-1rem;
}
.feature {
	position:relative;
	width:35%;
	margin:6rem;
}
.feature_img {
	width:100%;
	height:auto;
	display:block;
}
.feature-left{
	align-self:flex-start;
}
.feature-right{
	align-self:flex-end;
}
#subheading1_container{
	background-color:#d29388;
	width:auto;
	padding:2rem 2rem;
	position:absolute;
	top:50%;
	left:100%;
	transform:translate(-20%, -50%);
	white-space: nowrap;
}
#subheading2_container{
	background-color:#d29388;
	width:auto;
	padding:2rem 2rem;
	position:absolute;
	top:50%;
	left:0%;
	transform:translate(-80%, -50%);
	white-space: nowrap;
}
#subheading1_container:hover {
    background-color: #bf636b;
}

#subheading2_container:hover {
    background-color: #bf636b; 
}
#subheading1_container:active {
    background-color: #bf636b;
}

#subheading2_container:active {
    background-color: #bf636b; 
}
#middle_container a:link{
	color:#730912;
	text-decoration:none;
}
#middle_container a:visited{
	color:#730912;
	text-decoration:none;
}
#middle_container a:hover{
	color:#730912;
	text-decoration:none;
}
#middle_container a:active{
	color:#730912;
	text-decoration:none;
}


/*------------------footer------------------*/
#footer_container{
	background-color:#a3cca6;
	width: 100%;
	height:auto; 
	padding:1rem 2rem;
	display:flex;
	justify-content:space-between;
	align-items:center;
	z-index:1;
	font-family:lato;
	font-size:1.25rem;
	color:#730912;
}
#links_container{
	text-align:left;
}

.social-links {
    display: flex;
    justify-content: left;
    gap: 3rem; 
	align-items:center;
}

.social-link {
    display: flex;
    align-items: left;
    gap: 0.5rem;
    color: #730912;
    text-decoration: none;
	align-items:center;
}

.icon {
    width: 2rem;
    height: 2rem;
}
.footer_logo img {
    height: 5rem;
    width: auto;
}
.social-link:hover {
	color:#d29388;
	text-decoration:none;
}

.social-link:active {
	color:#d29388;
	text-decoration:none;
}
.social-link a:link{
	color:#730912;
	text-decoration:none;
}
.social-link a:visited{
	color:#730912;
	text-decoration:none;
}

/*------------------about page-------------------*/
#title_container{
	background-color:#ecefdf;
	width: 100%;
	height:auto;
	padding:1.5rem 8rem;
	position: relative;
	overflow: hidden;
}
#middle_container2 {
    display: flex;
    align-items: flex-start;
	gap:1rem;
	padding:2rem;
	background-color:#ecefdf;
}

#profile_container {
    width: 30%;
}

#description_container {
    width: 67%;
}
#description_container p{
	text-align:left;
	line-height: 1.6;
	width:96%;
	margin:0 4rem;
}
.kat {
	width: 100%;
	height: 100%;
	margin: 2%;
}

.kat img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
	border-radius: 1rem; 
}
.flower2 {
	display: none;
}
/*-----------------how it works------------------*/
#how_title_container {
  text-align: center;
  width: 100%;
  padding: 2rem;
  background-color:#a3cca6;
}
#timeline_container{
	background-color:#a3cca6;
	width: 100%;
	height:auto;
	display: flex;
	padding: 2rem;
}
#how_container{
	background-color:#ecefdf;
	width:100%;
	height:auto;
	display: flex;
	padding: 2rem;
}
#left_container,
#right_container {
  width: 50%;
}
#left_container p{
	text-align:left;
	line-height: 1.6;
	width:96%;
	margin:0 4rem;
}
#right_container p{
	text-align:center;
	line-height: 1.6;
	width:96%;
	margin:0;
}
.slideshow-container {
  width: 60%;
  margin: 0 auto;
  aspect-ratio: 1/1;
  position:relative;
  overflow: hidden;
}
.process {
  display: none;
  width: 100%;
  height: 100%;
}
.process img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 1rem;
  color: #d29388;
  font-weight: bold;
  font-size: 5rem;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.prev {
  left: 1rem;
}

.next {
  right: 1rem;
}

.prev:hover, .next:hover {
  color: #bf636b;
}

/*-------------------forms-----------------------*/
input[type=text], input[type=date], input[type=email], input[type=number],select, textarea{
	width:100%;
	padding:0.8rem;
	border-radius:0.3rem;
	margin-top:0.5rem;
	margin-bottom:1rem;
	resize:vertical;
}

input[type=submit]{
	background-color:#d29388;
	color:#730912;
	border:none;
	border-radius:1rem;
	cursor:pointer;
	font-size:1.5rem;
	padding:0.5rem;
	margin:1rem;
}

input[type=submit]:hover{
	background-color:#bf636b;
}

fieldset {
  border: none;
  margin-bottom: 1rem;
}

/*------------------events---------------------*/
.section_title {
    text-align: center;
    padding: 2rem 0;
    background-color: #a3cca6;
}
.section2_title {
    text-align: center;
    padding: 2rem 0;
    background-color: #ecefdf;
}

#intro_container {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
	background-color:#a3cca6;
	width: 100%;
	height:auto;
	padding:1.5rem 2rem;
}

.event_card {
    width: 35%;
    text-align: center;
}

.event_link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #d29388;
    text-decoration: none;
    color: inherit;
    padding: 1.5rem 0;
    width: 100%;
    margin: 0;
}

.event_link:hover {
    background-color: #bf636b;
}

.image_container {
    width: 80%;
    margin: 0 auto 1rem auto;
}

.image_container img {
    width: 100%;
	height:100%;
    object-fit: cover;
    display: block;
}

#priv_container {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
	background-color:#ecefdf;
	width: 100%;
	height:auto;
	padding:1.5rem 2rem;
}
.private {
	position: relative;
	text-align: center;
	width:25%
}
.private img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
.text_overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  	font-family:chonburi;
	font-size:2rem;
	font-weight:bold;
	color:#ecefdf;
	padding:0.5rem;
}
/* ---------------------for laptops --------------------*/
@media (max-width: 1500px) {

	.logo img{
		height:5rem;
	}
	.nav_bar {
		padding:0 2rem;
		gap:3rem;
	}
	#nav_bar_list{
		gap:1.5rem;
	}
	#nav_bar_list li{
		font-size:1.5rem;
	}
	h1{
		font-size:4rem;
	}
	h2{
		font-size:2rem;
	}
	h3{
		font-size:2rem;
		margin:1rem;
	}
	h4{
		font-size:2rem;
		padding:1rem 0 1rem 0;
	}
	h5{
		font-size:1rem;
	}
	p{
		font-size:1rem;
		padding:1rem 0 1rem 0;
	}
	#intro_container{
		padding:1.5rem 3rem;
	}
	#middle_container{
		padding:3rem;
	}
	#footer_container{
		font-size:1.1rem;
	}
	.flower {
		width: 20rem; 
	}
	.feature {
		margin:3rem;
	}
	#subheading1_container{
		padding:1rem;
	}
	#subheading2_container{
		padding:1rem;
	}
	#description_container p{
		width:100%;
		margin:0 2rem;
	}
	#left_container p{
	width:96%;
	margin:0 2rem;
	line-height: 1.2;
	}
	#right_container p{
	line-height: 1.2;
	}
	.prev, .next {
		font-size: 4rem;
	}

}


/* --------------for tablets ----------------------*/
@media (max-width: 1200px) {

	.logo img{
		height:4rem;
	}
	.nav_bar {
		padding:0 2rem;
		gap:2rem;
	}
	#nav_bar_list{
		gap:1rem;
	}
	#nav_bar_list li{
		font-size:1.2rem;
	}
	h1{
		font-size:4rem;
	}
	h2{
		font-size:2rem;
	}
	h3{
		font-size:2rem;
		margin:1rem;
	}
	p{
		font-size:1rem;
		padding:1rem 0 1rem 0;
		width:60vw;
	}
	h4{
		font-size:2rem;
		padding:0.5rem 0 0.5rem 0;
	
	}
	h5{
		font-size:1rem;
	}
	#intro_container{
		padding:1.5rem 3rem;
	}
	#middle_container{
		padding:3rem;
	}
	#middle_container2{
		position:relative;
		z-index:1;
	}
	.flower {
		width: 15rem; 
	}
	.flower2 {
		position:absolute;
		width: 10rem; 
		opacity: 0.6;
		z-index:0;
		display: block;
		bottom: -1rem;
		left:-1rem;
	}
	.feature {
		margin:3rem;
	}
	#footer_container{
		position:relative;
		z-index:2;
		font-size:1rem;
	}
	#subheading1_container{
		padding:1rem;
	}
	#subheading2_container{
		padding:1rem;
	}
	#title_container {
		padding: 1rem;
	}
	.slideshow-container {
		width: 70%;
	}
	.prev, .next {
		font-size: 3rem;
	}
}

/*----------- for phones ----------------*/
@media (max-width: 800px) {
	.mobile_nav {
		display: block;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 6;
	}
	.nav_bar {
        display: flex;  
        justify-content: flex-end; 
        align-items: center;
        padding: 0 1rem;
    }
    #nav_bar_list {
        display: none; 
    }
    .logo {
        display: block;
        height: 2.5rem;
    }
	.hamburger {
		position: absolute;
		top: 1rem;
		left: 1rem;
		z-index: 7; 
		width: 2rem;
		height: 2rem;
		cursor: pointer;
		flex-direction: column;
		justify-content: space-between;
		display: flex;
	}
	.hamburger span {
		display: block;
		height: 0.25rem;
		width: 100%;
		background-color:#ecefdf;
		border-radius: 0.25rem;
	}
	.mobile_menu {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 1.5rem; 
		left: 0;
		width: 10rem;
		padding: 1rem;
		list-style: none;
		z-index: 4;
		font-size:1.2rem;
	}
	.mobile_menu li {
		margin:0.25rem 0;
		color:#ecefdf;
	}
	.mobile_menu li a {
		color:#ecefdf;
		text-decoration: none;
	}
	.mobile_menu li a:hover {
		color:#d29388;
		text-decoration:none;
	}
	.mobile_menu.active {
		display: flex;
	}
	
	h1{
		font-size:3rem;
	}
	h2{
		font-size:1.2rem;
		padding:0rem;
	}
	h3{
		font-size:1.5rem;
		margin:0.5rem;
	}
	p{
		font-size:1rem;
		padding:1rem 0;
		width:80vw;
	}
	h5{
		font-size:1rem;
	}
	#intro_container{
		padding:1rem;
	}
	#middle_container{
		padding:1.5rem;
	}
	.flower {
		width: 10rem; 
	}
	.flower2 {
		display: none;
	}
	.feature {
		margin:1rem;
	}
	#subheading1_container{
		padding:0.5rem;
		transform:translate(-10%, -50%);
	}
	#subheading2_container{
		padding:0.5rem;
		transform:translate(-90%, -50%);
	}
	#footer_container{
		display:flex;
		flex-direction: column;  
		justify-content: space-between;
		align-items: center;
		font-size:1rem;
		text-align:center;
	}
	.social-links {
		display: flex;
		flex-direction: column;  
		gap: 0.5rem;
	}
	.icon {
		width: 1.5rem;
		height: 1.5rem;
	}
	.footer_logo img {
		display: none;
	}
	#middle_container2 {
        flex-direction: column; 
        align-items: center;    
		gap:1.5rem;
		text-align:center;
    }

    #profile_container {
        width: 100%;
		max-width:400px;
    }

    #description_container { 
        width: 100%;
        max-width:600px;
    }
	#description_container p{
		text-align:center;
		margin:0;
	}
	#description_container h3{
		text-align:center;
		margin:0;
	}
	#timeline_container,
	#how_container {
		flex-direction: column;
		align-items: center;
		gap: 2rem;
		padding-top:1rem;
	}
	#how_container #right_container {
		order: 1;
	}
	#how_container #left_container {
		order: 2;
	}
	#left_container,
	#right_container {
		width: 100%;
	}
	#left_container p,
	#right_container p {
		width: 90%;
		margin: 0 auto;
		text-align: center;
	}
	.slideshow-container {
		width: 70%;
	}
	
	input[type=submit]{
		border-radius:0.5rem;
		cursor:pointer;
		font-size:1rem;
		padding:0.5rem;
		margin:0.5rem;
	}
	.section_title {
		padding-bottom: 1rem;
		padding-top: 1rem;
	}
	.event_card {
        width: 60%;
    }
	.private {
		width:60%
	}
	.text_overlay {
		font-size:1.5rem;
	}
}

@media (max-width: 500px) {
	.logo {
        display: block;
        height: 2rem;
    }
	.mobile_nav {
		display: block;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 6;
	}
	.hamburger {
		position: absolute;
		top: 1rem;
		left: 1rem;
		z-index: 7; 
		width: 2rem;
		height: 2rem;
		cursor: pointer;
		flex-direction: column;
		justify-content: space-between;
		display: flex;
	}
	.hamburger span {
		display: block;
		height: 0.25rem;
		width: 100%;
		background-color:#ecefdf;
		border-radius: 0.25rem;
	}
	.mobile_menu {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 1.5rem; 
		left: 0;
		width: 10rem;
		padding: 1rem;
		list-style: none;
		z-index: 4;
		font-size:1rem;
	}
	.mobile_menu li {
		margin:0.25rem 0;
		color:#ecefdf;
	}
	.mobile_menu li a {
		color:#ecefdf;
		text-decoration: none;
	}
	.mobile_menu li a:hover {
		text-decoration: none;
	}
	.mobile_menu.active {
		display: flex;
	}
	
	h1{
		font-size:3rem;
		padding: 0;
		margin:0;
	}
	h2{
		font-size:1.2rem;
		padding:0rem;
	}
	h3{
		font-size:1.2rem;
		margin:0.5rem;
	}
	h4{
		font-size:1.2rem;
		padding: 0;
		margin:0;
	}
	p{
		font-size:1rem;
	}
	h5{
		font-size:1rem;
	}
	#intro_container{
		padding:1rem;
	}
	#middle_container{
		padding:1.5rem;
	}
	.flower {
		width: 5rem; 
	}
	.feature {
		margin:1rem;
	}
	#subheading1_container{
		padding:0.5rem;
		transform:translate(-10%, -50%);
	}
	#subheading2_container{
		padding:0.5rem;
		transform:translate(-90%, -50%);
	}
	 #profile_container {
		max-width:300px;
    }
	#title_container {
		padding:1rem 0 0 0;
	}
	#timeline_container{
		padding-top:1rem;
	}
	.slideshow-container {
		width: 90%;
	}
	.prev, .next {
		font-size: 3rem;
	}
	.section_title {
		padding-bottom: 1rem;
		padding-top: 1rem;
	}
	.event_card {
        width: 70%;
    }
}