#home {
	height: 100lvh;
	display: flex;
	justify-content: center;
	align-items: center;
}

#home .container-fluid {
	height: 100vh;
	overflow: hidden;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

#home .background-image {
	background-image: url("https://res.cloudinary.com/dbn8mpr7r/image/upload/v1764267460/homepage_top_section_hero_image_bg_mu1jm5.jpg");
	@media only screen and (max-width: 767px) {
		background-image: url("https://res.cloudinary.com/dbn8mpr7r/image/upload/v1764267492/homepage_top_section_bg_mob_aa3pcx.jpg");
	}
	background-size: 120% 120%;
	height: 100vh;
    width: 100%;
	background-position: center;
    object-fit: cover;
    background-repeat: no-repeat;
    -webkit-transition: all 5s;
    -moz-transition: all 5s;
    -o-transition: all 5s;
    transition: all 5s linear 1s;
	position: absolute;
	top:0;
	left:0;
	z-index: -1;	
}

#home.zoom .background-image {
	background-size: 100% 100%;
}

#home .content-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

#home .logo {
	max-width: 100%;
	height: auto;
	padding: 10px;
}

#home h1 {
	color: var(--MutedGold);
	font-size: 4rem;
	background-color: #0000000f;
}

#home hr {
	width: 50%;
	max-width: 500px;
}

#home .section-button {
	margin-top: 50px;
	padding: 1rem 2rem;
	font-size: 1.5rem;
}

/*----------------------------------------*/
#about-us {
	height: 100lvh;
}

#about-us h1 {
	color: var(--SophisticatedEmeraldGreen);
	text-align: center;
}

#about-us img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-us-main-content {
	background-image: url("https://res.cloudinary.com/dbn8mpr7r/image/upload/v1765196968/homepage_about_us_text_area_bg_nyungf.jpg");
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	height: 100vh;
	@media only screen and (max-width: 767px) {
		/* font-size: 0.9rem; */
        padding: 0;
	}
}

.about-us-text {
    margin: 1rem;
    border: 2px dashed #000;
    @media only screen and (max-width: 767px) {
		font-size: 0.8rem;
        margin: .5rem;
	}
}

.about-us-text p {
	margin-bottom: 8px;
	@media only screen and (max-width: 767px) {
        margin: .0;
	}
}

.about-us-text p:first-of-type {
	font-weight: bold;
}

#about-us li span {
	font-weight: bold;
}

#about-us .button-container {
	width: 100%;
	text-align: center;
}

#about-us .section-button {
	width: 80%;
	padding: 1rem;
	@media only screen and (max-width: 767px) {
		font-size: 0.9rem;
		padding: .5rem;
	}
}

/* -------------------------------------------------- */
#explore-bars {
	background: linear-gradient(
		var(--SophisticatedEmeraldGreen) 0%,
		var(--SophisticatedEmeraldGreen) 70%,
		#000 100%
	);
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#explore-bars h1 {
	color: #fff;
	text-align: center;
}

#explore-bars .section-content {
	height: 85vh;
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: center;
}

#explore-bars .section-text {
	max-width: 1200px;
	color: #fff;
}

#explore-bars .card-container {
	height: 90%;
	display: flex;
	justify-content: center;
	align-content: space-around;
}

#explore-bars .card {
	width: auto;
	position: relative;
	border-radius: 0;
	background-color: transparent;
	border: none;
}

#explore-bars .card img {
	max-width: 95%;
	height:auto;
	border: 2px solid #fff;
	margin: auto;
	object-fit: contain;
	@media only screen and (max-width: 767px) {
		max-height: 18vh;
		width:auto;
	}
}

#explore-bars .card .section-button {
	position: absolute;
	min-width: 50%;
	bottom: 10px;
	left: 50%;
	transform: translate(-50%);
	@media only screen and (max-width: 767px) {
        border: 2px solid var(--MutedGold);
    	border-radius: 5px;
		padding: 0 5px;
		font-size: 0.9rem;
	}
}

.card-link {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
}

/* ------------------------------------------- */
#food-music {
	background: linear-gradient(
		var(--WarmCream) 0%,
		var(--WarmCream) 70%,
		#000 100%
	);
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: var(--SophisticatedEmeraldGreen);
}

#food-music h1 {
	color: var(--SophisticatedEmeraldGreen);
	text-align: center;
	margin: 0;
}

#food-music .section-content {
	height: 85vh;
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: center;
}

#food-music .section-text {
	max-width: 1200px;
	@media only screen and (max-width: 767px) {
		font-size: 0.85rem;
	}
}

#food-music .card-container {
	height: 90%;
	/* flex-wrap: wrap; */
	display: flex;
	justify-content: center;
	align-content: space-around;
}

#food-music .card {
	width: auto;
	position: relative;
	margin-bottom: 12px;
	border-radius: 0;
	background-color: transparent;
	border: none;
}
/**/
#food-music .card img {
	max-width: 95%;
	height: auto;
	border: 2px solid var(--SophisticatedEmeraldGreen);
	margin: auto;
	object-fit: contain;
	@media only screen and (max-width: 767px) {
		max-height: 25vh;
		width: 80%;
		object-fit: cover;
	}
}

#food-music .card .section-button {
	position: absolute;
	width: 50%;
	bottom: 50px;
	left: 50%;
	transform: translate(-50%);
	@media only screen and (max-width: 767px) {
        border: 2px solid var(--MutedGold);
    	border-radius: 5px;
        bottom: 20px;
		padding: 0 5px;
		font-size: 0.9rem;
		width: 70%;
	}
}

/* ---------------------------------- */
#events {
	background: linear-gradient(
		var(--WarmCream) 0%,
		var(--WarmCream) 70%,
		#0b3323 100%
	);
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#events h1 {
	color: var(--SophisticatedEmeraldGreen);
	text-align: center;
}

#events .section-content {
	height: 85vh;
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: center;
}

#events .section-text {
	max-width: 1200px;
	color: var(--SophisticatedEmeraldGreen);
}

#events .card-container {
	height: 90%;
	display: flex;
	justify-content: center;
	align-content: space-around;
}

#events .card {
	width: auto;
	position: relative;
	border-radius: 0;
	background-color: transparent;
	border: none;
}

#events .card img {
	max-width: 95%;
	height:auto;
	border: 2px solid #fff;
	margin: auto;
	object-fit: contain;
	@media only screen and (max-width: 767px) {
		max-height: 18vh;
		width:auto;
	}
}

#events .card .section-button {
	position: absolute;
	width: auto;
	min-width: 50%;
	bottom: 10px;
	left: 50%;
	transform: translate(-50%);
	@media only screen and (max-width: 767px) {
        border: 2px solid var(--MutedGold);
    	border-radius: 5px;
		padding: 0 5px;
		font-size: 0.9rem;
	}
}

/* --------------------------------------- */
#testimonials {
	background: url("https://res.cloudinary.com/dbn8mpr7r/image/upload/v1765197044/homepage_testimonials_section_bg_nv8tot.jpg");
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
}

#testimonials h1 {
	text-align: center;
}

#testimonials .section-text {
	max-width: 1200px;
	@media only screen and (max-width: 767px) {
		font-size: 0.9rem;
	}
}

#testimonials li p:first-of-type {
	text-align: left;
}

#testimonials li p:last-of-type {
	text-align: right;
	font-weight: bold;
}

/* -------------------------------------------- */
#gallery {
	background: linear-gradient(
		var(--WarmCream) 0%,
		var(--WarmCream) 70%,
		#0b3323 100%
	);
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#gallery h1 {
	color: var(--SophisticatedEmeraldGreen);
	text-align: center;
}

#gallery .section-text {
	max-width: 1200px;
	@media only screen and (max-width: 767px) {
		font-size: 0.9rem;
	}
}

#carouselExampleInterval {
	height: 60vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.fas.fa-chevron-left, .fas.fa-chevron-right {
	background-color: var(--SophisticatedEmeraldGreen);
	color: var(--MutedGold);
	padding: 10px;
	border-radius: 5px;
}

.carousel-control-prev {
	justify-content: left;
	opacity: .75;
}

.carousel-control-next {
	justify-content: right;
	opacity: .75;
}

.carousel-caption {
	width: fit-content;
	margin: auto;
}

.carousel-item {
	text-align: center;
} 

.carousel-item img {
	object-fit: contain;
	max-height: 60vh;
	width: 100%;
}

.carousel-caption h5 {
	background-color: #00000054;
	padding: .5rem;
	border-radius: .5rem;
}


/* --------------------------------------- */
#contact-us {
	background: url("https://res.cloudinary.com/dbn8mpr7r/image/upload/v1765197151/homepage_contact_us-section_bg_hlwcqk.jpg");
	object-fit: cover;
	background-position: center;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: var(--SophisticatedEmeraldGreen);
}

#contact-us h1 {
	text-align: center;
	color: var(--SophisticatedEmeraldGreen);
}

#contact-us .section-text {
	max-width: 1200px;
	@media only screen and (max-width: 767px) {
		font-size: 0.9rem;
		margin-bottom: 3px;
	}
}

#contact-us .form-wrapper {
	padding: 0 10px;
	text-align: center;
    /* background-color: #00000012; */
    border-radius: var(--bs-border-radius);

}

#contact-us .message-wrapper {
	width: 100%;
	padding-top: 1rem;
	border: 2px solid var(--SophisticatedEmeraldGreen);
}

#contact-us input:not(#form-submit) {
	border: 1px solid #000;
	width: 100%;
}

#contact-us textarea {
	border: 1px solid #000;
	width: 100%;
}

#contact-us .section-button {
    width: 50%;
	@media only screen and (max-width: 767px) {
		padding: 3px;
		font-size: 0.9rem;
        width: 80%;
	}
}

#contact-us .address {
	text-align: left;
	border-right: 2px solid var(--SophisticatedEmeraldGreen);
}

#contact-us .address p {
	@media only screen and (max-width: 767px) {
		font-size: 0.9rem;
		margin-bottom: 3px;
	}
}

#contact-us .sm-icons {
	/* height: 100%; */
	display: flex;
	flex-direction: column;
	/* align-items: center; */
}

#contact-us .sm-icons .row {
	flex: 1;
}

#contact-us .fab {
	/* padding: 0; */
	margin: auto;
}

/*--------------- Floating Label Start ----------------*/
/*-----Taken from https://codepen.io/devesh8/pen/MWYEJEP -----------*/
.did-floating-label-content {
	position: relative;
	width: 100%;
	margin: 10px 0;
}
.did-floating-label {
	font-size: 0.85rem;
	position: absolute;
	pointer-events: none;
	left: 15px;
	top: 7px;
	padding: 0 5px;
	background: #fff;
	transition: 0.2s ease all;
	-moz-transition: 0.2s ease all;
	-webkit-transition: 0.2s ease all;
}

.did-floating-input:not(:placeholder-shown) ~ .did-floating-label,
.did-floating-select:not([value=""]):valid ~ .did-floating-label {
	top: -9px;
	font-size: 11px;
	background: var(--SophisticatedEmeraldGreen);
	color: var(--generalCream);
	border-radius: 4px;
}