:root {
	--wtd-23-pink-dark: #f552ba;
	--clr-purple-5: #f6f5f9;
	--clr-primary-100: #007377;
	--clr-secondary-dark-100: #004851;
	--clr-primary-lime-60: #d3d766;
	--clr-bg-btn: #d3d766;
	--clr-main-bg: #f2fafc;
	--clr-white: #fff;
	--clr-text: #333;
	--ff-base: 'Swis721 BT-roman', sans-serif;

	--fw-regular: 300;
	--fw-semi-bold: 400;
	--fw-bold: 700;

	--fs-200: 0.875rem;
	--fs-300: 1rem;
	--fs-400: 1.125rem;
	--fs-500: 1.375rem;
	--fs-600: 1.75rem;
	--fs-700: clamp(2rem, 10vw - 0.5rem, 3.25rem);
}
/* start header section*/
#stage {
	min-height: 450px;
}
.header {
	height: 50vh;
	position: relative;
	/* background-image:
    url("../img/hats/hatsoff-stacked-1.png"); */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	margin: 0 auto;
	padding-top: 60px;
	padding-bottom: 60px;
}

.logo-box {
	width: 500px;
	/* height: 500px; */
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Nav section */
#wtd-dets-band {
	background-color: var(--clr-secondary-dark-100);
}
.nav-section {
	/* position: fixed; */
	width: 100%;
	top: 0;
	background-color: var(--clr-secondary-dark-100);
	margin: 0 auto;
}
.nav-list {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	max-width: 1200px;
	padding: 0.2375rem 0rem;
	margin: 0 auto;
	background-color: var(--clr-secondary-dark-100);
	color: white;
	gap: 2rem;
	flex-wrap: wrap;
}

.nav-list .nav-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	/* background-color: var(--clr-purple-5); */
	color: var(--clr-white);
	display: flex;
	padding: 0.325rem 0.4375rem;
	gap: 0.3125rem;
	border-radius: 0.25rem;
}
.nav-list .nav-item .nav-link {
	font-family: 'Mulish';
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--clr-white);
	text-decoration: none;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.00938rem;
	transition: all 0.3s ease-in-out;
	opacity: 1;
	cursor: pointer;
}
.nav-list .nav-item .nav-link:hover,
.nav-list .nav-item .nav-link:focus {
	background-color: var(--clr-secondary-dark-100);
	color: #F8BEF4;
}

.nav-section .nav-list .no-bg-item {
	background-color: var(--wtd-23-pink-dark);
	color: var(--clr-white);
}
.nav-section .nav-list .no-bg-item:hover {
	background-color: var(--clr-white);
	color: var(--wtd-23-pink-dark);
}

.nav-section .nav-list .no-bg-item .no-bg:hover {
	background-color: var(--clr-white);
	color: var(--wtd-23-pink-dark);
	font-size: 1rem;
}

/* media wall button */
#embed-hook .tb_see_more_btn_wrap {
	margin-top:1rem;
}
#embed-hook  .tb_see_more_btn {
	font-size: 21px;
	color: white;
	font-family: 'Mulish';
	background-color: #EE20A3;
	border-radius: 30px;
	padding: 16px 40px 16px 40px;
	border: none;
	transition: all 0.3s ease-in-out;
}
#embed-hook  .tb_see_more_btn:hover {
	background-color: white;
	color: #EE20A3;
	border-radius: 30px;
	border:none;
}

/* navbar media queries */
@media screen and (max-width: 768px) {
	#stage {
		min-height: 450px;
	}
	/* logo box*/
	.header {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.logo-box {
		width: 300px;
		/* height: 300px; */
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.logo-box img {
		width: 300px;
		/* height: 300px; */
	}
	.nav-section .nav-list {
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		gap: 0.3rem;
		padding: 2rem 0;
	}
	.nav-section .nav-list .nav-item {
		align-items: center;
		justify-content: flex-start;
		padding: 0.2rem 0.3375rem;
	}
}

@media screen and (max-width: 400px) {
	#stage {
		min-height: 300px;
	}
	.header {
		height: 30vh;
		padding-bottom: 2rem;
	}
	.logo-box {
		width: 250px;
		/* height: 250px; */
		position: absolute;
		top: 70%;
		left: 50%;
		transform: translate(-50%, -30%);
		
	}
	.logo-box img {
		width: 250px;
		/* height: 250px; */
	}
	#last-words .column-1 .last-words-box .list li {
   
    font-size: 1rem;
   
}
	
}
